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.surface-tint-layer.color,
md.comp.assist-chip.elevated.container.elevation,
......@@ -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.outline.color,
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.opacity,
md.comp.outlined-button.hover.state-layer.color,
......
......@@ -136,6 +136,9 @@ ${tokenAvailable("$tokenGroup.outline.color") ? '''
if (states.contains(MaterialState.disabled)) {
return ${border("$tokenGroup.disabled.outline")};
}
if (states.contains(MaterialState.focused)) {
return ${border('$tokenGroup.focus.outline')};
}
return ${border("$tokenGroup.outline")};
});''' : '''
// No default side'''}
......
......@@ -545,6 +545,9 @@ class _OutlinedButtonDefaultsM3 extends ButtonStyle {
if (states.contains(MaterialState.disabled)) {
return BorderSide(color: _colors.onSurface.withOpacity(0.12));
}
if (states.contains(MaterialState.focused)) {
return BorderSide(color: _colors.primary);
}
return BorderSide(color: _colors.outline);
});
......
......@@ -259,6 +259,8 @@ void main() {
});
testWidgetsWithLeakTracking('Does OutlinedButton work with focus', (WidgetTester tester) async {
final ThemeData theme = ThemeData();
final ColorScheme colors = theme.colorScheme;
const Color focusColor = Color(0xff001122);
Color? getOverlayColor(Set<MaterialState> states) {
......@@ -267,9 +269,9 @@ void main() {
final FocusNode focusNode = FocusNode(debugLabel: 'OutlinedButton Node');
await tester.pumpWidget(
Directionality(
textDirection: TextDirection.ltr,
child: OutlinedButton(
MaterialApp(
theme: theme,
home: OutlinedButton(
style: ButtonStyle(
overlayColor: MaterialStateProperty.resolveWith<Color?>(getOverlayColor),
),
......@@ -287,10 +289,21 @@ void main() {
final RenderObject inkFeatures = tester.allRenderObjects.firstWhere((RenderObject object) => object.runtimeType.toString() == '_RenderInkFeatures');
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();
});
testWidgetsWithLeakTracking('Does OutlinedButton work with autofocus', (WidgetTester tester) async {
final ThemeData theme = ThemeData();
final ColorScheme colors = theme.colorScheme;
const Color focusColor = Color(0xff001122);
Color? getOverlayColor(Set<MaterialState> states) {
......@@ -299,9 +312,9 @@ void main() {
final FocusNode focusNode = FocusNode(debugLabel: 'OutlinedButton Node');
await tester.pumpWidget(
Directionality(
textDirection: TextDirection.ltr,
child: OutlinedButton(
MaterialApp(
theme: theme,
home: OutlinedButton(
autofocus: true,
style: ButtonStyle(
overlayColor: MaterialStateProperty.resolveWith<Color?>(getOverlayColor),
......@@ -319,6 +332,15 @@ void main() {
final RenderObject inkFeatures = tester.allRenderObjects.firstWhere((RenderObject object) => object.runtimeType.toString() == '_RenderInkFeatures');
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();
});
......
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