Skip to content
This repository was archived by the owner on Feb 22, 2023. It is now read-only.

Commit 9996126

Browse files
authored
Add proper disabled values for input chips (#120192)
* add proper disabled values for input chips * added test
1 parent cd38063 commit 9996126

File tree

3 files changed

+63
-13
lines changed

3 files changed

+63
-13
lines changed

dev/tools/gen_defaults/lib/input_chip_template.dart

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ class InputChipTemplate extends TokenTemplate {
1313
@override
1414
String generate() => '''
1515
class _${blockName}DefaultsM3 extends ChipThemeData {
16-
const _${blockName}DefaultsM3(this.context, this.isEnabled)
16+
const _${blockName}DefaultsM3(this.context, this.isEnabled, this.isSelected)
1717
: super(
1818
elevation: ${elevation("$tokenGroup$variant.container")},
1919
shape: ${shape("$tokenGroup.container")},
@@ -22,6 +22,7 @@ class _${blockName}DefaultsM3 extends ChipThemeData {
2222
2323
final BuildContext context;
2424
final bool isEnabled;
25+
final bool isSelected;
2526
2627
@override
2728
TextStyle? get labelStyle => ${textStyle("$tokenGroup.label-text")};
@@ -36,7 +37,9 @@ class _${blockName}DefaultsM3 extends ChipThemeData {
3637
Color? get surfaceTintColor => ${colorOrTransparent("$tokenGroup.container.surface-tint-layer.color")};
3738
3839
@override
39-
Color? get selectedColor => ${componentColor("$tokenGroup$variant.selected.container")};
40+
Color? get selectedColor => isEnabled
41+
? ${componentColor("$tokenGroup$variant.selected.container")}
42+
: ${componentColor("$tokenGroup$variant.disabled.selected.container")};
4043
4144
@override
4245
Color? get checkmarkColor => ${color("$tokenGroup.with-icon.selected.icon.color")};
@@ -48,9 +51,11 @@ class _${blockName}DefaultsM3 extends ChipThemeData {
4851
Color? get deleteIconColor => ${color("$tokenGroup.with-trailing-icon.selected.trailing-icon.color")};
4952
5053
@override
51-
BorderSide? get side => isEnabled
52-
? ${border('$tokenGroup$variant.unselected.outline')}
53-
: ${border('$tokenGroup$variant.disabled.unselected.outline')};
54+
BorderSide? get side => !isSelected
55+
? isEnabled
56+
? ${border('$tokenGroup$variant.unselected.outline')}
57+
: ${border('$tokenGroup$variant.disabled.unselected.outline')}
58+
: const BorderSide(color: Colors.transparent);
5459
5560
@override
5661
IconThemeData? get iconTheme => IconThemeData(

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

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -194,7 +194,7 @@ class InputChip extends StatelessWidget
194194
Widget build(BuildContext context) {
195195
assert(debugCheckHasMaterial(context));
196196
final ChipThemeData? defaults = Theme.of(context).useMaterial3
197-
? _InputChipDefaultsM3(context, isEnabled)
197+
? _InputChipDefaultsM3(context, isEnabled, selected)
198198
: null;
199199
final Widget? resolvedDeleteIcon = deleteIcon
200200
?? (Theme.of(context).useMaterial3 ? const Icon(Icons.clear, size: 18) : null);
@@ -247,7 +247,7 @@ class InputChip extends StatelessWidget
247247
// Token database version: v0_158
248248

249249
class _InputChipDefaultsM3 extends ChipThemeData {
250-
const _InputChipDefaultsM3(this.context, this.isEnabled)
250+
const _InputChipDefaultsM3(this.context, this.isEnabled, this.isSelected)
251251
: super(
252252
elevation: 0.0,
253253
shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
@@ -256,6 +256,7 @@ class _InputChipDefaultsM3 extends ChipThemeData {
256256

257257
final BuildContext context;
258258
final bool isEnabled;
259+
final bool isSelected;
259260

260261
@override
261262
TextStyle? get labelStyle => Theme.of(context).textTheme.labelLarge;
@@ -270,7 +271,9 @@ class _InputChipDefaultsM3 extends ChipThemeData {
270271
Color? get surfaceTintColor => Colors.transparent;
271272

272273
@override
273-
Color? get selectedColor => Theme.of(context).colorScheme.secondaryContainer;
274+
Color? get selectedColor => isEnabled
275+
? Theme.of(context).colorScheme.secondaryContainer
276+
: Theme.of(context).colorScheme.onSurface.withOpacity(0.12);
274277

275278
@override
276279
Color? get checkmarkColor => null;
@@ -282,9 +285,11 @@ class _InputChipDefaultsM3 extends ChipThemeData {
282285
Color? get deleteIconColor => Theme.of(context).colorScheme.onSecondaryContainer;
283286

284287
@override
285-
BorderSide? get side => isEnabled
286-
? BorderSide(color: Theme.of(context).colorScheme.outline)
287-
: BorderSide(color: Theme.of(context).colorScheme.onSurface.withOpacity(0.12));
288+
BorderSide? get side => !isSelected
289+
? isEnabled
290+
? BorderSide(color: Theme.of(context).colorScheme.outline)
291+
: BorderSide(color: Theme.of(context).colorScheme.onSurface.withOpacity(0.12))
292+
: const BorderSide(color: Colors.transparent);
288293

289294
@override
290295
IconThemeData? get iconTheme => IconThemeData(

packages/flutter/test/material/input_chip_test.dart

Lines changed: 42 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,10 @@ Widget wrapForChip({
1313
TextDirection textDirection = TextDirection.ltr,
1414
double textScaleFactor = 1.0,
1515
Brightness brightness = Brightness.light,
16+
bool useMaterial3 = false,
1617
}) {
1718
return MaterialApp(
18-
theme: ThemeData(brightness: brightness),
19+
theme: ThemeData(brightness: brightness, useMaterial3: useMaterial3),
1920
home: Directionality(
2021
textDirection: textDirection,
2122
child: MediaQuery(
@@ -26,10 +27,14 @@ Widget wrapForChip({
2627
);
2728
}
2829

29-
Widget selectedInputChip({ Color? checkmarkColor }) {
30+
Widget selectedInputChip({
31+
Color? checkmarkColor,
32+
bool enabled = false,
33+
}) {
3034
return InputChip(
3135
label: const Text('InputChip'),
3236
selected: true,
37+
isEnabled: enabled,
3338
showCheckmark: true,
3439
checkmarkColor: checkmarkColor,
3540
);
@@ -41,9 +46,11 @@ Future<void> pumpCheckmarkChip(
4146
required Widget chip,
4247
Color? themeColor,
4348
Brightness brightness = Brightness.light,
49+
bool useMaterial3 = false,
4450
}) async {
4551
await tester.pumpWidget(
4652
wrapForChip(
53+
useMaterial3: useMaterial3,
4754
brightness: brightness,
4855
child: Builder(
4956
builder: (BuildContext context) {
@@ -75,6 +82,15 @@ void expectCheckmarkColor(Finder finder, Color color) {
7582
);
7683
}
7784

85+
RenderBox getMaterialBox(WidgetTester tester) {
86+
return tester.firstRenderObject<RenderBox>(
87+
find.descendant(
88+
of: find.byType(InputChip),
89+
matching: find.byType(CustomPaint),
90+
),
91+
);
92+
}
93+
7894
void checkChipMaterialClipBehavior(WidgetTester tester, Clip clipBehavior) {
7995
final Iterable<Material> materials = tester.widgetList<Material>(find.byType(Material));
8096
// There should be two Material widgets, first Material is from the "_wrapForChip" and
@@ -238,4 +254,28 @@ void main() {
238254
await tester.pumpWidget(wrapForChip(child: const InputChip(label: label, clipBehavior: Clip.antiAlias)));
239255
checkChipMaterialClipBehavior(tester, Clip.antiAlias);
240256
});
257+
258+
testWidgets('Input chip has correct selected color when enabled - M3 defaults', (WidgetTester tester) async {
259+
final ChipThemeData material3ChipDefaults = ThemeData(useMaterial3: true).chipTheme;
260+
await pumpCheckmarkChip(
261+
tester,
262+
chip: selectedInputChip(enabled: true),
263+
useMaterial3: true,
264+
);
265+
266+
final RenderBox materialBox = getMaterialBox(tester);
267+
expect(materialBox, paints..rrect(color: material3ChipDefaults.backgroundColor));
268+
});
269+
270+
testWidgets('Input chip has correct selected color when disabled - M3 defaults', (WidgetTester tester) async {
271+
final ChipThemeData material3ChipDefaults = ThemeData(useMaterial3: true).chipTheme;
272+
await pumpCheckmarkChip(
273+
tester,
274+
chip: selectedInputChip(),
275+
useMaterial3: true,
276+
);
277+
278+
final RenderBox materialBox = getMaterialBox(tester);
279+
expect(materialBox, paints..path(color: material3ChipDefaults.disabledColor));
280+
});
241281
}

0 commit comments

Comments
 (0)