Inject id & classes into components#21
Conversation
|
Warning Review limit reached
Next review available in: 30 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (14)
📝 WalkthroughWalkthroughAdds optional ChangesId and classes propagation
Release Workflow Name Update
Estimated code review effort: 3 (Moderate) | ~25 minutes Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/vue/src/components/primitives/Button/Button.ts (1)
79-79: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winConsider declaring
idas a typed prop for consistency with TextField.Button accesses
idviaattrs['id'](untyped,unknown), while TextField declaresidas a properStringprop with type safety. This inconsistency means TypeScript consumers of Button won't get autocomplete or validation for theidprop. Declaringidin thepropsconfig andButtonPropstype would align both components and improve type safety.♻️ Suggested refactor: declare `id` as a prop
type ButtonProps = Readonly<{ color: 'primary' | 'secondary' | 'danger'; disabled: boolean; + id: string | undefined; endIcon: VNode | undefined; fullWidth: boolean; loading: boolean; size: 'small' | 'medium' | 'large'; startIcon: VNode | undefined; type: 'button' | 'submit' | 'reset'; variant: 'solid' | 'outline' | 'ghost' | 'text'; }>;And in the props config:
props: { color: { default: 'primary', type: String as PropType<'primary' | 'secondary' | 'danger'>, }, disabled: {default: false, type: Boolean}, endIcon: {default: undefined, type: Object as PropType<VNode>}, fullWidth: {default: false, type: Boolean}, + id: {default: undefined, type: String}, loading: {default: false, type: Boolean},Then update the render:
- id: attrs['id'], + id: props.id,🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/vue/src/components/primitives/Button/Button.ts` at line 79, Button currently reads id from attrs['id'], so it is untyped and inconsistent with TextField. Update the Button component’s props definition and ButtonProps type to declare id as a proper String prop, then use that typed prop in the Button render/setup logic instead of pulling it from attrs. Keep the change localized to the Button component so consumers get autocomplete and validation for id.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@packages/vue/src/components/primitives/Button/Button.ts`:
- Line 79: Button currently reads id from attrs['id'], so it is untyped and
inconsistent with TextField. Update the Button component’s props definition and
ButtonProps type to declare id as a proper String prop, then use that typed prop
in the Button render/setup logic instead of pulling it from attrs. Keep the
change localized to the Button component so consumers get autocomplete and
validation for id.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 9e7087a7-c8dd-455a-8782-5cd284876403
📒 Files selected for processing (14)
.github/workflows/release.ymlpackages/javascript/src/models/embedded-flow.tspackages/nextjs/src/client/components/presentation/SignIn/SignIn.tsxpackages/nuxt/src/runtime/components/actions/SignInButton.tspackages/nuxt/src/runtime/components/actions/SignOutButton.tspackages/nuxt/src/runtime/components/actions/SignUpButton.tspackages/react/src/components/factories/FieldFactory.tsxpackages/react/src/components/presentation/auth/AuthOptionFactory.tsxpackages/react/src/components/presentation/auth/SignIn/BaseSignIn.tsxpackages/react/src/components/presentation/auth/SignUp/BaseSignUp.tsxpackages/react/src/components/primitives/FormControl/FormControl.tsxpackages/react/src/components/primitives/Typography/Typography.tsxpackages/vue/src/components/primitives/Button/Button.tspackages/vue/src/components/primitives/TextField/TextField.ts
brionmario
changed the title
id & classes to SDK componentsid & classes to components
brionmario
changed the title
id & classes to componentsid & classes into components
2 participants
Purpose
Adds support for
Element IDsandCSS Classesarriving in the flow response, and applies them to the rendered SDK components across frameworks.Approach
embedded-flow.tsmodel: addedid/classesfields to the flow component schema.FieldFactory,AuthOptionFactory,BaseSignIn,BaseSignUp,FormControl, andTypographynow read and forwardid/classNamefrom the flow config to the rendered DOM elements.ButtonandTextFieldprimitives updated to accept and apply the same props.SignInButton,SignOutButton,SignUpButtonupdated to pass throughid/classes.SignInpresentation component updated accordingly.Related Issues
Related PRs
CSS Classesvia flows thunderid#3859Checklist
breaking changelabel added.Security checks