Unverified Commit c7d4b32f authored by Qun Cheng's avatar Qun Cheng Committed by GitHub

Update the default outline color for `OutlinedButton` (#138768)

Fix b/311343182

This is to update the default outline for `OutlinedButton`. When the button is focused, the outline color should be primary color.
parent 843074c5
Versions used, v0_162, v0_158 Versions used, v0_162, v0_202, v0_158
md.comp.assist-chip.container.shape, md.comp.assist-chip.container.shape,
md.comp.assist-chip.container.surface-tint-layer.color, md.comp.assist-chip.container.surface-tint-layer.color,
md.comp.assist-chip.elevated.container.elevation, md.comp.assist-chip.elevated.container.elevation,
...@@ -453,6 +453,7 @@ md.comp.outlined-button.disabled.label-text.color, ...@@ -453,6 +453,7 @@ md.comp.outlined-button.disabled.label-text.color,
md.comp.outlined-button.disabled.label-text.opacity, md.comp.outlined-button.disabled.label-text.opacity,
md.comp.outlined-button.disabled.outline.color, md.comp.outlined-button.disabled.outline.color,
md.comp.outlined-button.disabled.outline.opacity, md.comp.outlined-button.disabled.outline.opacity,
md.comp.outlined-button.focus.outline.color,
md.comp.outlined-button.focus.state-layer.color, md.comp.outlined-button.focus.state-layer.color,
md.comp.outlined-button.focus.state-layer.opacity, md.comp.outlined-button.focus.state-layer.opacity,
md.comp.outlined-button.hover.state-layer.color, md.comp.outlined-button.hover.state-layer.color,
......
...@@ -136,6 +136,9 @@ ${tokenAvailable("$tokenGroup.outline.color") ? ''' ...@@ -136,6 +136,9 @@ ${tokenAvailable("$tokenGroup.outline.color") ? '''
if (states.contains(MaterialState.disabled)) { if (states.contains(MaterialState.disabled)) {
return ${border("$tokenGroup.disabled.outline")}; return ${border("$tokenGroup.disabled.outline")};
} }
if (states.contains(MaterialState.focused)) {
return ${border('$tokenGroup.focus.outline')};
}
return ${border("$tokenGroup.outline")}; return ${border("$tokenGroup.outline")};
});''' : ''' });''' : '''
// No default side'''} // No default side'''}
......
...@@ -545,6 +545,9 @@ class _OutlinedButtonDefaultsM3 extends ButtonStyle { ...@@ -545,6 +545,9 @@ class _OutlinedButtonDefaultsM3 extends ButtonStyle {
if (states.contains(MaterialState.disabled)) { if (states.contains(MaterialState.disabled)) {
return BorderSide(color: _colors.onSurface.withOpacity(0.12)); return BorderSide(color: _colors.onSurface.withOpacity(0.12));
} }
if (states.contains(MaterialState.focused)) {
return BorderSide(color: _colors.primary);
}
return BorderSide(color: _colors.outline); return BorderSide(color: _colors.outline);
}); });
......
...@@ -259,6 +259,8 @@ void main() { ...@@ -259,6 +259,8 @@ void main() {
}); });
testWidgetsWithLeakTracking('Does OutlinedButton work with focus', (WidgetTester tester) async { testWidgetsWithLeakTracking('Does OutlinedButton work with focus', (WidgetTester tester) async {
final ThemeData theme = ThemeData();
final ColorScheme colors = theme.colorScheme;
const Color focusColor = Color(0xff001122); const Color focusColor = Color(0xff001122);
Color? getOverlayColor(Set<MaterialState> states) { Color? getOverlayColor(Set<MaterialState> states) {
...@@ -267,9 +269,9 @@ void main() { ...@@ -267,9 +269,9 @@ void main() {
final FocusNode focusNode = FocusNode(debugLabel: 'OutlinedButton Node'); final FocusNode focusNode = FocusNode(debugLabel: 'OutlinedButton Node');
await tester.pumpWidget( await tester.pumpWidget(
Directionality( MaterialApp(
textDirection: TextDirection.ltr, theme: theme,
child: OutlinedButton( home: OutlinedButton(
style: ButtonStyle( style: ButtonStyle(
overlayColor: MaterialStateProperty.resolveWith<Color?>(getOverlayColor), overlayColor: MaterialStateProperty.resolveWith<Color?>(getOverlayColor),
), ),
...@@ -287,10 +289,21 @@ void main() { ...@@ -287,10 +289,21 @@ void main() {
final RenderObject inkFeatures = tester.allRenderObjects.firstWhere((RenderObject object) => object.runtimeType.toString() == '_RenderInkFeatures'); final RenderObject inkFeatures = tester.allRenderObjects.firstWhere((RenderObject object) => object.runtimeType.toString() == '_RenderInkFeatures');
expect(inkFeatures, paints..rect(color: focusColor)); expect(inkFeatures, paints..rect(color: focusColor));
final Finder buttonMaterial = find.descendant(
of: find.byType(OutlinedButton),
matching: find.byType(Material),
);
final Material material = tester.widget<Material>(buttonMaterial);
expect(material.shape, StadiumBorder(side: BorderSide(color: colors.primary)));
focusNode.dispose(); focusNode.dispose();
}); });
testWidgetsWithLeakTracking('Does OutlinedButton work with autofocus', (WidgetTester tester) async { testWidgetsWithLeakTracking('Does OutlinedButton work with autofocus', (WidgetTester tester) async {
final ThemeData theme = ThemeData();
final ColorScheme colors = theme.colorScheme;
const Color focusColor = Color(0xff001122); const Color focusColor = Color(0xff001122);
Color? getOverlayColor(Set<MaterialState> states) { Color? getOverlayColor(Set<MaterialState> states) {
...@@ -299,9 +312,9 @@ void main() { ...@@ -299,9 +312,9 @@ void main() {
final FocusNode focusNode = FocusNode(debugLabel: 'OutlinedButton Node'); final FocusNode focusNode = FocusNode(debugLabel: 'OutlinedButton Node');
await tester.pumpWidget( await tester.pumpWidget(
Directionality( MaterialApp(
textDirection: TextDirection.ltr, theme: theme,
child: OutlinedButton( home: OutlinedButton(
autofocus: true, autofocus: true,
style: ButtonStyle( style: ButtonStyle(
overlayColor: MaterialStateProperty.resolveWith<Color?>(getOverlayColor), overlayColor: MaterialStateProperty.resolveWith<Color?>(getOverlayColor),
...@@ -319,6 +332,15 @@ void main() { ...@@ -319,6 +332,15 @@ void main() {
final RenderObject inkFeatures = tester.allRenderObjects.firstWhere((RenderObject object) => object.runtimeType.toString() == '_RenderInkFeatures'); final RenderObject inkFeatures = tester.allRenderObjects.firstWhere((RenderObject object) => object.runtimeType.toString() == '_RenderInkFeatures');
expect(inkFeatures, paints..rect(color: focusColor)); expect(inkFeatures, paints..rect(color: focusColor));
final Finder buttonMaterial = find.descendant(
of: find.byType(OutlinedButton),
matching: find.byType(Material),
);
final Material material = tester.widget<Material>(buttonMaterial);
expect(material.shape, StadiumBorder(side: BorderSide(color: colors.primary)));
focusNode.dispose(); focusNode.dispose();
}); });
......
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