Skip to content

Commit 7e02a15

Browse files
asynclizcopybara-github
asyncliz
authored and
copybara-github
committed
feat(chips): add icon support
PiperOrigin-RevId: 518397757
1 parent eed1abd commit 7e02a15

File tree

4 files changed

+113
-23
lines changed

4 files changed

+113
-23
lines changed

‎chips/lib/_shared.scss‎

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
}
4242

4343
.container {
44-
align-items: center;
44+
align-items: baseline;
4545
appearance: none;
4646
background: none;
4747
border: none;
@@ -51,7 +51,7 @@
5151
gap: 8px;
5252
height: 100%;
5353
outline: none;
54-
padding: 0 16px;
54+
padding: 0 8px;
5555
position: relative;
5656
text-decoration: none;
5757
width: 100%;
@@ -132,8 +132,11 @@
132132
}
133133

134134
.label {
135+
align-items: center;
135136
color: var(--_label-text-color);
137+
display: flex;
136138
font: var(--_label-text-type);
139+
height: 100%;
137140
text-overflow: ellipsis;
138141
user-select: none;
139142
white-space: nowrap;
@@ -143,4 +146,38 @@
143146
color: var(--_disabled-label-text-color);
144147
opacity: var(--_disabled-label-text-opacity);
145148
}
149+
150+
.icon {
151+
align-self: center;
152+
}
153+
154+
.icon ::slotted(*) {
155+
font-size: inherit;
156+
height: 100%;
157+
width: 100%;
158+
}
159+
160+
.icon.leading {
161+
color: var(--_leading-icon-color);
162+
font-size: var(--_leading-icon-size);
163+
max-height: var(--_leading-icon-size);
164+
max-width: var(--_leading-icon-size);
165+
}
166+
167+
:hover .icon.leading {
168+
color: var(--_hover-leading-icon-color);
169+
}
170+
171+
:focus .icon.leading {
172+
color: var(--_focus-leading-icon-color);
173+
}
174+
175+
:active .icon.leading {
176+
color: var(--_pressed-leading-icon-color);
177+
}
178+
179+
.disabled .icon.leading {
180+
color: var(--_disabled-leading-icon-color);
181+
opacity: var(--_disabled-leading-icon-opacity);
182+
}
146183
}

‎chips/lib/chip.ts‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import '../../elevation/elevation.js';
88
import '../../focus/focus-ring.js';
99
import '../../ripple/ripple.js';
1010

