Skip to content

Lift the liquid glass buttons off the ButtonSize axis - #3138

Merged
StylianosGakis merged 1 commit into
developfrom
design-system/extract-glass-button
Sep 9, 2026
Merged

Lift the liquid glass buttons off the ButtonSize axis#3138
StylianosGakis merged 1 commit into
developfrom
design-system/extract-glass-button

Conversation

@StylianosGakis

@StylianosGakis StylianosGakis commented Sep 7, 2026

Copy link
Copy Markdown
Member

Extract the glass button outside of the entire rest of the button system because it does not respect the multiple-size scenario anyway and we had to do if-checks for the glass scenario to adjust the size of the button due to this fact. We had code like

@Composable
private fun ButtonSize.sizeIn(style: Style): Size = when {
  style.glassMaterial != null && this == ButtonSize.Large -> Size.Glass
  else -> size
}

which felt wrong so I figured might as well take that special case out since we only have one size in the app for now. If we get more such buttons we can consider bringing it back into the same size system

🤖 AI description:

📄 The button seam — visual walkthrough of the final API, the size scale, and the Figma mapping.

sizeIn(style) let a ButtonStyle reach across and change the metrics a ButtonSize asked for, gated on this == ButtonSize.Large. So RoundedPrimary at Medium silently rendered with standard Medium padding: no error, no warning. Nothing hit it today (all three call sites are Large), but design-showcase was rendering the bogus combinations.

  • RoundedPrimary/RoundedLiquidGlass leave ButtonStyle for LiquidGlassButtonStyle { Tinted, Regular }.
  • New HedvigLiquidGlassButton, which takes no ButtonSize.
  • Both funnel into a private ButtonImpl receiving Style and Size already resolved, so the axes can't cross. sizeIn() is deleted.
  • Showcase gets a dedicated Glass row instead of a cell per size.

The misuse is now a compile error, not a silent fallback. Three probes against the new API:

Argument type mismatch: actual type is 'ButtonDefaults.LiquidGlassButtonStyle',
  but 'ButtonDefaults.ButtonStyle' was expected.
No parameter with name 'buttonSize' found.
Unresolved reference 'RoundedPrimary'.

The two enums are disjoint, HedvigLiquidGlassButton has no size parameter, and Size is a private sealed interface so Size.LiquidGlass isn't nameable outside Button.kt. (Modifier.liquidGlass stays public for ToolbarIcons, so a glass material can still be hand-applied to any button — but that's explicit, and nothing gets silently substituted.)

Naming, following @panasetskaya's review comment. She was right that Primary isn't glass: it resolves to the same nine color tokens as ButtonStyle.Primary at every state. But the Figma file settles what these actually are. Make a claim and Help & support are two instances of one component with a boolean Tinted variant, and both BG children carry the same drop shadow, 0px 8px 40px rgba(0,0,0,0.12), which is exactly our glassDropShadow. So they are a pair, design calls the pair liquid glass, and the code now says the same.

Metrics check out against Figma: fill #121212, 20dp horizontal padding, 48dp height (12 + 24 + 12), full corner radius.

Verified on a Pixel 6 Pro: home action row renders all three buttons correctly, and the showcase shows the six remaining styles per size plus the Glass row.

@StylianosGakis
StylianosGakis marked this pull request as ready for review September 7, 2026 14:20
@StylianosGakis
StylianosGakis requested a review from a team as a code owner September 7, 2026 14:20
@StylianosGakis
StylianosGakis force-pushed the design-system/extract-glass-button branch from e88fced to f3bf5d9 Compare September 7, 2026 14:24
@StylianosGakis
StylianosGakis force-pushed the design-system/glass-button-tokens-rename branch from c99aa17 to d38b2ab Compare September 7, 2026 14:24
enum class GlassButtonStyle {
/** A filled pill with the sheen and drop shadow of the iOS glass material. */
RoundedPrimary,
Primary,

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the only comment now it that this button now that we have all buttons rounded is just a Primary. It's not glass in itself.

@StylianosGakis
StylianosGakis force-pushed the design-system/glass-button-tokens-rename branch from d38b2ab to 8f66e4c Compare September 7, 2026 15:42
@StylianosGakis
StylianosGakis force-pushed the design-system/extract-glass-button branch from f3bf5d9 to f4e1915 Compare September 7, 2026 15:42
@StylianosGakis StylianosGakis changed the title Lift the glass button styles off the ButtonSize axis Lift the overlay button styles off the ButtonSize axis Sep 7, 2026
@StylianosGakis
StylianosGakis force-pushed the design-system/glass-button-tokens-rename branch from 8f66e4c to 671c93f Compare September 8, 2026 10:41
@StylianosGakis
StylianosGakis force-pushed the design-system/extract-glass-button branch from f4e1915 to 794c0bf Compare September 8, 2026 10:41
@StylianosGakis StylianosGakis changed the title Lift the overlay button styles off the ButtonSize axis Lift the liquid glass buttons off the ButtonSize axis Sep 8, 2026
Base automatically changed from design-system/glass-button-tokens-rename to develop September 8, 2026 11:20
RoundedPrimary and RoundedLiquidGlass leave ButtonStyle for a new
LiquidGlassButtonStyle { Tinted, Regular }, rendered by a new
HedvigLiquidGlassButton that takes no ButtonSize. Both funnel into a
shared ButtonImpl that receives Style and Size already resolved, so
sizeIn() goes away and a style can no longer reach in and change the
metrics a size asked for.

This mirrors Figma, which models both as one component, 'Button - Liquid
Glass - Text' (node 1:6724), with a boolean Tinted variant and a single
fixed size. Tinted is the 'Make a claim' pill: same colors as
ButtonStyle.Primary at every state, distinguished only by the drop shadow
that Figma puts on both variants.

'Liquid glass at Medium' is now unexpressible rather than silently
falling back to standard padding. The showcase was rendering those bogus
combinations; the glass buttons now get their own row.
@StylianosGakis
StylianosGakis force-pushed the design-system/extract-glass-button branch from 794c0bf to 7dc5c76 Compare September 8, 2026 12:16
@StylianosGakis
StylianosGakis marked this pull request as draft September 9, 2026 08:04
@StylianosGakis
StylianosGakis marked this pull request as ready for review September 9, 2026 08:04
@StylianosGakis
StylianosGakis removed this pull request from stack #3139 September 9, 2026 08:14
@StylianosGakis
StylianosGakis merged commit b1fe942 into develop Sep 9, 2026
4 checks passed
@StylianosGakis
StylianosGakis deleted the design-system/extract-glass-button branch September 9, 2026 08:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants