feat(textareas): add textareas (#24)

* stories * styles * border-width * add triangle classes, fix height issues * fix compact * fix styles * cleanup triangle class and add a story * small changes * add padding on focu * add active classes for compact * min heights * oop fixes * fix textareas fo reals * fix dead space * remove the most beautiful triangles ever * padding-right
wework · Feb 27, 2019 · 8ff572b · 8ff572b
1 parent 44baab6
commit 8ff572b
Show file tree

Hide file tree

Showing 3 changed files with 140 additions and 38 deletions.
diff --git a/packages/ray/lib/_forms.scss b/packages/ray/lib/_forms.scss
@@ -19,20 +19,24 @@
     font-weight: 400;
     display: block;
     position: absolute;
-    left: $field-h-spacing;
-    top: $field-v-spacing;
+    top: 0;
+    left: 0;
+    padding-left: $field-h-spacing;
+    padding-right: $field-h-spacing;
+    padding-top: $field-v-spacing;
     color: $ray-color-text-medium;
     transition: all 0.125s ease;
-    pointer-events: none;
+    height: 100%;
+    width: 100%;
 
     // handle truncating label
-    width: calc(100% - (2 * #{$field-h-spacing}));
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
   input,
+  textarea,
   &__input {
     font-family: inherit;
     line-height: 1;
@@ -49,12 +53,12 @@
     &:not(:placeholder-shown) {
       + label {
         font-size: $field-label-size-focus;
-        top: $field-h-spacing - $border-width;
+        padding-top: $field-h-spacing - $border-width;
       }
     }
 
     &::placeholder {
-      transition: all 0.125s ease;
+      transition: color 0.125s ease-in;
     }
 
     &:not(:focus)::placeholder {
@@ -79,12 +83,18 @@
 
     label {
       font-size: $field-label-size-focus;
-      top: $field-h-spacing - $border-width;
+      padding-top: $field-h-spacing - $border-width;
     }
 
-    input::placeholder {
+    input::placeholder, textarea::placeholder {
       color: $ray-color-text-light !important;
     }
+
+    &.#{$prefix}field--compact {
+      label {
+        opacity: 0;
+      }
+    }
   }
 
   &--disabled {
@@ -132,11 +142,12 @@
 
   label,
   &--label {
-    top: $field-v-spacing-compact;
+    padding-top: $field-v-spacing-compact;
     transition: none;
   }
 
   input,
+  textarea,
   &--input {
     padding-top: 0;
 
@@ -148,3 +159,44 @@
     }
   }
 }
+
+.#{$prefix}field__textarea {
+  height: auto;
+  min-height: $field-height;
+  position: relative;
+
+  textarea {
+    padding: 0 $field-h-spacing;
+    resize: vertical;
+    line-height: 28px;
+
+    &::placeholder {
+      transition: none;
+    }
+  }
+
+  &.#{$prefix}field--compact {
+    padding-top: $field-v-spacing-compact / 2;
+    min-height: $field-height-compact;
+
+    textarea {
+      height: 2rem;
+      min-height: 2rem;
+    }
+  }
+
+  &.#{$prefix}field--active,
+  &:focus-within,
+  &:not(:placeholder-shown) {
+    padding-top: $field-v-spacing + 2 * $border-width;
+
+    textarea {
+      height: 2rem;
+      min-height: 2rem;
+    }
+
+    &.#{$prefix}field--compact {
+      padding-top: $field-v-spacing-compact / 2;
+    }
+  }
+}
diff --git a/packages/ray/stories/forms.stories.js b/packages/ray/stories/forms.stories.js
@@ -12,7 +12,7 @@ storiesOf('Forms', module)
           type="email"
           placeholder="arya.stark@winterfell.org"
         />
-        <label for="email">Email address</label>
+        <label htmlFor="email">Email address</label>
       </div>
     )
   )
@@ -24,7 +24,31 @@ storiesOf('Forms', module)
           type="email"
           placeholder="arya.stark@winterfell.org"
         />
