♻️ Refactor Chakratabs (#1378)

equinor · Dec 21, 2022 · 16473e0 · 16473e0
1 parent 223045e
commit 16473e0
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 38 deletions.
diff --git a/web/components/src/Tabs/Tab.tsx b/web/components/src/Tabs/Tab.tsx
@@ -1,7 +1,7 @@
 import { forwardRef, CSSProperties } from 'react'
 import styled from 'styled-components'
 import { outlineTemplate, Tokens } from '@utils'
-import { Tab as CTab } from '@chakra-ui/react'
+import { Tab as CTab, TabProps as CTabProps } from '@chakra-ui/react'
 import { Tab as RTab, TabProps as RTabProps } from '@reach/tabs'
 import { Flags } from '../../../common/helpers/datasetHelpers'
 
@@ -26,6 +26,10 @@ const StyledCTab = styled(CTab)`
     color: var(--inverted-text);
   }
 
+  &:active {
+    background: transparent;
+  }
+
   &:focus-visible {
     outline: none;
     ${outlineTemplate(outline)}
@@ -72,8 +76,13 @@ export type TabProps = RTabProps & {
   variant?: string
 }
 
+export type ChakraTabProps = CTabProps & {
+  inverted?: boolean
+  variant?: string
+}
+
 export const Tab = Flags.IS_DEV
-  ? forwardRef<HTMLButtonElement, TabProps>(function CTab(
+  ? forwardRef<HTMLButtonElement, ChakraTabProps>(function CTab(
       { inverted = false, children, variant = 'line', ...rest },
       ref,
     ) {

diff --git a/web/components/src/Tabs/TabList.tsx b/web/components/src/Tabs/TabList.tsx
@@ -1,19 +1,16 @@
 import { forwardRef } from 'react'
-import { TabList as CTabList } from '@chakra-ui/react'
+import { TabList as CTabList, TabListProps as CTabListProps } from '@chakra-ui/react'
 import { TabList as RTabList, TabListProps as RTabListProps } from '@reach/tabs'
 import { Flags } from '../../../common/helpers/datasetHelpers'
 
 export type TabListProps = RTabListProps
 
-export type ChakraTabListProps = {
-  inverted?: boolean
-  children: React.ReactNode
-  variant?: string
-}
+export type ChakraTabListProps = CTabListProps
+
 export const TabList = Flags.IS_DEV
   ? forwardRef<HTMLDivElement, ChakraTabListProps>(function TabList({ children, ...rest }, ref) {
       return (
-        <CTabList ref={ref} {...rest} style={{ border: 'none' }}>
+        <CTabList ref={ref} {...rest} style={{ border: 'none', flexWrap: 'wrap' }}>
           {children}
         </CTabList>
       )

diff --git a/web/components/src/Tabs/TabPanel.tsx b/web/components/src/Tabs/TabPanel.tsx
@@ -1,14 +1,12 @@
 import { forwardRef } from 'react'
 import { TabPanel as RTabPanel, TabPanelProps as RTabPanelProps } from '@reach/tabs'
-import { TabPanel as CTabPanel } from '@chakra-ui/react'
+import { TabPanel as CTabPanel, TabPanelProps as CTabPanelProps } from '@chakra-ui/react'
 import { Flags } from '../../../common/helpers/datasetHelpers'
 
 export type TabPanelProps = RTabPanelProps
 
-export type ChakraTabPanelProps = {
-  inverted?: boolean
-  children: React.ReactNode
-}
+export type ChakraTabPanelProps = CTabPanelProps
+
 export const TabPanel = Flags.IS_DEV
   ? forwardRef<HTMLDivElement, ChakraTabPanelProps>(function TabPanel({ children, ...rest }, ref) {
       return (

diff --git a/web/components/src/Tabs/TabPanels.tsx b/web/components/src/Tabs/TabPanels.tsx
@@ -1,14 +1,12 @@
 import { forwardRef } from 'react'
 import { TabPanels as RTabPanels, TabPanelsProps as RTabPanelsProps } from '@reach/tabs'
-import { TabPanels as CTabPanels } from '@chakra-ui/react'
+import { TabPanels as CTabPanels, TabPanelsProps as CTabPanelsProps } from '@chakra-ui/react'
 import { Flags } from '../../../common/helpers/datasetHelpers'
 
 export type TabPanelsProps = RTabPanelsProps
 
-export type ChakraTabPanelsProps = {
-  inverted?: boolean
-  children: React.ReactNode
-}
+export type ChakraTabPanelsProps = CTabPanelsProps
+
 export const TabPanels = Flags.IS_DEV
   ? forwardRef<HTMLDivElement, ChakraTabPanelsProps>(function TabPanels({ children, ...rest }, ref) {
       return (

diff --git a/web/components/src/Tabs/Tabs.tsx b/web/components/src/Tabs/Tabs.tsx
@@ -1,27 +1,10 @@
 import { forwardRef } from 'react'
 
-import { Tabs as CTabs } from '@chakra-ui/react'
+import { Tabs as CTabs, TabsProps as CTabsProps } from '@chakra-ui/react'
 import { Tabs as RTabs, TabsProps as RTabsProps } from '@reach/tabs'
 import { Flags } from '../../../common/helpers/datasetHelpers'
 
-export type ChakraTabsProps = {
-  align?: 'center' | 'end' | 'start'
-  colorScheme?: string
-  defaultIndex?: number
-  direction?: 'ltr' | 'rtl'
-  id?: string
-  index?: number
-  isFitted?: boolean
-  isLazy?: boolean
-  isManual?: boolean
-  lazyBehaviour?: any
-  onChange?: (index: number) => void
-  orientation?: 'horizontal' | 'vertical'
-  size?: 'sm' | 'md' | 'lg'
-  variant?: 'line' | 'enclosed' | 'enclosed-colored' | 'soft-rounded' | 'solid-rounded' | 'unstyled'
-  inverted?: boolean
-  children: React.ReactNode
-}
+export type ChakraTabsProps = CTabsProps
 
 export type TabsProps = RTabsProps