diff --git a/packages/@adobe/spectrum-css-temp/components/tabs/index.css b/packages/@adobe/spectrum-css-temp/components/tabs/index.css index 82a2bbf243a..b7db40d6377 100644 --- a/packages/@adobe/spectrum-css-temp/components/tabs/index.css +++ b/packages/@adobe/spectrum-css-temp/components/tabs/index.css @@ -238,6 +238,19 @@ governing permissions and limitations under the License. } } + /* + Allow tab labels to wrap when TabList component has minWidth set. + */ + &.spectrum-Tabs--verticalWrap:not(.spectrum-Tabs--compact) .spectrum-Tabs-item { + display: flex; + align-items: center; + white-space: normal; + line-height: normal; + word-break: break-word; + block-size: auto; + min-height: var(--spectrum-tabs-vertical-item-height); + } + &.spectrum-Tabs--compact { .spectrum-Tabs-item { block-size: var(--spectrum-tabs-compact-vertical-item-height); diff --git a/packages/@react-spectrum/tabs/src/Tabs.tsx b/packages/@react-spectrum/tabs/src/Tabs.tsx index e6342c14bb7..f7907940efc 100644 --- a/packages/@react-spectrum/tabs/src/Tabs.tsx +++ b/packages/@react-spectrum/tabs/src/Tabs.tsx @@ -261,7 +261,7 @@ function TabLine(props: TabLineProps) { * A TabList is used within Tabs to group tabs that a user can switch between. * The keys of the items within the must match up with a corresponding item inside the . */ -export function TabList(props: SpectrumTabListProps): ReactNode { +export function TabList(props: SpectrumTabListProps & {wrap?: boolean}): ReactNode { const tabContext = useContext(TabContext)!; const {refs, tabState, tabProps, tabPanelProps} = tabContext; const {isQuiet, density, isEmphasized, orientation} = tabProps; @@ -288,6 +288,8 @@ export function TabList(props: SpectrumTabListProps): ReactNode { let tabListclassName = classNames(styles, 'spectrum-TabsPanel-tabs'); + const verticalWrap = props.wrap && orientation === 'vertical'; + const tabContent = (
(props: SpectrumTabListProps): ReactNode { { 'spectrum-Tabs--quiet': isQuiet, 'spectrum-Tabs--emphasized': isEmphasized, - ['spectrum-Tabs--compact']: density === 'compact' + ['spectrum-Tabs--compact']: density === 'compact', + 'spectrum-Tabs--verticalWrap': verticalWrap }, orientation === 'vertical' && styleProps.className ) diff --git a/packages/@react-spectrum/tabs/stories/Tabs.stories.tsx b/packages/@react-spectrum/tabs/stories/Tabs.stories.tsx index ebc359adeea..8eb89d900ae 100644 --- a/packages/@react-spectrum/tabs/stories/Tabs.stories.tsx +++ b/packages/@react-spectrum/tabs/stories/Tabs.stories.tsx @@ -54,6 +54,12 @@ OrientationVertical.story = { name: 'orientation: vertical' }; +export const OrientationVerticalWrap = () => renderWithVerticalWrap({minWidth: 90, wrap: true}); + +OrientationVerticalWrap.story = { + name: 'orientation: vertical, wrap: true' +}; + export const DensityCompact = () => render({density: 'compact'}); DensityCompact.story = { @@ -739,6 +745,111 @@ function renderWithFalsyKey(props = {}) { ); } +function renderWithVerticalWrap(props = {}) { + return ( + + + User Profile Settings + Notification Preferences + Tab 3 + Tab 4 + Tab 5 + + + + Tab Body 1 + + 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. Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure + irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do + reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo + ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit + ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod + voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt + occaecat quis do. Consequat adipisicing irure Lorem commodo officia sint id. Velit sit + magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse + enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim + duis esse reprehenderit. + + + + Tab Body 2 + + 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. Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure + irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do + reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo + ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit + ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod + voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt + occaecat quis do. Consequat adipisicing irure Lorem commodo officia sint id. Velit sit + magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse + enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim + duis esse reprehenderit. + + + + Tab Body 3 + + 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. Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure + irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do + reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo + ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit + ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod + voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt + occaecat quis do. Consequat adipisicing irure Lorem commodo officia sint id. Velit sit + magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse + enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim + duis esse reprehenderit. + + + + Tab Body 4 + + 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. Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure + irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do + reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo + ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit + ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod + voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt + occaecat quis do. Consequat adipisicing irure Lorem commodo officia sint id. Velit sit + magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse + enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim + duis esse reprehenderit. + + + + Tab Body 5 + + 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. Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure + irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do + reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo + ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit + ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod + voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt + occaecat quis do. Consequat adipisicing irure Lorem commodo officia sint id. Velit sit + magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse + enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim + duis esse reprehenderit. + + + + + ); +} + interface DynamicTabItem { name: string, children: ReactNode, diff --git a/packages/@react-types/tabs/src/index.d.ts b/packages/@react-types/tabs/src/index.d.ts index e760d2596a1..f2f4e24eabc 100644 --- a/packages/@react-types/tabs/src/index.d.ts +++ b/packages/@react-types/tabs/src/index.d.ts @@ -78,7 +78,12 @@ export interface SpectrumTabsProps extends AriaTabListBase, Omit extends DOMProps, StyleProps { /** The tab items to display. Item keys should match the key of the corresponding `` within the `` element. */ - children: CollectionChildren + children: CollectionChildren, + /** + * When `true`, tab labels will wrap if they exceed the TabList's width. Only supported in vertical orientation with `regular` density. For proper wrapping, set a `minWidth` on TabList. + * @default false + */ + wrap?: boolean } export interface SpectrumTabPanelsProps extends DOMProps, StyleProps {