feat(select): Add mixin for min-width

This allows for more horizontally compact selects/menus (i.e. page number). Note that this is independent of density (vertical compactness).

PiperOrigin-RevId: 310015666

Author: allan-chen

packages/mdc-menu/README.md

@@ -186,6 +186,7 @@ CSS Class | Description
 Mixin | Description
 --- | ---
 `width($width)` | Used to set the `width` of the menu. When used without units (e.g. `4` or `5`) it computes the `width` by multiplying by the base width (`56px`). When used with units (e.g. `240px`, `15%`, or `calc(200px + 10px)` it sets the `width` to the exact value provided.
+`min-width($min-width)` | Sets the `min-width` of the menu. Use with units (e.g. `240px`, `15%`, or `calc(200px + 10px)` only.
 
 > See [Menu Surface](../mdc-menu-surface/README.md#sass-mixins) and [List](../mdc-list/README.md#sass-mixins) documentation for additional style customization options.
 

packages/mdc-menu/_mixins.scss

@@ -41,11 +41,7 @@
   .mdc-menu {
     @include list-mixins.item-meta-ink-color(variables.$ink-color, $query);
     @include list-mixins.item-graphic-ink-color(variables.$ink-color, $query);
-
-    @include feature-targeting-mixins.targets($feat-structure) {
-      min-width: variables.$min-width;
-    }
-
+    @include min-width(variables.$min-width, $query: $query);
     // Include mdc-list selector to ensure list-inside-menu overrides default list styles
     .mdc-list {
       @include list-mixins.item-primary-text-ink-color(variables.$ink-color, $query);
@@ -118,7 +114,7 @@
 }
 
 @mixin width($width, $query: functions.all()) {
-  $feat-structure: functions.create-target($query, color);
+  $feat-structure: functions.create-target($query, structure);
 
   @include feature-targeting-mixins.targets($feat-structure) {
     @if math.is-unitless($width) {
@@ -128,3 +124,13 @@
     }
   }
 }
+
+/// Sets the min-width of the menu.
+/// @param {Number} $min-width - the desired min-width.
+@mixin min-width($min-width, $query: functions.all()) {
+  $feat-structure: functions.create-target($query, structure);
+
+  @include feature-targeting-mixins.targets($feat-structure) {
+    min-width: $min-width;
+  }
+}

packages/mdc-select/README.md

@@ -572,6 +572,7 @@ Mixin | Description
 `focused-outline-color($color)` | Customizes the color of the outline of the select when focused.
 `hover-outline-color($color)` | Customizes the color of the outline when the select is hovered.
 `height($height)` | Sets height of the filled select variant.
+`min-width($min-width)` | Sets the min-width of the select and its menu.
 
 > _NOTE_: To further customize the floating label, please see the [floating label documentation](./../mdc-floating-label/README.md).
 

packages/mdc-select/_mixins.scss

@@ -27,6 +27,7 @@
 @use "@material/feature-targeting/mixins" as feature-targeting-mixins;
 @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/notched-outline/mixins" as notched-outline-mixins;
 @use "@material/notched-outline/variables" as notched-outline-variables;
 @use "@material/ripple/mixins" as ripple-mixins;
@@ -76,6 +77,7 @@
       $right: variables.$anchor-padding-right,
       $query: $query
     );
+    @include min-width(variables.$min-width, $query: $query);
 
     @include feature-targeting-mixins.targets($feat-structure) {
       display: inline-block;
@@ -122,7 +124,6 @@
       overflow: hidden;
       outline: none;
       cursor: pointer;
-      min-width: 200px;
     }
 
     @include focused-line-ripple_ {
@@ -235,6 +236,22 @@
   }
 }
 
+/// Sets the min-width of the select and its menu.
+/// @param {Number} $min-width - The desired min-width.
+@mixin min-width($min-width, $query: feature-targeting-functions.all()) {
+  $feat-structure: feature-targeting-functions.create-target($query, structure);
+
+  .mdc-select__anchor {
+    @include feature-targeting-mixins.targets($feat-structure) {
+      min-width: $min-width;
+    }
+  }
+
+  .mdc-select__menu {
+    @include menu-mixins.min-width($min-width, $query: $query);
+  }
+}
+
 @mixin ink-color($color, $query: feature-targeting-functions.all()) {
   &:not(.mdc-select--disabled) {
     @include ink-color_($color, $query: $query);

packages/mdc-select/_variables.scss

@@ -38,6 +38,7 @@ $anchor-padding-left: 16px !default;
 $anchor-padding-left-with-leading-icon: 0 !default;
 $anchor-padding-right: 0 !default;
 $outlined-stroke-width: 2px !default;
+$min-width: 200px !default;
 
 $ink-color: rgba(variables.prop-value(on-surface), .87) !default;
 $dropdown-icon-color: rgba(variables.prop-value(on-surface), .54) !default;