Skip to content
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

feat(tabs): L3-2396 tabs add controlled state #412

Merged
merged 2 commits into from
Oct 31, 2024

Conversation

scottdickerson
Copy link
Contributor

@scottdickerson scottdickerson commented Oct 31, 2024

Jira ticket

L3-2395

Summary

While the Tabs component supported an defaultValue prop (for uncontrolled tabs with internal state), it didn't support the value prop for fully controlled tabs where the parent component passes in the state externally. (This is useful for doing things like updating the URL when we switch tabs, which allows bookmarking of a page with a particular tab selected.)

Change List (describe the changes made to the files)

  • change(TabTrigger): rename onTabClick to onClick to be consistent with other buttons
  • change(TabsContainer): add value prop and pass through all the other props to TabsPrimitive.Root in case we want to support another capability of Radix

Acceptance Test (how to verify the PR)

  • View the Controlled Tabs story in Seldon and make sure the external buttons can control the Tabs

Regression Test

  • (Optional) Add verification steps to make sure this PR doesn't break old functionality

Evidence of testing

  • image

Things to look for during review

  • PR title should correctly describe the most significant type of commit. I.e. feat(scope): ... if a minor release should be triggered.
  • All commit messages follow convention and are appropriate for the changes
  • All references to phillips class prefix are using the prefix variable
  • All major areas have a data-testid attribute.
  • Document all props with jsdoc comments
  • All strings should be translatable.
  • Unit tests should be written and should have a coverage of 90% or higher in all areas.

New Components

  • Are there any accessibility considerations that need to be taken into account and tested?
  • Default story called "Playground" should be created for all new components
  • Create a jsdoc comment that has an Overview section and a link to the Figma design for the component
  • Export the component and its typescript type from the index.ts file
  • Import the component scss file into the componentStyles.scss file.

Copy link

netlify bot commented Oct 31, 2024

Deploy Preview for phillips-seldon ready!

Name Link
🔨 Latest commit 079285f
🔍 Latest deploy log https://app.netlify.com/sites/phillips-seldon/deploys/6723cf1e5fba6c0008475f50
😎 Deploy Preview https://deploy-preview-412--phillips-seldon.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@scottdickerson scottdickerson merged commit 6c9ad7f into main Oct 31, 2024
14 checks passed
@scottdickerson scottdickerson deleted the L3-2396-tabs-controlled-state branch October 31, 2024 20:20
davidicus pushed a commit that referenced this pull request Oct 31, 2024
# [1.87.0](v1.86.0...v1.87.0) (2024-10-31)

### Features

* **tabs:** L3-2396 tabs add controlled state ([#412](#412)) ([6c9ad7f](6c9ad7f))
@davidicus
Copy link
Collaborator

🎉 This issue has been resolved in version 1.87.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants