🎨 Tabs to Radix ui and improved accessibility #2679

sanityv3/schemas/textSnippets.ts

@@ -816,6 +816,11 @@ const snippets: textSnippet = {
     defaultValue: `Please don't enter any personal information`,
     group: groups.common,
   },
+  categories: {
+    title: 'Categories',
+    defaultValue: 'Categories',
+    group: groups.common,
+  },
 }
 
 type textSnippetGroup = { title: string; hidden?: boolean }

web/components/src/index.ts

@@ -14,6 +14,5 @@ export * from './Accordion'
 export * from './Menu'
 export * from './Heading'
 export * from './Table'
-export * from './Tabs'
 export * from './Form'
 export * from './Breadcrumbs'

web/core/Tabs/Tab.tsx

@@ -0,0 +1,37 @@
+import { forwardRef } from 'react'
+import * as RadixTabs from '@radix-ui/react-tabs'
+import envisTwMerge from '../../twMerge'
+
+export type TabProps = RadixTabs.TabsTriggerProps
+
+export const Tab = forwardRef<HTMLButtonElement, TabProps>(function Tab({ children, className = '', ...rest }, ref) {
+  return (
+    <RadixTabs.Trigger
+      ref={ref}
+      className={envisTwMerge(
+        `text-slate-80
+        dark:text-white-100
+        bg-transparent
+        py-2
+        pl-3
+        pr-8
+        border-0
+        hover:underline
+        underline-offset-2
+        decoration-1
+        border-slate-80
+        dark:border-white-100
+        hover:cursor-pointer
+        data-active:font-medium
+        data-active:border-b-2
+        focus:envis-outline
+        dark:focus:envis-outline-invert
+    `,
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </RadixTabs.Trigger>
+  )
+})

web/core/Tabs/TabList.tsx

@@ -0,0 +1,19 @@
+import { forwardRef } from 'react'
+import * as RadixTabs from '@radix-ui/react-tabs'
+import envisTwMerge from '../../twMerge'
+
+export type TabListProps = {
+  /* Provides a label that describes the purpose of the set of tabs. */
+  'aria-label': string
+} & RadixTabs.TabsListProps
+
+export const TabList = forwardRef<HTMLDivElement, TabListProps>(function TabList(
+  { 'aria-label': ariaLabel, children, className = '', ...rest },
+  ref,
+) {
+  return (
+    <RadixTabs.List ref={ref} className={envisTwMerge(`flex flex-wrap`, className)} aria-label={ariaLabel} {...rest}>
+      {children}
+    </RadixTabs.List>
+  )
+})

web/core/Tabs/TabPanel.tsx

@@ -0,0 +1,23 @@
+import { forwardRef } from 'react'
+import * as RadixTabs from '@radix-ui/react-tabs'
+import envisTwMerge from '../../twMerge'
+
+export type TabPanelProps = RadixTabs.TabsContentProps
+
+export const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(function TabPanel(
+  { className = '', children, ...rest },
+  ref,
+) {
+  return (
+    <RadixTabs.Content
+      ref={ref}
+      className={envisTwMerge(
+        `focus-visible:envis-outline dark:focus-visible:envis-outline-invert outline-offset-4`,
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </RadixTabs.Content>
+  )
+})

web/components/src/Tabs/Tabs.tsx → web/core/Tabs/Tabs.tsx

@@ -1,12 +1,12 @@
 import { forwardRef } from 'react'
-import { Tabs as CTabs, TabsProps as CTabsProps } from '@chakra-ui/react'
+import * as RadixTabs from '@radix-ui/react-tabs'
 
-export type TabsProps = CTabsProps
+export type TabsProps = RadixTabs.TabsProps
 
 export const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs({ children, ...rest }, ref) {
   return (
-    <CTabs ref={ref} {...rest}>
+    <RadixTabs.Root ref={ref} {...rest}>
       {children}
-    </CTabs>
+    </RadixTabs.Root>
   )
 })

web/components/src/Tabs/index.ts → web/core/Tabs/index.ts

@@ -2,21 +2,18 @@ import { Tabs as TabsWrapper, TabsProps } from './Tabs'
 import { TabList, TabListProps } from './TabList'
 import { Tab, TabProps } from './Tab'
 import { TabPanel, TabPanelProps } from './TabPanel'
-import { TabPanels, TabPanelsProps } from './TabPanels'
 
 type TabsCompoundProps = typeof TabsWrapper & {
   TabList: typeof TabList
   Tab: typeof Tab
   TabPanel: typeof TabPanel
-  TabPanels: typeof TabPanels
 }
 
 const Tabs = TabsWrapper as TabsCompoundProps
 
 Tabs.TabList = TabList
 Tabs.Tab = Tab
 Tabs.TabPanel = TabPanel
-Tabs.TabPanels = TabPanels
 
 export { Tabs }
-export type { TabsProps, TabListProps, TabProps, TabPanelProps, TabPanelsProps }
+export type { TabsProps, TabListProps, TabProps, TabPanelProps }

web/package.json

@@ -35,12 +35,13 @@
     "@portabletext/react": "^3.1.0",
     "@portabletext/to-html": "^2.0.13",
     "@portabletext/types": "^2.0.13",
+    "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-tabs": "^1.1.1",
     "@react-spring/web": "^9.4.5",
     "@sanity/asset-utils": "^1.3.0",
     "@sanity/client": "5.4.2",
     "@sanity/image-url": "^1.0.2",
     "@sanity/webhook": "^2.0.0",
-    "@radix-ui/react-accordion": "^1.2.0",
     "algoliasearch": "^4.16.0",
     "date-fns": "^2.29.3",
     "date-fns-tz": "^2.0.0",
@@ -84,19 +85,19 @@
     "@tailwindcss/typography": "^0.5.10",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.0.0",
+    "@types/easy-soap-request": "^4.1.1",
     "@types/http-proxy": "^1.17.10",
     "@types/jest": "^29.5.7",
     "@types/node": "^18.14.9999",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-instantsearch": "^6.10.1",
-    "@types/testing-library__jest-dom": "^5.14.5",
-    "@types/easy-soap-request": "^4.1.1",
+    "@types/react-transition-group": "^4.4.10",
     "@types/styled-components": "^5.1.26",
+    "@types/testing-library__jest-dom": "^5.14.5",
     "@types/uuid": "^8.3.4",
     "@types/video.js": "^7.3.57",
     "@types/xml2js": "^0.4.11",
-    "@types/react-transition-group": "^4.4.10",
     "autoprefixer": "^10.4.17",
     "babel-plugin-styled-components": "^2.1.1",
     "jest": "^28.1.0",