feat(component): prepend support on textfield & select

BREAKING CHANGE: textfields and selects that have icons (and not prepends) need to be wrapped in an extra div with a class name of "#{$ray-class-prefix}#{$class}__wrapper" re #81
wework · May 10, 2019 · e9ef9d6 · e9ef9d6
1 parent 3d0e76e
commit e9ef9d6
Show file tree

Hide file tree

Showing 11 changed files with 399 additions and 170 deletions.
diff --git a/docs/components/select.md b/docs/components/select.md
@@ -5,31 +5,38 @@ title: Select
 
 <page-intro>Text fields within the system have a standard Size and a compact Size. Our fields are outlined and become activated with our primary color using the rules we set up in our affordances. These components have several elements, not all of which are required.</page-intro>
 
-<component 
+<component
     name="With placeholder"
     component="select"
-    variation="select--with-placeholder" 
+    variation="select--with-placeholder"
     >
 </component>
 
-<component 
+<component
     name="Compact"
     component="select"
-    variation="select--compact" 
+    variation="select--compact"
     >
 </component>
 
-<component 
+<component
     name="Error"
     component="select"
-    variation="select--error" 
+    variation="select--error"
     >
 </component>
 
-<component 
+<component
     name="With icon"
     component="select"
-    variation="select-with-icon" 
+    variation="select-with-icon"
+    >
+</component>
+
+<component
+    name="With prepend"
+    component="select"
+    variation="select-with-prepend"
     >
 </component>
 

diff --git a/docs/components/text-field.md b/docs/components/text-field.md
@@ -40,6 +40,13 @@ title: Text Field
     >
 </component>
 
+<component
+    name="Text field with prepend"
+    component="text-field"
+    variation="text-field-with-prepend"
+    >
+</component>
+
 ## Adding hints
 
 Use these modifiers with `.ray-form-item__hint` class.

diff --git a/docs/html/select/select-with-icon.html b/docs/html/select/select-with-icon.html
@@ -1,22 +1,25 @@
 <div class="ray-form-item">
   <div class="ray-select ray-select--with-icon-left">
-    <svg class="ray-select__icon--left" viewBox="0 0 25 25">
-      <g id="budicon-profile-picture">
-        <path
-          d="M12.5,4A4.5,4.5,0,1,0,17,8.5,4.5,4.5,0,0,0,12.5,4Zm0,8A3.5,3.5,0,1,1,16,8.5,3.504,3.504,0,0,1,12.5,12Zm0-12A12.4886,12.4886,0,0,0,5.0007,22.4834v0a12.4325,12.4325,0,0,0,14.9983,0v0q.5-.3761.9593-.7988l0,0A12.4869,12.4869,0,0,0,12.5,0Zm0,24a11.4432,11.4432,0,0,1-7.3931-2.7041,7.4887,7.4887,0,0,1,14.7863,0A11.4432,11.4432,0,0,1,12.5,24Zm8.25-3.5061a8.4871,8.4871,0,0,0-16.5,0,11.5,11.5,0,1,1,16.5,0Z"
-        />
-      </g>
-    </svg>
-    <select class="ray-select__input">
-      <option value="" disabled selected data-ray-placeholder></option>
-      <option value="Pikachu">WeWork</option>
-      <option value="Squirtle">WeLive</option>
-      <option value="Bulbasaur">WeGrow</option>
-      <option value="Charmander">WeTech</option>
-    </select>
-
-    <label class="ray-select__label">
-      Better Together
-    </label>
+    <div class="ray-select__icon--left">
+      <svg viewBox="0 0 25 25" style="height: 1rem;">
+        <g id="budicon-profile-picture">
+          <path
+            d="M12.5,4A4.5,4.5,0,1,0,17,8.5,4.5,4.5,0,0,0,12.5,4Zm0,8A3.5,3.5,0,1,1,16,8.5,3.504,3.504,0,0,1,12.5,12Zm0-12A12.4886,12.4886,0,0,0,5.0007,22.4834v0a12.4325,12.4325,0,0,0,14.9983,0v0q.5-.3761.9593-.7988l0,0A12.4869,12.4869,0,0,0,12.5,0Zm0,24a11.4432,11.4432,0,0,1-7.3931-2.7041,7.4887,7.4887,0,0,1,14.7863,0A11.4432,11.4432,0,0,1,12.5,24Zm8.25-3.5061a8.4871,8.4871,0,0,0-16.5,0,11.5,11.5,0,1,1,16.5,0Z"
+          />
+        </g>
+      </svg>
+    </div>
+    <div class="ray-select__wrapper">
+      <select class="ray-select__input">
+        <option value="" disabled selected data-ray-placeholder></option>
+        <option value="Pikachu">WeWork</option>
+        <option value="Squirtle">WeLive</option>
+        <option value="Bulbasaur">WeGrow</option>
+        <option value="Charmander">WeTech</option>
+      </select>
+      <label class="ray-select__label">
+        Better Together
+      </label>
+    </div>
   </div>
 </div>
