Adds new component TabPanels #4241
Merged
Conversation
This file contains 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
🦋 Changeset detectedLatest commit: a7376be The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
keithamus
reviewed
Feb 9, 2024
size-limit report 📦
|
|
Not sure why design reviewers is on this PR, I've added engineer reviewers 🤷 |
joshblack
approved these changes
Mar 15, 2024
github-merge-queue
bot
removed this pull request from the merge queue due to failed status checks
github-merge-queue
bot
removed this pull request from the merge queue due to failed status checks
|
CI was green when I reran the failing stuff so going to try one last time to merge... |
Merged
lukasoppermann
pushed a commit
that referenced
this pull request
Apr 16, 2024
* Early prototype of TabPanels * Linting * selected property is optional * Stop if complaining about types for aria-selected * Fix initial select * Adds tests for TabPanels * Move npm dep to packages/react * version semver format change * Add styling to match as close as I can to PVC version * Fix Playground * Linting * Delete TabWrapper and move styling to tablist * Add more docs * Format * Changeset * Add to the docs nav * Adds e2e tests * More scaffolding stuff * Fix error with docs reference * Update @github/tab-container-element so we can use it with SSR * Use type imports for type imports * More type imports * Fix TabPanels tests * test(vrt): update snapshots * Update test snapshot * Use the new shadowdom version of tab-container-element * Adds styles to tab-container * Remove test which is no longer required * Add margin to panels to match react * Upgrade tab-container-element to v4.1.0 * Update TabPanels to use better styling * Update docs to include events * Linting * Fix type error * Fix tests * test(vrt): update snapshots * Ignore axe test that fails because of shadow dom * Fix roll-up error * Move to drafts (and consequently experimental) * aria-labelledby option (required) on tab panels and id on tabs * Linting * Hide panels before JS kicks in * Minimise content flash when JS is slow * Demonstrate limitation with 11+ tabs * Linting again * Add required props to tests etc * npm run format * test(vrt): update snapshots * test(vrt): update snapshots * Add suppressHydrationWarning to elements on TabPanels * Update snapshot for update semver test * Add required props to docs example * Cherry-pick the change from my other PR * Delete dialog snapshots * Fix format * Upgrade tab-container-element to 4.1.2 * Update tab-container-element to v4.1.3 * Removes the need for specifying ids on children and makes them autogenerate * Linting * Move to draft directory * Fix docs build * Fix TabPanels in docs page * Coplete move to drafts area * Change API to use selectedTab on the parent and store it in state * Use new createComponent function * Add new selectedTabIndex prop support * Add selectedTabIndex prop to docs * Linting * Update docs * Fix formatting * Fix e2e test after move to draft * Simplify styled call on TabContainerElement * Fix types for linting * test(vrt): update snapshots * Shouldn't need to skip aria test now * Remove unused commented code * Fix typing on custom-elements * Type change to fix linting * Change type to SxProp * Use latest tab-container-element * Use onChange(d) aliases in docs * Automatically generate the parent id if it's not defined * Add aria requirements to TabPanels * Linting etc * Use defaultTabIndex which doesn't set the focus * Linting * Use the role instead of the type * child.props.type didn't work * We don't want the consumer to override the id or aria-labelledby * Updgrade tab-container-element to v4.5.0 * Better types for label/labelledby * Linting * test(vrt): update snapshots * Workaround infinite type issue --------- Co-authored-by: owenniblock <owenniblock@users.noreply.github.com> Co-authored-by: Keith Cirkel <keithamus@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
This Work
Closes https://github.com/github/primer/issues/3043
Adds a new TabPanels component to mirror the Primer View Component TabPanels. We will need to retrospectively go back and update PVC to use the new
<tab-container>which supports shadow DOM.Screenshots
Changelog
New
Changed
Removed
Rollout strategy
Testing & Reviewing
I'd particularly like guidance on the following:
tab-container-elementwhich we should supportMerge checklist