Unverified Commit 3403ca41 authored by Taha Tesser's avatar Taha Tesser Committed by GitHub

Update `hourMinuteTextStyle` defaults for Material 3 Time Picker (#143749)

fixes [`hourMinuteTextStyle` Material 3 default doesn't match the specs](https://github.com/flutter/flutter/issues/143748)

This updates `hourMinuteTextStyle` defaults to match Material 3 specs. `hourMinuteTextStyle` should use different font style for different entry modes based on the specs.

### Specs
![Screenshot 2024-02-20 at 15 06 40](https://github.com/flutter/flutter/assets/48603081/5198a5da-314d-401e-8d7f-d4a68b86e43c)
![Screenshot 2024-02-20 at 15 07 22](https://github.com/flutter/flutter/assets/48603081/79436ce4-fef6-480a-bc43-b628497e860f)

### Before
```dart
 return _textTheme.displayMedium!.copyWith(color: _hourMinuteTextColor.resolve(states));
```
### After 
```dart
      return entryMode == TimePickerEntryMode.dial
        ? _textTheme.displayLarge!.copyWith(color: _hourMinuteTextColor.resolve(states))
        : _textTheme.displayMedium!.copyWith(color: _hourMinuteTextColor.resolve(states));
```
parent 35fd7062
...@@ -19,9 +19,10 @@ class TimePickerTemplate extends TokenTemplate { ...@@ -19,9 +19,10 @@ class TimePickerTemplate extends TokenTemplate {
@override @override
String generate() => ''' String generate() => '''
class _${blockName}DefaultsM3 extends _TimePickerDefaults { class _${blockName}DefaultsM3 extends _TimePickerDefaults {
_${blockName}DefaultsM3(this.context); _${blockName}DefaultsM3(this.context, { this.entryMode = TimePickerEntryMode.dial });
final BuildContext context; final BuildContext context;
final TimePickerEntryMode entryMode;
late final ColorScheme _colors = Theme.of(context).colorScheme; late final ColorScheme _colors = Theme.of(context).colorScheme;
late final TextTheme _textTheme = Theme.of(context).textTheme; late final TextTheme _textTheme = Theme.of(context).textTheme;
...@@ -284,7 +285,12 @@ class _${blockName}DefaultsM3 extends _TimePickerDefaults { ...@@ -284,7 +285,12 @@ class _${blockName}DefaultsM3 extends _TimePickerDefaults {
// TODO(tahatesser): Update this when https://github.com/flutter/flutter/issues/131247 is fixed. // TODO(tahatesser): Update this when https://github.com/flutter/flutter/issues/131247 is fixed.
// This is using the correct text style from Material 3 spec. // This is using the correct text style from Material 3 spec.
// https://m3.material.io/components/time-pickers/specs#fd0b6939-edab-4058-82e1-93d163945215 // https://m3.material.io/components/time-pickers/specs#fd0b6939-edab-4058-82e1-93d163945215
return _textTheme.displayMedium!.copyWith(color: _hourMinuteTextColor.resolve(states)); return switch (entryMode) {
TimePickerEntryMode.dial || TimePickerEntryMode.dialOnly
=> _textTheme.displayLarge!.copyWith(color: _hourMinuteTextColor.resolve(states)),
TimePickerEntryMode.input || TimePickerEntryMode.inputOnly
=> _textTheme.displayMedium!.copyWith(color: _hourMinuteTextColor.resolve(states)),
};
}); });
} }
......
...@@ -2752,7 +2752,7 @@ class _TimePickerState extends State<_TimePicker> with RestorationMixin { ...@@ -2752,7 +2752,7 @@ class _TimePickerState extends State<_TimePicker> with RestorationMixin {
assert(debugCheckHasMediaQuery(context)); assert(debugCheckHasMediaQuery(context));
final TimeOfDayFormat timeOfDayFormat = localizations.timeOfDayFormat(alwaysUse24HourFormat: MediaQuery.alwaysUse24HourFormatOf(context)); final TimeOfDayFormat timeOfDayFormat = localizations.timeOfDayFormat(alwaysUse24HourFormat: MediaQuery.alwaysUse24HourFormatOf(context));
final ThemeData theme = Theme.of(context); final ThemeData theme = Theme.of(context);
final _TimePickerDefaults defaultTheme = theme.useMaterial3 ? _TimePickerDefaultsM3(context) : _TimePickerDefaultsM2(context); final _TimePickerDefaults defaultTheme = theme.useMaterial3 ? _TimePickerDefaultsM3(context, entryMode: widget.entryMode) : _TimePickerDefaultsM2(context);
final Orientation orientation = _orientation.value ?? MediaQuery.orientationOf(context); final Orientation orientation = _orientation.value ?? MediaQuery.orientationOf(context);
final HourFormat timeOfDayHour = hourFormat(of: timeOfDayFormat); final HourFormat timeOfDayHour = hourFormat(of: timeOfDayFormat);
final _HourDialType hourMode = switch (timeOfDayHour) { final _HourDialType hourMode = switch (timeOfDayHour) {
...@@ -3347,9 +3347,10 @@ class _TimePickerDefaultsM2 extends _TimePickerDefaults { ...@@ -3347,9 +3347,10 @@ class _TimePickerDefaultsM2 extends _TimePickerDefaults {
// dev/tools/gen_defaults/bin/gen_defaults.dart. // dev/tools/gen_defaults/bin/gen_defaults.dart.
class _TimePickerDefaultsM3 extends _TimePickerDefaults { class _TimePickerDefaultsM3 extends _TimePickerDefaults {
_TimePickerDefaultsM3(this.context); _TimePickerDefaultsM3(this.context, { this.entryMode = TimePickerEntryMode.dial });
final BuildContext context; final BuildContext context;
final TimePickerEntryMode entryMode;
late final ColorScheme _colors = Theme.of(context).colorScheme; late final ColorScheme _colors = Theme.of(context).colorScheme;
late final TextTheme _textTheme = Theme.of(context).textTheme; late final TextTheme _textTheme = Theme.of(context).textTheme;
...@@ -3612,7 +3613,12 @@ class _TimePickerDefaultsM3 extends _TimePickerDefaults { ...@@ -3612,7 +3613,12 @@ class _TimePickerDefaultsM3 extends _TimePickerDefaults {
// TODO(tahatesser): Update this when https://github.com/flutter/flutter/issues/131247 is fixed. // TODO(tahatesser): Update this when https://github.com/flutter/flutter/issues/131247 is fixed.
// This is using the correct text style from Material 3 spec. // This is using the correct text style from Material 3 spec.
// https://m3.material.io/components/time-pickers/specs#fd0b6939-edab-4058-82e1-93d163945215 // https://m3.material.io/components/time-pickers/specs#fd0b6939-edab-4058-82e1-93d163945215
return _textTheme.displayMedium!.copyWith(color: _hourMinuteTextColor.resolve(states)); return switch (entryMode) {
TimePickerEntryMode.dial || TimePickerEntryMode.dialOnly
=> _textTheme.displayLarge!.copyWith(color: _hourMinuteTextColor.resolve(states)),
TimePickerEntryMode.input || TimePickerEntryMode.inputOnly
=> _textTheme.displayMedium!.copyWith(color: _hourMinuteTextColor.resolve(states)),
};
}); });
} }
......
...@@ -244,8 +244,16 @@ class TimePickerThemeData with Diagnosticable { ...@@ -244,8 +244,16 @@ class TimePickerThemeData with Diagnosticable {
/// Used to configure the [TextStyle]s for the hour/minute controls. /// Used to configure the [TextStyle]s for the hour/minute controls.
/// ///
/// If this is null, the time picker defaults to the overall theme's /// If this is null and entry mode is [TimePickerEntryMode.dial], the time
/// [TextTheme.headline3]. /// picker defaults to the overall theme's [TextTheme.displayLarge] with
/// the value of [hourMinuteTextColor].
///
/// If this is null and entry mode is [TimePickerEntryMode.input], the time
/// picker defaults to the overall theme's [TextTheme.displayMedium] with
/// the value of [hourMinuteTextColor].
///
/// If this is null and [ThemeData.useMaterial3] is false, the time picker
/// defaults to the overall theme's [TextTheme.displayMedium].
final TextStyle? hourMinuteTextStyle; final TextStyle? hourMinuteTextStyle;
/// The input decoration theme for the [TextField]s in the time picker. /// The input decoration theme for the [TextField]s in the time picker.
......
...@@ -285,22 +285,22 @@ void main() { ...@@ -285,22 +285,22 @@ void main() {
final RenderParagraph hourText = _textRenderParagraph(tester, '7'); final RenderParagraph hourText = _textRenderParagraph(tester, '7');
expect( expect(
hourText.text.style, hourText.text.style,
Typography.material2021().englishLike.displayMedium! Typography.material2021().englishLike.displayLarge!
.merge(Typography.material2021().black.displayMedium) .merge(Typography.material2021().black.displayLarge)
.copyWith( .copyWith(
color: defaultTheme.colorScheme.onPrimaryContainer, color: defaultTheme.colorScheme.onPrimaryContainer,
decorationColor: defaultTheme.colorScheme.onSurface decorationColor: defaultTheme.colorScheme.onSurface,
), ),
); );
final RenderParagraph minuteText = _textRenderParagraph(tester, '15'); final RenderParagraph minuteText = _textRenderParagraph(tester, '15');
expect( expect(
minuteText.text.style, minuteText.text.style,
Typography.material2021().englishLike.displayMedium! Typography.material2021().englishLike.displayLarge!
.merge(Typography.material2021().black.displayMedium) .merge(Typography.material2021().black.displayLarge)
.copyWith( .copyWith(
color: defaultTheme.colorScheme.onSurface, color: defaultTheme.colorScheme.onSurface,
decorationColor: defaultTheme.colorScheme.onSurface decorationColor: defaultTheme.colorScheme.onSurface,
), ),
); );
...@@ -457,6 +457,28 @@ void main() { ...@@ -457,6 +457,28 @@ void main() {
await tester.tap(find.text('X')); await tester.tap(find.text('X'));
await tester.pumpAndSettle(const Duration(seconds: 1)); await tester.pumpAndSettle(const Duration(seconds: 1));
final TextStyle hourTextStyle = _textField(tester, '7').style!;
expect(
hourTextStyle,
Typography.material2021().englishLike.displayMedium!
.merge(Typography.material2021().black.displayMedium)
.copyWith(
color: defaultTheme.colorScheme.onSurface,
decorationColor: defaultTheme.colorScheme.onSurface,
),
);
final TextStyle minuteTextStyle = _textField(tester, '15').style!;
expect(
minuteTextStyle,
Typography.material2021().englishLike.displayMedium!
.merge(Typography.material2021().black.displayMedium)
.copyWith(
color: defaultTheme.colorScheme.onSurface,
decorationColor: defaultTheme.colorScheme.onSurface,
),
);
final InputDecoration hourDecoration = _textField(tester, '7').decoration!; final InputDecoration hourDecoration = _textField(tester, '7').decoration!;
expect(hourDecoration.filled, true); expect(hourDecoration.filled, true);
expect(hourDecoration.fillColor, defaultTheme.colorScheme.surfaceContainerHighest); expect(hourDecoration.fillColor, defaultTheme.colorScheme.surfaceContainerHighest);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment