Use TipKit as a starting point (pending feasibility)
Use fade in / fade out animation
For more info, refer to parent task.
- Engineering notes
TipKit wasn't feasible for this use case, so we created a new system using native materials
Description
Description
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Open | None | T408949 [Epic] Adopt Liquid Glass for Wikipedia iOS app | |||
| Open | None | T416206 Liquid Glass: Standardize sheet layouts and controls | |||
| Open | Tsevener | T417009 Define a reusable toast component | |||
| Open | Mazevedo | T419240 PR review cleanup |
Event Timeline
Comment Actions
@TLessa-WMF notes for design review:
- TipKit wasn't feasible. It's more complex than we initially had assessed, so we created a custom component using native materials.
- Since we're adding the new system's native glass material, for some reason, it forces the capsule shape to the view. I tried to make it a rounded rectangle as in Figma, but the material overrode the code in all my attempts.
- I kept the material and accepted the rounded capsule shape. Let me know if you would prefer the rounded rectangle shape - in this case, we'd have to revert to an opaque material, no glass effect
- Also, we can make the current glass effect more transparent. I added some opacity to the theme color layer to improve readability.
Comment Actions
Thanks for the notes @Mazevedo! The rounded rectangle shape is preferred, even if opaque, this capsule clashes with other elements. I also noticed that they are also close to the tab bar on iPhone and in tablet mode they are very long. The icon on iPad seems low resolution as well. I added notes with visuals in this Design QA punch list: https://docs.google.com/spreadsheets/d/1gqnz3OMliE2feOLPS9oUAR5i3qWSwDoDGpYWC4YPXNU/edit?usp=sharing - tab T416206 - row #7
Comment Actions
toasts look nice - I have notes on the space between them and the tab bar to be discussed in the punchlist meeting with Marina and Haley. Will mode this task after conversation with them
Comment Actions
I can't dismiss the toast by tapping on it (path: go to article/ tap "watch" / select a time frame / see toast) - will sync with @Mazevedo tomorrow. Since the toast is covering the rest of the UI it blocks users from performing any other tasks.
Comment Actions
Figure this out with @Mazevedo - there is a very specific way users need to tap to dismiss the toast for this to work properly. Okay for this version, but I will file a ticket in the backlog to position the toast above the other UI so it doesn't cover it. This task was a P1 in our prioritization meeting, so not a blocker. Thanks!
Comment Actions
Looks ok to me on 8.0.0 (6025), tested on:
iPhone 16, iOS 26.4
iPad air 11inch, iPadOS 26.3.1