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

@@ -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;
+    }
   }
 }
 

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
-<div class="mdc-select demo-width-class">
+<div class="mdc-select mdc-select--filled demo-width-class">
   <div class="mdc-select__anchor">
     <span class="mdc-select__ripple"></span>
     <span class="mdc-select__selected-text"></span>
@@ -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
-<div class="mdc-select demo-width-class">
+<div class="mdc-select mdc-select--filled demo-width-class">
   <div class="mdc-select__anchor">
     <span class="mdc-select__ripple"></span>
     <span class="mdc-select__selected-text">Vegetables</span>
@@ -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
-<div class="mdc-select mdc-select--required">
+<div class="mdc-select mdc-select--filled mdc-select--required">
   <span class="mdc-select__ripple"></span>
   <div class="mdc-select__anchor" aria-required="true">
     <span class="mdc-select__selected-text"></span>
@@ -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
-<div class="mdc-select mdc-select--disabled">
+<div class="mdc-select mdc-select--filled mdc-select--disabled">
   <div class="mdc-select__anchor" aria-disabled="true">
     <span class="mdc-select__ripple"></span>
     <span class="mdc-select__selected-text"></span>
@@ -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
-<div class="mdc-select">
+<div class="mdc-select mdc-select--filled">
   <div class="mdc-select__anchor">
     ...
   </div>
@@ -422,7 +422,7 @@ structure.
 #### Filled
 
 ```html
-<div class="mdc-select mdc-select--no-label demo-width-class">
+<div class="mdc-select mdc-select--filled mdc-select--no-label demo-width-class">
   <div class="mdc-select__anchor">
     <span class="mdc-select__ripple"></span>
     <span class="mdc-select__selected-text"></span>

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);

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
-<div class="mdc-select">
+<div class="mdc-select mdc-select--filled">
   <div class="mdc-select__anchor"
        role="button"
        aria-haspopup="listbox"

packages/mdc-select/icon/README.md

@@ -53,10 +53,10 @@ Leading icons can be applied to default or `mdc-select--outlined` Selects. To ad
 
 ### Leading icon
 
-In select:
+In filled select:
 
 ```html
-<div class="mdc-select mdc-select--with-leading-icon">
+<div class="mdc-select mdc-select--filled mdc-select--with-leading-icon">
   <div class="mdc-select__anchor">
     <i class="material-icons mdc-select__icon" tabindex="0" role="button">event</i>
     ...