mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
Danny White
0005d3742d
## What kind of change does this PR introduce? Bug fix. Resolves FE-2959. ## What is the current behaviour? Grouped inputs strip the inner control border with `border-0`, while the outer `InputGroup` is responsible for the visible outline. After #44703, grouped form inputs now receive the correct validation attributes, but the primitive still removes the inner border dimensions entirely. That keeps the visual layer brittle and can lead to inconsistent error rendering, especially in light mode where the grouped password field does not match the Project name input. The shared `ui-patterns` input wrapper also inherits the generic `inline-end` button spacing from `InputGroupAddon`, which pushes the password copy button slightly too far to the right. ## What is the new behaviour? The shared grouped-input primitive now keeps a transparent inner border instead of removing border widths entirely. The outer `InputGroup` continues to own the visible border, focus ring and error treatment, but the inner control now has stable border metrics and no redundant dark-mode background override. The grouped invalid state now also matches the plain input treatment more closely: - unfocused error border uses `destructive-400` - focused error border uses `destructive` - error background uses `destructive-200` The `ui-patterns` input wrapper now overrides the inherited `inline-end` negative margin for its own copy/reveal button addon, so the password copy button sits in the right place without changing spacing for other direct `InputGroup` consumers. | Before | After | | --- | --- | | <img width="1338" height="284" alt="CleanShot 2026-04-09 at 13 43 50@2x-91489355-5EEA-4884-BAA2-B93B28F1D7CB" src="https://github.com/user-attachments/assets/ed40683b-8a87-4deb-8a0f-f892d00894f0" />| <img width="1334" height="278" alt="CleanShot 2026-04-09 at 13 41 36@2x-5D7E930B-EDB2-4002-9367-34ACE2DF4DB4" src="https://github.com/user-attachments/assets/7d9594a4-9988-480e-a809-9f5ed29e8e24" /> | | <img width="1336" height="210" alt="CleanShot 2026-04-09 at 14 06 15@2x-05379F74-4CA5-4E6E-9250-CBA2764C1318" src="https://github.com/user-attachments/assets/25e48cd4-de0a-47f3-9022-d7a3829a0626" /> | <img width="1334" height="210" alt="CleanShot 2026-04-09 at 14 12 11@2x-11FBC519-D398-4A59-971A-97FBFEF610DE" src="https://github.com/user-attachments/assets/91c3710c-7773-4286-854d-7b7144db85ab" /> | An easy place to test this is the Database password field in the New Project creation flow. See also the Minimum password length field in Email (Sign In / Providers). ## Summary - update `packages/ui/src/components/shadcn/ui/input-group.tsx` - replace `border-0` on grouped inputs/textareas with transparent borders - remove the redundant `dark:bg-transparent` - keep the inner grouped controls visually neutral so the outer group owns the rendered border state - align grouped invalid border and background styling with the plain input treatment - update `packages/ui-patterns/src/DataInputs/Input.tsx` so copy/reveal buttons do not inherit the extra right pull intended for other `inline-end` addons