Skip to content

Commit d5fdd78

Browse files
segunadebayosegunadebayo
committed
docs: update guides and showcase
1 parent e7905a9 commit d5fdd78

File tree

11 files changed

+143
-123
lines changed

11 files changed

+143
-123
lines changed

‎website/public/images/cerberus-design-system.png‎

515 KB
Loading

‎website/public/images/gumbo.png‎

266 KB
Loading

‎website/src/content/pages/components/accordion.mdx‎

Lines changed: 33 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,39 @@ By default, the Accordion is oriented vertically. Use the `orientation` prop to
4949

5050
<Example id="horizontal" />
5151

52+
### Using the Root Provider
53+
54+
The `RootProvider` component provides a context for the accordion. It accepts the value of the `useAccordion` hook. You
55+
can leverage it to access the component state and methods from outside the accordion.
56+
57+
<Example id="root-provider" />
58+
59+
> If you're using the `RootProvider` component, you don't need to use the `Root` component.
60+
61+
### Accessing context
62+
63+
Use the `Accordion.Context` component or `useAccordionContext` hook to access the state of an accordion. It exposes the
64+
following properties:
65+
66+
- `focusedValue`: The value of the focused accordion item.
67+
- `value`: The value of the selected accordion items.
68+
- `setValue`: A method to set the selected accordion items.
69+
70+
<Example id="context" />
71+
72+
### Accessing the item context
73+
74+
Use the `Accordion.ItemContext` component or `useAccordionItemContext` hook to access the state of an accordion item. It
75+
exposes the following properties:
76+
77+
- `expanded`: Whether the accordion item is expanded.
78+
- `focused`: Whether the accordion item is focused.
79+
- `disabled`: Whether the accordion item is disabled.
80+
81+
<Example id="item-context" />
82+
83+
## Guides
84+
5285
### Animate Content Size
5386

5487
Use the `--height` and/or `--width` CSS variables to animate the size of the content when it expands or closes:
@@ -85,37 +118,6 @@ Use the `--height` and/or `--width` CSS variables to animate the size of the con
85118
}
86119
```
87120

88-
### Using the Root Provider
89-
90-
The `RootProvider` component provides a context for the accordion. It accepts the value of the `useAccordion` hook. You
91-
can leverage it to access the component state and methods from outside the accordion.
92-
93-
<Example id="root-provider" />
94-
95-
> If you're using the `RootProvider` component, you don't need to use the `Root` component.
96-
97-
### Accessing context
98-
99-
Use the `Accordion.Context` component or `useAccordionContext` hook to access the state of an accordion. It exposes the
100-
following properties:
101-
102-
- `focusedValue`: The value of the focused accordion item.
103-
- `value`: The value of the selected accordion items.
104-
- `setValue`: A method to set the selected accordion items.
105-
106-
<Example id="context" />
107-
108-
### Accessing the item context
109-
110-
Use the `Accordion.ItemContext` component or `useAccordionItemContext` hook to access the state of an accordion item. It
111-
exposes the following properties:
112-
113-
- `expanded`: Whether the accordion item is expanded.
114-
- `focused`: Whether the accordion item is focused.
115-
- `disabled`: Whether the accordion item is disabled.
116-
117-
<Example id="item-context" />
118-
119121
## API Reference
120122

121123
### Props

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@ to have maximum control over the avatar programmatically.
3535

3636
> If you're using the `Avatar.RootProvider` component, you don't need to use the `Avatar.Root` component.
3737
38+
## Guides
39+
3840
### Next.js Image
3941

4042
Here's an example of how to use the `Image` component from `next/image`.

‎website/src/content/pages/components/combobox.mdx‎

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -49,28 +49,6 @@ Use the `asChild` prop to render the combobox items as links.
4949

5050
<Example id="links" />
5151

52-
For custom router links, you can customize the `navigate` prop on the `Combobox.Root` component.
53-
54-
Here's an example of using the Tanstack Router.
55-
56-
```tsx
57-
import { Combobox } from '@ark-ui/react/combobox'
58-
import { useNavigate } from '@tanstack/react-router'
59-
60-
function Demo() {
61-
const navigate = useNavigate()
62-
return (
63-
<Combobox.Root
64-
navigate={(e) => {
65-
navigate({ to: e.node.href })
66-
}}
67-
>
68-
{/* ... */}
69-
</Combobox.Root>
70-
)
71-
}
72-
```
73-
7452
### Rehydrate Value
7553

7654
In some cases, where a combobox has a `defaultValue` or `value` but the `collection` is not loaded yet, here's how to
@@ -98,6 +76,34 @@ categories, or other custom values.
9876

9977
<Example id="creatable" />
10078

79+
<Example id="custom-object" />
80+
81+
## Guides
82+
83+
### Custom Router Links
84+
85+
For custom router links, you can customize the `navigate` prop on the `Combobox.Root` component.
86+
87+
Here's an example of using the Tanstack Router.
88+
89+
```tsx
90+
import { Combobox } from '@ark-ui/react/combobox'
91+
import { useNavigate } from '@tanstack/react-router'
92+
93+
function Demo() {
94+
const navigate = useNavigate()
95+
return (
96+
<Combobox.Root
97+
navigate={(e) => {
98+
navigate({ to: e.node.href })
99+
}}
100+
>
101+
{/* ... */}
102+
</Combobox.Root>
103+
)
104+
}
105+
```
106+
101107
### Custom Objects
102108

103109
By default, the combobox collection expects an array of objects with `label` and `value` properties. In some cases, you
@@ -120,10 +126,6 @@ const { collection } = useListCollection({
120126
})
121127
```
122128

