From 07ab90f01339b5ed8303e44ead9ad8f93cdd70d3 Mon Sep 17 00:00:00 2001 From: Danica Shen Date: Sat, 21 Mar 2020 21:13:17 +0000 Subject: [PATCH] [docs] Improve doc for textField and buttons (#20207) --- docs/src/pages/components/buttons/buttons.md | 2 +- docs/src/pages/components/text-fields/text-fields.md | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/src/pages/components/buttons/buttons.md b/docs/src/pages/components/buttons/buttons.md index 09beb0561cc742..5f8f4c48331f0c 100644 --- a/docs/src/pages/components/buttons/buttons.md +++ b/docs/src/pages/components/buttons/buttons.md @@ -122,7 +122,7 @@ If you wish to use `not-allowed`, you have two options: However: - - You should add `pointer-events: none;` back when you need to display [tooltips on disabled elements](/components/tooltips/#disabled-elements) + - You should add `pointer-events: none;` back when you need to display [tooltips on disabled elements](/components/tooltips/#disabled-elements). - The cursor won't change if you render something other than a button element, for instance, a link `` element. 2. **DOM change**. You can wrap the button: diff --git a/docs/src/pages/components/text-fields/text-fields.md b/docs/src/pages/components/text-fields/text-fields.md index d6c9a53a477ce3..f2b1f738c2ccde 100644 --- a/docs/src/pages/components/text-fields/text-fields.md +++ b/docs/src/pages/components/text-fields/text-fields.md @@ -54,7 +54,7 @@ There are multiple ways to display an icon with a text field. ### Input Adornments The main way is with an `InputAdornment`. -These can be used to add a prefix, a suffix or an action to an input. +This can be used to add a prefix, a suffix or an action to an input. For instance, you can use an icon button to hide or reveal the password. {{"demo": "pages/components/text-fields/InputAdornments.js"}} @@ -67,7 +67,7 @@ Fancy smaller inputs? Use the `size` prop. ## Layout -`margin` can be used to alter the vertical spacing of inputs. +`margin` prop can be used to alter the vertical spacing of inputs. Using `none` (default) will not apply margins to the `FormControl`, whereas `dense` and `normal` will. `dense` and `normal` alter other styles to meet the specification. @@ -77,7 +77,7 @@ Using `none` (default) will not apply margins to the `FormControl`, whereas `den ## Uncontrolled vs Controlled -The component can be controlled or uncontrolled +The component can be controlled or uncontrolled. {{"demo": "pages/components/text-fields/StateTextFields.js"}} @@ -192,7 +192,7 @@ function MyInputComponent(props) { ## Accessibility -In order for the text field to be accessible, **the input should be linked to the label and the helper text**. The underlying DOM nodes should have this structure. +In order for the text field to be accessible, **the input should be linked to the label and the helper text**. The underlying DOM nodes should have this structure: ```jsx