fix: add active state color effects to icons (#81)

* fix: add active state color effects to icons * Update text-field.md
wework · Mar 25, 2019 · 73c7a22 · 73c7a22
1 parent f234dc3
commit 73c7a22
Show file tree

Hide file tree

Showing 6 changed files with 140 additions and 71 deletions.
diff --git a/docs/components/text-field.md b/docs/components/text-field.md
@@ -19,40 +19,21 @@ title: Text Field
  >
 </component>
 
-## Modifiers
-
-Use these modifiers with `.ray-text-field` or `.ray-text-area` class.
-
-| Selector | Description |
-| --------------------------------------- | ------------------------------------------------- |
-| .ray-{text-field\|text-area}--compact | Selector for applying compact styles |
-| .ray-{text-field\|text-area}--active | Selector for applying active/focus styles |
-| .ray-{text-field\|text-area}--has-value | Selector for applying styles when field has value |
-| .ray-{text-field\|text-area}--disabled | Selector for applying disabled styles |
-| .ray-{text-field\|text-area}--error | Selector for applying error styles |
-| .ray-{text-field\|text-area}--success | Selector for applying success styles |
-
-## Hints
-
-To be used adjacent to any form item.
-
 <component
- name="With hints"
+ name="Text field with hints"
  component="text-field"
  variation="text-field-with-hint"
  >
 </component>
 
-## Icons
-
 <component
  name="Text field with icons"
  component="text-field"
  variation="text-field-with-icon"
  >
 </component>
 
-### Modifiers
+## Modifiers
 
 Use these modifiers with `.ray-form-item__hint` class.
 
@@ -61,6 +42,17 @@ Use these modifiers with `.ray-form-item__hint` class.
 | .ray-form-item\_\_hint--success | Selector for applying hint success styles |
 | .ray-form-item\_\_hint--error | Selector for applying hint error styles |
 
+Use these modifiers with `.ray-text-field` or `.ray-text-area` class.
+
+| Selector | Description |
+| --------------------------------------- | ------------------------------------------------- |
+| .ray-{text-field\|text-area}--compact | Selector for applying compact styles |
+| .ray-{text-field\|text-area}--active | Selector for applying active/focus styles |
+| .ray-{text-field\|text-area}--has-value | Selector for applying styles when field has value |
+| .ray-{text-field\|text-area}--disabled | Selector for applying disabled styles |
+| .ray-{text-field\|text-area}--error | Selector for applying error styles |
+| .ray-{text-field\|text-area}--success | Selector for applying success styles |
+
 ## JavaScript
 
 Text fields:

diff --git a/docs/html/select/select-with-icon.html b/docs/html/select/select-with-icon.html
@@ -1,7 +1,12 @@
 <div class="ray-form-item">
  <div class="ray-select ray-select--with-icon-left">
- <div class="ray-select__icon--left">✨</div>
-
+ <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>

diff --git a/docs/html/text-field/text-field-with-icon.html b/docs/html/text-field/text-field-with-icon.html
@@ -1,15 +1,12 @@
 <div class="ray-form-item">
  <div class="ray-text-field ray-text-field--with-icon-left">
- <div class="ray-text-field__icon--left">
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
- <g id="budicon-cog">
- <path
- class="cls-1"
- d="M24.2755,10.5523,22.22,9.9634a.4887.4887,0,0,1-.3317-.3317,9.7772,9.7772,0,0,0-.72-1.7461.4865.4865,0,0,1,.0014-.4669L22.2017,5.56a1,1,0,0,0-.1673-1.1923L20.6325,2.9655A1,1,0,0,0,19.44,2.7982L17.5806,3.83a.4861.4861,0,0,1-.4673.0009,9.7558,9.7558,0,0,0-1.7455-.72.4889.4889,0,0,1-.3312-.3318L14.4478.7245A1,1,0,0,0,13.4865,0H11.5135a1,1,0,0,0-.9613.7245L9.9634,2.7793a.4892.4892,0,0,1-.3317.3318,9.7455,9.7455,0,0,0-1.7451.72.4867.4867,0,0,1-.4674-.001L5.56,2.7982a1,1,0,0,0-1.1923.1674L2.9656,4.3674A1,1,0,0,0,2.7983,5.56L3.83,7.4195a.4863.4863,0,0,1,.0007.4675,9.73,9.73,0,0,0-.72,1.745.4891.4891,0,0,1-.3318.3315l-2.0546.5887A1,1,0,0,0,0,11.5135v1.9727a1,1,0,0,0,.7245.9613l2.0551.5889a.4887.4887,0,0,1,.3318.3318,9.7745,9.7745,0,0,0,.72,1.7459.4867.4867,0,0,1-.0013.4669L2.7983,19.44a1,1,0,0,0,.1674,1.1922l1.4018,1.4019a1,1,0,0,0,1.1923.1674L7.4192,21.17a.4867.4867,0,0,1,.4674-.0009,9.7445,9.7445,0,0,0,1.745.72.4894.4894,0,0,1,.3317.3318l.5891,2.055A1,1,0,0,0,11.5136,25h1.9727a1,1,0,0,0,.9613-.7245l.5888-2.0546a.4891.4891,0,0,1,.3315-.3318,9.7532,9.7532,0,0,0,1.7455-.72.4866.4866,0,0,1,.4673.001L19.44,22.2017a1,1,0,0,0,1.1923-.1673l1.4019-1.4019a1,1,0,0,0,.1673-1.1922L21.17,17.5807a.4866.4866,0,0,1-.0009-.4673,9.7607,9.7607,0,0,0,.72-1.7456.4892.4892,0,0,1,.3318-.3315l2.0546-.5888A1,1,0,0,0,25,13.4863V11.5136A1,1,0,0,0,24.2755,10.5523ZM12.5,17A4.5,4.5,0,1,1,17,12.5,4.5,4.5,0,0,1,12.5,17Z"
- />
- </g>
- </svg>
- </div>
+ <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"
@@ -25,24 +22,21 @@
 
 <div class="ray-form-item">
  <div class="ray-text-field ray-text-field--with-icon-right">
- <div class="ray-text-field__icon--right">
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
- <g id="budicon-cog">
- <path
- class="cls-1"
- d="M24.2755,10.5523,22.22,9.9634a.4887.4887,0,0,1-.3317-.3317,9.7772,9.7772,0,0,0-.72-1.7461.4865.4865,0,0,1,.0014-.4669L22.2017,5.56a1,1,0,0,0-.1673-1.1923L20.6325,2.9655A1,1,0,0,0,19.44,2.7982L17.5806,3.83a.4861.4861,0,0,1-.4673.0009,9.7558,9.7558,0,0,0-1.7455-.72.4889.4889,0,0,1-.3312-.3318L14.4478.7245A1,1,0,0,0,13.4865,0H11.5135a1,1,0,0,0-.9613.7245L9.9634,2.7793a.4892.4892,0,0,1-.3317.3318,9.7455,9.7455,0,0,0-1.7451.72.4867.4867,0,0,1-.4674-.001L5.56,2.7982a1,1,0,0,0-1.1923.1674L2.9656,4.3674A1,1,0,0,0,2.7983,5.56L3.83,7.4195a.4863.4863,0,0,1,.0007.4675,9.73,9.73,0,0,0-.72,1.745.4891.4891,0,0,1-.3318.3315l-2.0546.5887A1,1,0,0,0,0,11.5135v1.9727a1,1,0,0,0,.7245.9613l2.0551.5889a.4887.4887,0,0,1,.3318.3318,9.7745,9.7745,0,0,0,.72,1.7459.4867.4867,0,0,1-.0013.4669L2.7983,19.44a1,1,0,0,0,.1674,1.1922l1.4018,1.4019a1,1,0,0,0,1.1923.1674L7.4192,21.17a.4867.4867,0,0,1,.4674-.0009,9.7445,9.7445,0,0,0,1.745.72.4894.4894,0,0,1,.3317.3318l.5891,2.055A1,1,0,0,0,11.5136,25h1.9727a1,1,0,0,0,.9613-.7245l.5888-2.0546a.4891.4891,0,0,1,.3315-.3318,9.7532,9.7532,0,0,0,1.7455-.72.4866.4866,0,0,1,.4673.001L19.44,22.2017a1,1,0,0,0,1.1923-.1673l1.4019-1.4019a1,1,0,0,0,.1673-1.1922L21.17,17.5807a.4866.4866,0,0,1-.0009-.4673,9.7607,9.7607,0,0,0,.72-1.7456.4892.4892,0,0,1,.3318-.3315l2.0546-.5888A1,1,0,0,0,25,13.4863V11.5136A1,1,0,0,0,24.2755,10.5523ZM12.5,17A4.5,4.5,0,1,1,17,12.5,4.5,4.5,0,0,1,12.5,17Z"
- />
- </g>
- </svg>
- </div>
+ <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-icon"
+ id="input-with-icon2"
  placeholder="Few people are aware..."
  />
- <label class="ray-text-field__label" for="input-with-icon">
+ <label class="ray-text-field__label" for="input-with-icon2">
  Fun fact about Ray Eames
  </label>
  </div>

diff --git a/packages/core/src/global/mixins/_form-items.scss b/packages/core/src/global/mixins/_form-items.scss
@@ -163,17 +163,6 @@
  }
 }
 @mixin icon-support($class) {
- &__icon--left {
- @include icon;
- left: $ray-field-h-spacing;
- }
-
- &__icon--right {
- @include icon;
- // add spacing to compensate for the
- right: $ray-field-h-spacing;
- }
-
  &--with-icon-left {
  .#{$ray-class-prefix}#{$class}__input,
  .#{$ray-class-prefix}#{$class}__label {
@@ -192,10 +181,51 @@
  }
  }
 
