feat: add Label component with docs and tests #1544
Conversation
WalkthroughAdds a new Label UI component with tests, styles, and theme integration. Introduces documentation pages, API metadata, usage examples, and SEO for Label. Updates docs navigation and release list to include Label. No changes to existing components beyond imports and navigation entries. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor U as User
participant L as Label (UI)
participant B as Browser
participant I as Input
U->>L: Click label (htmlFor="fieldId")
L->>B: Default label click behavior
B->>I: Focus element with id="fieldId"
Note right of I: Input receives focus
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks (3 passed)✅ Passed checks (3 passed)
✨ Finishing Touches
🧪 Generate unit tests
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. Comment |
CoverageThis report compares the PR with the base branch. “Δ” shows how the PR affects each metric.
Coverage improved or stayed the same. Great job! Run |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (10)
styles/themes/components/label.scss (1)
1-5: Baseline label styles look good; consider tokens/logical props.If spacing tokens exist, prefer them (e.g., var(--rad-ui-space-1)) and consider margin-block-end over margin-bottom for writing-mode friendliness.
docs/app/docs/docsNavigationSections.tsx (1)
100-103: Nav entry LGTM; optionally flag as new.If you want to surface “Label” as newly added like others here, add is_new: true.
docs/app/docs/components/label/seo.ts (1)
3-6: SEO metadata is fine; consider canonical/OG fields.If generateSeoMetadata supports it, set canonical path (/docs/components/label) and basic openGraph for richer previews.
docs/app/docs/components/label/docs/component_api/label.tsx (1)
1-45: Tighten typings and defaults in API table.
- Use literal types to prevent accidental mutation in consumers.
- Consider using "—" for undefined defaults for consistency (htmlFor).
- Verify the key name info_tooltips matches the table renderer.
Apply this minimal typing tweak:
-const data = { +const data = { name: "Label", ... -}; +} as const;src/components/ui/Label/Label.tsx (1)
6-6: Export COMPONENT_NAME for consistency (optional).Other components (e.g., Progress) export this; doing the same helps tooling/tests reuse it.
-const COMPONENT_NAME = 'Label'; +export const COMPONENT_NAME = 'Label';src/components/ui/Label/tests/Label.test.tsx (1)
21-33: Focus behavior test LGTM; consider adding a ref test (optional).Add a small test to assert ref is forwarded to HTMLLabelElement.
+ test('forwards ref to HTMLLabelElement', () => { + const ref = React.createRef<HTMLLabelElement>(); + render(<Label ref={ref}>X</Label>); + expect(ref.current).toBeInstanceOf(HTMLLabelElement); + });docs/app/docs/components/label/page.mdx (2)
26-33: Defensive rendering when API data is missing.If
api_documentation.labelever fails to load, the page will crash. Render the table conditionally.- <Documentation.Table - title="Label" - description={api_documentation.label.description} - columns={api_documentation.label.columns} - data={api_documentation.label.data} - /> + {api_documentation?.label && ( + <Documentation.Table + title="Label" + description={api_documentation.label.description} + columns={api_documentation.label.columns} + data={api_documentation.label.data} + /> + )}
14-19: Optional: Include nested-label example for completeness.Add a second snippet showing the “wrap input with label” pattern, which is also valid a11y-wise.
docs/app/docs/components/label/docs/codeUsage.js (2)
8-10: Confirm base class alignment with component markup.The CSS targets
.rad-ui-label. Verify the Label component renders this class by default; otherwise the example won’t style anything. If not default, showclassName="rad-ui-label"in the JS snippet or adjust the selector to the actual base class.- code: `import Label from "@radui/ui/Label"\n\nconst LabelExample = () => (\n <div>\n <Label htmlFor="email">Email</Label>\n <input id="email" type="email" />\n </div>\n)`, + code: `import Label from "@radui/ui/Label"\n\nconst LabelExample = () => (\n <div>\n <Label className="rad-ui-label" htmlFor="email">Email</Label>\n <input id="email" type="email" />\n </div>\n)`,
18-24: Optional: Expand features with keyboard and nesting behavior.Consider adding bullets for “associates via nesting without htmlFor/id” and “supports focusing via keyboard (Space/Enter)” to set correct expectations.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
docs/app/docs/components/label/docs/codeUsage.js(1 hunks)docs/app/docs/components/label/docs/component_api/label.tsx(1 hunks)docs/app/docs/components/label/page.mdx(1 hunks)docs/app/docs/components/label/seo.ts(1 hunks)docs/app/docs/docsNavigationSections.tsx(1 hunks)scripts/RELEASED_COMPONENTS.cjs(1 hunks)src/components/ui/Label/Label.tsx(1 hunks)src/components/ui/Label/tests/Label.test.tsx(1 hunks)styles/themes/components/label.scss(1 hunks)styles/themes/default.scss(1 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
docs/**/*.{ts,tsx}
📄 CodeRabbit inference engine (docs/.cursor/rules/posthog-integration.mdc)
In TypeScript, store feature flag names in an enum
Files:
docs/app/docs/components/label/seo.tsdocs/app/docs/docsNavigationSections.tsxdocs/app/docs/components/label/docs/component_api/label.tsx
docs/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (docs/.cursor/rules/posthog-integration.mdc)
docs/**/*.{ts,tsx,js,jsx}: Write enum/const object members for feature flag names in UPPERCASE_WITH_UNDERSCORE
Gate flag-dependent code with a check that verifies the flag’s values are valid and expected before use
If a custom person/event property is referenced in two or more places, define it in a central enum (TS) or const object (JS) and reuse that reference
Files:
docs/app/docs/components/label/seo.tsdocs/app/docs/docsNavigationSections.tsxdocs/app/docs/components/label/docs/component_api/label.tsxdocs/app/docs/components/label/docs/codeUsage.js
docs/**/*.{js,jsx}
📄 CodeRabbit inference engine (docs/.cursor/rules/posthog-integration.mdc)
In JavaScript, store feature flag names as strings in a constant object to simulate an enum, and use a consistent naming convention
Files:
docs/app/docs/components/label/docs/codeUsage.js
🧬 Code graph analysis (1)
src/components/ui/Label/Label.tsx (1)
src/components/ui/Progress/Progress.tsx (1)
COMPONENT_NAME(8-8)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: coverage
- GitHub Check: build
🔇 Additional comments (5)
styles/themes/default.scss (1)
19-19: Theme import placement LGTM.The new @use aligns with existing components and should make .rad-ui-label available.
scripts/RELEASED_COMPONENTS.cjs (1)
19-20: Release listing update LGTM.Placement between Kbd and Progress matches the docs/nav order.
src/components/ui/Label/Label.tsx (1)
19-25: Confirm theme class mapping.Ensure customClassSwitcher(customRootClass, 'Label') resolves to the .rad-ui-label class so theme styles apply.
src/components/ui/Label/tests/Label.test.tsx (1)
10-19: Association test LGTM.Covers htmlFor linkage correctly.
docs/app/docs/components/label/page.mdx (1)
3-3:@radui/ui/Labelimport is consistent with all other component imports; no change needed.
| @@ -0,0 +1,26 @@ | |||
| // Import API documentation | |||
| import label_api_SourceCode from './component_api/label.tsx'; | |||
There was a problem hiding this comment.
🛠️ Refactor suggestion
Avoid importing TSX with explicit extension from JS.
Explicit “.tsx” in JS imports can fail depending on module resolution. Prefer extensionless import.
-import label_api_SourceCode from './component_api/label.tsx';
+import label_api_SourceCode from './component_api/label';📝 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.
| import label_api_SourceCode from './component_api/label.tsx'; | |
| import label_api_SourceCode from './component_api/label'; |
🤖 Prompt for AI Agents
In docs/app/docs/components/label/docs/codeUsage.js around line 2, the import
uses an explicit “.tsx” extension (import label_api_SourceCode from
'./component_api/label.tsx';) which can break in JS module resolution; change it
to an extensionless import (import label_api_SourceCode from
'./component_api/label';) and ensure the build/tsconfig supports resolving
.tsx/.ts via index or appropriate resolver so the same module is found without
the explicit extension.
| code: `import Label from "@radui/ui/Label"\n\nconst LabelExample = () => (\n <div>\n <Label htmlFor="email">Email</Label>\n <input id="email" type="email" />\n </div>\n)`, | ||
| }, |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Keep docs import path consistent with package scope.
Ensure the usage snippet’s @radui/ui/Label path matches the actual published entry point (scope and subpath). Update if your repo standard is different.
🏁 Script executed:
#!/bin/bash
# Inspect package.json exports to confirm Label entry
fd package.json | xargs -I{} jq -r '.name, .exports' {} 2>/dev/null | sed -n '1,120p'Length of output: 24
🏁 Script executed:
#!/bin/bash
# List all package.json files to locate @radui/ui package.json
find . -type f -name package.jsonLength of output: 34
🏁 Script executed:
#!/bin/bash
# Show main and exports in root package.json
jq '{main: .main, exports: .exports}' package.jsonLength of output: 37
Use package root import for Label
In docs/app/docs/components/label/docs/codeUsage.js (lines 6–7), replace
import Label from "@radui/ui/Label"with
import Label from "@radui/ui"to match the package’s published entry point.
🤖 Prompt for AI Agents
In docs/app/docs/components/label/docs/codeUsage.js around lines 6 to 7, the
import uses the internal path "@radui/ui/Label" instead of the package root;
change the import to use the published entry point by replacing the named path
with the package root import "@radui/ui" so the example aligns with the
package's public API.
| @@ -0,0 +1,34 @@ | |||
| 'use client'; | |||
| import React, { ElementRef, ComponentPropsWithoutRef } from 'react'; | |||
| import { clsx } from 'clsx'; | |||
There was a problem hiding this comment.
Incorrect clsx import will break build.
clsx has a default export; named import { clsx } is undefined in typical setups.
Apply this fix:
-import { clsx } from 'clsx';
+import clsx from 'clsx';🤖 Prompt for AI Agents
In src/components/ui/Label/Label.tsx around line 3, the import uses a named
import "import { clsx } from 'clsx';" which will be undefined; replace it with
the default import "import clsx from 'clsx';" so the module resolves correctly
and the build won't fail.
Summary
Testing
npm testSummary by CodeRabbit