TabPanels: Added FlexboxProps and LayoutProps (#658)

* Added FlexboxProps and LayoutProps to TabPanels

* Refactored TabPanels to use a single interface

Author: Elliot

packages/components/src/Tabs/TabPanels.tsx

@@ -26,21 +26,31 @@
 
 import React, { Children, cloneElement, FC } from 'react'
 import styled from 'styled-components'
-import { SpaceProps, space, reset } from '@looker/design-tokens'
+import {
+  FlexboxProps,
+  LayoutProps,
+  SpaceProps,
+  flexbox,
+  layout,
+  space,
+  reset,
+} from '@looker/design-tokens'
 import omit from 'lodash/omit'
 
-export interface TabPanelsProps extends SpaceProps {
+export interface TabPanelsProps extends FlexboxProps, LayoutProps, SpaceProps {
   children: JSX.Element[]
+  className?: string
   selectedIndex?: number
   onSelectTab?: (index: number) => void
 }
 
-export const TabPanels: FC<TabPanelsProps> = ({
+const Layout: FC<TabPanelsProps> = ({
   children,
+  className,
   selectedIndex,
   ...props
 }) => {
-  const spaceProps = omit(props, 'onSelectTab')
+  const tabPanelsLayoutProps = omit(props, 'onSelectTab')
 
   const clonedChildren = Children.map(
     children,
@@ -51,12 +61,18 @@ export const TabPanels: FC<TabPanelsProps> = ({
     }
   )
 
-  return <Layout {...spaceProps}>{clonedChildren}</Layout>
+  return (
+    <div className={className} {...tabPanelsLayoutProps}>
+      {clonedChildren}
+    </div>
+  )
 }
 
-const Layout = styled.div<SpaceProps>`
+export const TabPanels = styled(Layout)`
   ${reset}
+  ${flexbox}
+  ${layout}
   ${space}
 `
 
-Layout.defaultProps = { pt: 'large' }
+TabPanels.defaultProps = { pt: 'large' }

packages/playground/src/Tabs/TabsDemo.tsx

@@ -0,0 +1,39 @@
+import React, { FC } from 'react'
+import {
+  Tab,
+  Tabs,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Box,
+} from '@looker/components'
+
+export const TabsDemo: FC = () => (
+  <Box height={400} display="flex" flexDirection="column">
+    <Tabs>
+      <TabList>
+        <Tab>height: 100%</Tab>
+        <Tab>height: 200px</Tab>
+      </TabList>
+      <TabPanels flex={1}>
+        <TabPanel>
+          <div
+            style={{
+              backgroundColor: 'lightblue',
+              height: '100%',
+            }}
+          ></div>
+        </TabPanel>
+        <TabPanel>
+          <div
+            style={{
+              backgroundColor: 'coral',
+              height: '200px',
+              width: '100%',
+            }}
+          ></div>
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  </Box>
+)