diff --git a/README.md b/README.md index a98a668d5c9..237281cea07 100644 --- a/README.md +++ b/README.md @@ -40,11 +40,11 @@ Material Components for the web is the successor to [Material Design Lite](https -
- - +
+ @@ -71,11 +71,11 @@ npm install @material/textfield Sample usage of text field component. Please see [MDC Textfield](packages/mdc-textfield) component page for more options. ```html -
- - +
+ ``` #### CSS diff --git a/docs/migrating-from-mdl.md b/docs/migrating-from-mdl.md index e570fc1d028..2f0ef556626 100644 --- a/docs/migrating-from-mdl.md +++ b/docs/migrating-from-mdl.md @@ -98,11 +98,11 @@ MDL: MDC Web: ```html -
- - +
+ ``` In MDC Web, the DOM you specify must be complete; unlike MDL, the library will not create any missing elements for you. @@ -124,11 +124,11 @@ For every component that you want to automatically initialize, set the `data-mdc element, with the component’s class name as the value. For example: ```html -
- - +
+ ``` Auto-initialization needs to be triggered explicitly, but doing so is very straightforward. diff --git a/packages/mdc-auto-init/README.md b/packages/mdc-auto-init/README.md index ac51e9c4506..6b76f097ac8 100644 --- a/packages/mdc-auto-init/README.md +++ b/packages/mdc-auto-init/README.md @@ -32,11 +32,11 @@ attribute to the root element with its value set to the component's JavaScript c properly. ```html -
- - +
+ ``` diff --git a/packages/mdc-floating-label/README.md b/packages/mdc-floating-label/README.md index 209b838bdcc..cf1cccfe8f9 100644 --- a/packages/mdc-floating-label/README.md +++ b/packages/mdc-floating-label/README.md @@ -32,7 +32,7 @@ npm install @material/floating-label ### HTML Structure ```html - +Hint text ``` ### Styles @@ -49,23 +49,6 @@ import {MDCFloatingLabel} from '@material/floating-label'; const floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label')); ``` -## Variants - -### Avoid Dynamic ID Generation - -If you're using the JavaScript-enabled version of floating label, you can avoid needing to assign -a unique `id` to each `` by wrapping `mdc-text-field__input` within a ` ``` > _NOTE_: Do not use `mdc-text-field--outlined` to style a full width text field. @@ -81,31 +81,31 @@ included as part of the DOM structure of a full width text field. ### Textarea ```html -
- +
+ ``` ### Outlined ```html -
- +
+ ``` See [here](../mdc-notched-outline/) for more information on using the notched outline sub-component. @@ -117,11 +117,11 @@ See [here](../mdc-notched-outline/) for more information on using the notched ou To disable the text field, add the `disabled` attribute to the `` element and add the `mdc-text-field--disabled` class to the `mdc-text-field` element. ```html -
- - +
+ ``` ### Text Field without label @@ -132,34 +132,34 @@ Add class name `mdc-text-field--no-label` and remove the label element from the #### Filled ```html -
- +
+ ``` #### Outlined ```html -
- +
+ ``` #### Textarea ```html -
+
+ ``` ### Text Field with Helper Text @@ -169,13 +169,16 @@ and disappears on input field blur by default, or it can be persistent. Helper t which is immediate sibling of `.mdc-text-field`. See [here](helper-text/) for more information on using helper text. ```html -
- - +
+
-
helper text
+
``` @@ -186,11 +189,11 @@ Character counter should be rendered inside `.mdc-text-field-helper-line` elemen See [here](character-counter/) for more information on using character counter. ```html -
- - +
+
0 / 10
@@ -202,17 +205,17 @@ The layout structure of character counter for multi-line text field (textarea) i inside of text field component. ```html -
+
+ ``` Helper text and Character counter are optional subcomponents of text field that can co-exist independently. @@ -229,11 +232,11 @@ well as interaction targets. See [here](icon/) for more information on using ico by HTML5's form validation API. ```html -
- - +
+ ``` `MDCTextFieldFoundation` automatically appends an asterisk to the label text if the required attribute is set. @@ -246,13 +249,13 @@ ensure that the label moves out of the way of the text field's value and prevent Un-styled Content (**FOUC**). ```html -
- -
+ ``` ## Style Customization diff --git a/packages/mdc-textfield/helper-text/README.md b/packages/mdc-textfield/helper-text/README.md index 47e0fd7afd4..6adf905b484 100644 --- a/packages/mdc-textfield/helper-text/README.md +++ b/packages/mdc-textfield/helper-text/README.md @@ -52,13 +52,14 @@ indicate to assistive devices that the display of the helper text is dependent o the input element. ```html -
- + - + Username
-
+
-
- +
+
diff --git a/test/screenshot/spec/mdc-shape/variables/override.html b/test/screenshot/spec/mdc-shape/variables/override.html index 36a38de7930..9e87126cbae 100644 --- a/test/screenshot/spec/mdc-shape/variables/override.html +++ b/test/screenshot/spec/mdc-shape/variables/override.html @@ -68,24 +68,24 @@
-
- - +
+
-
- +
+