fix(select): pre-selected option correctly floats label #2125
Conversation
Codecov Report
@@ Coverage Diff @@
## master #2125 +/- ##
==========================================
- Coverage 99.14% 99.14% -0.01%
==========================================
Files 90 90
Lines 3843 3842 -1
Branches 497 496 -1
==========================================
- Hits 3810 3809 -1
Misses 33 33
Continue to review full report at Codecov.
|
packages/mdc-select/README.md
Outdated
| @@ -129,6 +129,13 @@ style dependencies for both the mdc-list and mdc-menu for this component to func | |||
| </div> | |||
| ``` | |||
|
|
|||
| #### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) | |||
There was a problem hiding this comment.
This section should be removed. It doesn't really address the FOUC issue. It seems like this section duplicates the Select with pre-selected option section example, and they should be merged under that section.
There was a problem hiding this comment.
Oops, looks like I fat-fingered the markdown here - meant to nest the Preventing FOUC section under the Select with pre-selected option.
Should I fix the nesting so that it provides context to the Select with pre-selected option section, or just remove the Preventing FOUC section altogether?
There was a problem hiding this comment.
Change it to
When dealing with the select component that has pre-selected values, you'll want to ensure that you
render `mdc-select__label` with the `mdc-select__label--float-above` modifier class and the selected option with `aria-selected`. This will
ensure that the label moves out of the way of the select's value and prevents a Flash Of
Un-styled Content (**FOUC**).
so that it more closely matches the text field explanation for pre-filled values. Also, it should be above the example on Line 99.
packages/mdc-select/README.md
Outdated
| @@ -129,6 +129,13 @@ style dependencies for both the mdc-list and mdc-menu for this component to func | |||
| </div> | |||
| ``` | |||
|
|
|||
| #### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) | |||
There was a problem hiding this comment.
Change it to
When dealing with the select component that has pre-selected values, you'll want to ensure that you
render `mdc-select__label` with the `mdc-select__label--float-above` modifier class and the selected option with `aria-selected`. This will
ensure that the label moves out of the way of the select's value and prevents a Flash Of
Un-styled Content (**FOUC**).
so that it more closely matches the text field explanation for pre-filled values. Also, it should be above the example on Line 99.
Closes #1810