Fix InputDecorator suffixIcon color when in error and hovered (#149643)

## 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 https://github.com/flutter/flutter/issues/149410.

## Tests

Updates 2 tests.
This commit is contained in:
Bruno Leroux 2024-06-06 08:11:25 +02:00 committed by GitHub
parent c5025ad53d
commit 4608a89137
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 8 additions and 8 deletions

View File

@ -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,

1 Versions used 4_0_0
252 md.comp.filled-text-field.error.hover.active-indicator.color
253 md.comp.filled-text-field.error.hover.label-text.color
254 md.comp.filled-text-field.error.hover.supporting-text.color
255 md.comp.filled-text-field.error.hover.trailing-icon.color
256 md.comp.filled-text-field.error.label-text.color
257 md.comp.filled-text-field.error.leading-icon.color
258 md.comp.filled-text-field.error.supporting-text.color

View File

@ -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')};
}'''}

View File

@ -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;

View File

@ -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);
});
});
@ -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);
});
});