11-
import {html, LitElement, nothing} from 'lit';
11+
import {html, LitElement, nothing, TemplateResult} from 'lit';
1212
import {property, queryAsync, state} from 'lit/decorators.js';
1313
import {classMap} from 'lit/directives/class-map.js';
1414
import {when} from 'lit/directives/when.js';
@@ -52,11 +52,22 @@ export class Chip extends LitElement {
5252
<md-elevation shadow=${this.elevated} surface></md-elevation>
5353
${when(this.showRipple, this.renderRipple)}
5454
<md-focus-ring .visible=${this.showFocusRing}></md-focus-ring>
55-
<div class="label">${this.label}</div>
55+
<span class="icon leading">
56+
<slot name="leading-icon"></slot>
57+
</span>
58+
<span class="label">${this.label}</span>
59+
<span class="icon trailing">
60+
${this.renderTrailingIcon?.() || nothing}
61+
</span>
5662
</${button}>
5763
`;
5864
}
5965

66+
// Not all chip variants have a trailing icon. We still render a wrapper
67+
// <span class="icon trailing"> to compute the correct padding + gap of the
68+
// button.
69+
protected renderTrailingIcon?: () => TemplateResult;
70+
6071
private readonly getRipple = () => { // bind to this
6172
this.showRipple = true;
6273
return this.ripple;

‎tokens/_md-comp-assist-chip.scss‎

Lines changed: 29 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
//
21
// Copyright 2023 Google LLC
32
// SPDX-License-Identifier: Apache-2.0
43
//
4+
//
55

66
// go/keep-sorted start
77
@use 'sass:map';
@@ -16,26 +16,45 @@
1616
@use './v0_161/md-comp-assist-chip';
1717
// go/keep-sorted end
1818

19-
$_default: (
20-
'md-sys-color': md-sys-color.values-light(),
21-
'md-sys-elevation': md-sys-elevation.values(),
22-
'md-sys-shape': md-sys-shape.values(),
23-
'md-sys-state': md-sys-state.values(),
24-
'md-sys-typescale': md-sys-typescale.values(),
25-
);
26-
2719
$_unsupported-tokens: (
20+
// go/keep-sorted start
21+
'dragged-leading-icon-color',
2822
'dragged-state-layer-color',
2923
'dragged-state-layer-opacity',
3024
'label-text-font',
3125
'label-text-line-height',
3226
'label-text-size',
3327
'label-text-tracking',
34-
'label-text-weight'
28+
'label-text-weight' // go/keep-sorted end
29+
);
30+
31+
$_renamed-tokens: (
32+
// go/keep-sorted start
33+
'with-icon-disabled-icon-color': 'disabled-leading-icon-color',
34+
'with-icon-disabled-icon-opacity': 'disabled-leading-icon-opacity',
35+
'with-icon-dragged-icon-color': 'dragged-leading-icon-color',
36+
'with-icon-focus-icon-color': 'focus-leading-icon-color',
37+
'with-icon-hover-icon-color': 'hover-leading-icon-color',
38+
'with-icon-icon-color': 'leading-icon-color',
39+
'with-icon-icon-size': 'leading-icon-size',
40+
'with-icon-pressed-icon-color': 'pressed-leading-icon-color',
41+
// go/keep-sorted end
42+
);
43+
44+
$_default: (
45+
'md-sys-color': md-sys-color.values-light(),
46+
'md-sys-elevation': md-sys-elevation.values(),
47+
'md-sys-shape': md-sys-shape.values(),
48+
'md-sys-state': md-sys-state.values(),
49+
'md-sys-typescale': md-sys-typescale.values(),
3550
);
3651

3752
@function values($deps: $_default, $exclude-hardcoded-values: false) {
3853
$tokens: md-comp-assist-chip.values($deps, $exclude-hardcoded-values);
54+
@each $old-token, $new-token in $_renamed-tokens {
55+
$tokens: map.set($tokens, $new-token, map.get($tokens, $old-token));
56+
$tokens: map.remove($tokens, $old-token);
57+
}
3958
$tokens: map.remove($tokens, $_unsupported-tokens...);
4059
@each $token, $value in $tokens {
4160
$tokens: map.set(

‎tokens/_md-comp-suggestion-chip.scss‎

Lines changed: 32 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,26 +16,49 @@
1616
@use './v0_161/md-comp-suggestion-chip';
1717
// go/keep-sorted end
1818

19-
$_default: (
20-
'md-sys-color': md-sys-color.values-light(),
21-
'md-sys-elevation': md-sys-elevation.values(),
22-
'md-sys-shape': md-sys-shape.values(),
23-
'md-sys-state': md-sys-state.values(),
24-
'md-sys-typescale': md-sys-typescale.values(),
25-
);
26-
2719
$_unsupported-tokens: (
20+
// go/keep-sorted start
21+
'dragged-leading-icon-color',
2822
'dragged-state-layer-color',
2923
'dragged-state-layer-opacity',
3024
'label-text-font',
3125
'label-text-line-height',
3226
'label-text-size',
3327
'label-text-tracking',
34-
'label-text-weight'
28+
'label-text-weight',
29+
// go/keep-sorted end
30+
);
31+
32+
$_renamed-tokens: (
33+
// go/keep-sorted start
34+
'with-leading-icon-disabled-leading-icon-color': 'disabled-leading-icon-color',
35+
'with-leading-icon-disabled-leading-icon-opacity':
36+
'disabled-leading-icon-opacity',
37+
'with-leading-icon-dragged-leading-icon-color': 'dragged-leading-icon-color',
38+
'with-leading-icon-focus-leading-icon-color': 'focus-leading-icon-color',
39+
'with-leading-icon-hover-leading-icon-color': 'hover-leading-icon-color',
40+
'with-leading-icon-leading-icon-color': 'leading-icon-color',
41+
'with-leading-icon-leading-icon-size': 'leading-icon-size',
42+
'with-leading-icon-pressed-leading-icon-color': 'pressed-leading-icon-color',
43+
// go/keep-sorted end
44+
);
45+
46+
$_default: (
47+
// go/keep-sorted start
48+
'md-sys-color': md-sys-color.values-light(),
49+
'md-sys-elevation': md-sys-elevation.values(),
50+
'md-sys-shape': md-sys-shape.values(),
51+
'md-sys-state': md-sys-state.values(),
52+
'md-sys-typescale': md-sys-typescale.values(),
53+
// go/keep-sorted end
3554
);
3655

3756
@function values($deps: $_default, $exclude-hardcoded-values: false) {
3857
$tokens: md-comp-suggestion-chip.values($deps, $exclude-hardcoded-values);
58+
@each $old-token, $new-token in $_renamed-tokens {
59+
$tokens: map.set($tokens, $new-token, map.get($tokens, $old-token));
60+
$tokens: map.remove($tokens, $old-token);
61+
}
3962
$tokens: map.remove($tokens, $_unsupported-tokens...);
4063
@each $token, $value in $tokens {
4164
$tokens: map.set(

0 commit comments

Comments
 (0)