From 912d9021dab7712e0ab711fcaffb3933a960c171 Mon Sep 17 00:00:00 2001 From: Allan Chen Date: Tue, 26 May 2020 11:38:56 -0700 Subject: [PATCH] feat(select): flatten menu top when opened below BREAKING CHANGE: non-outlined selects now require a `mdc-select--filled` class on its root PiperOrigin-RevId: 313235538 --- packages/mdc-menu-surface/_mixins.scss | 10 +++++++--- packages/mdc-select/README.md | 12 ++++++------ packages/mdc-select/_mixins.scss | 5 +++++ packages/mdc-select/helper-text/README.md | 2 +- packages/mdc-select/icon/README.md | 4 ++-- 5 files changed, 21 insertions(+), 12 deletions(-) diff --git a/packages/mdc-menu-surface/_mixins.scss b/packages/mdc-menu-surface/_mixins.scss index 3efa3ad47e1..4e10599a743 100644 --- a/packages/mdc-menu-surface/_mixins.scss +++ b/packages/mdc-menu-surface/_mixins.scss @@ -92,10 +92,14 @@ // Used by filled variants of GM components to conditionally flatten the top // corners of the menu. -@mixin flatten-top-when-opened-below { +@mixin flatten-top-when-opened-below($query: functions.all()) { .mdc-menu-surface--is-open-below { - border-top-left-radius: 0px; - border-top-right-radius: 0px; + $feat-structure: functions.create-target($query, structure); + + @include feature-targeting-mixins.targets($feat-structure) { + border-top-left-radius: 0px; + border-top-right-radius: 0px; + } } } diff --git a/packages/mdc-select/README.md b/packages/mdc-select/README.md index 45a7e44642d..413a1f74c54 100644 --- a/packages/mdc-select/README.md +++ b/packages/mdc-select/README.md @@ -47,7 +47,7 @@ The select requires that you set the `width` of the `mdc-select` element. This i ### HTML ```html -
+
@@ -237,7 +237,7 @@ to set the selected item. The select also needs the text from the selected eleme `mdc-select__selected-text` element. ```html -
+
Vegetables @@ -297,7 +297,7 @@ To style a select menu as required and enable validation, add the `mdc-select--r and set the `aria-required` attribute on the `mdc-select__anchor` element to be `"true"`. ```html -
+
@@ -338,7 +338,7 @@ Add the `mdc-select--disabled` class to the `mdc-select` element and and set the `aria-disabled` attribute on the `mdc-select__selected-text` element to be `"true"`. ```html -
+
@@ -380,7 +380,7 @@ Disabled list items are removed from the list items index and are ignored entire programmatically select a disabled list item. ```html -
+
...
@@ -422,7 +422,7 @@ structure. #### Filled ```html -
+
diff --git a/packages/mdc-select/_mixins.scss b/packages/mdc-select/_mixins.scss index 5d1958dfcaa..75a17ec7bdf 100644 --- a/packages/mdc-select/_mixins.scss +++ b/packages/mdc-select/_mixins.scss @@ -29,6 +29,7 @@ @use "@material/floating-label/mixins" as floating-label-mixins; @use "@material/line-ripple/mixins" as line-ripple-mixins; @use "@material/menu/mixins" as menu-mixins; +@use "@material/menu-surface/mixins" as menu-surface-mixins; @use "@material/notched-outline/mixins" as notched-outline-mixins; @use "@material/notched-outline/variables" as notched-outline-variables; @use "@material/ripple/mixins" as ripple-mixins; @@ -193,6 +194,10 @@ @include with-leading-icon_($query: $query); } + .mdc-select--filled { + @include menu-surface-mixins.flatten-top-when-opened-below($query: $query); + } + .mdc-select__menu .mdc-list .mdc-list-item--selected { @include feature-targeting-mixins.targets($feat-color) { @include theme-mixins.prop(color, on-surface); diff --git a/packages/mdc-select/helper-text/README.md b/packages/mdc-select/helper-text/README.md index b528f053deb..98fbe99163f 100644 --- a/packages/mdc-select/helper-text/README.md +++ b/packages/mdc-select/helper-text/README.md @@ -42,7 +42,7 @@ We recommend doing this as well as it will help indicate to assistive devices th the display of the helper text is dependent on the interaction with the MDCSelect component. ```html -
+
+
event ...