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 28, 2019 · d1efe84 · d1efe84
1 parent ffacb87
commit d1efe84
Show file tree

Hide file tree

Showing 11 changed files with 730 additions and 4 deletions.
diff --git a/docs/components/select.md b/docs/components/select.md
@@ -68,6 +68,20 @@ title: Select
  >
 </component>
 
+<component
+ name="With prepend"
+ component="select"
+ variation="select-with-prepend"
+ >
+</component>
+
+<component
+ name="With prepend (RTL)"
+ component="select"
+ variation="rtl-select-with-prepend"
+ >
+</component>
+
 ## JavaScript API
 
 ```javascript

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

diff --git a/docs/html/select/rtl-select-with-prepend.html b/docs/html/select/rtl-select-with-prepend.html
@@ -0,0 +1,28 @@
+<div dir="rtl">
+ <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">
+ יחד טוב יותר
+ </label>
+ </div>
+ </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/rtl-text-field-with-prepend.html b/docs/html/text-field/rtl-text-field-with-prepend.html
@@ -0,0 +1,26 @@
+<div dir="rtl">
+ <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="מעטים יודעים ..."
+ />
+ <label class="ray-text-field__label" for="input-with-icon">
+ עובדה מהנה עליך
+ </label>
+ </div>
+ </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,13 +5,15 @@
  .#{$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 is DEPRECATED in favor of __icon--end, and will be
  // removed in a future release of Ray. Use of __icon-right may result
@@ -20,11 +22,11 @@
  &__icon--end {
  @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});
 
  [dir='rtl'] & {
  right: 0;
- left: calc(#{$ray-field-h-spacing} * 2 + 12px);
+ left: calc((#{$ray-field-h-spacing} * 2) + #{$ray-field-h-spacing});
  }
  }
 
@@ -44,11 +46,15 @@
  border-radius: 2px;
 
  [dir='rtl'] & {
- position: unset;
- margin-left: $ray-field-h-spacing;
+ right: calc(100% - (2 * #{$ray-field-h-spacing}));
  }
  }
 
+ &__wrapper {
+ position: relative;
+ flex: 1;
+ }
+
  &__label {
  @include label;
  pointer-events: none;
@@ -164,5 +170,27 @@
  color: rgba($ray-color-gray-60, 0.4);
  }
  }
+
+ &--simple {
+ flex: 1;
+ border: none;
+ background-color: transparent;
+ border-radius: 0;
+
+ &__input {
+ font-size: ($ray-field-label-size * 1.2);
+ width: rem(69px);
+ padding-right: 3 * $ray-field-h-spacing;
+
+ [dir='rtl'] & {
+ padding-right: $ray-field-h-spacing;
+ padding-left: 3 * $ray-field-h-spacing;
+ }
+
+ &::-ms-expand {
+ display: 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('text-field');
  }
 
  .#{$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
@@ -219,6 +219,18 @@
  }
  }
 
+ // --icon-left/right are DEPRECATED in favor of --icon-start/end,
+ // and will be removed in a future release of Ray. Use of --icon-left/right may
+ // result in confusing behavior for RTL language sensitive layouts.
+ &--disabled {
+ .#{$ray-class-prefix}#{$class}__icon--left,
+ .#{$ray-class-prefix}#{$class}__icon--right,
+ .#{$ray-class-prefix}#{$class}__icon--start,
+ .#{$ray-class-prefix}#{$class}__icon--end {
+ opacity: 0.4;
+ }
+ }
+
  &--with-icon-left,
  &--with-icon-right,
  &--with-icon-start,
@@ -309,3 +321,41 @@
  }
  }
 }
+
+@mixin prepend-support($class) {
+ &--disabled {
+ .#{$ray-class-prefix}#{$class}__prepend {
+ opacity: 0.4;
+ }
+ }
+
+ &__prepend {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ line-height: 1;
+ text-align: center;
+ position: relative;
+ // using 69px to match the current
+ // flag dropdown selector on wework.com
+ min-width: rem(69px);
+ background-color: $ray-color-gray-03;
+ border-right: 1px solid $ray-color-gray-10;
+ border-radius: $ray-border-radius 0 0 $ray-border-radius;
+
+ [dir='rtl'] & {
+ border-radius: 0 $ray-border-radius $ray-border-radius 0;
+ }
+ }
+}
+
+@mixin required-support($class) {
+ &--required {
+ .#{$ray-class-prefix}#{$class}__label {
+ &::after {
+ content: '*';
+ padding-left: 3px;
+ }
+ }
+ }
+}
diff --git a/packages/core/stories/select.stories.js b/packages/core/stories/select.stories.js
@@ -287,4 +287,52 @@ storiesOf('Select', module)
  </div>
  </>
  );
+ })
+ .add('select, with prepend', () => {
+ setTimeout(init);
+
+ return (
+ <>
+ <div className="ray-form-item">
+ <div className="ray-select ray-select--with-prepend">
+ <div className="ray-select__prepend">
+ <div>🇺🇸</div>
+ </div>
+ <div className="ray-select__wrapper">
+ <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>{' '}
+ <div className="ray-form-item">
+ <div className="ray-select ray-select--disabled ray-select--with-prepend">
+ <div className="ray-select__prepend">
+ <div>🐢</div>
+ </div>
+ <div className="ray-select__wrapper">
+ <select className="ray-select__input" disabled>
+ <option value="" disabled selected data-ray-placeholder />
+ <option value="Pikachu">Pikachu</option>
+ <option value="Squirtle" selected>
+ 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>
+ </>
+ );
  });