-        <label for="email">Email address</label>
+        <label htmlFor="email">Email address</label>
+      </div>
+    )
+  )
+  .addWithJSX('Text field, textarea', () =>
+    withPadding(
+      <div className="ray-field ray-field__textarea">
+        <textarea id="textarea" placeholder="Few people are aware..." />
+        <label htmlFor="textarea">Fun fact about Ray Eames</label>
+      </div>
+    )
+  )
+  .addWithJSX('Text field, multi-row textarea', () =>
+    withPadding(
+      <div className="ray-field ray-field__textarea">
+        <textarea row="4" id="textarea" placeholder="Few people are aware..." />
+        <label htmlFor="textarea">Fun fact about Ray Eames</label>
+      </div>
+    )
+  )
+  .addWithJSX('Text field, active, textarea', () =>
+    withPadding(
+      <div className="ray-field ray-field--active ray-field__textarea">
+        <textarea id="textarea" placeholder="Few people are aware..." />
+        <label htmlFor="textarea">Fun fact about Ray Eames</label>
       </div>
     )
   )
@@ -37,7 +61,7 @@ storiesOf('Forms', module)
           placeholder="arya.stark@winterfell.org"
           disabled
         />
-        <label for="email">Email address</label>
+        <label htmlFor="email">Email address</label>
       </div>
     )
   )
@@ -50,11 +74,11 @@ storiesOf('Forms', module)
           placeholder="arya.stark@winterfell.org"
           disabled
         />
-        <label for="email">Email address</label>
+        <label htmlFor="email">Email address</label>
       </div>
     )
   )