+ &--with-icon-left,
+ &--with-icon-right {
+ fill: $ray-color-text-medium;
+
+ path {
+ fill: $ray-color-text-medium;
+ }
+ }
+
+ &__icon--left {
+ @include icon;
+ left: $ray-field-h-spacing;
+ }
+
+ &__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;
  }
  }
+
+ &--active {
+ .#{$ray-class-prefix}#{$class}__icon--left,
+ .#{$ray-class-prefix}#{$class}__icon--right {
+ fill: $ray-color-blue-50;
+
+ path {
+ fill: $ray-color-blue-50;
+ }
+ }
+ }
+
+ &--disabled {
+ .#{$ray-class-prefix}#{$class}__icon--left,
+ .#{$ray-class-prefix}#{$class}__icon--right {
+ fill: rgba($ray-color-gray-60, 0.4);
+
+ path {
+ fill: rgba($ray-color-gray-60, 0.4);
+ }
+ }
+ }
 }
diff --git a/packages/core/stories/select.stories.js b/packages/core/stories/select.stories.js
@@ -208,7 +208,15 @@ storiesOf('Select', module)
 
  <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>
+ <svg
+ className="ray-select__icon--left"
+ xmlns="http://www.w3.org/2000/svg"
+ 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>
  <div className="ray-select__icon--right">👽</div>
 
  <select className="ray-select__input">

