🚩 Remove feature flag on tabs #1378

web/components/src/Tabs/Tab.tsx

@@ -2,12 +2,10 @@ import { forwardRef, CSSProperties } from 'react'
 import styled from 'styled-components'
 import { outlineTemplate, Tokens } from '@utils'
 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'
 
 const { outline } = Tokens
 
-const StyledCTab = styled(CTab)`
+const StyledTab = styled(CTab)`
   color: var(--font-color);
   background: transparent;
   border: none;
@@ -41,83 +39,32 @@ const StyledCTab = styled(CTab)`
   }
 `
 
-const StyledTab = styled(RTab)`
-  color: var(--font-color);
-  background: transparent;
-  border: none;
-
-  padding: var(--space-xSmall) 0;
-  /* Not sure about this one, but some spaces for tab components that wrap multiple lines */
-  margin-bottom: var(--space-small);
-  :not(:last-child) {
-    margin-right: var(--space-medium);
-  }
-  &:hover {
-    cursor: pointer;
-  }
-  /* If the text is used inside a inverted component, the text colour must also be inverted */
-  .inverted-background & {
-    color: var(--inverted-text);
-  }
-
-  &:focus-visible {
-    outline: none;
-    ${outlineTemplate(outline)}
-    outline-color: var(--mist-blue-100);
-  }
-
-  &[data-selected] {
-    border-bottom: 2px solid;
-  }
-`
-
-export type TabProps = RTabProps & {
-  inverted?: boolean
-  variant?: string
-}
-
-export type ChakraTabProps = CTabProps & {
+export type TabProps = CTabProps & {
   inverted?: boolean
   variant?: string
 }
 
-export const Tab = Flags.IS_DEV
-  ? forwardRef<HTMLButtonElement, ChakraTabProps>(function CTab(
-      { inverted = false, children, variant = 'line', ...rest },
-      ref,
-    ) {
-      return (
-        <StyledCTab
-          ref={ref}
-          _selected={{
-            '--font-color': inverted ? 'var(--inverted-text)' : 'var(--default-text)',
-            borderColor: inverted ? 'var(--inverted-text)' : 'var(--default-text)',
-            borderBottom: '2px solid',
-          }}
-          variant={variant}
-          {...rest}
-          style={
-            {
-              '--font-color': inverted ? 'var(--inverted-text)' : 'var(--default-text)',
-            } as CSSProperties
-          }
-        >
-          {children}
-        </StyledCTab>
-      )
-    })
-  : forwardRef<HTMLButtonElement, TabProps>(function Tab({ inverted = false, children, ...rest }, ref) {
-      return (
-        <StyledTab
-          ref={ref}
-          {...rest}
-          style={
-            {
-              '--font-color': inverted ? 'var(--inverted-text)' : 'var(--default-text)',
-            } as CSSProperties
-          }
-        >
-          {children}
-        </StyledTab>
-      )
-    })
+export const Tab = forwardRef<HTMLButtonElement, TabProps>(function CTab(
+  { inverted = false, children, variant = 'line', ...rest },
+  ref,
+) {
+  return (
+    <StyledTab
+      ref={ref}
+      _selected={{
+        '--font-color': inverted ? 'var(--inverted-text)' : 'var(--default-text)',
+        borderColor: inverted ? 'var(--inverted-text)' : 'var(--default-text)',
+        borderBottom: '2px solid',
+      }}
+      variant={variant}
+      {...rest}
+      style={
+        {
+          '--font-color': inverted ? 'var(--inverted-text)' : 'var(--default-text)',
+        } as CSSProperties
+      }
+    >
+      {children}
+    </StyledTab>
+  )
+})

web/components/src/Tabs/TabList.tsx

@@ -1,24 +1,12 @@
 import { forwardRef } from '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 TabListProps = CTabListProps
 
-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', flexWrap: 'wrap' }}>
-          {children}
-        </CTabList>
-      )
-    })
-  : forwardRef<HTMLDivElement, TabListProps>(function TabList({ children, ...rest }, ref) {
-      return (
-        <RTabList ref={ref} {...rest}>
-          {children}
-        </RTabList>
-      )
-    })
+export const TabList = forwardRef<HTMLDivElement, TabListProps>(function TabList({ children, ...rest }, ref) {
+  return (
+    <CTabList ref={ref} {...rest} style={{ border: 'none', flexWrap: 'wrap' }}>
+      {children}
+    </CTabList>
+  )
+})