123-
<Example id="custom-object" />
124-
125-
## Guides
126-
127129
### Type-Safety
128130

129131
The `Combobox.RootComponent` type enables you to create closed, strongly typed wrapper components that maintain full

‎website/src/content/pages/components/dialog.mdx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -106,15 +106,6 @@ Multiple dialogs can be stacked with automatic z-index management. Zag.js manage
106106

107107
<Example id="nested" />
108108

109-
You can create a zoom-out effect for parent dialogs using the `data-has-nested` attribute and `--nested-layer-count`
110-
variable:
111-
112-
```css
113-
[data-scope='dialog'][data-part='backdrop'][data-has-nested] {
114-
transform: scale(calc(1 - var(--nested-layer-count) * 0.05));
115-
}
116-
```
117-
118109
### Confirmation Dialog
119110

120111
Dialogs can intercept close attempts to show confirmation prompts. This pattern is useful for preventing data loss from
@@ -124,6 +115,17 @@ unsaved changes:
124115

125116
## Guides
126117

118+
### Nested Dialog Styling
119+
120+
You can create a zoom-out effect for parent dialogs using the `data-has-nested` attribute and `--nested-layer-count`
121+
variable:
122+
123+
```css
124+
[data-scope='dialog'][data-part='backdrop'][data-has-nested] {
125+
transform: scale(calc(1 - var(--nested-layer-count) * 0.05));
126+
}
127+
```
128+
127129
### Lazy Mount and Dynamic Imports
128130

129131
When using `lazyMount` and dynamically rendering components in the dialog (via `React.lazy`, Next.js `dynamic`), wrap

‎website/src/content/pages/components/editable.mdx‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,24 @@ provide access to the internal state of the component.
2727

2828
<Example id="custom-controls" />
2929

30+
### Field
31+
32+
The `Field` component helps manage form-related state and accessibility attributes of an editable. It includes handling
33+
ARIA labels, helper text, and error text to ensure proper accessibility.
34+
35+
<Example id="with-field" />
36+
37+
### Root Provider
38+
39+
Use the `useEditable` hook to create the editable store and pass it to the `Editable.RootProvider` component. This
40+
allows you to have maximum control over the editable programmatically.
41+
42+
<Example id="root-provider" />
43+
44+
> If you're using the `Editable.RootProvider` component, you don't need to use the `Editable.Root` component.
45+
46+
## Guides
47+
3048
### Auto-resizing
3149