-  .addWithJSX('Example form', () =>
+  .addWithJSX('Example Form', () =>
     withPadding(
       <div className="container">
         <div className="row">
@@ -63,7 +87,7 @@ storiesOf('Forms', module)
             <div className="ray-field-wrapper">
               <div className="ray-field">
                 <input id="name" type="text" placeholder="Arya Stark" />
-                <label for="name">Name</label>
+                <label htmlFor="name">Name</label>
               </div>
             </div>
             <div className="ray-field-wrapper">
@@ -73,14 +97,14 @@ storiesOf('Forms', module)
                   type="text"
                   placeholder="arya.stark@winterfell.org"
                 />
-                <label for="email">Email address</label>
+                <label htmlFor="email">Email address</label>
               </div>
               <div className="ray-field__hint">We want your emails</div>
             </div>
             <div className="ray-field-wrapper">
               <div className="ray-field">
                 <input id="password" type="password" placeholder="*********" />
-                <label for="password">Password</label>
+                <label htmlFor="password">Password</label>
               </div>
             </div>
             <div className="ray-field-wrapper">
@@ -90,7 +114,7 @@ storiesOf('Forms', module)
                   type="text"
                   placeholder="Super soopah soup or super long placeholder"
                 />
-                <label for="long-label">
+                <label htmlFor="long-label">
                   Label Empty State That Overflows quickly and is very long
                 </label>
               </div>
@@ -110,7 +134,7 @@ storiesOf('Forms', module)
             <div className="ray-field-wrapper">
               <div className="ray-field">
                 <input id="name" type="text" placeholder="Arya Stark" />
-                <label for="name">Name</label>
+                <label htmlFor="name">Name</label>
               </div>
               <div className="ray-field__hint">Nuetral hint</div>
             </div>
@@ -121,7 +145,7 @@ storiesOf('Forms', module)
                   type="text"
                   placeholder="arya.stark@winterfell.org"
                 />
-                <label for="email">Email address</label>
+                <label htmlFor="email">Email address</label>
               </div>
               <div className="ray-field__hint ray-field__hint--success">
                 Success hint
@@ -130,7 +154,7 @@ storiesOf('Forms', module)
             <div className="ray-field-wrapper">
               <div className="ray-field ray-field--error">
                 <input id="password" type="password" placeholder="*********" />
-                <label for="password">Password</label>
+                <label htmlFor="password">Password</label>
               </div>
               <div className="ray-field__hint ray-field__hint--error">
                 Error hint
@@ -144,16 +168,36 @@ storiesOf('Forms', module)
   .addWithJSX('Text field - compact', () =>
     withPadding(
       <div className="ray-field ray-field--compact">
-        <input
-          id="email"
-          type="email"
-          placeholder="arya.stark@winterfell.org"
-        />
-        <label for="email">Email address</label>
+        <input id="email" type="email" placeholder="arya.stark@winterfell.org" />
+        <label htmlFor="email">Email address</label>
+      </div>
+    )
+  )
+  .addWithJSX('Text field, active - compact', () =>
+    withPadding(
+      <div className="ray-field ray-field--active ray-field--compact">
+        <input id="email" type="email" placeholder="arya.stark@winterfell.org" />
+        <label htmlFor="email">Email address</label>
+      </div>
+    )
+  )
+  .addWithJSX('Text field, textarea - compact', () =>
+    withPadding(
+      <div className="ray-field ray-field--compact ray-field__textarea">
+        <textarea id="textarea" placeholder="Few people are aware..." />
+        <label htmlFor="textarea">Fun fact about Ray Eames</label>
+      </div>
+    )
+  )
+  .addWithJSX('Text field, active, textarea - compact', () =>
+    withPadding(
+      <div className="ray-field ray-field--active ray-field--compact ray-field__textarea">
+        <textarea id="textarea" placeholder="Few people are aware..." />
+        <label htmlFor="textarea">Fun fact about Ray Eames</label>
       </div>
     )
   )
-  .addWithJSX('Example form - compact', () =>
+  .addWithJSX('Example Form - compact', () =>
     withPadding(
       <div className="container">
         <div className="row">
@@ -162,7 +206,7 @@ storiesOf('Forms', module)
             <div className="ray-field-wrapper">
               <div className="ray-field ray-field--compact">
                 <input id="name" type="text" placeholder="Arya Stark" />
-                <label for="name">Name</label>
+                <label htmlFor="name">Name</label>
               </div>
             </div>
             <div className="ray-field-wrapper">
@@ -172,14 +216,14 @@ storiesOf('Forms', module)
                   type="text"
                   placeholder="arya.stark@winterfell.org"
                 />
-                <label for="email">Email address</label>
+                <label htmlFor="email">Email address</label>
               </div>
               <div className="ray-field__hint">We want your emails</div>
             </div>
             <div className="ray-field-wrapper">
               <div className="ray-field ray-field--compact">
                 <input id="password" type="password" placeholder="*********" />
-                <label for="password">Password</label>
+                <label htmlFor="password">Password</label>
               </div>
             </div>
             <div className="ray-field-wrapper">
@@ -189,11 +233,17 @@ storiesOf('Forms', module)
                   type="text"
                   placeholder="Super soopah soup or super long placeholder"
                 />
-                <label for="long-label">
+                <label htmlFor="long-label">
                   Label Empty State That Overflows quickly and is very long
                 </label>
               </div>
             </div>
+            <div className="ray-field-wrapper">
+              <div className="ray-field ray-field__textarea ray-field--compact">
+                <textarea id="textarea" placeholder="Tell me, uh, something about yourself" />
+                <label htmlFor="textarea">Notes</label>
+              </div>
+            </div>
 
             <button className="ray-btn ray-btn--compact ray-btn--primary">
               Submit
@@ -211,7 +261,7 @@ storiesOf('Forms', module)
             <div className="ray-field-wrapper">
               <div className="ray-field ray-field--compact">
                 <input id="name" type="text" placeholder="Arya Stark" />
-                <label for="name">Name</label>
+                <label htmlFor="name">Name</label>
               </div>
               <div className="ray-field__hint">Nuetral hint</div>
             </div>
@@ -222,7 +272,7 @@ storiesOf('Forms', module)
                   type="text"
                   placeholder="arya.stark@winterfell.org"
                 />
-                <label for="email">Email address</label>
+                <label htmlFor="email">Email address</label>
               </div>
               <div className="ray-field__hint ray-field__hint--success">
                 Success hint
@@ -231,7 +281,7 @@ storiesOf('Forms', module)
             <div className="ray-field-wrapper">
               <div className="ray-field ray-field--error ray-field--compact">
                 <input id="password" type="password" placeholder="*********" />
-                <label for="password">Password</label>
+                <label htmlFor="password">Password</label>
               </div>
               <div className="ray-field__hint ray-field__hint--error">
                 Error hint

diff --git a/packages/ray/stories/table.stories.js b/packages/ray/stories/table.stories.js
@@ -42,15 +42,15 @@ storiesOf('Table', module).addWithJSX('default', () =>
       <thead>
         <tr>
           {KEYS.map(key => (
-            <th>{key}</th>
+            <th key={key}>{key}</th>
           ))}
         </tr>
       </thead>
       <tbody>
         {SAMPLE_DATA.map(item => (
-          <tr>
+          <tr key={item.email}>
             {KEYS.map(key => (
-              <td>{item[key]}</td>
+              <td key={key}>{item[key]}</td>
             ))}
           </tr>
         ))}