diff --git a/docs/html/select/select-with-prepend.html b/docs/html/select/select-with-prepend.html
@@ -0,0 +1,26 @@
+<div class="ray-form-item">
+  <div class="ray-select ray-select--with-prepend">
+    <div class="ray-select__prepend">
+      <svg viewBox="0 0 25 25" style="height: 1rem;">
+        <g id="budicon-profile-picture">
+          <path
+            d="M12.5,4A4.5,4.5,0,1,0,17,8.5,4.5,4.5,0,0,0,12.5,4Zm0,8A3.5,3.5,0,1,1,16,8.5,3.504,3.504,0,0,1,12.5,12Zm0-12A12.4886,12.4886,0,0,0,5.0007,22.4834v0a12.4325,12.4325,0,0,0,14.9983,0v0q.5-.3761.9593-.7988l0,0A12.4869,12.4869,0,0,0,12.5,0Zm0,24a11.4432,11.4432,0,0,1-7.3931-2.7041,7.4887,7.4887,0,0,1,14.7863,0A11.4432,11.4432,0,0,1,12.5,24Zm8.25-3.5061a8.4871,8.4871,0,0,0-16.5,0,11.5,11.5,0,1,1,16.5,0Z"
+          />
+        </g>
+      </svg>
+    </div>
+    <div class="ray-select__wrapper">
+      <select class="ray-select__input">
+        <option value="" disabled selected data-ray-placeholder></option>
+        <option value="Pikachu">WeWork</option>
+        <option value="Squirtle">WeLive</option>
+        <option value="Bulbasaur">WeGrow</option>
+        <option value="Charmander">WeTech</option>
+      </select>
+
+      <label class="ray-select__label">
+        Better Together
+      </label>
+    </div>
+  </div>
+</div>
diff --git a/docs/html/text-field/text-field-with-icon.html b/docs/html/text-field/text-field-with-icon.html
@@ -1,43 +1,49 @@
 <div class="ray-form-item">
   <div class="ray-text-field ray-text-field--with-icon-left">
-    <svg class="ray-text-field__icon--left" viewBox="0 0 25 25">
-      <g id="budicon-profile-picture">
-        <path
-          d="M12.5,4A4.5,4.5,0,1,0,17,8.5,4.5,4.5,0,0,0,12.5,4Zm0,8A3.5,3.5,0,1,1,16,8.5,3.504,3.504,0,0,1,12.5,12Zm0-12A12.4886,12.4886,0,0,0,5.0007,22.4834v0a12.4325,12.4325,0,0,0,14.9983,0v0q.5-.3761.9593-.7988l0,0A12.4869,12.4869,0,0,0,12.5,0Zm0,24a11.4432,11.4432,0,0,1-7.3931-2.7041,7.4887,7.4887,0,0,1,14.7863,0A11.4432,11.4432,0,0,1,12.5,24Zm8.25-3.5061a8.4871,8.4871,0,0,0-16.5,0,11.5,11.5,0,1,1,16.5,0Z"
-        />
-      </g>
-    </svg>
-
-    <input
-      type="text"
-      class="ray-text-field__input"
-      id="input-with-icon"
-      placeholder="Few people are aware..."
-    />
-    <label class="ray-text-field__label" for="input-with-icon">
-      Fun fact about Ray Eames
-    </label>
+    <div class="ray-text-field__icon--left">
+      <svg viewBox="0 0 25 25" style="height: 1rem;">
+        <g id="budicon-profile-picture">
+          <path
+            d="M12.5,4A4.5,4.5,0,1,0,17,8.5,4.5,4.5,0,0,0,12.5,4Zm0,8A3.5,3.5,0,1,1,16,8.5,3.504,3.504,0,0,1,12.5,12Zm0-12A12.4886,12.4886,0,0,0,5.0007,22.4834v0a12.4325,12.4325,0,0,0,14.9983,0v0q.5-.3761.9593-.7988l0,0A12.4869,12.4869,0,0,0,12.5,0Zm0,24a11.4432,11.4432,0,0,1-7.3931-2.7041,7.4887,7.4887,0,0,1,14.7863,0A11.4432,11.4432,0,0,1,12.5,24Zm8.25-3.5061a8.4871,8.4871,0,0,0-16.5,0,11.5,11.5,0,1,1,16.5,0Z"
+          />
+        </g>
+      </svg>
+    </div>
+    <div class="ray-text-field__wrapper">
+      <input
+        type="text"
+        class="ray-text-field__input"
+        id="input-with-icon"
+        placeholder="Few people are aware..."
+      />
+      <label class="ray-text-field__label" for="input-with-icon">
+        Fun fact about Ray Eames
+      </label>
+    </div>
   </div>
 </div>
 
 <div class="ray-form-item">
   <div class="ray-text-field ray-text-field--with-icon-right">
