@scblr Based on the way I'm currently tackling switching over the code to the Material 3 theme, it probably makes more sense for us to look through the whole app, feature by feature, and verify that everything looks as expected (and maybe to streamline whatever we find along the way).

Here is the current APK:
https://github.com/wikimedia/apps-android-wikipedia/actions/runs/4733853043

This contains all the updates so far, including updates to Toolbars, App bars, and Buttons.

Whoa, @Dbrant – everything is super round now – gotta get used to this first! Great work so far!

General feedback

1) The buttons don’t use the correct definitions from T331450 yet. Could these be updated?

Examples:

Definitions from T331450:

Updates (Figma)

Sizing
Measurements

• Type
  • There are five types of buttons: primary, secondary, tertiary, text-primary, text-tertiary
  • All buttons types can contain an icon
  • Buttons use sentence case, no ALL CAPS anymore
  • All buttons use h3-button (font-family: Roboto Medium; font-size: 16sp; line-height: 24sp:) type style defined in T330753
• Sizing
  • Icon size is now 24dp x 24dp
  • Colored background of buttons is 40dp high (tap target for all buttons is 48dp)
  • Buttons use a fully rounded corner radius (20dp)
• Spacing
  • 8dp vertical padding
  • 14dp horizontal padding
• Colors
  • All buttons use color definitions from T330645
• Usage examples:
  • Primary buttons are used in the Suggested edits feed
  • Secondary buttons are used in tooltips, cards (e.g. "Got it"), and saving a shared reading list
  • Tertiary buttons are used in cards
  • Text primary buttons are used in the app bar and dialogs
  • Text secondary buttons are used in dialogs

2) Can this work be merged with Cooltey’s type (T330753) and color (T330645) work? It’s hard to evaluate without these updates.

Some examples where it looks off and differs from the updates in T330753:

Specific feedback

Probably fixed if the above is applied (and feedback does not aspire to be complete)

3) These should be secondary buttons from T331450:

Similar to what’s used in Suggested edits:

4) Tab active state (border-bottom) should stretch to the entire width of the tab:

5) Border should use 0.5dp thickness here:

6) Settings should use p font definition for titles here (T330753)

font-family: Roboto
font-weight: Regular
font-size: 16sp
line-height: 24sp/1.5em

7) Use h3 from T330753 here:

font-family: Roboto
font-weight: Bold
font-size: 16sp
line-height: 24sp/1.5em

Side note: this is the new "Settings" design established within Watchlist filters (Figma | T326648)

8) Please make sure to use the toolbar font definitions in T330753. It looks too small currently.

font-family: Roboto
font-weight: Medium
font-size: 10sp
line-height: 12sp/1.18em

If it already uses the above, we might need to increase it a little.

(current apk: https://github.com/wikimedia/apps-android-wikipedia/actions/runs/4764808338)

@scblr Some points of interest from switching over to Material 3:

The bottom navigation bar automatically gets the blue highlight over the selected icon:

All popup dialogs now automatically get the rounded-corner shape, with action buttons that are no longer all-caps:

Bottom-sheet dialogs also get the rounded-corner shape at the top:

"Switch" components have a new appearance, different from the previous Material style:

All buttons now have a consolidated style, with the same height, shape, and no longer all-caps: (floating action buttons are a rounded-rectangle shape)

Notes from Call with DB May 1, 2023:

• Check if button type, sizing, and padding are per definition
• Change FAB to fully rounded corners
• Apply specific feedback from above and put it in the design signoff
• Then Robin will go through all screens again in the design signoff column

current apk: https://github.com/wikimedia/apps-android-wikipedia/actions/runs/4862953580

Check if button type, sizing, and padding are per definition

👍

Tab active state (border-bottom) should stretch to the entire width of the tab

👍

Border should use 0.5dp thickness here

👍

Settings should use p font definition for titles

The Settings screen is a very special case, where we have only indirect control of the text styles. I'll keep investigating the best way to control it.

Please make sure to use the toolbar font definitions in T330753. It looks too small currently.
If it already uses the above, we might need to increase it a little.

👍 It was already using 10sp, but I have now increased it to 11sp.

Change FAB to fully rounded corners

👍

One observation: since our buttons are now getting larger, many horizontal layouts will now be more likely to overflow onto vertical space:

@Dbrant looks great! Will continue to QA later today but this is what I found so far 👇

One observation: since our buttons are now getting larger, many horizontal layouts will now be more likely to overflow onto vertical space:

Good point – it doesn’t look that bad though and is unavoidable in certain languages and larger font accessibility settings. We just need to make sure that we think about how things float/arrange in these cases.

1) Use text primary button here. The font size seems too small.