diff --git a/packages/core/stories/text-field.stories.js b/packages/core/stories/text-field.stories.js
@@ -313,21 +313,61 @@ storiesOf('Text Field', module)
  </div>
  );
  })
- .add('Text field, with icon', () => (
- <div className="ray-text-field ray-text-field--with-icon-left">
- <div className="ray-text-field__icon--left">👐</div>
+ .add('Text field, with icon', () => {
+ setTimeout(initTextField);
 
- <input
- type="text"
- className="ray-text-field__input"
- id="input"
- placeholder="Few people are aware..."
- />
- <label className="ray-text-field__label" htmlFor="input">
- Fun fact about Ray Eames
- </label>
- </div>
- ))
+ return (
+ <>
+ <div className="ray-form-item">
+ <div className="ray-text-field ray-text-field--with-icon-left">
+ <svg
+ className="ray-text-field__icon--left"
+ xmlns="http://www.w3.org/2000/svg"
+ 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"
+ className="ray-text-field__input"
+ id="input"
+ placeholder="Few people are aware..."
+ />
+ <label className="ray-text-field__label" htmlFor="input">
+ Fun fact about Ray Eames
+ </label>
+ </div>
+ </div>{' '}
+ <div className="ray-form-item">
+ <div className="ray-text-field ray-text-field--disabled ray-text-field--with-icon-left">
+ <svg
+ className="ray-text-field__icon--left"
+ xmlns="http://www.w3.org/2000/svg"
+ 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"
+ className="ray-text-field__input"
+ id="input2"
+ placeholder="Few people are aware..."
+ disabled
+ />
+ <label className="ray-text-field__label" htmlFor="input2">
+ Fun fact about Ray Eames
+ </label>
+ </div>
+ </div>
+ </>
+ );
+ })
  .add('Text field, active, textarea - compact', () => (
  <div className="ray-text-area ray-text-area--active ray-text-area--compact">
  <textarea