Skip to content

F
Front-End
Unverified Commit e739ad07 authored by hangyu's avatar hangyu Committed by GitHub
Browse files
Options

M3 Text field UI update (#113776) 

* text field update

* update tests

* lint

* polish template
parent dcc6a4c0
Hide whitespace changes
Inline Side-by-side
Showing with 91 additions and 70 deletions
dev/tools/gen_defaults/lib/input_decorator_template.dart
View file @ e739ad07
......@@ -41,20 +41,20 @@ class _${blockName}DefaultsM3 extends InputDecorationTheme {
@override
BorderSide? get activeIndicatorBorder => MaterialStateBorderSide.resolveWith((Set<MaterialState> states) {
if (states.contains(MaterialState.error)) {
if (states.contains(MaterialState.focused)) {
return ${mergedBorder('md.comp.filled-text-field.error.focus.active-indicator','md.comp.filled-text-field.focus.active-indicator')};
}
if (states.contains(MaterialState.hovered)) {
return ${border('md.comp.filled-text-field.error.hover.active-indicator')};
}${border('md.comp.filled-text-field.error.focus.active-indicator') == border('md.comp.filled-text-field.error.active-indicator') ? '' : '''
if (states.contains(MaterialState.focused)) {
return ${border('md.comp.filled-text-field.error.focus.active-indicator')};
}'''}
}
return ${border('md.comp.filled-text-field.error.active-indicator')};
}
if (states.contains(MaterialState.hovered)) {
return ${border('md.comp.filled-text-field.hover.active-indicator')};
}
if (states.contains(MaterialState.focused)) {
return ${border('md.comp.filled-text-field.focus.active-indicator')};
}
if (states.contains(MaterialState.hovered)) {
return ${border('md.comp.filled-text-field.hover.active-indicator')};
}
if (states.contains(MaterialState.disabled)) {
return ${border('md.comp.filled-text-field.disabled.active-indicator')};
}
......@@ -64,20 +64,20 @@ class _${blockName}DefaultsM3 extends InputDecorationTheme {
@override
BorderSide? get outlineBorder => MaterialStateBorderSide.resolveWith((Set<MaterialState> states) {
if (states.contains(MaterialState.error)) {
if (states.contains(MaterialState.focused)) {
return ${mergedBorder('md.comp.outlined-text-field.error.focus.outline','md.comp.outlined-text-field.focus.outline')};
}
if (states.contains(MaterialState.hovered)) {
return ${border('md.comp.outlined-text-field.error.hover.outline')};
}${border('md.comp.outlined-text-field.error.focus.outline') == border('md.comp.outlined-text-field.error.outline') ? '' : '''
if (states.contains(MaterialState.focused)) {
return ${border('md.comp.outlined-text-field.error.focus.outline')};
}'''}
}
return ${border('md.comp.outlined-text-field.error.outline')};
}
if (states.contains(MaterialState.hovered)) {
return ${border('md.comp.outlined-text-field.hover.outline')};
}
if (states.contains(MaterialState.focused)) {
return ${border('md.comp.outlined-text-field.focus.outline')};
}
if (states.contains(MaterialState.hovered)) {
return ${border('md.comp.outlined-text-field.hover.outline')};
}
if (states.contains(MaterialState.disabled)) {
return ${border('md.comp.outlined-text-field.disabled.outline')};
}
......@@ -90,19 +90,19 @@ class _${blockName}DefaultsM3 extends InputDecorationTheme {
@override
Color? get prefixIconColor => MaterialStateColor.resolveWith((Set<MaterialState> states) {${componentColor('md.comp.filled-text-field.error.leading-icon') == componentColor('md.comp.filled-text-field.leading-icon') ? '' : '''
if(states.contains(MaterialState.error)) {
if (states.contains(MaterialState.hovered)) {
return ${componentColor('md.comp.filled-text-field.error.hover.leading-icon')};
}
if (states.contains(MaterialState.focused)) {
return ${componentColor('md.comp.filled-text-field.error.focus.leading-icon')};
}
if (states.contains(MaterialState.hovered)) {
return ${componentColor('md.comp.filled-text-field.error.hover.leading-icon')};
}
return ${componentColor('md.comp.filled-text-field.error.leading-icon')};
}'''}${componentColor('md.comp.filled-text-field.hover.leading-icon') == componentColor('md.comp.filled-text-field.leading-icon') ? '' : '''
if (states.contains(MaterialState.hovered)) {
return ${componentColor('md.comp.filled-text-field.hover.leading-icon')};
}'''}${componentColor('md.comp.filled-text-field.focus.leading-icon') == componentColor('md.comp.filled-text-field.leading-icon') ? '' : '''
if (states.contains(MaterialState.focused)) {
return ${componentColor('md.comp.filled-text-field.focus.leading-icon')};
}'''}${componentColor('md.comp.filled-text-field.hover.leading-icon') == componentColor('md.comp.filled-text-field.leading-icon') ? '' : '''
if (states.contains(MaterialState.hovered)) {
return ${componentColor('md.comp.filled-text-field.hover.leading-icon')};
}'''}
if (states.contains(MaterialState.disabled)) {
return ${componentColor('md.comp.filled-text-field.disabled.leading-icon')};
......@@ -112,20 +112,20 @@ class _${blockName}DefaultsM3 extends InputDecorationTheme {
@override
Color? get suffixIconColor => MaterialStateColor.resolveWith((Set<MaterialState> states) {
if(states.contains(MaterialState.error)) {
if (states.contains(MaterialState.hovered)) {
return ${componentColor('md.comp.filled-text-field.error.hover.trailing-icon')};
}${componentColor('md.comp.filled-text-field.error.trailing-icon') == componentColor('md.comp.filled-text-field.error.focus.trailing-icon') ? '' : '''
if(states.contains(MaterialState.error)) {${componentColor('md.comp.filled-text-field.error.trailing-icon') == componentColor('md.comp.filled-text-field.error.focus.trailing-icon') ? '' : '''
if (states.contains(MaterialState.focused)) {
return ${componentColor('md.comp.filled-text-field.error.focus.trailing-icon')};
}'''}
if (states.contains(MaterialState.hovered)) {
return ${componentColor('md.comp.filled-text-field.error.hover.trailing-icon')};
}
return ${componentColor('md.comp.filled-text-field.error.trailing-icon')};
}${componentColor('md.comp.filled-text-field.hover.trailing-icon') == componentColor('md.comp.filled-text-field.trailing-icon') ? '' : '''
if (states.contains(MaterialState.hovered)) {
return ${componentColor('md.comp.filled-text-field.hover.trailing-icon')};
}'''}${componentColor('md.comp.filled-text-field.focus.trailing-icon') == componentColor('md.comp.filled-text-field.trailing-icon') ? '' : '''
}${componentColor('md.comp.filled-text-field.focus.trailing-icon') == componentColor('md.comp.filled-text-field.trailing-icon') ? '' : '''
if (states.contains(MaterialState.focused)) {
return ${componentColor('md.comp.filled-text-field.focus.trailing-icon')};
}'''}${componentColor('md.comp.filled-text-field.hover.trailing-icon') == componentColor('md.comp.filled-text-field.trailing-icon') ? '' : '''
if (states.contains(MaterialState.hovered)) {
return ${componentColor('md.comp.filled-text-field.hover.trailing-icon')};
}'''}
if (states.contains(MaterialState.disabled)) {
return ${componentColor('md.comp.filled-text-field.disabled.trailing-icon')};
......@@ -137,20 +137,20 @@ class _${blockName}DefaultsM3 extends InputDecorationTheme {
TextStyle? get labelStyle => MaterialStateTextStyle.resolveWith((Set<MaterialState> states) {
final TextStyle textStyle= ${textStyle("md.comp.filled-text-field.label-text")} ?? const TextStyle();
if(states.contains(MaterialState.error)) {
if (states.contains(MaterialState.hovered)) {
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.error.hover.label-text')});
}
if (states.contains(MaterialState.focused)) {
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.error.focus.label-text')});
}
if (states.contains(MaterialState.hovered)) {
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.error.hover.label-text')});
}
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.error.label-text')});
}
if (states.contains(MaterialState.hovered)) {
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.hover.label-text')});
}
if (states.contains(MaterialState.focused)) {
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.focus.label-text')});
}
if (states.contains(MaterialState.hovered)) {
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.hover.label-text')});
}
if (states.contains(MaterialState.disabled)) {
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.disabled.label-text')});
}
......@@ -161,20 +161,20 @@ class _${blockName}DefaultsM3 extends InputDecorationTheme {
TextStyle? get floatingLabelStyle => MaterialStateTextStyle.resolveWith((Set<MaterialState> states) {
final TextStyle textStyle= ${textStyle("md.comp.filled-text-field.label-text")} ?? const TextStyle();
if(states.contains(MaterialState.error)) {
if (states.contains(MaterialState.hovered)) {
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.error.hover.label-text')});
}
if (states.contains(MaterialState.focused)) {
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.error.focus.label-text')});
}
if (states.contains(MaterialState.hovered)) {
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.error.hover.label-text')});
}
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.error.label-text')});
}
if (states.contains(MaterialState.hovered)) {
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.hover.label-text')});
}
if (states.contains(MaterialState.focused)) {
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.focus.label-text')});
}
if (states.contains(MaterialState.hovered)) {
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.hover.label-text')});
}
if (states.contains(MaterialState.disabled)) {
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.disabled.label-text')});
}
......@@ -183,12 +183,12 @@ class _${blockName}DefaultsM3 extends InputDecorationTheme {
@override
TextStyle? get helperStyle => MaterialStateTextStyle.resolveWith((Set<MaterialState> states) {
final TextStyle textStyle= ${textStyle("md.comp.filled-text-field.supporting-text")} ?? const TextStyle();${componentColor('md.comp.filled-text-field.hover.supporting-text') == componentColor('md.comp.filled-text-field.supporting-text') ? '' : '''
if (states.contains(MaterialState.hovered)) {
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.hover.supporting-text')});
}'''}${componentColor('md.comp.filled-text-field.focus.supporting-text') == componentColor('md.comp.filled-text-field.supporting-text') ? '' : '''
final TextStyle textStyle= ${textStyle("md.comp.filled-text-field.supporting-text")} ?? const TextStyle();${componentColor('md.comp.filled-text-field.focus.supporting-text') == componentColor('md.comp.filled-text-field.supporting-text') ? '' : '''
if (states.contains(MaterialState.focused)) {
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.focus.supporting-text')});
}'''}${componentColor('md.comp.filled-text-field.hover.supporting-text') == componentColor('md.comp.filled-text-field.supporting-text') ? '' : '''
if (states.contains(MaterialState.hovered)) {
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.hover.supporting-text')});
}'''}
if (states.contains(MaterialState.disabled)) {
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.disabled.supporting-text')});
......@@ -198,15 +198,29 @@ class _${blockName}DefaultsM3 extends InputDecorationTheme {
@override
TextStyle? get errorStyle => MaterialStateTextStyle.resolveWith((Set<MaterialState> states) {
final TextStyle textStyle= ${textStyle("md.comp.filled-text-field.supporting-text")} ?? const TextStyle();${componentColor('md.comp.filled-text-field.error.hover.supporting-text') == componentColor('md.comp.filled-text-field.error.supporting-text') ? '' : '''
if (states.contains(MaterialState.hovered)) {
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.error.hover.supporting-text')});
}'''}${componentColor('md.comp.filled-text-field.error.focus.supporting-text') == componentColor('md.comp.filled-text-field.error.supporting-text') ? '' : '''
final TextStyle textStyle= ${textStyle("md.comp.filled-text-field.supporting-text")} ?? const TextStyle();${componentColor('md.comp.filled-text-field.error.focus.supporting-text') == componentColor('md.comp.filled-text-field.error.supporting-text') ? '' : '''
if (states.contains(MaterialState.focused)) {
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.error.focus.supporting-text')});
}'''}${componentColor('md.comp.filled-text-field.error.hover.supporting-text') == componentColor('md.comp.filled-text-field.error.supporting-text') ? '' : '''
if (states.contains(MaterialState.hovered)) {
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.error.hover.supporting-text')});
}'''}
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.error.supporting-text')});
});
}
''';
/// Generate a [BorderSide] for the given components.
String mergedBorder(String componentToken1, String componentToken2) {
final String borderColor = componentColor(componentToken1)!= 'null'
? componentColor(componentToken1)
: componentColor(componentToken2);
final double width = (
tokens['$componentToken1.width'] ??
tokens['$componentToken1.height'] ??
tokens['$componentToken2.width'] ??
tokens['$componentToken2.height'] ??
1.0) as double;
return 'BorderSide(color: $borderColor${width != 1.0 ? ", width: $width" : ""})';
}
}
dev/tools/gen_defaults/lib/template.dart
View file @ e739ad07
......@@ -179,8 +179,9 @@ abstract class TokenTemplate {
}
if (topLeft == topRight && bottomLeft == bottomRight) {
return '${prefix}RoundedRectangleBorder(borderRadius: BorderRadius.vertical('
'${topLeft > 0 ? 'top: Radius.circular($topLeft),':''}'
'${bottomLeft > 0 ? 'bottom: Radius.circular($bottomLeft),':''}'
'${topLeft > 0 ? 'top: Radius.circular($topLeft)':''}'
'${topLeft > 0 && bottomLeft > 0 ? ',':''}'
'${bottomLeft > 0 ? 'bottom: Radius.circular($bottomLeft)':''}'
'))';
}
return '${prefix}RoundedRectangleBorder(borderRadius: '
......@@ -202,7 +203,7 @@ abstract class TokenTemplate {
return 'null';
}
final String borderColor = componentColor(componentToken);
final double width = (tokens['$componentToken.width'] ?? 1.0) as double;
final double width = (tokens['$componentToken.width'] ?? tokens['$componentToken.height'] ?? 1.0) as double;
return 'BorderSide(color: $borderColor${width != 1.0 ? ", width: $width" : ""})';
}
......
packages/flutter/lib/src/material/input_decorator.dart
View file @ e739ad07
......@@ -4494,17 +4494,20 @@ class _InputDecoratorDefaultsM3 extends InputDecorationTheme {
@override
BorderSide? get activeIndicatorBorder => MaterialStateBorderSide.resolveWith((Set<MaterialState> states) {
if (states.contains(MaterialState.error)) {
if (states.contains(MaterialState.focused)) {
return BorderSide(color: _colors.error, width: 2.0);
}
if (states.contains(MaterialState.hovered)) {
return BorderSide(color: _colors.onErrorContainer);
}
return BorderSide(color: _colors.error);
}
if (states.contains(MaterialState.focused)) {
return BorderSide(color: _colors.primary, width: 2.0);
}
if (states.contains(MaterialState.hovered)) {
return BorderSide(color: _colors.onSurface);
}
if (states.contains(MaterialState.focused)) {
return BorderSide(color: _colors.primary);
}
if (states.contains(MaterialState.disabled)) {
return BorderSide(color: _colors.onSurface.withOpacity(0.38));
}
......@@ -4514,17 +4517,20 @@ class _InputDecoratorDefaultsM3 extends InputDecorationTheme {
@override
BorderSide? get outlineBorder => MaterialStateBorderSide.resolveWith((Set<MaterialState> states) {
if (states.contains(MaterialState.error)) {
if (states.contains(MaterialState.focused)) {
return BorderSide(color: _colors.error, width: 2.0);
}
if (states.contains(MaterialState.hovered)) {
return BorderSide(color: _colors.onErrorContainer);
}
return BorderSide(color: _colors.error);
}
if (states.contains(MaterialState.hovered)) {
return BorderSide(color: _colors.onSurface);
}
if (states.contains(MaterialState.focused)) {
return BorderSide(color: _colors.primary, width: 2.0);
}
if (states.contains(MaterialState.hovered)) {
return BorderSide(color: _colors.onSurface);
}
if (states.contains(MaterialState.disabled)) {
return BorderSide(color: _colors.onSurface.withOpacity(0.12));
}
......@@ -4560,20 +4566,20 @@ class _InputDecoratorDefaultsM3 extends InputDecorationTheme {
TextStyle? get labelStyle => MaterialStateTextStyle.resolveWith((Set<MaterialState> states) {
final TextStyle textStyle= _textTheme.bodyLarge ?? const TextStyle();
if(states.contains(MaterialState.error)) {
if (states.contains(MaterialState.hovered)) {
return textStyle.copyWith(color:_colors.onErrorContainer);
}
if (states.contains(MaterialState.focused)) {
return textStyle.copyWith(color:_colors.error);
}
if (states.contains(MaterialState.hovered)) {
return textStyle.copyWith(color:_colors.onErrorContainer);
}
return textStyle.copyWith(color:_colors.error);
}
if (states.contains(MaterialState.hovered)) {
return textStyle.copyWith(color:_colors.onSurfaceVariant);
}
if (states.contains(MaterialState.focused)) {
return textStyle.copyWith(color:_colors.primary);
}
if (states.contains(MaterialState.hovered)) {
return textStyle.copyWith(color:_colors.onSurfaceVariant);
}
if (states.contains(MaterialState.disabled)) {
return textStyle.copyWith(color:_colors.onSurface.withOpacity(0.38));
}
......@@ -4584,20 +4590,20 @@ class _InputDecoratorDefaultsM3 extends InputDecorationTheme {
TextStyle? get floatingLabelStyle => MaterialStateTextStyle.resolveWith((Set<MaterialState> states) {
final TextStyle textStyle= _textTheme.bodyLarge ?? const TextStyle();
if(states.contains(MaterialState.error)) {
if (states.contains(MaterialState.hovered)) {
return textStyle.copyWith(color:_colors.onErrorContainer);
}
if (states.contains(MaterialState.focused)) {
return textStyle.copyWith(color:_colors.error);
}
if (states.contains(MaterialState.hovered)) {
return textStyle.copyWith(color:_colors.onErrorContainer);
}
return textStyle.copyWith(color:_colors.error);
}
if (states.contains(MaterialState.hovered)) {
return textStyle.copyWith(color:_colors.onSurfaceVariant);
}
if (states.contains(MaterialState.focused)) {
return textStyle.copyWith(color:_colors.primary);
}
if (states.contains(MaterialState.hovered)) {
return textStyle.copyWith(color:_colors.onSurfaceVariant);
}
if (states.contains(MaterialState.disabled)) {
return textStyle.copyWith(color:_colors.onSurface.withOpacity(0.38));
}
......
packages/flutter/test/material/input_decorator_test.dart
View file @ e739ad07
......@@ -3453,7 +3453,7 @@ void main() {
expect(tester.getTopRight(find.text('text')).dx, lessThanOrEqualTo(tester.getTopLeft(find.text('s')).dx));
expect(getBorderBottom(tester), 32.0);
expect(getBorderWeight(tester), useMaterial3 ? 1.0 : 2.0);
expect(getBorderWeight(tester), 2.0);
});
testWidgets('InputDecorator with empty InputDecoration', (WidgetTester tester) async {
......
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

HIAST - GitLab