feat(ui): migrate Mosaic Heading and Text to StyleX #9244
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| --- | ||
| --- | ||
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
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
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
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
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
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
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
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import * as stylex from '@stylexjs/stylex'; | ||
|
|
||
| import { fontWeightVars } from '../../tokens.stylex'; | ||
|
|
||
| export const styles = stylex.create({ | ||
| base: { fontWeight: fontWeightVars['--cl-font-semibold'] }, | ||
| }); |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| import { render, screen } from '@testing-library/react'; | ||
| import React from 'react'; | ||
| import { describe, expect, it } from 'vitest'; | ||
|
|
||
| import { Heading, HeadingContext } from './heading'; | ||
|
|
||
| describe('Mosaic Heading', () => { | ||
| it('renders an h2 with its children', () => { | ||
| render(<Heading>Title</Heading>); | ||
| expect(screen.getByRole('heading', { level: 2, name: 'Title' })).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('applies default variants when none are passed', () => { | ||
| render(<Heading>Title</Heading>); | ||
| const heading = screen.getByRole('heading'); | ||
| expect(heading).toHaveClass('cl-heading'); | ||
| expect(heading).toHaveAttribute('data-size', 'base'); | ||
| expect(heading).toHaveAttribute('data-intent', 'primary'); | ||
| }); | ||
|
|
||
| it('wires variant props and consumer className/style through to the element', () => { | ||
| render( | ||
| <Heading | ||
| size='2xl' | ||
| intent='destructive' | ||
| className='my-heading' | ||
| style={{ marginTop: '8px' }} | ||
| > | ||
| Title | ||
| </Heading>, | ||
| ); | ||
| const heading = screen.getByRole('heading'); | ||
| expect(heading).toHaveAttribute('data-size', '2xl'); | ||
| expect(heading).toHaveAttribute('data-intent', 'destructive'); | ||
| expect(heading).toHaveClass('cl-heading', 'my-heading'); | ||
| expect(heading).toHaveStyle({ marginTop: '8px' }); | ||
| }); | ||
|
|
||
| it('renders a different element through the render prop, keeping the slot props', () => { | ||
| render(<Heading render={p => <h3 {...p} />}>Title</Heading>); | ||
| const heading = screen.getByRole('heading', { level: 3 }); | ||
| expect(heading).toHaveClass('cl-heading'); | ||
| expect(heading).toHaveAttribute('data-size', 'base'); | ||
| }); | ||
|
Comment on lines
+39
to
+44
Contributor
There was a problem hiding this comment. 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win Cover the React-element
🤖 Prompt for AI AgentsSource: Coding guidelines |
||
|
|
||
| it('reads defaults from HeadingContext, with own props winning', () => { | ||
| render( | ||
| <HeadingContext.Provider value={{ size: 'xl', intent: 'mutedForeground' }}> | ||
| <Heading intent='destructive'>Title</Heading> | ||
| </HeadingContext.Provider>, | ||
| ); | ||
| const heading = screen.getByRole('heading'); | ||
| expect(heading).toHaveAttribute('data-size', 'xl'); | ||
| expect(heading).toHaveAttribute('data-intent', 'destructive'); | ||
| }); | ||
|
|
||
| it('forwards arbitrary props and the ref', () => { | ||
| const ref = React.createRef<HTMLHeadingElement>(); | ||
| render( | ||
| <Heading | ||
| ref={ref} | ||
| id='section-title' | ||
| > | ||
| Title | ||
| </Heading>, | ||
| ); | ||
| const heading = screen.getByRole('heading'); | ||
| expect(ref.current).toBe(heading); | ||
| expect(heading).toHaveAttribute('id', 'section-title'); | ||
| }); | ||
| }); | ||
Oops, something went wrong.
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
Add a non-empty changeset for the Mosaic package change.
This suppresses release metadata despite changes to
@clerk/uicomponent behavior and customization. Add the appropriate package bump and a user-facing summary; reserve empty changesets for tooling-only work. As per coding guidelines, “usepnpm changesetfor package changes” and use an empty changeset only when there is no user-facing impact.🤖 Prompt for AI Agents
Source: Coding guidelines