From 6fb489bdea5d0e94be536e1833007b4a59c986fe Mon Sep 17 00:00:00 2001 From: aaron Date: Wed, 30 Dec 2020 09:23:55 +1100 Subject: [PATCH 1/4] Add in Reduce Height of Select Fields Add in some information on how to resize the select component. I couldn't find this information and was going to start adding in custom styles until I foud the size prop, so I hope this can also help others. --- docs/src/pages/components/selects/selects.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/src/pages/components/selects/selects.md b/docs/src/pages/components/selects/selects.md index 180d16102375a5..55f23363eef55d 100644 --- a/docs/src/pages/components/selects/selects.md +++ b/docs/src/pages/components/selects/selects.md @@ -140,3 +140,6 @@ For a [native select](#native-select), you should mention a label by giving the ``` +## Reduce Height of Select Fields + +If you are using the `TextField` wrapper component as mentioned above you can take advantage of the size prop to reduce the height of your select field, see the details [in this section](/components/text-fields/#sizes). From 36998fd901e7e1da9836312edb0ecbdc8300ead5 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 30 Dec 2020 13:46:31 +0100 Subject: [PATCH 2/4] polish docs --- docs/src/pages/components/selects/selects.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/src/pages/components/selects/selects.md b/docs/src/pages/components/selects/selects.md index 55f23363eef55d..8bcf9b6242738f 100644 --- a/docs/src/pages/components/selects/selects.md +++ b/docs/src/pages/components/selects/selects.md @@ -25,6 +25,9 @@ It's meant to be an improved version of the "react-select" and "downshift" packa ## Props +The Select component is implemented as a custom `` element on top of the [text field components](/components/text-fields). +It allows sharing the same style and many of the same props. + ### Filled and outlined variants {{"demo": "pages/components/selects/SelectVariants.js"}} @@ -140,6 +143,3 @@ For a [native select](#native-select), you should mention a label by giving the ``` -## Reduce Height of Select Fields - -If you are using the `TextField` wrapper component as mentioned above you can take advantage of the size prop to reduce the height of your select field, see the details [in this section](/components/text-fields/#sizes). From d260861b82aac4085eaf529f0101a44ba7faa44a Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 30 Dec 2020 23:12:31 +0100 Subject: [PATCH 3/4] Apply suggestions from code review Co-authored-by: Matt --- docs/src/pages/components/selects/selects.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/selects/selects.md b/docs/src/pages/components/selects/selects.md index 8bcf9b6242738f..eedabe7d60f7fa 100644 --- a/docs/src/pages/components/selects/selects.md +++ b/docs/src/pages/components/selects/selects.md @@ -26,7 +26,7 @@ It's meant to be an improved version of the "react-select" and "downshift" packa ## Props The Select component is implemented as a custom `` element on top of the [text field components](/components/text-fields). -It allows sharing the same style and many of the same props. +It shares the same styles and many of the same props. Refer to the respective component's API page for details. ### Filled and outlined variants From 98ceaf7631399798728370563638eec795d7346e Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 31 Dec 2020 15:56:49 +0100 Subject: [PATCH 4/4] Update docs/src/pages/components/selects/selects.md Co-authored-by: Matt --- docs/src/pages/components/selects/selects.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/src/pages/components/selects/selects.md b/docs/src/pages/components/selects/selects.md index eedabe7d60f7fa..6a9bb5667dc576 100644 --- a/docs/src/pages/components/selects/selects.md +++ b/docs/src/pages/components/selects/selects.md @@ -25,7 +25,8 @@ It's meant to be an improved version of the "react-select" and "downshift" packa ## Props -The Select component is implemented as a custom `` element on top of the [text field components](/components/text-fields). +The Select component is implemented as a custom `` element of the [InputBase](/api/input-base/). +It extends the [text field components](/components/text-fields) sub-components, either the [Input](/api/input/), [FilledInput](/api/filled-input/), or [OutlinedInput](/api/outlined-input/), depending on the variant selected. It shares the same styles and many of the same props. Refer to the respective component's API page for details. ### Filled and outlined variants