Skip to content

Commit

Permalink
chore: Revert tabs collapse (#7599)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@LFDanLu
LFDanLu authored Jan 13, 2025
1 parent 101d077 commit 191df02
Show file tree
Hide file tree
Showing 9 changed files with 276 additions and 941 deletions.
129 changes: 61 additions & 68 deletions packages/@react-spectrum/s2/chromatic/Tabs.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import Heart from '../s2wf-icons/S2_Icon_Heart_20_N.svg';
import type {Meta} from '@storybook/react';
import {style} from '../style/spectrum-theme' with { type: 'macro' };
import {Tab, TabList, TabPanel, Tabs} from '../src/Tabs';
import {Text} from '@react-spectrum/s2';

const meta: Meta<typeof Tabs> = {
component: Tabs,
Expand All @@ -28,72 +27,66 @@ const meta: Meta<typeof Tabs> = {

export default meta;

export const Example = {
render: (args: any) => (
<Tabs {...args} styles={style({width: 450, height: 256})}>
<TabList aria-label="History of Ancient Rome">
<Tab id="FoR">Founding of Rome</Tab>
<Tab id="MaR">Monarchy and Republic</Tab>
<Tab id="Emp">Empire</Tab>
</TabList>
<TabPanel id="FoR" UNSAFE_style={{display: 'flex'}}>
<div style={{overflow: 'auto'}}>
<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>
</div>
</TabPanel>
<TabPanel id="MaR" UNSAFE_style={{display: 'flex'}}>
<div style={{overflow: 'auto'}}>
<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>
<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>
</div>
</TabPanel>
<TabPanel id="Emp" UNSAFE_style={{display: 'flex'}}>
<div style={{overflow: 'auto'}}>
<p>Alea jacta est.</p>
</div>
</TabPanel>
</Tabs>
)
};
export const Example = (args: any) => (
<Tabs {...args} styles={style({width: 450, height: 256})}>
<TabList aria-label="History of Ancient Rome">
<Tab id="FoR"><Edit />Founding of Rome</Tab>
<Tab id="MaR">Monarchy and Republic</Tab>
<Tab id="Emp">Empire</Tab>
</TabList>
<TabPanel id="FoR" UNSAFE_style={{display: 'flex'}}>
<div style={{overflow: 'auto'}}>
<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>
</div>
</TabPanel>
<TabPanel id="MaR" UNSAFE_style={{display: 'flex'}}>
<div style={{overflow: 'auto'}}>
<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>
<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>
</div>
</TabPanel>
<TabPanel id="Emp" UNSAFE_style={{display: 'flex'}}>
<div style={{overflow: 'auto'}}>
<p>Alea jacta est.</p>
</div>
</TabPanel>
</Tabs>
);

export const Disabled = {
render: (args: any) => (
<Tabs {...args} styles={style({width: 450, height: 144})} disabledKeys={['FoR', 'MaR', 'Emp']}>
<TabList aria-label="History of Ancient Rome">
<Tab id="FoR" aria-label="Edit"><Edit /><Text>Edit</Text></Tab>
<Tab id="MaR" aria-label="Notifications"><Bell /><Text>Notifications</Text></Tab>
<Tab id="Emp" aria-label="Likes"><Heart /><Text>Likes</Text></Tab>
</TabList>
<TabPanel id="FoR">
Arma virumque cano, Troiae qui primus ab oris.
</TabPanel>
<TabPanel id="MaR">
Senatus Populusque Romanus.
</TabPanel>
<TabPanel id="Emp">
Alea jacta est.
</TabPanel>
</Tabs>
)
};
export const Disabled = (args: any) => (
<Tabs {...args} styles={style({width: 450, height: 144})} disabledKeys={['FoR', 'MaR', 'Emp']}>
<TabList aria-label="History of Ancient Rome">
<Tab id="FoR"><Edit />Founding of Rome</Tab>
<Tab id="MaR">Monarchy and Republic</Tab>
<Tab id="Emp">Empire</Tab>
</TabList>
<TabPanel id="FoR">
Arma virumque cano, Troiae qui primus ab oris.
</TabPanel>
<TabPanel id="MaR">
Senatus Populusque Romanus.
</TabPanel>
<TabPanel id="Emp">
Alea jacta est.
</TabPanel>
</Tabs>
);

export const Icons = {
render: (args: any) => (
<Tabs {...args} styles={style({width: 208, height: 144})} isIconOnly>
<TabList aria-label="History of Ancient Rome">
<Tab id="FoR" aria-label="Edit"><Edit /><Text>Edit</Text></Tab>
<Tab id="MaR" aria-label="Notifications"><Bell /><Text>Notifications</Text></Tab>
<Tab id="Emp" aria-label="Likes"><Heart /><Text>Likes</Text></Tab>
</TabList>
<TabPanel id="FoR">
Arma virumque cano, Troiae qui primus ab oris.
</TabPanel>
<TabPanel id="MaR">
Senatus Populusque Romanus.
</TabPanel>
<TabPanel id="Emp">
Alea jacta est.
</TabPanel>
</Tabs>
)
};
export const Icons = (args: any) => (
<Tabs {...args} styles={style({width: 208, height: 144})}>
<TabList aria-label="History of Ancient Rome">
<Tab id="FoR" aria-label="Edit"><Edit /></Tab>
<Tab id="MaR" aria-label="Notifications"><Bell /></Tab>
<Tab id="Emp" aria-label="Likes"><Heart /></Tab>
</TabList>
<TabPanel id="FoR">
Arma virumque cano, Troiae qui primus ab oris.
</TabPanel>
<TabPanel id="MaR">
Senatus Populusque Romanus.
</TabPanel>
<TabPanel id="Emp">
Alea jacta est.
</TabPanel>
</Tabs>
);
1 change: 0 additions & 1 deletion packages/@react-spectrum/s2/intl/en-US.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@
"table.sortAscending": "Sort Ascending",
"table.sortDescending": "Sort Descending",
"table.resizeColumn": "Resize column",
"tabs.selectorLabel": "Tab selector",
"tag.showAllButtonLabel": "Show all ({tagCount, number})",
"tag.hideButtonLabel": "Show less",
"tag.actions": "Actions",
Expand Down
1 change: 0 additions & 1 deletion packages/@react-spectrum/s2/intl/he-IL.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@
"table.resizeColumn": "שנה את גודל העמודה",
"table.sortAscending": "מיין בסדר עולה",
"table.sortDescending": "מיין בסדר יורד",
"tabs.selectorLabel": "Tab selector",
"tag.actions": "פעולות",
"tag.hideButtonLabel": "הצג פחות",
"tag.noTags": "ללא",
Expand Down
Loading

1 comment on commit 191df02

@rspbot
Copy link

@rspbot rspbot commented on 191df02 Jan 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verdaccio builds:
CRA Test App
NextJS Test App
RAC Tailwind Example
RAC Spectrum + Tailwind Example
S2 Parcel Example
S2 Webpack Example
CRA Test App Size
NextJS App Size
Publish stats
Size diff since last release
Docs
Storybook
S2 Storybook

Please sign in to comment.