feat(react-conformance-griffel): add custom-style-hook conformance tests and pilot opt ins#36392
Open
PaulGMardling wants to merge 8 commits into
Open
Conversation
PaulGMardling
changed the title
📊 Bundle size report✅ No changes found |
|
Pull request demo site: URL |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| yarn nx format:check --base origin/master | ||
|
|
||
| - name: build, test, lint, test-ssr (affected) | ||
| run: | |
There was a problem hiding this comment.
🕵🏾♀️ visual changes to review in the Visual Change Report
vr-tests-react-components/Menu Converged - submenuIndicator slotted content 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default - RTL.submenus open.chromium.png | 404 | Changed |
vr-tests-react-components/Positioning 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png | 729 | Changed |
| vr-tests-react-components/Positioning.Positioning end.chromium.png | 512 | Changed |
vr-tests-react-components/ProgressBar converged 3 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - Dark Mode.default.chromium.png | 31 | Changed |
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png | 67 | Changed |
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness.default.chromium.png | 132 | Changed |
vr-tests-react-components/TagPicker 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/TagPicker.disabled - Dark Mode.disabled input hover.chromium.png | 658 | Changed |
| vr-tests-react-components/TagPicker.disabled - RTL.disabled input hover.chromium.png | 635 | Changed |
vr-tests/react-charting-GaugeChart 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests/react-charting-GaugeChart.Basic.default.chromium.png | 2 | Changed |
vr-tests/react-charting-LineChart 4 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests/react-charting-LineChart.Multiple - RTL.default.chromium.png | 200 | Changed |
| vr-tests/react-charting-LineChart.Multiple.default.chromium.png | 192 | Changed |
| vr-tests/react-charting-LineChart.Multiple - Dark Mode.default.chromium.png | 181 | Changed |
| vr-tests/react-charting-LineChart.Events.default.chromium.png | 17 | Changed |
vr-tests/react-charting-MultiStackBarChart 4 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests/react-charting-MultiStackBarChart.Basic_Absolute - RTL.default.chromium.png | 343 | Changed |
| vr-tests/react-charting-MultiStackBarChart.Basic_PartToWhole - RTL.default.chromium.png | 343 | Changed |
| vr-tests/react-charting-MultiStackBarChart.Basic_Absolute - Dark Mode.default.chromium.png | 363 | Changed |
| vr-tests/react-charting-MultiStackBarChart.Basic_PartToWhole - Dark Mode.default.chromium.png | 363 | Changed |
There were 3 duplicate changes discarded. Check the build logs for more information.
PaulGMardling
force-pushed
the
feat/custom-style-hook-conformance
branch
3 times, most recently
from
July 15, 2026 12:20
54c9639 to
1f9fb85
Compare
…ance test for MenuItemLink
…om getReactComponent
PaulGMardling
marked this pull request as ready for review
July 15, 2026 14:16
PaulGMardling
requested review from
a team,
ValentinaKozlova and
mainframev
as code owners
July 15, 2026 14:16
PaulGMardling
force-pushed
the
feat/custom-style-hook-conformance
branch
from
July 15, 2026 14:16
f6240cd to
b3a31a4
Compare
Hotell
reviewed
Jul 17, 2026
Hotell
left a comment
Hotell
left a comment
Contributor
There was a problem hiding this comment.
IMO this should live in react-conformance it has nothing specific about griffel. the core is indeed confusing as it is used in both v8 and v9. in ideal world the architecture should be ( this is out of scope of this PR ofc )
core
/ \
v9 rules v8 rules
/
griffel rules
| /** Prefix for the classname, if not `fui-` */ | ||
| prefix?: string; | ||
| }; | ||
| 'component-calls-custom-style-hook'?: { |
Contributor
There was a problem hiding this comment.
this shouldn't exist , the rule you're implementing is part of griffel conformance where it's id definition lives.
| Component: MenuItemLink, | ||
| displayName: 'MenuItemLink', | ||
| testOptions: { | ||
| 'component-calls-custom-style-hook': {}, |
Contributor
There was a problem hiding this comment.
this is being enabled without providing the extra rules so its a noop
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| const element = React.createElement(Component, { ...testInfo.requiredProps } as any); | ||
| const expectedHookName = | ||
| testOptions?.[CUSTOM_STYLE_HOOK_CALLED_TEST_NAME]?.hookName ?? `use${testInfo.displayName}Styles_unstable`; |
Contributor
There was a problem hiding this comment.
what is the use case of providing the hook naming via isConformant configuration in user land ? can't we enforce/rely only on the computed hook name -> use${testInfo.displayName}Styles_unstable ?
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
2 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.
Previous Behavior
There was no reusable conformance assertion to verify that v9 components call
useCustomStyleHook_unstable(...)and invoke the returned hook with component state.As a result, custom style hook wiring regressions could slip through unless caught manually.
New Behavior
This PR adds a new reusable Griffel conformance test:
component-calls-custom-style-hook.The test validates that:
useCustomStyleHook_unstablewith the expected hook keyThis PR also enables pilot coverage for:
ButtonCardMenuItemLinkValidation run:
yarn nx run react-conformance-griffel:test --passWithNoTests=trueyarn nx run react-button:test --testPathPatterns=Button.test.tsxyarn nx run react-card:test --testPathPatterns=Card.test.tsxyarn nx run react-menu:test --testPathPatterns=MenuItemLink.test.tsxRelated Issue(s)