mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 09:55:06 +03:00
Danny White
14fe0c0cc8
## What kind of change does this PR introduce? UI polish for split buttons (primary action + dropdown chevron). Follow-up to #49055. ## What is the current behavior? The focus ring sits above the neighbouring half, but the inner edge stays square, so the ring has two sharp corners at the join. ## What is the new behavior? On keyboard focus, the squared-off edge uses a slight radius so the ring matches the outer corners more closely. Resting state is unchanged. Split-button callsites now share the same join classes as the design-system example. | Before | After | | --- | --- | | <img width="1030" height="296" alt="43471" src="https://github.com/user-attachments/assets/9df3bd72-c7ac-4419-ae18-a7e649dc2d66" /> | <img width="1056" height="276" alt="CleanShot 2026-08-17 at 10 45 09@2x" src="https://github.com/user-attachments/assets/52e8a4dc-9c52-45ce-b4d0-f0e7b1b75935" /> | ## To test Tab to each half (labelled button, then chevron). Inner corners of the focus ring should be slightly rounded, not square. 1. [Split with dropdown](https://design-system-git-fix-split-button-focus-radius-supabase.vercel.app/design-system/docs/components/button#split-with-dropdown) (no login) 2. [Access Tokens](https://studio-staging-git-fix-split-button-focus-radius-supabase.vercel.app/dashboard/account/tokens) → Generate new token 3. Any project on [studio staging](https://studio-staging-git-fix-split-button-focus-radius-supabase.vercel.app/dashboard/_/settings/general) → Settings → General → Restart project <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Accessibility** - Added accessible labels to dropdown and export controls. - Improved keyboard-focus visibility, layering, and rounded edge treatment across joined buttons and menus. - Removed misleading or redundant screen-reader text and titles. - **Bug Fixes** - Prevented split-button controls from shrinking or displaying awkward borders and corners. - Refined hover and focus behavior for action buttons throughout settings, database, storage, account, and documentation interfaces. - **Documentation** - Clarified guidance for using overflow menus and responsive split-button actions. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
Supabase UI Patterns
This package should be used for components which are built using NPM libraries (react-markdown, reactflow for example),
which make no sense to be included in all apps. It should also be used for components which are constructed using various
components from the ui package.
This package does not have a barrel file - each component has to be imported from its index
(ui-patterns/PrivacySettings, for example). This is intentional so that adding a new component which is used only in
1 or 2 apps doesn't burden the rest of the apps.