Skip to content

Commit 191df02

Browse files
LFDanLuLFDanLu
authored
chore: Revert tabs collapse (#7599)
* Revert "chore: Update JSDocs and apis for release (#7595)" This reverts commit 101d077. * Revert "fix: Tabs infinite loop (#7487)" This reverts commit 8228e4e. * Revert "fix: Tabs from testing (#7463)" This reverts commit 494e01c. * Revert "feat: Tabs collapse behaviour (#7202)" This reverts commit cd4da2b. * add stuff back that we still want * update lock
1 parent 101d077 commit 191df02

File tree

9 files changed

+276
-941
lines changed

9 files changed

+276
-941
lines changed

‎packages/@react-spectrum/s2/chromatic/Tabs.stories.tsx

+61-68
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import Heart from '../s2wf-icons/S2_Icon_Heart_20_N.svg';
1616
import type {Meta} from '@storybook/react';
1717
import {style} from '../style/spectrum-theme' with { type: 'macro' };
1818
import {Tab, TabList, TabPanel, Tabs} from '../src/Tabs';
19-
import {Text} from '@react-spectrum/s2';
2019

2120
const meta: Meta<typeof Tabs> = {
2221
component: Tabs,
@@ -28,72 +27,66 @@ const meta: Meta<typeof Tabs> = {
2827

2928
export default meta;
3029

31-
export const Example = {
32-
render: (args: any) => (
33-
<Tabs {...args} styles={style({width: 450, height: 256})}>
34-
<TabList aria-label="History of Ancient Rome">
35-
<Tab id="FoR">Founding of Rome</Tab>
36-
<Tab id="MaR">Monarchy and Republic</Tab>
37-
<Tab id="Emp">Empire</Tab>
38-
</TabList>
39-
<TabPanel id="FoR" UNSAFE_style={{display: 'flex'}}>
40-
<div style={{overflow: 'auto'}}>
41-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non rutrum augue, a dictum est. Sed ultricies vel orci in blandit. Morbi sed tempor leo. Phasellus et sollicitudin nunc, a volutpat est. In volutpat molestie velit, nec rhoncus felis vulputate porttitor. In efficitur nibh tortor, maximus imperdiet libero sollicitudin sed. Pellentesque dictum, quam id scelerisque rutrum, lorem augue suscipit est, nec ultricies ligula lorem id dui. Cras lacus tortor, fringilla nec ligula quis, semper imperdiet ex.</p>
42-
</div>
43-
</TabPanel>
44-
<TabPanel id="MaR" UNSAFE_style={{display: 'flex'}}>
45-
<div style={{overflow: 'auto'}}>
46-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut vulputate justo. Suspendisse potenti. Nunc id fringilla leo, at luctus quam. Maecenas et ipsum nisi. Curabitur in porta purus, a pretium est. Fusce eu urna diam. Sed nunc neque, consectetur ut purus nec, consequat elementum libero. Sed ut diam in quam maximus condimentum at non erat. Vestibulum sagittis rutrum velit, vitae suscipit arcu. Nulla ac feugiat ante, vitae laoreet ligula. Maecenas sed molestie ligula. Nulla sed fringilla ex. Nulla viverra tortor at enim condimentum egestas. Nulla sed tristique sapien. Integer ligula quam, vulputate eget mollis eu, interdum sit amet justo.</p>
47-
<p>Vivamus dignissim tortor ut sapien congue tristique. Sed ac aliquet mauris. Nulla metus dui, elementum sit amet luctus eu, condimentum id elit. Praesent id nibh sed ligula congue venenatis. Pellentesque urna turpis, eleifend id pellentesque a, auctor nec neque. Vestibulum ipsum mauris, rutrum sit amet magna et, aliquet mollis tellus. Pellentesque nec ultricies nibh, at tempus massa. Phasellus dictum turpis et interdum scelerisque. Aliquam fermentum tincidunt ipsum sit amet suscipit. Fusce non dui sed diam lacinia mattis fermentum eu urna. Cras pretium id nunc in elementum. Mauris laoreet odio vitae laoreet dictum. In non justo nec nunc vehicula posuere non non ligula. Nullam eleifend scelerisque nibh, in sollicitudin tortor ullamcorper vel. Praesent sagittis risus in erat dignissim, non lacinia elit efficitur. Quisque maximus nulla vel luctus pharetra.</p>
48-
</div>
49-
</TabPanel>
50-
<TabPanel id="Emp" UNSAFE_style={{display: 'flex'}}>
51-
<div style={{overflow: 'auto'}}>
52-
<p>Alea jacta est.</p>
53-
</div>
54-
</TabPanel>
55-
</Tabs>
56-
)
57-
};
30+
export const Example = (args: any) => (
31+
<Tabs {...args} styles={style({width: 450, height: 256})}>
32+
<TabList aria-label="History of Ancient Rome">
33+
<Tab id="FoR"><Edit />Founding of Rome</Tab>
34+
<Tab id="MaR">Monarchy and Republic</Tab>
35+
<Tab id="Emp">Empire</Tab>
36+
</TabList>
37+
<TabPanel id="FoR" UNSAFE_style={{display: 'flex'}}>
38+
<div style={{overflow: 'auto'}}>
39+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non rutrum augue, a dictum est. Sed ultricies vel orci in blandit. Morbi sed tempor leo. Phasellus et sollicitudin nunc, a volutpat est. In volutpat molestie velit, nec rhoncus felis vulputate porttitor. In efficitur nibh tortor, maximus imperdiet libero sollicitudin sed. Pellentesque dictum, quam id scelerisque rutrum, lorem augue suscipit est, nec ultricies ligula lorem id dui. Cras lacus tortor, fringilla nec ligula quis, semper imperdiet ex.</p>
40+
</div>
41+
</TabPanel>
42+
<TabPanel id="MaR" UNSAFE_style={{display: 'flex'}}>
43+
<div style={{overflow: 'auto'}}>
44+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut vulputate justo. Suspendisse potenti. Nunc id fringilla leo, at luctus quam. Maecenas et ipsum nisi. Curabitur in porta purus, a pretium est. Fusce eu urna diam. Sed nunc neque, consectetur ut purus nec, consequat elementum libero. Sed ut diam in quam maximus condimentum at non erat. Vestibulum sagittis rutrum velit, vitae suscipit arcu. Nulla ac feugiat ante, vitae laoreet ligula. Maecenas sed molestie ligula. Nulla sed fringilla ex. Nulla viverra tortor at enim condimentum egestas. Nulla sed tristique sapien. Integer ligula quam, vulputate eget mollis eu, interdum sit amet justo.</p>
45+
<p>Vivamus dignissim tortor ut sapien congue tristique. Sed ac aliquet mauris. Nulla metus dui, elementum sit amet luctus eu, condimentum id elit. Praesent id nibh sed ligula congue venenatis. Pellentesque urna turpis, eleifend id pellentesque a, auctor nec neque. Vestibulum ipsum mauris, rutrum sit amet magna et, aliquet mollis tellus. Pellentesque nec ultricies nibh, at tempus massa. Phasellus dictum turpis et interdum scelerisque. Aliquam fermentum tincidunt ipsum sit amet suscipit. Fusce non dui sed diam lacinia mattis fermentum eu urna. Cras pretium id nunc in elementum. Mauris laoreet odio vitae laoreet dictum. In non justo nec nunc vehicula posuere non non ligula. Nullam eleifend scelerisque nibh, in sollicitudin tortor ullamcorper vel. Praesent sagittis risus in erat dignissim, non lacinia elit efficitur. Quisque maximus nulla vel luctus pharetra.</p>
46+
</div>
47+
</TabPanel>
48+
<TabPanel id="Emp" UNSAFE_style={{display: 'flex'}}>
49+
<div style={{overflow: 'auto'}}>
50+
<p>Alea jacta est.</p>
51+
</div>
52+
</TabPanel>
53+
</Tabs>
54+
);
5855

59-
export const Disabled = {
60-
render: (args: any) => (
61-
<Tabs {...args} styles={style({width: 450, height: 144})} disabledKeys={['FoR', 'MaR', 'Emp']}>
62-
<TabList aria-label="History of Ancient Rome">
63-
<Tab id="FoR" aria-label="Edit"><Edit /><Text>Edit</Text></Tab>
64-
<Tab id="MaR" aria-label="Notifications"><Bell /><Text>Notifications</Text></Tab>
65-
<Tab id="Emp" aria-label="Likes"><Heart /><Text>Likes</Text></Tab>
66-
</TabList>
67-
<TabPanel id="FoR">
68-
Arma virumque cano, Troiae qui primus ab oris.
69-
</TabPanel>
70-
<TabPanel id="MaR">
71-
Senatus Populusque Romanus.
72-
</TabPanel>
73-
<TabPanel id="Emp">
74-
Alea jacta est.
75-
</TabPanel>
76-
</Tabs>
77-
)
78-
};
56+
export const Disabled = (args: any) => (
57+
<Tabs {...args} styles={style({width: 450, height: 144})} disabledKeys={['FoR', 'MaR', 'Emp']}>
58+
<TabList aria-label="History of Ancient Rome">
59+
<Tab id="FoR"><Edit />Founding of Rome</Tab>
60+
<Tab id="MaR">Monarchy and Republic</Tab>
61+
<Tab id="Emp">Empire</Tab>
62+
</TabList>
63+
<TabPanel id="FoR">
64+
Arma virumque cano, Troiae qui primus ab oris.
65+
</TabPanel>
66+
<TabPanel id="MaR">
67+
Senatus Populusque Romanus.
68+
</TabPanel>
69+
<TabPanel id="Emp">
70+
Alea jacta est.
71+
</TabPanel>
72+
</Tabs>
73+
);
7974

80-
export const Icons = {
81-
render: (args: any) => (
82-
<Tabs {...args} styles={style({width: 208, height: 144})} isIconOnly>
83-
<TabList aria-label="History of Ancient Rome">
84-
<Tab id="FoR" aria-label="Edit"><Edit /><Text>Edit</Text></Tab>
85-
<Tab id="MaR" aria-label="Notifications"><Bell /><Text>Notifications</Text></Tab>
86-
<Tab id="Emp" aria-label="Likes"><Heart /><Text>Likes</Text></Tab>
87-
</TabList>
88-
<TabPanel id="FoR">
89-
Arma virumque cano, Troiae qui primus ab oris.
90-
</TabPanel>
91-
<TabPanel id="MaR">
92-
Senatus Populusque Romanus.
93-
</TabPanel>
94-
<TabPanel id="Emp">
95-
Alea jacta est.
96-
</TabPanel>
97-
</Tabs>
98-
)
99-
};
75+
export const Icons = (args: any) => (
76+
<Tabs {...args} styles={style({width: 208, height: 144})}>
77+
<TabList aria-label="History of Ancient Rome">
78+
<Tab id="FoR" aria-label="Edit"><Edit /></Tab>
79+
<Tab id="MaR" aria-label="Notifications"><Bell /></Tab>
80+
<Tab id="Emp" aria-label="Likes"><Heart /></Tab>
81+
</TabList>
82+
<TabPanel id="FoR">
83+
Arma virumque cano, Troiae qui primus ab oris.
84+
</TabPanel>
85+
<TabPanel id="MaR">
86+
Senatus Populusque Romanus.
87+
</TabPanel>
88+
<TabPanel id="Emp">
89+
Alea jacta est.
90+
</TabPanel>
91+
</Tabs>
92+
);

‎packages/@react-spectrum/s2/intl/en-US.json

-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@
2525
"table.sortAscending": "Sort Ascending",
2626
"table.sortDescending": "Sort Descending",
2727
"table.resizeColumn": "Resize column",
28-
"tabs.selectorLabel": "Tab selector",
2928
"tag.showAllButtonLabel": "Show all ({tagCount, number})",
3029
"tag.hideButtonLabel": "Show less",
3130
"tag.actions": "Actions",

‎packages/@react-spectrum/s2/intl/he-IL.json

-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@
2525
"table.resizeColumn": "שנה את גודל העמודה",
2626
"table.sortAscending": "מיין בסדר עולה",
2727
"table.sortDescending": "מיין בסדר יורד",
28-
"tabs.selectorLabel": "Tab selector",
2928
"tag.actions": "פעולות",
3029
"tag.hideButtonLabel": "הצג פחות",
3130
"tag.noTags": "ללא",

0 commit comments

Comments
 (0)