2) Use h3-button font for tooltip copy:

fontFamily: Roboto
font-weight: Medium
font-size: 16sp
line-height: 24sp/1.5em

☝️ Btw, do you still need these specific properties and values above or is h3-button enough? Thx for letting me know.

3)

The Settings screen is a very special case, where we have only indirect control of the text styles. I'll keep investigating the best way to control it.

Ok, yes that’d be great

4)

👍 It was already using 10sp, but I have now increased it to 11sp.

Looks great now. Did you update the toolbar type definition? If yes – I’ll do the same and update it like this:

font-family: Roboto
font-weight: Medium
font-size: 11sp
line-height: 13sp/1.18em

5) Use h2 here (font’s currently to thin)

font-family: Roboto
font-weight: Bold
font-size: 20sp
line-height: 28sp/1.4em

6) Use p and remove bottom padding here:

Implementation	vs	Design

font-family: Roboto
font-weight: Regular
font-size: 16sp
line-height: 24sp/1.5em

7) Use p for the other instances of a date here as well:

And, should we streamline how dates are displayed in 6) and 7)? I’d probably go for the form of 6) – what do you think @Dbrant?

8) What font style is the active state using? Bold? It looks a bit too bold, maybe like faux bold? If not, we might have to go with the same font as for inactive state (Medium).

9) Is there a way to add hyphenation to UI elements that overflow? If not, we leave it as is.

latest APK: https://github.com/wikimedia/apps-android-wikipedia/actions/runs/4883521909

1) Use text primary button here. The font size seems too small.

👍

2) Use h3-button font for tooltip copy:

👍

☝️ Btw, do you still need these specific properties and values above or is h3-button enough? Thx for letting me know.

Correct! From now on, you need only specify the abstract style name, e.g. h3-button.

4)
Looks great now. Did you update the toolbar type definition?

Yes, but there's a very annoying bit that I can't figure out yet:
The "active" state of the selected bottom navigation button seems to be hard-coded to be bold, and there seems to be no way to turn that off. Will keep investigating, but for now I made the active state be sans-serif, which becomes bold automatically, and looks similar (but not perfectly) like sens-serif-medium.

5) Use h2 here (font’s currently to thin)

👍

6) Use p and remove bottom padding here:

👍

It looks like Phabricator might have "cut off" the last few points and screenshots that you included. Can you repost them?
I'll try to answer based on the quoted text that I see:

7) Use p for the other instances of a date here as well:

And, should we streamline how dates are displayed in 6) and 7)? I’d probably go for the form of 6) – what do you think @Dbrant?

^ can't see those screenshots.

8) What font style is the active state using? Bold? It looks a bit too bold, maybe like faux bold? If not, we might have to go with the same font as for inactive state (Medium).

Assuming this is referring to the bottom navigation items, see my note above.

9) Is there a way to add hyphenation to UI elements that overflow? If not, we leave it as is.

There is a way to add automatic hyphenation in native text views, but it's notoriously bad for performance, and should preferably not be used, except where absolutely necessary.

6) Use p and remove bottom padding here:

It looks like Phabricator might have "cut off" the last few points and screenshots that you included. Can you repost them?
I'll try to answer based on the quoted text that I see:

Reposting the screenshots:

Implementation	vs	Design

7) Use p for the other instances of a date here as well:

And, should we streamline how dates are displayed in 6) and 7)? I’d probably go for the form of 6) – what do you think @Dbrant?

^ can't see those screenshots.

Reposting the screenshots:

@Dbrant can you see them now?

current APK: https://github.com/wikimedia/apps-android-wikipedia/actions/runs/4926539897

@Dbrant can you see them now?

Yep thanks, and done.

