From abbcc6985bceb62f49ee8357fdb9629cee7e0d5d Mon Sep 17 00:00:00 2001 From: "Kenneth G. Franqueiro" Date: Mon, 18 Dec 2017 17:25:19 -0500 Subject: [PATCH] docs(form-field): Clarify README a bit and remove redundant paragraph (#1791) --- packages/mdc-form-field/README.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/mdc-form-field/README.md b/packages/mdc-form-field/README.md index 9f33b424804..2d5bc5b10ad 100644 --- a/packages/mdc-form-field/README.md +++ b/packages/mdc-form-field/README.md @@ -19,7 +19,8 @@ npm install --save @material/form-field ## CSS Usage -The `mdc-form-field` class can be used as a wrapper element with any `input` + `label` combo: +The `mdc-form-field` class can be used as a parent element, with any combination of adjacent `input` and `label` as +immediate children: ```html
@@ -42,9 +43,8 @@ Now the label will be positioned before the checkbox. ### Usage with MDC-Web Components -`mdc-form-field` will work not just with `input` elements, but with _any_ element as long as its -successive sibling is a label element. This means it will work for any MDC-Web form control, such as a -checkbox: +`mdc-form-field` works not just with `input` elements, but with _any_ immediate child element as long as its +successive sibling is a `label` element. This means it will work for MDC-Web form controls such as Checkbox and Radio: ```html
@@ -67,6 +67,10 @@ checkbox:
``` +> Note that MDC Form Field is **not** intended for cases where a label and input are already handled together by +> another component's styles and logic. For example, JavaScript-enhanced instances of MDC Text Field already manage +> a label and input together under their own root element. + ### RTL Support `mdc-form-field` is automatically RTL-aware, and will re-position elements within an RTL context. @@ -144,10 +148,6 @@ No action is taken if the `input` property is not set or the input instance does ### Adapter -The adapter for `MDCFormField` is extremely simple, providing only methods for adding and -removing event listeners from the label, as well as methods for activating and deactivating -the input ripple. - | Method Signature | Description | | --- | --- | | `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |