Skip to content

Commit 03f3427

Browse files
mperrotticolebemis
mperrotti
and
colebemis
authored
Adds draft SegmentedControl docs (#2081)
* adds a draft for the SegmentedControl component docs * addresses first round of PR feedback * changes 'block' prop name to 'fullWidth * Update docs/content/SegmentedControl.mdx Co-authored-by: Cole Bemis <colebemis@github.com> * Update docs/content/SegmentedControl.mdx Co-authored-by: Cole Bemis <colebemis@github.com> * Update docs/content/SegmentedControl.mdx Co-authored-by: Cole Bemis <colebemis@github.com> * addresses remainder of PR feedback Co-authored-by: Cole Bemis <colebemis@github.com>
1 parent 2538089 commit 03f3427

File tree

1 file changed

+213
-0
lines changed

1 file changed

+213
-0
lines changed

‎docs/content/SegmentedControl.mdx

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
---
2+
title: SegmentedControl
3+
status: Draft
4+
description: Use a segmented control to let users select an option from a short list and immediately apply the selection
5+
---
6+
7+
<Note variant="warning">Not implemented yet</Note>
8+
9+
## Examples
10+
11+
### Simple
12+
13+
```jsx live drafts
14+
<SegmentedControl aria-label="File view">
15+
<SegmentedControl.Button selected>Preview</SegmentedControl.Button>
16+
<SegmentedControl.Button>Raw</SegmentedControl.Button>
17+
<SegmentedControl.Button>Blame</SegmentedControl.Button>
18+
</SegmentedControl>
19+
```
20+
21+
### With icons and labels
22+
23+
```jsx live drafts
24+
<SegmentedControl aria-label="File view">
25+
<SegmentedControl.Button selected leadingIcon={EyeIcon}>
26+
Preview
27+
</SegmentedControl.Button>
28+
<SegmentedControl.Button leadingIcon={FileCodeIcon}>Raw</SegmentedControl.Button>
29+
<SegmentedControl.Button leadingIcon={PeopleIcon}>Blame</SegmentedControl.Button>
30+
</SegmentedControl>
31+
```
32+
33+
### With icons only
34+
35+
```jsx live drafts
36+
<SegmentedControl aria-label="File view">
37+
<SegmentedControl.IconButton selected icon={EyeIcon} aria-label="Preview" />
38+
<SegmentedControl.IconButton icon={FileCodeIcon} aria-label="Raw" />
39+
<SegmentedControl.IconButton icon={PeopleIcon} aria-label="Blame" />
40+
</SegmentedControl>
41+
```
42+
43+
### With labels hidden on smaller viewports
44+
45+
```jsx live drafts
46+
<SegmentedControl aria-label="File view" variant={{narrow: 'hideLabels', regular: 'none'}}>
47+
<SegmentedControl.Button selected leadingIcon={EyeIcon}>
48+
Preview
49+
</SegmentedControl.Button>
50+
<SegmentedControl.Button leadingIcon={FileCodeIcon}>Raw</SegmentedControl.Button>
51+
<SegmentedControl.Button leadingIcon={PeopleIcon}>Blame</SegmentedControl.Button>
52+
</SegmentedControl>
53+
```
54+
55+
### Convert to a dropdown on smaller viewports
56+
57+
```jsx live drafts
58+
<SegmentedControl aria-label="File view" variant={{narrow: 'dropdown', regular: 'none'}}>
59+
<SegmentedControl.Button selected leadingIcon={EyeIcon}>
60+
Preview
61+
</SegmentedControl.Button>
62+
<SegmentedControl.Button leadingIcon={FileCodeIcon}>Raw</SegmentedControl.Button>
63+
<SegmentedControl.Button leadingIcon={PeopleIcon}>Blame</SegmentedControl.Button>
64+
</SegmentedControl>
65+
```
66+
67+
### Fill width of parent
68+
69+
```jsx live drafts
70+
<SegmentedControl fullWidth aria-label="File view">
71+
<SegmentedControl.Button selected>Preview</SegmentedControl.Button>
72+
<SegmentedControl.Button>Raw</SegmentedControl.Button>
73+
<SegmentedControl.Button>Blame</SegmentedControl.Button>
74+
</SegmentedControl>
75+
```
76+
77+
### In a loading state
78+
79+
```jsx live drafts
80+
<SegmentedControl loading aria-label="File view">
81+
<SegmentedControl.Button selected>Preview</SegmentedControl.Button>
82+
<SegmentedControl.Button>Raw</SegmentedControl.Button>
83+
<SegmentedControl.Button>Blame</SegmentedControl.Button>
84+
</SegmentedControl>
85+
```
86+
87+
### With a label and caption on the left
88+
89+
```jsx live drafts
90+
<Box display="flex">
91+
<Box flexGrow={1}>
92+
<Text fontSize={2} fontWeight="bold" id="scLabel-vert" display="block">
93+
File view
94+
</Text>
95+
<Text color="fg.subtle" fontSize={1} id="scCaption-vert" display="block">
96+
Change the way the file is viewed
97+
</Text>
98+
</Box>
99+
<SegmentedControl aria-labelledby="scLabel-vert" aria-describedby="scCaption-vert">
100+
<SegmentedControl.Button selected>Preview</SegmentedControl.Button>
101+
<SegmentedControl.Button>Raw</SegmentedControl.Button>
102+
<SegmentedControl.Button>Blame</SegmentedControl.Button>
103+
</SegmentedControl>
104+
</Box>
105+
```
106+
107+
### With a label above and caption below
108+
109+
```jsx live drafts
110+
<FormControl>
111+
<FormControl.Label id="scLabel-horiz">File view</FormControl.Label>
112+
<SegmentedControl aria-labelledby="scLabel-horiz" aria-describedby="scCaption-horiz">
113+
<SegmentedControl.Button selected>Preview</SegmentedControl.Button>
114+
<SegmentedControl.Button>Raw</SegmentedControl.Button>
115+
<SegmentedControl.Button>Blame</SegmentedControl.Button>
116+
</SegmentedControl>
117+
<FormControl.Caption id="scCaption-horiz">Change the way the file is viewed</FormControl.Caption>
118+
</FormControl>
119+
```
120+
121+
### With something besides the first option selected
122+
123+
```jsx live drafts
124+
<SegmentedControl aria-label="File view">
125+
<SegmentedControl.Button selected>Preview</SegmentedControl.Button>
126+
<SegmentedControl.Button selected>Raw</SegmentedControl.Button>
127+
<SegmentedControl.Button>Blame</SegmentedControl.Button>
128+
</SegmentedControl>
129+
```
130+
131+
### With a selection change handler
132+
133+
```jsx live drafts
134+
<SegmentedControl
135+
aria-label="File view"
136+
onChange={selectedIndex => {
137+
alert(`Segment ${selectedIndex}`)
138+
}}
139+
>
140+
<SegmentedControl.Button>Preview</SegmentedControl.Button>
141+
<SegmentedControl.Button>Raw</SegmentedControl.Button>
142+
<SegmentedControl.Button>Blame</SegmentedControl.Button>
143+
</SegmentedControl>
144+
```
145+
146+
## Props
147+
148+
### SegmentedControl
149+
150+
<PropsTable>
151+
<PropsTableRow name="aria-label" type="string" />
152+
<PropsTableRow name="aria-labelledby" type="string" />
153+
<PropsTableRow name="aria-describedby" type="string" />
154+
<PropsTableRow name="fullWidth" type="boolean" description="Whether the control fills the width of its parent" />
155+
<PropsTableRow name="loading" type="boolean" description="Whether the selected segment is being calculated" />
156+
<PropsTableRow
157+
name="onChange"
158+
type="(selectedIndex?: number) => void"
159+
description="The handler that gets called when a segment is selected"
160+
/>
161+
<PropsTableRow
162+
name="variant"
163+
type="{
164+
narrow?: 'hideLabels' | 'dropdown',
165+
regular?: 'hideLabels' | 'dropdown',
166+
wide?: 'hideLabels' | 'dropdown'
167+
}"
168+
description="Configure alternative ways to render the control when it gets rendered in tight spaces"
169+
/>
170+
<PropsTableSxRow />
171+
<PropsTableRefRow refType="HTMLDivElement" />
172+
</PropsTable>
173+
174+
### SegmentedControl.Button
175+
176+
<PropsTable>
177+
<PropsTableRow name="aria-label" type="string" />
178+
<PropsTableRow name="leadingIcon" type="Component" description="The leading icon comes before item label" />
179+
<PropsTableRow name="selected" type="boolean" description="Whether the segment is selected" />
180+
<PropsTableSxRow />
181+
<PropsTableRefRow refType="HTMLButtonElement" />
182+
</PropsTable>
183+
184+
### SegmentedControl.IconButton
185+
186+
<PropsTable>
187+
<PropsTableRow name="aria-label" type="string" />
188+
<PropsTableRow name="icon" type="Component" description="The icon that represents the segmented control item" />
189+
<PropsTableRow name="selected" type="boolean" description="Whether the segment is selected" />
190+
<PropsTableSxRow />
191+
<PropsTableRefRow refType="HTMLButtonElement" />
192+
</PropsTable>
193+
194+
## Status
195+
196+
<ComponentChecklist
197+
items={{
198+
propsDocumented: true,
199+
noUnnecessaryDeps: false,
200+
adaptsToThemes: false,
201+
adaptsToScreenSizes: false,
202+
fullTestCoverage: false,
203+
usedInProduction: false,
204+
usageExamplesDocumented: false,
205+
hasStorybookStories: false,
206+
designReviewed: false,
207+
a11yReviewed: false,
208+
stableApi: false,
209+
addressedApiFeedback: false,
210+
hasDesignGuidelines: false,
211+
hasFigmaComponent: false
212+
}}
213+
/>

0 commit comments

Comments
 (0)