Skip to content

Commit f410099

Browse files
snowystingersnowystinger
authored
fix: Tabs vertical overflow wrapping (#8602)
* fix: Tabs vertical overflow wrapping * fix storybook example * fix story * fix stories
1 parent a0bda2f commit f410099

File tree

5 files changed

+166
-13
lines changed

5 files changed

+166
-13
lines changed

‎packages/@adobe/spectrum-css-temp/components/tabs/index.css

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -251,7 +251,6 @@ governing permissions and limitations under the License.
251251
align-items: center;
252252
white-space: normal;
253253
line-height: normal;
254-
word-break: break-word;
255254
block-size: auto;
256255
min-height: var(--spectrum-tabs-vertical-item-height);
257256
}
@@ -286,11 +285,10 @@ governing permissions and limitations under the License.
286285
.spectrum-TabsPanel-tabs {
287286
flex-grow: 1;
288287
flex-shrink: 0;
289-
flex-basis: 0%;
290288

291289
&.spectrum-Tabs--vertical {
292290
flex-grow: 0;
293-
min-width: fit-content;
291+
min-width: min-content;
294292
}
295293
}
296294

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

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,68 @@ export const Example: Story = {
5858
)
5959
};
6060

61+
export const Vertical: Story = {
62+
render: (args) => (
63+
<Tabs {...args} styles={style({width: 450, height: 256})} aria-label="History of Ancient Rome">
64+
<TabList>
65+
<Tab id="FoR">User Profile Settings</Tab>
66+
<Tab id="MaR"><span lang="ja">バナーおよびディスプレイ広告</span></Tab>
67+
<Tab id="Emp"><span lang="de" style={{hyphens: 'auto'}}>Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz</span></Tab>
68+
</TabList>
69+
<TabPanel id="FoR">
70+
<div className={style({overflow: 'auto', height: 'full'})}>
71+
<div>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.</div>
72+
</div>
73+
</TabPanel>
74+
<TabPanel id="MaR">
75+
<div className={style({overflow: 'auto', height: 'full'})}>
76+
<div>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.</div>
77+
<div>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.</div>
78+
</div>
79+
</TabPanel>
80+
<TabPanel id="Emp">
81+
<div className={style({overflow: 'auto', height: 'full'})}>
82+
<div>Alea jacta est.</div>
83+
</div>
84+
</TabPanel>
85+
</Tabs>
86+
),
87+
args: {
88+
orientation: 'vertical'
89+
}
90+
};
91+
92+
export const VerticalMaxWidth: Story = {
93+
render: (args) => (
94+
<Tabs {...args} styles={style({width: 450, height: 256})} aria-label="History of Ancient Rome">
95+
<TabList styles={style({width: 120})}>
96+
<Tab id="FoR">User Profile Settings</Tab>
97+
<Tab id="MaR"><span lang="ja">バナーおよびディスプレイ広告</span></Tab>
98+
<Tab id="Emp"><span lang="de" style={{hyphens: 'auto'}}>Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz</span></Tab>
99+
</TabList>
100+
<TabPanel id="FoR">
101+
<div className={style({overflow: 'auto', height: 'full'})}>
102+
<div>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.</div>
103+
</div>
104+
</TabPanel>
105+
<TabPanel id="MaR">
106+
<div className={style({overflow: 'auto', height: 'full'})}>
107+
<div>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.</div>
108+
<div>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.</div>
109+
</div>
110+
</TabPanel>
111+
<TabPanel id="Emp">
112+
<div className={style({overflow: 'auto', height: 'full'})}>
113+
<div>Alea jacta est.</div>
114+
</div>
115+
</TabPanel>
116+
</Tabs>
117+
),
118+
args: {
119+
orientation: 'vertical'
120+
}
121+
};
122+
61123
export const Disabled: Story = {
62124
render: (args) => (
63125
<Tabs {...args} aria-label="History of Ancient Rome" styles={style({width: 450, height: 144})} disabledKeys={['FoR', 'MaR', 'Emp']}>

‎packages/@react-spectrum/s2/src/Tabs.tsx

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -195,8 +195,7 @@ const tablist = style({
195195
vertical: 12
196196
}
197197
},
198-
flexShrink: 0,
199-
flexBasis: '0%'
198+
minWidth: 'min'
200199
});
201200

