-
Notifications
You must be signed in to change notification settings - Fork 29.7k
Make InputDecorator padding compliant with M3 spec #162157
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Make InputDecorator padding compliant with M3 spec #162157
Conversation
49426f0 to
c9eb71f
Compare
justinmc
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks really good, I'm excited to finally fix this. The Google tests seem to not be working right now. We definitely need to trigger that and see what happens before we merge this. I'll write myself a reminder to try again later.
| filteredEntries, | ||
| textDirection, | ||
| focusedIndex: currentHighlight, | ||
| useMaterial3: Theme.of(context).useMaterial3, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nit: Maybe save this up top in a variable and reuse it (for slight performance).
| : const EdgeInsetsDirectional.fromSTEB(12.0, 24.0, 12.0, 16.0)); | ||
| } | ||
|
|
||
| double inputGap = 0.0; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nit: You could probably refactor a bit to make this final, but maybe it would be harder to read that way 🤷
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I kept it that way because the result of autoformat when using ternary or switch was very bad.
| } else { | ||
| leadingPadding = leadingWidgetWidth; | ||
| } | ||
| leadingPadding = getWidth(_leadingKey); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks like a simplification 👍
|
Golden file changes have been found for this pull request. Click here to view and triage (e.g. because this is an intentional change). If you are still iterating on this change and are not ready to resolve the images on the Flutter Gold dashboard, consider marking this PR as a draft pull request above. You will still be able to view image results on the dashboard, commenting will be silenced, and the check will not try to resolve itself until marked ready for review. For more guidance, visit Writing a golden file test for Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing. |
c9eb71f to
90cb865
Compare
|
Golden file changes are available for triage from new commit, Click here to view. For more guidance, visit Writing a golden file test for Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing. |
|
Goldens all look expected and I've approved them. Google tests are running. |
|
I plan to finish verifying the Google test failures later today. At first glance everything looks as expected. |
|
Sorry for the delay here, I'm seeing some tests where a reduced width causes text to wrap, which causes layout problems. The tests probably just need a slight tweak and I'm hoping this PR can still move forward. |
|
I have at least one more Google customer that I need to contact about this. I will plan to look through the failing image diff tests and find which ones have layout problems in the next few days, then contact the customer. |
|
@bleroux Sorry I'm struggling to find the time to look into this. I'll be out next week so likely I'll get back to it after that. |
|
I've blocked out some time for myself to look at these failures on Monday. |
|
I'm working with a team at Google to decide on a way forward for this. |
|
Some fields with a placeholder might be wrapping onto two lines despite having enough space to fit on one? I'm trying to come up with a minimal repro for this. Not sure if that kind of overeager wrapping should be possible with the changes in this PR or not. |
|
I finally was able to get a good repro here! Let me know what you think @bleroux.
Repro codeimport 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: IntrinsicWidth(
child: TextField(
minLines: 1,
maxLines: 80,
decoration: InputDecoration(
filled: true,
),
),
),
),
);
}
} |
|
@justinmc Many thanks for this great repro! 🙏 |
a951189 to
c8c6aab
Compare
|
Golden file changes are available for triage from new commit, Click here to view. For more guidance, visit Writing a golden file test for Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing. |
|
@justinmc I updated the PR and fixed intrinsic width calculation for InputDecorator. |
|
Thanks for updating this. The Google tests are running 🤞 |
|
Skimming through the failures, I don't see any of the breakage that I pointed out above, but I still need to look more closely. I do see a layout overflow due to some fields wrapping that didn't previously, though. That's probably expected, but I need to inform the customer and see what they want to do about it. |
|
I found no more unintended test failures after skimming all of the broken tests. I'm working on fixing the layout overflow in the customer's test. |
) ## Description This PR makes InputDecorator padding for the input content, the helper and the counter compliant with the M3 spec. The padding should be 16 pixels instead of 12 pixels (which is the current value). See https://m3.material.io/components/text-fields/specs#0d36c3fe-7948-4ec2-ab8a-4fe39cca19cc for filled text fields and https://m3.material.io/components/text-fields/specs#605e24f1-1c1f-4c00-b385-4bf50733a5ef for outlined text fields. ### Before: The paddings for the input content, the helper and the counter are not compliant with the M3 spec (12 pixels instead of 16 pixels):  ### After: The paddings for the input content, the helper and the counter are compliant with the M3 spec (16 pixels):  ## Related Issue Fixes [Outlined TextField Label start position doesn't meet Material Design Specs](flutter#67707) ## Tests Adds 8 tests. Updates several tests.


Description
This PR makes InputDecorator padding for the input content, the helper and the counter compliant with the M3 spec.
The padding should be 16 pixels instead of 12 pixels (which is the current value).
See https://m3.material.io/components/text-fields/specs#0d36c3fe-7948-4ec2-ab8a-4fe39cca19cc for filled text fields and https://m3.material.io/components/text-fields/specs#605e24f1-1c1f-4c00-b385-4bf50733a5ef for outlined text fields.
Before:
The paddings for the input content, the helper and the counter are not compliant with the M3 spec (12 pixels instead of 16 pixels):
After:
The paddings for the input content, the helper and the counter are compliant with the M3 spec (16 pixels):
Related Issue
Fixes Outlined TextField Label start position doesn't meet Material Design Specs
Tests
Adds 8 tests.
Updates several tests.