Page MenuHomePhabricator

Liquid Glass: Align onboarding buttons and ellipsis with native styles
Closed, ResolvedPublic0 Estimated Story Points

Description

Description

Onboarding buttons currently clash with the Liquid Glass aesthetic. The ellipsis also uses a non-native component.

Onboarding is a user’s first impression of the app.

Requirements

  • Apply updated native button styles (see button guidelines)
  • Replace custom ellipsis with native component

Design used onboarding as an example of buttons needing updates

Acceptance Criteria

  • Buttons match Liquid Glass style
  • Ellipsis uses native system control
  • No custom shapes or colors

Design References

Issue: https://www.figma.com/design/nXIizaWUKh7yuS52LrTkch/Liquid-Glass-Redesign-version?node-id=6280-25619&t=4tXDUovGESlrb2mM-4
Fix: https://www.figma.com/design/nXIizaWUKh7yuS52LrTkch/Liquid-Glass-Redesign-version?node-id=6280-25546&t=4tXDUovGESlrb2mM-4

Platforms

  • iPhone
  • iPad

Event Timeline

Mazevedo set the point value for this task to 3.Feb 2 2026, 6:21 PM
GOlson-WMF added 1 subscriber(s): Seddon.

B+W: Struggling with some implementation, calling in other engineers in Slack

Ellipses does not match in Figma, no glass background in implementation: https://wikimedia.slack.com/archives/C4DDMJ9CH/p1772814116209109

We couldn't update the ellipsis with the glassy background and it is okay, it looks cleaner this way. One small request to double check if touch target is greater than 44pt. See row 9 in this design QA punch list: https://docs.google.com/spreadsheets/d/1gqnz3OMliE2feOLPS9oUAR5i3qWSwDoDGpYWC4YPXNU/edit?usp=sharing - tab T416206

NOTE: moved to not passed design only because of the touch target size - if all good, okay to move to QA
Seddon changed the point value for this task from 3 to 1.Mar 17 2026, 8:57 PM
Seddon set Final Story Points to 3.

@TLessa-WMF - we use a UIPageViewController for that. Those buttons and dots come from it. We are able to mess with the shape and colors, but all the attempts to overrride dimension and add extra spacing to force the size are not working. The button has a minimum of 44pt height for sure, and width varies with the size of the text. Transforming it would require a more customized solution.

I'm kicking this one back to design signoff so you can review this comment and we can discuss it. I added this note to the spreadsheet as well so we keep track.

Thanks for the context @Mazevedo - if touch target is respecting Apple's guidelines, we are good! Moving this on to the next column.

Seddon changed the point value for this task from 1 to 0.Mar 25 2026, 5:56 PM