🚸 Tabs: make conditionalRender prop for Panels (equinor#3062)

* 🚸 Tabs: make conditionalRender prop for Panels * Tabs: update documentation
ingeridhellen · Sep 20, 2023 · bc684cb · bc684cb
1 parent a2c8688
commit bc684cb
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/packages/eds-core-react/src/components/Tabs/TabPanels.tsx b/packages/eds-core-react/src/components/Tabs/TabPanels.tsx
@@ -8,19 +8,22 @@ import {
 } from 'react'
 import { TabsContext } from './Tabs.context'
 
-export type TabPanelsProps = HTMLAttributes<HTMLDivElement>
+export type TabPanelsProps = {
+  conditionalRender?: boolean
+} & HTMLAttributes<HTMLDivElement>
 
 const TabPanels = forwardRef<HTMLDivElement, TabPanelsProps>(function TabPanels(
-  { children, ...props },
+  { children, conditionalRender, ...props },
   ref,
 ) {
   const { activeTab, tabsId } = useContext(TabsContext)
 
   const Panels = ReactChildren.map(children, (child: ReactElement, $index) => {
-    if (activeTab !== $index) return null
+    if (conditionalRender && activeTab !== $index) return null
     return cloneElement(child, {
       id: `${tabsId}-panel-${$index + 1}`,
       'aria-labelledby': `${tabsId}-tab-${$index + 1}`,
+      hidden: activeTab !== $index,
     })
   })
 

diff --git a/packages/eds-core-react/src/components/Tabs/Tabs.docs.mdx b/packages/eds-core-react/src/components/Tabs/Tabs.docs.mdx
@@ -73,6 +73,8 @@ To navigate using the keyboard use:
 
 Focus outline is only visible when navigating using the keyboard.
 
+The non-active `Tabs.Panels` are by default hidden with `display: none`, but can instead be conditionally rendered by adding the `conditionalRender` prop
+
 <Canvas of={ComponentStories.WithPanels} />
 
 ### With third party routers

diff --git a/packages/eds-core-react/src/components/Tabs/Tabs.stories.tsx b/packages/eds-core-react/src/components/Tabs/Tabs.stories.tsx
@@ -32,6 +32,14 @@ const meta: Meta<typeof Tabs> = {
     Panels: Tabs.Panels,
     Panel: Tabs.Panel,
   },
+  argTypes: {
+    activeTab: {
+      options: [0, 1],
+      control: {
+        type: 'select',
+      },
+    },
+  },
   parameters: {
     docs: {
       page,
@@ -175,7 +183,7 @@ export const WithPanels: StoryFn<TabsProps> = () => {
         <Tabs.Tab disabled>Tab three</Tabs.Tab>
         <Tabs.Tab>Tab four</Tabs.Tab>
       </Tabs.List>
-      <Tabs.Panels>
+      <Tabs.Panels conditionalRender>
         <Tabs.Panel>Panel one</Tabs.Panel>
         <Tabs.Panel>Panel two</Tabs.Panel>
         <Tabs.Panel>Panel three</Tabs.Panel>