fix(textarea): allow multi-row textarea (#16)

* feat(component): allow multi-row textarea when rows are provided to a textarea, the fixed height is removed and set to "auto" * fix: fix storybook and adjust scss * Update docs/components/text-field.md Co-Authored-By: i8ramin <[email protected]> * Update packages/core/src/components/text-field/_text-field.scss Co-Authored-By: i8ramin <[email protected]>
wework · Apr 27, 2019 · 9cfbdbd · 9cfbdbd
1 parent 1b6a799
commit 9cfbdbd
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 1 deletion.
diff --git a/docs/components/text-field.md b/docs/components/text-field.md
@@ -19,6 +19,13 @@ title: Text Field
  >
 </component>
 
+<component
+ name="Text area with rows"
+ component="text-area"
+ variation="text-area-multi-row"
+ >
+</component>
+
 <component
  name="Text field with hints"
  component="text-field"

diff --git a/docs/html/text-area/text-area-multi-row.html b/docs/html/text-area/text-area-multi-row.html
@@ -0,0 +1,12 @@
+<div class="ray-text-area">
+ <textarea
+ rows="4"
+ class="ray-text-area__input"
+ id="notes"
+ type="email"
+ placeholder="adding `rows` overrides default height"
+ ></textarea>
+ <label class="ray-text-area__label" for="notes">
+ Long notes
+ </label>
+</div>
diff --git a/packages/core/src/components/text-field/_text-field.scss b/packages/core/src/components/text-field/_text-field.scss
@@ -169,4 +169,11 @@
  }
  }
  }
+
+ [rows].#{$ray-class-prefix}text-area {
+ &__input {
+ height: auto; // ie11 fallback
+ height: unset;
+ }
+ }
 }
diff --git a/packages/core/stories/text-field.stories.js b/packages/core/stories/text-field.stories.js
@@ -65,7 +65,7 @@ storiesOf('Text Field', module)
  <div className="ray-text-area">
  <textarea
  className="ray-text-area__input"
- row="4"
+ rows="4"
  id="textarea"
  placeholder="Few people are aware..."
  />