Loosened up type checking for Tabs components (#541)

* Loosened up type checking for Tabs children * Removed console.log 🙈
equinor · Sep 4, 2020 · 21c3096 · 21c3096
1 parent b975b1f
commit 21c3096
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 14 deletions.
diff --git a/apps/storybook-react/stories/Tabs.stories.jsx b/apps/storybook-react/stories/Tabs.stories.jsx
@@ -201,3 +201,45 @@ export const tabsAndInputInPanel = () => {
     </div>
   )
 }
+
+const StyledTab = styled(Tab)`
+  background: pink;
+`
+
+const StyledTabPanel = styled(TabPanel)`
+  padding: 32px;
+  background: peachpuff;
+`
+export const tabsWithStyledComponents = () => {
+  const [activeTab, setActiveTab] = useState(1)
+
+  const handleChange = (index) => {
+    setActiveTab(index)
+  }
+
+  const items = [
+    { name: 'Tab 1', value: 'Tab 1 body as plain text' },
+    { name: 'Tab 2', value: <Typography>Tab 2 body as typography</Typography> },
+    { name: 'Tab 3', value: <div>Tab 3 as div</div> },
+  ]
+
+  return (
+    <Wrapper>
+      <Typography variant="h1">
+        Tab with panels rendered from collection
+      </Typography>
+      <Tabs activeTab={activeTab} onChange={handleChange}>
+        <TabList>
+          {items.map(({ name }) => (
+            <StyledTab key={name}>{name}</StyledTab>
+          ))}
+        </TabList>
+        <TabPanels>
+          {items.map(({ name, value }) => (
+            <StyledTabPanel key={name}>{value}</StyledTabPanel>
+          ))}
+        </TabPanels>
+      </Tabs>
+    </Wrapper>
+  )
+}
diff --git a/libraries/core-react/src/Tabs/TabList.jsx b/libraries/core-react/src/Tabs/TabList.jsx
@@ -9,7 +9,6 @@ import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { useCombinedRefs } from '../_common/useCombinedRefs'
 import { TabsContext } from './Tabs.context'
-import { Tab } from './Tab'
 
 const variants = {
   fullWidth: 'minmax(1%, 360px)',
@@ -96,18 +95,16 @@ const TabList = forwardRef(function TabsList({ children, ...props }, ref) {
   )
 })
 
-const tabType = PropTypes.shape({
-  type: PropTypes.oneOf([Tab]),
-})
-
 TabList.propTypes = {
   /** @ignore */
   className: PropTypes.string,
   /** Sets the width of the tabs */
   variant: PropTypes.oneOf(['fullWidth', 'minWidth']),
   /** @ignore */
-  children: PropTypes.oneOfType([PropTypes.arrayOf(tabType), tabType])
-    .isRequired,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.element),
+    PropTypes.element,
+  ]).isRequired,
 }
 
 TabList.defaultProps = {

diff --git a/libraries/core-react/src/Tabs/TabPanels.jsx b/libraries/core-react/src/Tabs/TabPanels.jsx
@@ -1,7 +1,6 @@
 import React, { forwardRef, useContext } from 'react'
 import PropTypes from 'prop-types'
 import { TabsContext } from './Tabs.context'
-import { TabPanel } from './TabPanel'
 
 const TabPanels = forwardRef(function TabPanels({ children, ...props }, ref) {
   const { activeTab, tabsId } = useContext(TabsContext)
@@ -20,16 +19,14 @@ const TabPanels = forwardRef(function TabPanels({ children, ...props }, ref) {
   )
 })
 
-const panelType = PropTypes.shape({
-  type: PropTypes.oneOf([TabPanel]),
-})
-
 TabPanels.propTypes = {
   /** @ignore */
   className: PropTypes.string,
   /** @ignore */
-  children: PropTypes.oneOfType([PropTypes.arrayOf(panelType), panelType])
-    .isRequired,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.element),
+    PropTypes.element,
+  ]).isRequired,
 }
 
 TabPanels.defaultProps = {