fix(select): don't move label on focus/active (#89)

* fix(select): don't move label on focus/active fix #88 * fix(select): handle select placeholder mode
wework · May 15, 2019 · ebfd737 · ebfd737
1 parent a1b48d6
commit ebfd737
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/packages/core/src/components/select/_select.scss b/packages/core/src/components/select/_select.scss
@@ -63,6 +63,12 @@
       }
     }
 
+    &--placeholder-mode {
+      .#{$ray-class-prefix}select__input {
+        color: rgba(0, 0, 0, 0);
+      }
+    }
+
     &--has-value {
       .#{$ray-class-prefix}select__label {
         @include label--active;
@@ -93,11 +99,14 @@
       }
 
       .#{$ray-class-prefix}select__label {
-        @include label--active;
         color: $ray-color-blue-50;
       }
 
       &.#{$ray-class-prefix}select--placeholder-mode {
+        .#{$ray-class-prefix}select__label {
+          @include label--active;
+        }
+
         .#{$ray-class-prefix}select__input {
           color: $ray-color-text-light;
         }

diff --git a/packages/core/stories/select.stories.js b/packages/core/stories/select.stories.js
@@ -68,9 +68,7 @@ storiesOf('Select', module)
     return (
       <div className="ray-select">
         <select className="ray-select__input" required>
-          <option value="" disabled selected data-ray-placeholder>
-            {"Hi, I'm a placeholder"}
-          </option>
+          <option value="" disabled selected data-ray-placeholder />
           <option value="Pikatchu">Pikatchu</option>
           <option value="Squirtle">Squirtle</option>
           <option value="Charmander">Charmander</option>