[pull] master from supabase:master#823
Merged
Merged
Conversation
## Problem The input groups components introduced in #44282 don't have the validation attributes when invalid. This hurts accessibility and also break the design: <img width="1730" height="324" alt="image" src="https://github.com/user-attachments/assets/a3fb8d86-f3a8-46bb-aa53-d0599c11f056" /> ## Solution This is because the wrapper `<FormControl_Shadcn_>` passes the validation props to its direct child. The solution is to avoid applying them on the `<InputGroup>` and to apply them manually on the inputs. I also fixed a small accessibility issue by moving the addon texts after the input so that screen readers announce them in the correct order. No visual change for this <img width="587" height="158" alt="image" src="https://github.com/user-attachments/assets/1f8858ea-6659-45f9-964e-8c43a7fe14ba" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Unified numeric input layout by moving unit labels/suffixes (e.g., "seconds", "GB", "%", "connections", "digits", "IOPS", "MB/s", "rows") to appear after their inputs for a consistent, predictable form appearance. * **Accessibility** * Form controls now expose IDs and ARIA attributes from form context when available, improving screen-reader descriptions and error association. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
## 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
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? Bug fix ## What is the current behavior? Fixes #34967 The `/account/me` ([https://supabase.com/dashboard/account/me](https://supabase.com/dashboard/account/me)) preferences page has layout shifting during profile loading. ## What is the new behavior? - Loading skeletons now match the structure of the loaded content (one card per dynamic section) - Static sections only render in the non-error branch, preventing them from appearing alongside error messages - Removed unused `isSuccess` destructure from `useProfile()` - CLS value now on good range <= 0.10. <img width="1917" height="905" alt="Screenshot from 2026-02-11 00-39-19" src="https://github.com/user-attachments/assets/1d8fa7e1-9ca3-49ae-b4b8-1c0f28ebbf93" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Enhanced the loading state interface on the account settings page with improved visual indicators. Updated the component structure for better UI consistency and refined the visual feedback mechanism during profile data retrieval. <!-- end of auto-generated comment: release notes by coderabbit.ai --> Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
See Commits and Changes for more details.
Created by
pull[bot] (v2.0.0-alpha.4)
Can you help keep this open source service alive? 💖 Please sponsor : )