3250
To auto-grow the editable as the content changes, set the `autoResize` prop to `true`.
@@ -62,22 +80,6 @@ To change the mode to double-click, pass the prop `activationMode="dblclick"`.
6280
</Editable.Root>
6381
```
6482

65-
### Field
66-
67-
The `Field` component helps manage form-related state and accessibility attributes of an editable. It includes handling
68-
ARIA labels, helper text, and error text to ensure proper accessibility.
69-
70-
<Example id="with-field" />
71-
72-
### Root Provider
73-
74-
Use the `useEditable` hook to create the editable store and pass it to the `Editable.RootProvider` component. This
75-
allows you to have maximum control over the editable programmatically.
76-
77-
<Example id="root-provider" />
78-
79-
> If you're using the `Editable.RootProvider` component, you don't need to use the `Editable.Root` component.
80-
8183
## API Reference
8284

8385
### Props

‎website/src/content/pages/components/qr-code.mdx‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,6 @@ Learn how to use the `QR Code` component in your project. Let's take a look at t
2020

2121
<Example id="basic" />
2222

23-
### Download a QR Code
24-
25-
You can download the QR code by using the `QrCode.DownloadTrigger`. You will have to provide the `fileName` and the
26-
`mimeType` of the image.
27-
28-
```tsx
29-
<QrCode.DownloadTrigger fileName="qr-code.png" mimeType="image/png">
30-
Download
31-
</QrCode.DownloadTrigger>
32-
```
33-
3423
### With Overlay
3524

3625
You can also add a logo or overlay to the QR code. This is useful when you want to brand the QR code.
@@ -60,6 +49,19 @@ leverage it to access the component state and methods from outside the QR code.
6049

6150
> If you're using the `RootProvider` component, you don't need to use the `Root` component.
6251
52+
## Guides
53+
54+
### Download a QR Code
55+
56+
You can download the QR code by using the `QrCode.DownloadTrigger`. You will have to provide the `fileName` and the
57+
`mimeType` of the image.
58+
59+
```tsx
60+
<QrCode.DownloadTrigger fileName="qr-code.png" mimeType="image/png">
61+
Download
62+
</QrCode.DownloadTrigger>
63+
```
64+
6365
## API Reference
6466

6567
### Props

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

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,35 @@ To create a controlled Tabs component, manage the current selected tab using the
5656

5757
<Example id="controlled" />
5858

59+
### Vertical Tabs
60+
61+
The default orientation of the tabs is `horizontal`. To change the orientation, set the `orientation` prop to
62+
`vertical`.
63+
64+
<Example id="vertical" />
65+
66+
### Manual Activation
67+
68+
By default, the tab can be selected when it receives focus from either the keyboard or pointer interaction. This is
69+
called automatic tab activation.
70+
71+
In contrast, manual tab activation means the tab is selected with the
72+
73+
<kbd>Enter</kbd> key or by clicking on the tab.
74+
75+
<Example id="manual" />
76+
77+
### Using the Root Provider
78+
79+
The `RootProvider` component provides a context for the tabs. It accepts the value of the `useTabs` hook. You can
80+
leverage it to access the component state and methods from outside the tabs.
81+
82+
<Example id="root-provider" />
83+
84+
> If you're using the `RootProvider` component, you don't need to use the `Root` component.
85+
86+
## Guides
87+
5988
### Router Controlled Tabs
6089

6190
When using frameworks like Next.js, Remix, or React Router, controlling the active tabs based on the URL can be useful.
@@ -100,33 +129,6 @@ export default function App() {
100129
}
101130
```
102131

103-
### Vertical Tabs
104-
105-
The default orientation of the tabs is `horizontal`. To change the orientation, set the `orientation` prop to
106-
`vertical`.
107-
108-
<Example id="vertical" />
109-
110-
### Manual Activation
111-
112-
By default, the tab can be selected when it receives focus from either the keyboard or pointer interaction. This is
113-
called automatic tab activation.
114-
115-
In contrast, manual tab activation means the tab is selected with the
116-
117-
<kbd>Enter</kbd> key or by clicking on the tab.
118-
119-
<Example id="manual" />
120-
121-
### Using the Root Provider
122-
123-
The `RootProvider` component provides a context for the tabs. It accepts the value of the `useTabs` hook. You can
124-
leverage it to access the component state and methods from outside the tabs.
125-
126-
<Example id="root-provider" />
127-
128-
> If you're using the `RootProvider` component, you don't need to use the `Root` component.
129-
130132
## API Reference
131133

132134
### Props

‎website/src/content/pages/components/tour.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ To set up the tour correctly, it's essential to understand its anatomy and the n
2222
2323
<Anatomy id="tour" />
2424

25-
## Steps
25+
## Guides
2626

2727
### Using step types
2828

@@ -190,7 +190,7 @@ const steps: TourStepDetails[] = [
190190
]
191191
```
192192

193-
## Styling guide
193+
### Styling Requirements
194194

195195
Ensure the `box-sizing` is set to `border-box` for the means of measuring the tour target.
196196

0 commit comments

Comments
 (0)