And, should we streamline how dates are displayed in 6) and 7)? I’d probably go for the form of 6) – what do you think @Dbrant?

I don't have a strong preference, but do agree that the date style should be consistent. I think if we have the space to display the year (which we do, in all these cases), then why not?

Ok @Dbrant – last round:

1)

And, should we streamline how dates are displayed in 6) and 7)? I’d probably go for the form of 6) – what do you think @Dbrant?

I don't have a strong preference, but do agree that the date style should be consistent. I think if we have the space to display the year (which we do, in all these cases), then why not?

Ok, so let’s go with the year as well then 👍

2) Disabled state of buttons should use a different color. Probably 38% opacity of the default state, per M3 definition.

This is how they look like in M3 (the current APK):

This is how they used to look (M2):

3) If not done already, increase the height of FABs to 56dp, per M3 spec

4) Change to p font definition, it’s a bit too bold for a list:

5) Search bar position on talk pages (user/article) and Watchlist differs from Explore and Search. Explore and Search are ideally positioned.

6) And this would still be great:

Settings should use the p font definition for titles here (T330753)

font-family: Roboto
font-weight: Regular
font-size: 16sp
line-height: 24sp/1.5em

current apk: https://github.com/wikimedia/apps-android-wikipedia/actions/runs/4941513755

1)
Ok, so let’s go with the year as well then 👍

👍

2) Disabled state of buttons should use a different color. Probably 38% opacity of the default state, per M3 definition.

👍

3) If not done already, increase the height of FABs to 56dp, per M3 spec

👍

4) Change to p font definition, it’s a bit too bold for a list:

👍

5) Search bar position on talk pages (user/article) and Watchlist differs from Explore and Search. Explore and Search are ideally positioned.

👍

6) And this would still be great:
Settings should use the p font definition for titles here (T330753)

a bit hacky, but 👍

@Dbrant, the changes look good. I noticed that the Watchlist filter screen uses different stylings:

1) Change to p (it’s too bold currently)

This is the original design:

https://www.figma.com/file/PVCwc0QxcVIxwxmnB4v1pQ/Watchlist-filters-T326648?type=design&node-id=97-6718&t=tk06n9BQBWOBCjyi-4

And this is the Phab task: T326648

2) Change button style to text-primary

3) To verify, are all new buttons 40dp high ?

Specs are defined in T331450:

(the 40dp high buttons have an additional "tap target" padding of 4dp top and bottom; that’s why the screenshot shows the entire height of 48dp)

current apk: https://github.com/wikimedia/apps-android-wikipedia/actions/runs/4981129412

1) Change to p (it’s too bold currently)

👍

2) Change button style to text-primary

👍

3) To verify, are all new buttons 40dp high ?

^ can't see that screenshot.

Yes, all buttons should now be 40dp, with a tap target height of 48dp.

Ok, @Dbrant, per our discussion, I’m moving all tickets related to components to the next column.

I found a few issues to optimize; it’d be great if they made the cut. They’re minor, so I no longer need to review them afterward.

1) Change the color of the bottom sheet handlebar to inactive (I think it’s currently using border, right?)

2) Change to paper color

3) The border around this button looks quite thick and imbalanced. Is there elevation applied, respectively, a shadow? If yes, please remove the elevation from both buttons. If not, change the inactive border to 1dp thickness and border color

4) The byte indicator (-106 bytes in the example) should be on the right side of this button when there’s space (might be affected because of the button changes?):

current apk: https://github.com/wikimedia/apps-android-wikipedia/actions/runs/4984896440

1) Change the color of the bottom sheet handlebar to inactive (I think it’s currently using border, right?)

👍

2) Change to paper color

👍

3) The border around this button looks quite thick and imbalanced. Is there elevation applied, respectively, a shadow? If yes, please remove the elevation from both buttons. If not, change the inactive border to 1dp thickness and border color

👍

4) The byte indicator (-106 bytes in the example) should be on the right side of this button when there’s space (might be affected because of the button changes?):

👍

Thanks for moving all the tasks! I created a new task (T336702) for capturing any subsequent inconsistencies that we might find.

Appears to be good on my end 2.7.50444-beta-05-22