web/components/src/Tabs/TabPanel.tsx

@@ -1,24 +1,12 @@
 import { forwardRef } from 'react'
-import { TabPanel as RTabPanel, TabPanelProps as RTabPanelProps } from '@reach/tabs'
 import { TabPanel as CTabPanel, TabPanelProps as CTabPanelProps } from '@chakra-ui/react'
-import { Flags } from '../../../common/helpers/datasetHelpers'
 
-export type TabPanelProps = RTabPanelProps
+export type TabPanelProps = CTabPanelProps
 
-export type ChakraTabPanelProps = CTabPanelProps
-
-export const TabPanel = Flags.IS_DEV
-  ? forwardRef<HTMLDivElement, ChakraTabPanelProps>(function TabPanel({ children, ...rest }, ref) {
-      return (
-        <CTabPanel ref={ref} {...rest}>
-          {children}
-        </CTabPanel>
-      )
-    })
-  : forwardRef<HTMLDivElement, TabPanelProps>(function TabPanel({ children, ...rest }, ref) {
-      return (
-        <RTabPanel ref={ref} {...rest}>
-          {children}
-        </RTabPanel>
-      )
-    })
+export const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(function TabPanel({ children, ...rest }, ref) {
+  return (
+    <CTabPanel ref={ref} {...rest}>
+      {children}
+    </CTabPanel>
+  )
+})

web/components/src/Tabs/TabPanels.tsx

@@ -1,24 +1,12 @@
 import { forwardRef } from 'react'
-import { TabPanels as RTabPanels, TabPanelsProps as RTabPanelsProps } from '@reach/tabs'
 import { TabPanels as CTabPanels, TabPanelsProps as CTabPanelsProps } from '@chakra-ui/react'
-import { Flags } from '../../../common/helpers/datasetHelpers'
 
-export type TabPanelsProps = RTabPanelsProps
+export type TabPanelsProps = CTabPanelsProps
 
-export type ChakraTabPanelsProps = CTabPanelsProps
-
-export const TabPanels = Flags.IS_DEV
-  ? forwardRef<HTMLDivElement, ChakraTabPanelsProps>(function TabPanels({ children, ...rest }, ref) {
-      return (
-        <CTabPanels ref={ref} {...rest}>
-          {children}
-        </CTabPanels>
-      )
-    })
-  : forwardRef<HTMLDivElement, TabPanelsProps>(function TabPanels({ children, ...rest }, ref) {
-      return (
-        <RTabPanels ref={ref} {...rest}>
-          {children}
-        </RTabPanels>
-      )
-    })
+export const TabPanels = forwardRef<HTMLDivElement, TabPanelsProps>(function TabPanels({ children, ...rest }, ref) {
+  return (
+    <CTabPanels ref={ref} {...rest}>
+      {children}
+    </CTabPanels>
+  )
+})

web/components/src/Tabs/Tabs.tsx

@@ -1,25 +1,12 @@
 import { forwardRef } from '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 = CTabsProps
 
-export type TabsProps = RTabsProps
+export type TabsProps = CTabsProps
 
-export const Tabs = Flags.IS_DEV
-  ? forwardRef<HTMLDivElement, ChakraTabsProps>(function Tabs({ children, ...rest }, ref) {
-      return (
-        <CTabs ref={ref} {...rest}>
-          {children}
-        </CTabs>
-      )
-    })
-  : forwardRef<HTMLDivElement, TabsProps>(function Tabs({ children, ...rest }, ref) {
-      return (
-        <RTabs ref={ref} {...rest}>
-          {children}
-        </RTabs>
-      )
-    })
+export const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs({ children, ...rest }, ref) {
+  return (
+    <CTabs ref={ref} {...rest}>
+      {children}
+    </CTabs>
+  )
+})