fix(select)!: add trailing icon indicator and fix icon token application

BREAKING CHANGE: select will now show an arrow indicator and will apply default styles to slotted icons PiperOrigin-RevId: 553597960
material-components · Aug 3, 2023 · 4ab2e39 · 4ab2e39
1 parent 98daf66
commit 4ab2e39
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 16 deletions.
diff --git a/select/internal/_filled-select.scss b/select/internal/_filled-select.scss
@@ -208,13 +208,13 @@
     );
   }
 
-  [hasstart] .icon.leading {
+  [has-start] .icon.leading {
     font-size: var(--_text-field-leading-icon-size);
     height: var(--_text-field-leading-icon-size);
     width: var(--_text-field-leading-icon-size);
   }
 
-  [hasend] .icon.trailing {
+  .icon.trailing {
     font-size: var(--_text-field-trailing-icon-size);
     height: var(--_text-field-trailing-icon-size);
     width: var(--_text-field-trailing-icon-size);

diff --git a/select/internal/_outlined-select.scss b/select/internal/_outlined-select.scss
@@ -166,13 +166,13 @@
     );
   }
 
-  [hasstart] .icon.leading {
+  [has-start] .icon.leading {
     font-size: var(--_text-field-leading-icon-size);
     height: var(--_text-field-leading-icon-size);
     width: var(--_text-field-leading-icon-size);
   }
 
-  [hasend] .icon.trailing {
+  .icon.trailing {
     font-size: var(--_text-field-trailing-icon-size);
     height: var(--_text-field-trailing-icon-size);
     width: var(--_text-field-trailing-icon-size);

diff --git a/select/internal/_shared.scss b/select/internal/_shared.scss
@@ -29,6 +29,36 @@
     position: relative;
   }
 
+  .icon.trailing svg,
+  .icon ::slotted(*) {
+    fill: currentColor;
+  }
+
+  .icon ::slotted(*) {
+    width: inherit;
+    height: inherit;
+    font-size: inherit;
+  }
+
+  .icon slot {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .icon.trailing :is(.up, .down) {
+    opacity: 0;
+    /* 75 ms is half of min(animate open duration, animate closed duration)*/
+    transition: opacity 75ms linear 75ms;
+  }
+
+  .select:not(.open) .down,
+  .select.open .up {
+    opacity: 1;
+  }
+
   .field,
   .select,
   md-menu {

diff --git a/select/internal/select.ts b/select/internal/select.ts
@@ -80,11 +80,6 @@ export abstract class Select extends LitElement {
    */
   @property({type: Boolean, attribute: 'has-leading-icon'})
   hasLeadingIcon = false;
-  /**
-   * Whether or not the text field has a trailing icon. Used for SSR.
-   */
-  @property({type: Boolean, attribute: 'has-trailing-icon'})
-  hasTrailingIcon = false;
   /**
    * Text to display in the field. Only set for SSR.
    */
@@ -96,8 +91,6 @@ export abstract class Select extends LitElement {
   @query('md-menu') private readonly menu!: Menu|null;
   @queryAssignedElements({slot: 'leadingicon', flatten: true})
   private readonly leadingIcons!: Element[];
-  @queryAssignedElements({slot: 'trailingicon', flatten: true})
-  private readonly trailingIcons!: Element[];
 
   /**
    * The value of the currently selected option.
@@ -186,6 +179,7 @@ export abstract class Select extends LitElement {
     return {
       'disabled': this.disabled,
       'error': this.error,
+      'open': this.open,
     };
   }
 
@@ -205,8 +199,8 @@ export abstract class Select extends LitElement {
           .disabled=${this.disabled}
           .required=${this.required}
           .error=${this.error}
-          .hasStart=${this.hasLeadingIcon}
-          .hasEnd=${this.hasTrailingIcon}
+          ?has-start=${this.hasLeadingIcon}
+          has-end
           supporting-text=${this.supportingText}
           error-text=${this.errorText}
           @keydown =${this.handleKeydown}
@@ -236,7 +230,12 @@ export abstract class Select extends LitElement {
   private renderTrailingIcon() {
     return html`
       <span class="icon trailing" slot="end">
-         <slot name="trailingicon" @slotchange=${this.handleIconChange}></slot>
+        <slot name="trailingicon" @slotchange=${this.handleIconChange}>
+          <svg height="5" viewBox="7 10 10 5" focusable="false">
+            <polygon class="down" stroke="none" fill-rule="evenodd" points="7 10 12 15 17 10"></polygon>
+            <polygon class="up" stroke="none" fill-rule="evenodd" points="7 15 12 10 17 15"></polygon>
+          </svg>
+        </slot>
       </span>
      `;
   }
@@ -564,7 +563,6 @@ export abstract class Select extends LitElement {
 
   private handleIconChange() {
     this.hasLeadingIcon = this.leadingIcons.length > 0;
-    this.hasTrailingIcon = this.trailingIcons.length > 0;
   }
 
   /**

diff --git a/tokens/_md-comp-filled-select.scss b/tokens/_md-comp-filled-select.scss
@@ -137,9 +137,27 @@ $_default: (
   'md-sys-typescale': md-sys-typescale.values(),
 );
 
+@function _get-override-tokens($exclude-hardcoded-values) {
+  // Values pulled from b/198759625 spreadsheet
+  @return (
+    // go/keep-sorted start
+    // TODO(b/292242500): remove once we upgrade tokens
+    'text-field-leading-icon-size': if($exclude-hardcoded-values, null, 24px),
+    // go/keep-sorted end
+  );
+}
+
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
+  $original-tokens: md-comp-filled-select.values(
+    $deps,
+    $exclude-hardcoded-values
+  );
+  $original-tokens: map.merge(
+    $original-tokens,
+    _get-override-tokens($exclude-hardcoded-values)
+  );
   $tokens: values.validate(
-    md-comp-filled-select.values($deps, $exclude-hardcoded-values),
+    $original-tokens,
     $supported-tokens: $supported-tokens,
     $unsupported-tokens: $unsupported-tokens
   );