@instructure/ui-tabs 10.2.2-snapshot-7 → 10.2.2-snapshot-9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/package.json +20 -20
  3. package/src/Tabs/README.md +603 -167
package/CHANGELOG.md CHANGED
@@ -3,7 +3,7 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [10.2.2-snapshot-7](https://github.com/instructure/instructure-ui/compare/v10.2.1...v10.2.2-snapshot-7) (2024-09-10)
6
+ ## [10.2.2-snapshot-9](https://github.com/instructure/instructure-ui/compare/v10.2.1...v10.2.2-snapshot-9) (2024-09-12)
7
7
 
8
8
  **Note:** Version bump only for package @instructure/ui-tabs
9
9
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-tabs",
3
- "version": "10.2.2-snapshot-7",
3
+ "version": "10.2.2-snapshot-9",
4
4
  "description": "A UI component library made by Instructure Inc.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,31 +23,31 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-babel-preset": "10.2.2-snapshot-7",
27
- "@instructure/ui-color-utils": "10.2.2-snapshot-7",
28
- "@instructure/ui-test-locator": "10.2.2-snapshot-7",
29
- "@instructure/ui-test-utils": "10.2.2-snapshot-7",
30
- "@instructure/ui-themes": "10.2.2-snapshot-7",
26
+ "@instructure/ui-babel-preset": "10.2.2-snapshot-9",
27
+ "@instructure/ui-color-utils": "10.2.2-snapshot-9",
28
+ "@instructure/ui-test-locator": "10.2.2-snapshot-9",
29
+ "@instructure/ui-test-utils": "10.2.2-snapshot-9",
30
+ "@instructure/ui-themes": "10.2.2-snapshot-9",
31
31
  "@testing-library/jest-dom": "^6.4.6",
32
32
  "@testing-library/react": "^15.0.7",
33
33
  "vitest": "^2.0.2"
34
34
  },
35
35
  "dependencies": {
36
36
  "@babel/runtime": "^7.24.5",
37
- "@instructure/console": "10.2.2-snapshot-7",
38
- "@instructure/debounce": "10.2.2-snapshot-7",
39
- "@instructure/emotion": "10.2.2-snapshot-7",
40
- "@instructure/shared-types": "10.2.2-snapshot-7",
41
- "@instructure/ui-dom-utils": "10.2.2-snapshot-7",
42
- "@instructure/ui-focusable": "10.2.2-snapshot-7",
43
- "@instructure/ui-i18n": "10.2.2-snapshot-7",
44
- "@instructure/ui-motion": "10.2.2-snapshot-7",
45
- "@instructure/ui-prop-types": "10.2.2-snapshot-7",
46
- "@instructure/ui-react-utils": "10.2.2-snapshot-7",
47
- "@instructure/ui-testable": "10.2.2-snapshot-7",
48
- "@instructure/ui-utils": "10.2.2-snapshot-7",
49
- "@instructure/ui-view": "10.2.2-snapshot-7",
50
- "@instructure/uid": "10.2.2-snapshot-7",
37
+ "@instructure/console": "10.2.2-snapshot-9",
38
+ "@instructure/debounce": "10.2.2-snapshot-9",
39
+ "@instructure/emotion": "10.2.2-snapshot-9",
40
+ "@instructure/shared-types": "10.2.2-snapshot-9",
41
+ "@instructure/ui-dom-utils": "10.2.2-snapshot-9",
42
+ "@instructure/ui-focusable": "10.2.2-snapshot-9",
43
+ "@instructure/ui-i18n": "10.2.2-snapshot-9",
44
+ "@instructure/ui-motion": "10.2.2-snapshot-9",
45
+ "@instructure/ui-prop-types": "10.2.2-snapshot-9",
46
+ "@instructure/ui-react-utils": "10.2.2-snapshot-9",
47
+ "@instructure/ui-testable": "10.2.2-snapshot-9",
48
+ "@instructure/ui-utils": "10.2.2-snapshot-9",
49
+ "@instructure/ui-view": "10.2.2-snapshot-9",
50
+ "@instructure/uid": "10.2.2-snapshot-9",
51
51
  "keycode": "^2",
52
52
  "prop-types": "^15.8.1"
53
53
  },
package/src/Tabs/README.md CHANGED
@@ -4,26 +4,71 @@ describes: Tabs
4
4
 
5
5
  `<Tabs />` is an accessible tabbed navigation component. Use the TAB key to focus the component and arrow keys to navigate between panels of content. To set a default panel that should be selected on initial render, set the `selected` prop on that `<Tabs.Panel>`.
6
6
 