-    <svg class="ray-text-field__icon--right" viewBox="0 0 25 25">
-      <g id="budicon-profile-picture">
-        <path
-          d="M12.5,4A4.5,4.5,0,1,0,17,8.5,4.5,4.5,0,0,0,12.5,4Zm0,8A3.5,3.5,0,1,1,16,8.5,3.504,3.504,0,0,1,12.5,12Zm0-12A12.4886,12.4886,0,0,0,5.0007,22.4834v0a12.4325,12.4325,0,0,0,14.9983,0v0q.5-.3761.9593-.7988l0,0A12.4869,12.4869,0,0,0,12.5,0Zm0,24a11.4432,11.4432,0,0,1-7.3931-2.7041,7.4887,7.4887,0,0,1,14.7863,0A11.4432,11.4432,0,0,1,12.5,24Zm8.25-3.5061a8.4871,8.4871,0,0,0-16.5,0,11.5,11.5,0,1,1,16.5,0Z"
-        />
-      </g>
-    </svg>
-
-    <input
-      type="text"
-      class="ray-text-field__input"
-      id="input-with-icon2"
-      placeholder="Few people are aware..."
-    />
-    <label class="ray-text-field__label" for="input-with-icon2">
-      Fun fact about Ray Eames
-    </label>
+    <div class="ray-text-field__icon--right">
+      <svg viewBox="0 0 25 25" style="height: 1rem;">
+        <g id="budicon-profile-picture">
+          <path
+            d="M12.5,4A4.5,4.5,0,1,0,17,8.5,4.5,4.5,0,0,0,12.5,4Zm0,8A3.5,3.5,0,1,1,16,8.5,3.504,3.504,0,0,1,12.5,12Zm0-12A12.4886,12.4886,0,0,0,5.0007,22.4834v0a12.4325,12.4325,0,0,0,14.9983,0v0q.5-.3761.9593-.7988l0,0A12.4869,12.4869,0,0,0,12.5,0Zm0,24a11.4432,11.4432,0,0,1-7.3931-2.7041,7.4887,7.4887,0,0,1,14.7863,0A11.4432,11.4432,0,0,1,12.5,24Zm8.25-3.5061a8.4871,8.4871,0,0,0-16.5,0,11.5,11.5,0,1,1,16.5,0Z"
+          />
+        </g>
+      </svg>
+    </div>
+    <div class="ray-text-field__wrapper">
+      <input
+        type="text"
+        class="ray-text-field__input"
+        id="input-with-icon2"
+        placeholder="Few people are aware..."
+      />
+      <label class="ray-text-field__label" for="input-with-icon2">
+        Fun fact about Ray Eames
+      </label>
+    </div>
   </div>
 </div>
diff --git a/docs/html/text-field/text-field-with-prepend.html b/docs/html/text-field/text-field-with-prepend.html
@@ -0,0 +1,24 @@
+<div class="ray-form-item">
+  <div class="ray-text-field ray-text-field--with-prepend">
+    <div class="ray-text-field__prepend">
+      <svg viewBox="0 0 25 25" style="height: 1rem;">
+        <g id="budicon-profile-picture">
+          <path
+            d="M12.5,4A4.5,4.5,0,1,0,17,8.5,4.5,4.5,0,0,0,12.5,4Zm0,8A3.5,3.5,0,1,1,16,8.5,3.504,3.504,0,0,1,12.5,12Zm0-12A12.4886,12.4886,0,0,0,5.0007,22.4834v0a12.4325,12.4325,0,0,0,14.9983,0v0q.5-.3761.9593-.7988l0,0A12.4869,12.4869,0,0,0,12.5,0Zm0,24a11.4432,11.4432,0,0,1-7.3931-2.7041,7.4887,7.4887,0,0,1,14.7863,0A11.4432,11.4432,0,0,1,12.5,24Zm8.25-3.5061a8.4871,8.4871,0,0,0-16.5,0,11.5,11.5,0,1,1,16.5,0Z"
+          />
+        </g>
+      </svg>
+    </div>
+    <div class="ray-text-field__wrapper">
+      <input
+        type="text"
+        class="ray-text-field__input"
+        id="input-with-icon"
+        placeholder="Few people are aware..."
+      />
+      <label class="ray-text-field__label" for="input-with-icon">
+        Fun fact about Ray Eames
+      </label>
+    </div>
+  </div>
+</div>
diff --git a/packages/core/src/components/select/_select.scss b/packages/core/src/components/select/_select.scss
@@ -5,18 +5,20 @@
   .#{$ray-class-prefix}select {
     @include required-support('select');
     @include icon-support('select');
