mirror of
https://github.com/material-components/material-web.git
synced 2024-08-17 09:30:27 +03:00
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
This commit is contained in:
parent
6a0d1b8440
commit
c9e8de0207
@ -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);
|
||||
}
|
||||
|
@ -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) {
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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,
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -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',
|
||||
|
@ -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',
|
||||
|
@ -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',
|
||||
|
@ -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',
|
||||
|
Loading…
Reference in New Issue
Block a user