7
- ```js
8
- ---
9
- type: example
10
- ---
11
- class Example extends React.Component {
12
- state = {
13
- selectedIndex: 0
14
- }
15
- handleTabChange = (event, { index, id }) => {
16
- this.setState({
17
- selectedIndex: index
18
- })
7
+ - ```js
8
+ class Example extends React.Component {
9
+ state = {
10
+ selectedIndex: 0
11
+ }
12
+ handleTabChange = (event, { index }) => {
13
+ this.setState({
14
+ selectedIndex: index
15
+ })
16
+ }
17
+ render() {
18
+ const { selectedIndex } = this.state
19
+ return (
20
+ <Tabs
21
+ margin="large auto"
22
+ padding="medium"
23
+ onRequestTabChange={this.handleTabChange}
24
+ >
25
+ <Tabs.Panel
26
+ id="tabA"
27
+ renderTitle="Tab A"
28
+ textAlign="center"
29
+ padding="large"
30
+ isSelected={selectedIndex === 0}
31
+ >
32
+ <Button>Focus Me</Button>
33
+ </Tabs.Panel>
34
+ <Tabs.Panel id="tabB" renderTitle="Disabled Tab" isDisabled>
35
+ {lorem.paragraphs()}
36
+ </Tabs.Panel>
37
+ <Tabs.Panel
38
+ id="tabC"
39
+ renderTitle="Tab C"
40
+ isSelected={selectedIndex === 2}
41
+ >
42
+ {lorem.paragraphs()}
43
+ </Tabs.Panel>
44
+ <Tabs.Panel
45
+ id="tabD"
46
+ renderTitle="Tab D"
47
+ isSelected={selectedIndex === 3}
48
+ >
49
+ {lorem.paragraphs()}
50
+ </Tabs.Panel>
51
+ </Tabs>
52
+ )
53
+ }
19
54
  }
