Repository navigation
M3 tabs spec issues #128696
Description
Spec
Flutter
Layout
- The text style does not seem to match spec (it's possible this is because I'm on a mac and San Francisco is used on web)
- The height of the primary tabs component with icons is described as 64dp. In Flutter it appears to be 74dp. The distance between the text and tab bottom is too large (Update margin between label and icon in Tab to better reflect Material specs #140698)
Motion
- Tab indicator does not stretch when different tab is selected, as seen in spec
https://github.com/flutter/flutter/assets/6655696/a194ea91-5d34-4e08-b69e-4ce5234ae2f2 (Material 3 - Tab indicator stretch animation #141954)
Activity
TahaTesser commentedon Jun 14, 2023
Thanks so much, @guidezpl for filing. Some of the changes will produce golden changes.
#125974 also produces golden changes, I'd wanna land it first before proceeding with this issue.
cc: @Piinks
Piinks commentedon Jun 14, 2023
I agree, the changes in #125974 have been very challenging to land with minor changes like this affecting thousands of screenshot tests. Let's land that first before tackling this. And when we do tackle this, it will be immensely easier to just make singular atomic changes at a time. That way the any affected screenshot is easy to debug since we are only lookin for one change at a time.
guidezpl commentedon Jun 15, 2023
Thank you! This is one of the more heavily used components for sure.
TahaTesser commentedon Sep 8, 2023
I'll make progress on this issue right after my vacation.
TahaTesser commentedon Oct 3, 2023
While the web specs say 64dp, actual TabLayout size is 72dp in Android implementation. Maybe the web specs are wrong?
These are two are relatedd to height and web specs for the height don't match the actual implementation.
davidmartos96 commentedon Dec 28, 2023
@TahaTesser I've looked into the Jetpack compose source and it also uses 72 (jetpack compose Tab source) although the design tokens in the source use the 64 from the spec (tokens in jetpack compose)
Strangely enough they use the value from the design tokens for the
SmallTabHeight(no label)" (source) but not for theLargeTabHeight(icon+label) where the 72 is hardcoded.Maybe it's an issue in the Android implementation? The 72 in the Material 3 Jetpack Compose implementation originates from a duplication of the original M2 implementation (https://android-review.googlesource.com/c/platform/frameworks/support/+/1947012), and hasn't been modified since. So maybe it's a small slip-up.
Update margin between label and icon in Tab to better reflect Materia…
davidmartos96 commentedon Jan 22, 2024
@guidezpl Hello! The 3rd checkbox in the issue description could be checked off, as it has been fixed in #140698
The last checkbox about the stretch animation is being worked in #141954
Material 3 - Tab indicator stretch animation (#141954)
github-actions commentedon Feb 20, 2024
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.