Skip to content

F
Front-End
Unverified Commit 924e48ee authored by Justin McCandless's avatar Justin McCandless Committed by GitHub
Browse files
Options

Increase TextField's minimum height from 40 to 48 (#42449) 

This is being done to match the Material spec. It will likely break many visual diff tests.
parent 3cd8c314
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 169 additions and 98 deletions
packages/flutter/lib/src/material/input_decorator.dart
View file @ 924e48ee
......@@ -10,6 +10,7 @@ import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';
import 'colors.dart';
import 'constants.dart';
import 'input_border.dart';
import 'theme.dart';
......@@ -496,6 +497,7 @@ class _Decoration {
this.counter,
this.container,
this.alignLabelWithHint,
this.isDense,
}) : assert(contentPadding != null),
assert(isCollapsed != null),
assert(floatingLabelHeight != null),
......@@ -508,6 +510,7 @@ class _Decoration {
final InputBorder border;
final _InputBorderGap borderGap;
final bool alignLabelWithHint;
final bool isDense;
final Widget icon;
final Widget input;
final Widget label;
......@@ -1037,10 +1040,19 @@ class _RenderDecoration extends RenderBox {
+ fixBelowInput
+ contentPadding.bottom,
);
final double minContainerHeight = decoration.isDense || expands
? 0.0
: kMinInteractiveDimension;
final double maxContainerHeight = boxConstraints.maxHeight - bottomHeight;
final double containerHeight = expands
? maxContainerHeight
: math.min(contentHeight, maxContainerHeight);
: math.min(math.max(contentHeight, minContainerHeight), maxContainerHeight);
// Ensure the text is vertically centered in cases where the content is
// shorter than kMinInteractiveDimension.
final double interactiveAdjustment = minContainerHeight > contentHeight
? (minContainerHeight - contentHeight) / 2.0
: 0.0;
// Try to consider the prefix/suffix as part of the text when aligning it.
// If the prefix/suffix overflows however, allow it to extend outside of the
......@@ -1058,7 +1070,8 @@ class _RenderDecoration extends RenderBox {
final double topInputBaseline = contentPadding.top
+ topHeight
+ inputInternalBaseline
+ baselineAdjustment;
+ baselineAdjustment
+ interactiveAdjustment;
final double maxContentHeight = containerHeight
- contentPadding.top
- topHeight
......@@ -2156,7 +2169,10 @@ class _InputDecoratorState extends State<InputDecorator> with TickerProviderStat
widthFactor: 1.0,
heightFactor: 1.0,
child: ConstrainedBox(
constraints: const BoxConstraints(minWidth: 48.0, minHeight: 48.0),
constraints: const BoxConstraints(
minWidth: kMinInteractiveDimension,
minHeight: kMinInteractiveDimension,
),
child: IconTheme.merge(
data: IconThemeData(
color: iconColor,
......@@ -2172,7 +2188,10 @@ class _InputDecoratorState extends State<InputDecorator> with TickerProviderStat
widthFactor: 1.0,
heightFactor: 1.0,
child: ConstrainedBox(
constraints: const BoxConstraints(minWidth: 48.0, minHeight: 48.0),
constraints: const BoxConstraints(
minWidth: kMinInteractiveDimension,
minHeight: kMinInteractiveDimension,
),
child: IconTheme.merge(
data: IconThemeData(
color: iconColor,
......@@ -2253,6 +2272,7 @@ class _InputDecoratorState extends State<InputDecorator> with TickerProviderStat
input: widget.child,
label: label,
alignLabelWithHint: decoration.alignLabelWithHint,
isDense: decoration.isDense,
hint: hint,
prefix: prefix,
suffix: suffix,
......
packages/flutter/test/material/input_decorator_test.dart
View file @ 924e48ee
......@@ -509,12 +509,12 @@ void main() {
),
);
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 40.0));
expect(tester.getTopLeft(find.text('text')).dy, 12.0);
expect(tester.getBottomLeft(find.text('text')).dy, 28.0);
expect(tester.getTopLeft(find.text('hint')).dy, 12.0);
expect(tester.getBottomLeft(find.text('hint')).dy, 28.0);
expect(getBorderBottom(tester), 40.0);
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, kMinInteractiveDimension));
expect(tester.getTopLeft(find.text('text')).dy, 16.0);
expect(tester.getBottomLeft(find.text('text')).dy, 32.0);
expect(tester.getTopLeft(find.text('hint')).dy, 16.0);
expect(tester.getBottomLeft(find.text('hint')).dy, 32.0);
expect(getBorderBottom(tester), 48.0);
expect(getBorderWeight(tester), 1.0);
expect(tester.getSize(find.text('hint')).width, tester.getSize(find.text('text')).width);
......@@ -1144,14 +1144,14 @@ void main() {
// The prefix and suffix wrap the input text and are left and right justified
// respectively. They should have the same height as the input text (16).
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 40.0));
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, kMinInteractiveDimension));
expect(tester.getSize(find.text('text')).height, 16.0);
expect(tester.getSize(find.text('p')).height, 16.0);
expect(tester.getSize(find.text('s')).height, 16.0);
expect(tester.getTopLeft(find.text('text')).dy, 12.0);
expect(tester.getTopLeft(find.text('p')).dy, 12.0);
expect(tester.getTopLeft(find.text('text')).dy, 16.0);
expect(tester.getTopLeft(find.text('p')).dy, 16.0);
expect(tester.getTopLeft(find.text('p')).dx, 12.0);
expect(tester.getTopLeft(find.text('s')).dy, 12.0);
expect(tester.getTopLeft(find.text('s')).dy, 16.0);
expect(tester.getTopRight(find.text('s')).dx, 788.0);
// layout is a row: [p text s]
......@@ -1179,18 +1179,18 @@ void main() {
// 16 - input text (ahem font size 16dps)
// 12 - bottom padding
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 40.0));
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, kMinInteractiveDimension));
expect(tester.getSize(find.text('text')).height, 16.0);
expect(tester.getSize(find.text('p')).height, 16.0);
expect(tester.getSize(find.text('s')).height, 16.0);
expect(tester.getTopLeft(find.text('text')).dy, 12.0);
expect(tester.getTopLeft(find.text('p')).dy, 12.0);
expect(tester.getTopLeft(find.text('s')).dy, 12.0);
expect(tester.getTopLeft(find.text('text')).dy, 16.0);
expect(tester.getTopLeft(find.text('p')).dy, 16.0);
expect(tester.getTopLeft(find.text('s')).dy, 16.0);
expect(tester.getTopRight(find.text('s')).dx, 788.0);
expect(tester.getSize(find.byType(Icon)).height, 24.0);
// The 24dps high icon is centered on the 16dps high input line
expect(tester.getTopLeft(find.byType(Icon)).dy, 8.0);
expect(tester.getTopLeft(find.byType(Icon)).dy, 12.0);
// layout is a row: [icon, p text s]
expect(tester.getTopLeft(find.byType(Icon)).dx, 0.0);
......@@ -1939,10 +1939,10 @@ void main() {
),
);
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 44.0));
expect(tester.getTopLeft(find.text('text')).dy, 13.0);
expect(tester.getBottomLeft(find.text('text')).dy, 29.0);
expect(getBorderBottom(tester), 44.0);
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 48.0));
expect(tester.getTopLeft(find.text('text')).dy, 15.0);
expect(tester.getBottomLeft(find.text('text')).dy, 31.0);
expect(getBorderBottom(tester), 48.0);
expect(getBorderWeight(tester), 1.0);
});
......@@ -1960,10 +1960,10 @@ void main() {
),
);
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 44.0));
expect(tester.getTopLeft(find.text('text')).dy, 13.0);
expect(tester.getBottomLeft(find.text('text')).dy, 29.0);
expect(getBorderBottom(tester), 44.0);
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, kMinInteractiveDimension));
expect(tester.getTopLeft(find.text('text')).dy, 15.0);
expect(tester.getBottomLeft(find.text('text')).dy, 31.0);
expect(getBorderBottom(tester), 48.0);
expect(getBorderWeight(tester), 1.0);
});
......@@ -2098,7 +2098,7 @@ void main() {
// Margin for text decoration is 12 when filled
// (dx) - 12 = (text offset)x.
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 60.0));
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 68.0));
final double dx = tester.getRect(find.byType(InputDecorator)).right;
expect(tester.getRect(find.text('test')).right, dx - 12.0);
});
......@@ -2118,7 +2118,7 @@ void main() {
// Margin for text decoration is 12 when filled and top left offset is (0, 0)
// 0 + 12 = 12.
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 60.0));
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 68.0));
expect(tester.getRect(find.text('test')).left, 12.0);
});
......@@ -2236,13 +2236,13 @@ void main() {
// 16 - input text (ahem font size 16dps)
// 12 - bottom padding
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 40.0));
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, kMinInteractiveDimension)); // 40 bumped up to minimum.
expect(tester.getSize(find.text('text')).height, 16.0);
expect(tester.getSize(find.text('p')).height, 16.0);
expect(tester.getSize(find.text('s')).height, 16.0);
expect(tester.getTopLeft(find.text('text')).dy, 12.0);
expect(tester.getTopLeft(find.text('p')).dy, 12.0);
expect(tester.getTopLeft(find.text('s')).dy, 12.0);
expect(tester.getTopLeft(find.text('text')).dy, 16.0);
expect(tester.getTopLeft(find.text('p')).dy, 16.0);
expect(tester.getTopLeft(find.text('s')).dy, 16.0);
// layout is a row: [s text p]
expect(tester.getTopLeft(find.text('s')).dx, 12.0);
......@@ -2339,10 +2339,10 @@ void main() {
// 16 - input text (ahem font size 16dps)
// 12 - bottom padding
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 40.0));
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, kMinInteractiveDimension)); // 40 bumped up to minimum.
expect(tester.getSize(find.text('text')).height, 16.0);
expect(tester.getTopLeft(find.text('text')).dy, 12.0);
expect(getBorderBottom(tester), 40.0);
expect(tester.getTopLeft(find.text('text')).dy, 16.0);
expect(getBorderBottom(tester), kMinInteractiveDimension); // 40 bumped up to minimum.
expect(getBorderWeight(tester), 1.0);
}, skip: isBrowser);
......@@ -2360,9 +2360,9 @@ void main() {
// Overall height for this InputDecorator is 16dps:
// 16 - input text (ahem font size 16dps)
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 16.0));
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, kMinInteractiveDimension)); // 16 bumped up to minimum.
expect(tester.getSize(find.text('text')).height, 16.0);
expect(tester.getTopLeft(find.text('text')).dy, 0.0);
expect(tester.getTopLeft(find.text('text')).dy, 16.0);
expect(getOpacity(tester, 'hint'), 0.0);
expect(getBorderWeight(tester), 0.0);
......@@ -2378,11 +2378,11 @@ void main() {
);
await tester.pumpAndSettle();
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 16.0));
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, kMinInteractiveDimension));
expect(tester.getSize(find.text('text')).height, 16.0);
expect(tester.getTopLeft(find.text('text')).dy, 0.0);
expect(tester.getTopLeft(find.text('text')).dy, 16.0);
expect(tester.getSize(find.text('hint')).height, 16.0);
expect(tester.getTopLeft(find.text('hint')).dy, 0.0);
expect(tester.getTopLeft(find.text('hint')).dy, 16.0);
expect(getBorderWeight(tester), 0.0);
}, skip: isBrowser);
......@@ -2418,13 +2418,13 @@ void main() {
// 10 - label (ahem font size 10dps)
// 17.75 - bottom padding (empty input text still appears here)
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 45.5));
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, kMinInteractiveDimension)); // 45.5 bumped up to minimum.
expect(tester.getSize(find.text('hint')).height, 10.0);
expect(tester.getSize(find.text('label')).height, 10.0);
expect(tester.getSize(find.text('text')).height, 10.0);
expect(tester.getTopLeft(find.text('hint')).dy, 23.5);
expect(tester.getTopLeft(find.text('label')).dy, 17.75);
expect(tester.getTopLeft(find.text('text')).dy, 23.5);
expect(tester.getTopLeft(find.text('hint')).dy, 24.75);
expect(tester.getTopLeft(find.text('label')).dy, 19.0);
expect(tester.getTopLeft(find.text('text')).dy, 24.75);
}, skip: isBrowser);
testWidgets('InputDecorator with empty style overrides', (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