Unverified Commit 20dc5cbc authored by David Martos's avatar David Martos Committed by GitHub

M3 - Fix Chip icon and label colors (#140573)

parent 1f573e02
...@@ -324,6 +324,7 @@ md.comp.filled-tonal-icon-button.toggle.unselected.pressed.state-layer.color, ...@@ -324,6 +324,7 @@ md.comp.filled-tonal-icon-button.toggle.unselected.pressed.state-layer.color,
md.comp.filled-tonal-icon-button.unselected.container.color, md.comp.filled-tonal-icon-button.unselected.container.color,
md.comp.filter-chip.container.shape, md.comp.filter-chip.container.shape,
md.comp.filter-chip.container.surface-tint-layer.color, md.comp.filter-chip.container.surface-tint-layer.color,
md.comp.filter-chip.disabled.label-text.color,
md.comp.filter-chip.elevated.container.elevation, md.comp.filter-chip.elevated.container.elevation,
md.comp.filter-chip.elevated.container.shadow-color, md.comp.filter-chip.elevated.container.shadow-color,
md.comp.filter-chip.elevated.disabled.container.color, md.comp.filter-chip.elevated.disabled.container.color,
...@@ -340,10 +341,15 @@ md.comp.filter-chip.flat.selected.container.color, ...@@ -340,10 +341,15 @@ md.comp.filter-chip.flat.selected.container.color,
md.comp.filter-chip.flat.unselected.outline.color, md.comp.filter-chip.flat.unselected.outline.color,
md.comp.filter-chip.flat.unselected.outline.width, md.comp.filter-chip.flat.unselected.outline.width,
md.comp.filter-chip.label-text.text-style, md.comp.filter-chip.label-text.text-style,
md.comp.filter-chip.selected.label-text.color,
md.comp.filter-chip.unselected.label-text.color,
md.comp.filter-chip.with-icon.icon.size, md.comp.filter-chip.with-icon.icon.size,
md.comp.filter-chip.with-leading-icon.disabled.leading-icon.color, md.comp.filter-chip.with-leading-icon.disabled.leading-icon.color,
md.comp.filter-chip.with-leading-icon.selected.leading-icon.color, md.comp.filter-chip.with-leading-icon.selected.leading-icon.color,
md.comp.filter-chip.with-leading-icon.unselected.leading-icon.color,
md.comp.filter-chip.with-trailing-icon.disabled.trailing-icon.color,
md.comp.filter-chip.with-trailing-icon.selected.trailing-icon.color, md.comp.filter-chip.with-trailing-icon.selected.trailing-icon.color,
md.comp.filter-chip.with-trailing-icon.unselected.trailing-icon.color,
md.comp.full-screen-dialog.container.color, md.comp.full-screen-dialog.container.color,
md.comp.icon-button.disabled.icon.color, md.comp.icon-button.disabled.icon.color,
md.comp.icon-button.disabled.icon.opacity, md.comp.icon-button.disabled.icon.opacity,
...@@ -366,17 +372,24 @@ md.comp.icon-button.unselected.pressed.state-layer.color, ...@@ -366,17 +372,24 @@ md.comp.icon-button.unselected.pressed.state-layer.color,
md.comp.icon-button.unselected.pressed.state-layer.opacity, md.comp.icon-button.unselected.pressed.state-layer.opacity,
md.comp.input-chip.container.elevation, md.comp.input-chip.container.elevation,
md.comp.input-chip.container.shape, md.comp.input-chip.container.shape,
md.comp.input-chip.disabled.label-text.color,
md.comp.input-chip.disabled.selected.container.color, md.comp.input-chip.disabled.selected.container.color,
md.comp.input-chip.disabled.selected.container.opacity, md.comp.input-chip.disabled.selected.container.opacity,
md.comp.input-chip.disabled.unselected.outline.color, md.comp.input-chip.disabled.unselected.outline.color,
md.comp.input-chip.disabled.unselected.outline.opacity, md.comp.input-chip.disabled.unselected.outline.opacity,
md.comp.input-chip.label-text.text-style, md.comp.input-chip.label-text.text-style,
md.comp.input-chip.selected.container.color, md.comp.input-chip.selected.container.color,
md.comp.input-chip.selected.label-text.color,
md.comp.input-chip.unselected.label-text.color,
md.comp.input-chip.unselected.outline.color, md.comp.input-chip.unselected.outline.color,
md.comp.input-chip.unselected.outline.width, md.comp.input-chip.unselected.outline.width,
md.comp.input-chip.with-leading-icon.disabled.leading-icon.color, md.comp.input-chip.with-leading-icon.disabled.leading-icon.color,
md.comp.input-chip.with-leading-icon.leading-icon.size, md.comp.input-chip.with-leading-icon.leading-icon.size,
md.comp.input-chip.with-leading-icon.selected.leading-icon.color,
md.comp.input-chip.with-leading-icon.unselected.leading-icon.color,
md.comp.input-chip.with-trailing-icon.disabled.trailing-icon.color,
md.comp.input-chip.with-trailing-icon.selected.trailing-icon.color, md.comp.input-chip.with-trailing-icon.selected.trailing-icon.color,
md.comp.input-chip.with-trailing-icon.unselected.trailing-icon.color,
md.comp.linear-progress-indicator.active-indicator.color, md.comp.linear-progress-indicator.active-indicator.color,
md.comp.linear-progress-indicator.track.color, md.comp.linear-progress-indicator.track.color,
md.comp.linear-progress-indicator.track.height, md.comp.linear-progress-indicator.track.height,
......
...@@ -43,7 +43,13 @@ class _${blockName}DefaultsM3 extends ChipThemeData { ...@@ -43,7 +43,13 @@ class _${blockName}DefaultsM3 extends ChipThemeData {
double? get pressElevation => ${elevation("$tokenGroup$elevatedVariant.pressed.container")}; double? get pressElevation => ${elevation("$tokenGroup$elevatedVariant.pressed.container")};
@override @override
TextStyle? get labelStyle => ${textStyle("$tokenGroup.label-text")}; TextStyle? get labelStyle => ${textStyle("$tokenGroup.label-text")}?.copyWith(
color: isEnabled
? isSelected
? ${color("$tokenGroup.selected.label-text.color")}
: ${color("$tokenGroup.unselected.label-text.color")}
: ${color("$tokenGroup.disabled.label-text.color")},
);
@override @override
MaterialStateProperty<Color?>? get color => MaterialStateProperty<Color?>? get color =>
...@@ -77,10 +83,18 @@ class _${blockName}DefaultsM3 extends ChipThemeData { ...@@ -77,10 +83,18 @@ class _${blockName}DefaultsM3 extends ChipThemeData {
Color? get surfaceTintColor => ${colorOrTransparent("$tokenGroup.container.surface-tint-layer.color")}; Color? get surfaceTintColor => ${colorOrTransparent("$tokenGroup.container.surface-tint-layer.color")};
@override @override
Color? get checkmarkColor => ${color("$tokenGroup.with-leading-icon.selected.leading-icon.color")}; Color? get checkmarkColor => isEnabled
? isSelected
? ${color("$tokenGroup.with-leading-icon.selected.leading-icon.color")}
: ${color("$tokenGroup.with-leading-icon.unselected.leading-icon.color")}
: ${color("$tokenGroup.with-leading-icon.disabled.leading-icon.color")};
@override @override
Color? get deleteIconColor => ${color("$tokenGroup.with-trailing-icon.selected.trailing-icon.color")}; Color? get deleteIconColor => isEnabled
? isSelected
? ${color("$tokenGroup.with-trailing-icon.selected.trailing-icon.color")}
: ${color("$tokenGroup.with-trailing-icon.unselected.trailing-icon.color")}
: ${color("$tokenGroup.with-trailing-icon.disabled.trailing-icon.color")};
@override @override
BorderSide? get side => _chipVariant == _ChipVariant.flat && !isSelected BorderSide? get side => _chipVariant == _ChipVariant.flat && !isSelected
...@@ -92,7 +106,9 @@ class _${blockName}DefaultsM3 extends ChipThemeData { ...@@ -92,7 +106,9 @@ class _${blockName}DefaultsM3 extends ChipThemeData {
@override @override
IconThemeData? get iconTheme => IconThemeData( IconThemeData? get iconTheme => IconThemeData(
color: isEnabled color: isEnabled
? ${color("$tokenGroup.with-icon.icon.color")} ? isSelected
? ${color("$tokenGroup.with-leading-icon.selected.leading-icon.color")}
: ${color("$tokenGroup.with-leading-icon.unselected.leading-icon.color")}
: ${color("$tokenGroup.with-leading-icon.disabled.leading-icon.color")}, : ${color("$tokenGroup.with-leading-icon.disabled.leading-icon.color")},
size: ${getToken("$tokenGroup.with-icon.icon.size")}, size: ${getToken("$tokenGroup.with-icon.icon.size")},
); );
......
...@@ -30,7 +30,13 @@ class _${blockName}DefaultsM3 extends ChipThemeData { ...@@ -30,7 +30,13 @@ class _${blockName}DefaultsM3 extends ChipThemeData {
late final TextTheme _textTheme = Theme.of(context).textTheme; late final TextTheme _textTheme = Theme.of(context).textTheme;
@override @override
TextStyle? get labelStyle => ${textStyle("$tokenGroup.label-text")}; TextStyle? get labelStyle => ${textStyle("$tokenGroup.label-text")}?.copyWith(
color: isEnabled
? isSelected
? ${color("$tokenGroup.selected.label-text.color")}
: ${color("$tokenGroup.unselected.label-text.color")}
: ${color("$tokenGroup.disabled.label-text.color")},
);
@override @override
MaterialStateProperty<Color?>? get color => MaterialStateProperty<Color?>? get color =>
...@@ -54,10 +60,18 @@ class _${blockName}DefaultsM3 extends ChipThemeData { ...@@ -54,10 +60,18 @@ class _${blockName}DefaultsM3 extends ChipThemeData {
Color? get surfaceTintColor => ${colorOrTransparent("$tokenGroup.container.surface-tint-layer.color")}; Color? get surfaceTintColor => ${colorOrTransparent("$tokenGroup.container.surface-tint-layer.color")};
@override @override
Color? get checkmarkColor => ${color("$tokenGroup.with-icon.selected.icon.color")}; Color? get checkmarkColor => isEnabled
? isSelected
? ${color("$tokenGroup.with-leading-icon.selected.leading-icon.color")}
: ${color("$tokenGroup.with-leading-icon.unselected.leading-icon.color")}
: ${color("$tokenGroup.with-leading-icon.disabled.leading-icon.color")};
@override @override
Color? get deleteIconColor => ${color("$tokenGroup.with-trailing-icon.selected.trailing-icon.color")}; Color? get deleteIconColor => isEnabled
? isSelected
? ${color("$tokenGroup.with-trailing-icon.selected.trailing-icon.color")}
: ${color("$tokenGroup.with-trailing-icon.unselected.trailing-icon.color")}
: ${color("$tokenGroup.with-trailing-icon.disabled.trailing-icon.color")};
@override @override
BorderSide? get side => !isSelected BorderSide? get side => !isSelected
...@@ -69,7 +83,9 @@ class _${blockName}DefaultsM3 extends ChipThemeData { ...@@ -69,7 +83,9 @@ class _${blockName}DefaultsM3 extends ChipThemeData {
@override @override
IconThemeData? get iconTheme => IconThemeData( IconThemeData? get iconTheme => IconThemeData(
color: isEnabled color: isEnabled
? ${color("$tokenGroup.with-leading-icon.leading-icon.color")} ? isSelected
? ${color("$tokenGroup.with-leading-icon.selected.leading-icon.color")}
: ${color("$tokenGroup.with-leading-icon.unselected.leading-icon.color")}
: ${color("$tokenGroup.with-leading-icon.disabled.leading-icon.color")}, : ${color("$tokenGroup.with-leading-icon.disabled.leading-icon.color")},
size: ${getToken("$tokenGroup.with-leading-icon.leading-icon.size")}, size: ${getToken("$tokenGroup.with-leading-icon.leading-icon.size")},
); );
......
...@@ -272,7 +272,13 @@ class _ChoiceChipDefaultsM3 extends ChipThemeData { ...@@ -272,7 +272,13 @@ class _ChoiceChipDefaultsM3 extends ChipThemeData {
double? get pressElevation => 1.0; double? get pressElevation => 1.0;
@override @override
TextStyle? get labelStyle => _textTheme.labelLarge; TextStyle? get labelStyle => _textTheme.labelLarge?.copyWith(
color: isEnabled
? isSelected
? _colors.onSecondaryContainer
: _colors.onSurfaceVariant
: _colors.onSurface,
);
@override @override
MaterialStateProperty<Color?>? get color => MaterialStateProperty<Color?>? get color =>
...@@ -306,10 +312,18 @@ class _ChoiceChipDefaultsM3 extends ChipThemeData { ...@@ -306,10 +312,18 @@ class _ChoiceChipDefaultsM3 extends ChipThemeData {
Color? get surfaceTintColor => _colors.surfaceTint; Color? get surfaceTintColor => _colors.surfaceTint;
@override @override
Color? get checkmarkColor => _colors.onSecondaryContainer; Color? get checkmarkColor => isEnabled
? isSelected
? _colors.onSecondaryContainer
: _colors.primary
: _colors.onSurface;
@override @override
Color? get deleteIconColor => _colors.onSecondaryContainer; Color? get deleteIconColor => isEnabled
? isSelected
? _colors.onSecondaryContainer
: _colors.onSurfaceVariant
: _colors.onSurface;
@override @override
BorderSide? get side => _chipVariant == _ChipVariant.flat && !isSelected BorderSide? get side => _chipVariant == _ChipVariant.flat && !isSelected
...@@ -321,7 +335,9 @@ class _ChoiceChipDefaultsM3 extends ChipThemeData { ...@@ -321,7 +335,9 @@ class _ChoiceChipDefaultsM3 extends ChipThemeData {
@override @override
IconThemeData? get iconTheme => IconThemeData( IconThemeData? get iconTheme => IconThemeData(
color: isEnabled color: isEnabled
? null ? isSelected
? _colors.onSecondaryContainer
: _colors.primary
: _colors.onSurface, : _colors.onSurface,
size: 18.0, size: 18.0,
); );
......
...@@ -298,7 +298,13 @@ class _FilterChipDefaultsM3 extends ChipThemeData { ...@@ -298,7 +298,13 @@ class _FilterChipDefaultsM3 extends ChipThemeData {
double? get pressElevation => 1.0; double? get pressElevation => 1.0;
@override @override
TextStyle? get labelStyle => _textTheme.labelLarge; TextStyle? get labelStyle => _textTheme.labelLarge?.copyWith(
color: isEnabled
? isSelected
? _colors.onSecondaryContainer
: _colors.onSurfaceVariant
: _colors.onSurface,
);
@override @override
MaterialStateProperty<Color?>? get color => MaterialStateProperty<Color?>? get color =>
...@@ -332,10 +338,18 @@ class _FilterChipDefaultsM3 extends ChipThemeData { ...@@ -332,10 +338,18 @@ class _FilterChipDefaultsM3 extends ChipThemeData {
Color? get surfaceTintColor => _colors.surfaceTint; Color? get surfaceTintColor => _colors.surfaceTint;
@override @override
Color? get checkmarkColor => _colors.onSecondaryContainer; Color? get checkmarkColor => isEnabled
? isSelected
? _colors.onSecondaryContainer
: _colors.primary
: _colors.onSurface;
@override @override
Color? get deleteIconColor => _colors.onSecondaryContainer; Color? get deleteIconColor => isEnabled
? isSelected
? _colors.onSecondaryContainer
: _colors.onSurfaceVariant
: _colors.onSurface;
@override @override
BorderSide? get side => _chipVariant == _ChipVariant.flat && !isSelected BorderSide? get side => _chipVariant == _ChipVariant.flat && !isSelected
...@@ -347,7 +361,9 @@ class _FilterChipDefaultsM3 extends ChipThemeData { ...@@ -347,7 +361,9 @@ class _FilterChipDefaultsM3 extends ChipThemeData {
@override @override
IconThemeData? get iconTheme => IconThemeData( IconThemeData? get iconTheme => IconThemeData(
color: isEnabled color: isEnabled
? null ? isSelected
? _colors.onSecondaryContainer
: _colors.primary
: _colors.onSurface, : _colors.onSurface,
size: 18.0, size: 18.0,
); );
......
...@@ -263,7 +263,13 @@ class _InputChipDefaultsM3 extends ChipThemeData { ...@@ -263,7 +263,13 @@ class _InputChipDefaultsM3 extends ChipThemeData {
late final TextTheme _textTheme = Theme.of(context).textTheme; late final TextTheme _textTheme = Theme.of(context).textTheme;
@override @override
TextStyle? get labelStyle => _textTheme.labelLarge; TextStyle? get labelStyle => _textTheme.labelLarge?.copyWith(
color: isEnabled
? isSelected
? _colors.onSecondaryContainer
: _colors.onSurfaceVariant
: _colors.onSurface,
);
@override @override
MaterialStateProperty<Color?>? get color => MaterialStateProperty<Color?>? get color =>
...@@ -287,10 +293,18 @@ class _InputChipDefaultsM3 extends ChipThemeData { ...@@ -287,10 +293,18 @@ class _InputChipDefaultsM3 extends ChipThemeData {
Color? get surfaceTintColor => Colors.transparent; Color? get surfaceTintColor => Colors.transparent;
@override @override
Color? get checkmarkColor => null; Color? get checkmarkColor => isEnabled
? isSelected
? _colors.primary
: _colors.onSurfaceVariant
: _colors.onSurface;
@override @override
Color? get deleteIconColor => _colors.onSecondaryContainer; Color? get deleteIconColor => isEnabled
? isSelected
? _colors.onSecondaryContainer
: _colors.onSurfaceVariant
: _colors.onSurface;
@override @override
BorderSide? get side => !isSelected BorderSide? get side => !isSelected
...@@ -302,7 +316,9 @@ class _InputChipDefaultsM3 extends ChipThemeData { ...@@ -302,7 +316,9 @@ class _InputChipDefaultsM3 extends ChipThemeData {
@override @override
IconThemeData? get iconTheme => IconThemeData( IconThemeData? get iconTheme => IconThemeData(
color: isEnabled color: isEnabled
? null ? isSelected
? _colors.primary
: _colors.onSurfaceVariant
: _colors.onSurface, : _colors.onSurface,
size: 18.0, size: 18.0,
); );
......
...@@ -204,7 +204,7 @@ void main() { ...@@ -204,7 +204,7 @@ void main() {
// Test default label style. // Test default label style.
expect( expect(
getLabelStyle(tester, label).style.color!.value, getLabelStyle(tester, label).style.color!.value,
theme.textTheme.labelLarge!.color!.value, theme.colorScheme.onSurfaceVariant.value,
); );
Material chipMaterial = getMaterial(tester); Material chipMaterial = getMaterial(tester);
...@@ -339,7 +339,7 @@ void main() { ...@@ -339,7 +339,7 @@ void main() {
// Test default label style. // Test default label style.
expect( expect(
getLabelStyle(tester, label).style.color!.value, getLabelStyle(tester, label).style.color!.value,
theme.textTheme.labelLarge!.color!.value, theme.colorScheme.onSurfaceVariant.value,
); );
Material chipMaterial = getMaterial(tester); Material chipMaterial = getMaterial(tester);
...@@ -691,8 +691,11 @@ void main() { ...@@ -691,8 +691,11 @@ void main() {
}); });
testWidgets('ChoiceChip uses provided iconTheme', (WidgetTester tester) async { testWidgets('ChoiceChip uses provided iconTheme', (WidgetTester tester) async {
final ThemeData theme = ThemeData();
Widget buildChip({ IconThemeData? iconTheme }) { Widget buildChip({ IconThemeData? iconTheme }) {
return MaterialApp( return MaterialApp(
theme: theme,
home: Material( home: Material(
child: ChoiceChip( child: ChoiceChip(
iconTheme: iconTheme, iconTheme: iconTheme,
...@@ -708,7 +711,7 @@ void main() { ...@@ -708,7 +711,7 @@ void main() {
// Test default icon theme. // Test default icon theme.
await tester.pumpWidget(buildChip()); await tester.pumpWidget(buildChip());
expect(getIconData(tester).color, ThemeData().iconTheme.color); expect(getIconData(tester).color, theme.colorScheme.primary);
// Test provided icon theme. // Test provided icon theme.
await tester.pumpWidget(buildChip(iconTheme: const IconThemeData(color: Color(0xff00ff00)))); await tester.pumpWidget(buildChip(iconTheme: const IconThemeData(color: Color(0xff00ff00))));
......
...@@ -19,11 +19,10 @@ Widget wrapForChip({ ...@@ -19,11 +19,10 @@ Widget wrapForChip({
required Widget child, required Widget child,
TextDirection textDirection = TextDirection.ltr, TextDirection textDirection = TextDirection.ltr,
TextScaler textScaler = TextScaler.noScaling, TextScaler textScaler = TextScaler.noScaling,
Brightness brightness = Brightness.light, ThemeData? theme,
bool? useMaterial3,
}) { }) {
return MaterialApp( return MaterialApp(
theme: ThemeData(brightness: brightness, useMaterial3: useMaterial3), theme: theme,
home: Directionality( home: Directionality(
textDirection: textDirection, textDirection: textDirection,
child: MediaQuery( child: MediaQuery(
...@@ -38,13 +37,11 @@ Future<void> pumpCheckmarkChip( ...@@ -38,13 +37,11 @@ Future<void> pumpCheckmarkChip(
WidgetTester tester, { WidgetTester tester, {
required Widget chip, required Widget chip,
Color? themeColor, Color? themeColor,
Brightness brightness = Brightness.light, ThemeData? theme,
bool? useMaterial3,
}) async { }) async {
await tester.pumpWidget( await tester.pumpWidget(
wrapForChip( wrapForChip(
useMaterial3: useMaterial3, theme: theme,
brightness: brightness,
child: Builder( child: Builder(
builder: (BuildContext context) { builder: (BuildContext context) {
final ChipThemeData chipTheme = ChipTheme.of(context); final ChipThemeData chipTheme = ChipTheme.of(context);
...@@ -272,7 +269,7 @@ void main() { ...@@ -272,7 +269,7 @@ void main() {
// Test default label style. // Test default label style.
expect( expect(
getLabelStyle(tester, label).style.color!.value, getLabelStyle(tester, label).style.color!.value,
theme.textTheme.labelLarge!.color!.value, theme.colorScheme.onSurfaceVariant.value,
); );
Material chipMaterial = getMaterial(tester); Material chipMaterial = getMaterial(tester);
...@@ -407,7 +404,7 @@ void main() { ...@@ -407,7 +404,7 @@ void main() {
// Test default label style. // Test default label style.
expect( expect(
getLabelStyle(tester, 'filter chip').style.color!.value, getLabelStyle(tester, 'filter chip').style.color!.value,
theme.textTheme.labelLarge!.color!.value, theme.colorScheme.onSurfaceVariant.value,
); );
Material chipMaterial = getMaterial(tester); Material chipMaterial = getMaterial(tester);
...@@ -708,7 +705,7 @@ void main() { ...@@ -708,7 +705,7 @@ void main() {
await pumpCheckmarkChip( await pumpCheckmarkChip(
tester, tester,
chip: selectedFilterChip(), chip: selectedFilterChip(),
useMaterial3: false, theme: ThemeData(useMaterial3: false),
); );
expectCheckmarkColor(find.byType(FilterChip), Colors.black.withAlpha(0xde)); expectCheckmarkColor(find.byType(FilterChip), Colors.black.withAlpha(0xde));
...@@ -719,7 +716,7 @@ void main() { ...@@ -719,7 +716,7 @@ void main() {
await pumpCheckmarkChip( await pumpCheckmarkChip(
tester, tester,
chip: selectedFilterChip(), chip: selectedFilterChip(),
useMaterial3: theme.useMaterial3, theme: theme,
); );
expectCheckmarkColor( expectCheckmarkColor(
...@@ -732,8 +729,7 @@ void main() { ...@@ -732,8 +729,7 @@ void main() {
await pumpCheckmarkChip( await pumpCheckmarkChip(
tester, tester,
chip: selectedFilterChip(), chip: selectedFilterChip(),
brightness: Brightness.dark, theme: ThemeData.dark(useMaterial3: false),
useMaterial3: false,
); );
expectCheckmarkColor( expectCheckmarkColor(
...@@ -747,8 +743,7 @@ void main() { ...@@ -747,8 +743,7 @@ void main() {
await pumpCheckmarkChip( await pumpCheckmarkChip(
tester, tester,
chip: selectedFilterChip(), chip: selectedFilterChip(),
brightness: theme.brightness, theme: theme,
useMaterial3: theme.useMaterial3,
); );
expectCheckmarkColor( expectCheckmarkColor(
...@@ -833,8 +828,11 @@ void main() { ...@@ -833,8 +828,11 @@ void main() {
}); });
testWidgets('FilterChip uses provided iconTheme', (WidgetTester tester) async { testWidgets('FilterChip uses provided iconTheme', (WidgetTester tester) async {
final ThemeData theme = ThemeData();
Widget buildChip({ IconThemeData? iconTheme }) { Widget buildChip({ IconThemeData? iconTheme }) {
return MaterialApp( return MaterialApp(
theme: theme,
home: Material( home: Material(
child: FilterChip( child: FilterChip(
iconTheme: iconTheme, iconTheme: iconTheme,
...@@ -849,7 +847,7 @@ void main() { ...@@ -849,7 +847,7 @@ void main() {
// Test default icon theme. // Test default icon theme.
await tester.pumpWidget(buildChip()); await tester.pumpWidget(buildChip());
expect(getIconData(tester).color, ThemeData().iconTheme.color); expect(getIconData(tester).color, theme.colorScheme.primary);
// Test provided icon theme. // Test provided icon theme.
await tester.pumpWidget(buildChip(iconTheme: const IconThemeData(color: Color(0xff00ff00)))); await tester.pumpWidget(buildChip(iconTheme: const IconThemeData(color: Color(0xff00ff00))));
...@@ -880,7 +878,7 @@ void main() { ...@@ -880,7 +878,7 @@ void main() {
// Test the delete button icon. // Test the delete button icon.
expect(tester.getSize(find.byIcon(Icons.clear)), const Size(18.0, 18.0)); expect(tester.getSize(find.byIcon(Icons.clear)), const Size(18.0, 18.0));
expect(getIconData(tester).color, theme.colorScheme.onSecondaryContainer); expect(getIconData(tester).color, theme.colorScheme.onSurfaceVariant);
await tester.pumpWidget( await tester.pumpWidget(
MaterialApp( MaterialApp(
...@@ -906,7 +904,7 @@ void main() { ...@@ -906,7 +904,7 @@ void main() {
// Test the delete button icon. // Test the delete button icon.
expect(tester.getSize(find.byIcon(Icons.clear)), const Size(18.0, 18.0)); expect(tester.getSize(find.byIcon(Icons.clear)), const Size(18.0, 18.0));
expect(getIconData(tester).color, theme.colorScheme.onSecondaryContainer); expect(getIconData(tester).color, theme.colorScheme.onSurfaceVariant);
}, skip: kIsWeb && !isCanvasKit); // https://github.com/flutter/flutter/issues/99933 }, skip: kIsWeb && !isCanvasKit); // https://github.com/flutter/flutter/issues/99933
testWidgets('Material2 - FilterChip supports delete button', (WidgetTester tester) async { testWidgets('Material2 - FilterChip supports delete button', (WidgetTester tester) async {
...@@ -1093,4 +1091,83 @@ void main() { ...@@ -1093,4 +1091,83 @@ void main() {
// Delete button tooltip should not be visible. // Delete button tooltip should not be visible.
expect(findTooltipContainer('Delete'), findsNothing); expect(findTooltipContainer('Delete'), findsNothing);
}); });
testWidgets('Material3 - Default FilterChip icon colors', (WidgetTester tester) async {
const IconData flatAvatar = Icons.favorite;
const IconData flatDeleteIcon = Icons.delete;
const IconData elevatedAvatar = Icons.house;
const IconData elevatedDeleteIcon = Icons.clear_all;
final ThemeData theme = ThemeData();
Widget buildChips({ required bool selected }) {
return MaterialApp(
theme: theme,
home: Material(
child: Column(
children: <Widget>[
FilterChip(
avatar: const Icon(flatAvatar),
deleteIcon: const Icon(flatDeleteIcon),
onSelected: (bool valueChanged) { },
label: const Text('FilterChip'),
selected: selected,
onDeleted: () { },
),
FilterChip.elevated(
avatar: const Icon(elevatedAvatar),
deleteIcon: const Icon(elevatedDeleteIcon),
onSelected: (bool valueChanged) { },
label: const Text('Elevated FilterChip'),
selected: selected,
onDeleted: () { },
),
],
),
),
);
}
Color getIconColor(WidgetTester tester, IconData icon) {
return tester.firstWidget<IconTheme>(find.ancestor(
of: find.byIcon(icon),
matching: find.byType(IconTheme),
)).data.color!;
}
// Test unselected state.
await tester.pumpWidget(buildChips(selected: false));
// Check the flat chip icon colors.
expect(getIconColor(tester, flatAvatar), theme.colorScheme.primary);
expect(
getIconColor(tester, flatDeleteIcon),
theme.colorScheme.onSurfaceVariant,
);
// Check the elevated chip icon colors.
expect(getIconColor(tester, elevatedAvatar), theme.colorScheme.primary);
expect(
getIconColor(tester, elevatedDeleteIcon),
theme.colorScheme.onSurfaceVariant,
);
// Test selected state.
await tester.pumpWidget(buildChips(selected: true));
// Check the flat chip icon colors.
expect(
getIconColor(tester, flatAvatar),
theme.colorScheme.onSecondaryContainer,
);
expect(
getIconColor(tester, flatDeleteIcon),
theme.colorScheme.onSecondaryContainer,
);
// Check the elevated chip icon colors.
expect(
getIconColor(tester, elevatedAvatar),
theme.colorScheme.onSecondaryContainer,
);
expect(
getIconColor(tester, elevatedDeleteIcon),
theme.colorScheme.onSecondaryContainer,
);
});
} }
...@@ -16,11 +16,10 @@ Widget wrapForChip({ ...@@ -16,11 +16,10 @@ Widget wrapForChip({
required Widget child, required Widget child,
TextDirection textDirection = TextDirection.ltr, TextDirection textDirection = TextDirection.ltr,
double textScaleFactor = 1.0, double textScaleFactor = 1.0,
Brightness brightness = Brightness.light, ThemeData? theme,
bool? useMaterial3,
}) { }) {
return MaterialApp( return MaterialApp(
theme: ThemeData(brightness: brightness, useMaterial3: useMaterial3), theme: theme,
home: Directionality( home: Directionality(
textDirection: textDirection, textDirection: textDirection,
child: MediaQuery.withClampedTextScaling( child: MediaQuery.withClampedTextScaling(
...@@ -40,6 +39,10 @@ Widget selectedInputChip({ ...@@ -40,6 +39,10 @@ Widget selectedInputChip({
label: const Text('InputChip'), label: const Text('InputChip'),
selected: true, selected: true,
isEnabled: enabled, isEnabled: enabled,
// When [enabled] is true we also need to provide one of the chip
// callbacks, otherwise the chip would have a 'disabled'
// [MaterialState], which is not the intention.
onSelected: enabled ? (_) {} : null,
showCheckmark: true, showCheckmark: true,
checkmarkColor: checkmarkColor, checkmarkColor: checkmarkColor,
); );
...@@ -50,13 +53,11 @@ Future<void> pumpCheckmarkChip( ...@@ -50,13 +53,11 @@ Future<void> pumpCheckmarkChip(
WidgetTester tester, { WidgetTester tester, {
required Widget chip, required Widget chip,
Color? themeColor, Color? themeColor,
Brightness brightness = Brightness.light, ThemeData? theme,
bool? useMaterial3,
}) async { }) async {
await tester.pumpWidget( await tester.pumpWidget(
wrapForChip( wrapForChip(
useMaterial3: useMaterial3, theme: theme,
brightness: brightness,
child: Builder( child: Builder(
builder: (BuildContext context) { builder: (BuildContext context) {
final ChipThemeData chipTheme = ChipTheme.of(context); final ChipThemeData chipTheme = ChipTheme.of(context);
...@@ -304,41 +305,42 @@ void main() { ...@@ -304,41 +305,42 @@ void main() {
focusNode2.dispose(); focusNode2.dispose();
}); });
testWidgets('Material2 - Input chip check mark color is determined by platform brightness when light', (WidgetTester tester) async { testWidgets('Material2 - Input chip disabled check mark color is determined by platform brightness when light', (WidgetTester tester) async {
await pumpCheckmarkChip( await pumpCheckmarkChip(
tester, tester,
chip: selectedInputChip(), chip: selectedInputChip(),
useMaterial3: false, theme: ThemeData(useMaterial3: false),
); );
expectCheckmarkColor(find.byType(InputChip), Colors.black.withAlpha(0xde)); expectCheckmarkColor(find.byType(InputChip), Colors.black.withAlpha(0xde));
}); });
testWidgets('Material3 - Input chip check mark color is determined by platform brightness when light', (WidgetTester tester) async { testWidgets('Material3 - Input chip disabled check mark color is determined by platform brightness when light', (WidgetTester tester) async {
await pumpCheckmarkChip(tester, chip: selectedInputChip()); final ThemeData theme = ThemeData();
await pumpCheckmarkChip(tester, chip: selectedInputChip(), theme: theme);
expectCheckmarkColor(find.byType(InputChip), Colors.black.withAlpha(0xde)); expectCheckmarkColor(find.byType(InputChip), theme.colorScheme.onSurface);
}); });
testWidgets('Material2 - Input chip check mark color is determined by platform brightness when dark', (WidgetTester tester) async { testWidgets('Material2 - Input chip disabled check mark color is determined by platform brightness when dark', (WidgetTester tester) async {
await pumpCheckmarkChip( await pumpCheckmarkChip(
tester, tester,
chip: selectedInputChip(), chip: selectedInputChip(),
brightness: Brightness.dark, theme: ThemeData.dark(useMaterial3: false),
useMaterial3: false,
); );
expectCheckmarkColor(find.byType(InputChip), Colors.white.withAlpha(0xde)); expectCheckmarkColor(find.byType(InputChip), Colors.white.withAlpha(0xde));
}); });
testWidgets('Material3 - Input chip check mark color is determined by platform brightness when dark', (WidgetTester tester) async { testWidgets('Material3 - Input chip disabled check mark color is determined by platform brightness when dark', (WidgetTester tester) async {
final ThemeData theme = ThemeData.dark();
await pumpCheckmarkChip( await pumpCheckmarkChip(
tester, tester,
chip: selectedInputChip(), chip: selectedInputChip(),
brightness: Brightness.dark, theme: theme,
); );
expectCheckmarkColor(find.byType(InputChip), Colors.white.withAlpha(0xde)); expectCheckmarkColor(find.byType(InputChip), theme.colorScheme.onSurface);
}); });
testWidgets('Input chip check mark color can be set by the chip theme', (WidgetTester tester) async { testWidgets('Input chip check mark color can be set by the chip theme', (WidgetTester tester) async {
...@@ -380,32 +382,35 @@ void main() { ...@@ -380,32 +382,35 @@ void main() {
}); });
testWidgets('Material3 - Input chip has correct selected color when enabled', (WidgetTester tester) async { testWidgets('Material3 - Input chip has correct selected color when enabled', (WidgetTester tester) async {
final ChipThemeData material3ChipDefaults = ThemeData(useMaterial3: true).chipTheme; final ThemeData theme = ThemeData();
await pumpCheckmarkChip( await pumpCheckmarkChip(
tester, tester,
chip: selectedInputChip(enabled: true), chip: selectedInputChip(enabled: true),
useMaterial3: true, theme: theme,
); );
final RenderBox materialBox = getMaterialBox(tester); final RenderBox materialBox = getMaterialBox(tester);
expect(materialBox, paints..rrect(color: material3ChipDefaults.backgroundColor)); expect(materialBox, paints..rrect(color: theme.colorScheme.secondaryContainer));
}); });
testWidgets('Material3 - Input chip has correct selected color when disabled', (WidgetTester tester) async { testWidgets('Material3 - Input chip has correct selected color when disabled', (WidgetTester tester) async {
final ChipThemeData material3ChipDefaults = ThemeData(useMaterial3: true).chipTheme; final ThemeData theme = ThemeData();
await pumpCheckmarkChip( await pumpCheckmarkChip(
tester, tester,
chip: selectedInputChip(), chip: selectedInputChip(),
useMaterial3: true, theme: theme,
); );
final RenderBox materialBox = getMaterialBox(tester); final RenderBox materialBox = getMaterialBox(tester);
expect(materialBox, paints..path(color: material3ChipDefaults.disabledColor)); expect(materialBox, paints..path(color: theme.colorScheme.onSurface));
}); });
testWidgets('InputChip uses provided iconTheme', (WidgetTester tester) async { testWidgets('InputChip uses provided iconTheme', (WidgetTester tester) async {
final ThemeData theme = ThemeData();
Widget buildChip({ IconThemeData? iconTheme }) { Widget buildChip({ IconThemeData? iconTheme }) {
return MaterialApp( return MaterialApp(
theme: theme,
home: Material( home: Material(
child: InputChip( child: InputChip(
iconTheme: iconTheme, iconTheme: iconTheme,
...@@ -419,7 +424,7 @@ void main() { ...@@ -419,7 +424,7 @@ void main() {
// Test default icon theme. // Test default icon theme.
await tester.pumpWidget(buildChip()); await tester.pumpWidget(buildChip());
expect(getIconData(tester).color, ThemeData().iconTheme.color); expect(getIconData(tester).color, theme.colorScheme.onSurfaceVariant);
// Test provided icon theme. // Test provided icon theme.
await tester.pumpWidget(buildChip(iconTheme: const IconThemeData(color: Color(0xff00ff00)))); await tester.pumpWidget(buildChip(iconTheme: const IconThemeData(color: Color(0xff00ff00))));
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment