Skip to content

Commit

Permalink
Fix InputDecorator suffixIcon color when in error and hovered (#149643)
Browse files Browse the repository at this point in the history
## Description

This PRs makes the `InputDecoration.suffixIcon` color compliant with the M3 spec when in error state and hovered.

From M3 spec, the color should be `onErrorContainer`, see https://m3.material.io/components/text-fields/specs#e4964192-72ad-414f-85b4-4b4357abb83c

![image](https://github.com/flutter/flutter/assets/840911/1d8d7bb6-608f-4783-aff5-2123392c4dc1)

## Related Issue

Fixes flutter/flutter#149410.

## Tests

Updates 2 tests.
  • Loading branch information
bleroux authored Jun 6, 2024
1 parent c5025ad commit 4608a89
Show file tree
Hide file tree
Showing 4 changed files with 8 additions and 8 deletions.
1 change: 1 addition & 0 deletions dev/tools/gen_defaults/generated/used_tokens.csv
Original file line number Diff line number Diff line change
Expand Up @@ -252,6 +252,7 @@ md.comp.filled-text-field.error.focus.trailing-icon.color,
md.comp.filled-text-field.error.hover.active-indicator.color,
md.comp.filled-text-field.error.hover.label-text.color,
md.comp.filled-text-field.error.hover.supporting-text.color,
md.comp.filled-text-field.error.hover.trailing-icon.color,
md.comp.filled-text-field.error.label-text.color,
md.comp.filled-text-field.error.leading-icon.color,
md.comp.filled-text-field.error.supporting-text.color,
Expand Down
4 changes: 2 additions & 2 deletions dev/tools/gen_defaults/lib/input_decorator_template.dart
Original file line number Diff line number Diff line change
Expand Up @@ -124,10 +124,10 @@ class _${blockName}DefaultsM3 extends InputDecorationTheme {
if (states.contains(MaterialState.disabled)) {
return ${componentColor('md.comp.filled-text-field.disabled.trailing-icon')};
}
if (states.contains(MaterialState.error)) {${componentColor('md.comp.filled-text-field.error.trailing-icon') == componentColor('md.comp.filled-text-field.error.focus.trailing-icon') ? '' : '''
if (states.contains(MaterialState.error)) {
if (states.contains(MaterialState.hovered)) {
return ${componentColor('md.comp.filled-text-field.error.hover.trailing-icon')};
}
}${componentColor('md.comp.filled-text-field.error.trailing-icon') == componentColor('md.comp.filled-text-field.error.focus.trailing-icon') ? '' : '''
if (states.contains(MaterialState.focused)) {
return ${componentColor('md.comp.filled-text-field.error.focus.trailing-icon')};
}'''}
Expand Down
3 changes: 3 additions & 0 deletions packages/flutter/lib/src/material/input_decorator.dart
Original file line number Diff line number Diff line change
Expand Up @@ -4748,6 +4748,9 @@ class _InputDecoratorDefaultsM3 extends InputDecorationTheme {
return _colors.onSurface.withOpacity(0.38);
}
if (states.contains(MaterialState.error)) {
if (states.contains(MaterialState.hovered)) {
return _colors.onErrorContainer;
}
return _colors.error;
}
return _colors.onSurfaceVariant;
Expand Down
8 changes: 2 additions & 6 deletions packages/flutter/test/material/input_decorator_test.dart
Original file line number Diff line number Diff line change
Expand Up @@ -5786,9 +5786,7 @@ void main() {
);

final ThemeData theme = Theme.of(tester.element(findSuffixIcon()));
// TODO(bleroux): based on M3 spec, it should be theme.colorScheme.onErrorContainer.
// See https://github.com/flutter/flutter/issues/149410.
final Color expectedColor = theme.colorScheme.error;
final Color expectedColor = theme.colorScheme.onErrorContainer;
expect(getSuffixIconStyle(tester).color, expectedColor);
});
});
Expand Down Expand Up @@ -6262,9 +6260,7 @@ void main() {
);

final ThemeData theme = Theme.of(tester.element(findSuffixIcon()));
// TODO(bleroux): based on M3 spec, it should be theme.colorScheme.onErrorContainer.
// See https://github.com/flutter/flutter/issues/149410.
final Color expectedColor = theme.colorScheme.error;
final Color expectedColor = theme.colorScheme.onErrorContainer;
expect(getSuffixIconStyle(tester).color, expectedColor);
});
});
Expand Down

0 comments on commit 4608a89

Please sign in to comment.