Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
104 commits
Select commit Hold shift + click to select a range
cb25b8b
Early prototype of TabPanels
owenniblock Feb 9, 2024
3b2c84d
Linting
owenniblock Feb 9, 2024
c1f13d8
selected property is optional
owenniblock Feb 9, 2024
da58554
Stop if complaining about types for aria-selected
owenniblock Feb 9, 2024
f768e67
Fix initial select
owenniblock Feb 9, 2024
7ac6b97
Adds tests for TabPanels
owenniblock Feb 9, 2024
cc88b59
Move npm dep to packages/react
owenniblock Feb 9, 2024
5a87c32
version semver format change
owenniblock Feb 9, 2024
46e6e4f
Add styling to match as close as I can to PVC version
owenniblock Feb 13, 2024
ab82ac1
Fix Playground
owenniblock Feb 13, 2024
c7f308a
Linting
owenniblock Feb 13, 2024
6c9d3e2
Delete TabWrapper and move styling to tablist
owenniblock Feb 13, 2024
7d4c43c
Add more docs
owenniblock Feb 13, 2024
ff9ff72
Format
owenniblock Feb 13, 2024
2a91ed1
Changeset
owenniblock Feb 13, 2024
c949c97
Add to the docs nav
owenniblock Feb 13, 2024
841b7de
Adds e2e tests
owenniblock Feb 13, 2024
6b76821
More scaffolding stuff
owenniblock Feb 13, 2024
ce21468
Fix error with docs reference
owenniblock Feb 15, 2024
f3efcb7
Update @github/tab-container-element so we can use it with SSR
owenniblock Feb 15, 2024
c11dcea
Use type imports for type imports
owenniblock Feb 15, 2024
5d5d21b
More type imports
owenniblock Feb 15, 2024
999a815
Fix TabPanels tests
owenniblock Feb 15, 2024
6f6e081
test(vrt): update snapshots
owenniblock Feb 15, 2024
44900a9
Update test snapshot
owenniblock Feb 15, 2024
0a164f9
Use the new shadowdom version of tab-container-element
owenniblock Feb 19, 2024
e539add
Adds styles to tab-container
owenniblock Feb 19, 2024
573530c
Remove test which is no longer required
owenniblock Feb 19, 2024
640cf13
Add margin to panels to match react
owenniblock Feb 20, 2024
10a250d
Upgrade tab-container-element to v4.1.0
owenniblock Feb 20, 2024
3fae1c9
Update TabPanels to use better styling
owenniblock Feb 20, 2024
28a3ef5
Update docs to include events
owenniblock Feb 20, 2024
affc374
Merge main
owenniblock Feb 20, 2024
16fcbcd
Linting
owenniblock Feb 20, 2024
502d868
Fix type error
owenniblock Feb 20, 2024
027c71a
Fix tests
owenniblock Feb 21, 2024
a9c2753
test(vrt): update snapshots
owenniblock Feb 21, 2024
c3226b1
Ignore axe test that fails because of shadow dom
owenniblock Feb 21, 2024
fe0dd75
Fix roll-up error
owenniblock Feb 21, 2024
8537093
Move to drafts (and consequently experimental)
owenniblock Feb 21, 2024
0bcee4c
aria-labelledby option (required) on tab panels and id on tabs
owenniblock Feb 22, 2024
905f730
Linting
owenniblock Feb 22, 2024
3629095
Hide panels before JS kicks in
owenniblock Feb 22, 2024
ed4c521
Minimise content flash when JS is slow
owenniblock Feb 22, 2024
d6d516f
Demonstrate limitation with 11+ tabs
owenniblock Feb 22, 2024
626f7b8
Linting again
owenniblock Feb 22, 2024
1a51f28
Add required props to tests etc
owenniblock Feb 22, 2024
d73de0d
npm run format
owenniblock Feb 22, 2024
fb7a2eb
test(vrt): update snapshots
owenniblock Feb 22, 2024
4e12a0f
Merge with main
owenniblock Feb 22, 2024
253ef30
test(vrt): update snapshots
owenniblock Feb 23, 2024
282aef5
Merge branch 'main' into add-tab-panel
owenniblock Feb 23, 2024
d7dba1c
Add suppressHydrationWarning to elements on TabPanels
owenniblock Feb 23, 2024
b9fb547
Update snapshot for update semver test
owenniblock Feb 26, 2024
ed158dc
Add required props to docs example
owenniblock Feb 26, 2024
931d0b4
Cherry-pick the change from my other PR
owenniblock Feb 28, 2024
93e7263
Delete dialog snapshots
owenniblock Feb 28, 2024
0176e9f
Fix format
owenniblock Feb 28, 2024
74325c2
Merge branch 'main' into add-tab-panel
owenniblock Feb 28, 2024
d415340
Upgrade tab-container-element to 4.1.2
owenniblock Feb 29, 2024
e54df88
Update tab-container-element to v4.1.3
owenniblock Feb 29, 2024
8d557e4
Removes the need for specifying ids on children and makes them autoge…
owenniblock Mar 1, 2024
cefd7e1
Merge branch 'main' into add-tab-panel
owenniblock Mar 1, 2024
615a29c
Linting
owenniblock Mar 1, 2024
91ab438
Move to draft directory
owenniblock Mar 1, 2024
aa2e96a
Fix docs build
owenniblock Mar 1, 2024
a23e54c
Fix TabPanels in docs page
owenniblock Mar 1, 2024
3788a72
Coplete move to drafts area
owenniblock Mar 1, 2024
8182897
Change API to use selectedTab on the parent and store it in state
owenniblock Mar 6, 2024
da6fb49
Merge with main
owenniblock Mar 6, 2024
3a2a3ae
Use new createComponent function
owenniblock Mar 6, 2024
ba96ce6
Add new selectedTabIndex prop support
owenniblock Mar 7, 2024
2257cac
Add selectedTabIndex prop to docs
owenniblock Mar 7, 2024
2401baf
Linting
owenniblock Mar 7, 2024
9f303f6
Update docs
owenniblock Mar 7, 2024
3ef8b46
Fix formatting
owenniblock Mar 7, 2024
7a6027c
Merge branch 'main' into add-tab-panel
owenniblock Mar 7, 2024
8d023e3
Fix e2e test after move to draft
owenniblock Mar 7, 2024
fda77c8
Simplify styled call on TabContainerElement
owenniblock Mar 7, 2024
530da85
Fix types for linting
owenniblock Mar 7, 2024
e0eeaf5
test(vrt): update snapshots
owenniblock Mar 7, 2024
d331327
Shouldn't need to skip aria test now
owenniblock Mar 7, 2024
3352993
Remove unused commented code
owenniblock Mar 7, 2024
dcbd208
Fix typing on custom-elements
owenniblock Mar 7, 2024
2a4efd5
Type change to fix linting
owenniblock Mar 7, 2024
8aa54a0
Change type to SxProp
owenniblock Mar 8, 2024
df2e416
Use latest tab-container-element
owenniblock Mar 8, 2024
06f93b0
Use onChange(d) aliases in docs
owenniblock Mar 8, 2024
3e920ee
Automatically generate the parent id if it's not defined
owenniblock Mar 8, 2024
5e4a763
Add aria requirements to TabPanels
owenniblock Mar 8, 2024
5880b06
Linting etc
owenniblock Mar 8, 2024
3c62443
Use defaultTabIndex which doesn't set the focus
owenniblock Mar 11, 2024
0ac40e9
Linting
owenniblock Mar 11, 2024
be744e3
Use the role instead of the type
owenniblock Mar 12, 2024
4965454
child.props.type didn't work
owenniblock Mar 13, 2024
8528c1c
We don't want the consumer to override the id or aria-labelledby
owenniblock Mar 13, 2024
419677d
Updgrade tab-container-element to v4.5.0
owenniblock Mar 13, 2024
53f83c7
Better types for label/labelledby
owenniblock Mar 13, 2024
cfd8b36
Merge with main
owenniblock Mar 13, 2024
a9bd1e7
Linting
owenniblock Mar 13, 2024
55e36c7
test(vrt): update snapshots
owenniblock Mar 13, 2024
cab2bbb
Workaround infinite type issue
owenniblock Mar 14, 2024
0700d7a
Merge branch 'main' into add-tab-panel
owenniblock Mar 14, 2024
a7376be
Merge branch 'main' into add-tab-panel
keithamus Mar 19, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/eight-olives-play.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
'@primer/react': minor
---

