Skip to content

fix: use 8px gap between Alert action buttons#690

Closed
nicoledbelcher wants to merge 2 commits into
coinbase:masterfrom
nicoledbelcher:nicole/alert-button-gap
Closed

fix: use 8px gap between Alert action buttons#690
nicoledbelcher wants to merge 2 commits into
coinbase:masterfrom
nicoledbelcher:nicole/alert-button-gap

Conversation

@nicoledbelcher

@nicoledbelcher nicoledbelcher commented May 18, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Update both web and mobile Alert to use gap={1} (8px) instead of gap={2} (16px) between stacked action buttons (preferred + dismiss), in both horizontal and vertical layouts.
  • Brings Alert in line with the ButtonGroup spec and current design guidance for stacked button spacing.
  • No public API changes; behavior of all props is preserved.

Linear: CDS-2052

Affected files

  • packages/web/src/overlays/Alert.tsx
  • packages/mobile/src/overlays/Alert.tsx

The docs site at https://cds.coinbase.com/components/overlay/Alert/ does not need any MDX changes; it renders the live Alert component, so it will reflect the 8px gap automatically after the next @coinbase/cds-web / @coinbase/cds-mobile release is published.

Test plan

  • yarn nx run web:test --testPathPattern=overlays/__tests__/Alert.test.tsx — 12/12 passed
  • yarn nx run mobile:test --testPathPattern=overlays/__tests__/Alert.test.tsx — 7/7 passed
  • yarn nx run web:typecheck — passes
  • yarn nx run mobile:typecheck — passes
  • yarn nx format:write on modified files
  • Visually verify in Storybook (AlertBasic, AlertVerticalActions, AlertSingleAction) that horizontal and vertical action layouts now show 8px between buttons.

Align Alert's stacked action button spacing with the ButtonGroup spec.
Both web and mobile Alert components previously used gap={2} (16px)
between their preferred and dismiss actions; this updates them to
gap={1} (8px) for consistency with current design guidance.

Co-authored-by: Cursor <cursoragent@cursor.com>
@cb-heimdall

cb-heimdall commented May 18, 2026

Copy link
Copy Markdown
Collaborator

✅ Heimdall Review Status

Requirement Status More Info
Reviews 1/1
Denominator calculation
Show calculation
1 if user is bot 0
1 if user is external 0
2 if repo is sensitive 0
From .codeflow.yml 1
Additional review requirements
Show calculation
Max 0
0
From CODEOWNERS 1
Global minimum 0
Max 1
1
1 if commit is unverified 1
Sum 2
CODEOWNERS ✅ See below

CODEOWNERS

Code Owner Status Calculation
ui-systems-eng-team 1/1
Denominator calculation
Additional CODEOWNERS Requirement
Show calculation
Sum 0
0
From CODEOWNERS 1
Sum 1

Adds CHANGELOG entries for the Alert action-button gap fix and syncs
common + mcp-server to 8.74.4 via yarn release.

Co-authored-by: Cursor <cursoragent@cursor.com>

@adrienzheng-cb adrienzheng-cb left a comment

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.

❤️ thanks!

@adrienzheng-cb

Copy link
Copy Markdown
Contributor

ahh there seem to be some conflicts. Let me know if you need help resolving them!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Development

Successfully merging this pull request may close these issues.

3 participants