From 45c6cf68aad9a0985b1ca0b4ad81ed466298809f Mon Sep 17 00:00:00 2001 From: Alex Sheehan Date: Fri, 29 Sep 2017 16:32:30 -0400 Subject: [PATCH] feat(textfield): Implement updated UX states for text fields (#998) BREAKING CHANGE: DOM change to add a bottom line element. Adapter API changes to consolidate event handlers. Renamed multi-line text field to textarea. --- demos/textfield.html | 204 ++++++-- package-lock.json | 4 +- packages/mdc-textfield/README.md | 97 ++-- packages/mdc-textfield/_mixins.scss | 37 ++ packages/mdc-textfield/_variables.scss | 44 ++ packages/mdc-textfield/constants.js | 7 + packages/mdc-textfield/foundation.js | 113 ++++- packages/mdc-textfield/index.js | 63 ++- packages/mdc-textfield/mdc-textfield.scss | 445 +++++++++--------- test/unit/mdc-textfield/foundation.test.js | 250 +++++++--- test/unit/mdc-textfield/mdc-textfield.test.js | 138 +++--- 11 files changed, 983 insertions(+), 419 deletions(-) create mode 100644 packages/mdc-textfield/_mixins.scss create mode 100644 packages/mdc-textfield/_variables.scss diff --git a/demos/textfield.html b/demos/textfield.html index 88d20011863..6acb95f0acc 100644 --- a/demos/textfield.html +++ b/demos/textfield.html @@ -42,6 +42,21 @@ .hero .mdc-textfield { min-width: 240px; } + + .demo-note { + padding: 20px; + margin: 20px 0; + background-color: #f2f2f2; + } + + .custom-textfield-input { + width: 300px; + } + + .full-width-textarea-example { + margin-top: 16px; + } + @@ -60,9 +75,9 @@
+ aria-controls="my-textfield-helptext" data-demo-no-auto-js> +
@@ -73,13 +88,13 @@
-

Full Functionality JS Component (Floating Label, Validation, Autocomplete)

+

Full Functionality JS Component (Floating Label, Validation)

+ aria-controls="my-textfield-helptext" data-demo-no-auto-js> +

Password field with validation

aria-controls="pw-validation-msg" autocomplete="current-password"> +

@@ -138,7 +154,7 @@

Password field with validation

Textfield box

-
@@ -194,12 +210,73 @@

Textfield box

}, 0);
+ +
+

Textfield - Leading/Trailing icons

+
+ + Note: Some implementations utilizing leading and trailing icons may wish to set a width on the + input element to achieve uniform widths on textfields. + This demo achieves that by adding a custom class name: custom-textfield-input and setting + some style: + +
+ + 
+.custom-textfield-input {
+  width: 300px;
+}
+
+
+
+ event + + +
+
+
+
+
+ + + delete +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+

CSS Only Textfield

+
@@ -221,51 +298,55 @@

Preventing FOUC

+
+
-

Multi-line Textfields

-
-
- - +

Textarea

+
+
+ +
- - + +
- - + +
- - + +
- - + +
+
-

Multi-line Textfields - CSS Only

- -
- -
+

CSS Only Textarea

+
+
+ +
+
+
-

Full-Width Textfields

+

Full-Width Textfield and Textarea

-
+
+
-
- +
+ +
@@ -293,6 +374,55 @@

Full-Width Textfields

} })(); +