Adds new alpha component: TabPanels to match Primer View Components.

TabPanels should be used when semantic tabs are required and the tablist is not a navigation element.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
33 changes: 33 additions & 0 deletions docs/content/drafts/TabPanels.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
---
componentId: tab_panels
title: TabPanels
status: Draft
source: https://github.com/primer/react/blob/main/src/TabPanels
---

import data from '../../../packages/react/src/drafts/TabPanels/TabPanels.docs.json'

```js
import {TabPanels} from '@primer/react/drafts'
```

**Attention:** Make sure to properly label your `TabPanels` with an `aria-label` to provide context about the subject of your `TabPanels`.

`TabPanels.Tab` elements are wired up to their `TabPanels.Panel` elements based on the index order that they exist in the document.

## Examples

```jsx live drafts
<TabPanels aria-label="Select a tab" id="tab-panels" selectedTabIndex={0}>
<TabPanels.Tab>Tab 1</TabPanels.Tab>
<TabPanels.Tab>Tab 2</TabPanels.Tab>
<TabPanels.Tab>Tab 3</TabPanels.Tab>
<TabPanels.Panel>Panel 1</TabPanels.Panel>
<TabPanels.Panel>Panel 2</TabPanels.Panel>
<TabPanels.Panel>Panel 3</TabPanels.Panel>
</TabPanels>
```

## Props

<ComponentProps data={data} />
2 changes: 2 additions & 0 deletions docs/src/@primer/gatsby-theme-doctocat/nav.yml
Original file line number Diff line number Diff line change
Expand Up @@ -172,6 +172,8 @@
url: /drafts/PageHeader
- title: SelectPanel v2
url: /drafts/SelectPanel
- title: TabPanels
url: /drafts/TabPanels
- title: Deprecated
children:
- title: ActionList (legacy)
Expand Down
33 changes: 33 additions & 0 deletions e2e/components/TabPanels.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import {test, expect} from '@playwright/test'
import {visit} from '../test-helpers/storybook'
import {themes} from '../test-helpers/themes'

test.describe('TabPanels', () => {
test.describe('Default', () => {
for (const theme of themes) {
test.describe(theme, () => {
test('default @vrt', async ({page}) => {
await visit(page, {
id: 'drafts-components-tabpanels--default',
globals: {
colorScheme: theme,
},
})

// Default state
expect(await page.screenshot()).toMatchSnapshot(`TabPanels.Default.${theme}.png`)
})

test('axe @aat', async ({page}) => {
await visit(page, {
id: 'drafts-components-tabpanels--default',
globals: {
colorScheme: theme,
},
})
await expect(page).toHaveNoViolations()
})
})
}
})
})
Loading