202201
export function TabList<T extends object>(props: TabListProps<T>): ReactNode | null {
@@ -220,7 +219,14 @@ function TabListInner<T extends object>(props: TabListProps<T>) {
220219
return (
221220
<div
222221
style={props.UNSAFE_style}
223-
className={(props.UNSAFE_className || '') + style({position: 'relative'}, getAllowedOverrides())(null, props.styles)}>
222+
className={
223+
(props.UNSAFE_className || '') +
224+
style({
225+
position: 'relative',
226+
flexGrow: 0,
227+
flexShrink: 0,
228+
minWidth: 'min'
229+
}, getAllowedOverrides())(null, props.styles)}>
224230
<RACTabList
225231
{...props}
226232
aria-label={ariaLabel}
@@ -447,9 +453,7 @@ const tabPanel = style({
447453
marginTop: 4,
448454
color: 'gray-800',
449455
flexGrow: 1,
450-
flexBasis: '0%',
451-
minHeight: 0,
452-
minWidth: 0
456+
minHeight: 0
453457
}, getAllowedOverrides({height: true}));
454458

455459
export function TabPanel(props: TabPanelProps): ReactNode | null {

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

Lines changed: 90 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,96 @@ export const CompactQuiet: TabsStoryProps = {
106106
};
107107

108108
export const Vertical: TabsStoryProps = {
109-
render: (args) => <Template {...args} />,
109+
render: (args) => (
110+
<Tabs {...args} aria-label="Tab example" maxWidth={500}>
111+
<TabList>
112+
<Item key="val1">Tab 1</Item>
113+
<Item key="val2"><span lang="ja">バナーおよびディスプレイ広告</span></Item>
114+
<Item key="val3"><span lang="de" style={{hyphens: 'auto'}}>Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz</span></Item>
115+
<Item key="val4">Tab 4</Item>
116+
<Item key="val5">Tab 5</Item>
117+
</TabList>
118+
<TabPanels>
119+
<Item key="val1">
120+
<Heading>Tab Body 1</Heading>
121+
<Text>
122+
Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
123+
</Text>
124+
</Item>
125+
<Item key="val2">
126+
<Heading>Tab Body 2</Heading>
127+
<Text>
128+
Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
129+
</Text>
130+
</Item>
131+
<Item key="val3">
132+
<Heading>Tab Body 3</Heading>
133+
<Text>
134+
Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
135+
</Text>
136+
</Item>
137+
<Item key="val4">
138+
<Heading>Tab Body 4</Heading>
139+
<Text>
140+
Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
141+
</Text>
142+
</Item>
143+
<Item key="val5">
144+
<Heading>Tab Body 5</Heading>
145+
<Text>
146+
Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
147+
</Text>
148+
</Item>
149+
</TabPanels>
150+
</Tabs>
151+
),
152+
args: {...Default.args, orientation: 'vertical'}
153+
};
154+
155+
export const VerticalMaxWidth: TabsStoryProps = {
156+
render: (args) => (
157+
<Tabs {...args} aria-label="Tab example" maxWidth={500}>
158+
<TabList width={120}>
159+
<Item key="val1">Tab 1</Item>
160+
<Item key="val2"><span lang="ja">バナーおよびディスプレイ広告</span></Item>
161+
<Item key="val3"><span lang="de" style={{hyphens: 'auto'}}>Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz</span></Item>
162+
<Item key="val4">Tab 4</Item>
163+
<Item key="val5">Tab 5</Item>
164+
</TabList>
165+
<TabPanels>
166+
<Item key="val1">
167+
<Heading>Tab Body 1</Heading>
168+
<Text>
169+
Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
170+
</Text>
171+
</Item>
172+
<Item key="val2">
173+
<Heading>Tab Body 2</Heading>
174+
<Text>
175+
Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
176+
</Text>
177+
</Item>
178+
<Item key="val3">
179+
<Heading>Tab Body 3</Heading>
180+
<Text>
181+
Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
182+
</Text>
183+
</Item>
184+
<Item key="val4">
185+
<Heading>Tab Body 4</Heading>
186+
<Text>
187+
Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
188+
</Text>
189+
</Item>
190+
<Item key="val5">
191+
<Heading>Tab Body 5</Heading>
192+
<Text>
193+
Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
194+
</Text>
195+
</Item>
196+
</TabPanels>
197+
</Tabs>
198+
),
110199
args: {...Default.args, orientation: 'vertical'}
111200
};
112201

‎packages/@react-spectrum/tabs/stories/Tabs.stories.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ OrientationVertical.story = {
5757
name: 'orientation: vertical'
5858
};
5959

60-
export const OrientationVerticalWrap: TabsStory = () => renderWithVerticalWrap({minWidth: 90, wrap: true});
60+
export const OrientationVerticalWrap: TabsStory = () => renderWithVerticalWrap({maxWidth: 90, wrap: true});
6161

6262
OrientationVerticalWrap.story = {
6363
name: 'orientation: vertical, wrap: true'
@@ -757,8 +757,8 @@ function renderWithVerticalWrap(props = {}) {
757757
onSelectionChange={action('onSelectionChange')}>
758758
<TabList {...props}>
759759
<Item key="val1">User Profile Settings</Item>
760-
<Item key="val2">Notification Preferences and yabba dabba doo yabba dabba doo yabba dabba doo</Item>
761-
<Item key="val3">Tab 3</Item>
760+
<Item key="val2"><span lang="ja">バナーおよびディスプレイ広告</span></Item>
761+
<Item key="val3"><span lang="de" style={{hyphens: 'auto'}}>Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz</span></Item>
762762
<Item key="val4">Tab 4</Item>
763763
<Item key="val5">Tab 5</Item>
764764
</TabList>

0 commit comments

Comments
 (0)