Unverified Commit 99961267 authored by Eilidh Southren's avatar Eilidh Southren Committed by GitHub

Add proper disabled values for input chips (#120192)

* add proper disabled values for input chips

* added test
parent cd380633
...@@ -13,7 +13,7 @@ class InputChipTemplate extends TokenTemplate { ...@@ -13,7 +13,7 @@ class InputChipTemplate extends TokenTemplate {
@override @override
String generate() => ''' String generate() => '''
class _${blockName}DefaultsM3 extends ChipThemeData { class _${blockName}DefaultsM3 extends ChipThemeData {
const _${blockName}DefaultsM3(this.context, this.isEnabled) const _${blockName}DefaultsM3(this.context, this.isEnabled, this.isSelected)
: super( : super(
elevation: ${elevation("$tokenGroup$variant.container")}, elevation: ${elevation("$tokenGroup$variant.container")},
shape: ${shape("$tokenGroup.container")}, shape: ${shape("$tokenGroup.container")},
...@@ -22,6 +22,7 @@ class _${blockName}DefaultsM3 extends ChipThemeData { ...@@ -22,6 +22,7 @@ class _${blockName}DefaultsM3 extends ChipThemeData {
final BuildContext context; final BuildContext context;
final bool isEnabled; final bool isEnabled;
final bool isSelected;
@override @override
TextStyle? get labelStyle => ${textStyle("$tokenGroup.label-text")}; TextStyle? get labelStyle => ${textStyle("$tokenGroup.label-text")};
...@@ -36,7 +37,9 @@ class _${blockName}DefaultsM3 extends ChipThemeData { ...@@ -36,7 +37,9 @@ 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 selectedColor => ${componentColor("$tokenGroup$variant.selected.container")}; Color? get selectedColor => isEnabled
? ${componentColor("$tokenGroup$variant.selected.container")}
: ${componentColor("$tokenGroup$variant.disabled.selected.container")};
@override @override
Color? get checkmarkColor => ${color("$tokenGroup.with-icon.selected.icon.color")}; Color? get checkmarkColor => ${color("$tokenGroup.with-icon.selected.icon.color")};
...@@ -48,9 +51,11 @@ class _${blockName}DefaultsM3 extends ChipThemeData { ...@@ -48,9 +51,11 @@ class _${blockName}DefaultsM3 extends ChipThemeData {
Color? get deleteIconColor => ${color("$tokenGroup.with-trailing-icon.selected.trailing-icon.color")}; Color? get deleteIconColor => ${color("$tokenGroup.with-trailing-icon.selected.trailing-icon.color")};
@override @override
BorderSide? get side => isEnabled BorderSide? get side => !isSelected
? isEnabled
? ${border('$tokenGroup$variant.unselected.outline')} ? ${border('$tokenGroup$variant.unselected.outline')}
: ${border('$tokenGroup$variant.disabled.unselected.outline')}; : ${border('$tokenGroup$variant.disabled.unselected.outline')}
: const BorderSide(color: Colors.transparent);
@override @override
IconThemeData? get iconTheme => IconThemeData( IconThemeData? get iconTheme => IconThemeData(
......
...@@ -194,7 +194,7 @@ class InputChip extends StatelessWidget ...@@ -194,7 +194,7 @@ class InputChip extends StatelessWidget
Widget build(BuildContext context) { Widget build(BuildContext context) {
assert(debugCheckHasMaterial(context)); assert(debugCheckHasMaterial(context));
final ChipThemeData? defaults = Theme.of(context).useMaterial3 final ChipThemeData? defaults = Theme.of(context).useMaterial3
? _InputChipDefaultsM3(context, isEnabled) ? _InputChipDefaultsM3(context, isEnabled, selected)
: null; : null;
final Widget? resolvedDeleteIcon = deleteIcon final Widget? resolvedDeleteIcon = deleteIcon
?? (Theme.of(context).useMaterial3 ? const Icon(Icons.clear, size: 18) : null); ?? (Theme.of(context).useMaterial3 ? const Icon(Icons.clear, size: 18) : null);
...@@ -247,7 +247,7 @@ class InputChip extends StatelessWidget ...@@ -247,7 +247,7 @@ class InputChip extends StatelessWidget
// Token database version: v0_158 // Token database version: v0_158
class _InputChipDefaultsM3 extends ChipThemeData { class _InputChipDefaultsM3 extends ChipThemeData {
const _InputChipDefaultsM3(this.context, this.isEnabled) const _InputChipDefaultsM3(this.context, this.isEnabled, this.isSelected)
: super( : super(
elevation: 0.0, elevation: 0.0,
shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))), shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
...@@ -256,6 +256,7 @@ class _InputChipDefaultsM3 extends ChipThemeData { ...@@ -256,6 +256,7 @@ class _InputChipDefaultsM3 extends ChipThemeData {
final BuildContext context; final BuildContext context;
final bool isEnabled; final bool isEnabled;
final bool isSelected;
@override @override
TextStyle? get labelStyle => Theme.of(context).textTheme.labelLarge; TextStyle? get labelStyle => Theme.of(context).textTheme.labelLarge;
...@@ -270,7 +271,9 @@ class _InputChipDefaultsM3 extends ChipThemeData { ...@@ -270,7 +271,9 @@ class _InputChipDefaultsM3 extends ChipThemeData {
Color? get surfaceTintColor => Colors.transparent; Color? get surfaceTintColor => Colors.transparent;
@override @override
Color? get selectedColor => Theme.of(context).colorScheme.secondaryContainer; Color? get selectedColor => isEnabled
? Theme.of(context).colorScheme.secondaryContainer
: Theme.of(context).colorScheme.onSurface.withOpacity(0.12);
@override @override
Color? get checkmarkColor => null; Color? get checkmarkColor => null;
...@@ -282,9 +285,11 @@ class _InputChipDefaultsM3 extends ChipThemeData { ...@@ -282,9 +285,11 @@ class _InputChipDefaultsM3 extends ChipThemeData {
Color? get deleteIconColor => Theme.of(context).colorScheme.onSecondaryContainer; Color? get deleteIconColor => Theme.of(context).colorScheme.onSecondaryContainer;
@override @override
BorderSide? get side => isEnabled BorderSide? get side => !isSelected
? isEnabled
? BorderSide(color: Theme.of(context).colorScheme.outline) ? BorderSide(color: Theme.of(context).colorScheme.outline)
: BorderSide(color: Theme.of(context).colorScheme.onSurface.withOpacity(0.12)); : BorderSide(color: Theme.of(context).colorScheme.onSurface.withOpacity(0.12))
: const BorderSide(color: Colors.transparent);
@override @override
IconThemeData? get iconTheme => IconThemeData( IconThemeData? get iconTheme => IconThemeData(
......
...@@ -13,9 +13,10 @@ Widget wrapForChip({ ...@@ -13,9 +13,10 @@ Widget wrapForChip({
TextDirection textDirection = TextDirection.ltr, TextDirection textDirection = TextDirection.ltr,
double textScaleFactor = 1.0, double textScaleFactor = 1.0,
Brightness brightness = Brightness.light, Brightness brightness = Brightness.light,
bool useMaterial3 = false,
}) { }) {
return MaterialApp( return MaterialApp(
theme: ThemeData(brightness: brightness), theme: ThemeData(brightness: brightness, useMaterial3: useMaterial3),
home: Directionality( home: Directionality(
textDirection: textDirection, textDirection: textDirection,
child: MediaQuery( child: MediaQuery(
...@@ -26,10 +27,14 @@ Widget wrapForChip({ ...@@ -26,10 +27,14 @@ Widget wrapForChip({
); );
} }
Widget selectedInputChip({ Color? checkmarkColor }) { Widget selectedInputChip({
Color? checkmarkColor,
bool enabled = false,
}) {
return InputChip( return InputChip(
label: const Text('InputChip'), label: const Text('InputChip'),
selected: true, selected: true,
isEnabled: enabled,
showCheckmark: true, showCheckmark: true,
checkmarkColor: checkmarkColor, checkmarkColor: checkmarkColor,
); );
...@@ -41,9 +46,11 @@ Future<void> pumpCheckmarkChip( ...@@ -41,9 +46,11 @@ Future<void> pumpCheckmarkChip(
required Widget chip, required Widget chip,
Color? themeColor, Color? themeColor,
Brightness brightness = Brightness.light, Brightness brightness = Brightness.light,
bool useMaterial3 = false,
}) async { }) async {
await tester.pumpWidget( await tester.pumpWidget(
wrapForChip( wrapForChip(
useMaterial3: useMaterial3,
brightness: brightness, brightness: brightness,
child: Builder( child: Builder(
builder: (BuildContext context) { builder: (BuildContext context) {
...@@ -75,6 +82,15 @@ void expectCheckmarkColor(Finder finder, Color color) { ...@@ -75,6 +82,15 @@ void expectCheckmarkColor(Finder finder, Color color) {
); );
} }
RenderBox getMaterialBox(WidgetTester tester) {
return tester.firstRenderObject<RenderBox>(
find.descendant(
of: find.byType(InputChip),
matching: find.byType(CustomPaint),
),
);
}
void checkChipMaterialClipBehavior(WidgetTester tester, Clip clipBehavior) { void checkChipMaterialClipBehavior(WidgetTester tester, Clip clipBehavior) {
final Iterable<Material> materials = tester.widgetList<Material>(find.byType(Material)); final Iterable<Material> materials = tester.widgetList<Material>(find.byType(Material));
// There should be two Material widgets, first Material is from the "_wrapForChip" and // There should be two Material widgets, first Material is from the "_wrapForChip" and
...@@ -238,4 +254,28 @@ void main() { ...@@ -238,4 +254,28 @@ void main() {
await tester.pumpWidget(wrapForChip(child: const InputChip(label: label, clipBehavior: Clip.antiAlias))); await tester.pumpWidget(wrapForChip(child: const InputChip(label: label, clipBehavior: Clip.antiAlias)));
checkChipMaterialClipBehavior(tester, Clip.antiAlias); checkChipMaterialClipBehavior(tester, Clip.antiAlias);
}); });
testWidgets('Input chip has correct selected color when enabled - M3 defaults', (WidgetTester tester) async {
final ChipThemeData material3ChipDefaults = ThemeData(useMaterial3: true).chipTheme;
await pumpCheckmarkChip(
tester,
chip: selectedInputChip(enabled: true),
useMaterial3: true,
);
final RenderBox materialBox = getMaterialBox(tester);
expect(materialBox, paints..rrect(color: material3ChipDefaults.backgroundColor));
});
testWidgets('Input chip has correct selected color when disabled - M3 defaults', (WidgetTester tester) async {
final ChipThemeData material3ChipDefaults = ThemeData(useMaterial3: true).chipTheme;
await pumpCheckmarkChip(
tester,
chip: selectedInputChip(),
useMaterial3: true,
);
final RenderBox materialBox = getMaterialBox(tester);
expect(materialBox, paints..path(color: material3ChipDefaults.disabledColor));
});
} }
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