refactor: refactor Label with useRender; reuse in Field.Label#766
Merged
rohanchkrabrty merged 6 commits intomainfrom May 4, 2026
Merged
refactor: refactor Label with useRender; reuse in Field.Label#766rohanchkrabrty merged 6 commits intomainfrom
rohanchkrabrty merged 6 commits intomainfrom
Conversation
Removes the standalone Label component and folds its inline labeling role
into Field.Label via a new `orientation` prop ("vertical" | "horizontal").
- Field.Label gains orientation="horizontal" for inline use beside Radio
and Checkbox controls (no padding-bottom, pointer cursor)
- Field.Label now falls back to a plain <label> when used outside a
Field.Root (Base UI's primitive requires the context)
- NumberField.ScrubArea switches from Label to a plain <label> with the
required typography moved into the scrub-area-label class
- Radio and Checkbox playground examples migrate from raw <label> to
Field.Label orientation="horizontal" to demonstrate the new pattern
- Removes Label exports, tests, docs, and playground entry
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
📝 WalkthroughWalkthroughThe PR refactors the Label component API and implementation: removes size variants and Sequence Diagram(s)(omitted) Possibly related issues
Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Review rate limit: 0/1 reviews remaining, refill in 60 minutes.Comment |
rohanchkrabrty
changed the title
rohilsurana
changed the title
rohilsurana
approved these changes
Apr 30, 2026
Member
rohilsurana
left a comment
rohilsurana
left a comment
There was a problem hiding this comment.
LGTM — clean consolidation of Label into Field.Label with good test coverage.
A few minor suggestions for consideration (non-blocking):
- Commit prefix should probably be
feat!:instead ofchore:since removing theLabelexport is a breaking change for consumers. - The fallback
<label>path could strip Base UI-specific props before spreading to avoid potential DOM warnings. - Consider a note in Field docs about
Field.Label orientation="horizontal"as the replacement pattern for standalone Label usage with Radio/Checkbox.
rohanchkrabrty
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/www/src/components/playground/label-examples.tsx`:
- Around line 11-14: The Label examples use htmlFor='pg-label-email' and
htmlFor='pg-label-name' but there are no corresponding input elements, breaking
label association; update the playground so each <Label> in label-examples.tsx
is paired with a control that has the matching id (e.g., add inputs/selects with
id="pg-label-email" and id="pg-label-name") or change the htmlFor values to
match the existing control ids—modify the Label usages and/or add the missing
input elements so the Label component's htmlFor matches a rendered control.
In `@apps/www/src/components/playground/radio-examples.tsx`:
- Around line 20-21: The Label next to the disabled Radio (Radio value='3'
id='P3' disabled) doesn't reflect the disabled state; update the Label for the
disabled radio to carry a data-disabled attribute (or equivalent prop) when its
associated Radio has disabled set so it receives the correct styling and pointer
behavior; locate the Radio/Label pair (Radio id='P3', Label htmlFor='P3') in
radio-examples.tsx and change the Label to conditionally include data-disabled
(or pass disabled) when the Radio uses disabled.
In `@apps/www/src/content/docs/components/label/props.ts`:
- Around line 1-19: The docs interface LabelProps is missing the optionalText
prop that the component exposes; update the LabelProps interface to include
optionalText?: string with a brief JSDoc comment (e.g., "Custom text to display
for optional indicator") so it matches the runtime props used in
packages/raystack/components/label/label.tsx (look for optionalText usage in
that file) and keep other fields (required, htmlFor, render, className)
unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 16621b1a-b292-4745-8935-e69997118a19
📒 Files selected for processing (13)
apps/www/src/components/playground/checkbox-examples.tsxapps/www/src/components/playground/label-examples.tsxapps/www/src/components/playground/radio-examples.tsxapps/www/src/components/theme-customiser/theme-customiser.tsxapps/www/src/content/docs/components/label/demo.tsapps/www/src/content/docs/components/label/index.mdxapps/www/src/content/docs/components/label/props.tspackages/raystack/components/label/__tests__/label.test.tsxpackages/raystack/components/label/index.tspackages/raystack/components/label/index.tsxpackages/raystack/components/label/label.module.csspackages/raystack/components/label/label.tsxpackages/raystack/components/number-field/number-field.module.css
💤 Files with no reviewable changes (1)
- packages/raystack/components/label/index.tsx
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/www/src/content/docs/components/label/index.mdx`:
- Line 51: Replace the phrase "Maintains WCAG compliant color contrast ratios"
with the hyphenated compound adjective "Maintains WCAG-compliant color contrast
ratios" in the Label component docs (search for that exact text in the index.mdx
content for the Label docs).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 3897425e-a930-4c16-a85b-5695037c3e36
📒 Files selected for processing (3)
apps/www/src/content/docs/components/label/demo.tsapps/www/src/content/docs/components/label/index.mdxapps/www/src/content/docs/components/label/props.ts
🚧 Files skipped from review as they are similar to previous changes (2)
- apps/www/src/content/docs/components/label/demo.ts
- apps/www/src/content/docs/components/label/props.ts
| - Renders a semantic HTML `<label>` element by default | ||
| - Supports programmatic association with form controls via `htmlFor` | ||
| - Required indicators are properly hidden from screen readers | ||
| - Maintains WCAG compliant color contrast ratios |
Contributor
There was a problem hiding this comment.
Hyphenate “WCAG-compliant” in the accessibility bullet.
Line 51 should use the compound adjective form for correct docs grammar.
Suggested patch
-- Maintains WCAG compliant color contrast ratios
+- Maintains WCAG-compliant color contrast ratios📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| - Maintains WCAG compliant color contrast ratios | |
| - Maintains WCAG-compliant color contrast ratios |
🧰 Tools
🪛 LanguageTool
[grammar] ~51-~51: Use a hyphen to join words.
Context: ... controls via htmlFor - Maintains WCAG compliant color contrast ratios - Shows ...
(QB_NEW_EN_HYPHEN)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/www/src/content/docs/components/label/index.mdx` at line 51, Replace the
phrase "Maintains WCAG compliant color contrast ratios" with the hyphenated
compound adjective "Maintains WCAG-compliant color contrast ratios" in the Label
component docs (search for that exact text in the index.mdx content for the
Label docs).
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/V1-migration.md`:
- Line 2039: The checklist link text "- [ ] Wrap InputField usages with
`<Field>` — move `label`, `helperText`, `error`, `optional` to Field props (see
[InputField](`#inputfield`))" points to a non-existent anchor; update the anchor
target to the actual section anchor by replacing `#inputfield` with
`#input-formerly-inputfield` (or alternatively rename the section anchor to
`#inputfield`) so the checklist jump works; locate the checklist line containing
"InputField" and fix the link target accordingly.
In `@packages/raystack/components/field/field-misc.tsx`:
- Around line 6-19: The FieldLabel component currently assigns render on
FieldPrimitive.Label but then spreads {...props} afterwards, allowing a
caller-provided props.render to override the intended wrapper; update FieldLabel
to extract render from the incoming props (i.e. const { render, ref, required,
optionalText, children, ...rest } = props or destructure render out in the
function signature), then pass the explicit Label wrapper into
FieldPrimitive.Label while spreading only the remaining props (rest) so callers
cannot bypass the Label behavior; ensure you reference FieldLabel,
FieldPrimitive.Label and Label and remove render from the spread so
optionalText/styling always apply.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: f9c31527-fa53-4cf4-8a45-ae3f0d9d55f0
📒 Files selected for processing (4)
docs/V1-migration.mdpackages/raystack/components/field/field-misc.tsxpackages/raystack/components/field/field.module.csspackages/raystack/components/number-field/number-field.module.css
✅ Files skipped from review due to trivial changes (1)
- packages/raystack/components/field/field.module.css
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/raystack/components/number-field/number-field.module.css
Shreyag02
approved these changes
May 4, 2026
rsbh
approved these changes
May 4, 2026
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 join this conversation on GitHub.
Already have an account?
Sign in to comment
4 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.
Summary
Labelas a polymorphic,useRender-based component. Drops the oldsizevariants and asterisk-stylerequired/requiredIndicator; new props arerequired(renders an(optional)indicator whenfalse) andoptionalText(defaults to'(optional)'). CSS is typography-only with no margins/padding — pointer cursor is wired via.label[for]so layout is the consumer's responsibility (Flex).Field.Labeldelegates toLabelthrough the Base UIrenderprop.FieldLabelProps = FieldPrimitive.Label.Props & LabelProps, so future Label props flow through automatically; the(optional)indicator now lives in Label..field { gap: var(--rs-space-2) }(was--rs-space-1); stripspadding-bottomfrom the label andpadding-topfrom.description/.error; removes the now-redundant.label/.optionalrules fromfield.module.css.<label>callsites toLabel(theme-customiser radio rows); updates Radio/Checkbox/Label playground examples and docs (index.mdx,props.ts,demo.ts) for the new API..scrub-area-label[for]specificity in NumberField socursor: ew-resizewins over Label's[for]pointer rule. Label tests rewritten (11 cases); existing Field/NumberField tests still pass.