+    @include prepend-support('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;
+    align-items: stretch;
 
     &__icon--right {
       @include icon;
       // need to add spacing to compensate for the arrow
-      right: calc(#{$ray-field-h-spacing} * 2 + 12px);
+      right: calc((#{$ray-field-h-spacing} * 2) + #{$ray-field-h-spacing});
     }
 
     &::after {
@@ -35,6 +37,11 @@
       border-radius: 2px;
     }
 
+    &__wrapper {
+      position: relative;
+      flex: 1;
+    }
+
     &__label {
       @include label;
       pointer-events: none;

diff --git a/packages/core/src/components/text-field/_text-field.scss b/packages/core/src/components/text-field/_text-field.scss
@@ -5,6 +5,7 @@
   .#{$ray-class-prefix}text-field {
     @include required-support('text-field');
     @include icon-support('text-field');
+    @include prepend-support('select');
   }
 
   .#{$ray-class-prefix}text-area {
@@ -19,6 +20,13 @@
     border-radius: $ray-border-radius;
     position: relative;
     height: $ray-field-height;
+    display: flex;
+    align-items: stretch;
+
+    &__wrapper {
+      position: relative;
+      flex: 1;
+    }
 
     &__label {
       @include label;

diff --git a/packages/core/src/global/mixins/_form-items.scss b/packages/core/src/global/mixins/_form-items.scss
@@ -150,26 +150,34 @@
 }
 
 @mixin icon {
-  width: 1rem;
-  height: 1rem;
-  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   line-height: 1;
   text-align: center;
   fill: currentColor;
-  // optical correction, subtract 1px
-  top: $ray-field-v-spacing - rem(1px);
 
   path {
     fill: currentColor;
   }
 }
 @mixin icon-support($class) {
   &--with-icon-left {
+    &.#{$ray-class-prefix}#{$class}--active,
+    &.#{$ray-class-prefix}#{$class}--has-value {
+      .#{$ray-class-prefix}#{$class}__input,
+      .#{$ray-class-prefix}#{$class}__label {
+        left: -1 * ($ray-field-h-spacing / 2) !important;
+      }
+
+      .#{$ray-class-prefix}#{$class}__label {
+        padding-left: $ray-field-h-spacing / 2;
+      }
+    }
+
     .#{$ray-class-prefix}#{$class}__input,
     .#{$ray-class-prefix}#{$class}__label {
-      padding-left: calc(
-        #{$ray-field-h-spacing} * 2 + #{$ray-field-icon-width}
-      );
+      padding-left: 0;
     }
   }
 
@@ -193,19 +201,17 @@
 
   &__icon--left {
     @include icon;
-    left: $ray-field-h-spacing;
+    position: relative;
+    min-width: calc(#{$ray-field-h-spacing} * 2 + #{$ray-field-icon-width});
+    border-radius: $ray-border-radius 0 0 $ray-border-radius;
   }
 
   &__icon--right {
     @include icon;
-    right: $ray-field-h-spacing;
-  }
-
-  &--compact {
-    .#{$ray-class-prefix}#{$class}__icon--left,
-    .#{$ray-class-prefix}#{$class}__icon--right {
-      top: $ray-field-v-spacing-compact;
-    }
+    position: absolute;
+    top: 50%;
+    right: calc(#{$ray-field-h-spacing});
+    transform: translateY(-50%);
   }
 
   &--active {
@@ -241,3 +247,18 @@
     }
   }
 }
+
+@mixin prepend-support($class) {
+  &__prepend {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    text-align: center;
+    position: relative;
+    min-width: calc((#{$ray-field-h-spacing} * 3) + #{$ray-field-icon-width});
+    background-color: $ray-color-gray-03;
+    border-right: 1px solid $ray-color-gray-10;
+    border-radius: $ray-border-radius 0 0 $ray-border-radius;
+  }
+}