20
- render () {
21
- const { selectedIndex } = this.state
55
+
56
+ render(<Example />)
57
+ ```
58
+
59
+ - ```js
60
+ const Example = () => {
61
+ const [selectedIndex, setSelectedIndex] = useState(0)
62
+
63
+ const handleTabChange = (event, { index }) => {
64
+ setSelectedIndex(index)
65
+ }
66
+
22
67
  return (
23
68
  <Tabs
24
69
  margin="large auto"
25
70
  padding="medium"
26
- onRequestTabChange={this.handleTabChange}
71
+ onRequestTabChange={handleTabChange}
27
72
  >
28
73
  <Tabs.Panel
29
74
  id="tabA"
@@ -37,41 +82,80 @@ class Example extends React.Component {
37
82
  <Tabs.Panel id="tabB" renderTitle="Disabled Tab" isDisabled>
38
83
  {lorem.paragraphs()}
39
84
  </Tabs.Panel>
40
- <Tabs.Panel id="tabC" renderTitle="Tab C" isSelected={selectedIndex === 2}>
85
+ <Tabs.Panel
86
+ id="tabC"
87
+ renderTitle="Tab C"
88
+ isSelected={selectedIndex === 2}
89
+ >
41
90
  {lorem.paragraphs()}
42
91
  </Tabs.Panel>
43
- <Tabs.Panel id="tabD" renderTitle="Tab D" isSelected={selectedIndex === 3}>
92
+ <Tabs.Panel
93
+ id="tabD"
94
+ renderTitle="Tab D"
95
+ isSelected={selectedIndex === 3}
96
+ >
44
97
  {lorem.paragraphs()}
45
98
  </Tabs.Panel>
46
99
  </Tabs>
47
100
  )
48
101
  }
49
- }
50
102
 
51
- render(<Example />)
52
- ```
103
+ render(<Example />)
104
+ ```
53
105
 
54
106
  ### Secondary Tabs
55
107
 
56
- ```js
57
- ---
58
- type: example
59
- ---
60
- class Example extends React.Component {
61
- state = {
62
- selectedIndex: 2
63
- }
64
- handleTabChange = (event, { index }) => {
65
- this.setState({
66
- selectedIndex: index
67
- })
108
+ - ```js
109
+ class Example extends React.Component {
110
+ state = {
111
+ selectedIndex: 2
112
+ }
113
+ handleTabChange = (event, { index }) => {
114
+ this.setState({
115
+ selectedIndex: index
116
+ })
117
+ }
118
+ render() {
119
+ const { selectedIndex } = this.state
120
+ return (
121
+ <Tabs
122
+ variant="secondary"
123
+ onRequestTabChange={this.handleTabChange}
124
+ minHeight="10rem"
125
+ maxHeight="10rem"
126
+ >
127
+ <Tabs.Panel renderTitle="First Tab" isSelected={selectedIndex === 0}>
128
+ Hello World
129
+ </Tabs.Panel>
130
+ <Tabs.Panel renderTitle="Disabled Tab" isDisabled>
131
+ {lorem.paragraphs()}
132
+ </Tabs.Panel>
133
+ <Tabs.Panel renderTitle="Third Tab" isSelected={selectedIndex === 2}>
134
+ {lorem.paragraphs()}
135
+ </Tabs.Panel>
136
+ <Tabs.Panel renderTitle="Fourth Tab" isSelected={selectedIndex === 3}>
137
+ {lorem.paragraphs()}
138
+ </Tabs.Panel>
139
+ </Tabs>
140
+ )
141
+ }
68
142
  }
69
- render () {
70
- const { selectedIndex } = this.state
143
+
144
+ render(<Example />)
145
+ ```
146
+
147
+ - ```js
148
+ const Example = () => {
149
+ const [selectedIndex, setSelectedIndex] = useState(2)
150
+
151
+ const handleTabChange = (event, { index }) => {
152
+ setSelectedIndex(index)
153
+ }
154
+
71
155
  return (
72
156
  <Tabs
73
157
  variant="secondary"
74
- onRequestTabChange={this.handleTabChange}
158
+ onRequestTabChange={handleTabChange}
75
159
  minHeight="10rem"
76
160
  maxHeight="10rem"
77
161
  >
@@ -90,10 +174,9 @@ class Example extends React.Component {
90
174
  </Tabs>
91
175
  )
92
176
  }
93
- }
94
177
 
95
- render(<Example />)
96
- ```
178
+ render(<Example />)
179
+ ```
97
180
 
98
181
  ### Handling Tab overflow
99
182
 
@@ -101,57 +184,154 @@ By default, `<Tabs />` will stack each individual `<Tab />` if there isn't enoug
101
184
  space to display them all inline. For a more compact tab navigation, set `tabOverflow` to
102
185
  `scroll`, which allows the Tabs to scroll horizontally.
103
186
 
104
- ```js
105
- ---
106
- type: example
107
- ---
108
- class Example extends React.Component {
109
- state = {
110
- selectedIndex: 4
111
- }
112
- handleTabChange = (event, { index, id }) => {
113
- this.setState({
114
- selectedIndex: index
115
- })
187
+ - ```js
188
+ class Example extends React.Component {
189
+ state = {
190
+ selectedIndex: 4
191
+ }
192
+ handleTabChange = (event, { index }) => {
193
+ this.setState({
194
+ selectedIndex: index
195
+ })
196
+ }
197
+ render() {
198
+ const { selectedIndex } = this.state
199
+ return (
200
+ <Tabs
201
+ margin="large auto"
202
+ padding="medium"
203
+ onRequestTabChange={this.handleTabChange}
204
+ tabOverflow="scroll"
205
+ maxWidth="20rem"
206
+ >
207
+ <Tabs.Panel
208
+ id="tabA"
209
+ renderTitle="Tab A"
210
+ isSelected={selectedIndex === 0}
211
+ >
212
+ {lorem.sentence()}
213
+ </Tabs.Panel>
214
+ <Tabs.Panel
215
+ id="tabB"
216
+ renderTitle="Tab B"
217
+ isSelected={selectedIndex === 1}
218
+ >
219
+ {lorem.sentence()}
220
+ </Tabs.Panel>
221
+ <Tabs.Panel
222
+ id="tabC"
223
+ renderTitle="Tab C"
224
+ isSelected={selectedIndex === 2}
225
+ >
226
+ {lorem.sentence()}
227
+ </Tabs.Panel>
228
+ <Tabs.Panel
229
+ id="tabD"
230
+ renderTitle="Tab D"
231
+ isSelected={selectedIndex === 3}
232
+ >
233
+ {lorem.sentence()}
234
+ </Tabs.Panel>
235
+ <Tabs.Panel
236
+ id="tabE"
237
+ renderTitle="Tab E"
238
+ isSelected={selectedIndex === 4}
239
+ >
240
+ {lorem.sentence()}
241
+ </Tabs.Panel>
242
+ <Tabs.Panel
243
+ id="tabF"
244
+ renderTitle="Tab F"
245
+ isSelected={selectedIndex === 5}
246
+ >
247
+ {lorem.sentence()}
248
+ </Tabs.Panel>
249
+ <Tabs.Panel
250
+ id="tabG"
251
+ renderTitle="Tab G"
252
+ isSelected={selectedIndex === 6}
253
+ >
254
+ {lorem.sentence()}
255
+ </Tabs.Panel>
256
+ </Tabs>
257
+ )
258
+ }
116
259
  }
117
- render () {
118
- const { selectedIndex } = this.state
260
+
261
+ render(<Example />)
262
+ ```
263
+
264
+ - ```js
265
+ const Example = () => {
266
+ const [selectedIndex, setSelectedIndex] = useState(4)
267
+
268
+ const handleTabChange = (event, { index }) => {
269
+ setSelectedIndex(index)
270
+ }
271
+
119
272
  return (
120
273
  <Tabs
121
274
  margin="large auto"
122
275
  padding="medium"
123
- onRequestTabChange={this.handleTabChange}
276
+ onRequestTabChange={handleTabChange}
124
277
  tabOverflow="scroll"
125
278
  maxWidth="20rem"
126
279
  >
127
- <Tabs.Panel id="tabA" renderTitle="Tab A" isSelected={selectedIndex === 0}>
280
+ <Tabs.Panel
281
+ id="tabA"
282
+ renderTitle="Tab A"
283
+ isSelected={selectedIndex === 0}
284
+ >
128
285
  {lorem.sentence()}
129
286
  </Tabs.Panel>
130
- <Tabs.Panel id="tabB" renderTitle="Tab B" isSelected={selectedIndex === 1}>
287
+ <Tabs.Panel
288
+ id="tabB"
289
+ renderTitle="Tab B"
290
+ isSelected={selectedIndex === 1}
291
+ >
131
292
  {lorem.sentence()}
132
293
  </Tabs.Panel>
133
- <Tabs.Panel id="tabC" renderTitle="Tab C" isSelected={selectedIndex === 2}>
294
+ <Tabs.Panel
295
+ id="tabC"
296
+ renderTitle="Tab C"
297
+ isSelected={selectedIndex === 2}
298
+ >
134
299
  {lorem.sentence()}
135
300
  </Tabs.Panel>
136
- <Tabs.Panel id="tabD" renderTitle="Tab D" isSelected={selectedIndex === 3}>
301
+ <Tabs.Panel
302
+ id="tabD"
303
+ renderTitle="Tab D"
304
+ isSelected={selectedIndex === 3}
305
+ >
137
306
  {lorem.sentence()}
138
307
  </Tabs.Panel>
139
- <Tabs.Panel id="tabE" renderTitle="Tab E" isSelected={selectedIndex === 4}>
308
+ <Tabs.Panel
309
+ id="tabE"
310
+ renderTitle="Tab E"
311
+ isSelected={selectedIndex === 4}
312
+ >
140
313
  {lorem.sentence()}
141
314
  </Tabs.Panel>
142
- <Tabs.Panel id="tabF" renderTitle="Tab F" isSelected={selectedIndex === 5}>
315
+ <Tabs.Panel
316
+ id="tabF"
317
+ renderTitle="Tab F"
318
+ isSelected={selectedIndex === 5}
319
+ >
143
320
  {lorem.sentence()}
144
321
  </Tabs.Panel>
145
- <Tabs.Panel id="tabG" renderTitle="Tab G" isSelected={selectedIndex === 6}>
322
+ <Tabs.Panel
323
+ id="tabG"
324
+ renderTitle="Tab G"
325
+ isSelected={selectedIndex === 6}
326
+ >
146
327
  {lorem.sentence()}
147
328
  </Tabs.Panel>
148
329
  </Tabs>
149
330
  )
150
331
  }
151
- }
152
332
 
153
- render(<Example />)
154
- ```
333
+ render(<Example />)
334
+ ```
155
335
 
156
336
  ### Controlling the size and the spacing
157
337
 
@@ -161,44 +341,134 @@ Set the height of the Tabs component with the `fixHeight` property (set to '100%
161
341
 
162
342
  Finally, switch the text alignment of the panel content with `textAlign`.
163
343
 
164
- ```js
165
- ---
166
- type: example
167
- ---
168
- class Example extends React.Component {
169
- constructor (props) {
170
- super(props)
171
- this.state = {
172
- selectedIndex: 0,
173
- heightOption: 'fixHeight: 100%'
344
+ - ```js
345
+ class Example extends React.Component {
346
+ constructor(props) {
347
+ super(props)
348
+ this.state = {
349
+ selectedIndex: 0,
350
+ heightOption: 'fixHeight: 100%'
351
+ }
352
+
353
+ this.heightOptions = {
354
+ ['fixHeight: 100%']: { fixHeight: '100%' },
355
+ ['fixHeight: 15rem']: { fixHeight: '15rem' },
356
+ ['minHeight: 17rem']: { minHeight: '17rem' },
357
+ ['maxHeight: 10rem']: { maxHeight: '10rem' }
358
+ }
359
+ }
360
+
361
+ handleTabChange = (event, { index }) => {
362
+ this.setState({
363
+ selectedIndex: index
364
+ })
365
+ }
366
+
367
+ handleHeightOptionSelect = (e, heightOption) => {
368
+ this.setState({ heightOption })
369
+ }
370
+
371
+ render() {
372
+ const { selectedIndex, heightOption } = this.state
373
+ const { heightOptions } = this
374
+
375
+ const containerProps = {
376
+ as: 'div',
377
+ ...(heightOption.includes('fixHeight') && {
378
+ height: '22rem',
379
+ withVisualDebug: true
380
+ })
381
+ }
382
+
383
+ return (
384
+ <>
385
+ <View display="block" margin="none none medium">
386
+ <RadioInputGroup
387
+ name="tabsHeightOptions"
388
+ defaultValue="fixHeight: 100%"
389
+ description={
390
+ <ScreenReaderContent>Tabs height selector</ScreenReaderContent>
391
+ }
392
+ variant="toggle"
393
+ onChange={this.handleHeightOptionSelect}
394
+ >
395
+ {Object.keys(heightOptions).map((heightOption) => (
396
+ <RadioInput
397
+ key={heightOption}
398
+ label={heightOption}
399
+ value={heightOption}
400
+ />
401
+ ))}
402
+ </RadioInputGroup>
403
+ </View>
404
+
405
+ <View {...containerProps}>
406
+ <Tabs
407
+ margin="large auto"
408
+ padding="medium"
409
+ onRequestTabChange={this.handleTabChange}
410
+ {...heightOptions[heightOption]}
411
+ >
412
+ <Tabs.Panel
413
+ id="tabA"
414
+ renderTitle="Tab A"
415
+ textAlign="center"
416
+ padding="large"
417
+ iSelected={selectedIndex === 0}
418
+ >
419
+ <Button>Focus Me</Button>
420
+ </Tabs.Panel>
421
+ <Tabs.Panel id="tabB" renderTitle="Disabled Tab" isDisabled>
422
+ {lorem.paragraphs()}
423
+ </Tabs.Panel>
424
+ <Tabs.Panel
425
+ id="tabC"
426
+ renderTitle="Tab C"
427
+ isSelected={selectedIndex === 2}
428
+ >
429
+ {lorem.paragraphs()}
430
+ </Tabs.Panel>
431
+ <Tabs.Panel
432
+ id="tabD"
433
+ renderTitle="Tab D"
434
+ isSelected={selectedIndex === 3}
435
+ >
436
+ {lorem.paragraphs()}
437
+ </Tabs.Panel>
438
+ </Tabs>
439
+ </View>
440
+ </>
441
+ )
174
442
  }
443
+ }
175
444
 
176
- this.heightOptions = {
445
+ render(<Example />)
446
+ ```
447
+
448
+ - ```js
449
+ const Example = () => {
450
+ const [selectedIndex, setSelectedIndex] = useState(0)
451
+ const [heightOption, setHeightOption] = useState('fixHeight: 100%')
452
+
453
+ const heightOptions = {
177
454
  ['fixHeight: 100%']: { fixHeight: '100%' },
178
455
  ['fixHeight: 15rem']: { fixHeight: '15rem' },
179
456
  ['minHeight: 17rem']: { minHeight: '17rem' },
180
457
  ['maxHeight: 10rem']: { maxHeight: '10rem' }
181
458
  }
182
- }
183
459
 
184
- handleTabChange = (event, { index, id }) => {
185
- this.setState({
186
- selectedIndex: index
187
- })
188
- }
189
-
190
- handleHeightOptionSelect = (e, heightOption) => {
191
- this.setState({ heightOption })
192
- }
460
+ const handleTabChange = (event, { index }) => {
461
+ setSelectedIndex(index)
462
+ }
193
463
 
194
- render () {
195
- const { selectedIndex, heightOption } = this.state
196
- const { heightOptions } = this
464
+ const handleHeightOptionSelect = (e, heightOption) => {
465
+ setHeightOption(heightOption)
466
+ }
197
467
 
198
468
  const containerProps = {
199
469
  as: 'div',
200
470
  ...(heightOption.includes('fixHeight') && {
201
- height: "22rem",
471
+ height: '22rem',
202
472
  withVisualDebug: true
203
473
  })
204
474
  }
@@ -209,11 +479,19 @@ class Example extends React.Component {
209
479
  <RadioInputGroup
210
480
  name="tabsHeightOptions"
211
481
  defaultValue="fixHeight: 100%"
212
- description={<ScreenReaderContent>Tabs height selector</ScreenReaderContent>}
482
+ description={
483
+ <ScreenReaderContent>Tabs height selector</ScreenReaderContent>
484
+ }
213
485
  variant="toggle"
214
- onChange={this.handleHeightOptionSelect}
486
+ onChange={handleHeightOptionSelect}
215
487
  >
216
- {Object.keys(heightOptions).map((heightOption) => <RadioInput key={heightOption} label={heightOption} value={heightOption} />)}
488
+ {Object.keys(heightOptions).map((heightOption) => (
489
+ <RadioInput
490
+ key={heightOption}
491
+ label={heightOption}
492
+ value={heightOption}
493
+ />
494
+ ))}
217
495
  </RadioInputGroup>
218
496
  </View>
219
497
 
@@ -221,7 +499,7 @@ class Example extends React.Component {
221
499
  <Tabs
222
500
  margin="large auto"
223
501
  padding="medium"
224
- onRequestTabChange={this.handleTabChange}
502
+ onRequestTabChange={handleTabChange}
225
503
  {...heightOptions[heightOption]}
226
504
  >
227
505
  <Tabs.Panel
@@ -229,17 +507,25 @@ class Example extends React.Component {
229
507
  renderTitle="Tab A"
230
508
  textAlign="center"
231
509
  padding="large"
232
- iSelected={selectedIndex === 0}
510
+ isSelected={selectedIndex === 0}
233
511
  >
234
512
  <Button>Focus Me</Button>
235
513
  </Tabs.Panel>
236
514
  <Tabs.Panel id="tabB" renderTitle="Disabled Tab" isDisabled>
237
515
  {lorem.paragraphs()}
238
516
  </Tabs.Panel>
239
- <Tabs.Panel id="tabC" renderTitle="Tab C" isSelected={selectedIndex === 2}>
517
+ <Tabs.Panel
518
+ id="tabC"
519
+ renderTitle="Tab C"
520
+ isSelected={selectedIndex === 2}
521
+ >
240
522
  {lorem.paragraphs()}
241
523
  </Tabs.Panel>
242
- <Tabs.Panel id="tabD" renderTitle="Tab D" isSelected={selectedIndex === 3}>
524
+ <Tabs.Panel
525
+ id="tabD"
526
+ renderTitle="Tab D"
527
+ isSelected={selectedIndex === 3}
528
+ >
243
529
  {lorem.paragraphs()}
244
530
  </Tabs.Panel>
245
531
  </Tabs>
@@ -247,20 +533,16 @@ class Example extends React.Component {
247
533
  </>
248
534
  )
249
535
  }
250
- }
251
536
 
252
- render(<Example />)
253
- ```
537
+ render(<Example />)
538
+ ```
254
539
 
255
540
  ### Support for dynamic content with active panel
256
541
 
257
542
  Marking one of the `<Tabs.Panel>` as `active` will render that panel's content in all the panels. This is useful for dynamic content rendering: the panel area can be used as a container, what routing libraries, such as React Router, can use to render their children elements into.
258
543
 
259
- ```js
260
- ---
261
- type: example
262
- ---
263
- class Outlet extends React.Component {
544
+ - ```js
545
+ class Outlet extends React.Component {
264
546
  state = {
265
547
  show: false
266
548
  }
@@ -272,100 +554,242 @@ class Outlet extends React.Component {
272
554
  render() {
273
555
  return (
274
556
  <div>
275
- <Heading level='h1' as='h1' margin='0 0 x-small'>
557
+ <Heading level="h1" as="h1" margin="0 0 x-small">
276
558
  {this.state.show ? 'Hello Developer' : 'Simulating network call...'}
277
559
  </Heading>
278
- {this.state.show ? lorem.paragraphs() : <Spinner renderTitle='Loading' size='medium' />
279
- }
560
+ {this.state.show ? (
561
+ lorem.paragraphs()
562
+ ) : (
563
+ <Spinner renderTitle="Loading" size="medium" />
564
+ )}
280
565
  </div>
281
566
  )
282
567
  }
283
568
  }
284
569
 
570
+ class Example extends React.Component {
571
+ state = {
572
+ selectedIndex: 0
573
+ }
574
+ handleTabChange = (event, { index }) => {
575
+ this.setState({
576
+ selectedIndex: index
577
+ })
578
+ }
285
579
 
286
- class Example extends React.Component {
287
- state = {
288
- selectedIndex: 0
580
+ render() {
581
+ const { selectedIndex } = this.state
582
+ return (
583
+ <Tabs
584
+ margin="large auto"
585
+ padding="medium"
586
+ onRequestTabChange={this.handleTabChange}
587
+ >
588
+ <Tabs.Panel
589
+ id="tabA"
590
+ renderTitle="Tab A"
591
+ textAlign="center"
592
+ padding="large"
593
+ isSelected={selectedIndex === 0}
594
+ active
595
+ >
596
+ <Outlet />
597
+ </Tabs.Panel>
598
+ <Tabs.Panel id="tabB" renderTitle="Disabled Tab" isDisabled />
599
+ <Tabs.Panel
600
+ id="tabC"
601
+ renderTitle="Tab C"
602
+ isSelected={selectedIndex === 2}
603
+ />
604
+ <Tabs.Panel
605
+ id="tabD"
606
+ renderTitle="Tab D"
607
+ isSelected={selectedIndex === 3}
608
+ />
609
+ </Tabs>
610
+ )
611
+ }
289
612
  }
290
- handleTabChange = (event, { index, id }) => {
291
- this.setState({
292
- selectedIndex: index
293
- })
613
+
614
+ render(<Example />)
615
+ ```
616
+
617
+ - ```js
618
+ const Outlet = () => {
619
+ const [show, setShow] = useState(false)
620
+
621
+ useEffect(() => {
622
+ const timer = setTimeout(() => setShow(true), 2000)
623
+ return () => clearTimeout(timer)
624
+ }, [])
625
+
626
+ return (
627
+ <div>
628
+ <Heading level="h1" as="h1" margin="0 0 x-small">
629
+ {show ? 'Hello Developer' : 'Simulating network call...'}
630
+ </Heading>
631
+ {show ? (
632
+ lorem.paragraphs()
633
+ ) : (
634
+ <Spinner renderTitle="Loading" size="medium" />
635
+ )}
636
+ </div>
637
+ )
294
638
  }
295
639
 
296
- render() {
297
- const { selectedIndex } = this.state
640
+ const Example = () => {
641
+ const [selectedIndex, setSelectedIndex] = useState(0)
642
+
643
+ const handleTabChange = (event, { index }) => {
644
+ setSelectedIndex(index)
645
+ }
646
+
298
647
  return (
299
648
  <Tabs
300
- margin='large auto'
301
- padding='medium'
302
- onRequestTabChange={this.handleTabChange}
649
+ margin="large auto"
650
+ padding="medium"
651
+ onRequestTabChange={handleTabChange}
303
652
  >
304
653
  <Tabs.Panel
305
- id='tabA'
306
- renderTitle='Tab A'
307
- textAlign='center'
308
- padding='large'
654
+ id="tabA"
655
+ renderTitle="Tab A"
656
+ textAlign="center"
657
+ padding="large"
309
658
  isSelected={selectedIndex === 0}
310
659
  active
311
660
  >
312
661
  <Outlet />
313
662
  </Tabs.Panel>
314
- <Tabs.Panel id='tabB' renderTitle='Disabled Tab' isDisabled />
315
- <Tabs.Panel id='tabC' renderTitle='Tab C' isSelected={selectedIndex === 2} />
316
- <Tabs.Panel id='tabD' renderTitle='Tab D' isSelected={selectedIndex === 3} />
663
+ <Tabs.Panel id="tabB" renderTitle="Disabled Tab" isDisabled />
664
+ <Tabs.Panel
665
+ id="tabC"
666
+ renderTitle="Tab C"
667
+ isSelected={selectedIndex === 2}
668
+ />
669
+ <Tabs.Panel
670
+ id="tabD"
671
+ renderTitle="Tab D"
672
+ isSelected={selectedIndex === 3}
673
+ />
317
674
  </Tabs>
318
675
  )
319
676
  }
320
- }
321
677
 
322
- render(<Example />)
323
- ```
678
+ render(<Example />)
679
+ ```
324
680
 
325
681
  ### Persisting the selected tab
326
682
 
327
683
  If you need to persist the rendered content of the tabpanels between tabbing, you can set the `unmountOnExit` prop to `false` on the `<Tabs.Panel>` component. It works case by case, so you can set it to `false` only on the tabpanels you want to persist.
328
684
 
329
- ```js
330
- ---
331
- type: example
332
- ---
333
- class Counter extends React.Component{
334
- state = {
335
- counter: 0
685
+ - ```js
686
+ class Counter extends React.Component {
687
+ state = {
688
+ counter: 0
689
+ }
690
+ handleIncrement = () => {
691
+ this.setState({
692
+ counter: this.state.counter + 1
693
+ })
694
+ }
695
+
696
+ render() {
697
+ return (
698
+ <div>
699
+ <Button onClick={this.handleIncrement}>Increment</Button>
700
+ <hr />
701
+ <Text>{this.state.counter}</Text>
702
+ </div>
703
+ )
704
+ }
336
705
  }
337
- handleIncrement = () => {
338
- this.setState({
339
- counter: this.state.counter + 1
340
- })
706
+ class Example extends React.Component {
707
+ state = {
708
+ selectedIndex: 0
709
+ }
710
+ handleTabChange = (event, { index }) => {
711
+ this.setState({
712
+ selectedIndex: index
713
+ })
714
+ }
715
+ render() {
716
+ const { selectedIndex } = this.state
717
+ return (
718
+ <Tabs
719
+ margin="large auto"
720
+ padding="medium"
721
+ onRequestTabChange={this.handleTabChange}
722
+ >
723
+ <Tabs.Panel
724
+ id="tabA"
725
+ renderTitle="I will persist"
726
+ textAlign="center"
727
+ padding="large"
728
+ isSelected={selectedIndex === 0}
729
+ unmountOnExit={false}
730
+ >
731
+ <Counter />
732
+ </Tabs.Panel>
733
+ <Tabs.Panel
734
+ id="tabB"
735
+ renderTitle="I will unmount"
736
+ isSelected={selectedIndex === 1}
737
+ textAlign="center"
738
+ padding="large"
739
+ >
740
+ <Counter />
741
+ </Tabs.Panel>
742
+ <Tabs.Panel
743
+ id="tabC"
744
+ renderTitle="Tab C"
745
+ isSelected={selectedIndex === 2}
746
+ >
747
+ Tab C
748
+ </Tabs.Panel>
749
+ <Tabs.Panel
750
+ id="tabD"
751
+ renderTitle="Tab D"
752
+ isSelected={selectedIndex === 3}
753
+ >
754
+ Tab D
755
+ </Tabs.Panel>
756
+ </Tabs>
757
+ )
758
+ }
341
759
  }
342
760
 
343
- render () {
761
+ render(<Example />)
762
+ ```
763
+
764
+ - ```js
765
+ const Counter = () => {
766
+ const [counter, setCounter] = useState(0)
767
+
768
+ const handleIncrement = () => {
769
+ setCounter(counter + 1)
770
+ }
771
+
344
772
  return (
345
773
  <div>
346
- <Button onClick={this.handleIncrement}>Increment</Button>
347
- <hr/>
348
- <Text>{this.state.counter}</Text>
774
+ <Button onClick={handleIncrement}>Increment</Button>
775
+ <hr />
776
+ <Text>{counter}</Text>
349
777
  </div>
350
778
  )
351
779
  }
352
- }
353
- class Example extends React.Component {
354
- state = {
355
- selectedIndex: 0
356
- }
357
- handleTabChange = (event, { index, id }) => {
358
- this.setState({
359
- selectedIndex: index
360
- })
361
- }
362
- render () {
363
- const { selectedIndex } = this.state
780
+
781
+ const Example = () => {
782
+ const [selectedIndex, setSelectedIndex] = useState(0)
783
+
784
+ const handleTabChange = (event, { index }) => {
785
+ setSelectedIndex(index)
786
+ }
787
+
364
788
  return (
365
789
  <Tabs
366
790
  margin="large auto"
367
791
  padding="medium"
368
- onRequestTabChange={this.handleTabChange}
792
+ onRequestTabChange={handleTabChange}
369
793
  >
370
794
  <Tabs.Panel
371
795
  id="tabA"
@@ -375,25 +799,37 @@ class Example extends React.Component {
375
799
  isSelected={selectedIndex === 0}
376
800
  unmountOnExit={false}
377
801
  >
378
- <Counter/>
802
+ <Counter />
379
803
  </Tabs.Panel>
380
- <Tabs.Panel id="tabB" renderTitle="I will unmount" isSelected={selectedIndex === 1} textAlign="center"
381
- padding="large">
382
- <Counter/>
804
+ <Tabs.Panel
805
+ id="tabB"
806
+ renderTitle="I will unmount"
807
+ isSelected={selectedIndex === 1}
808
+ textAlign="center"
809
+ padding="large"
810
+ >
811
+ <Counter />
383
812
  </Tabs.Panel>
384
- <Tabs.Panel id="tabC" renderTitle="Tab C" isSelected={selectedIndex === 2}>
385
- Tab C
813
+ <Tabs.Panel
814
+ id="tabC"
815
+ renderTitle="Tab C"
816
+ isSelected={selectedIndex === 2}
817
+ >
818
+ Tab C
386
819
  </Tabs.Panel>
387
- <Tabs.Panel id="tabD" renderTitle="Tab D" isSelected={selectedIndex === 3}>
388
- Tab D
820
+ <Tabs.Panel
821
+ id="tabD"
822
+ renderTitle="Tab D"
823
+ isSelected={selectedIndex === 3}
824
+ >
825
+ Tab D
389
826
  </Tabs.Panel>
390
827
  </Tabs>
391
828
  )
392
829
  }
393
- }
394
830
 
395
- render(<Example />)
396
- ```
831
+ render(<Example />)
832
+ ```
397
833
 
398
834
  ### Guidelines
399
835