fix(select): add icon support to select

wework · Mar 2, 2019 · 49a2359 · 49a2359
1 parent 44f2ff3
commit 49a2359
Show file tree

Hide file tree

Showing 2 changed files with 122 additions and 0 deletions.
diff --git a/packages/core/lib/components/select/_select.scss b/packages/core/lib/components/select/_select.scss
@@ -1,11 +1,14 @@
 @import '../../global/mixins/form-items';
 
+$ray-icon-width: 1rem;
+
 .#{$ray-class-prefix}select {
   border: $ray-border-width solid $ray-color-gray-60;
   background-color: $ray-color-white;
   border-radius: $ray-border-radius;
   position: relative;
   height: $ray-field-height;
+  display: flex;
 
   &::after {
     content: '';
@@ -50,6 +53,40 @@
     }
   }
 
+  @mixin icon {
+    width: 1rem;
+    height: 1rem;
+    position: absolute;
+    line-height: 1;
+    top: 20px;
+    border-radius: 2px;
+  }
+
+  &__icon--left {
+    @include icon;
+    left: $ray-field-h-spacing;
+  }
+
+  &__icon--right {
+    @include icon;
+    // add spacing to compensate for the
+    right: calc(#{$ray-field-h-spacing} * 2 + 12px);
+  }
+
+  &--with-icon-left {
+    .#{$ray-class-prefix}select__input,
+    .#{$ray-class-prefix}select__label {
+      padding-left: calc(#{$ray-field-h-spacing} * 2 + #{$ray-icon-width});
+    }
+  }
+
+  &--with-icon-right {
+    .#{$ray-class-prefix}select__input,
+    .#{$ray-class-prefix}select__label {
+      padding-right: calc(#{$ray-field-h-spacing} * 2 + #{$ray-icon-width});
+    }
+  }
+
   &--has-value {
     .#{$ray-class-prefix}select__label {
       @include label--active;
@@ -107,6 +144,11 @@
       padding-top: 0;
       padding-bottom: 0;
     }
+
+    .#{$ray-class-prefix}select__icon--left,
+    .#{$ray-class-prefix}select__icon--right {
+      top: $ray-field-v-spacing-compact;
+    }
   }
 
   &--disabled {

diff --git a/packages/core/stories/select.stories.js b/packages/core/stories/select.stories.js
@@ -183,4 +183,84 @@ storiesOf('Select', module)
         </div>
       </>
     );
+  })
+  .addWithJSX('select, with icon', () => {
+    setTimeout(init);
+
+    return withPadding(
+      <>
+        <div className="ray-form-item">
+          <div className="ray-select ray-select--with-icon-left">
+            <div className="ray-select__icon--left">😜</div>
+
+            <select className="ray-select__input">
+              <option value="" disabled selected data-ray-placeholder />
+              <option value="Pikachu">Pikachu</option>
+              <option value="Squirtle">Squirtle</option>
+              <option value="Bulbasaur">Bulbasaur</option>
+              <option value="Charmander">Charmander</option>
+            </select>
+
+            <label className="ray-select__label">
+              {"What's your starter Pokémon?"}
+            </label>
+          </div>
+        </div>
+
+        <div className="ray-form-item">
+          <div className="ray-select ray-select--with-icon-left ray-select--with-icon-right">
+            <div className="ray-select__icon--left">🤖</div>
+            <div className="ray-select__icon--right">👽</div>
+
+            <select className="ray-select__input">
+              <option value="" disabled selected data-ray-placeholder />
+              <option value="Pikachu">Pikachu</option>
+              <option value="Squirtle">Squirtle</option>
+              <option value="Bulbasaur">Bulbasaur</option>
+              <option value="Charmander">Charmander</option>
+            </select>
+
+            <label className="ray-select__label">
+              {"What's your starter Pokémon?"}
+            </label>
+          </div>
+        </div>
+
+        <div className="ray-form-item">
+          <div className="ray-select ray-select--with-icon-right">
+            <div className="ray-select__icon--right">🙏</div>
+
+            <select className="ray-select__input">
+              <option value="" disabled selected data-ray-placeholder />
+              <option value="Pikachu">Pikachu</option>
+              <option value="Squirtle">Squirtle</option>
+              <option value="Bulbasaur">Bulbasaur</option>
+              <option value="Charmander">Charmander</option>
+            </select>
+
+            <label className="ray-select__label">
+              {"What's your starter Pokémon?"}
+            </label>
+          </div>
+        </div>
+
+        <div className="ray-form-item">
+          <div className="ray-select ray-select--compact ray-select--with-icon-left">
+            <div className="ray-select__icon--left">🏂</div>
+
+            <select className="ray-select__input">
+              <option value="" disabled selected data-ray-placeholder />
+              <option value="Pikachu">Pikachu</option>
+              <option value="Squirtle">Squirtle</option>
+              <option value="Bulbasaur">Bulbasaur</option>
+              <option value="Charmander">Charmander</option>
+            </select>
+
+            <label className="ray-select__label">
+              {"What's your starter Pokémon?"}
+            </label>
+          </div>
+        </div>
+      </>
+    );
   });