From fc8ab3b4b411aeaad07ef9c1f7261667d91e1a28 Mon Sep 17 00:00:00 2001 From: "auto-submit[bot]" <98614782+auto-submit[bot]@users.noreply.github.com> Date: Fri, 31 May 2024 22:06:26 +0000 Subject: [PATCH] Reverts "Fix InputDecorator default hint text style on M3 (#148944)" (#149448) Reverts: flutter/flutter#148944 Initiated by: loic-sharma Reason for reverting: This caused Skia golden changes that might be unexpected. We can reland once we confirm these changes are expected, or, fixed the changes to the floating label. Original PR Author: bleroux Reviewed By: {Renzo-Olivares, guidezpl} This change reverts the following previous change: ## Description This PRs makes the `InputDecoration.hintText` style compliant with the M3 spec. The hint style is not clearly specified in https://m3.material.io/components/text-fields/specs, but it is in the M3 Figma kit. ('hint' terminology came from the Material1 specification, since M2 the terminology is 'Placeholder'). See this Figma screenshot taken while focusing on the 'Placeholder' text (which corresponds to hint). ![image](https://github.com/flutter/flutter/assets/840911/58d3d5c9-0984-497a-9d47-4724dcd7b2b3) It seems that the intention is that the 'Placeholder' colors should be the same as the 'supporting text' ones, that is why is reused 'supporting text' tokens. ## Related Issue Fixes https://github.com/flutter/flutter/issues/148787. ## Tests Updates several tests. --- .../lib/input_decorator_template.dart | 4 +- .../lib/src/material/input_decorator.dart | 12 ++-- .../test/material/input_decorator_test.dart | 72 ++++++++++++------- .../test/material/text_field_test.dart | 27 ------- 4 files changed, 55 insertions(+), 60 deletions(-) diff --git a/dev/tools/gen_defaults/lib/input_decorator_template.dart b/dev/tools/gen_defaults/lib/input_decorator_template.dart index 657e440db9..a73472f067 100644 --- a/dev/tools/gen_defaults/lib/input_decorator_template.dart +++ b/dev/tools/gen_defaults/lib/input_decorator_template.dart @@ -34,9 +34,9 @@ class _${blockName}DefaultsM3 extends InputDecorationTheme { @override TextStyle? get hintStyle => MaterialStateTextStyle.resolveWith((Set states) { if (states.contains(MaterialState.disabled)) { - return TextStyle(color: ${componentColor('md.comp.filled-text-field.disabled.supporting-text')}); + return TextStyle(color: Theme.of(context).disabledColor); } - return TextStyle(color: ${componentColor('md.comp.filled-text-field.supporting-text')}); + return TextStyle(color: Theme.of(context).hintColor); }); @override diff --git a/packages/flutter/lib/src/material/input_decorator.dart b/packages/flutter/lib/src/material/input_decorator.dart index 1803349dab..1e2642533e 100644 --- a/packages/flutter/lib/src/material/input_decorator.dart +++ b/packages/flutter/lib/src/material/input_decorator.dart @@ -1754,10 +1754,8 @@ class InputDecorator extends StatefulWidget { /// The style on which to base the label, hint, counter, and error styles /// if the [decoration] does not provide explicit styles. /// - /// If null, [TextTheme.bodyLarge] will be used. - /// - /// If null and [ThemeData.useMaterial3] is false, [TextTheme.titleMedium] will - /// be used. + /// If null, [baseStyle] defaults to the `titleMedium` style from the + /// current [Theme], see [ThemeData.textTheme]. /// /// The [TextStyle.textBaseline] of the [baseStyle] is used to determine /// the baseline used for text alignment. @@ -2064,7 +2062,7 @@ class _InputDecoratorState extends State with TickerProviderStat final TextStyle? style = MaterialStateProperty.resolveAs(decoration.hintStyle, materialState) ?? MaterialStateProperty.resolveAs(themeData.inputDecorationTheme.hintStyle, materialState); - return (themeData.useMaterial3 ? themeData.textTheme.bodyLarge! : themeData.textTheme.titleMedium!) + return themeData.textTheme.titleMedium! .merge(widget.baseStyle) .merge(defaultStyle) .merge(style); @@ -4674,9 +4672,9 @@ class _InputDecoratorDefaultsM3 extends InputDecorationTheme { @override TextStyle? get hintStyle => MaterialStateTextStyle.resolveWith((Set states) { if (states.contains(MaterialState.disabled)) { - return TextStyle(color: _colors.onSurface.withOpacity(0.38)); + return TextStyle(color: Theme.of(context).disabledColor); } - return TextStyle(color: _colors.onSurfaceVariant); + return TextStyle(color: Theme.of(context).hintColor); }); @override diff --git a/packages/flutter/test/material/input_decorator_test.dart b/packages/flutter/test/material/input_decorator_test.dart index aae3963f09..2930e756ea 100644 --- a/packages/flutter/test/material/input_decorator_test.dart +++ b/packages/flutter/test/material/input_decorator_test.dart @@ -2835,8 +2835,10 @@ void main() { expect(getHintOpacity(tester), 1.0); final ThemeData theme = Theme.of(tester.element(findDecorator())); - final Color expectedColor = theme.colorScheme.onSurfaceVariant; - final TextStyle expectedStyle = theme.textTheme.bodyLarge!.copyWith(color: expectedColor); + // TODO(bleroux): from M3 specification, it should be theme.colorScheme.onSurface. + final Color expectedColor = theme.hintColor; + // TODO(bleroux): from M3 specification, it should be textTheme.bodyLarge. + final TextStyle expectedStyle = theme.textTheme.titleMedium!.copyWith(color: expectedColor); expect(getHintStyle(tester), expectedStyle); }); }); @@ -2899,8 +2901,10 @@ void main() { expect(getHintOpacity(tester), 1.0); final ThemeData theme = Theme.of(tester.element(findDecorator())); - final Color expectedColor = theme.colorScheme.onSurface.withOpacity(0.38); - final TextStyle expectedStyle = theme.textTheme.bodyLarge!.copyWith(color: expectedColor); + // TODO(bleroux): from M3 specification, it should be theme.colorScheme.onSurface.withOpacity(0.38). + final Color expectedColor = theme.disabledColor; + // TODO(bleroux): from M3 specification, it should be textTheme.bodyLarge. + final TextStyle expectedStyle = theme.textTheme.titleMedium!.copyWith(color: expectedColor); expect(getHintStyle(tester), expectedStyle); }); }); @@ -2963,8 +2967,10 @@ void main() { expect(getHintOpacity(tester), 1.0); final ThemeData theme = Theme.of(tester.element(findDecorator())); - final Color expectedColor = theme.colorScheme.onSurfaceVariant; - final TextStyle expectedStyle = theme.textTheme.bodyLarge!.copyWith(color: expectedColor); + // TODO(bleroux): from M3 specification, it should be theme.colorScheme.onSurface. + final Color expectedColor = theme.hintColor; + // TODO(bleroux): from M3 specification, it should be textTheme.bodyLarge. + final TextStyle expectedStyle = theme.textTheme.titleMedium!.copyWith(color: expectedColor); expect(getHintStyle(tester), expectedStyle); }); }); @@ -3027,8 +3033,10 @@ void main() { expect(getHintOpacity(tester), 1.0); final ThemeData theme = Theme.of(tester.element(findDecorator())); - final Color expectedColor = theme.colorScheme.onSurfaceVariant; - final TextStyle expectedStyle = theme.textTheme.bodyLarge!.copyWith(color: expectedColor); + // TODO(bleroux): from M3 specification, it should be theme.colorScheme.onSurface. + final Color expectedColor = theme.hintColor; + // TODO(bleroux): from M3 specification, it should be textTheme.bodyLarge. + final TextStyle expectedStyle = theme.textTheme.titleMedium!.copyWith(color: expectedColor); expect(getHintStyle(tester), expectedStyle); }); }); @@ -3091,8 +3099,10 @@ void main() { expect(getHintOpacity(tester), 1.0); final ThemeData theme = Theme.of(tester.element(findDecorator())); - final Color expectedColor = theme.colorScheme.onSurfaceVariant; - final TextStyle expectedStyle = theme.textTheme.bodyLarge!.copyWith(color: expectedColor); + // TODO(bleroux): from M3 specification, it should be theme.colorScheme.onSurface. + final Color expectedColor = theme.hintColor; + // TODO(bleroux): from M3 specification, it should be textTheme.bodyLarge. + final TextStyle expectedStyle = theme.textTheme.titleMedium!.copyWith(color: expectedColor); expect(getHintStyle(tester), expectedStyle); }); }); @@ -3299,8 +3309,10 @@ void main() { expect(getHintOpacity(tester), 1.0); final ThemeData theme = Theme.of(tester.element(findDecorator())); - final Color expectedColor = theme.colorScheme.onSurfaceVariant; - final TextStyle expectedStyle = theme.textTheme.bodyLarge!.copyWith(color: expectedColor); + // TODO(bleroux): from M3 specification, it should be theme.colorScheme.onSurface. + final Color expectedColor = theme.hintColor; + // TODO(bleroux): from M3 specification, it should be textTheme.bodyLarge. + final TextStyle expectedStyle = theme.textTheme.titleMedium!.copyWith(color: expectedColor); expect(getHintStyle(tester), expectedStyle); }); }); @@ -3411,8 +3423,10 @@ void main() { expect(getHintOpacity(tester), 1.0); final ThemeData theme = Theme.of(tester.element(findDecorator())); - final Color expectedColor = theme.colorScheme.onSurfaceVariant; - final TextStyle expectedStyle = theme.textTheme.bodyLarge!.copyWith(color: expectedColor); + // TODO(bleroux): from M3 specification, it should be theme.colorScheme.onSurface. + final Color expectedColor = theme.hintColor; + // TODO(bleroux): from M3 specification, it should be textTheme.bodyLarge. + final TextStyle expectedStyle = theme.textTheme.titleMedium!.copyWith(color: expectedColor); expect(getHintStyle(tester), expectedStyle); }); }); @@ -3475,8 +3489,10 @@ void main() { expect(getHintOpacity(tester), 1.0); final ThemeData theme = Theme.of(tester.element(findDecorator())); - final Color expectedColor = theme.colorScheme.onSurface.withOpacity(0.38); - final TextStyle expectedStyle = theme.textTheme.bodyLarge!.copyWith(color: expectedColor); + // TODO(bleroux): from M3 specification, it should be theme.colorScheme.onSurface.withOpacity(0.38). + final Color expectedColor = theme.disabledColor; + // TODO(bleroux): from M3 specification, it should be textTheme.bodyLarge. + final TextStyle expectedStyle = theme.textTheme.titleMedium!.copyWith(color: expectedColor); expect(getHintStyle(tester), expectedStyle); }); }); @@ -3539,8 +3555,10 @@ void main() { expect(getHintOpacity(tester), 1.0); final ThemeData theme = Theme.of(tester.element(findDecorator())); - final Color expectedColor = theme.colorScheme.onSurfaceVariant; - final TextStyle expectedStyle = theme.textTheme.bodyLarge!.copyWith(color: expectedColor); + // TODO(bleroux): from M3 specification, it should be theme.colorScheme.onSurface. + final Color expectedColor = theme.hintColor; + // TODO(bleroux): from M3 specification, it should be textTheme.bodyLarge. + final TextStyle expectedStyle = theme.textTheme.titleMedium!.copyWith(color: expectedColor); expect(getHintStyle(tester), expectedStyle); }); }); @@ -3603,8 +3621,10 @@ void main() { expect(getHintOpacity(tester), 1.0); final ThemeData theme = Theme.of(tester.element(findDecorator())); - final Color expectedColor = theme.colorScheme.onSurfaceVariant; - final TextStyle expectedStyle = theme.textTheme.bodyLarge!.copyWith(color: expectedColor); + // TODO(bleroux): from M3 specification, it should be theme.colorScheme.onSurface. + final Color expectedColor = theme.hintColor; + // TODO(bleroux): from M3 specification, it should be textTheme.bodyLarge. + final TextStyle expectedStyle = theme.textTheme.titleMedium!.copyWith(color: expectedColor); expect(getHintStyle(tester), expectedStyle); }); }); @@ -3667,8 +3687,10 @@ void main() { expect(getHintOpacity(tester), 1.0); final ThemeData theme = Theme.of(tester.element(findDecorator())); - final Color expectedColor = theme.colorScheme.onSurfaceVariant; - final TextStyle expectedStyle = theme.textTheme.bodyLarge!.copyWith(color: expectedColor); + // TODO(bleroux): from M3 specification, it should be theme.colorScheme.onSurface. + final Color expectedColor = theme.hintColor; + // TODO(bleroux): from M3 specification, it should be textTheme.bodyLarge. + final TextStyle expectedStyle = theme.textTheme.titleMedium!.copyWith(color: expectedColor); expect(getHintStyle(tester), expectedStyle); }); }); @@ -3873,8 +3895,10 @@ void main() { expect(getHintOpacity(tester), 1.0); final ThemeData theme = Theme.of(tester.element(findDecorator())); - final Color expectedColor = theme.colorScheme.onSurfaceVariant; - final TextStyle expectedStyle = theme.textTheme.bodyLarge!.copyWith(color: expectedColor); + // TODO(bleroux): from M3 specification, it should be theme.colorScheme.onSurface. + final Color expectedColor = theme.hintColor; + // TODO(bleroux): from M3 specification, it should be textTheme.bodyLarge. + final TextStyle expectedStyle = theme.textTheme.titleMedium!.copyWith(color: expectedColor); expect(getHintStyle(tester), expectedStyle); }); }); diff --git a/packages/flutter/test/material/text_field_test.dart b/packages/flutter/test/material/text_field_test.dart index e1e65d14df..516f4332e5 100644 --- a/packages/flutter/test/material/text_field_test.dart +++ b/packages/flutter/test/material/text_field_test.dart @@ -5409,38 +5409,11 @@ 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], );