Skip to content

Commit 5e49ce7

Browse files
ryo-manbayihuiliao
ryo-manba
and
yihuiliao
authored
refactor: isolate Tabs stories (#5619)
* refactor: isolate Tabs stories * fix: test path --------- Co-authored-by: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
1 parent ecf375f commit 5e49ce7

File tree

3 files changed

+94
-76
lines changed

3 files changed

+94
-76
lines changed

‎packages/react-aria-components/stories/Tabs.stories.tsx

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
/*
2+
* Copyright 2022 Adobe. All rights reserved.
3+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License. You may obtain a copy
5+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
*
7+
* Unless required by applicable law or agreed to in writing, software distributed under
8+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
* OF ANY KIND, either express or implied. See the License for the specific language
10+
* governing permissions and limitations under the License.
11+
*/
12+
13+
import {Button, Tab, TabList, TabPanel, TabProps, Tabs, TabsProps} from 'react-aria-components';
14+
import React, {useState} from 'react';
15+
import {RouterProvider} from '@react-aria/utils';
16+
17+
export default {
18+
title: 'React Aria Components'
19+
};
20+
21+
export const TabsExample = () => {
22+
let [url, setUrl] = useState('/FoR');
23+
24+
return (
25+
<RouterProvider navigate={setUrl}>
26+
<Tabs selectedKey={url}>
27+
<TabList aria-label="History of Ancient Rome" style={{display: 'flex', gap: 8}}>
28+
<CustomTab id="/FoR" href="/FoR">Founding of Rome</CustomTab>
29+
<CustomTab id="/MaR" href="/MaR">Monarchy and Republic</CustomTab>
30+
<CustomTab id="/Emp" href="/Emp">Empire</CustomTab>
31+
</TabList>
32+
<TabPanel id="/FoR">
33+
Arma virumque cano, Troiae qui primus ab oris.
34+
</TabPanel>
35+
<TabPanel id="/MaR">
36+
Senatus Populusque Romanus.
37+
</TabPanel>
38+
<TabPanel id="/Emp">
39+
Alea jacta est.
40+
</TabPanel>
41+
</Tabs>
42+
</RouterProvider>
43+
);
44+
};
45+
46+
// Has error with invalid aria-controls, bug documented here: https://github.com/adobe/react-spectrum/issues/4781#issuecomment-1641057070
47+
export const TabsRenderProps = () => {
48+
const [tabOrientation, setTabOrientation] = useState<TabsProps['orientation']>('vertical');
49+
50+
return (
51+
<div style={{display: 'flex', flexDirection: 'row', gap: 8}}>
52+
<Button onPress={() => setTabOrientation((current) => current === 'vertical' ? 'horizontal' : 'vertical')}>
53+
Change Orientation
54+
</Button>
55+
<Tabs orientation={tabOrientation}>
56+
{({orientation}) => (
57+
<div>
58+
<div style={{display: 'flex', flexDirection: orientation === 'vertical' ? 'row' : 'column', gap: 8}}>
59+
<TabList
60+
aria-label="History of Ancient Rome"
61+
style={{display: 'flex', flexDirection: orientation === 'vertical' ? 'column' : 'row', gap: 8}}>
62+
<CustomTab id="FoR">Founding of Rome</CustomTab>
63+
<CustomTab id="MaR">Monarchy and Republic</CustomTab>
64+
<CustomTab id="Emp">Empire</CustomTab>
65+
</TabList>
66+
<TabPanel id="FoR">
67+
Arma virumque cano, Troiae qui primus ab oris.
68+
</TabPanel>
69+
<TabPanel id="MaR">
70+
Senatus Populusque Romanus.
71+
</TabPanel>
72+
<TabPanel id="Emp">
73+
Alea jacta est.
74+
</TabPanel>
75+
</div>
76+
</div>
77+
)}
78+
</Tabs>
79+
</div>
80+
);
81+
};
82+
83+
const CustomTab = (props: TabProps) => {
84+
return (
85+
<Tab
86+
{...props}
87+
style={({isSelected}) => ({
88+
borderBottom: '2px solid ' + (isSelected ? 'slateblue' : 'transparent')
89+
})} />
90+
);
91+
};

‎packages/react-aria-components/stories/index.stories.tsx

Lines changed: 2 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,12 @@
1111
*/
1212

1313
import {action} from '@storybook/addon-actions';
14-
import {Button, Calendar, CalendarCell, CalendarGrid, Cell, Checkbox, Column, ColumnResizer, DateField, DateInput, DatePicker, DateRangePicker, DateSegment, Dialog, DialogTrigger, DropZone, FileTrigger, Group, Header, Heading, Input, Keyboard, Label, Link, ListBox, ListBoxItem, ListBoxProps, Menu, MenuItem, MenuTrigger, Modal, ModalOverlay, NumberField, OverlayArrow, Popover, Radio, RadioGroup, RangeCalendar, ResizableTableContainer, Row, SearchField, Section, Select, SelectValue, Separator, Slider, SliderOutput, SliderThumb, SliderTrack, Switch, Tab, Table, TableBody, TableHeader, TabList, TabPanel, Tabs, TabsProps, Tag, TagGroup, TagList, Text, TextField, TimeField, ToggleButton, Toolbar, Tooltip, TooltipTrigger, useDragAndDrop} from 'react-aria-components';
14+
import {Button, Calendar, CalendarCell, CalendarGrid, Cell, Checkbox, Column, ColumnResizer, DateField, DateInput, DatePicker, DateRangePicker, DateSegment, Dialog, DialogTrigger, DropZone, FileTrigger, Group, Header, Heading, Input, Keyboard, Label, Link, ListBox, ListBoxItem, ListBoxProps, Menu, MenuItem, MenuTrigger, Modal, ModalOverlay, NumberField, OverlayArrow, Popover, Radio, RadioGroup, RangeCalendar, ResizableTableContainer, Row, SearchField, Section, Select, SelectValue, Separator, Slider, SliderOutput, SliderThumb, SliderTrack, Switch, Table, TableBody, TableHeader, Tag, TagGroup, TagList, Text, TextField, TimeField, ToggleButton, Toolbar, Tooltip, TooltipTrigger, useDragAndDrop} from 'react-aria-components';
1515
import {classNames} from '@react-spectrum/utils';
1616
import clsx from 'clsx';
1717
import {FocusRing, isTextDropItem, mergeProps, useButton, useClipboard, useDrag} from 'react-aria';
1818
import {MyListBoxItem} from './utils';
19-
import React, {useRef, useState} from 'react';
20-
import {RouterProvider} from '@react-aria/utils';
19+
import React, {useRef} from 'react';
2120
import styles from '../example/index.css';
2221
import {useListData} from 'react-stately';
2322

@@ -466,68 +465,6 @@ export const ModalExample = () => (
466465
</DialogTrigger>
467466
);
468467

469-
export const TabsExample = () => {
470-
let [url, setUrl] = useState('/FoR');
471-
472-
return (
473-
<RouterProvider navigate={setUrl}>
474-
<Tabs selectedKey={url}>
475-
<TabList aria-label="History of Ancient Rome" style={{display: 'flex', gap: 8}}>
476-
<CustomTab id="/FoR" href="/FoR">Founding of Rome</CustomTab>
477-
<CustomTab id="/MaR" href="/MaR">Monarchy and Republic</CustomTab>
478-
<CustomTab id="/Emp" href="/Emp">Empire</CustomTab>
479-
</TabList>
480-
<TabPanel id="/FoR">
481-
Arma virumque cano, Troiae qui primus ab oris.
482-
</TabPanel>
483-
<TabPanel id="/MaR">
484-
Senatus Populusque Romanus.
485-
</TabPanel>
486-
<TabPanel id="/Emp">
487-
Alea jacta est.
488-
</TabPanel>
489-
</Tabs>
490-
</RouterProvider>
491-
);
492-
};
493-
494-
// Has error with invalid aria-controls, bug documented here: https://github.com/adobe/react-spectrum/issues/4781#issuecomment-1641057070
495-
export const TabsRenderProps = () => {
496-
const [tabOrientation, setTabOrientation] = useState<TabsProps['orientation']>('vertical');
497-
498-
return (
499-
<div style={{display: 'flex', flexDirection: 'row', gap: 8}}>
500-
<Button onPress={() => setTabOrientation((current) => current === 'vertical' ? 'horizontal' : 'vertical')}>
501-
Change Orientation
502-
</Button>
503-
<Tabs orientation={tabOrientation}>
504-
{({orientation}) => (
505-
<div>
506-
<div style={{display: 'flex', flexDirection: orientation === 'vertical' ? 'row' : 'column', gap: 8}}>
507-
<TabList
508-
aria-label="History of Ancient Rome"
509-
style={{display: 'flex', flexDirection: orientation === 'vertical' ? 'column' : 'row', gap: 8}}>
510-
<CustomTab id="FoR">Founding of Rome</CustomTab>
511-
<CustomTab id="MaR">Monarchy and Republic</CustomTab>
512-
<CustomTab id="Emp">Empire</CustomTab>
513-
</TabList>
514-
<TabPanel id="FoR">
515-
Arma virumque cano, Troiae qui primus ab oris.
516-
</TabPanel>
517-
<TabPanel id="MaR">
518-
Senatus Populusque Romanus.
519-
</TabPanel>
520-
<TabPanel id="Emp">
521-
Alea jacta est.
522-
</TabPanel>
523-
</div>
524-
</div>
525-
)}
526-
</Tabs>
527-
</div>
528-
);
529-
};
530-
531468
const ReorderableTable = ({initialItems}: {initialItems: {id: string, name: string}[]}) => {
532469
let list = useListData({initialItems});
533470

@@ -764,16 +701,6 @@ function CustomThumb({index, children}) {
764701
);
765702
}
766703

767-
function CustomTab(props) {
768-
return (
769-
<Tab
770-
{...props}
771-
style={({isSelected}) => ({
772-
borderBottom: '2px solid ' + (isSelected ? 'slateblue' : 'transparent')
773-
})} />
774-
);
775-
}
776-
777704
function Draggable() {
778705
let buttonRef = useRef(null);
779706
let {dragProps, isDragging} = useDrag({

‎packages/react-aria-components/test/Tabs.test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
import {act, fireEvent, pointerMap, render, within} from '@react-spectrum/test-utils';
1414
import React from 'react';
1515
import {Tab, TabList, TabPanel, Tabs} from '../';
16-
import {TabsExample} from '../stories/index.stories';
16+
import {TabsExample} from '../stories/Tabs.stories';
1717
import userEvent from '@testing-library/user-event';
1818

1919
let renderTabs = (tabsProps, tablistProps, tabProps, tabpanelProps) => render(

0 commit comments

Comments
 (0)