design-system: round every button at every size - #3126
Draft
StylianosGakis wants to merge 1 commit into
Draft
Conversation
Designers asked for all buttons in the app to be rounded, matching what the home screen already does. Corner radius stops being a per-size property and becomes one ButtonTokens.ContainerShape (CornerFull) that every button reads, so a button's radius is no longer a choice a call site can make. The radius tokens themselves are untouched and still used by cards, sheets, fields and the rest of the system. Only buttons lose the option. Drops the HedvigButton `shape` override and the buttonShape parameter that CrossSells threaded through five composables to reach it, since every caller that passed one was asking for the shape that is now the default. RoundedPrimary and RoundedLiquidGlass already resolved to CornerFull, so the home screen renders unchanged; the visual diff is in the other six styles.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Design asked for every button in the app to be rounded, matching what the home screen already does (original thread, Android follow-up).
Opening as a draft because the change works but raises a design question that needs answering before it should land. See "The question for design" below.
What changed
Corner radius stops being a per-size property of a button and becomes a single
ButtonTokens.ContainerShape = CornerFullthat every button reads. Before, each size carried its own shape token:CornerLarge(12dp)CornerFullCornerMedium(10dp)CornerFullCornerSmall(8dp)CornerFullCornerXSmall(6dp)CornerFullA button's radius is no longer something a call site can choose, which is the "logic solution" Nils asked for in the thread. The radius tokens themselves are untouched and still used by cards, sheets, fields and everything else. Only buttons lose the option.
This also drops the
HedvigButtonshapeoverride and thebuttonShapeparameter thatCrossSellsthreaded through five composables to reach it. Every caller that passed one was asking forcornerFull, which is now the default.Shape only. Padding, typography, colors and all eight existing styles are unchanged.
Deliberately not in scope
IconButton,Tab,Togglekeep their radius. OnlyHedvigButtonand the wrappers that delegate to it change.RoundedPrimary/RoundedLiquidGlass. "Rounded" is redundant now that every button is rounded, andGlass/LiquidGlasswould read better, but the matching color tokens (ButtonRoundedPrimaryRestingand ~16 siblings) live inColorScheme.kt, so that rename drags a wide diff through the theme for zero visual gain. Separate PR if wanted.Verification
:app:compileDebugKotlingreen, so all 113HedvigButtoncall sites typecheck:design-system-hedvig:compileKotlinIosSimulatorArm64green (the module is KMP)RoundedPrimaryandRoundedLiquidGlassalready resolved toCornerFull, so the home screen renders unchanged. The whole visual diff is in the other six styles.The design system matrix
Every size x style x state, light and dark. Before:
After:
What this looks like in the app
Walked on a Pixel 6 Pro. The pattern that emerged is narrower than "full-width pills look bad":
A full-width pill looks wrong when it shares an edge with a full-width 12dp element. Same width, stacked, so the two radii sit side by side and invite comparison.
The clearest case, the travel certificate departure step. Two
CornerLargetext fields flush above the CTA. Before, the button's 12dp matched the fields exactly, which is evidently what it was designed for:Same shape in the edit-insurance bottom sheet, three 12dp radio cards stacked straight onto the pill:
And a pill inset in a 12dp notification card:
Other instances of the same thing: the travel certificate address step, the change-coverage
QuoteCard, "Edit your insurance" under the addon card on contract detail, and "Add info" in the co-insured notification card.Where it looks good
Content-width buttons and buttons among round shapes are fine or better. The help center CTA:
Also good: the home draft-claim card's side-by-side Delete / Continue pills, and the cross-sell "Save 15%" pills next to the round pillow icons.
The question for design
Rounding only the buttons leaves the app internally inconsistent, because the elements buttons sit against keep 12dp. Two ways out:
This is Nils' and Sladjan's call. The travel certificate pair above is the shot that frames it.
Not swept
Submit-claim, onboarding, moving flow and edit-coinsured, all skipped because walking them creates server-side state. Login and OTP are unreachable while signed in. A few screens showed real staging account data and were left out of this description.
Screenshots are hosted on the
assets/round-all-buttons-screenshotsbranch to keep binaries out of this diff. Delete that branch when this PR closes.