Skip to content

Commit

Permalink
Reland fix inputDecorator hint color on M3 (#150278)
Browse files Browse the repository at this point in the history 
## Description

This PR is a partial reland of flutter/flutter#148944 which was reverted in flutter/flutter#149448.
It makes the `InputDecoration.hintText` colors compliant with the M3 spec.
The initial PR also changed the font style, I will land the font change in another PR to better track the golden changes.

## Related Issue

Related to the color part of flutter/flutter#148787.

## Tests

Updates several tests.
  • Loading branch information
@bleroux
bleroux authored Jun 25, 2024
1 parent a37d9e0 commit 00419bf
Show file tree
Hide file tree
Showing 4 changed files with 43 additions and 28 deletions.
4 changes: 2 additions & 2 deletions dev/tools/gen_defaults/lib/input_decorator_template.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,9 @@ class _${blockName}DefaultsM3 extends InputDecorationTheme {
@override
TextStyle? get hintStyle => MaterialStateTextStyle.resolveWith((Set<MaterialState> states) {
if (states.contains(MaterialState.disabled)) {
return TextStyle(color: Theme.of(context).disabledColor);
return TextStyle(color: ${componentColor('md.comp.filled-text-field.disabled.supporting-text')});
}
return TextStyle(color: Theme.of(context).hintColor);
return TextStyle(color: ${componentColor('md.comp.filled-text-field.supporting-text')});
});
@override
Expand Down
4 changes: 2 additions & 2 deletions packages/flutter/lib/src/material/input_decorator.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4670,9 +4670,9 @@ class _InputDecoratorDefaultsM3 extends InputDecorationTheme {
@override
TextStyle? get hintStyle => MaterialStateTextStyle.resolveWith((Set<MaterialState> states) {
if (states.contains(MaterialState.disabled)) {
return TextStyle(color: Theme.of(context).disabledColor);
return TextStyle(color: _colors.onSurface.withOpacity(0.38));
}
return TextStyle(color: Theme.of(context).hintColor);
return TextStyle(color: _colors.onSurfaceVariant);
});

@override
Expand Down
36 changes: 12 additions & 24 deletions packages/flutter/test/material/input_decorator_test.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2879,8 +2879,7 @@ void main() {
expect(getHintOpacity(tester), 1.0);

final ThemeData theme = Theme.of(tester.element(findDecorator()));
// TODO(bleroux): from M3 specification, it should be theme.colorScheme.onSurface.
final Color expectedColor = theme.hintColor;
final Color expectedColor = theme.colorScheme.onSurfaceVariant;
// TODO(bleroux): from M3 specification, it should be textTheme.bodyLarge.
final TextStyle expectedStyle = theme.textTheme.titleMedium!.copyWith(color: expectedColor);
expect(getHintStyle(tester), expectedStyle);
Expand Down Expand Up @@ -2945,8 +2944,7 @@ void main() {
expect(getHintOpacity(tester), 1.0);

final ThemeData theme = Theme.of(tester.element(findDecorator()));
// TODO(bleroux): from M3 specification, it should be theme.colorScheme.onSurface.withOpacity(0.38).
final Color expectedColor = theme.disabledColor;
final Color expectedColor = theme.colorScheme.onSurface.withOpacity(0.38);
// TODO(bleroux): from M3 specification, it should be textTheme.bodyLarge.
final TextStyle expectedStyle = theme.textTheme.titleMedium!.copyWith(color: expectedColor);
expect(getHintStyle(tester), expectedStyle);
Expand Down Expand Up @@ -3011,8 +3009,7 @@ void main() {
expect(getHintOpacity(tester), 1.0);

final ThemeData theme = Theme.of(tester.element(findDecorator()));
// TODO(bleroux): from M3 specification, it should be theme.colorScheme.onSurface.
final Color expectedColor = theme.hintColor;
final Color expectedColor = theme.colorScheme.onSurfaceVariant;
// TODO(bleroux): from M3 specification, it should be textTheme.bodyLarge.
final TextStyle expectedStyle = theme.textTheme.titleMedium!.copyWith(color: expectedColor);
expect(getHintStyle(tester), expectedStyle);
Expand Down Expand Up @@ -3077,8 +3074,7 @@ void main() {
expect(getHintOpacity(tester), 1.0);

final ThemeData theme = Theme.of(tester.element(findDecorator()));
// TODO(bleroux): from M3 specification, it should be theme.colorScheme.onSurface.
final Color expectedColor = theme.hintColor;
final Color expectedColor = theme.colorScheme.onSurfaceVariant;
// TODO(bleroux): from M3 specification, it should be textTheme.bodyLarge.
final TextStyle expectedStyle = theme.textTheme.titleMedium!.copyWith(color: expectedColor);
expect(getHintStyle(tester), expectedStyle);
Expand Down Expand Up @@ -3143,8 +3139,7 @@ void main() {
expect(getHintOpacity(tester), 1.0);

final ThemeData theme = Theme.of(tester.element(findDecorator()));
// TODO(bleroux): from M3 specification, it should be theme.colorScheme.onSurface.
final Color expectedColor = theme.hintColor;
final Color expectedColor = theme.colorScheme.onSurfaceVariant;
// TODO(bleroux): from M3 specification, it should be textTheme.bodyLarge.
final TextStyle expectedStyle = theme.textTheme.titleMedium!.copyWith(color: expectedColor);
expect(getHintStyle(tester), expectedStyle);
Expand Down Expand Up @@ -3353,8 +3348,7 @@ void main() {
expect(getHintOpacity(tester), 1.0);

final ThemeData theme = Theme.of(tester.element(findDecorator()));
// TODO(bleroux): from M3 specification, it should be theme.colorScheme.onSurface.
final Color expectedColor = theme.hintColor;
final Color expectedColor = theme.colorScheme.onSurfaceVariant;
// TODO(bleroux): from M3 specification, it should be textTheme.bodyLarge.
final TextStyle expectedStyle = theme.textTheme.titleMedium!.copyWith(color: expectedColor);
expect(getHintStyle(tester), expectedStyle);
Expand Down Expand Up @@ -3467,8 +3461,7 @@ void main() {
expect(getHintOpacity(tester), 1.0);

final ThemeData theme = Theme.of(tester.element(findDecorator()));
// TODO(bleroux): from M3 specification, it should be theme.colorScheme.onSurface.
final Color expectedColor = theme.hintColor;
final Color expectedColor = theme.colorScheme.onSurfaceVariant;
// TODO(bleroux): from M3 specification, it should be textTheme.bodyLarge.
final TextStyle expectedStyle = theme.textTheme.titleMedium!.copyWith(color: expectedColor);
expect(getHintStyle(tester), expectedStyle);
Expand Down Expand Up @@ -3533,8 +3526,7 @@ void main() {
expect(getHintOpacity(tester), 1.0);

final ThemeData theme = Theme.of(tester.element(findDecorator()));
// TODO(bleroux): from M3 specification, it should be theme.colorScheme.onSurface.withOpacity(0.38).
final Color expectedColor = theme.disabledColor;
final Color expectedColor = theme.colorScheme.onSurface.withOpacity(0.38);
// TODO(bleroux): from M3 specification, it should be textTheme.bodyLarge.
final TextStyle expectedStyle = theme.textTheme.titleMedium!.copyWith(color: expectedColor);
expect(getHintStyle(tester), expectedStyle);
Expand Down Expand Up @@ -3599,8 +3591,7 @@ void main() {
expect(getHintOpacity(tester), 1.0);

final ThemeData theme = Theme.of(tester.element(findDecorator()));
// TODO(bleroux): from M3 specification, it should be theme.colorScheme.onSurface.
final Color expectedColor = theme.hintColor;
final Color expectedColor = theme.colorScheme.onSurfaceVariant;
// TODO(bleroux): from M3 specification, it should be textTheme.bodyLarge.
final TextStyle expectedStyle = theme.textTheme.titleMedium!.copyWith(color: expectedColor);
expect(getHintStyle(tester), expectedStyle);
Expand Down Expand Up @@ -3665,8 +3656,7 @@ void main() {
expect(getHintOpacity(tester), 1.0);

final ThemeData theme = Theme.of(tester.element(findDecorator()));
// TODO(bleroux): from M3 specification, it should be theme.colorScheme.onSurface.
final Color expectedColor = theme.hintColor;
final Color expectedColor = theme.colorScheme.onSurfaceVariant;
// TODO(bleroux): from M3 specification, it should be textTheme.bodyLarge.
final TextStyle expectedStyle = theme.textTheme.titleMedium!.copyWith(color: expectedColor);
expect(getHintStyle(tester), expectedStyle);
Expand Down Expand Up @@ -3731,8 +3721,7 @@ void main() {
expect(getHintOpacity(tester), 1.0);

final ThemeData theme = Theme.of(tester.element(findDecorator()));
// TODO(bleroux): from M3 specification, it should be theme.colorScheme.onSurface.
final Color expectedColor = theme.hintColor;
final Color expectedColor = theme.colorScheme.onSurfaceVariant;
// TODO(bleroux): from M3 specification, it should be textTheme.bodyLarge.
final TextStyle expectedStyle = theme.textTheme.titleMedium!.copyWith(color: expectedColor);
expect(getHintStyle(tester), expectedStyle);
Expand Down Expand Up @@ -3939,8 +3928,7 @@ void main() {
expect(getHintOpacity(tester), 1.0);

final ThemeData theme = Theme.of(tester.element(findDecorator()));
// TODO(bleroux): from M3 specification, it should be theme.colorScheme.onSurface.
final Color expectedColor = theme.hintColor;
final Color expectedColor = theme.colorScheme.onSurfaceVariant;
// TODO(bleroux): from M3 specification, it should be textTheme.bodyLarge.
final TextStyle expectedStyle = theme.textTheme.titleMedium!.copyWith(color: expectedColor);
expect(getHintStyle(tester), expectedStyle);
Expand Down
27 changes: 27 additions & 0 deletions packages/flutter/test/material/text_field_test.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5451,11 +5451,38 @@ void main() {
});

testWidgets('TextField with default hintStyle', (WidgetTester tester) async {
final TextStyle style = TextStyle(
color: Colors.pink[500],
fontSize: 10.0,
);
final ThemeData themeData = ThemeData();

await tester.pumpWidget(
overlay(
child: Theme(
data: themeData,
child: TextField(
decoration: const InputDecoration(
hintText: 'Placeholder',
),
style: style,
),
),
),
);

final Text hintText = tester.widget(find.text('Placeholder'));
expect(hintText.style!.color, themeData.colorScheme.onSurfaceVariant);
expect(hintText.style!.fontSize, style.fontSize);
});

testWidgets('Material2 - TextField with default hintStyle', (WidgetTester tester) async {
final TextStyle style = TextStyle(
color: Colors.pink[500],
fontSize: 10.0,
);
final ThemeData themeData = ThemeData(
useMaterial3: false,
hintColor: Colors.blue[500],
);

Expand Down

0 comments on commit 00419bf

Please sign in to comment.