feat: allow tablist to be scrollable (#576)

src/components/TabList.tsx

@@ -59,13 +59,21 @@ type ChildrenType = ReactElement<TabBaseProps> | ReactElement<TabBaseProps>[]
 type TabListProps = {
   stateRef: TabStateRef
   stateProps?: TabListStateProps
+  scrollable?: boolean
   renderer?: Renderer
   as?: ReactElement & { ref?: MutableRefObject<any> }
   children?: ChildrenType
 }
 
 function TabListRef(
-  { stateRef, stateProps, renderer, as, ...props }: TabListProps & FlexProps,
+  {
+    stateRef,
+    stateProps,
+    renderer,
+    as,
+    scrollable,
+    ...props
+  }: TabListProps & FlexProps,
   incomingRef: RefObject<HTMLElement>
 ) {
   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}

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<Key>('lions')
@@ -48,6 +111,7 @@ function TemplateBasic(args: any) {
     selectedKey,
     onSelectionChange: setSelectedKey,
   }
+  const tabList = (args.tabs ?? tabs) as typeof tabs
 
   return (
     <Div>
@@ -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]) => (
             <Tab
               key={key}
               textValue={tab.label}
@@ -77,7 +142,7 @@ function TemplateBasic(args: any) {
             title1
             marginBottom="medium"
           >
-            {(tabs as any)[selectedKey]?.label}
+            {(tabList as any)[selectedKey]?.label}
           </H1>
           <TabPanel
             stateRef={tabStateRef}
@@ -86,7 +151,7 @@ function TemplateBasic(args: any) {
             borderTop="1px solid border"
             borderBottom="1px solid border"
           >
-            {(tabs as any)[selectedKey]?.content}
+            {(tabList as any)[selectedKey]?.content}
           </TabPanel>
         </Div>
       </Flex>
@@ -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 = {}