feat: implement getComponentSlotClassName utility for dynamic class name generation #35548
Conversation
📊 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}
dmytrokirpa
changed the title
packages/react-components/react-utilities/src/utils/getComponentSlotClassName.test.ts
Show resolved
Hide resolved
| expect(getComponentSlotClassName('fui-Button', state.root, state)).toContain('fui-Button--appearance-secondary'); | ||
| }); | ||
|
|
||
| it('generates modifier classes from state numeric properties', () => { |
There was a problem hiding this comment.
This is a string property and not a numeric one, right?
There was a problem hiding this comment.
Considering that the RFC (#35464) was not merged, please don't put any related utils into stable packages.
That's true, and the RFC hasn't been merged yet. However, since it isn't impacting anyone and there's no alternative way to validate the approach and gather real data from partner codebases, I believe we can proceed with checking this in. I can add a note indicating the utils is not meant for public use, or rename it to be |
microsoft-github-policy-service
bot
added
Needs: Attention
and removed
Needs: Author Feedback
labels
4 participants
Previous Behavior
Previously, we generated classes from the component state using the pattern
.fui${Component}--${stateValue}. For example,.fuiButton--primaryfor a button with the state{ appearance: "primary" }, or.fuiButton--smallfor{ size: 'small' }. These classes were mapped manually.New Behavior
This PR introduces the utility
getComponentSlotClassName, which maps component state to CSS classes using a new structure:.fui${Component}--${stateName}-${stateValue}or.fui${Component}--${stateName}if the value is a truthy boolean. For instance, a state of{ appearance: "primary", size: 'small' }will result in the class namesfuiButton--appearance-primary fuiButton--size-small.Related Issue(s)