diff --git a/lib/a11y-snapshot/__snapshots__/material-ui.test.js.snap b/lib/a11y-snapshot/__snapshots__/material-ui.test.js.snap index 71d456b52..7f4b91fd3 100644 --- a/lib/a11y-snapshot/__snapshots__/material-ui.test.js.snap +++ b/lib/a11y-snapshot/__snapshots__/material-ui.test.js.snap @@ -110,7 +110,7 @@ exports[`chromium / 1`] = ` About Contact Us Currently - v4.9.12. View versions page. + v4.9.11. View versions page. . Released under the MIT License .Copyright ©2020Material-UI. @@ -131,44 +131,42 @@ exports[`chromium /api/buttons/ 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age  - Age ​ - Age  - Age ​ - Some important helper text  - Without label - Without labelAge  - Age None - Label + placeholderName  - - Name ​ - - DisabledName  - Name ​ - ErrorName  - Name ​ - Read onlyAge  - Age ​ - Auto width  - Without label - PlaceholderAge  - Age ​ - RequiredAge - Age ​ - Age  - Age ​ + + Age Age ​Age Age ​ Some important helper textWithout label Without labelAge + Age None Label + placeholderName Name ​ DisabledName Name ​ ErrorName Name ​ + Read onlyAge Age ​ Auto widthWithout label PlaceholderAge * Age ​ + RequiredAge Age ​Age Age ​Age  + Age ​ + Age  + Age ​ + Some important helper text  + Without label + Without labelAge  + Age None + Label + placeholderName  + + Name ​ + + DisabledName  + Name ​ + ErrorName  + Name ​ + Read onlyAge  + Age ​ + Auto width  + Without label + PlaceholderAge *  + Age * ​ + RequiredAge + Age ​ + Age  + Age ​ + - See more Advanced features @@ -188,104 +186,102 @@ exports[`chromium /api/buttons/ 1`] = ` As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. - - Age  - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - - Some important helper text  - - age - None - Ten - Twenty - Thirty - - With visually hidden labelAge  - - Age - None - Ten - Twenty - Thirty - - Label + placeholderName  - - Name - None - Hai - Olivier - Kevin - - DisabledName  - - Name - Hai - Olivier - Kevin - - ErrorName  - - Name - Ten - Twenty - Thirty - - Uncontrolled  - - age - Placeholder - Ten - Twenty - Thirty - - PlaceholderAge  - - Age - - Ten - Twenty - Thirty - - RequiredAge - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - + + Age NoneAge None Some important helper textage With visually hidden labelAge + None Label + placeholderName Hai DisabledName Hai ErrorName Thirty + Uncontrolledage PlaceholderAge * None RequiredAge NoneAge None + Age  + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + Some important helper text  + + age + None + Ten + Twenty + Thirty + + With visually hidden labelAge  + + Age + None + Ten + Twenty + Thirty + + Label + placeholderName  + + Name + None + Hai + Olivier + Kevin + + DisabledName  + + Name + Hai + Olivier + Kevin + + ErrorName  + + Name + Ten + Twenty + Thirty + + Uncontrolled  + + age + Placeholder + Ten + Twenty + Thirty + + PlaceholderAge *  + + Age * + + Ten + Twenty + Thirty + + RequiredAge + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + - See more Text Fields @@ -306,30 +302,26 @@ exports[`chromium /api/buttons/ 1`] = ` you can either use it directly as a text field or provide it to the selectinputproperty to have aselectfield. - - Age - Age - Age - Age ​ - Age - - Age - - Ten - Twenty - Thirty - + + AgeAge Age ​Age None + Age + Age + Age + Age ​ + Age + + Age + + Ten + Twenty + Thirty + + - See more Multiple Select @@ -339,58 +331,49 @@ exports[`chromium /api/buttons/ 1`] = ` value by accessingevent.target.valuein theonChangecallback. It's always an array. - - Name  - Name ​ - Tag  - Tag ​ - Chip  - Chip ​ -   - Without label - Native  - - Native - - - - - - - - - - - - - - - - - + + Name Name ​Tag Tag ​Chip Chip ​Without labelNative + Name  + Name ​ + Tag  + Tag ​ + Chip  + Chip ​ +   + Without label + Native  + + Native + + + + + + + + + + + + + + + + + See more Controlled Open Select - - - Age  - Age ​ + + OPEN THE SELECT Age Age ​ + Age  + Age ​ + - See more With a Dialog @@ -398,19 +381,15 @@ exports[`chromium /api/buttons/ 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - + + OPEN SELECT DIALOG + + - See more Grouping @@ -418,29 +397,24 @@ exports[`chromium /api/buttons/ 1`] = ` Display categories with theListSubheadercomponent or the nativeelement. - - Grouping  - - Grouping - - Option 1 - Option 2 - Option 3 - Option 4 - - Grouping  - + + Grouping NoneGrouping ​Grouping  + + Grouping + + Option 1 + Option 2 + Option 3 + Option 4 + + Grouping  + + - See more Accessibility @@ -475,44 +449,42 @@ exports[`chromium /api/selects/ 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age  - Age ​ - Age  - Age ​ - Some important helper text  - Without label - Without labelAge  - Age None - Label + placeholderName  - - Name ​ - - DisabledName  - Name ​ - ErrorName  - Name ​ - Read onlyAge  - Age ​ - Auto width  - Without label - PlaceholderAge  - Age ​ - RequiredAge - Age ​ - Age  - Age ​ + + Age Age ​Age Age ​ Some important helper textWithout label Without labelAge + Age None Label + placeholderName Name ​ DisabledName Name ​ ErrorName Name ​ + Read onlyAge Age ​ Auto widthWithout label PlaceholderAge * Age ​ + RequiredAge Age ​Age Age ​Age  + Age ​ + Age  + Age ​ + Some important helper text  + Without label + Without labelAge  + Age None + Label + placeholderName  + + Name ​ + + DisabledName  + Name ​ + ErrorName  + Name ​ + Read onlyAge  + Age ​ + Auto width  + Without label + PlaceholderAge *  + Age * ​ + RequiredAge + Age ​ + Age  + Age ​ + - See more Advanced features @@ -532,104 +504,102 @@ exports[`chromium /api/selects/ 1`] = ` As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. - - Age  - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - - Some important helper text  - - age - None - Ten - Twenty - Thirty - - With visually hidden labelAge  - - Age - None - Ten - Twenty - Thirty - - Label + placeholderName  - - Name - None - Hai - Olivier - Kevin - - DisabledName  - - Name - Hai - Olivier - Kevin - - ErrorName  - - Name - Ten - Twenty - Thirty - - Uncontrolled  - - age - Placeholder - Ten - Twenty - Thirty - - PlaceholderAge  - - Age - - Ten - Twenty - Thirty - - RequiredAge - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - + + Age NoneAge None Some important helper textage With visually hidden labelAge + None Label + placeholderName Hai DisabledName Hai ErrorName Thirty + Uncontrolledage PlaceholderAge * None RequiredAge NoneAge None + Age  + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + Some important helper text  + + age + None + Ten + Twenty + Thirty + + With visually hidden labelAge  + + Age + None + Ten + Twenty + Thirty + + Label + placeholderName  + + Name + None + Hai + Olivier + Kevin + + DisabledName  + + Name + Hai + Olivier + Kevin + + ErrorName  + + Name + Ten + Twenty + Thirty + + Uncontrolled  + + age + Placeholder + Ten + Twenty + Thirty + + PlaceholderAge *  + + Age * + + Ten + Twenty + Thirty + + RequiredAge + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + - See more Text Fields @@ -650,30 +620,26 @@ exports[`chromium /api/selects/ 1`] = ` you can either use it directly as a text field or provide it to the selectinputproperty to have aselectfield. - - Age - Age - Age - Age ​ - Age - - Age - - Ten - Twenty - Thirty - + + AgeAge Age ​Age None + Age + Age + Age + Age ​ + Age + + Age + + Ten + Twenty + Thirty + + - See more Multiple Select @@ -683,58 +649,49 @@ exports[`chromium /api/selects/ 1`] = ` value by accessingevent.target.valuein theonChangecallback. It's always an array. - - Name  - Name ​ - Tag  - Tag ​ - Chip  - Chip ​ -   - Without label - Native  - - Native - - - - - - - - - - - - - - - - - + + Name Name ​Tag Tag ​Chip Chip ​Without labelNative + Name  + Name ​ + Tag  + Tag ​ + Chip  + Chip ​ +   + Without label + Native  + + Native + + + + + + + + + + + + + + + + + See more Controlled Open Select - - - Age  - Age ​ + + OPEN THE SELECT Age Age ​ + Age  + Age ​ + - See more With a Dialog @@ -742,19 +699,15 @@ exports[`chromium /api/selects/ 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - + + OPEN SELECT DIALOG + + - See more Grouping @@ -762,29 +715,24 @@ exports[`chromium /api/selects/ 1`] = ` Display categories with theListSubheadercomponent or the nativeelement. - - Grouping  - - Grouping - - Option 1 - Option 2 - Option 3 - Option 4 - - Grouping  - + + Grouping NoneGrouping ​Grouping  + + Grouping + + Option 1 + Option 2 + Option 3 + Option 4 + + Grouping  + + - See more Accessibility @@ -819,44 +767,42 @@ exports[`chromium /components/breadcrumbs 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age  - Age ​ - Age  - Age ​ - Some important helper text  - Without label - Without labelAge  - Age None - Label + placeholderName  - - Name ​ - - DisabledName  - Name ​ - ErrorName  - Name ​ - Read onlyAge  - Age ​ - Auto width  - Without label - PlaceholderAge  - Age ​ - RequiredAge - Age ​ - Age  - Age ​ + + Age Age ​Age Age ​ Some important helper textWithout label Without labelAge + Age None Label + placeholderName Name ​ DisabledName Name ​ ErrorName Name ​ + Read onlyAge Age ​ Auto widthWithout label PlaceholderAge * Age ​ + RequiredAge Age ​Age Age ​Age  + Age ​ + Age  + Age ​ + Some important helper text  + Without label + Without labelAge  + Age None + Label + placeholderName  + + Name ​ + + DisabledName  + Name ​ + ErrorName  + Name ​ + Read onlyAge  + Age ​ + Auto width  + Without label + PlaceholderAge *  + Age * ​ + RequiredAge + Age ​ + Age  + Age ​ + - See more Advanced features @@ -876,104 +822,102 @@ exports[`chromium /components/breadcrumbs 1`] = ` As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. - - Age  - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - - Some important helper text  - - age - None - Ten - Twenty - Thirty - - With visually hidden labelAge  - - Age - None - Ten - Twenty - Thirty - - Label + placeholderName  - - Name - None - Hai - Olivier - Kevin - - DisabledName  - - Name - Hai - Olivier - Kevin - - ErrorName  - - Name - Ten - Twenty - Thirty - - Uncontrolled  - - age - Placeholder - Ten - Twenty - Thirty - - PlaceholderAge  - - Age - - Ten - Twenty - Thirty - - RequiredAge - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - + + Age NoneAge None Some important helper textage With visually hidden labelAge + None Label + placeholderName Hai DisabledName Hai ErrorName Thirty + Uncontrolledage PlaceholderAge * None RequiredAge NoneAge None + Age  + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + Some important helper text  + + age + None + Ten + Twenty + Thirty + + With visually hidden labelAge  + + Age + None + Ten + Twenty + Thirty + + Label + placeholderName  + + Name + None + Hai + Olivier + Kevin + + DisabledName  + + Name + Hai + Olivier + Kevin + + ErrorName  + + Name + Ten + Twenty + Thirty + + Uncontrolled  + + age + Placeholder + Ten + Twenty + Thirty + + PlaceholderAge *  + + Age * + + Ten + Twenty + Thirty + + RequiredAge + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + - See more Text Fields @@ -994,30 +938,26 @@ exports[`chromium /components/breadcrumbs 1`] = ` you can either use it directly as a text field or provide it to the selectinputproperty to have aselectfield. - - Age - Age - Age - Age ​ - Age - - Age - - Ten - Twenty - Thirty - + + AgeAge Age ​Age None + Age + Age + Age + Age ​ + Age + + Age + + Ten + Twenty + Thirty + + - See more Multiple Select @@ -1027,58 +967,49 @@ exports[`chromium /components/breadcrumbs 1`] = ` value by accessingevent.target.valuein theonChangecallback. It's always an array. - - Name  - Name ​ - Tag  - Tag ​ - Chip  - Chip ​ -   - Without label - Native  - - Native - - - - - - - - - - - - - - - - - + + Name Name ​Tag Tag ​Chip Chip ​Without labelNative + Name  + Name ​ + Tag  + Tag ​ + Chip  + Chip ​ +   + Without label + Native  + + Native + + + + + + + + + + + + + + + + + See more Controlled Open Select - - - Age  - Age ​ + + OPEN THE SELECT Age Age ​ + Age  + Age ​ + - See more With a Dialog @@ -1086,19 +1017,15 @@ exports[`chromium /components/breadcrumbs 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - + + OPEN SELECT DIALOG + + - See more Grouping @@ -1106,29 +1033,24 @@ exports[`chromium /components/breadcrumbs 1`] = ` Display categories with theListSubheadercomponent or the nativeelement. - - Grouping  - - Grouping - - Option 1 - Option 2 - Option 3 - Option 4 - - Grouping  - + + Grouping NoneGrouping ​Grouping  + + Grouping + + Option 1 + Option 2 + Option 3 + Option 4 + + Grouping  + + - See more Accessibility @@ -1163,44 +1085,42 @@ exports[`chromium /components/button-group/ 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age  - Age ​ - Age  - Age ​ - Some important helper text  - Without label - Without labelAge  - Age None - Label + placeholderName  - - Name ​ - - DisabledName  - Name ​ - ErrorName  - Name ​ - Read onlyAge  - Age ​ - Auto width  - Without label - PlaceholderAge  - Age ​ - RequiredAge - Age ​ - Age  - Age ​ + + Age Age ​Age Age ​ Some important helper textWithout label Without labelAge + Age None Label + placeholderName Name ​ DisabledName Name ​ ErrorName Name ​ + Read onlyAge Age ​ Auto widthWithout label PlaceholderAge * Age ​ + RequiredAge Age ​Age Age ​Age  + Age ​ + Age  + Age ​ + Some important helper text  + Without label + Without labelAge  + Age None + Label + placeholderName  + + Name ​ + + DisabledName  + Name ​ + ErrorName  + Name ​ + Read onlyAge  + Age ​ + Auto width  + Without label + PlaceholderAge *  + Age * ​ + RequiredAge + Age ​ + Age  + Age ​ + - See more Advanced features @@ -1220,104 +1140,102 @@ exports[`chromium /components/button-group/ 1`] = ` As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. - - Age  - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - - Some important helper text  - - age - None - Ten - Twenty - Thirty - - With visually hidden labelAge  - - Age - None - Ten - Twenty - Thirty - - Label + placeholderName  - - Name - None - Hai - Olivier - Kevin - - DisabledName  - - Name - Hai - Olivier - Kevin - - ErrorName  - - Name - Ten - Twenty - Thirty - - Uncontrolled  - - age - Placeholder - Ten - Twenty - Thirty - - PlaceholderAge  - - Age - - Ten - Twenty - Thirty - - RequiredAge - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - + + Age NoneAge None Some important helper textage With visually hidden labelAge + None Label + placeholderName Hai DisabledName Hai ErrorName Thirty + Uncontrolledage PlaceholderAge * None RequiredAge NoneAge None + Age  + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + Some important helper text  + + age + None + Ten + Twenty + Thirty + + With visually hidden labelAge  + + Age + None + Ten + Twenty + Thirty + + Label + placeholderName  + + Name + None + Hai + Olivier + Kevin + + DisabledName  + + Name + Hai + Olivier + Kevin + + ErrorName  + + Name + Ten + Twenty + Thirty + + Uncontrolled  + + age + Placeholder + Ten + Twenty + Thirty + + PlaceholderAge *  + + Age * + + Ten + Twenty + Thirty + + RequiredAge + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + - See more Text Fields @@ -1338,30 +1256,26 @@ exports[`chromium /components/button-group/ 1`] = ` you can either use it directly as a text field or provide it to the selectinputproperty to have aselectfield. - - Age - Age - Age - Age ​ - Age - - Age - - Ten - Twenty - Thirty - + + AgeAge Age ​Age None + Age + Age + Age + Age ​ + Age + + Age + + Ten + Twenty + Thirty + + - See more Multiple Select @@ -1371,58 +1285,49 @@ exports[`chromium /components/button-group/ 1`] = ` value by accessingevent.target.valuein theonChangecallback. It's always an array. - - Name  - Name ​ - Tag  - Tag ​ - Chip  - Chip ​ -   - Without label - Native  - - Native - - - - - - - - - - - - - - - - - + + Name Name ​Tag Tag ​Chip Chip ​Without labelNative + Name  + Name ​ + Tag  + Tag ​ + Chip  + Chip ​ +   + Without label + Native  + + Native + + + + + + + + + + + + + + + + + See more Controlled Open Select - - - Age  - Age ​ + + OPEN THE SELECT Age Age ​ + Age  + Age ​ + - See more With a Dialog @@ -1430,19 +1335,15 @@ exports[`chromium /components/button-group/ 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - + + OPEN SELECT DIALOG + + - See more Grouping @@ -1450,29 +1351,24 @@ exports[`chromium /components/button-group/ 1`] = ` Display categories with theListSubheadercomponent or the nativeelement. - - Grouping  - - Grouping - - Option 1 - Option 2 - Option 3 - Option 4 - - Grouping  - + + Grouping NoneGrouping ​Grouping  + + Grouping + + Option 1 + Option 2 + Option 3 + Option 4 + + Grouping  + + - See more Accessibility @@ -1507,44 +1403,42 @@ exports[`chromium /components/buttons/ 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age  - Age ​ - Age  - Age ​ - Some important helper text  - Without label - Without labelAge  - Age None - Label + placeholderName  - - Name ​ - - DisabledName  - Name ​ - ErrorName  - Name ​ - Read onlyAge  - Age ​ - Auto width  - Without label - PlaceholderAge  - Age ​ - RequiredAge - Age ​ - Age  - Age ​ + + Age Age ​Age Age ​ Some important helper textWithout label Without labelAge + Age None Label + placeholderName Name ​ DisabledName Name ​ ErrorName Name ​ + Read onlyAge Age ​ Auto widthWithout label PlaceholderAge * Age ​ + RequiredAge Age ​Age Age ​Age  + Age ​ + Age  + Age ​ + Some important helper text  + Without label + Without labelAge  + Age None + Label + placeholderName  + + Name ​ + + DisabledName  + Name ​ + ErrorName  + Name ​ + Read onlyAge  + Age ​ + Auto width  + Without label + PlaceholderAge *  + Age * ​ + RequiredAge + Age ​ + Age  + Age ​ + - See more Advanced features @@ -1564,104 +1458,102 @@ exports[`chromium /components/buttons/ 1`] = ` As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. - - Age  - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - - Some important helper text  - - age - None - Ten - Twenty - Thirty - - With visually hidden labelAge  - - Age - None - Ten - Twenty - Thirty - - Label + placeholderName  - - Name - None - Hai - Olivier - Kevin - - DisabledName  - - Name - Hai - Olivier - Kevin - - ErrorName  - - Name - Ten - Twenty - Thirty - - Uncontrolled  - - age - Placeholder - Ten - Twenty - Thirty - - PlaceholderAge  - - Age - - Ten - Twenty - Thirty - - RequiredAge - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - + + Age NoneAge None Some important helper textage With visually hidden labelAge + None Label + placeholderName Hai DisabledName Hai ErrorName Thirty + Uncontrolledage PlaceholderAge * None RequiredAge NoneAge None + Age  + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + Some important helper text  + + age + None + Ten + Twenty + Thirty + + With visually hidden labelAge  + + Age + None + Ten + Twenty + Thirty + + Label + placeholderName  + + Name + None + Hai + Olivier + Kevin + + DisabledName  + + Name + Hai + Olivier + Kevin + + ErrorName  + + Name + Ten + Twenty + Thirty + + Uncontrolled  + + age + Placeholder + Ten + Twenty + Thirty + + PlaceholderAge *  + + Age * + + Ten + Twenty + Thirty + + RequiredAge + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + - See more Text Fields @@ -1682,30 +1574,26 @@ exports[`chromium /components/buttons/ 1`] = ` you can either use it directly as a text field or provide it to the selectinputproperty to have aselectfield. - - Age - Age - Age - Age ​ - Age - - Age - - Ten - Twenty - Thirty - + + AgeAge Age ​Age None + Age + Age + Age + Age ​ + Age + + Age + + Ten + Twenty + Thirty + + - See more Multiple Select @@ -1715,58 +1603,49 @@ exports[`chromium /components/buttons/ 1`] = ` value by accessingevent.target.valuein theonChangecallback. It's always an array. - - Name  - Name ​ - Tag  - Tag ​ - Chip  - Chip ​ -   - Without label - Native  - - Native - - - - - - - - - - - - - - - - - + + Name Name ​Tag Tag ​Chip Chip ​Without labelNative + Name  + Name ​ + Tag  + Tag ​ + Chip  + Chip ​ +   + Without label + Native  + + Native + + + + + + + + + + + + + + + + + See more Controlled Open Select - - - Age  - Age ​ + + OPEN THE SELECT Age Age ​ + Age  + Age ​ + - See more With a Dialog @@ -1774,19 +1653,15 @@ exports[`chromium /components/buttons/ 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - + + OPEN SELECT DIALOG + + - See more Grouping @@ -1794,29 +1669,24 @@ exports[`chromium /components/buttons/ 1`] = ` Display categories with theListSubheadercomponent or the nativeelement. - - Grouping  - - Grouping - - Option 1 - Option 2 - Option 3 - Option 4 - - Grouping  - + + Grouping NoneGrouping ​Grouping  + + Grouping + + Option 1 + Option 2 + Option 3 + Option 4 + + Grouping  + + - See more Accessibility @@ -1851,44 +1721,42 @@ exports[`chromium /components/checkboxes/ 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age  - Age ​ - Age  - Age ​ - Some important helper text  - Without label - Without labelAge  - Age None - Label + placeholderName  - - Name ​ - - DisabledName  - Name ​ - ErrorName  - Name ​ - Read onlyAge  - Age ​ - Auto width  - Without label - PlaceholderAge  - Age ​ - RequiredAge - Age ​ - Age  - Age ​ + + Age Age ​Age Age ​ Some important helper textWithout label Without labelAge + Age None Label + placeholderName Name ​ DisabledName Name ​ ErrorName Name ​ + Read onlyAge Age ​ Auto widthWithout label PlaceholderAge * Age ​ + RequiredAge Age ​Age Age ​Age  + Age ​ + Age  + Age ​ + Some important helper text  + Without label + Without labelAge  + Age None + Label + placeholderName  + + Name ​ + + DisabledName  + Name ​ + ErrorName  + Name ​ + Read onlyAge  + Age ​ + Auto width  + Without label + PlaceholderAge *  + Age * ​ + RequiredAge + Age ​ + Age  + Age ​ + - See more Advanced features @@ -1908,104 +1776,102 @@ exports[`chromium /components/checkboxes/ 1`] = ` As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. - - Age  - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - - Some important helper text  - - age - None - Ten - Twenty - Thirty - - With visually hidden labelAge  - - Age - None - Ten - Twenty - Thirty - - Label + placeholderName  - - Name - None - Hai - Olivier - Kevin - - DisabledName  - - Name - Hai - Olivier - Kevin - - ErrorName  - - Name - Ten - Twenty - Thirty - - Uncontrolled  - - age - Placeholder - Ten - Twenty - Thirty - - PlaceholderAge  - - Age - - Ten - Twenty - Thirty - - RequiredAge - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - + + Age NoneAge None Some important helper textage With visually hidden labelAge + None Label + placeholderName Hai DisabledName Hai ErrorName Thirty + Uncontrolledage PlaceholderAge * None RequiredAge NoneAge None + Age  + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + Some important helper text  + + age + None + Ten + Twenty + Thirty + + With visually hidden labelAge  + + Age + None + Ten + Twenty + Thirty + + Label + placeholderName  + + Name + None + Hai + Olivier + Kevin + + DisabledName  + + Name + Hai + Olivier + Kevin + + ErrorName  + + Name + Ten + Twenty + Thirty + + Uncontrolled  + + age + Placeholder + Ten + Twenty + Thirty + + PlaceholderAge *  + + Age * + + Ten + Twenty + Thirty + + RequiredAge + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + - See more Text Fields @@ -2026,30 +1892,26 @@ exports[`chromium /components/checkboxes/ 1`] = ` you can either use it directly as a text field or provide it to the selectinputproperty to have aselectfield. - - Age - Age - Age - Age ​ - Age - - Age - - Ten - Twenty - Thirty - + + AgeAge Age ​Age None + Age + Age + Age + Age ​ + Age + + Age + + Ten + Twenty + Thirty + + - See more Multiple Select @@ -2059,58 +1921,49 @@ exports[`chromium /components/checkboxes/ 1`] = ` value by accessingevent.target.valuein theonChangecallback. It's always an array. - - Name  - Name ​ - Tag  - Tag ​ - Chip  - Chip ​ -   - Without label - Native  - - Native - - - - - - - - - - - - - - - - - + + Name Name ​Tag Tag ​Chip Chip ​Without labelNative + Name  + Name ​ + Tag  + Tag ​ + Chip  + Chip ​ +   + Without label + Native  + + Native + + + + + + + + + + + + + + + + + See more Controlled Open Select - - - Age  - Age ​ + + OPEN THE SELECT Age Age ​ + Age  + Age ​ + - See more With a Dialog @@ -2118,19 +1971,15 @@ exports[`chromium /components/checkboxes/ 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - + + OPEN SELECT DIALOG + + - See more Grouping @@ -2138,29 +1987,24 @@ exports[`chromium /components/checkboxes/ 1`] = ` Display categories with theListSubheadercomponent or the nativeelement. - - Grouping  - - Grouping - - Option 1 - Option 2 - Option 3 - Option 4 - - Grouping  - + + Grouping NoneGrouping ​Grouping  + + Grouping + + Option 1 + Option 2 + Option 3 + Option 4 + + Grouping  + + - See more Accessibility @@ -2195,44 +2039,42 @@ exports[`chromium /components/dialogs/ 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age  - Age ​ - Age  - Age ​ - Some important helper text  - Without label - Without labelAge  - Age None - Label + placeholderName  - - Name ​ - - DisabledName  - Name ​ - ErrorName  - Name ​ - Read onlyAge  - Age ​ - Auto width  - Without label - PlaceholderAge  - Age ​ - RequiredAge - Age ​ - Age  - Age ​ + + Age Age ​Age Age ​ Some important helper textWithout label Without labelAge + Age None Label + placeholderName Name ​ DisabledName Name ​ ErrorName Name ​ + Read onlyAge Age ​ Auto widthWithout label PlaceholderAge * Age ​ + RequiredAge Age ​Age Age ​Age  + Age ​ + Age  + Age ​ + Some important helper text  + Without label + Without labelAge  + Age None + Label + placeholderName  + + Name ​ + + DisabledName  + Name ​ + ErrorName  + Name ​ + Read onlyAge  + Age ​ + Auto width  + Without label + PlaceholderAge *  + Age * ​ + RequiredAge + Age ​ + Age  + Age ​ + - See more Advanced features @@ -2252,104 +2094,102 @@ exports[`chromium /components/dialogs/ 1`] = ` As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. - - Age  - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - - Some important helper text  - - age - None - Ten - Twenty - Thirty - - With visually hidden labelAge  - - Age - None - Ten - Twenty - Thirty - - Label + placeholderName  - - Name - None - Hai - Olivier - Kevin - - DisabledName  - - Name - Hai - Olivier - Kevin - - ErrorName  - - Name - Ten - Twenty - Thirty - - Uncontrolled  - - age - Placeholder - Ten - Twenty - Thirty - - PlaceholderAge  - - Age - - Ten - Twenty - Thirty - - RequiredAge - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - + + Age NoneAge None Some important helper textage With visually hidden labelAge + None Label + placeholderName Hai DisabledName Hai ErrorName Thirty + Uncontrolledage PlaceholderAge * None RequiredAge NoneAge None + Age  + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + Some important helper text  + + age + None + Ten + Twenty + Thirty + + With visually hidden labelAge  + + Age + None + Ten + Twenty + Thirty + + Label + placeholderName  + + Name + None + Hai + Olivier + Kevin + + DisabledName  + + Name + Hai + Olivier + Kevin + + ErrorName  + + Name + Ten + Twenty + Thirty + + Uncontrolled  + + age + Placeholder + Ten + Twenty + Thirty + + PlaceholderAge *  + + Age * + + Ten + Twenty + Thirty + + RequiredAge + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + - See more Text Fields @@ -2370,30 +2210,26 @@ exports[`chromium /components/dialogs/ 1`] = ` you can either use it directly as a text field or provide it to the selectinputproperty to have aselectfield. - - Age - Age - Age - Age ​ - Age - - Age - - Ten - Twenty - Thirty - + + AgeAge Age ​Age None + Age + Age + Age + Age ​ + Age + + Age + + Ten + Twenty + Thirty + + - See more Multiple Select @@ -2403,58 +2239,49 @@ exports[`chromium /components/dialogs/ 1`] = ` value by accessingevent.target.valuein theonChangecallback. It's always an array. - - Name  - Name ​ - Tag  - Tag ​ - Chip  - Chip ​ -   - Without label - Native  - - Native - - - - - - - - - - - - - - - - - + + Name Name ​Tag Tag ​Chip Chip ​Without labelNative + Name  + Name ​ + Tag  + Tag ​ + Chip  + Chip ​ +   + Without label + Native  + + Native + + + + + + + + + + + + + + + + + See more Controlled Open Select - - - Age  - Age ​ + + OPEN THE SELECT Age Age ​ + Age  + Age ​ + - See more With a Dialog @@ -2462,19 +2289,15 @@ exports[`chromium /components/dialogs/ 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - + + OPEN SELECT DIALOG + + - See more Grouping @@ -2482,29 +2305,24 @@ exports[`chromium /components/dialogs/ 1`] = ` Display categories with theListSubheadercomponent or the nativeelement. - - Grouping  - - Grouping - - Option 1 - Option 2 - Option 3 - Option 4 - - Grouping  - + + Grouping NoneGrouping ​Grouping  + + Grouping + + Option 1 + Option 2 + Option 3 + Option 4 + + Grouping  + + - See more Accessibility @@ -2539,44 +2357,42 @@ exports[`chromium /components/pagination/ 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age  - Age ​ - Age  - Age ​ - Some important helper text  - Without label - Without labelAge  - Age None - Label + placeholderName  - - Name ​ - - DisabledName  - Name ​ - ErrorName  - Name ​ - Read onlyAge  - Age ​ - Auto width  - Without label - PlaceholderAge  - Age ​ - RequiredAge - Age ​ - Age  - Age ​ + + Age Age ​Age Age ​ Some important helper textWithout label Without labelAge + Age None Label + placeholderName Name ​ DisabledName Name ​ ErrorName Name ​ + Read onlyAge Age ​ Auto widthWithout label PlaceholderAge * Age ​ + RequiredAge Age ​Age Age ​Age  + Age ​ + Age  + Age ​ + Some important helper text  + Without label + Without labelAge  + Age None + Label + placeholderName  + + Name ​ + + DisabledName  + Name ​ + ErrorName  + Name ​ + Read onlyAge  + Age ​ + Auto width  + Without label + PlaceholderAge *  + Age * ​ + RequiredAge + Age ​ + Age  + Age ​ + - See more Advanced features @@ -2596,104 +2412,102 @@ exports[`chromium /components/pagination/ 1`] = ` As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. - - Age  - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - - Some important helper text  - - age - None - Ten - Twenty - Thirty - - With visually hidden labelAge  - - Age - None - Ten - Twenty - Thirty - - Label + placeholderName  - - Name - None - Hai - Olivier - Kevin - - DisabledName  - - Name - Hai - Olivier - Kevin - - ErrorName  - - Name - Ten - Twenty - Thirty - - Uncontrolled  - - age - Placeholder - Ten - Twenty - Thirty - - PlaceholderAge  - - Age - - Ten - Twenty - Thirty - - RequiredAge - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - + + Age NoneAge None Some important helper textage With visually hidden labelAge + None Label + placeholderName Hai DisabledName Hai ErrorName Thirty + Uncontrolledage PlaceholderAge * None RequiredAge NoneAge None + Age  + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + Some important helper text  + + age + None + Ten + Twenty + Thirty + + With visually hidden labelAge  + + Age + None + Ten + Twenty + Thirty + + Label + placeholderName  + + Name + None + Hai + Olivier + Kevin + + DisabledName  + + Name + Hai + Olivier + Kevin + + ErrorName  + + Name + Ten + Twenty + Thirty + + Uncontrolled  + + age + Placeholder + Ten + Twenty + Thirty + + PlaceholderAge *  + + Age * + + Ten + Twenty + Thirty + + RequiredAge + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + - See more Text Fields @@ -2714,30 +2528,26 @@ exports[`chromium /components/pagination/ 1`] = ` you can either use it directly as a text field or provide it to the selectinputproperty to have aselectfield. - - Age - Age - Age - Age ​ - Age - - Age - - Ten - Twenty - Thirty - + + AgeAge Age ​Age None + Age + Age + Age + Age ​ + Age + + Age + + Ten + Twenty + Thirty + + - See more Multiple Select @@ -2747,58 +2557,49 @@ exports[`chromium /components/pagination/ 1`] = ` value by accessingevent.target.valuein theonChangecallback. It's always an array. - - Name  - Name ​ - Tag  - Tag ​ - Chip  - Chip ​ -   - Without label - Native  - - Native - - - - - - - - - - - - - - - - - + + Name Name ​Tag Tag ​Chip Chip ​Without labelNative + Name  + Name ​ + Tag  + Tag ​ + Chip  + Chip ​ +   + Without label + Native  + + Native + + + + + + + + + + + + + + + + + See more Controlled Open Select - - - Age  - Age ​ + + OPEN THE SELECT Age Age ​ + Age  + Age ​ + - See more With a Dialog @@ -2806,19 +2607,15 @@ exports[`chromium /components/pagination/ 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - + + OPEN SELECT DIALOG + + - See more Grouping @@ -2826,29 +2623,24 @@ exports[`chromium /components/pagination/ 1`] = ` Display categories with theListSubheadercomponent or the nativeelement. - - Grouping  - - Grouping - - Option 1 - Option 2 - Option 3 - Option 4 - - Grouping  - + + Grouping NoneGrouping ​Grouping  + + Grouping + + Option 1 + Option 2 + Option 3 + Option 4 + + Grouping  + + - See more Accessibility @@ -2883,44 +2675,42 @@ exports[`chromium /components/pickers 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age  - Age ​ - Age  - Age ​ - Some important helper text  - Without label - Without labelAge  - Age None - Label + placeholderName  - - Name ​ - - DisabledName  - Name ​ - ErrorName  - Name ​ - Read onlyAge  - Age ​ - Auto width  - Without label - PlaceholderAge  - Age ​ - RequiredAge - Age ​ - Age  - Age ​ + + Age Age ​Age Age ​ Some important helper textWithout label Without labelAge + Age None Label + placeholderName Name ​ DisabledName Name ​ ErrorName Name ​ + Read onlyAge Age ​ Auto widthWithout label PlaceholderAge * Age ​ + RequiredAge Age ​Age Age ​Age  + Age ​ + Age  + Age ​ + Some important helper text  + Without label + Without labelAge  + Age None + Label + placeholderName  + + Name ​ + + DisabledName  + Name ​ + ErrorName  + Name ​ + Read onlyAge  + Age ​ + Auto width  + Without label + PlaceholderAge *  + Age * ​ + RequiredAge + Age ​ + Age  + Age ​ + - See more Advanced features @@ -2940,104 +2730,102 @@ exports[`chromium /components/pickers 1`] = ` As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. - - Age  - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - - Some important helper text  - - age - None - Ten - Twenty - Thirty - - With visually hidden labelAge  - - Age - None - Ten - Twenty - Thirty - - Label + placeholderName  - - Name - None - Hai - Olivier - Kevin - - DisabledName  - - Name - Hai - Olivier - Kevin - - ErrorName  - - Name - Ten - Twenty - Thirty - - Uncontrolled  - - age - Placeholder - Ten - Twenty - Thirty - - PlaceholderAge  - - Age - - Ten - Twenty - Thirty - - RequiredAge - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - + + Age NoneAge None Some important helper textage With visually hidden labelAge + None Label + placeholderName Hai DisabledName Hai ErrorName Thirty + Uncontrolledage PlaceholderAge * None RequiredAge NoneAge None + Age  + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + Some important helper text  + + age + None + Ten + Twenty + Thirty + + With visually hidden labelAge  + + Age + None + Ten + Twenty + Thirty + + Label + placeholderName  + + Name + None + Hai + Olivier + Kevin + + DisabledName  + + Name + Hai + Olivier + Kevin + + ErrorName  + + Name + Ten + Twenty + Thirty + + Uncontrolled  + + age + Placeholder + Ten + Twenty + Thirty + + PlaceholderAge *  + + Age * + + Ten + Twenty + Thirty + + RequiredAge + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + - See more Text Fields @@ -3058,30 +2846,26 @@ exports[`chromium /components/pickers 1`] = ` you can either use it directly as a text field or provide it to the selectinputproperty to have aselectfield. - - Age - Age - Age - Age ​ - Age - - Age - - Ten - Twenty - Thirty - + + AgeAge Age ​Age None + Age + Age + Age + Age ​ + Age + + Age + + Ten + Twenty + Thirty + + - See more Multiple Select @@ -3091,58 +2875,49 @@ exports[`chromium /components/pickers 1`] = ` value by accessingevent.target.valuein theonChangecallback. It's always an array. - - Name  - Name ​ - Tag  - Tag ​ - Chip  - Chip ​ -   - Without label - Native  - - Native - - - - - - - - - - - - - - - - - + + Name Name ​Tag Tag ​Chip Chip ​Without labelNative + Name  + Name ​ + Tag  + Tag ​ + Chip  + Chip ​ +   + Without label + Native  + + Native + + + + + + + + + + + + + + + + + See more Controlled Open Select - - - Age  - Age ​ + + OPEN THE SELECT Age Age ​ + Age  + Age ​ + - See more With a Dialog @@ -3150,19 +2925,15 @@ exports[`chromium /components/pickers 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - + + OPEN SELECT DIALOG + + - See more Grouping @@ -3170,29 +2941,24 @@ exports[`chromium /components/pickers 1`] = ` Display categories with theListSubheadercomponent or the nativeelement. - - Grouping  - - Grouping - - Option 1 - Option 2 - Option 3 - Option 4 - - Grouping  - + + Grouping NoneGrouping ​Grouping  + + Grouping + + Option 1 + Option 2 + Option 3 + Option 4 + + Grouping  + + - See more Accessibility @@ -3227,44 +2993,42 @@ exports[`chromium /components/radio-buttons 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age  - Age ​ - Age  - Age ​ - Some important helper text  - Without label - Without labelAge  - Age None - Label + placeholderName  - - Name ​ - - DisabledName  - Name ​ - ErrorName  - Name ​ - Read onlyAge  - Age ​ - Auto width  - Without label - PlaceholderAge  - Age ​ - RequiredAge - Age ​ - Age  - Age ​ + + Age Age ​Age Age ​ Some important helper textWithout label Without labelAge + Age None Label + placeholderName Name ​ DisabledName Name ​ ErrorName Name ​ + Read onlyAge Age ​ Auto widthWithout label PlaceholderAge * Age ​ + RequiredAge Age ​Age Age ​Age  + Age ​ + Age  + Age ​ + Some important helper text  + Without label + Without labelAge  + Age None + Label + placeholderName  + + Name ​ + + DisabledName  + Name ​ + ErrorName  + Name ​ + Read onlyAge  + Age ​ + Auto width  + Without label + PlaceholderAge *  + Age * ​ + RequiredAge + Age ​ + Age  + Age ​ + - See more Advanced features @@ -3284,104 +3048,102 @@ exports[`chromium /components/radio-buttons 1`] = ` As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. - - Age  - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - - Some important helper text  - - age - None - Ten - Twenty - Thirty - - With visually hidden labelAge  - - Age - None - Ten - Twenty - Thirty - - Label + placeholderName  - - Name - None - Hai - Olivier - Kevin - - DisabledName  - - Name - Hai - Olivier - Kevin - - ErrorName  - - Name - Ten - Twenty - Thirty - - Uncontrolled  - - age - Placeholder - Ten - Twenty - Thirty - - PlaceholderAge  - - Age - - Ten - Twenty - Thirty - - RequiredAge - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - + + Age NoneAge None Some important helper textage With visually hidden labelAge + None Label + placeholderName Hai DisabledName Hai ErrorName Thirty + Uncontrolledage PlaceholderAge * None RequiredAge NoneAge None + Age  + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + Some important helper text  + + age + None + Ten + Twenty + Thirty + + With visually hidden labelAge  + + Age + None + Ten + Twenty + Thirty + + Label + placeholderName  + + Name + None + Hai + Olivier + Kevin + + DisabledName  + + Name + Hai + Olivier + Kevin + + ErrorName  + + Name + Ten + Twenty + Thirty + + Uncontrolled  + + age + Placeholder + Ten + Twenty + Thirty + + PlaceholderAge *  + + Age * + + Ten + Twenty + Thirty + + RequiredAge + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + - See more Text Fields @@ -3402,30 +3164,26 @@ exports[`chromium /components/radio-buttons 1`] = ` you can either use it directly as a text field or provide it to the selectinputproperty to have aselectfield. - - Age - Age - Age - Age ​ - Age - - Age - - Ten - Twenty - Thirty - + + AgeAge Age ​Age None + Age + Age + Age + Age ​ + Age + + Age + + Ten + Twenty + Thirty + + - See more Multiple Select @@ -3435,58 +3193,49 @@ exports[`chromium /components/radio-buttons 1`] = ` value by accessingevent.target.valuein theonChangecallback. It's always an array. - - Name  - Name ​ - Tag  - Tag ​ - Chip  - Chip ​ -   - Without label - Native  - - Native - - - - - - - - - - - - - - - - - + + Name Name ​Tag Tag ​Chip Chip ​Without labelNative + Name  + Name ​ + Tag  + Tag ​ + Chip  + Chip ​ +   + Without label + Native  + + Native + + + + + + + + + + + + + + + + + See more Controlled Open Select - - - Age  - Age ​ + + OPEN THE SELECT Age Age ​ + Age  + Age ​ + - See more With a Dialog @@ -3494,19 +3243,15 @@ exports[`chromium /components/radio-buttons 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - + + OPEN SELECT DIALOG + + - See more Grouping @@ -3514,29 +3259,24 @@ exports[`chromium /components/radio-buttons 1`] = ` Display categories with theListSubheadercomponent or the nativeelement. - - Grouping  - - Grouping - - Option 1 - Option 2 - Option 3 - Option 4 - - Grouping  - + + Grouping NoneGrouping ​Grouping  + + Grouping + + Option 1 + Option 2 + Option 3 + Option 4 + + Grouping  + + - See more Accessibility @@ -3571,44 +3311,42 @@ exports[`chromium /components/rating/ 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age  - Age ​ - Age  - Age ​ - Some important helper text  - Without label - Without labelAge  - Age None - Label + placeholderName  - - Name ​ - - DisabledName  - Name ​ - ErrorName  - Name ​ - Read onlyAge  - Age ​ - Auto width  - Without label - PlaceholderAge  - Age ​ - RequiredAge - Age ​ - Age  - Age ​ + + Age Age ​Age Age ​ Some important helper textWithout label Without labelAge + Age None Label + placeholderName Name ​ DisabledName Name ​ ErrorName Name ​ + Read onlyAge Age ​ Auto widthWithout label PlaceholderAge * Age ​ + RequiredAge Age ​Age Age ​Age  + Age ​ + Age  + Age ​ + Some important helper text  + Without label + Without labelAge  + Age None + Label + placeholderName  + + Name ​ + + DisabledName  + Name ​ + ErrorName  + Name ​ + Read onlyAge  + Age ​ + Auto width  + Without label + PlaceholderAge *  + Age * ​ + RequiredAge + Age ​ + Age  + Age ​ + - See more Advanced features @@ -3628,104 +3366,102 @@ exports[`chromium /components/rating/ 1`] = ` As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. - - Age  - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - - Some important helper text  - - age - None - Ten - Twenty - Thirty - - With visually hidden labelAge  - - Age - None - Ten - Twenty - Thirty - - Label + placeholderName  - - Name - None - Hai - Olivier - Kevin - - DisabledName  - - Name - Hai - Olivier - Kevin - - ErrorName  - - Name - Ten - Twenty - Thirty - - Uncontrolled  - - age - Placeholder - Ten - Twenty - Thirty - - PlaceholderAge  - - Age - - Ten - Twenty - Thirty - - RequiredAge - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - + + Age NoneAge None Some important helper textage With visually hidden labelAge + None Label + placeholderName Hai DisabledName Hai ErrorName Thirty + Uncontrolledage PlaceholderAge * None RequiredAge NoneAge None + Age  + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + Some important helper text  + + age + None + Ten + Twenty + Thirty + + With visually hidden labelAge  + + Age + None + Ten + Twenty + Thirty + + Label + placeholderName  + + Name + None + Hai + Olivier + Kevin + + DisabledName  + + Name + Hai + Olivier + Kevin + + ErrorName  + + Name + Ten + Twenty + Thirty + + Uncontrolled  + + age + Placeholder + Ten + Twenty + Thirty + + PlaceholderAge *  + + Age * + + Ten + Twenty + Thirty + + RequiredAge + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + - See more Text Fields @@ -3746,30 +3482,26 @@ exports[`chromium /components/rating/ 1`] = ` you can either use it directly as a text field or provide it to the selectinputproperty to have aselectfield. - - Age - Age - Age - Age ​ - Age - - Age - - Ten - Twenty - Thirty - + + AgeAge Age ​Age None + Age + Age + Age + Age ​ + Age + + Age + + Ten + Twenty + Thirty + + - See more Multiple Select @@ -3779,58 +3511,49 @@ exports[`chromium /components/rating/ 1`] = ` value by accessingevent.target.valuein theonChangecallback. It's always an array. - - Name  - Name ​ - Tag  - Tag ​ - Chip  - Chip ​ -   - Without label - Native  - - Native - - - - - - - - - - - - - - - - - + + Name Name ​Tag Tag ​Chip Chip ​Without labelNative + Name  + Name ​ + Tag  + Tag ​ + Chip  + Chip ​ +   + Without label + Native  + + Native + + + + + + + + + + + + + + + + + See more Controlled Open Select - - - Age  - Age ​ + + OPEN THE SELECT Age Age ​ + Age  + Age ​ + - See more With a Dialog @@ -3838,19 +3561,15 @@ exports[`chromium /components/rating/ 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - + + OPEN SELECT DIALOG + + - See more Grouping @@ -3858,29 +3577,24 @@ exports[`chromium /components/rating/ 1`] = ` Display categories with theListSubheadercomponent or the nativeelement. - - Grouping  - - Grouping - - Option 1 - Option 2 - Option 3 - Option 4 - - Grouping  - + + Grouping NoneGrouping ​Grouping  + + Grouping + + Option 1 + Option 2 + Option 3 + Option 4 + + Grouping  + + - See more Accessibility @@ -3915,44 +3629,42 @@ exports[`chromium /components/selects/ 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age  - Age ​ - Age  - Age ​ - Some important helper text  - Without label - Without labelAge  - Age None - Label + placeholderName  - - Name ​ - - DisabledName  - Name ​ - ErrorName  - Name ​ - Read onlyAge  - Age ​ - Auto width  - Without label - PlaceholderAge  - Age ​ - RequiredAge - Age ​ - Age  - Age ​ + + Age Age ​Age Age ​ Some important helper textWithout label Without labelAge + Age None Label + placeholderName Name ​ DisabledName Name ​ ErrorName Name ​ + Read onlyAge Age ​ Auto widthWithout label PlaceholderAge * Age ​ + RequiredAge Age ​Age Age ​Age  + Age ​ + Age  + Age ​ + Some important helper text  + Without label + Without labelAge  + Age None + Label + placeholderName  + + Name ​ + + DisabledName  + Name ​ + ErrorName  + Name ​ + Read onlyAge  + Age ​ + Auto width  + Without label + PlaceholderAge *  + Age * ​ + RequiredAge + Age ​ + Age  + Age ​ + - See more Advanced features @@ -3972,104 +3684,102 @@ exports[`chromium /components/selects/ 1`] = ` As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. - - Age  - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - - Some important helper text  - - age - None - Ten - Twenty - Thirty - - With visually hidden labelAge  - - Age - None - Ten - Twenty - Thirty - - Label + placeholderName  - - Name - None - Hai - Olivier - Kevin - - DisabledName  - - Name - Hai - Olivier - Kevin - - ErrorName  - - Name - Ten - Twenty - Thirty - - Uncontrolled  - - age - Placeholder - Ten - Twenty - Thirty - - PlaceholderAge  - - Age - - Ten - Twenty - Thirty - - RequiredAge - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - + + Age NoneAge None Some important helper textage With visually hidden labelAge + None Label + placeholderName Hai DisabledName Hai ErrorName Thirty + Uncontrolledage PlaceholderAge * None RequiredAge NoneAge None + Age  + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + Some important helper text  + + age + None + Ten + Twenty + Thirty + + With visually hidden labelAge  + + Age + None + Ten + Twenty + Thirty + + Label + placeholderName  + + Name + None + Hai + Olivier + Kevin + + DisabledName  + + Name + Hai + Olivier + Kevin + + ErrorName  + + Name + Ten + Twenty + Thirty + + Uncontrolled  + + age + Placeholder + Ten + Twenty + Thirty + + PlaceholderAge *  + + Age * + + Ten + Twenty + Thirty + + RequiredAge + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + - See more Text Fields @@ -4090,30 +3800,26 @@ exports[`chromium /components/selects/ 1`] = ` you can either use it directly as a text field or provide it to the selectinputproperty to have aselectfield. - - Age - Age - Age - Age ​ - Age - - Age - - Ten - Twenty - Thirty - + + AgeAge Age ​Age None + Age + Age + Age + Age ​ + Age + + Age + + Ten + Twenty + Thirty + + - See more Multiple Select @@ -4123,58 +3829,49 @@ exports[`chromium /components/selects/ 1`] = ` value by accessingevent.target.valuein theonChangecallback. It's always an array. - - Name  - Name ​ - Tag  - Tag ​ - Chip  - Chip ​ -   - Without label - Native  - - Native - - - - - - - - - - - - - - - - - + + Name Name ​Tag Tag ​Chip Chip ​Without labelNative + Name  + Name ​ + Tag  + Tag ​ + Chip  + Chip ​ +   + Without label + Native  + + Native + + + + + + + + + + + + + + + + + See more Controlled Open Select - - - Age  - Age ​ + + OPEN THE SELECT Age Age ​ + Age  + Age ​ + - See more With a Dialog @@ -4182,19 +3879,15 @@ exports[`chromium /components/selects/ 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - + + OPEN SELECT DIALOG + + - See more Grouping @@ -4202,29 +3895,24 @@ exports[`chromium /components/selects/ 1`] = ` Display categories with theListSubheadercomponent or the nativeelement. - - Grouping  - - Grouping - - Option 1 - Option 2 - Option 3 - Option 4 - - Grouping  - + + Grouping NoneGrouping ​Grouping  + + Grouping + + Option 1 + Option 2 + Option 3 + Option 4 + + Grouping  + + - See more Accessibility @@ -4259,44 +3947,42 @@ exports[`chromium /components/slider 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age  - Age ​ - Age  - Age ​ - Some important helper text  - Without label - Without labelAge  - Age None - Label + placeholderName  - - Name ​ - - DisabledName  - Name ​ - ErrorName  - Name ​ - Read onlyAge  - Age ​ - Auto width  - Without label - PlaceholderAge  - Age ​ - RequiredAge - Age ​ - Age  - Age ​ + + Age Age ​Age Age ​ Some important helper textWithout label Without labelAge + Age None Label + placeholderName Name ​ DisabledName Name ​ ErrorName Name ​ + Read onlyAge Age ​ Auto widthWithout label PlaceholderAge * Age ​ + RequiredAge Age ​Age Age ​Age  + Age ​ + Age  + Age ​ + Some important helper text  + Without label + Without labelAge  + Age None + Label + placeholderName  + + Name ​ + + DisabledName  + Name ​ + ErrorName  + Name ​ + Read onlyAge  + Age ​ + Auto width  + Without label + PlaceholderAge *  + Age * ​ + RequiredAge + Age ​ + Age  + Age ​ + - See more Advanced features @@ -4316,104 +4002,102 @@ exports[`chromium /components/slider 1`] = ` As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. - - Age  - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - - Some important helper text  - - age - None - Ten - Twenty - Thirty - - With visually hidden labelAge  - - Age - None - Ten - Twenty - Thirty - - Label + placeholderName  - - Name - None - Hai - Olivier - Kevin - - DisabledName  - - Name - Hai - Olivier - Kevin - - ErrorName  - - Name - Ten - Twenty - Thirty - - Uncontrolled  - - age - Placeholder - Ten - Twenty - Thirty - - PlaceholderAge  - - Age - - Ten - Twenty - Thirty - - RequiredAge - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - + + Age NoneAge None Some important helper textage With visually hidden labelAge + None Label + placeholderName Hai DisabledName Hai ErrorName Thirty + Uncontrolledage PlaceholderAge * None RequiredAge NoneAge None + Age  + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + Some important helper text  + + age + None + Ten + Twenty + Thirty + + With visually hidden labelAge  + + Age + None + Ten + Twenty + Thirty + + Label + placeholderName  + + Name + None + Hai + Olivier + Kevin + + DisabledName  + + Name + Hai + Olivier + Kevin + + ErrorName  + + Name + Ten + Twenty + Thirty + + Uncontrolled  + + age + Placeholder + Ten + Twenty + Thirty + + PlaceholderAge *  + + Age * + + Ten + Twenty + Thirty + + RequiredAge + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + - See more Text Fields @@ -4434,30 +4118,26 @@ exports[`chromium /components/slider 1`] = ` you can either use it directly as a text field or provide it to the selectinputproperty to have aselectfield. - - Age - Age - Age - Age ​ - Age - - Age - - Ten - Twenty - Thirty - + + AgeAge Age ​Age None + Age + Age + Age + Age ​ + Age + + Age + + Ten + Twenty + Thirty + + - See more Multiple Select @@ -4467,58 +4147,49 @@ exports[`chromium /components/slider 1`] = ` value by accessingevent.target.valuein theonChangecallback. It's always an array. - - Name  - Name ​ - Tag  - Tag ​ - Chip  - Chip ​ -   - Without label - Native  - - Native - - - - - - - - - - - - - - - - - + + Name Name ​Tag Tag ​Chip Chip ​Without labelNative + Name  + Name ​ + Tag  + Tag ​ + Chip  + Chip ​ +   + Without label + Native  + + Native + + + + + + + + + + + + + + + + + See more Controlled Open Select - - - Age  - Age ​ + + OPEN THE SELECT Age Age ​ + Age  + Age ​ + - See more With a Dialog @@ -4526,19 +4197,15 @@ exports[`chromium /components/slider 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - + + OPEN SELECT DIALOG + + - See more Grouping @@ -4546,29 +4213,24 @@ exports[`chromium /components/slider 1`] = ` Display categories with theListSubheadercomponent or the nativeelement. - - Grouping  - - Grouping - - Option 1 - Option 2 - Option 3 - Option 4 - - Grouping  - + + Grouping NoneGrouping ​Grouping  + + Grouping + + Option 1 + Option 2 + Option 3 + Option 4 + + Grouping  + + - See more Accessibility @@ -4603,44 +4265,42 @@ exports[`chromium /components/switch/ 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age  - Age ​ - Age  - Age ​ - Some important helper text  - Without label - Without labelAge  - Age None - Label + placeholderName  - - Name ​ - - DisabledName  - Name ​ - ErrorName  - Name ​ - Read onlyAge  - Age ​ - Auto width  - Without label - PlaceholderAge  - Age ​ - RequiredAge - Age ​ - Age  - Age ​ + + Age Age ​Age Age ​ Some important helper textWithout label Without labelAge + Age None Label + placeholderName Name ​ DisabledName Name ​ ErrorName Name ​ + Read onlyAge Age ​ Auto widthWithout label PlaceholderAge * Age ​ + RequiredAge Age ​Age Age ​Age  + Age ​ + Age  + Age ​ + Some important helper text  + Without label + Without labelAge  + Age None + Label + placeholderName  + + Name ​ + + DisabledName  + Name ​ + ErrorName  + Name ​ + Read onlyAge  + Age ​ + Auto width  + Without label + PlaceholderAge *  + Age * ​ + RequiredAge + Age ​ + Age  + Age ​ + - See more Advanced features @@ -4660,104 +4320,102 @@ exports[`chromium /components/switch/ 1`] = ` As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. - - Age  - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - - Some important helper text  - - age - None - Ten - Twenty - Thirty - - With visually hidden labelAge  - - Age - None - Ten - Twenty - Thirty - - Label + placeholderName  - - Name - None - Hai - Olivier - Kevin - - DisabledName  - - Name - Hai - Olivier - Kevin - - ErrorName  - - Name - Ten - Twenty - Thirty - - Uncontrolled  - - age - Placeholder - Ten - Twenty - Thirty - - PlaceholderAge  - - Age - - Ten - Twenty - Thirty - - RequiredAge - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - + + Age NoneAge None Some important helper textage With visually hidden labelAge + None Label + placeholderName Hai DisabledName Hai ErrorName Thirty + Uncontrolledage PlaceholderAge * None RequiredAge NoneAge None + Age  + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + Some important helper text  + + age + None + Ten + Twenty + Thirty + + With visually hidden labelAge  + + Age + None + Ten + Twenty + Thirty + + Label + placeholderName  + + Name + None + Hai + Olivier + Kevin + + DisabledName  + + Name + Hai + Olivier + Kevin + + ErrorName  + + Name + Ten + Twenty + Thirty + + Uncontrolled  + + age + Placeholder + Ten + Twenty + Thirty + + PlaceholderAge *  + + Age * + + Ten + Twenty + Thirty + + RequiredAge + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + - See more Text Fields @@ -4778,30 +4436,26 @@ exports[`chromium /components/switch/ 1`] = ` you can either use it directly as a text field or provide it to the selectinputproperty to have aselectfield. - - Age - Age - Age - Age ​ - Age - - Age - - Ten - Twenty - Thirty - + + AgeAge Age ​Age None + Age + Age + Age + Age ​ + Age + + Age + + Ten + Twenty + Thirty + + - See more Multiple Select @@ -4811,58 +4465,49 @@ exports[`chromium /components/switch/ 1`] = ` value by accessingevent.target.valuein theonChangecallback. It's always an array. - - Name  - Name ​ - Tag  - Tag ​ - Chip  - Chip ​ -   - Without label - Native  - - Native - - - - - - - - - - - - - - - - - + + Name Name ​Tag Tag ​Chip Chip ​Without labelNative + Name  + Name ​ + Tag  + Tag ​ + Chip  + Chip ​ +   + Without label + Native  + + Native + + + + + + + + + + + + + + + + + See more Controlled Open Select - - - Age  - Age ​ + + OPEN THE SELECT Age Age ​ + Age  + Age ​ + - See more With a Dialog @@ -4870,19 +4515,15 @@ exports[`chromium /components/switch/ 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - + + OPEN SELECT DIALOG + + - See more Grouping @@ -4890,29 +4531,24 @@ exports[`chromium /components/switch/ 1`] = ` Display categories with theListSubheadercomponent or the nativeelement. - - Grouping  - - Grouping - - Option 1 - Option 2 - Option 3 - Option 4 - - Grouping  - + + Grouping NoneGrouping ​Grouping  + + Grouping + + Option 1 + Option 2 + Option 3 + Option 4 + + Grouping  + + - See more Accessibility @@ -4947,44 +4583,42 @@ exports[`chromium /components/tabs/ 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age  - Age ​ - Age  - Age ​ - Some important helper text  - Without label - Without labelAge  - Age None - Label + placeholderName  - - Name ​ - - DisabledName  - Name ​ - ErrorName  - Name ​ - Read onlyAge  - Age ​ - Auto width  - Without label - PlaceholderAge  - Age ​ - RequiredAge - Age ​ - Age  - Age ​ + + Age Age ​Age Age ​ Some important helper textWithout label Without labelAge + Age None Label + placeholderName Name ​ DisabledName Name ​ ErrorName Name ​ + Read onlyAge Age ​ Auto widthWithout label PlaceholderAge * Age ​ + RequiredAge Age ​Age Age ​Age  + Age ​ + Age  + Age ​ + Some important helper text  + Without label + Without labelAge  + Age None + Label + placeholderName  + + Name ​ + + DisabledName  + Name ​ + ErrorName  + Name ​ + Read onlyAge  + Age ​ + Auto width  + Without label + PlaceholderAge *  + Age * ​ + RequiredAge + Age ​ + Age  + Age ​ + - See more Advanced features @@ -5004,104 +4638,102 @@ exports[`chromium /components/tabs/ 1`] = ` As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. - - Age  - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - - Some important helper text  - - age - None - Ten - Twenty - Thirty - - With visually hidden labelAge  - - Age - None - Ten - Twenty - Thirty - - Label + placeholderName  - - Name - None - Hai - Olivier - Kevin - - DisabledName  - - Name - Hai - Olivier - Kevin - - ErrorName  - - Name - Ten - Twenty - Thirty - - Uncontrolled  - - age - Placeholder - Ten - Twenty - Thirty - - PlaceholderAge  - - Age - - Ten - Twenty - Thirty - - RequiredAge - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - + + Age NoneAge None Some important helper textage With visually hidden labelAge + None Label + placeholderName Hai DisabledName Hai ErrorName Thirty + Uncontrolledage PlaceholderAge * None RequiredAge NoneAge None + Age  + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + Some important helper text  + + age + None + Ten + Twenty + Thirty + + With visually hidden labelAge  + + Age + None + Ten + Twenty + Thirty + + Label + placeholderName  + + Name + None + Hai + Olivier + Kevin + + DisabledName  + + Name + Hai + Olivier + Kevin + + ErrorName  + + Name + Ten + Twenty + Thirty + + Uncontrolled  + + age + Placeholder + Ten + Twenty + Thirty + + PlaceholderAge *  + + Age * + + Ten + Twenty + Thirty + + RequiredAge + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + - See more Text Fields @@ -5122,30 +4754,26 @@ exports[`chromium /components/tabs/ 1`] = ` you can either use it directly as a text field or provide it to the selectinputproperty to have aselectfield. - - Age - Age - Age - Age ​ - Age - - Age - - Ten - Twenty - Thirty - + + AgeAge Age ​Age None + Age + Age + Age + Age ​ + Age + + Age + + Ten + Twenty + Thirty + + - See more Multiple Select @@ -5155,58 +4783,49 @@ exports[`chromium /components/tabs/ 1`] = ` value by accessingevent.target.valuein theonChangecallback. It's always an array. - - Name  - Name ​ - Tag  - Tag ​ - Chip  - Chip ​ -   - Without label - Native  - - Native - - - - - - - - - - - - - - - - - + + Name Name ​Tag Tag ​Chip Chip ​Without labelNative + Name  + Name ​ + Tag  + Tag ​ + Chip  + Chip ​ +   + Without label + Native  + + Native + + + + + + + + + + + + + + + + + See more Controlled Open Select - - - Age  - Age ​ + + OPEN THE SELECT Age Age ​ + Age  + Age ​ + - See more With a Dialog @@ -5214,19 +4833,15 @@ exports[`chromium /components/tabs/ 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - + + OPEN SELECT DIALOG + + - See more Grouping @@ -5234,29 +4849,24 @@ exports[`chromium /components/tabs/ 1`] = ` Display categories with theListSubheadercomponent or the nativeelement. - - Grouping  - - Grouping - - Option 1 - Option 2 - Option 3 - Option 4 - - Grouping  - + + Grouping NoneGrouping ​Grouping  + + Grouping + + Option 1 + Option 2 + Option 3 + Option 4 + + Grouping  + + - See more Accessibility @@ -5291,44 +4901,42 @@ exports[`chromium /components/text-fields/ 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age  - Age ​ - Age  - Age ​ - Some important helper text  - Without label - Without labelAge  - Age None - Label + placeholderName  - - Name ​ - - DisabledName  - Name ​ - ErrorName  - Name ​ - Read onlyAge  - Age ​ - Auto width  - Without label - PlaceholderAge  - Age ​ - RequiredAge - Age ​ - Age  - Age ​ + + Age Age ​Age Age ​ Some important helper textWithout label Without labelAge + Age None Label + placeholderName Name ​ DisabledName Name ​ ErrorName Name ​ + Read onlyAge Age ​ Auto widthWithout label PlaceholderAge * Age ​ + RequiredAge Age ​Age Age ​Age  + Age ​ + Age  + Age ​ + Some important helper text  + Without label + Without labelAge  + Age None + Label + placeholderName  + + Name ​ + + DisabledName  + Name ​ + ErrorName  + Name ​ + Read onlyAge  + Age ​ + Auto width  + Without label + PlaceholderAge *  + Age * ​ + RequiredAge + Age ​ + Age  + Age ​ + - See more Advanced features @@ -5348,104 +4956,102 @@ exports[`chromium /components/text-fields/ 1`] = ` As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. - - Age  - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - - Some important helper text  - - age - None - Ten - Twenty - Thirty - - With visually hidden labelAge  - - Age - None - Ten - Twenty - Thirty - - Label + placeholderName  - - Name - None - Hai - Olivier - Kevin - - DisabledName  - - Name - Hai - Olivier - Kevin - - ErrorName  - - Name - Ten - Twenty - Thirty - - Uncontrolled  - - age - Placeholder - Ten - Twenty - Thirty - - PlaceholderAge  - - Age - - Ten - Twenty - Thirty - - RequiredAge - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - + + Age NoneAge None Some important helper textage With visually hidden labelAge + None Label + placeholderName Hai DisabledName Hai ErrorName Thirty + Uncontrolledage PlaceholderAge * None RequiredAge NoneAge None + Age  + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + Some important helper text  + + age + None + Ten + Twenty + Thirty + + With visually hidden labelAge  + + Age + None + Ten + Twenty + Thirty + + Label + placeholderName  + + Name + None + Hai + Olivier + Kevin + + DisabledName  + + Name + Hai + Olivier + Kevin + + ErrorName  + + Name + Ten + Twenty + Thirty + + Uncontrolled  + + age + Placeholder + Ten + Twenty + Thirty + + PlaceholderAge *  + + Age * + + Ten + Twenty + Thirty + + RequiredAge + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + - See more Text Fields @@ -5466,30 +5072,26 @@ exports[`chromium /components/text-fields/ 1`] = ` you can either use it directly as a text field or provide it to the selectinputproperty to have aselectfield. - - Age - Age - Age - Age ​ - Age - - Age - - Ten - Twenty - Thirty - + + AgeAge Age ​Age None + Age + Age + Age + Age ​ + Age + + Age + + Ten + Twenty + Thirty + + - See more Multiple Select @@ -5499,58 +5101,49 @@ exports[`chromium /components/text-fields/ 1`] = ` value by accessingevent.target.valuein theonChangecallback. It's always an array. - - Name  - Name ​ - Tag  - Tag ​ - Chip  - Chip ​ -   - Without label - Native  - - Native - - - - - - - - - - - - - - - - - + + Name Name ​Tag Tag ​Chip Chip ​Without labelNative + Name  + Name ​ + Tag  + Tag ​ + Chip  + Chip ​ +   + Without label + Native  + + Native + + + + + + + + + + + + + + + + + See more Controlled Open Select - - - Age  - Age ​ + + OPEN THE SELECT Age Age ​ + Age  + Age ​ + - See more With a Dialog @@ -5558,19 +5151,15 @@ exports[`chromium /components/text-fields/ 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - + + OPEN SELECT DIALOG + + - See more Grouping @@ -5578,29 +5167,24 @@ exports[`chromium /components/text-fields/ 1`] = ` Display categories with theListSubheadercomponent or the nativeelement. - - Grouping  - - Grouping - - Option 1 - Option 2 - Option 3 - Option 4 - - Grouping  - + + Grouping NoneGrouping ​Grouping  + + Grouping + + Option 1 + Option 2 + Option 3 + Option 4 + + Grouping  + + - See more Accessibility @@ -5635,44 +5219,42 @@ exports[`chromium /components/tooltips/ 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age  - Age ​ - Age  - Age ​ - Some important helper text  - Without label - Without labelAge  - Age None - Label + placeholderName  - - Name ​ - - DisabledName  - Name ​ - ErrorName  - Name ​ - Read onlyAge  - Age ​ - Auto width  - Without label - PlaceholderAge  - Age ​ - RequiredAge - Age ​ - Age  - Age ​ + + Age Age ​Age Age ​ Some important helper textWithout label Without labelAge + Age None Label + placeholderName Name ​ DisabledName Name ​ ErrorName Name ​ + Read onlyAge Age ​ Auto widthWithout label PlaceholderAge * Age ​ + RequiredAge Age ​Age Age ​Age  + Age ​ + Age  + Age ​ + Some important helper text  + Without label + Without labelAge  + Age None + Label + placeholderName  + + Name ​ + + DisabledName  + Name ​ + ErrorName  + Name ​ + Read onlyAge  + Age ​ + Auto width  + Without label + PlaceholderAge *  + Age * ​ + RequiredAge + Age ​ + Age  + Age ​ + - See more Advanced features @@ -5692,104 +5274,102 @@ exports[`chromium /components/tooltips/ 1`] = ` As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. - - Age  - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - - Some important helper text  - - age - None - Ten - Twenty - Thirty - - With visually hidden labelAge  - - Age - None - Ten - Twenty - Thirty - - Label + placeholderName  - - Name - None - Hai - Olivier - Kevin - - DisabledName  - - Name - Hai - Olivier - Kevin - - ErrorName  - - Name - Ten - Twenty - Thirty - - Uncontrolled  - - age - Placeholder - Ten - Twenty - Thirty - - PlaceholderAge  - - Age - - Ten - Twenty - Thirty - - RequiredAge - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - + + Age NoneAge None Some important helper textage With visually hidden labelAge + None Label + placeholderName Hai DisabledName Hai ErrorName Thirty + Uncontrolledage PlaceholderAge * None RequiredAge NoneAge None + Age  + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + Some important helper text  + + age + None + Ten + Twenty + Thirty + + With visually hidden labelAge  + + Age + None + Ten + Twenty + Thirty + + Label + placeholderName  + + Name + None + Hai + Olivier + Kevin + + DisabledName  + + Name + Hai + Olivier + Kevin + + ErrorName  + + Name + Ten + Twenty + Thirty + + Uncontrolled  + + age + Placeholder + Ten + Twenty + Thirty + + PlaceholderAge *  + + Age * + + Ten + Twenty + Thirty + + RequiredAge + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + - See more Text Fields @@ -5810,30 +5390,26 @@ exports[`chromium /components/tooltips/ 1`] = ` you can either use it directly as a text field or provide it to the selectinputproperty to have aselectfield. - - Age - Age - Age - Age ​ - Age - - Age - - Ten - Twenty - Thirty - + + AgeAge Age ​Age None + Age + Age + Age + Age ​ + Age + + Age + + Ten + Twenty + Thirty + + - See more Multiple Select @@ -5843,58 +5419,49 @@ exports[`chromium /components/tooltips/ 1`] = ` value by accessingevent.target.valuein theonChangecallback. It's always an array. - - Name  - Name ​ - Tag  - Tag ​ - Chip  - Chip ​ -   - Without label - Native  - - Native - - - - - - - - - - - - - - - - - + + Name Name ​Tag Tag ​Chip Chip ​Without labelNative + Name  + Name ​ + Tag  + Tag ​ + Chip  + Chip ​ +   + Without label + Native  + + Native + + + + + + + + + + + + + + + + + See more Controlled Open Select - - - Age  - Age ​ + + OPEN THE SELECT Age Age ​ + Age  + Age ​ + - See more With a Dialog @@ -5902,19 +5469,15 @@ exports[`chromium /components/tooltips/ 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - + + OPEN SELECT DIALOG + + - See more Grouping @@ -5922,29 +5485,24 @@ exports[`chromium /components/tooltips/ 1`] = ` Display categories with theListSubheadercomponent or the nativeelement. - - Grouping  - - Grouping - - Option 1 - Option 2 - Option 3 - Option 4 - - Grouping  - + + Grouping NoneGrouping ​Grouping  + + Grouping + + Option 1 + Option 2 + Option 3 + Option 4 + + Grouping  + + - See more Accessibility @@ -5979,44 +5537,42 @@ exports[`chromium /components/transfer-list 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age  - Age ​ - Age  - Age ​ - Some important helper text  - Without label - Without labelAge  - Age None - Label + placeholderName  - - Name ​ - - DisabledName  - Name ​ - ErrorName  - Name ​ - Read onlyAge  - Age ​ - Auto width  - Without label - PlaceholderAge  - Age ​ - RequiredAge - Age ​ - Age  - Age ​ + + Age Age ​Age Age ​ Some important helper textWithout label Without labelAge + Age None Label + placeholderName Name ​ DisabledName Name ​ ErrorName Name ​ + Read onlyAge Age ​ Auto widthWithout label PlaceholderAge * Age ​ + RequiredAge Age ​Age Age ​Age  + Age ​ + Age  + Age ​ + Some important helper text  + Without label + Without labelAge  + Age None + Label + placeholderName  + + Name ​ + + DisabledName  + Name ​ + ErrorName  + Name ​ + Read onlyAge  + Age ​ + Auto width  + Without label + PlaceholderAge *  + Age * ​ + RequiredAge + Age ​ + Age  + Age ​ + - See more Advanced features @@ -6036,104 +5592,102 @@ exports[`chromium /components/transfer-list 1`] = ` As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. - - Age  - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - - Some important helper text  - - age - None - Ten - Twenty - Thirty - - With visually hidden labelAge  - - Age - None - Ten - Twenty - Thirty - - Label + placeholderName  - - Name - None - Hai - Olivier - Kevin - - DisabledName  - - Name - Hai - Olivier - Kevin - - ErrorName  - - Name - Ten - Twenty - Thirty - - Uncontrolled  - - age - Placeholder - Ten - Twenty - Thirty - - PlaceholderAge  - - Age - - Ten - Twenty - Thirty - - RequiredAge - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - + + Age NoneAge None Some important helper textage With visually hidden labelAge + None Label + placeholderName Hai DisabledName Hai ErrorName Thirty + Uncontrolledage PlaceholderAge * None RequiredAge NoneAge None + Age  + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + Some important helper text  + + age + None + Ten + Twenty + Thirty + + With visually hidden labelAge  + + Age + None + Ten + Twenty + Thirty + + Label + placeholderName  + + Name + None + Hai + Olivier + Kevin + + DisabledName  + + Name + Hai + Olivier + Kevin + + ErrorName  + + Name + Ten + Twenty + Thirty + + Uncontrolled  + + age + Placeholder + Ten + Twenty + Thirty + + PlaceholderAge *  + + Age * + + Ten + Twenty + Thirty + + RequiredAge + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + - See more Text Fields @@ -6154,30 +5708,26 @@ exports[`chromium /components/transfer-list 1`] = ` you can either use it directly as a text field or provide it to the selectinputproperty to have aselectfield. - - Age - Age - Age - Age ​ - Age - - Age - - Ten - Twenty - Thirty - + + AgeAge Age ​Age None + Age + Age + Age + Age ​ + Age + + Age + + Ten + Twenty + Thirty + + - See more Multiple Select @@ -6187,58 +5737,49 @@ exports[`chromium /components/transfer-list 1`] = ` value by accessingevent.target.valuein theonChangecallback. It's always an array. - - Name  - Name ​ - Tag  - Tag ​ - Chip  - Chip ​ -   - Without label - Native  - - Native - - - - - - - - - - - - - - - - - + + Name Name ​Tag Tag ​Chip Chip ​Without labelNative + Name  + Name ​ + Tag  + Tag ​ + Chip  + Chip ​ +   + Without label + Native  + + Native + + + + + + + + + + + + + + + + + See more Controlled Open Select - - - Age  - Age ​ + + OPEN THE SELECT Age Age ​ + Age  + Age ​ + - See more With a Dialog @@ -6246,19 +5787,15 @@ exports[`chromium /components/transfer-list 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - + + OPEN SELECT DIALOG + + - See more Grouping @@ -6266,29 +5803,24 @@ exports[`chromium /components/transfer-list 1`] = ` Display categories with theListSubheadercomponent or the nativeelement. - - Grouping  - - Grouping - - Option 1 - Option 2 - Option 3 - Option 4 - - Grouping  - + + Grouping NoneGrouping ​Grouping  + + Grouping + + Option 1 + Option 2 + Option 3 + Option 4 + + Grouping  + + - See more Accessibility @@ -6323,44 +5855,42 @@ exports[`chromium /components/tree-view/ 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age  - Age ​ - Age  - Age ​ - Some important helper text  - Without label - Without labelAge  - Age None - Label + placeholderName  - - Name ​ - - DisabledName  - Name ​ - ErrorName  - Name ​ - Read onlyAge  - Age ​ - Auto width  - Without label - PlaceholderAge  - Age ​ - RequiredAge - Age ​ - Age  - Age ​ + + Age Age ​Age Age ​ Some important helper textWithout label Without labelAge + Age None Label + placeholderName Name ​ DisabledName Name ​ ErrorName Name ​ + Read onlyAge Age ​ Auto widthWithout label PlaceholderAge * Age ​ + RequiredAge Age ​Age Age ​Age  + Age ​ + Age  + Age ​ + Some important helper text  + Without label + Without labelAge  + Age None + Label + placeholderName  + + Name ​ + + DisabledName  + Name ​ + ErrorName  + Name ​ + Read onlyAge  + Age ​ + Auto width  + Without label + PlaceholderAge *  + Age * ​ + RequiredAge + Age ​ + Age  + Age ​ + - See more Advanced features @@ -6380,104 +5910,102 @@ exports[`chromium /components/tree-view/ 1`] = ` As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. - - Age  - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - - Some important helper text  - - age - None - Ten - Twenty - Thirty - - With visually hidden labelAge  - - Age - None - Ten - Twenty - Thirty - - Label + placeholderName  - - Name - None - Hai - Olivier - Kevin - - DisabledName  - - Name - Hai - Olivier - Kevin - - ErrorName  - - Name - Ten - Twenty - Thirty - - Uncontrolled  - - age - Placeholder - Ten - Twenty - Thirty - - PlaceholderAge  - - Age - - Ten - Twenty - Thirty - - RequiredAge - - Age - - Ten - Twenty - Thirty - - Age  - - Age - - Ten - Twenty - Thirty - + + Age NoneAge None Some important helper textage With visually hidden labelAge + None Label + placeholderName Hai DisabledName Hai ErrorName Thirty + Uncontrolledage PlaceholderAge * None RequiredAge NoneAge None + Age  + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + Some important helper text  + + age + None + Ten + Twenty + Thirty + + With visually hidden labelAge  + + Age + None + Ten + Twenty + Thirty + + Label + placeholderName  + + Name + None + Hai + Olivier + Kevin + + DisabledName  + + Name + Hai + Olivier + Kevin + + ErrorName  + + Name + Ten + Twenty + Thirty + + Uncontrolled  + + age + Placeholder + Ten + Twenty + Thirty + + PlaceholderAge *  + + Age * + + Ten + Twenty + Thirty + + RequiredAge + + Age + + Ten + Twenty + Thirty + + Age  + + Age + + Ten + Twenty + Thirty + + - See more Text Fields @@ -6498,30 +6026,26 @@ exports[`chromium /components/tree-view/ 1`] = ` you can either use it directly as a text field or provide it to the selectinputproperty to have aselectfield. - - Age - Age - Age - Age ​ - Age - - Age - - Ten - Twenty - Thirty - + + AgeAge Age ​Age None + Age + Age + Age + Age ​ + Age + + Age + + Ten + Twenty + Thirty + + - See more Multiple Select @@ -6531,58 +6055,49 @@ exports[`chromium /components/tree-view/ 1`] = ` value by accessingevent.target.valuein theonChangecallback. It's always an array. - - Name  - Name ​ - Tag  - Tag ​ - Chip  - Chip ​ -   - Without label - Native  - - Native - - - - - - - - - - - - - - - - - + + Name Name ​Tag Tag ​Chip Chip ​Without labelNative + Name  + Name ​ + Tag  + Tag ​ + Chip  + Chip ​ +   + Without label + Native  + + Native + + + + + + + + + + + + + + + + + See more Controlled Open Select - - - Age  - Age ​ + + OPEN THE SELECT Age Age ​ + Age  + Age ​ + - See more With a Dialog @@ -6590,19 +6105,15 @@ exports[`chromium /components/tree-view/ 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - + + OPEN SELECT DIALOG + + - See more Grouping @@ -6610,29 +6121,24 @@ exports[`chromium /components/tree-view/ 1`] = ` Display categories with theListSubheadercomponent or the nativeelement. - - Grouping  - - Grouping - - Option 1 - Option 2 - Option 3 - Option 4 - - Grouping  - + + Grouping NoneGrouping ​Grouping  + + Grouping + + Option 1 + Option 2 + Option 3 + Option 4 + + Grouping  + + - See more Accessibility @@ -6762,7 +6268,7 @@ exports[`firefox / 1`] = ` About Contact Us Currently - v4.9.12. View versions page. + v4.9.11. View versions page. . Released under the MIT License . Copyright © 2020 Material-UI. @@ -6783,40 +6289,37 @@ exports[`firefox /api/buttons/ 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age - - Age - - Some important helper text - - Without labelAge - - Label + placeholderName - - DisabledName - - ErrorName - - Read onlyAge - - Auto width - - PlaceholderAge - - RequiredAge - - Age - +
+ Age + + Age + + Some important helper text + + Without labelAge + + Label + placeholderName + + DisabledName + + ErrorName + + Read onlyAge + + Auto width + + PlaceholderAge* + + RequiredAge + + Age + +
- See more Advanced features @@ -6835,102 +6338,99 @@ exports[`firefox /api/buttons/ 1`] = ` As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. - - Age - - Age - - - - - - Age - - Age - - - - - - Some important helper text - - age - - - - - - With visually hidden labelAge - - Age - - - - - - Label + placeholderName - - Name - - - - - - DisabledName - - Name - - - - - ErrorName - - Name - - - - - Uncontrolled - - age - - - - - - PlaceholderAge - - Age - - - - - - RequiredAge - - Age - - - - - - Age - - Age - - - - - +
+ Age + + Age + + + + + + Age + + Age + + + + + + Some important helper text + + age + + + + + + With visually hidden labelAge + + Age + + + + + + Label + placeholderName + + Name + + + + + + DisabledName + + Name + + + + + ErrorName + + Name + + + + + Uncontrolled + + age + + + + + + PlaceholderAge* + + Age  * + + + + + + RequiredAge + + Age + + + + + + Age + + Age + + + + + +
- See more Text Fields @@ -6951,26 +6451,23 @@ exports[`firefox /api/buttons/ 1`] = ` you can either use it directly as a text field or provide it to the select input property to have a select field. - - Age - Age - Age - - Age - - Age - - - - - +
+ Age + Age + Age + + Age + + Age + + + + + +
- See more Multiple Select @@ -6980,49 +6477,43 @@ exports[`firefox /api/buttons/ 1`] = ` new value by accessing event.target.value in the onChange callback. It's always an array. - - Name - - Tag - - Chip - - - Native - - Native - - - - - - - - - - - - - - - +
+ Name + + Tag + + Chip + + + Native + + Native + + + + + + + + + + + +
+ + + See more Controlled Open Select - - - Age - +
+ + Age + +
- See more With a Dialog @@ -7030,15 +6521,12 @@ exports[`firefox /api/buttons/ 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - +
+ +
- See more Grouping @@ -7046,25 +6534,22 @@ exports[`firefox /api/buttons/ 1`] = ` Display categories with the ListSubheader component or the native element. - - Grouping - - Grouping - - - - - - - Grouping - +
+ Grouping + + Grouping + + + + + + + Grouping + +
- See more Accessibility @@ -7099,40 +6584,37 @@ exports[`firefox /api/selects/ 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age - - Age - - Some important helper text - - Without labelAge - - Label + placeholderName - - DisabledName - - ErrorName - - Read onlyAge - - Auto width - - PlaceholderAge - - RequiredAge - - Age - +
+ Age + + Age + + Some important helper text + + Without labelAge + + Label + placeholderName + + DisabledName + + ErrorName + + Read onlyAge + + Auto width + + PlaceholderAge* + + RequiredAge + + Age + +
- See more Advanced features @@ -7151,102 +6633,99 @@ exports[`firefox /api/selects/ 1`] = ` As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. - - Age - - Age - - - - - - Age - - Age - - - - - - Some important helper text - - age - - - - - - With visually hidden labelAge - - Age - - - - - - Label + placeholderName - - Name - - - - - - DisabledName - - Name - - - - - ErrorName - - Name - - - - - Uncontrolled - - age - - - - - - PlaceholderAge - - Age - - - - - - RequiredAge - - Age - - - - - - Age - - Age - - - - - +
+ Age + + Age + + + + + + Age + + Age + + + + + + Some important helper text + + age + + + + + + With visually hidden labelAge + + Age + + + + + + Label + placeholderName + + Name + + + + + + DisabledName + + Name + + + + + ErrorName + + Name + + + + + Uncontrolled + + age + + + + + + PlaceholderAge* + + Age  * + + + + + + RequiredAge + + Age + + + + + + Age + + Age + + + + + +
- See more Text Fields @@ -7267,26 +6746,23 @@ exports[`firefox /api/selects/ 1`] = ` you can either use it directly as a text field or provide it to the select input property to have a select field. - - Age - Age - Age - - Age - - Age - - - - - +
+ Age + Age + Age + + Age + + Age + + + + + +
- See more Multiple Select @@ -7296,49 +6772,43 @@ exports[`firefox /api/selects/ 1`] = ` new value by accessing event.target.value in the onChange callback. It's always an array. - - Name - - Tag - - Chip - - - Native - - Native - - - - - - - - - - - - - - - +
+ Name + + Tag + + Chip + + + Native + + Native + + + + + + + + + + + +
+ + + See more Controlled Open Select - - - Age - +
+ + Age + +
- See more With a Dialog @@ -7346,15 +6816,12 @@ exports[`firefox /api/selects/ 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - +
+ +
- See more Grouping @@ -7362,25 +6829,22 @@ exports[`firefox /api/selects/ 1`] = ` Display categories with the ListSubheader component or the native element. - - Grouping - - Grouping - - - - - - - Grouping - +
+ Grouping + + Grouping + + + + + + + Grouping + +
- See more Accessibility @@ -7415,40 +6879,37 @@ exports[`firefox /components/breadcrumbs 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age - - Age - - Some important helper text - - Without labelAge - - Label + placeholderName - - DisabledName - - ErrorName - - Read onlyAge - - Auto width - - PlaceholderAge - - RequiredAge - - Age - +
+ Age + + Age + + Some important helper text + + Without labelAge + + Label + placeholderName + + DisabledName + + ErrorName + + Read onlyAge + + Auto width + + PlaceholderAge* + + RequiredAge + + Age + +
- See more Advanced features @@ -7467,102 +6928,99 @@ exports[`firefox /components/breadcrumbs 1`] = ` As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. - - Age - - Age - - - - - - Age - - Age - - - - - - Some important helper text - - age - - - - - - With visually hidden labelAge - - Age - - - - - - Label + placeholderName - - Name - - - - - - DisabledName - - Name - - - - - ErrorName - - Name - - - - - Uncontrolled - - age - - - - - - PlaceholderAge - - Age - - - - - - RequiredAge - - Age - - - - - - Age - - Age - - - - - +
+ Age + + Age + + + + + + Age + + Age + + + + + + Some important helper text + + age + + + + + + With visually hidden labelAge + + Age + + + + + + Label + placeholderName + + Name + + + + + + DisabledName + + Name + + + + + ErrorName + + Name + + + + + Uncontrolled + + age + + + + + + PlaceholderAge* + + Age  * + + + + + + RequiredAge + + Age + + + + + + Age + + Age + + + + + +
- See more Text Fields @@ -7583,26 +7041,23 @@ exports[`firefox /components/breadcrumbs 1`] = ` you can either use it directly as a text field or provide it to the select input property to have a select field. - - Age - Age - Age - - Age - - Age - - - - - +
+ Age + Age + Age + + Age + + Age + + + + + +
- See more Multiple Select @@ -7612,49 +7067,43 @@ exports[`firefox /components/breadcrumbs 1`] = ` new value by accessing event.target.value in the onChange callback. It's always an array. - - Name - - Tag - - Chip - - - Native - - Native - - - - - - - - - - - - - - - +
+ Name + + Tag + + Chip + + + Native + + Native + + + + + + + + + + + +
+ + + See more Controlled Open Select - - - Age - +
+ + Age + +
- See more With a Dialog @@ -7662,15 +7111,12 @@ exports[`firefox /components/breadcrumbs 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - +
+ +
- See more Grouping @@ -7678,25 +7124,22 @@ exports[`firefox /components/breadcrumbs 1`] = ` Display categories with the ListSubheader component or the native element. - - Grouping - - Grouping - - - - - - - Grouping - +
+ Grouping + + Grouping + + + + + + + Grouping + +
- See more Accessibility @@ -7731,40 +7174,37 @@ exports[`firefox /components/button-group/ 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age - - Age - - Some important helper text - - Without labelAge - - Label + placeholderName - - DisabledName - - ErrorName - - Read onlyAge - - Auto width - - PlaceholderAge - - RequiredAge - - Age - +
+ Age + + Age + + Some important helper text + + Without labelAge + + Label + placeholderName + + DisabledName + + ErrorName + + Read onlyAge + + Auto width + + PlaceholderAge* + + RequiredAge + + Age + +
- See more Advanced features @@ -7783,102 +7223,99 @@ exports[`firefox /components/button-group/ 1`] = ` As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. - - Age - - Age - - - - - - Age - - Age - - - - - - Some important helper text - - age - - - - - - With visually hidden labelAge - - Age - - - - - - Label + placeholderName - - Name - - - - - - DisabledName - - Name - - - - - ErrorName - - Name - - - - - Uncontrolled - - age - - - - - - PlaceholderAge - - Age - - - - - - RequiredAge - - Age - - - - - - Age - - Age - - - - - +
+ Age + + Age + + + + + + Age + + Age + + + + + + Some important helper text + + age + + + + + + With visually hidden labelAge + + Age + + + + + + Label + placeholderName + + Name + + + + + + DisabledName + + Name + + + + + ErrorName + + Name + + + + + Uncontrolled + + age + + + + + + PlaceholderAge* + + Age  * + + + + + + RequiredAge + + Age + + + + + + Age + + Age + + + + + +
- See more Text Fields @@ -7899,26 +7336,23 @@ exports[`firefox /components/button-group/ 1`] = ` you can either use it directly as a text field or provide it to the select input property to have a select field. - - Age - Age - Age - - Age - - Age - - - - - +
+ Age + Age + Age + + Age + + Age + + + + + +
- See more Multiple Select @@ -7928,49 +7362,43 @@ exports[`firefox /components/button-group/ 1`] = ` new value by accessing event.target.value in the onChange callback. It's always an array. - - Name - - Tag - - Chip - - - Native - - Native - - - - - - - - - - - - - - - +
+ Name + + Tag + + Chip + + + Native + + Native + + + + + + + + + + + +
+ + + See more Controlled Open Select - - - Age - +
+ + Age + +
- See more With a Dialog @@ -7978,15 +7406,12 @@ exports[`firefox /components/button-group/ 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - +
+ +
- See more Grouping @@ -7994,25 +7419,22 @@ exports[`firefox /components/button-group/ 1`] = ` Display categories with the ListSubheader component or the native element. - - Grouping - - Grouping - - - - - - - Grouping - +
+ Grouping + + Grouping + + + + + + + Grouping + +
- See more Accessibility @@ -8047,40 +7469,37 @@ exports[`firefox /components/buttons/ 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age - - Age - - Some important helper text - - Without labelAge - - Label + placeholderName - - DisabledName - - ErrorName - - Read onlyAge - - Auto width - - PlaceholderAge - - RequiredAge - - Age - +
+ Age + + Age + + Some important helper text + + Without labelAge + + Label + placeholderName + + DisabledName + + ErrorName + + Read onlyAge + + Auto width + + PlaceholderAge* + + RequiredAge + + Age + +
- See more Advanced features @@ -8099,102 +7518,99 @@ exports[`firefox /components/buttons/ 1`] = ` As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. - - Age - - Age - - - - - - Age - - Age - - - - - - Some important helper text - - age - - - - - - With visually hidden labelAge - - Age - - - - - - Label + placeholderName - - Name - - - - - - DisabledName - - Name - - - - - ErrorName - - Name - - - - - Uncontrolled - - age - - - - - - PlaceholderAge - - Age - - - - - - RequiredAge - - Age - - - - - - Age - - Age - - - - - +
+ Age + + Age + + + + + + Age + + Age + + + + + + Some important helper text + + age + + + + + + With visually hidden labelAge + + Age + + + + + + Label + placeholderName + + Name + + + + + + DisabledName + + Name + + + + + ErrorName + + Name + + + + + Uncontrolled + + age + + + + + + PlaceholderAge* + + Age  * + + + + + + RequiredAge + + Age + + + + + + Age + + Age + + + + + +
- See more Text Fields @@ -8215,26 +7631,23 @@ exports[`firefox /components/buttons/ 1`] = ` you can either use it directly as a text field or provide it to the select input property to have a select field. - - Age - Age - Age - - Age - - Age - - - - - +
+ Age + Age + Age + + Age + + Age + + + + + +
- See more Multiple Select @@ -8244,49 +7657,43 @@ exports[`firefox /components/buttons/ 1`] = ` new value by accessing event.target.value in the onChange callback. It's always an array. - - Name - - Tag - - Chip - - - Native - - Native - - - - - - - - - - - - - - - +
+ Name + + Tag + + Chip + + + Native + + Native + + + + + + + + + + + +
+ + + See more Controlled Open Select - - - Age - +
+ + Age + +
- See more With a Dialog @@ -8294,15 +7701,12 @@ exports[`firefox /components/buttons/ 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - +
+ +
- See more Grouping @@ -8310,25 +7714,22 @@ exports[`firefox /components/buttons/ 1`] = ` Display categories with the ListSubheader component or the native element. - - Grouping - - Grouping - - - - - - - Grouping - +
+ Grouping + + Grouping + + + + + + + Grouping + +
- See more Accessibility @@ -8363,40 +7764,37 @@ exports[`firefox /components/checkboxes/ 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age - - Age - - Some important helper text - - Without labelAge - - Label + placeholderName - - DisabledName - - ErrorName - - Read onlyAge - - Auto width - - PlaceholderAge - - RequiredAge - - Age - +
+ Age + + Age + + Some important helper text + + Without labelAge + + Label + placeholderName + + DisabledName + + ErrorName + + Read onlyAge + + Auto width + + PlaceholderAge* + + RequiredAge + + Age + +
- See more Advanced features @@ -8415,102 +7813,99 @@ exports[`firefox /components/checkboxes/ 1`] = ` As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. - - Age - - Age - - - - - - Age - - Age - - - - - - Some important helper text - - age - - - - - - With visually hidden labelAge - - Age - - - - - - Label + placeholderName - - Name - - - - - - DisabledName - - Name - - - - - ErrorName - - Name - - - - - Uncontrolled - - age - - - - - - PlaceholderAge - - Age - - - - - - RequiredAge - - Age - - - - - - Age - - Age - - - - - +
+ Age + + Age + + + + + + Age + + Age + + + + + + Some important helper text + + age + + + + + + With visually hidden labelAge + + Age + + + + + + Label + placeholderName + + Name + + + + + + DisabledName + + Name + + + + + ErrorName + + Name + + + + + Uncontrolled + + age + + + + + + PlaceholderAge* + + Age  * + + + + + + RequiredAge + + Age + + + + + + Age + + Age + + + + + +
- See more Text Fields @@ -8531,26 +7926,23 @@ exports[`firefox /components/checkboxes/ 1`] = ` you can either use it directly as a text field or provide it to the select input property to have a select field. - - Age - Age - Age - - Age - - Age - - - - - +
+ Age + Age + Age + + Age + + Age + + + + + +
- See more Multiple Select @@ -8560,49 +7952,43 @@ exports[`firefox /components/checkboxes/ 1`] = ` new value by accessing event.target.value in the onChange callback. It's always an array. - - Name - - Tag - - Chip - - - Native - - Native - - - - - - - - - - - - - - - +
+ Name + + Tag + + Chip + + + Native + + Native + + + + + + + + + + + +
+ + + See more Controlled Open Select - - - Age - +
+ + Age + +
- See more With a Dialog @@ -8610,15 +7996,12 @@ exports[`firefox /components/checkboxes/ 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - +
+ +
- See more Grouping @@ -8626,25 +8009,22 @@ exports[`firefox /components/checkboxes/ 1`] = ` Display categories with the ListSubheader component or the native element. - - Grouping - - Grouping - - - - - - - Grouping - +
+ Grouping + + Grouping + + + + + + + Grouping + +
- See more Accessibility @@ -8679,40 +8059,37 @@ exports[`firefox /components/dialogs/ 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age - - Age - - Some important helper text - - Without labelAge - - Label + placeholderName - - DisabledName - - ErrorName - - Read onlyAge - - Auto width - - PlaceholderAge - - RequiredAge - - Age - +
+ Age + + Age + + Some important helper text + + Without labelAge + + Label + placeholderName + + DisabledName + + ErrorName + + Read onlyAge + + Auto width + + PlaceholderAge* + + RequiredAge + + Age + +
- See more Advanced features @@ -8731,102 +8108,99 @@ exports[`firefox /components/dialogs/ 1`] = ` As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. - - Age - - Age - - - - - - Age - - Age - - - - - - Some important helper text - - age - - - - - - With visually hidden labelAge - - Age - - - - - - Label + placeholderName - - Name - - - - - - DisabledName - - Name - - - - - ErrorName - - Name - - - - - Uncontrolled - - age - - - - - - PlaceholderAge - - Age - - - - - - RequiredAge - - Age - - - - - - Age - - Age - - - - - +
+ Age + + Age + + + + + + Age + + Age + + + + + + Some important helper text + + age + + + + + + With visually hidden labelAge + + Age + + + + + + Label + placeholderName + + Name + + + + + + DisabledName + + Name + + + + + ErrorName + + Name + + + + + Uncontrolled + + age + + + + + + PlaceholderAge* + + Age  * + + + + + + RequiredAge + + Age + + + + + + Age + + Age + + + + + +
- See more Text Fields @@ -8847,26 +8221,23 @@ exports[`firefox /components/dialogs/ 1`] = ` you can either use it directly as a text field or provide it to the select input property to have a select field. - - Age - Age - Age - - Age - - Age - - - - - +
+ Age + Age + Age + + Age + + Age + + + + + +
- See more Multiple Select @@ -8876,49 +8247,43 @@ exports[`firefox /components/dialogs/ 1`] = ` new value by accessing event.target.value in the onChange callback. It's always an array. - - Name - - Tag - - Chip - - - Native - - Native - - - - - - - - - - - - - - - +
+ Name + + Tag + + Chip + + + Native + + Native + + + + + + + + + + + +
+ + + See more Controlled Open Select - - - Age - +
+ + Age + +
- See more With a Dialog @@ -8926,15 +8291,12 @@ exports[`firefox /components/dialogs/ 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - +
+ +
- See more Grouping @@ -8942,25 +8304,22 @@ exports[`firefox /components/dialogs/ 1`] = ` Display categories with the ListSubheader component or the native element. - - Grouping - - Grouping - - - - - - - Grouping - +
+ Grouping + + Grouping + + + + + + + Grouping + +
- See more Accessibility @@ -8995,40 +8354,37 @@ exports[`firefox /components/pagination/ 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age - - Age - - Some important helper text - - Without labelAge - - Label + placeholderName - - DisabledName - - ErrorName - - Read onlyAge - - Auto width - - PlaceholderAge - - RequiredAge - - Age - +
+ Age + + Age + + Some important helper text + + Without labelAge + + Label + placeholderName + + DisabledName + + ErrorName + + Read onlyAge + + Auto width + + PlaceholderAge* + + RequiredAge + + Age + +
- See more Advanced features @@ -9047,102 +8403,99 @@ exports[`firefox /components/pagination/ 1`] = ` As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. - - Age - - Age - - - - - - Age - - Age - - - - - - Some important helper text - - age - - - - - - With visually hidden labelAge - - Age - - - - - - Label + placeholderName - - Name - - - - - - DisabledName - - Name - - - - - ErrorName - - Name - - - - - Uncontrolled - - age - - - - - - PlaceholderAge - - Age - - - - - - RequiredAge - - Age - - - - - - Age - - Age - - - - - +
+ Age + + Age + + + + + + Age + + Age + + + + + + Some important helper text + + age + + + + + + With visually hidden labelAge + + Age + + + + + + Label + placeholderName + + Name + + + + + + DisabledName + + Name + + + + + ErrorName + + Name + + + + + Uncontrolled + + age + + + + + + PlaceholderAge* + + Age  * + + + + + + RequiredAge + + Age + + + + + + Age + + Age + + + + + +
- See more Text Fields @@ -9163,26 +8516,23 @@ exports[`firefox /components/pagination/ 1`] = ` you can either use it directly as a text field or provide it to the select input property to have a select field. - - Age - Age - Age - - Age - - Age - - - - - +
+ Age + Age + Age + + Age + + Age + + + + + +
- See more Multiple Select @@ -9192,49 +8542,43 @@ exports[`firefox /components/pagination/ 1`] = ` new value by accessing event.target.value in the onChange callback. It's always an array. - - Name - - Tag - - Chip - - - Native - - Native - - - - - - - - - - - - - - - +
+ Name + + Tag + + Chip + + + Native + + Native + + + + + + + + + + + +
+ + + See more Controlled Open Select - - - Age - +
+ + Age + +
- See more With a Dialog @@ -9242,15 +8586,12 @@ exports[`firefox /components/pagination/ 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - +
+ +
- See more Grouping @@ -9258,25 +8599,22 @@ exports[`firefox /components/pagination/ 1`] = ` Display categories with the ListSubheader component or the native element. - - Grouping - - Grouping - - - - - - - Grouping - +
+ Grouping + + Grouping + + + + + + + Grouping + +
- See more Accessibility @@ -9311,40 +8649,37 @@ exports[`firefox /components/pickers 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age - - Age - - Some important helper text - - Without labelAge - - Label + placeholderName - - DisabledName - - ErrorName - - Read onlyAge - - Auto width - - PlaceholderAge - - RequiredAge - - Age - +
+ Age + + Age + + Some important helper text + + Without labelAge + + Label + placeholderName + + DisabledName + + ErrorName + + Read onlyAge + + Auto width + + PlaceholderAge* + + RequiredAge + + Age + +
- See more Advanced features @@ -9357,108 +8692,105 @@ exports[`firefox /components/pickers 1`] = ` . It's meant to be an improved version of the "react-select" and "downshift" packages. - - Native Select - - As the user experience can be improved on mobile using the native select of - the platform, we allow such pattern. - - - Age - - Age - - - - - - Age - - Age - - - - - - Some important helper text - - age - - - - - - With visually hidden labelAge - - Age - - - - - - Label + placeholderName - - Name - - - - - - DisabledName - - Name - - - - - ErrorName - - Name - - - - - Uncontrolled - - age - - - - - - PlaceholderAge - - Age - - - - - - RequiredAge - - Age - - - - - - Age - - Age - - - - - + + Native Select + + As the user experience can be improved on mobile using the native select of + the platform, we allow such pattern. + +
+ Age + + Age + + + + + + Age + + Age + + + + + + Some important helper text + + age + + + + + + With visually hidden labelAge + + Age + + + + + + Label + placeholderName + + Name + + + + + + DisabledName + + Name + + + + + ErrorName + + Name + + + + + Uncontrolled + + age + + + + + + PlaceholderAge* + + Age  * + + + + + + RequiredAge + + Age + + + + + + Age + + Age + + + + + +
- See more Text Fields @@ -9479,26 +8811,23 @@ exports[`firefox /components/pickers 1`] = ` you can either use it directly as a text field or provide it to the select input property to have a select field. - - Age - Age - Age - - Age - - Age - - - - - +
+ Age + Age + Age + + Age + + Age + + + + + +
- See more Multiple Select @@ -9508,49 +8837,43 @@ exports[`firefox /components/pickers 1`] = ` new value by accessing event.target.value in the onChange callback. It's always an array. - - Name - - Tag - - Chip - - - Native - - Native - - - - - - - - - - - - - - - +
+ Name + + Tag + + Chip + + + Native + + Native + + + + + + + + + + + +
+ + + See more Controlled Open Select - - - Age - +
+ + Age + +
- See more With a Dialog @@ -9558,15 +8881,12 @@ exports[`firefox /components/pickers 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - +
+ +
- See more Grouping @@ -9574,25 +8894,22 @@ exports[`firefox /components/pickers 1`] = ` Display categories with the ListSubheader component or the native element. - - Grouping - - Grouping - - - - - - - Grouping - +
+ Grouping + + Grouping + + + + + + + Grouping + +
- See more Accessibility @@ -9627,40 +8944,37 @@ exports[`firefox /components/radio-buttons 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age - - Age - - Some important helper text - - Without labelAge - - Label + placeholderName - - DisabledName - - ErrorName - - Read onlyAge - - Auto width - - PlaceholderAge - - RequiredAge - - Age - +
+ Age + + Age + + Some important helper text + + Without labelAge + + Label + placeholderName + + DisabledName + + ErrorName + + Read onlyAge + + Auto width + + PlaceholderAge* + + RequiredAge + + Age + +
- See more Advanced features @@ -9679,102 +8993,99 @@ exports[`firefox /components/radio-buttons 1`] = ` As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. - - Age - - Age - - - - - - Age - - Age - - - - - - Some important helper text - - age - - - - - - With visually hidden labelAge - - Age - - - - - - Label + placeholderName - - Name - - - - - - DisabledName - - Name - - - - - ErrorName - - Name - - - - - Uncontrolled - - age - - - - - - PlaceholderAge - - Age - - - - - - RequiredAge - - Age - - - - - - Age - - Age - - - - - +
+ Age + + Age + + + + + + Age + + Age + + + + + + Some important helper text + + age + + + + + + With visually hidden labelAge + + Age + + + + + + Label + placeholderName + + Name + + + + + + DisabledName + + Name + + + + + ErrorName + + Name + + + + + Uncontrolled + + age + + + + + + PlaceholderAge* + + Age  * + + + + + + RequiredAge + + Age + + + + + + Age + + Age + + + + + +
- See more Text Fields @@ -9795,26 +9106,23 @@ exports[`firefox /components/radio-buttons 1`] = ` you can either use it directly as a text field or provide it to the select input property to have a select field. - - Age - Age - Age - - Age - - Age - - - - - +
+ Age + Age + Age + + Age + + Age + + + + + +
- See more Multiple Select @@ -9824,49 +9132,43 @@ exports[`firefox /components/radio-buttons 1`] = ` new value by accessing event.target.value in the onChange callback. It's always an array. - - Name - - Tag - - Chip - - - Native - - Native - - - - - - - - - - - - - - - +
+ Name + + Tag + + Chip + + + Native + + Native + + + + + + + + + + + +
+ + + See more Controlled Open Select - - - Age - +
+ + Age + +
- See more With a Dialog @@ -9874,15 +9176,12 @@ exports[`firefox /components/radio-buttons 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - +
+ +
- See more Grouping @@ -9890,25 +9189,22 @@ exports[`firefox /components/radio-buttons 1`] = ` Display categories with the ListSubheader component or the native element. - - Grouping - - Grouping - - - - - - - Grouping - +
+ Grouping + + Grouping + + + + + + + Grouping + +
- See more Accessibility @@ -9943,40 +9239,37 @@ exports[`firefox /components/rating/ 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age - - Age - - Some important helper text - - Without labelAge - - Label + placeholderName - - DisabledName - - ErrorName - - Read onlyAge - - Auto width - - PlaceholderAge - - RequiredAge - - Age - +
+ Age + + Age + + Some important helper text + + Without labelAge + + Label + placeholderName + + DisabledName + + ErrorName + + Read onlyAge + + Auto width + + PlaceholderAge* + + RequiredAge + + Age + +
- See more Advanced features @@ -9995,102 +9288,99 @@ exports[`firefox /components/rating/ 1`] = ` As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. - - Age - - Age - - - - - - Age - - Age - - - - - - Some important helper text - - age - - - - - - With visually hidden labelAge - - Age - - - - - - Label + placeholderName - - Name - - - - - - DisabledName - - Name - - - - - ErrorName - - Name - - - - - Uncontrolled - - age - - - - - - PlaceholderAge - - Age - - - - - - RequiredAge - - Age - - - - - - Age - - Age - - - - - +
+ Age + + Age + + + + + + Age + + Age + + + + + + Some important helper text + + age + + + + + + With visually hidden labelAge + + Age + + + + + + Label + placeholderName + + Name + + + + + + DisabledName + + Name + + + + + ErrorName + + Name + + + + + Uncontrolled + + age + + + + + + PlaceholderAge* + + Age  * + + + + + + RequiredAge + + Age + + + + + + Age + + Age + + + + + +
- See more Text Fields @@ -10111,26 +9401,23 @@ exports[`firefox /components/rating/ 1`] = ` you can either use it directly as a text field or provide it to the select input property to have a select field. - - Age - Age - Age - - Age - - Age - - - - - +
+ Age + Age + Age + + Age + + Age + + + + + +
- See more Multiple Select @@ -10140,49 +9427,43 @@ exports[`firefox /components/rating/ 1`] = ` new value by accessing event.target.value in the onChange callback. It's always an array. - - Name - - Tag - - Chip - - - Native - - Native - - - - - - - - - - - - - - - +
+ Name + + Tag + + Chip + + + Native + + Native + + + + + + + + + + + +
+ + + See more Controlled Open Select - - - Age - +
+ + Age + +
- See more With a Dialog @@ -10190,15 +9471,12 @@ exports[`firefox /components/rating/ 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - +
+ +
- See more Grouping @@ -10206,25 +9484,22 @@ exports[`firefox /components/rating/ 1`] = ` Display categories with the ListSubheader component or the native element. - - Grouping - - Grouping - - - - - - - Grouping - +
+ Grouping + + Grouping + + + + + + + Grouping + +
- See more Accessibility @@ -10259,40 +9534,37 @@ exports[`firefox /components/selects/ 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age - - Age - - Some important helper text - - Without labelAge - - Label + placeholderName - - DisabledName - - ErrorName - - Read onlyAge - - Auto width - - PlaceholderAge - - RequiredAge - - Age - +
+ Age + + Age + + Some important helper text + + Without labelAge + + Label + placeholderName + + DisabledName + + ErrorName + + Read onlyAge + + Auto width + + PlaceholderAge* + + RequiredAge + + Age + +
- See more Advanced features @@ -10311,102 +9583,99 @@ exports[`firefox /components/selects/ 1`] = ` As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. - - Age - - Age - - - - - - Age - - Age - - - - - - Some important helper text - - age - - - - - - With visually hidden labelAge - - Age - - - - - - Label + placeholderName - - Name - - - - - - DisabledName - - Name - - - - - ErrorName - - Name - - - - - Uncontrolled - - age - - - - - - PlaceholderAge - - Age - - - - - - RequiredAge - - Age - - - - - - Age - - Age - - - - - +
+ Age + + Age + + + + + + Age + + Age + + + + + + Some important helper text + + age + + + + + + With visually hidden labelAge + + Age + + + + + + Label + placeholderName + + Name + + + + + + DisabledName + + Name + + + + + ErrorName + + Name + + + + + Uncontrolled + + age + + + + + + PlaceholderAge* + + Age  * + + + + + + RequiredAge + + Age + + + + + + Age + + Age + + + + + +
- See more Text Fields @@ -10427,26 +9696,23 @@ exports[`firefox /components/selects/ 1`] = ` you can either use it directly as a text field or provide it to the select input property to have a select field. - - Age - Age - Age - - Age - - Age - - - - - +
+ Age + Age + Age + + Age + + Age + + + + + +
- See more Multiple Select @@ -10456,49 +9722,43 @@ exports[`firefox /components/selects/ 1`] = ` new value by accessing event.target.value in the onChange callback. It's always an array. - - Name - - Tag - - Chip - - - Native - - Native - - - - - - - - - - - - - - - +
+ Name + + Tag + + Chip + + + Native + + Native + + + + + + + + + + + +
+ + + See more Controlled Open Select - - - Age - +
+ + Age + +
- See more With a Dialog @@ -10506,15 +9766,12 @@ exports[`firefox /components/selects/ 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - +
+ +
- See more Grouping @@ -10522,25 +9779,22 @@ exports[`firefox /components/selects/ 1`] = ` Display categories with the ListSubheader component or the native element. - - Grouping - - Grouping - - - - - - - Grouping - +
+ Grouping + + Grouping + + + + + + + Grouping + +
- See more Accessibility @@ -10575,40 +9829,37 @@ exports[`firefox /components/slider 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age - - Age - - Some important helper text - - Without labelAge - - Label + placeholderName - - DisabledName - - ErrorName - - Read onlyAge - - Auto width - - PlaceholderAge - - RequiredAge - - Age - +
+ Age + + Age + + Some important helper text + + Without labelAge + + Label + placeholderName + + DisabledName + + ErrorName + + Read onlyAge + + Auto width + + PlaceholderAge* + + RequiredAge + + Age + +
- See more Advanced features @@ -10627,102 +9878,99 @@ exports[`firefox /components/slider 1`] = ` As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. - - Age - - Age - - - - - - Age - - Age - - - - - - Some important helper text - - age - - - - - - With visually hidden labelAge - - Age - - - - - - Label + placeholderName - - Name - - - - - - DisabledName - - Name - - - - - ErrorName - - Name - - - - - Uncontrolled - - age - - - - - - PlaceholderAge - - Age - - - - - - RequiredAge - - Age - - - - - - Age - - Age - - - - - +
+ Age + + Age + + + + + + Age + + Age + + + + + + Some important helper text + + age + + + + + + With visually hidden labelAge + + Age + + + + + + Label + placeholderName + + Name + + + + + + DisabledName + + Name + + + + + ErrorName + + Name + + + + + Uncontrolled + + age + + + + + + PlaceholderAge* + + Age  * + + + + + + RequiredAge + + Age + + + + + + Age + + Age + + + + + +
- See more Text Fields @@ -10743,26 +9991,23 @@ exports[`firefox /components/slider 1`] = ` you can either use it directly as a text field or provide it to the select input property to have a select field. - - Age - Age - Age - - Age - - Age - - - - - +
+ Age + Age + Age + + Age + + Age + + + + + +
- See more Multiple Select @@ -10772,49 +10017,43 @@ exports[`firefox /components/slider 1`] = ` new value by accessing event.target.value in the onChange callback. It's always an array. - - Name - - Tag - - Chip - - - Native - - Native - - - - - - - - - - - - - - - +
+ Name + + Tag + + Chip + + + Native + + Native + + + + + + + + + + + +
+ + + See more Controlled Open Select - - - Age - +
+ + Age + +
- See more With a Dialog @@ -10822,15 +10061,12 @@ exports[`firefox /components/slider 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - +
+ +
- See more Grouping @@ -10838,25 +10074,22 @@ exports[`firefox /components/slider 1`] = ` Display categories with the ListSubheader component or the native element. - - Grouping - - Grouping - - - - - - - Grouping - +
+ Grouping + + Grouping + + + + + + + Grouping + +
- See more Accessibility @@ -10891,40 +10124,37 @@ exports[`firefox /components/switch/ 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age - - Age - - Some important helper text - - Without labelAge - - Label + placeholderName - - DisabledName - - ErrorName - - Read onlyAge - - Auto width - - PlaceholderAge - - RequiredAge - - Age - +
+ Age + + Age + + Some important helper text + + Without labelAge + + Label + placeholderName + + DisabledName + + ErrorName + + Read onlyAge + + Auto width + + PlaceholderAge* + + RequiredAge + + Age + +
- See more Advanced features @@ -10943,102 +10173,99 @@ exports[`firefox /components/switch/ 1`] = ` As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. - - Age - - Age - - - - - - Age - - Age - - - - - - Some important helper text - - age - - - - - - With visually hidden labelAge - - Age - - - - - - Label + placeholderName - - Name - - - - - - DisabledName - - Name - - - - - ErrorName - - Name - - - - - Uncontrolled - - age - - - - - - PlaceholderAge - - Age - - - - - - RequiredAge - - Age - - - - - - Age - - Age - - - - - +
+ Age + + Age + + + + + + Age + + Age + + + + + + Some important helper text + + age + + + + + + With visually hidden labelAge + + Age + + + + + + Label + placeholderName + + Name + + + + + + DisabledName + + Name + + + + + ErrorName + + Name + + + + + Uncontrolled + + age + + + + + + PlaceholderAge* + + Age  * + + + + + + RequiredAge + + Age + + + + + + Age + + Age + + + + + +
- See more Text Fields @@ -11059,26 +10286,23 @@ exports[`firefox /components/switch/ 1`] = ` you can either use it directly as a text field or provide it to the select input property to have a select field. - - Age - Age - Age - - Age - - Age - - - - - +
+ Age + Age + Age + + Age + + Age + + + + + +
- See more Multiple Select @@ -11088,49 +10312,43 @@ exports[`firefox /components/switch/ 1`] = ` new value by accessing event.target.value in the onChange callback. It's always an array. - - Name - - Tag - - Chip - - - Native - - Native - - - - - - - - - - - - - - - +
+ Name + + Tag + + Chip + + + Native + + Native + + + + + + + + + + + +
+ + + See more Controlled Open Select - - - Age - +
+ + Age + +
- See more With a Dialog @@ -11138,15 +10356,12 @@ exports[`firefox /components/switch/ 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - +
+ +
- See more Grouping @@ -11154,25 +10369,22 @@ exports[`firefox /components/switch/ 1`] = ` Display categories with the ListSubheader component or the native element. - - Grouping - - Grouping - - - - - - - Grouping - +
+ Grouping + + Grouping + + + + + + + Grouping + +
- See more Accessibility @@ -11207,40 +10419,37 @@ exports[`firefox /components/tabs/ 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age - - Age - - Some important helper text - - Without labelAge - - Label + placeholderName - - DisabledName - - ErrorName - - Read onlyAge - - Auto width - - PlaceholderAge - - RequiredAge - - Age - +
+ Age + + Age + + Some important helper text + + Without labelAge + + Label + placeholderName + + DisabledName + + ErrorName + + Read onlyAge + + Auto width + + PlaceholderAge* + + RequiredAge + + Age + +
- See more Advanced features @@ -11259,102 +10468,99 @@ exports[`firefox /components/tabs/ 1`] = ` As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. - - Age - - Age - - - - - - Age - - Age - - - - - - Some important helper text - - age - - - - - - With visually hidden labelAge - - Age - - - - - - Label + placeholderName - - Name - - - - - - DisabledName - - Name - - - - - ErrorName - - Name - - - - - Uncontrolled - - age - - - - - - PlaceholderAge - - Age - - - - - - RequiredAge - - Age - - - - - - Age - - Age - - - - - +
+ Age + + Age + + + + + + Age + + Age + + + + + + Some important helper text + + age + + + + + + With visually hidden labelAge + + Age + + + + + + Label + placeholderName + + Name + + + + + + DisabledName + + Name + + + + + ErrorName + + Name + + + + + Uncontrolled + + age + + + + + + PlaceholderAge* + + Age  * + + + + + + RequiredAge + + Age + + + + + + Age + + Age + + + + + +
- See more Text Fields @@ -11375,26 +10581,23 @@ exports[`firefox /components/tabs/ 1`] = ` you can either use it directly as a text field or provide it to the select input property to have a select field. - - Age - Age - Age - - Age - - Age - - - - - +
+ Age + Age + Age + + Age + + Age + + + + + +
- See more Multiple Select @@ -11404,49 +10607,43 @@ exports[`firefox /components/tabs/ 1`] = ` new value by accessing event.target.value in the onChange callback. It's always an array. - - Name - - Tag - - Chip - - - Native - - Native - - - - - - - - - - - - - - - +
+ Name + + Tag + + Chip + + + Native + + Native + + + + + + + + + + + +
+ + + See more Controlled Open Select - - - Age - +
+ + Age + +
- See more With a Dialog @@ -11454,15 +10651,12 @@ exports[`firefox /components/tabs/ 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - +
+ +
- See more Grouping @@ -11470,25 +10664,22 @@ exports[`firefox /components/tabs/ 1`] = ` Display categories with the ListSubheader component or the native element. - - Grouping - - Grouping - - - - - - - Grouping - +
+ Grouping + + Grouping + + + + + + + Grouping + +
- See more Accessibility @@ -11523,40 +10714,37 @@ exports[`firefox /components/text-fields/ 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age - - Age - - Some important helper text - - Without labelAge - - Label + placeholderName - - DisabledName - - ErrorName - - Read onlyAge - - Auto width - - PlaceholderAge - - RequiredAge - - Age - +
+ Age + + Age + + Some important helper text + + Without labelAge + + Label + placeholderName + + DisabledName + + ErrorName + + Read onlyAge + + Auto width + + PlaceholderAge* + + RequiredAge + + Age + +
- See more Advanced features @@ -11575,102 +10763,99 @@ exports[`firefox /components/text-fields/ 1`] = ` As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. - - Age - - Age - - - - - - Age - - Age - - - - - - Some important helper text - - age - - - - - - With visually hidden labelAge - - Age - - - - - - Label + placeholderName - - Name - - - - - - DisabledName - - Name - - - - - ErrorName - - Name - - - - - Uncontrolled - - age - - - - - - PlaceholderAge - - Age - - - - - - RequiredAge - - Age - - - - - - Age - - Age - - - - - +
+ Age + + Age + + + + + + Age + + Age + + + + + + Some important helper text + + age + + + + + + With visually hidden labelAge + + Age + + + + + + Label + placeholderName + + Name + + + + + + DisabledName + + Name + + + + + ErrorName + + Name + + + + + Uncontrolled + + age + + + + + + PlaceholderAge* + + Age  * + + + + + + RequiredAge + + Age + + + + + + Age + + Age + + + + + +
- See more Text Fields @@ -11691,26 +10876,23 @@ exports[`firefox /components/text-fields/ 1`] = ` you can either use it directly as a text field or provide it to the select input property to have a select field. - - Age - Age - Age - - Age - - Age - - - - - +
+ Age + Age + Age + + Age + + Age + + + + + +
- See more Multiple Select @@ -11720,49 +10902,43 @@ exports[`firefox /components/text-fields/ 1`] = ` new value by accessing event.target.value in the onChange callback. It's always an array. - - Name - - Tag - - Chip - - - Native - - Native - - - - - - - - - - - - - - - +
+ Name + + Tag + + Chip + + + Native + + Native + + + + + + + + + + + +
+ + + See more Controlled Open Select - - - Age - +
+ + Age + +
- See more With a Dialog @@ -11770,15 +10946,12 @@ exports[`firefox /components/text-fields/ 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - +
+ +
- See more Grouping @@ -11786,25 +10959,22 @@ exports[`firefox /components/text-fields/ 1`] = ` Display categories with the ListSubheader component or the native element. - - Grouping - - Grouping - - - - - - - Grouping - +
+ Grouping + + Grouping + + + + + + + Grouping + +
- See more Accessibility @@ -11839,40 +11009,37 @@ exports[`firefox /components/tooltips/ 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age - - Age - - Some important helper text - - Without labelAge - - Label + placeholderName - - DisabledName - - ErrorName - - Read onlyAge - - Auto width - - PlaceholderAge - - RequiredAge - - Age - +
+ Age + + Age + + Some important helper text + + Without labelAge + + Label + placeholderName + + DisabledName + + ErrorName + + Read onlyAge + + Auto width + + PlaceholderAge* + + RequiredAge + + Age + +
- See more Advanced features @@ -11891,102 +11058,99 @@ exports[`firefox /components/tooltips/ 1`] = ` As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. - - Age - - Age - - - - - - Age - - Age - - - - - - Some important helper text - - age - - - - - - With visually hidden labelAge - - Age - - - - - - Label + placeholderName - - Name - - - - - - DisabledName - - Name - - - - - ErrorName - - Name - - - - - Uncontrolled - - age - - - - - - PlaceholderAge - - Age - - - - - - RequiredAge - - Age - - - - - - Age - - Age - - - - - +
+ Age + + Age + + + + + + Age + + Age + + + + + + Some important helper text + + age + + + + + + With visually hidden labelAge + + Age + + + + + + Label + placeholderName + + Name + + + + + + DisabledName + + Name + + + + + ErrorName + + Name + + + + + Uncontrolled + + age + + + + + + PlaceholderAge* + + Age  * + + + + + + RequiredAge + + Age + + + + + + Age + + Age + + + + + +
- See more Text Fields @@ -12007,26 +11171,23 @@ exports[`firefox /components/tooltips/ 1`] = ` you can either use it directly as a text field or provide it to the select input property to have a select field. - - Age - Age - Age - - Age - - Age - - - - - +
+ Age + Age + Age + + Age + + Age + + + + + +
- See more Multiple Select @@ -12036,49 +11197,43 @@ exports[`firefox /components/tooltips/ 1`] = ` new value by accessing event.target.value in the onChange callback. It's always an array. - - Name - - Tag - - Chip - - - Native - - Native - - - - - - - - - - - - - - - +
+ Name + + Tag + + Chip + + + Native + + Native + + + + + + + + + + + +
+ + + See more Controlled Open Select - - - Age - +
+ + Age + +
- See more With a Dialog @@ -12086,15 +11241,12 @@ exports[`firefox /components/tooltips/ 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - +
+ +
- See more Grouping @@ -12102,25 +11254,22 @@ exports[`firefox /components/tooltips/ 1`] = ` Display categories with the ListSubheader component or the native element. - - Grouping - - Grouping - - - - - - - Grouping - +
+ Grouping + + Grouping + + + + + + + Grouping + +
- See more Accessibility @@ -12155,40 +11304,37 @@ exports[`firefox /components/transfer-list 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age - - Age - - Some important helper text - - Without labelAge - - Label + placeholderName - - DisabledName - - ErrorName - - Read onlyAge - - Auto width - - PlaceholderAge - - RequiredAge - - Age - +
+ Age + + Age + + Some important helper text + + Without labelAge + + Label + placeholderName + + DisabledName + + ErrorName + + Read onlyAge + + Auto width + + PlaceholderAge* + + RequiredAge + + Age + +
- See more Advanced features @@ -12207,102 +11353,99 @@ exports[`firefox /components/transfer-list 1`] = ` As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. - - Age - - Age - - - - - - Age - - Age - - - - - - Some important helper text - - age - - - - - - With visually hidden labelAge - - Age - - - - - - Label + placeholderName - - Name - - - - - - DisabledName - - Name - - - - - ErrorName - - Name - - - - - Uncontrolled - - age - - - - - - PlaceholderAge - - Age - - - - - - RequiredAge - - Age - - - - - - Age - - Age - - - - - +
+ Age + + Age + + + + + + Age + + Age + + + + + + Some important helper text + + age + + + + + + With visually hidden labelAge + + Age + + + + + + Label + placeholderName + + Name + + + + + + DisabledName + + Name + + + + + ErrorName + + Name + + + + + Uncontrolled + + age + + + + + + PlaceholderAge* + + Age  * + + + + + + RequiredAge + + Age + + + + + + Age + + Age + + + + + +
- See more Text Fields @@ -12323,26 +11466,23 @@ exports[`firefox /components/transfer-list 1`] = ` you can either use it directly as a text field or provide it to the select input property to have a select field. - - Age - Age - Age - - Age - - Age - - - - - +
+ Age + Age + Age + + Age + + Age + + + + + +
- See more Multiple Select @@ -12352,49 +11492,43 @@ exports[`firefox /components/transfer-list 1`] = ` new value by accessing event.target.value in the onChange callback. It's always an array. - - Name - - Tag - - Chip - - - Native - - Native - - - - - - - - - - - - - - - +
+ Name + + Tag + + Chip + + + Native + + Native + + + + + + + + + + + +
+ + + See more Controlled Open Select - - - Age - +
+ + Age + +
- See more With a Dialog @@ -12402,15 +11536,12 @@ exports[`firefox /components/transfer-list 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - +
+ +
- See more Grouping @@ -12418,25 +11549,22 @@ exports[`firefox /components/transfer-list 1`] = ` Display categories with the ListSubheader component or the native element. - - Grouping - - Grouping - - - - - - - Grouping - +
+ Grouping + + Grouping + + + + + + + Grouping + +
- See more Accessibility @@ -12471,40 +11599,37 @@ exports[`firefox /components/tree-view/ 1`] = ` Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. - - Age - - Age - - Some important helper text - - Without labelAge - - Label + placeholderName - - DisabledName - - ErrorName - - Read onlyAge - - Auto width - - PlaceholderAge - - RequiredAge - - Age - +
+ Age + + Age + + Some important helper text + + Without labelAge + + Label + placeholderName + + DisabledName + + ErrorName + + Read onlyAge + + Auto width + + PlaceholderAge* + + RequiredAge + + Age + +
- See more Advanced features @@ -12523,102 +11648,99 @@ exports[`firefox /components/tree-view/ 1`] = ` As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. - - Age - - Age - - - - - - Age - - Age - - - - - - Some important helper text - - age - - - - - - With visually hidden labelAge - - Age - - - - - - Label + placeholderName - - Name - - - - - - DisabledName - - Name - - - - - ErrorName - - Name - - - - - Uncontrolled - - age - - - - - - PlaceholderAge - - Age - - - - - - RequiredAge - - Age - - - - - - Age - - Age - - - - - +
+ Age + + Age + + + + + + Age + + Age + + + + + + Some important helper text + + age + + + + + + With visually hidden labelAge + + Age + + + + + + Label + placeholderName + + Name + + + + + + DisabledName + + Name + + + + + ErrorName + + Name + + + + + Uncontrolled + + age + + + + + + PlaceholderAge* + + Age  * + + + + + + RequiredAge + + Age + + + + + + Age + + Age + + + + + +
- See more Text Fields @@ -12639,26 +11761,23 @@ exports[`firefox /components/tree-view/ 1`] = ` you can either use it directly as a text field or provide it to the select input property to have a select field. - - Age - Age - Age - - Age - - Age - - - - - +
+ Age + Age + Age + + Age + + Age + + + + + +
- See more Multiple Select @@ -12668,49 +11787,43 @@ exports[`firefox /components/tree-view/ 1`] = ` new value by accessing event.target.value in the onChange callback. It's always an array. - - Name - - Tag - - Chip - - - Native - - Native - - - - - - - - - - - - - - - +
+ Name + + Tag + + Chip + + + Native + + Native + + + + + + + + + + + +
+ + + See more Controlled Open Select - - - Age - +
+ + Age + +
- See more With a Dialog @@ -12718,15 +11831,12 @@ exports[`firefox /components/tree-view/ 1`] = ` While it's discouraged by the Material Design specification, you can use a select inside a dialog. - - +
+ +
- See more Grouping @@ -12734,25 +11844,22 @@ exports[`firefox /components/tree-view/ 1`] = ` Display categories with the ListSubheader component or the native element. - - Grouping - - Grouping - - - - - - - Grouping - +
+ Grouping + + Grouping + + + + + + + Grouping + +
- See more Accessibility