Skip to content

Commit 44e0fec

Browse files
committed
fix up styling
1 parent 8ad34b7 commit 44e0fec

File tree

2 files changed

+30
-11
lines changed

2 files changed

+30
-11
lines changed

src/material/chips/chip-row.ts

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -41,16 +41,16 @@ export interface MatChipEditedEvent extends MatChipEvent {
4141
styleUrl: 'chip.css',
4242
host: {
4343
'class': 'mat-mdc-chip mat-mdc-chip-row mdc-evolution-chip',
44-
'[class.mat-mdc-chip-with-avatar]': 'leadingIcon',
44+
'[class.mat-mdc-chip-with-avatar]': '_hasLeadingIcon()',
4545
'[class.mat-mdc-chip-disabled]': 'disabled',
4646
'[class.mat-mdc-chip-editing]': '_isEditing',
4747
'[class.mat-mdc-chip-editable]': 'editable',
4848
'[class.mdc-evolution-chip--disabled]': 'disabled',
49-
'[class.mdc-evolution-chip--with-leading-action]': '!!editIcon',
49+
'[class.mdc-evolution-chip--with-leading-action]': '_hasLeadingActionIcon()',
5050
'[class.mdc-evolution-chip--with-trailing-action]': '_hasTrailingIcon()',
51-
'[class.mdc-evolution-chip--with-primary-graphic]': 'leadingIcon',
52-
'[class.mdc-evolution-chip--with-primary-icon]': 'leadingIcon',
53-
'[class.mdc-evolution-chip--with-avatar]': 'leadingIcon',
51+
'[class.mdc-evolution-chip--with-primary-graphic]': '_hasLeadingIcon()',
52+
'[class.mdc-evolution-chip--with-primary-icon]': '_hasLeadingIcon()',
53+
'[class.mdc-evolution-chip--with-avatar]': '_hasLeadingIcon()',
5454
'[class.mat-mdc-chip-highlighted]': 'highlighted',
5555
'[class.mat-mdc-chip-with-trailing-icon]': '_hasTrailingIcon()',
5656
'[id]': 'id',
@@ -108,6 +108,16 @@ export class MatChipRow extends MatChip implements AfterViewInit {
108108
});
109109
}
110110

111+
protected _hasLeadingActionIcon() {
112+
// The leading action (edit) icon is hidden while editing.
113+
return !this._isEditing && !!this.editIcon;
114+
}
115+
116+
protected _hasLeadingIcon() {
117+
// The leading icon is hidden while editing.
118+
return !this._isEditing && !!this.leadingIcon;
119+
}
120+
111121
override _hasTrailingIcon() {
112122
// The trailing icon is hidden while editing.
113123
return !this._isEditing && super._hasTrailingIcon();

src/material/chips/chip.scss

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -136,8 +136,14 @@ $fallbacks: m3-chip.get-tokens(m3-system.$theme-with-system-vars);
136136

137137
// Moved out into variables, because the selectors are too long.
138138
$with-graphic: '.mdc-evolution-chip--with-primary-graphic';
139+
$with-leading: '.mdc-evolution-chip--with-leading-action';
139140
$with-trailing: '.mdc-evolution-chip--with-trailing-action';
140141

142+
.mat-mdc-standard-chip#{$with-leading} & {
143+
padding-left: 0;
144+
padding-right: $_action-padding;
145+
}
146+
141147
.mat-mdc-standard-chip#{$with-trailing} & {
142148
padding-left: $_action-padding;
143149
padding-right: 0;
@@ -148,6 +154,11 @@ $fallbacks: m3-chip.get-tokens(m3-system.$theme-with-system-vars);
148154
padding-right: $_action-padding;
149155
}
150156

157+
.mat-mdc-standard-chip#{$with-leading}#{$with-trailing} & {
158+
padding-left: 0;
159+
padding-right: 0;
160+
}
161+
151162
.mat-mdc-standard-chip#{$with-graphic}#{$with-trailing} & {
152163
padding-left: 0;
153164
padding-right: 0;
@@ -207,7 +218,6 @@ $fallbacks: m3-chip.get-tokens(m3-system.$theme-with-system-vars);
207218
padding-right: $_trailing-action-padding;
208219
}
209220

210-
211221
.mdc-evolution-chip--with-avatar#{$with-graphic}#{$with-trailing} & {
212222
padding-left: $_avatar-trailing-padding;
213223
padding-right: $_avatar-trailing-padding;
@@ -306,15 +316,14 @@ $fallbacks: m3-chip.get-tokens(m3-system.$theme-with-system-vars);
306316
padding-right: $_avatar-trailing-padding;
307317
}
308318

309-
.mdc-evolution-chip--with-avatar#{$with-graphic}#{$with-leading} & {
310-
padding-left: 0;
311-
padding-right: $_avatar-trailing-padding;
312-
}
313-
314319
[dir='rtl'] .mdc-evolution-chip--with-avatar#{$with-graphic}#{$with-trailing} & {
315320
padding-left: $_avatar-trailing-padding;
316321
padding-right: $_avatar-leading-padding;
317322
}
323+
324+
.mdc-evolution-chip--with-avatar#{$with-graphic}#{$with-leading} & {
325+
padding-left: 0;
326+
}
318327
}
319328

320329
.mdc-evolution-chip__checkmark {

0 commit comments

Comments
 (0)