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.
This commit is contained in:
parent
843074c5bd
commit
c7d4b32fdd
@ -1,4 +1,4 @@
|
||||
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();
|
||||
});
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user