Skip to content

Commit 43e8686

Browse files
cschroetercschroeter
committedJan 22, 2024
feat(tabs): add new enclosed variant
1 parent a7ca377 commit 43e8686

23 files changed

+142
-35
lines changed
 

‎components/panda/react/src/stories/tabs.stories.tsx

+45-6
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import type { Meta } from '@storybook/react'
2+
import { Stack } from 'styled-system/jsx'
23
import * as Tabs from '~/components/ui/tabs'
34

45
const meta: Meta = {
@@ -8,12 +9,6 @@ const meta: Meta = {
89
export default meta
910

1011
export const Base = () => {
11-
const options = [
12-
{ id: 'react', label: 'React' },
13-
{ id: 'solid', label: 'Solid' },
14-
{ id: 'svelte', label: 'Svelte', disabled: true },
15-
{ id: 'vue', label: 'Vue' },
16-
]
1712
return (
1813
<Tabs.Root defaultValue="react">
1914
<Tabs.List>
@@ -31,3 +26,47 @@ export const Base = () => {
3126
</Tabs.Root>
3227
)
3328
}
29+
30+
export const Sizes = () => {
31+
return (
32+
<Stack gap="3">
33+
<Tabs.Root defaultValue="react" variant="enclosed" size="sm">
34+
<Tabs.List>
35+
{options.map((option) => (
36+
<Tabs.Trigger key={option.id} value={option.id} disabled={option.disabled}>
37+
{option.label}
38+
</Tabs.Trigger>
39+
))}
40+
<Tabs.Indicator />
41+
</Tabs.List>
42+
</Tabs.Root>
43+
<Tabs.Root defaultValue="react" variant="enclosed" size="md">
44+
<Tabs.List>
45+
{options.map((option) => (
46+
<Tabs.Trigger key={option.id} value={option.id} disabled={option.disabled}>
47+
{option.label}
48+
</Tabs.Trigger>
49+
))}
50+
<Tabs.Indicator />
51+
</Tabs.List>
52+
</Tabs.Root>
53+
<Tabs.Root defaultValue="react" variant="enclosed" size="lg">
54+
<Tabs.List>
55+
{options.map((option) => (
56+
<Tabs.Trigger key={option.id} value={option.id} disabled={option.disabled}>
57+
{option.label}
58+
</Tabs.Trigger>
59+
))}
60+
<Tabs.Indicator />
61+
</Tabs.List>
62+
</Tabs.Root>
63+
</Stack>
64+
)
65+
}
66+
67+
const options = [
68+
{ id: 'react', label: 'React' },
69+
{ id: 'solid', label: 'Solid' },
70+
{ id: 'svelte', label: 'Svelte', disabled: true },
71+
{ id: 'vue', label: 'Vue' },
72+
]

‎plugins/panda/CHANGELOG.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
## [Unreleased]
22

3+
### Added
4+
5+
- Added new `enclosed` variant to the `Tabs` component.
6+
37
## [0.29.0] - 2024-01-19
48

59
We are excited to announce that in this release, we have revised several components to feature a closed Component API:

‎plugins/panda/src/theme/recipes/tabs.ts

+68
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ export const tabs = defineSlotRecipe({
4545
transitionProperty: 'color, background, border-color',
4646
transitionTimingFunction: 'default',
4747
whiteSpace: 'nowrap',
48+
zIndex: '1',
4849
_disabled: {
4950
color: 'fg.disabled',
5051
cursor: 'not-allowed',
@@ -72,6 +73,19 @@ export const tabs = defineSlotRecipe({
7273
},
7374
variants: {
7475
variant: {
76+
enclosed: {
77+
list: {
78+
backgroundColor: 'bg.muted',
79+
borderRadius: 'l3',
80+
},
81+
indicator: {
82+
background: 'bg.default',
83+
boxShadow: 'xs',
84+
borderRadius: 'l2',
85+
height: 'var(--height)',
86+
width: 'var(--width)',
87+
},
88+
},
7589
line: {
7690
list: {
7791
_horizontal: {
@@ -171,6 +185,60 @@ export const tabs = defineSlotRecipe({
171185
},
172186
},
173187
compoundVariants: [
188+
{
189+
size: 'sm',
190+
variant: 'enclosed',
191+
css: {
192+
list: {
193+
p: '1',
194+
},
195+
trigger: {
196+
h: '8',
197+
minW: '8',
198+
textStyle: 'xs',
199+
px: '3',
200+
},
201+
content: {
202+
p: '3.5',
203+
},
204+
},
205+
},
206+
{
207+
size: 'md',
208+
variant: 'enclosed',
209+
css: {
210+
list: {
211+
p: '1',
212+
},
213+
trigger: {
214+
h: '9',
215+
minW: '9',
216+
textStyle: 'sm',
217+
px: '3.5',
218+
},
219+
content: {
220+
p: '4',
221+
},
222+
},
223+
},
224+
{
225+
size: 'lg',
226+
variant: 'enclosed',
227+
css: {
228+
list: {
229+
p: '1',
230+
},
231+
trigger: {
232+
h: '10',
233+
minW: '10',
234+
textStyle: 'sm',
235+
px: '4',
236+
},
237+
content: {
238+
p: '4.5',
239+
},
240+
},
241+
},
174242
{
175243
size: 'sm',
176244
variant: 'outline',

‎website/src/content/components/panda/avatar.mdx

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ category: component
55
description: A graphical representation of the user, often used in profile sections.
66
ark:
77
link: https://ark-ui.com/docs/components/avatar
8-
label: Updated
98
---
109

1110
import ComponentPreview from '~/components/component-preview.astro'

‎website/src/content/components/panda/checkbox.mdx

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ category: component
55
description: A control element that allows for multiple selections within a set.
66
ark:
77
link: https://ark-ui.com/docs/components/checkbox
8-
label: Updated
98
---
109

1110
import ComponentPreview from '~/components/component-preview.astro'

‎website/src/content/components/panda/number-input.mdx

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ category: component
55
description: A field that allows user input of numeric values.
66
ark:
77
link: https://ark-ui.com/docs/components/number-input
8-
label: Updated
98
---
109

1110
import ComponentPreview from '~/components/component-preview.astro'

‎website/src/content/components/panda/pagination.mdx

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ category: component
55
description: A navigation component that allows users to browse through pages.
66
ark:
77
link: https://ark-ui.com/docs/components/pagination
8-
label: Updated
98
---
109

1110
import ComponentPreview from '~/components/component-preview.astro'

‎website/src/content/components/panda/pin-input.mdx

+1-3
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,9 @@
22
id: pin-input
33
title: Pin Input
44
category: component
5-
description:
6-
For pin or verification codes with auto-focus transfer and masking options.
5+
description: For pin or verification codes with auto-focus transfer and masking options.
76
ark:
87
link: https://ark-ui.com/docs/components/pin-input
9-
label: Updated
108
---
119

1210
import ComponentPreview from '~/components/component-preview.astro'

‎website/src/content/components/panda/rating-group.mdx

+6-3
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ category: component
55
description: Allows users to rate items using a set of icons.
66
ark:
77
link: https://ark-ui.com/docs/components/rating-group
8-
label: Updated
98
---
109

1110
import ComponentPreview from '~/components/component-preview.astro'
@@ -22,7 +21,9 @@ import InstallationGuide from '~/components/installation-guide.astro'
2221
Use the `colorPalette` prop to change the color of the rating group.
2322

2423
```tsx live
25-
<RatingGroup colorPalette="red" value={3}>Label</RatingGroup>
24+
<RatingGroup colorPalette="red" value={3}>
25+
Label
26+
</RatingGroup>
2627
```
2728

2829
### Rating count
@@ -38,7 +39,9 @@ Use the `count` prop to render a specific number of stars.
3839
Use the `allowHalf` prop to enable half star ratings.
3940

4041
```tsx live
41-
<RatingGroup value={3.5} allowHalf>Label</RatingGroup>
42+
<RatingGroup value={3.5} allowHalf>
43+
Label
44+
</RatingGroup>
4245
```
4346

4447
## Installation

‎website/src/content/components/panda/slider.mdx

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ category: component
55
description: A control element that allows for a range of selections.
66
ark:
77
link: https://ark-ui.com/docs/components/slider
8-
label: Updated
98
---
109

1110
import ComponentPreview from '~/components/component-preview.astro'

‎website/src/content/components/panda/switch.mdx

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ category: component
55
description: A control element that allows for a binary selection.
66
ark:
77
link: https://ark-ui.com/docs/components/switch
8-
label: Updated
98
---
109

1110
import ComponentPreview from '~/components/component-preview.astro'

‎website/src/content/components/panda/tabs.mdx

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ category: component
55
description: Flexible navigation tool with various modes and features.
66
ark:
77
link: https://ark-ui.com/docs/components/tabs
8+
label: New Variant
89
---
910

1011
import ComponentPreview from '~/components/component-preview.astro'

‎website/src/content/components/tailwind/avatar.mdx

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ category: component
55
description: A graphical representation of the user, often used in profile sections.
66
ark:
77
link: https://ark-ui.com/docs/components/avatar
8-
label: Updated
98
---
109

1110
import ComponentPreview from '~/components/component-preview.astro'

‎website/src/content/components/tailwind/checkbox.mdx

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ category: component
55
description: A control element that allows for multiple selections within a set.
66
ark:
77
link: https://ark-ui.com/docs/components/checkbox
8-
label: Updated
98
---
109

1110
import ComponentPreview from '~/components/component-preview.astro'

‎website/src/content/components/tailwind/number-input.mdx

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ category: component
55
description: A field that allows user input of numeric values.
66
ark:
77
link: https://ark-ui.com/docs/components/number-input
8-
label: Updated
98
---
109

1110
import ComponentPreview from '~/components/component-preview.astro'

‎website/src/content/components/tailwind/pagination.mdx

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ category: component
55
description: A navigation component that allows users to browse through pages.
66
ark:
77
link: https://ark-ui.com/docs/components/pagination
8-
label: Updated
98
---
109

1110
import ComponentPreview from '~/components/component-preview.astro'

‎website/src/content/components/tailwind/pin-input.mdx

+1-3
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,9 @@
22
id: pin-input
33
title: Pin Input
44
category: component
5-
description:
6-
For pin or verification codes with auto-focus transfer and masking options.
5+
description: For pin or verification codes with auto-focus transfer and masking options.
76
ark:
87
link: https://ark-ui.com/docs/components/pin-input
9-
label: Updated
108
---
119

1210
import ComponentPreview from '~/components/component-preview.astro'

‎website/src/content/components/tailwind/rating-group.mdx

+6-3
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ category: component
55
description: Allows users to rate items using a set of icons.
66
ark:
77
link: https://ark-ui.com/docs/components/rating-group
8-
label: Updated
98
---
109

1110
import ComponentPreview from '~/components/component-preview.astro'
@@ -22,7 +21,9 @@ import InstallationGuide from '~/components/installation-guide.astro'
2221
Use the `colorPalette` prop to change the color of the rating group.
2322

2423
```tsx live
25-
<RatingGroup colorPalette="red" value={3}>Label</RatingGroup>
24+
<RatingGroup colorPalette="red" value={3}>
25+
Label
26+
</RatingGroup>
2627
```
2728

2829
### Rating count
@@ -38,7 +39,9 @@ Use the `count` prop to render a specific number of stars.
3839
Use the `allowHalf` prop to enable half star ratings.
3940

4041
```tsx live
41-
<RatingGroup value={3.5} allowHalf>Label</RatingGroup>
42+
<RatingGroup value={3.5} allowHalf>
43+
Label
44+
</RatingGroup>
4245
```
4346

4447
## Installation

‎website/src/content/components/tailwind/slider.mdx

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ category: component
55
description: A control element that allows for a range of selections.
66
ark:
77
link: https://ark-ui.com/docs/components/slider
8-
label: Updated
98
---
109

1110
import ComponentPreview from '~/components/component-preview.astro'

‎website/src/content/components/tailwind/switch.mdx

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ category: component
55
description: A control element that allows for a binary selection.
66
ark:
77
link: https://ark-ui.com/docs/components/switch
8-
label: Updated
98
---
109

1110
import ComponentPreview from '~/components/component-preview.astro'

‎website/src/content/components/tailwind/tabs.mdx

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ category: component
55
description: Flexible navigation tool with various modes and features.
66
ark:
77
link: https://ark-ui.com/docs/components/tabs
8+
label: New Variant
89
---
910

1011
import ComponentPreview from '~/components/component-preview.astro'

‎website/src/content/overview/panda/changelog.mdx

+4
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ description: All notable changes to this project will be documented in this file
66

77
## [Unreleased]
88

9+
### Added
10+
11+
- Added new `enclosed` variant to the `Tabs` component.
12+
913
## [0.29.0] - 2024-01-19
1014

1115
We are excited to announce that in this release, we have revised several components to feature a closed Component API:

‎website/src/content/props/tabs.json

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
{
22
"variant": {
3-
"options": ["line", "outline"],
3+
"options": ["line", "outline", "enclosed"],
44
"defaultValue": "line"
55
},
6-
"size": {
7-
"options": ["sm", "md", "lg"],
8-
"defaultValue": "md"
9-
},
106
"orientation": {
117
"options": ["horizontal", "vertical"],
128
"defaultValue": "horizontal"
9+
},
10+
"size": {
11+
"options": ["sm", "md", "lg"],
12+
"defaultValue": "md"
1313
}
1414
}

0 commit comments

Comments
 (0)