firka/flutter
firka/flutter
5
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Reverts "Fix InputDecorator default hint text style on M3 (#148944)" (#149448)

Browse Source 
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.
This commit is contained in:
auto-submit[bot] 2024-05-31 22:06:26 +00:00 committed by GitHub
parent df17f36238
commit fc8ab3b4b4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 55 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dev/tools/gen_defaults/lib/input_decorator_template.dart
View File

@ -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: ${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

12
packages/flutter/lib/src/material/input_decorator.dart
View File

@ -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<InputDecorator> 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<MaterialState> 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

72
packages/flutter/test/material/input_decorator_test.dart
View File

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

27
packages/flutter/test/material/text_field_test.dart
View File

@ -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],
);