diff --git a/chips/internal/_shared.scss b/chips/internal/_shared.scss
index 7a439be19..df0f56a7c 100644
--- a/chips/internal/_shared.scss
+++ b/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);
}
diff --git a/chips/internal/_trailing-icon.scss b/chips/internal/_trailing-icon.scss
index 233f61ab0..9bde3704a 100644
--- 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
index e6fe46b13..ae71a92ad 100644
--- 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``;
+ return html``;
}
protected abstract renderPrimaryAction(content: unknown): unknown;
@@ -123,4 +133,9 @@ export abstract class Chip extends LitElement {
`;
}
+
+ 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
index 9d6125422..5d04bb5c4 100644
--- 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
index 6c1431e84..79eb49dc4 100644
--- a/tokens/_md-comp-assist-chip.scss
+++ b/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',
diff --git a/tokens/_md-comp-filter-chip.scss b/tokens/_md-comp-filter-chip.scss
index 7116b6ce8..f3567511a 100644
--- a/tokens/_md-comp-filter-chip.scss
+++ b/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',
diff --git a/tokens/_md-comp-input-chip.scss b/tokens/_md-comp-input-chip.scss
index d9f1c0738..bd04ad375 100644
--- a/tokens/_md-comp-input-chip.scss
+++ b/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',
diff --git a/tokens/_md-comp-suggestion-chip.scss b/tokens/_md-comp-suggestion-chip.scss
index 0a762a4c4..385ac6e1b 100644
--- a/tokens/_md-comp-suggestion-chip.scss
+++ b/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',