feat(chips): add tokens to customize padding

Added chip tokens for `leading-space`, `trailing-space`, `icon-label-space`, `with-leading-icon-leading-space`, and `with-trailing-icon-trailing-space`.

PiperOrigin-RevId: 588942324

chips/internal/_shared.scss

@@ -89,7 +89,6 @@
     border: none;
     border-radius: inherit;
     display: flex;
-    gap: 8px;
     outline: none;
     padding: 0;
     position: relative;
@@ -97,8 +96,12 @@
   }
 
   .primary.action {
-    padding-inline-start: 8px;
-    padding-inline-end: 16px;
+    padding-inline-start: var(--_leading-space);
+    padding-inline-end: var(--_trailing-space);
+  }
+
+  .has-icon .primary.action {
+    padding-inline-start: var(--_with-leading-icon-leading-space);
   }
 
   .touch {
@@ -190,6 +193,11 @@
     color: var(--_leading-icon-color);
   }
 
+  .leading.icon ::slotted(*),
+  .leading.icon svg {
+    margin-inline-end: var(--_icon-label-space);
+  }
+
   :where(:hover) .leading.icon {
     color: var(--_hover-leading-icon-color);
   }

chips/internal/_trailing-icon.scss

@@ -11,7 +11,8 @@
   .trailing.action {
     align-items: center;
     justify-content: center;
-    padding: 0 8px;
+    padding-inline-start: var(--_icon-label-space);
+    padding-inline-end: var(--_with-trailing-icon-trailing-space);
   }
 
   .trailing.action :is(md-ripple, md-focus-ring) {

chips/internal/chip.ts

@@ -51,6 +51,15 @@ export abstract class Chip extends LitElement {
    */
   @property() label = '';
 
+  /**
+   * Only needed for SSR.
+   *
+   * Add this attribute when a chip has a `slot="icon"` to avoid a Flash Of
+   * Unstyled Content.
+   */
+  @property({type: Boolean, reflect: true, attribute: 'has-icon'}) hasIcon =
+    false;
+
   /**
    * The `id` of the action the primary focus ring and ripple are for.
    * TODO(b/310046938): use the same id for both elements
@@ -90,6 +99,7 @@ export abstract class Chip extends LitElement {
   protected getContainerClasses(): ClassInfo {
     return {
       'disabled': this.disabled,
+      'has-icon': this.hasIcon,
     };
   }
 
@@ -109,7 +119,7 @@ export abstract class Chip extends LitElement {
   }
 
   protected renderLeadingIcon(): TemplateResult {
-    return html`<slot name="icon"></slot>`;
+    return html`<slot name="icon" @slotchange=${this.handleIconChange}></slot>`;
   }
 
   protected abstract renderPrimaryAction(content: unknown): unknown;
@@ -123,4 +133,9 @@ export abstract class Chip extends LitElement {
       <span class="touch"></span>
     `;
   }
+
+  private handleIconChange(event: Event) {
+    const slot = event.target as HTMLSlotElement;
+    this.hasIcon = slot.assignedElements({flatten: true}).length > 0;
+  }
 }

chips/internal/filter-chip.ts

@@ -40,6 +40,7 @@ export class FilterChip extends MultiActionChip {
       elevated: this.elevated,
       selected: this.selected,
       'has-trailing': this.removable,
+      'has-icon': this.hasIcon || this.selected,
     };
   }
 

tokens/_md-comp-assist-chip.scss

@@ -42,6 +42,7 @@ $supported-tokens: (
   'hover-leading-icon-color',
   'hover-state-layer-color',
   'hover-state-layer-opacity',
+  'icon-label-space',
   'icon-size',
   'label-text-color',
   'label-text-font',
@@ -49,12 +50,15 @@ $supported-tokens: (
   'label-text-size',
   'label-text-weight',
   'leading-icon-color',
+  'leading-space',
   'outline-color',
   'outline-width',
   'pressed-label-text-color',
   'pressed-leading-icon-color',
   'pressed-state-layer-color',
   'pressed-state-layer-opacity',
+  'trailing-space',
+  'with-leading-icon-leading-space',
   // go/keep-sorted end
 );
 
@@ -86,6 +90,13 @@ $_default: (
     md-comp-assist-chip.values($deps, $exclude-hardcoded-values),
     $supported-tokens: $supported-tokens,
     $unsupported-tokens: $unsupported-tokens,
+    $new-tokens: (
+      'leading-space': if($exclude-hardcoded-values, null, 16px),
+      'trailing-space': if($exclude-hardcoded-values, null, 16px),
+      'icon-label-space': if($exclude-hardcoded-values, null, 8px),
+      'with-leading-icon-leading-space':
+        if($exclude-hardcoded-values, null, 8px),
+    ),
     $renamed-tokens: (
       // Remove "flat-*" prefix (b/275577569)
       'flat-container-elevation': 'container-elevation',

tokens/_md-comp-filter-chip.scss

@@ -49,6 +49,7 @@ $supported-tokens: (
   'hover-state-layer-color',
   'hover-state-layer-opacity',
   'hover-trailing-icon-color',
+  'icon-label-space',
   'icon-size',
   'label-text-color',
   'label-text-font',
@@ -56,6 +57,7 @@ $supported-tokens: (
   'label-text-size',
   'label-text-weight',
   'leading-icon-color',
+  'leading-space',
   'outline-color',
   'outline-width',
   'pressed-label-text-color',
@@ -82,6 +84,9 @@ $supported-tokens: (
   'selected-pressed-trailing-icon-color',
   'selected-trailing-icon-color',
   'trailing-icon-color',
+  'trailing-space',
+  'with-leading-icon-leading-space',
+  'with-trailing-icon-trailing-space',
   // go/keep-sorted end
 );
 
@@ -127,6 +132,15 @@ $_default: (
     md-comp-filter-chip.values($deps, $exclude-hardcoded-values),
     $supported-tokens: $supported-tokens,
     $unsupported-tokens: $unsupported-tokens,
+    $new-tokens: (
+      'leading-space': if($exclude-hardcoded-values, null, 16px),
+      'trailing-space': if($exclude-hardcoded-values, null, 16px),
+      'icon-label-space': if($exclude-hardcoded-values, null, 8px),
+      'with-leading-icon-leading-space':
+        if($exclude-hardcoded-values, null, 8px),
+      'with-trailing-icon-trailing-space':
+        if($exclude-hardcoded-values, null, 8px),
+    ),
     $renamed-tokens: (
       // Remove "unselected-*" and "flat-*" prefix (b/275577569)
       'elevated-unselected-container-color': 'elevated-container-color',

tokens/_md-comp-input-chip.scss

@@ -42,6 +42,7 @@ $supported-tokens: (
   'hover-state-layer-color',
   'hover-state-layer-opacity',
   'hover-trailing-icon-color',
+  'icon-label-space',
   'icon-size',
   'label-text-color',
   'label-text-font',
@@ -49,6 +50,7 @@ $supported-tokens: (
   'label-text-size',
   'label-text-weight',
   'leading-icon-color',
+  'leading-space',
   'outline-color',
   'outline-width',
   'pressed-label-text-color',
@@ -75,6 +77,9 @@ $supported-tokens: (
   'selected-pressed-trailing-icon-color',
   'selected-trailing-icon-color',
   'trailing-icon-color',
+  'trailing-space',
+  'with-leading-icon-leading-space',
+  'with-trailing-icon-trailing-space',
   // go/keep-sorted end
 );
 
@@ -115,6 +120,15 @@ $_default: (
     md-comp-input-chip.values($deps, $exclude-hardcoded-values),
     $supported-tokens: $supported-tokens,
     $unsupported-tokens: $unsupported-tokens,
+    $new-tokens: (
+      'leading-space': if($exclude-hardcoded-values, null, 16px),
+      'trailing-space': if($exclude-hardcoded-values, null, 16px),
+      'icon-label-space': if($exclude-hardcoded-values, null, 8px),
+      'with-leading-icon-leading-space':
+        if($exclude-hardcoded-values, null, 8px),
+      'with-trailing-icon-trailing-space':
+        if($exclude-hardcoded-values, null, 8px),
+    ),
     $renamed-tokens: (
       // Remove "unselected-*" prefix (b/275577569)
       'disabled-unselected-outline-color': 'disabled-outline-color',

tokens/_md-comp-suggestion-chip.scss

@@ -42,6 +42,7 @@ $supported-tokens: (
   'hover-leading-icon-color',
   'hover-state-layer-color',
   'hover-state-layer-opacity',
+  'icon-label-space',
   'icon-size',
   'label-text-color',
   'label-text-font',
@@ -49,12 +50,15 @@ $supported-tokens: (
   'label-text-size',
   'label-text-weight',
   'leading-icon-color',
+  'leading-space',
   'outline-color',
   'outline-width',
   'pressed-label-text-color',
   'pressed-leading-icon-color',
   'pressed-state-layer-color',
   'pressed-state-layer-opacity',
+  'trailing-space',
+  'with-leading-icon-leading-space',
   // go/keep-sorted end
 );
 
@@ -86,6 +90,13 @@ $_default: (
     md-comp-suggestion-chip.values($deps, $exclude-hardcoded-values),
     $supported-tokens: $supported-tokens,
     $unsupported-tokens: $unsupported-tokens,
+    $new-tokens: (
+      'leading-space': if($exclude-hardcoded-values, null, 16px),
+      'trailing-space': if($exclude-hardcoded-values, null, 16px),
+      'icon-label-space': if($exclude-hardcoded-values, null, 8px),
+      'with-leading-icon-leading-space':
+        if($exclude-hardcoded-values, null, 8px),
+    ),
     $renamed-tokens: (
       // Remove "flat-*" prefix (b/275577569)
       'flat-container-elevation': 'container-elevation',