mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
Danny White
6c0439ace8
## What kind of change does this PR introduce? Bug fix for translucent default Button (and related control) fills that show through stacked content on hover. Resolves [DEPR-636](https://linear.app/supabase/issue/DEPR-636/report-snippet-cell-expand-button-becomes-transparent-on-hover). ## What is the current behavior? Default `Button` hover uses `bg-selection`, and dark-mode rest uses `bg-muted`. After the colour system migration those legacy aliases point at translucent `--accent` / `--muted`, so hover punches through whatever sits behind the button (SQL Editor / Reports cell expand, sticky columns, skip-to-content, etc.). | Before: Light | Before: Dark | | --- | --- | | <img width="491" height="75" alt="CleanShot 2026-08-03 at 09 12 26@2x" src="https://github.com/user-attachments/assets/20e33ba9-74c5-47eb-aced-ac932a0059fa" /> | <img width="205" height="54" alt="21257" src="https://github.com/user-attachments/assets/a2c9f092-18a7-4a4d-a49b-6e019e50895f" /> | ## What is the new behavior? Default Button, Select, MultiSelect, and the CommandMenu trigger use opaque elevation tokens (`bg-background dark:bg-card`, `hover:bg-popover`). SkipToContent drops its opaque-plate workaround. No global `compat.css` alias remaps. | After: Light | After: Dark | | --- | --- | | <img width="466" height="110" alt="CleanShot 2026-08-07 at 16 09 59@2x" src="https://github.com/user-attachments/assets/6410cb58-b37c-427f-a0ff-7b223a7f3f51" /> | <img width="474" height="132" alt="CleanShot 2026-08-07 at 16 08 53@2x" src="https://github.com/user-attachments/assets/575c56d1-8ee5-4eb5-8f08-e4b5af8520f0" /> | ## Additional context - Overlay tokens (`--muted` / `--accent` / `--tertiary`) stay intentional for washes on solid surfaces. Controls that can sit over content should use solid elevation tokens (`card` / `popover`) instead. - Same root cause as the workarounds in #47996 and #48314. - The “View full cell content” control lives in SQL Editor results / Report `QueryBlock` (`ResultCell`), not Table Editor. It only renders when the value is an object/array, contains a newline, or is longer than 60 characters, and it stays `opacity-0` until you hover the cell. ## To test Short path in Studio (light and dark): 1. **Expand button over cell text (clearest repro)** – SQL Editor, run: ```sql select repeat('x', 80) as name; ``` Hover the result cell. The expand control should appear over the text; hover the button itself and confirm the fill is solid (no `x`s showing through). Same control is what Report snippets use. 2. **Any default Button** – Top nav **Connect** (or any bordered default button). Hover: solid fill. 3. **Select** – Project picker or a Settings form select. Trigger hover / open fill stays opaque. 4. **Command menu trigger** – Hover the header search / Cmd-K control; match default Button. 5. **Skip to content** – Tab once on Studio. Skip link hover stays solid over the page behind it. 6. **Editor tabs regression** – SQL / Table Editor tab strip should still look grey in light mode (not washed white).
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.