Unverified Commit 7a6f1d81 authored by Eilidh Southren's avatar Eilidh Southren Committed by GitHub

M3 segmented buttons token fixes (#120095)

* add icon button property override

* Revert "add icon button property override"

This reverts commit 6c7f4d30671f417d0f4a311bdb186bd4ebc456c8.

* segmented button updates

* button changes

* fix

* put that thing back where it came from

* template updates

* analyzer fixes

* rename parameter

* analyzer fixes

* string interpolation fix

* template updates

* test updates
parent a808ba05
......@@ -167,7 +167,7 @@ Future<void> main(List<String> args) async {
PopupMenuTemplate('PopupMenu', '$materialLib/popup_menu.dart', tokens).updateFile();
ProgressIndicatorTemplate('ProgressIndicator', '$materialLib/progress_indicator.dart', tokens).updateFile();
RadioTemplate('Radio<T>', '$materialLib/radio.dart', tokens).updateFile();
SegmentedButtonTemplate('SegmentedButton', '$materialLib/segmented_button.dart', tokens).updateFile();
SegmentedButtonTemplate('md.comp.outlined-segmented-button', 'SegmentedButton', '$materialLib/segmented_button.dart', tokens).updateFile();
SnackbarTemplate('md.comp.snackbar', 'Snackbar', '$materialLib/snack_bar.dart', tokens).updateFile();
SliderTemplate('md.comp.slider', 'Slider', '$materialLib/slider.dart', tokens).updateFile();
SurfaceTintTemplate('SurfaceTint', '$materialLib/elevation_overlay.dart', tokens).updateFile();
......
......@@ -5,10 +5,12 @@
import 'template.dart';
class SegmentedButtonTemplate extends TokenTemplate {
const SegmentedButtonTemplate(super.blockName, super.fileName, super.tokens, {
const SegmentedButtonTemplate(this.tokenGroup, super.blockName, super.fileName, super.tokens, {
super.colorSchemePrefix = '_colors.',
});
final String tokenGroup;
String _layerOpacity(String layerToken) {
if (tokens.containsKey(layerToken)) {
final String? layerValue = tokens[layerToken] as String?;
......@@ -33,90 +35,88 @@ class SegmentedButtonTemplate extends TokenTemplate {
@override
String generate() => '''
class _SegmentedButtonDefaultsM3 extends SegmentedButtonThemeData {
_SegmentedButtonDefaultsM3(this.context);
class _${blockName}DefaultsM3 extends SegmentedButtonThemeData {
_${blockName}DefaultsM3(this.context);
final BuildContext context;
late final ThemeData _theme = Theme.of(context);
late final ColorScheme _colors = _theme.colorScheme;
@override ButtonStyle? get style {
return ButtonStyle(
textStyle: MaterialStatePropertyAll<TextStyle?>(${textStyle('md.comp.outlined-segmented-button.label-text')}),
textStyle: MaterialStatePropertyAll<TextStyle?>(${textStyle('$tokenGroup.label-text')}),
backgroundColor: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
if (states.contains(MaterialState.disabled)) {
return ${componentColor('md.comp.outlined-segmented-button.disabled')};
return ${componentColor('$tokenGroup.disabled')};
}
if (states.contains(MaterialState.selected)) {
return ${componentColor('md.comp.outlined-segmented-button.selected.container')};
return ${componentColor('$tokenGroup.selected.container')};
}
return ${componentColor('md.comp.outlined-segmented-button.unselected.container')};
return ${componentColor('$tokenGroup.unselected.container')};
}),
foregroundColor: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
if (states.contains(MaterialState.disabled)) {
return ${componentColor('md.comp.outlined-segmented-button.disabled.label-text')};
return ${componentColor('$tokenGroup.disabled.label-text')};
}
if (states.contains(MaterialState.selected)) {
if (states.contains(MaterialState.pressed)) {
return ${componentColor('md.comp.outlined-segmented-button.selected.pressed.label-text')};
return ${componentColor('$tokenGroup.selected.pressed.label-text')};
}
if (states.contains(MaterialState.hovered)) {
return ${componentColor('md.comp.outlined-segmented-button.selected.hover.label-text')};
return ${componentColor('$tokenGroup.selected.hover.label-text')};
}
if (states.contains(MaterialState.focused)) {
return ${componentColor('md.comp.outlined-segmented-button.selected.focus.label-text')};
return ${componentColor('$tokenGroup.selected.focus.label-text')};
}
return ${componentColor('md.comp.outlined-segmented-button.selected.label-text')};
return ${componentColor('$tokenGroup.selected.label-text')};
} else {
if (states.contains(MaterialState.pressed)) {
return ${componentColor('md.comp.outlined-segmented-button.unselected.pressed.label-text')};
return ${componentColor('$tokenGroup.unselected.pressed.label-text')};
}
if (states.contains(MaterialState.hovered)) {
return ${componentColor('md.comp.outlined-segmented-button.unselected.hover.label-text')};
return ${componentColor('$tokenGroup.unselected.hover.label-text')};
}
if (states.contains(MaterialState.focused)) {
return ${componentColor('md.comp.outlined-segmented-button.unselected.focus.label-text')};
return ${componentColor('$tokenGroup.unselected.focus.label-text')};
}
return ${componentColor('md.comp.outlined-segmented-button.unselected.container')};
return ${componentColor('$tokenGroup.unselected.label-text')};
}
}),
overlayColor: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
if (states.contains(MaterialState.selected)) {
if (states.contains(MaterialState.hovered)) {
return ${_stateColor('md.comp.outlined-segmented-button', 'selected', 'hover')};
return ${_stateColor(tokenGroup, 'selected', 'hover')};
}
if (states.contains(MaterialState.focused)) {
return ${_stateColor('md.comp.outlined-segmented-button', 'selected', 'focus')};
return ${_stateColor(tokenGroup, 'selected', 'focus')};
}
if (states.contains(MaterialState.pressed)) {
return ${_stateColor('md.comp.outlined-segmented-button', 'selected', 'pressed')};
return ${_stateColor(tokenGroup, 'selected', 'pressed')};
}
} else {
if (states.contains(MaterialState.hovered)) {
return ${_stateColor('md.comp.outlined-segmented-button', 'unselected', 'hover')};
return ${_stateColor(tokenGroup, 'unselected', 'hover')};
}
if (states.contains(MaterialState.focused)) {
return ${_stateColor('md.comp.outlined-segmented-button', 'unselected', 'focus')};
return ${_stateColor(tokenGroup, 'unselected', 'focus')};
}
if (states.contains(MaterialState.pressed)) {
return ${_stateColor('md.comp.outlined-segmented-button', 'unselected', 'pressed')};
return ${_stateColor(tokenGroup, 'unselected', 'pressed')};
}
}
return null;
}),
surfaceTintColor: const MaterialStatePropertyAll<Color>(Colors.transparent),
elevation: const MaterialStatePropertyAll<double>(0),
iconSize: const MaterialStatePropertyAll<double?>(${tokens['md.comp.outlined-segmented-button.with-icon.icon.size']}),
iconSize: const MaterialStatePropertyAll<double?>(${tokens['$tokenGroup.with-icon.icon.size']}),
side: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
if (states.contains(MaterialState.disabled)) {
return ${border("md.comp.outlined-segmented-button.disabled.outline")};
return ${border("$tokenGroup.disabled.outline")};
}
return ${border("md.comp.outlined-segmented-button.outline")};
return ${border("$tokenGroup.outline")};
}),
shape: const MaterialStatePropertyAll<OutlinedBorder>(${shape("md.comp.outlined-segmented-button", '')}),
shape: const MaterialStatePropertyAll<OutlinedBorder>(${shape(tokenGroup, '')}),
minimumSize: const MaterialStatePropertyAll<Size?>(Size.fromHeight(${tokens['$tokenGroup.container.height']})),
);
}
@override
Widget? get selectedIcon => const Icon(Icons.check);
}
......
......@@ -721,11 +721,9 @@ class _RenderSegmentedButton<T> extends RenderBox with
class _SegmentedButtonDefaultsM3 extends SegmentedButtonThemeData {
_SegmentedButtonDefaultsM3(this.context);
final BuildContext context;
late final ThemeData _theme = Theme.of(context);
late final ColorScheme _colors = _theme.colorScheme;
@override ButtonStyle? get style {
return ButtonStyle(
textStyle: MaterialStatePropertyAll<TextStyle?>(Theme.of(context).textTheme.labelLarge),
......@@ -763,7 +761,7 @@ class _SegmentedButtonDefaultsM3 extends SegmentedButtonThemeData {
if (states.contains(MaterialState.focused)) {
return _colors.onSurface;
}
return null;
return _colors.onSurface;
}
}),
overlayColor: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
......@@ -800,9 +798,9 @@ class _SegmentedButtonDefaultsM3 extends SegmentedButtonThemeData {
return BorderSide(color: _colors.outline);
}),
shape: const MaterialStatePropertyAll<OutlinedBorder>(StadiumBorder()),
minimumSize: const MaterialStatePropertyAll<Size?>(Size.fromHeight(40.0)),
);
}
@override
Widget? get selectedIcon => const Icon(Icons.check);
}
......
......@@ -64,7 +64,7 @@ void main() {
final Material material = tester.widget<Material>(parent);
expect(material.color, Colors.transparent);
expect(material.shape, const RoundedRectangleBorder());
expect(material.textStyle!.color, theme.colorScheme.primary);
expect(material.textStyle!.color, theme.colorScheme.onSurface);
expect(material.textStyle!.fontFamily, 'Roboto');
expect(material.textStyle!.fontSize, 14);
expect(material.textStyle!.fontWeight, FontWeight.w500);
......
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