feat(chips): add icon support

PiperOrigin-RevId: 518397757
material-components · Mar 21, 2023 · 7e02a15 · 7e02a15
1 parent eed1abd
commit 7e02a15
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 23 deletions.
diff --git a/chips/lib/_shared.scss b/chips/lib/_shared.scss
@@ -41,7 +41,7 @@
   }
 
   .container {
-    align-items: center;
+    align-items: baseline;
     appearance: none;
     background: none;
     border: none;
@@ -51,7 +51,7 @@
     gap: 8px;
     height: 100%;
     outline: none;
-    padding: 0 16px;
+    padding: 0 8px;
     position: relative;
     text-decoration: none;
     width: 100%;
@@ -132,8 +132,11 @@
   }
 
   .label {
+    align-items: center;
     color: var(--_label-text-color);
+    display: flex;
     font: var(--_label-text-type);
+    height: 100%;
     text-overflow: ellipsis;
     user-select: none;
     white-space: nowrap;
@@ -143,4 +146,38 @@
     color: var(--_disabled-label-text-color);
     opacity: var(--_disabled-label-text-opacity);
   }
+
+  .icon {
+    align-self: center;
+  }
+
+  .icon ::slotted(*) {
+    font-size: inherit;
+    height: 100%;
+    width: 100%;
+  }
+
+  .icon.leading {
+    color: var(--_leading-icon-color);
+    font-size: var(--_leading-icon-size);
+    max-height: var(--_leading-icon-size);
+    max-width: var(--_leading-icon-size);
+  }
+
+  :hover .icon.leading {
+    color: var(--_hover-leading-icon-color);
+  }
+
+  :focus .icon.leading {
+    color: var(--_focus-leading-icon-color);
+  }
+
+  :active .icon.leading {
+    color: var(--_pressed-leading-icon-color);
+  }
+
+  .disabled .icon.leading {
+    color: var(--_disabled-leading-icon-color);
+    opacity: var(--_disabled-leading-icon-opacity);
+  }
 }
diff --git a/chips/lib/chip.ts b/chips/lib/chip.ts
@@ -8,7 +8,7 @@ import '../../elevation/elevation.js';
 import '../../focus/focus-ring.js';
 import '../../ripple/ripple.js';
 
-import {html, LitElement, nothing} from 'lit';
+import {html, LitElement, nothing, TemplateResult} from 'lit';
 import {property, queryAsync, state} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
 import {when} from 'lit/directives/when.js';
@@ -52,11 +52,22 @@ export class Chip extends LitElement {
         <md-elevation shadow=${this.elevated} surface></md-elevation>
         ${when(this.showRipple, this.renderRipple)}
         <md-focus-ring .visible=${this.showFocusRing}></md-focus-ring>
-        <div class="label">${this.label}</div>
+        <span class="icon leading">
+          <slot name="leading-icon"></slot>
+        </span>
+        <span class="label">${this.label}</span>
+        <span class="icon trailing">
+          ${this.renderTrailingIcon?.() || nothing}
+        </span>
       </${button}>
     `;
   }
 
+  // Not all chip variants have a trailing icon. We still render a wrapper
+  // <span class="icon trailing"> to compute the correct padding + gap of the
+  // button.
+  protected renderTrailingIcon?: () => TemplateResult;
+
   private readonly getRipple = () => {  // bind to this
     this.showRipple = true;
     return this.ripple;

diff --git a/tokens/_md-comp-assist-chip.scss b/tokens/_md-comp-assist-chip.scss
@@ -1,7 +1,7 @@
-//
 // Copyright 2023 Google LLC
 // SPDX-License-Identifier: Apache-2.0
 //
+//
 
 // go/keep-sorted start
 @use 'sass:map';
@@ -16,26 +16,45 @@
 @use './v0_161/md-comp-assist-chip';
 // go/keep-sorted end
 
-$_default: (
-  'md-sys-color': md-sys-color.values-light(),
-  'md-sys-elevation': md-sys-elevation.values(),
-  'md-sys-shape': md-sys-shape.values(),
-  'md-sys-state': md-sys-state.values(),
-  'md-sys-typescale': md-sys-typescale.values(),
-);
-
 $_unsupported-tokens: (
+  // go/keep-sorted start
+  'dragged-leading-icon-color',
   'dragged-state-layer-color',
   'dragged-state-layer-opacity',
   'label-text-font',
   'label-text-line-height',
   'label-text-size',
   'label-text-tracking',
-  'label-text-weight'
+  'label-text-weight' // go/keep-sorted end
+);
+
+$_renamed-tokens: (
+  // go/keep-sorted start
+  'with-icon-disabled-icon-color': 'disabled-leading-icon-color',
+  'with-icon-disabled-icon-opacity': 'disabled-leading-icon-opacity',
+  'with-icon-dragged-icon-color': 'dragged-leading-icon-color',
+  'with-icon-focus-icon-color': 'focus-leading-icon-color',
+  'with-icon-hover-icon-color': 'hover-leading-icon-color',
+  'with-icon-icon-color': 'leading-icon-color',
+  'with-icon-icon-size': 'leading-icon-size',
+  'with-icon-pressed-icon-color': 'pressed-leading-icon-color',
+  // go/keep-sorted end
+);
+
+$_default: (
+  'md-sys-color': md-sys-color.values-light(),
+  'md-sys-elevation': md-sys-elevation.values(),
+  'md-sys-shape': md-sys-shape.values(),
+  'md-sys-state': md-sys-state.values(),
+  'md-sys-typescale': md-sys-typescale.values(),
 );
 
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
   $tokens: md-comp-assist-chip.values($deps, $exclude-hardcoded-values);
+  @each $old-token, $new-token in $_renamed-tokens {
+    $tokens: map.set($tokens, $new-token, map.get($tokens, $old-token));
+    $tokens: map.remove($tokens, $old-token);
+  }
   $tokens: map.remove($tokens, $_unsupported-tokens...);
   @each $token, $value in $tokens {
     $tokens: map.set(

diff --git a/tokens/_md-comp-suggestion-chip.scss b/tokens/_md-comp-suggestion-chip.scss
@@ -16,26 +16,49 @@
 @use './v0_161/md-comp-suggestion-chip';
 // go/keep-sorted end
 
-$_default: (
-  'md-sys-color': md-sys-color.values-light(),
-  'md-sys-elevation': md-sys-elevation.values(),
-  'md-sys-shape': md-sys-shape.values(),
-  'md-sys-state': md-sys-state.values(),
-  'md-sys-typescale': md-sys-typescale.values(),
-);
-
 $_unsupported-tokens: (
+  // go/keep-sorted start
+  'dragged-leading-icon-color',
   'dragged-state-layer-color',
   'dragged-state-layer-opacity',
   'label-text-font',
   'label-text-line-height',
   'label-text-size',
   'label-text-tracking',
-  'label-text-weight'
+  'label-text-weight',
+  // go/keep-sorted end
+);
+
+$_renamed-tokens: (
+  // go/keep-sorted start
+  'with-leading-icon-disabled-leading-icon-color': 'disabled-leading-icon-color',
+  'with-leading-icon-disabled-leading-icon-opacity':
+    'disabled-leading-icon-opacity',
+  'with-leading-icon-dragged-leading-icon-color': 'dragged-leading-icon-color',
+  'with-leading-icon-focus-leading-icon-color': 'focus-leading-icon-color',
+  'with-leading-icon-hover-leading-icon-color': 'hover-leading-icon-color',
+  'with-leading-icon-leading-icon-color': 'leading-icon-color',
+  'with-leading-icon-leading-icon-size': 'leading-icon-size',
+  'with-leading-icon-pressed-leading-icon-color': 'pressed-leading-icon-color',
+  // go/keep-sorted end
+);
+
+$_default: (
+  // go/keep-sorted start
+  'md-sys-color': md-sys-color.values-light(),
+  'md-sys-elevation': md-sys-elevation.values(),
+  'md-sys-shape': md-sys-shape.values(),
+  'md-sys-state': md-sys-state.values(),
+  'md-sys-typescale': md-sys-typescale.values(),
+  // go/keep-sorted end
 );
 
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
   $tokens: md-comp-suggestion-chip.values($deps, $exclude-hardcoded-values);
+  @each $old-token, $new-token in $_renamed-tokens {
+    $tokens: map.set($tokens, $new-token, map.get($tokens, $old-token));
+    $tokens: map.remove($tokens, $old-token);
+  }
   $tokens: map.remove($tokens, $_unsupported-tokens...);
   @each $token, $value in $tokens {
     $tokens: map.set(