fix: text field right icon position and add docs (#60)

docs/components/select.md

@@ -26,6 +26,13 @@ title: Select
  >
 </component>
 
+<component 
+ name="With icon"
+ component="select"
+ variation="select-with-icon" 
+ >
+</component>
+
 ## JavaScript
 
 ```javascript

docs/components/text-field.md

@@ -43,6 +43,15 @@ To be used adjacent to any form item.
  >
 </component>
 
+## Icons
+
+<component
+ name="Text field with icons"
+ component="text-field"
+ variation="text-field-with-icon"
+ >
+</component>
+
 ### Modifiers
 
 Use these modifiers with `.ray-form-item__hint` class.

docs/html/select/select-with-icon.html

@@ -0,0 +1,17 @@
+<div class="ray-form-item">
+ <div class="ray-select ray-select--with-icon-left">
+ <div class="ray-select__icon--left">✨</div>
+
+ <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>

docs/html/text-field/text-field-with-icon.html

@@ -0,0 +1,65 @@
+<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">
+ <defs>
+ <style>
+ .cls-1 {
+ fill: black !important;
+ }
+ </style>
+ </defs>
+ <title>budicon-cog</title>
+ <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>
+
+ <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 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">
+ <defs>
+ <style>
+ .cls-1 {
+ fill: black !important;
+ }
+ </style>
+ </defs>
+ <title>budicon-cog</title>
+ <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>
+
+ <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>

packages/core/src/components/select/_select.scss

@@ -4,13 +4,20 @@
 @include exports('ray-select') {
  .#{$ray-class-prefix}select {
  @include icon-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;
 
+ &__icon--right {
+ @include icon;
+ // need to add spacing to compensate for the arrow
+ right: calc(#{$ray-field-h-spacing} * 2 + 12px);
+ }
+
  &::after {
  content: '';
  pointer-events: none;

packages/core/src/global/mixins/_form-items.scss

@@ -156,7 +156,7 @@
  &__icon--right {
  @include icon;
  // add spacing to compensate for the
- right: calc(#{$ray-field-h-spacing} * 2 + 12px);
+ right: $ray-field-h-spacing;
  }
 
  &--with-icon-left {