Skip to content

Commit

Permalink
feat(chips): add tokens to customize padding
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@asyncLiz
asyncLiz authored and Copybara-Service committed Dec 8, 2023
1 parent 6a0d1b8 commit c9e8de0
Show file tree
Hide file tree
Showing 8 changed files with 80 additions and 5 deletions.
14 changes: 11 additions & 3 deletions chips/internal/_shared.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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);
}
Expand Down
3 changes: 2 additions & 1 deletion chips/internal/_trailing-icon.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
17 changes: 16 additions & 1 deletion chips/internal/chip.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -90,6 +99,7 @@ export abstract class Chip extends LitElement {
protected getContainerClasses(): ClassInfo {
return {
'disabled': this.disabled,
'has-icon': this.hasIcon,
};
}

Expand All @@ -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;
Expand All @@ -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;
}
}
1 change: 1 addition & 0 deletions chips/internal/filter-chip.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
};
}

Expand Down
11 changes: 11 additions & 0 deletions tokens/_md-comp-assist-chip.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
);

Expand Down Expand Up @@ -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',
Expand Down
14 changes: 14 additions & 0 deletions tokens/_md-comp-filter-chip.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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
);

Expand Down Expand Up @@ -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',
Expand Down
14 changes: 14 additions & 0 deletions tokens/_md-comp-input-chip.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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
);

Expand Down Expand Up @@ -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',
Expand Down
11 changes: 11 additions & 0 deletions tokens/_md-comp-suggestion-chip.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
);

Expand Down Expand Up @@ -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',
Expand Down

0 comments on commit c9e8de0

Please sign in to comment.