From 7e2d103c1316c0ba04e284bdcda2e63563392293 Mon Sep 17 00:00:00 2001 From: Sebastian Florek Date: Thu, 14 Mar 2024 11:56:46 +0100 Subject: [PATCH] feat: allow tablist to be scrollable (#576) --- src/components/TabList.tsx | 16 ++++++- src/stories/TabList.stories.tsx | 77 +++++++++++++++++++++++++++++++-- 2 files changed, 89 insertions(+), 4 deletions(-) diff --git a/src/components/TabList.tsx b/src/components/TabList.tsx index a92b851a..494e7083 100644 --- a/src/components/TabList.tsx +++ b/src/components/TabList.tsx @@ -59,13 +59,21 @@ type ChildrenType = ReactElement | ReactElement[] type TabListProps = { stateRef: TabStateRef stateProps?: TabListStateProps + scrollable?: boolean renderer?: Renderer as?: ReactElement & { ref?: MutableRefObject } children?: ChildrenType } function TabListRef( - { stateRef, stateProps, renderer, as, ...props }: TabListProps & FlexProps, + { + stateRef, + stateProps, + renderer, + as, + scrollable, + ...props + }: TabListProps & FlexProps, incomingRef: RefObject ) { const wrappedChildren = useItemWrappedChildren(props.children) @@ -135,6 +143,12 @@ function TabListRef( alignItems={ stateProps.orientation === 'vertical' ? 'flex-start' : 'flex-end' } + css={{ + ...(scrollable && { + overflow: 'auto', + whiteSpace: 'nowrap', + }), + }} ref={mergedRef as any} > {tabChildren} diff --git a/src/stories/TabList.stories.tsx b/src/stories/TabList.stories.tsx index 94b7c112..2257a73b 100644 --- a/src/stories/TabList.stories.tsx +++ b/src/stories/TabList.stories.tsx @@ -38,6 +38,69 @@ const tabs = { }, } +const moreTabs = { + lions: { + label: 'Lions', + content: + "The lion (Panthera leo) is a large cat of the genus Panthera native to Africa and India. It has a muscular, broad-chested body, short, rounded head, round ears, and a hairy tuft at the end of its tail. It is sexually dimorphic; adult male lions are larger than females and have a prominent mane. It is a social species, forming groups called prides. A lion's pride consists of a few adult males, related females, and cubs. Groups of female lions usually hunt together, preying mostly on large ungulates. The lion is an apex and keystone predator; although some lions scavenge when opportunities occur and have been known to hunt humans, the species typically does not actively seek out and prey on humans.", + }, + tigers: { + label: 'Tigers', + content: + "The tiger (Panthera tigris) is the largest living cat species and a member of the genus Panthera. It is most recognisable for its dark vertical stripes on orange fur with a white underside. An apex predator, it primarily preys on ungulates such as deer and wild boar. It is territorial and generally a solitary but social predator, requiring large contiguous areas of habitat, which support its requirements for prey and rearing of its offspring. Tiger cubs stay with their mother for about two years, then become independent and leave their mother's home range to establish their own.", + }, + bears: { + label: 'Bears', + content: + 'Bears are carnivoran mammals of the family Ursidae. They are classified as caniforms, or doglike carnivorans. Although only eight species of bears are extant, they are widespread, appearing in a wide variety of habitats throughout the Northern Hemisphere and partially in the Southern Hemisphere. Bears are found on the continents of North America, South America, Europe, and Asia. Common characteristics of modern bears include large bodies with stocky legs, long snouts, small rounded ears, shaggy hair, plantigrade paws with five nonretractile claws, and short tails.', + }, + ohmy: { + label: 'Oh my!', + content: + 'George Takei (Japanese: ジョージ・タケイ, born Hosato Takei (武井 穂郷); April 20, 1937) is an American actor, author, and activist. He is internationally known for his role as Hikaru Sulu, helmsman of the fictional starship USS Enterprise in the television series Star Trek and subsequent films.[1][2]', + }, + lions2: { + label: 'Lions', + content: + "The lion (Panthera leo) is a large cat of the genus Panthera native to Africa and India. It has a muscular, broad-chested body, short, rounded head, round ears, and a hairy tuft at the end of its tail. It is sexually dimorphic; adult male lions are larger than females and have a prominent mane. It is a social species, forming groups called prides. A lion's pride consists of a few adult males, related females, and cubs. Groups of female lions usually hunt together, preying mostly on large ungulates. The lion is an apex and keystone predator; although some lions scavenge when opportunities occur and have been known to hunt humans, the species typically does not actively seek out and prey on humans.", + }, + tigers2: { + label: 'Tigers', + content: + "The tiger (Panthera tigris) is the largest living cat species and a member of the genus Panthera. It is most recognisable for its dark vertical stripes on orange fur with a white underside. An apex predator, it primarily preys on ungulates such as deer and wild boar. It is territorial and generally a solitary but social predator, requiring large contiguous areas of habitat, which support its requirements for prey and rearing of its offspring. Tiger cubs stay with their mother for about two years, then become independent and leave their mother's home range to establish their own.", + }, + bears2: { + label: 'Bears', + content: + 'Bears are carnivoran mammals of the family Ursidae. They are classified as caniforms, or doglike carnivorans. Although only eight species of bears are extant, they are widespread, appearing in a wide variety of habitats throughout the Northern Hemisphere and partially in the Southern Hemisphere. Bears are found on the continents of North America, South America, Europe, and Asia. Common characteristics of modern bears include large bodies with stocky legs, long snouts, small rounded ears, shaggy hair, plantigrade paws with five nonretractile claws, and short tails.', + }, + ohmy2: { + label: 'Oh my!', + content: + 'George Takei (Japanese: ジョージ・タケイ, born Hosato Takei (武井 穂郷); April 20, 1937) is an American actor, author, and activist. He is internationally known for his role as Hikaru Sulu, helmsman of the fictional starship USS Enterprise in the television series Star Trek and subsequent films.[1][2]', + }, + lions3: { + label: 'Lions', + content: + "The lion (Panthera leo) is a large cat of the genus Panthera native to Africa and India. It has a muscular, broad-chested body, short, rounded head, round ears, and a hairy tuft at the end of its tail. It is sexually dimorphic; adult male lions are larger than females and have a prominent mane. It is a social species, forming groups called prides. A lion's pride consists of a few adult males, related females, and cubs. Groups of female lions usually hunt together, preying mostly on large ungulates. The lion is an apex and keystone predator; although some lions scavenge when opportunities occur and have been known to hunt humans, the species typically does not actively seek out and prey on humans.", + }, + tigers3: { + label: 'Tigers', + content: + "The tiger (Panthera tigris) is the largest living cat species and a member of the genus Panthera. It is most recognisable for its dark vertical stripes on orange fur with a white underside. An apex predator, it primarily preys on ungulates such as deer and wild boar. It is territorial and generally a solitary but social predator, requiring large contiguous areas of habitat, which support its requirements for prey and rearing of its offspring. Tiger cubs stay with their mother for about two years, then become independent and leave their mother's home range to establish their own.", + }, + bears3: { + label: 'Bears', + content: + 'Bears are carnivoran mammals of the family Ursidae. They are classified as caniforms, or doglike carnivorans. Although only eight species of bears are extant, they are widespread, appearing in a wide variety of habitats throughout the Northern Hemisphere and partially in the Southern Hemisphere. Bears are found on the continents of North America, South America, Europe, and Asia. Common characteristics of modern bears include large bodies with stocky legs, long snouts, small rounded ears, shaggy hair, plantigrade paws with five nonretractile claws, and short tails.', + }, + ohmy3: { + label: 'Oh my!', + content: + 'George Takei (Japanese: ジョージ・タケイ, born Hosato Takei (武井 穂郷); April 20, 1937) is an American actor, author, and activist. He is internationally known for his role as Hikaru Sulu, helmsman of the fictional starship USS Enterprise in the television series Star Trek and subsequent films.[1][2]', + }, +} + function TemplateBasic(args: any) { const tabStateRef = useRef() const [selectedKey, setSelectedKey] = useState('lions') @@ -48,6 +111,7 @@ function TemplateBasic(args: any) { selectedKey, onSelectionChange: setSelectedKey, } + const tabList = (args.tabs ?? tabs) as typeof tabs return (
@@ -59,11 +123,12 @@ function TemplateBasic(args: any) { stateRef={tabStateRef} stateProps={tabListStateProps} flexShrink={0} + scrollable={args.scrollable ?? false} marginRight={orientation === 'vertical' ? 'large' : 0} marginBottom={orientation === 'vertical' ? 0 : 'xlarge'} width={orientation === 'vertical' ? '100px' : '100%'} > - {Object.entries(tabs).map(([key, tab]) => ( + {Object.entries(tabList).map(([key, tab]) => ( - {(tabs as any)[selectedKey]?.label} + {(tabList as any)[selectedKey]?.label} - {(tabs as any)[selectedKey]?.content} + {(tabList as any)[selectedKey]?.content}
@@ -265,5 +330,11 @@ Vertical.args = { orientation: 'vertical', } +export const Scrollable = TemplateBasic.bind({}) +Scrollable.args = { + scrollable: true, + tabs: moreTabs, +} + export const AdvancedContent = TemplateComplex.bind({}) AdvancedContent.args = {}