Skip to content

Commit 20dc5cb

Browse files
davidmartos96davidmartos96
authored
M3 - Fix Chip icon and label colors (#140573)
1 parent 1f573e0 commit 20dc5cb

File tree

9 files changed

+244
-66
lines changed

9 files changed

+244
-66
lines changed

‎dev/tools/gen_defaults/generated/used_tokens.csv‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -324,6 +324,7 @@ md.comp.filled-tonal-icon-button.toggle.unselected.pressed.state-layer.color,
324324
md.comp.filled-tonal-icon-button.unselected.container.color,
325325
md.comp.filter-chip.container.shape,
326326
md.comp.filter-chip.container.surface-tint-layer.color,
327+
md.comp.filter-chip.disabled.label-text.color,
327328
md.comp.filter-chip.elevated.container.elevation,
328329
md.comp.filter-chip.elevated.container.shadow-color,
329330
md.comp.filter-chip.elevated.disabled.container.color,
@@ -340,10 +341,15 @@ md.comp.filter-chip.flat.selected.container.color,
340341
md.comp.filter-chip.flat.unselected.outline.color,
341342
md.comp.filter-chip.flat.unselected.outline.width,
342343
md.comp.filter-chip.label-text.text-style,
344+
md.comp.filter-chip.selected.label-text.color,
345+
md.comp.filter-chip.unselected.label-text.color,
343346
md.comp.filter-chip.with-icon.icon.size,
344347
md.comp.filter-chip.with-leading-icon.disabled.leading-icon.color,
345348
md.comp.filter-chip.with-leading-icon.selected.leading-icon.color,
349+
md.comp.filter-chip.with-leading-icon.unselected.leading-icon.color,
350+
md.comp.filter-chip.with-trailing-icon.disabled.trailing-icon.color,
346351
md.comp.filter-chip.with-trailing-icon.selected.trailing-icon.color,
352+
md.comp.filter-chip.with-trailing-icon.unselected.trailing-icon.color,
347353
md.comp.full-screen-dialog.container.color,
348354
md.comp.icon-button.disabled.icon.color,
349355
md.comp.icon-button.disabled.icon.opacity,
@@ -366,17 +372,24 @@ md.comp.icon-button.unselected.pressed.state-layer.color,
366372
md.comp.icon-button.unselected.pressed.state-layer.opacity,
367373
md.comp.input-chip.container.elevation,
368374
md.comp.input-chip.container.shape,
375+
md.comp.input-chip.disabled.label-text.color,
369376
md.comp.input-chip.disabled.selected.container.color,
370377
md.comp.input-chip.disabled.selected.container.opacity,
371378
md.comp.input-chip.disabled.unselected.outline.color,
372379
md.comp.input-chip.disabled.unselected.outline.opacity,
373380
md.comp.input-chip.label-text.text-style,
374381
md.comp.input-chip.selected.container.color,
382+
md.comp.input-chip.selected.label-text.color,
383+
md.comp.input-chip.unselected.label-text.color,
375384
md.comp.input-chip.unselected.outline.color,
376385
md.comp.input-chip.unselected.outline.width,
377386
md.comp.input-chip.with-leading-icon.disabled.leading-icon.color,
378387
md.comp.input-chip.with-leading-icon.leading-icon.size,
388+
md.comp.input-chip.with-leading-icon.selected.leading-icon.color,
389+
md.comp.input-chip.with-leading-icon.unselected.leading-icon.color,
390+
md.comp.input-chip.with-trailing-icon.disabled.trailing-icon.color,
379391
md.comp.input-chip.with-trailing-icon.selected.trailing-icon.color,
392+
md.comp.input-chip.with-trailing-icon.unselected.trailing-icon.color,
380393
md.comp.linear-progress-indicator.active-indicator.color,
381394
md.comp.linear-progress-indicator.track.color,
382395
md.comp.linear-progress-indicator.track.height,

‎dev/tools/gen_defaults/lib/filter_chip_template.dart‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,13 @@ class _${blockName}DefaultsM3 extends ChipThemeData {
4343
double? get pressElevation => ${elevation("$tokenGroup$elevatedVariant.pressed.container")};
4444
4545
@override
46-
TextStyle? get labelStyle => ${textStyle("$tokenGroup.label-text")};
46+
TextStyle? get labelStyle => ${textStyle("$tokenGroup.label-text")}?.copyWith(
47+
color: isEnabled
48+
? isSelected
49+
? ${color("$tokenGroup.selected.label-text.color")}
50+
: ${color("$tokenGroup.unselected.label-text.color")}
51+
: ${color("$tokenGroup.disabled.label-text.color")},
52+
);
4753
4854
@override
4955
MaterialStateProperty<Color?>? get color =>
@@ -77,10 +83,18 @@ class _${blockName}DefaultsM3 extends ChipThemeData {
7783
Color? get surfaceTintColor => ${colorOrTransparent("$tokenGroup.container.surface-tint-layer.color")};
7884
7985
@override
80-
Color? get checkmarkColor => ${color("$tokenGroup.with-leading-icon.selected.leading-icon.color")};
86+
Color? get checkmarkColor => isEnabled
87+
? isSelected
88+
? ${color("$tokenGroup.with-leading-icon.selected.leading-icon.color")}
89+
: ${color("$tokenGroup.with-leading-icon.unselected.leading-icon.color")}
90+
: ${color("$tokenGroup.with-leading-icon.disabled.leading-icon.color")};
8191
8292
@override
83-
Color? get deleteIconColor => ${color("$tokenGroup.with-trailing-icon.selected.trailing-icon.color")};
93+
Color? get deleteIconColor => isEnabled
94+
? isSelected
95+
? ${color("$tokenGroup.with-trailing-icon.selected.trailing-icon.color")}
96+
: ${color("$tokenGroup.with-trailing-icon.unselected.trailing-icon.color")}
97+
: ${color("$tokenGroup.with-trailing-icon.disabled.trailing-icon.color")};
8498
8599
@override
86100
BorderSide? get side => _chipVariant == _ChipVariant.flat && !isSelected
@@ -92,7 +106,9 @@ class _${blockName}DefaultsM3 extends ChipThemeData {
92106
@override
93107
IconThemeData? get iconTheme => IconThemeData(
94108
color: isEnabled
95-
? ${color("$tokenGroup.with-icon.icon.color")}
109+
? isSelected
110+
? ${color("$tokenGroup.with-leading-icon.selected.leading-icon.color")}
111+
: ${color("$tokenGroup.with-leading-icon.unselected.leading-icon.color")}
96112
: ${color("$tokenGroup.with-leading-icon.disabled.leading-icon.color")},
97113
size: ${getToken("$tokenGroup.with-icon.icon.size")},
98114
);

‎dev/tools/gen_defaults/lib/input_chip_template.dart‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,13 @@ class _${blockName}DefaultsM3 extends ChipThemeData {
3030
late final TextTheme _textTheme = Theme.of(context).textTheme;
3131
3232
@override
33-
TextStyle? get labelStyle => ${textStyle("$tokenGroup.label-text")};
33+
TextStyle? get labelStyle => ${textStyle("$tokenGroup.label-text")}?.copyWith(
34+
color: isEnabled
35+
? isSelected
36+
? ${color("$tokenGroup.selected.label-text.color")}
37+
: ${color("$tokenGroup.unselected.label-text.color")}
38+
: ${color("$tokenGroup.disabled.label-text.color")},
39+
);
3440
3541
@override
3642
MaterialStateProperty<Color?>? get color =>
@@ -54,10 +60,18 @@ class _${blockName}DefaultsM3 extends ChipThemeData {
5460
Color? get surfaceTintColor => ${colorOrTransparent("$tokenGroup.container.surface-tint-layer.color")};
5561
5662
@override
57-
Color? get checkmarkColor => ${color("$tokenGroup.with-icon.selected.icon.color")};
63+
Color? get checkmarkColor => isEnabled
64+
? isSelected
65+
? ${color("$tokenGroup.with-leading-icon.selected.leading-icon.color")}
66+
: ${color("$tokenGroup.with-leading-icon.unselected.leading-icon.color")}
67+
: ${color("$tokenGroup.with-leading-icon.disabled.leading-icon.color")};
5868
5969
@override
60-
Color? get deleteIconColor => ${color("$tokenGroup.with-trailing-icon.selected.trailing-icon.color")};
70+
Color? get deleteIconColor => isEnabled
71+
? isSelected
72+
? ${color("$tokenGroup.with-trailing-icon.selected.trailing-icon.color")}
73+
: ${color("$tokenGroup.with-trailing-icon.unselected.trailing-icon.color")}
74+
: ${color("$tokenGroup.with-trailing-icon.disabled.trailing-icon.color")};
6175
6276
@override
6377
BorderSide? get side => !isSelected
@@ -69,7 +83,9 @@ class _${blockName}DefaultsM3 extends ChipThemeData {
6983
@override
7084
IconThemeData? get iconTheme => IconThemeData(
7185
color: isEnabled
72-
? ${color("$tokenGroup.with-leading-icon.leading-icon.color")}
86+
? isSelected
87+
? ${color("$tokenGroup.with-leading-icon.selected.leading-icon.color")}
88+
: ${color("$tokenGroup.with-leading-icon.unselected.leading-icon.color")}
7389
: ${color("$tokenGroup.with-leading-icon.disabled.leading-icon.color")},
7490
size: ${getToken("$tokenGroup.with-leading-icon.leading-icon.size")},
7591
);

‎packages/flutter/lib/src/material/choice_chip.dart‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -272,7 +272,13 @@ class _ChoiceChipDefaultsM3 extends ChipThemeData {
272272
double? get pressElevation => 1.0;
273273

274274
@override
275-
TextStyle? get labelStyle => _textTheme.labelLarge;
275+
TextStyle? get labelStyle => _textTheme.labelLarge?.copyWith(
276+
color: isEnabled
277+
? isSelected
278+
? _colors.onSecondaryContainer
279+
: _colors.onSurfaceVariant
280+
: _colors.onSurface,
281+
);
276282

277283
@override
278284
MaterialStateProperty<Color?>? get color =>
@@ -306,10 +312,18 @@ class _ChoiceChipDefaultsM3 extends ChipThemeData {
306312
Color? get surfaceTintColor => _colors.surfaceTint;
307313

308314
@override
309-
Color? get checkmarkColor => _colors.onSecondaryContainer;
315+
Color? get checkmarkColor => isEnabled
316+
? isSelected
317+
? _colors.onSecondaryContainer
318+
: _colors.primary
319+
: _colors.onSurface;
310320

311321
@override
312-
Color? get deleteIconColor => _colors.onSecondaryContainer;
322+
Color? get deleteIconColor => isEnabled
323+
? isSelected
324+
? _colors.onSecondaryContainer
325+
: _colors.onSurfaceVariant
326+
: _colors.onSurface;
313327

314328
@override
315329
BorderSide? get side => _chipVariant == _ChipVariant.flat && !isSelected
@@ -321,7 +335,9 @@ class _ChoiceChipDefaultsM3 extends ChipThemeData {
321335
@override
322336
IconThemeData? get iconTheme => IconThemeData(
323337
color: isEnabled
324-
? null
338+
? isSelected
339+
? _colors.onSecondaryContainer
340+
: _colors.primary
325341
: _colors.onSurface,
326342
size: 18.0,
327343
);

‎packages/flutter/lib/src/material/filter_chip.dart‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -298,7 +298,13 @@ class _FilterChipDefaultsM3 extends ChipThemeData {
298298
double? get pressElevation => 1.0;
299299

300300
@override
301-
TextStyle? get labelStyle => _textTheme.labelLarge;
301+
TextStyle? get labelStyle => _textTheme.labelLarge?.copyWith(
302+
color: isEnabled
303+
? isSelected
304+
? _colors.onSecondaryContainer
305+
: _colors.onSurfaceVariant
306+
: _colors.onSurface,
307+
);
302308

303309
@override
304310
MaterialStateProperty<Color?>? get color =>
@@ -332,10 +338,18 @@ class _FilterChipDefaultsM3 extends ChipThemeData {
332338
Color? get surfaceTintColor => _colors.surfaceTint;
333339

334340
@override
335-
Color? get checkmarkColor => _colors.onSecondaryContainer;
341+
Color? get checkmarkColor => isEnabled
342+
? isSelected
343+
? _colors.onSecondaryContainer
344+
: _colors.primary
345+
: _colors.onSurface;
336346

337347
@override
338-
Color? get deleteIconColor => _colors.onSecondaryContainer;
348+
Color? get deleteIconColor => isEnabled
349+
? isSelected
350+
? _colors.onSecondaryContainer
351+
: _colors.onSurfaceVariant
352+
: _colors.onSurface;
339353

340354
@override
341355
BorderSide? get side => _chipVariant == _ChipVariant.flat && !isSelected
@@ -347,7 +361,9 @@ class _FilterChipDefaultsM3 extends ChipThemeData {
347361
@override
348362
IconThemeData? get iconTheme => IconThemeData(
349363
color: isEnabled
350-
? null
364+
? isSelected
365+
? _colors.onSecondaryContainer
366+
: _colors.primary
351367
: _colors.onSurface,
352368
size: 18.0,
353369
);

‎packages/flutter/lib/src/material/input_chip.dart‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -263,7 +263,13 @@ class _InputChipDefaultsM3 extends ChipThemeData {
263263
late final TextTheme _textTheme = Theme.of(context).textTheme;
264264

265265
@override
266-
TextStyle? get labelStyle => _textTheme.labelLarge;
266+
TextStyle? get labelStyle => _textTheme.labelLarge?.copyWith(
267+
color: isEnabled
268+
? isSelected
269+
? _colors.onSecondaryContainer
270+
: _colors.onSurfaceVariant
271+
: _colors.onSurface,
272+
);
267273

268274
@override
269275
MaterialStateProperty<Color?>? get color =>
@@ -287,10 +293,18 @@ class _InputChipDefaultsM3 extends ChipThemeData {
287293
Color? get surfaceTintColor => Colors.transparent;
288294

289295
@override
290-
Color? get checkmarkColor => null;
296+
Color? get checkmarkColor => isEnabled
297+
? isSelected
298+
? _colors.primary
299+
: _colors.onSurfaceVariant
300+
: _colors.onSurface;
291301

292302
@override
293-
Color? get deleteIconColor => _colors.onSecondaryContainer;
303+
Color? get deleteIconColor => isEnabled
304+
? isSelected
305+
? _colors.onSecondaryContainer
306+
: _colors.onSurfaceVariant
307+
: _colors.onSurface;
294308

295309
@override
296310
BorderSide? get side => !isSelected
@@ -302,7 +316,9 @@ class _InputChipDefaultsM3 extends ChipThemeData {
302316
@override
303317
IconThemeData? get iconTheme => IconThemeData(
304318
color: isEnabled
305-
? null
319+
? isSelected
320+
? _colors.primary
321+
: _colors.onSurfaceVariant
306322
: _colors.onSurface,
307323
size: 18.0,
308324
);

‎packages/flutter/test/material/choice_chip_test.dart‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,7 @@ void main() {
204204
// Test default label style.
205205
expect(
206206
getLabelStyle(tester, label).style.color!.value,
207-
theme.textTheme.labelLarge!.color!.value,
207+
theme.colorScheme.onSurfaceVariant.value,
208208
);
209209

210210
Material chipMaterial = getMaterial(tester);
@@ -339,7 +339,7 @@ void main() {
339339
// Test default label style.
340340
expect(
341341
getLabelStyle(tester, label).style.color!.value,
342-
theme.textTheme.labelLarge!.color!.value,
342+
theme.colorScheme.onSurfaceVariant.value,
343343
);
344344

345345
Material chipMaterial = getMaterial(tester);
@@ -691,8 +691,11 @@ void main() {
691691
});
692692

693693
testWidgets('ChoiceChip uses provided iconTheme', (WidgetTester tester) async {
694+
final ThemeData theme = ThemeData();
695+
694696
Widget buildChip({ IconThemeData? iconTheme }) {
695697
return MaterialApp(
698+
theme: theme,
696699
home: Material(
697700
child: ChoiceChip(
698701
iconTheme: iconTheme,
@@ -708,7 +711,7 @@ void main() {
708711
// Test default icon theme.
709712
await tester.pumpWidget(buildChip());
710713

711-
expect(getIconData(tester).color, ThemeData().iconTheme.color);
714+
expect(getIconData(tester).color, theme.colorScheme.primary);
712715

713716
// Test provided icon theme.
714717
await tester.pumpWidget(buildChip(iconTheme: const IconThemeData(color: Color(0xff00ff00))));

0 commit comments

Comments
 (0)