feat(chips): add tokens to customize padding

asyncliz · copybara-github · commit c9e8de0207f1 · 2023-12-07T16:19:41.000-08:00
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
diff --git a/chips/internal/_shared.scss b/chips/internal/_shared.scss
@@ -89,16 +89,19 @@
     border: none;
     border-radius: inherit;
     display: flex;
-    gap: 8px;
     outline: none;
     padding: 0;
     position: relative;
     text-decoration: none;
   }
 
   .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);
   }
diff --git a/chips/internal/_trailing-icon.scss b/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) {
diff --git a/chips/internal/chip.ts b/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;
+  }
 }
diff --git a/chips/internal/filter-chip.ts b/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,
     };
   }
 
diff --git a/tokens/_md-comp-assist-chip.scss b/tokens/_md-comp-assist-chip.scss
@@ -42,19 +42,23 @@ $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',
   'label-text-line-height',
   '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',
diff --git a/tokens/_md-comp-filter-chip.scss b/tokens/_md-comp-filter-chip.scss
@@ -49,13 +49,15 @@ $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',
   'label-text-line-height',
   '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',
diff --git a/tokens/_md-comp-input-chip.scss b/tokens/_md-comp-input-chip.scss
@@ -42,13 +42,15 @@ $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',
   'label-text-line-height',
   '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',
diff --git a/tokens/_md-comp-suggestion-chip.scss b/tokens/_md-comp-suggestion-chip.scss
@@ -42,19 +42,23 @@ $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',
   'label-text-line-height',
   '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',

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,8 @@`
`11`	`11`	`.trailing.action {`
`12`	`12`	`align-items: center;`
`13`	`13`	`justify-content: center;`
`14`		`- padding: 0 8px;`
	`14`	`+ padding-inline-start: var(--_icon-label-space);`
	`15`	`+ padding-inline-end: var(--_with-trailing-icon-trailing-space);`
`15`	`16`	`}`
`16`	`17`
`17`	`18`	`.trailing.action :is(md-ripple, md-focus-ring) {`
Original file line number	Diff line number	Diff line change
`@@ -40,6 +40,7 @@ export class FilterChip extends MultiActionChip {`
`40`	`40`	`elevated: this.elevated,`
`41`	`41`	`selected: this.selected,`
`42`	`42`	`'has-trailing': this.removable,`
	`43`	`+ 'has-icon': this.hasIcon \|\| this.selected,`
`43`	`44`	`};`
`44`	`45`	`}`
`45`	`46`