Skip to content

Commit 00419bf

Browse files
blerouxbleroux
authored
Reland fix inputDecorator hint color on M3 (#150278)
## 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.
1 parent a37d9e0 commit 00419bf

File tree

4 files changed

+43
-28
lines changed

4 files changed

+43
-28
lines changed

‎dev/tools/gen_defaults/lib/input_decorator_template.dart

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,9 @@ class _${blockName}DefaultsM3 extends InputDecorationTheme {
3434
@override
3535
TextStyle? get hintStyle => MaterialStateTextStyle.resolveWith((Set<MaterialState> states) {
3636
if (states.contains(MaterialState.disabled)) {
37-
return TextStyle(color: Theme.of(context).disabledColor);
37+
return TextStyle(color: ${componentColor('md.comp.filled-text-field.disabled.supporting-text')});
3838
}
39-
return TextStyle(color: Theme.of(context).hintColor);
39+
return TextStyle(color: ${componentColor('md.comp.filled-text-field.supporting-text')});
4040
});
4141
4242
@override

‎packages/flutter/lib/src/material/input_decorator.dart

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4670,9 +4670,9 @@ class _InputDecoratorDefaultsM3 extends InputDecorationTheme {
46704670
@override
46714671
TextStyle? get hintStyle => MaterialStateTextStyle.resolveWith((Set<MaterialState> states) {
46724672
if (states.contains(MaterialState.disabled)) {
4673-
return TextStyle(color: Theme.of(context).disabledColor);
4673+
return TextStyle(color: _colors.onSurface.withOpacity(0.38));
46744674
}
4675-
return TextStyle(color: Theme.of(context).hintColor);
4675+
return TextStyle(color: _colors.onSurfaceVariant);
46764676
});
46774677

46784678
@override

‎packages/flutter/test/material/input_decorator_test.dart

Lines changed: 12 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2879,8 +2879,7 @@ void main() {
28792879
expect(getHintOpacity(tester), 1.0);
28802880

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

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

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

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

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

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

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

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

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

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

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

39413930
final ThemeData theme = Theme.of(tester.element(findDecorator()));
3942-
// TODO(bleroux): from M3 specification, it should be theme.colorScheme.onSurface.
3943-
final Color expectedColor = theme.hintColor;
3931+
final Color expectedColor = theme.colorScheme.onSurfaceVariant;
39443932
// TODO(bleroux): from M3 specification, it should be textTheme.bodyLarge.
39453933
final TextStyle expectedStyle = theme.textTheme.titleMedium!.copyWith(color: expectedColor);
39463934
expect(getHintStyle(tester), expectedStyle);

‎packages/flutter/test/material/text_field_test.dart

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5451,11 +5451,38 @@ void main() {
54515451
});
54525452

54535453
testWidgets('TextField with default hintStyle', (WidgetTester tester) async {
5454+
final TextStyle style = TextStyle(
5455+
color: Colors.pink[500],
5456+
fontSize: 10.0,
5457+
);
5458+
final ThemeData themeData = ThemeData();
5459+
5460+
await tester.pumpWidget(
5461+
overlay(
5462+
child: Theme(
5463+
data: themeData,
5464+
child: TextField(
5465+
decoration: const InputDecoration(
5466+
hintText: 'Placeholder',
5467+
),
5468+
style: style,
5469+
),
5470+
),
5471+
),
5472+
);
5473+
5474+
final Text hintText = tester.widget(find.text('Placeholder'));
5475+
expect(hintText.style!.color, themeData.colorScheme.onSurfaceVariant);
5476+
expect(hintText.style!.fontSize, style.fontSize);
5477+
});
5478+
5479+
testWidgets('Material2 - TextField with default hintStyle', (WidgetTester tester) async {
54545480
final TextStyle style = TextStyle(
54555481
color: Colors.pink[500],
54565482
fontSize: 10.0,
54575483
);
54585484
final ThemeData themeData = ThemeData(
5485+
useMaterial3: false,
54595486
hintColor: Colors.blue[500],
54605487
);
54615488

0 commit comments

Comments
 (0)