refactor: replace as prop with render prop in Text and Headline#740
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 51 minutes and 59 seconds. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (13)
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 |
Migrate Text and Headline components from the brittle `as` polymorphic prop pattern to Base UI's `render` prop + `useRender` hook, matching the pattern already used by the Flex component. This eliminates manual type unions, removes a `@ts-expect-error` suppression, and enables rendering as any element via JSX or render functions. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The render prop accepts ReactElement values, not strings. Update
playground select options to use JSX element strings (e.g. '<h2 />')
so getPropsString generates correct `render={<h2 />}` syntax.
Also document the render prop in Headline's API Reference section.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add migration documentation for the breaking change where `as` prop is replaced by `render` on Text and Headline components. Includes before/after examples, TypeScript type change notes, and render function usage. Updates Table of Contents, cross-cutting changes note, and Migration Checklist. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
f985e38 to
81f9d6f
Compare
| expect(heading.tagName).toBe('H2'); | ||
| }); | ||
|
|
||
| it('supports render function', () => { |
There was a problem hiding this comment.
This test is redundant as renders as h1 via render prop is exactly the same.
Summary
aspolymorphic prop with Base UI'srenderprop +useRenderhook in the Text and Headline components, matching the existing pattern used by theFlexcomponent.TextSpanProps,TextDivProps, etc.) and the@ts-expect-errorsuppression, usinguseRender.ComponentProps<'span'>/useRender.ComponentProps<'h2'>instead.as='a'on Text) to userender={<a />}.renderprop.Test plan
npx tsc --noEmit)<span>for Text,<h2>for Headline)<Text render={<h1 />}>)<Text render={(props) => <section {...props} />}>)🤖 Generated with Claude Code