-
Notifications
You must be signed in to change notification settings - Fork 4.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Tabs: Update subcomponents to accept full HTML element props #55860
Conversation
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.
This is testing well! ✅
Since props are being removed (className
and style
), I wonder if it would be beneficial to add any tests? But since this is utilizing WordPressComponentProps
, it may be unnecessary. I'll leave that up to your discretion! Otherwise, I believe this just needs a CHANGELOG, and then it'll be ready to go.
Thanks @brookewp! I think I'll hold off on tests now... I feel like I'd be writing tests for |
933de63
to
c1dcdf4
Compare
Flaky tests detected in 98094ee. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/6788313246
|
c7551a1
to
98094ee
Compare
Related comment.
What?
Updates the subcomponents (TabList, Tab, and TabPanel) to accept all of the HTML element props relevant to their underlying DOM elements.
This PR also removes some artifacts of an old
icon
prop that was removed earlier in the component's development. There were still some references in the types and tests files that needed to be removed.Why?
Previously the Tabs subcomponents explicitly accepted props like
className
andstyle
, but not the general props for their respective DOM elements. This made it hard to pass basic props, and made it necessary to overuse therender
prop to gain access to them (example)How?
Each of the subcomponents now leverages
WordPressComponentProps
to include all of the relevant HTML element props.Testing Instructions
Tabs
default story in Storybook.div
related HTML props to aTabList
andTabPanel
subcomponent (hidden
,style
,className
for example, but experiment with any prop that's valid on adiv
.)div
for the subcomponent you modified.button
related props to aTab
subcomponent. Specifically, test anonClick
to confirm that it's applied and functions correctly.