fix: re-instate icon Tab support, use Tab UI component in document he…

…ader + inspect dialogs
sanity-io · Nov 6, 2023 · 61bfee7 · 61bfee7
1 parent 595fc13
commit 61bfee7
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 22 deletions.
diff --git a/packages/sanity/src/core/form/inputs/ObjectInput/fieldGroups/FieldGroupTabs.tsx b/packages/sanity/src/core/form/inputs/ObjectInput/fieldGroups/FieldGroupTabs.tsx
@@ -44,6 +44,7 @@ const GroupTabs = ({
           aria-controls={`${inputId}-field-group-fields`}
           autoFocus={shouldAutoFocus && group.selected}
           disabled={disabled || group.disabled}
+          icon={group?.icon}
           key={`${inputId}-${group.name}-tab`}
           name={group.name}
           onClick={onClick}

diff --git a/packages/sanity/src/core/form/inputs/ObjectInput/fieldGroups/GroupTab.tsx b/packages/sanity/src/core/form/inputs/ObjectInput/fieldGroups/GroupTab.tsx
@@ -5,6 +5,7 @@ interface GroupType {
   'aria-controls': string
   autoFocus?: boolean
   disabled?: boolean
+  icon?: React.ComponentType
   name: string
   onClick?: (value: string) => void
   selected: boolean
@@ -29,6 +30,7 @@ export const GroupTab = forwardRef(function GroupTab(
       id={`${props.name}-tab`}
       label={props.title}
       ref={ref}
+      size="small"
       {...props}
       onClick={handleClick}
     />

diff --git a/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentHeaderTabs.tsx b/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentHeaderTabs.tsx
@@ -1,7 +1,8 @@
 import React, {useCallback} from 'react'
-import {Tab, TabList} from '@sanity/ui'
+import {TabList} from '@sanity/ui'
 import {useDocumentPane} from '../../useDocumentPane'
 import {usePaneRouter} from '../../../../components'
+import {Tab} from '../../../../../ui'
 
 export function DocumentHeaderTabs() {
   const {activeViewId, paneKey, views} = useDocumentPane()
@@ -15,7 +16,7 @@ export function DocumentHeaderTabs() {
           id={`${paneKey}tab-${view.id}`}
           isActive={activeViewId === view.id}
           key={view.id}
-          label={<>{view.title}</>}
+          label={view.title}
           tabPanelId={tabPanelId}
           viewId={index === 0 ? null : view.id ?? null}
         />
@@ -28,23 +29,25 @@ function DocumentHeaderTab(props: {
   icon?: React.ComponentType | React.ReactNode
   id: string
   isActive: boolean
-  label: React.ReactNode
+  label: string
   tabPanelId: string
   viewId: string | null
 }) {
-  const {isActive, tabPanelId, viewId, ...rest} = props
+  const {icon, id, isActive, label, tabPanelId, viewId} = props
   const {ready} = useDocumentPane()
   const {setView} = usePaneRouter()
   const handleClick = useCallback(() => setView(viewId), [setView, viewId])
 
   return (
     <Tab
-      {...rest} // required to enable <TabList> keyboard navigation
       aria-controls={tabPanelId}
       disabled={!ready}
-      fontSize={1}
-      selected={isActive}
+      icon={icon}
+      id={id}
+      label={label}
       onClick={handleClick}
+      selected={isActive}
+      size="small"
     />
   )
 }
diff --git a/packages/sanity/src/desk/panes/document/inspectDialog/InspectDialog.tsx b/packages/sanity/src/desk/panes/document/inspectDialog/InspectDialog.tsx
@@ -1,8 +1,8 @@
 import {SanityDocument} from '@sanity/types'
-import {Card, Code, Flex, Tab, TabList, TabPanel} from '@sanity/ui'
+import {Card, Code, Flex, TabList, TabPanel} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import JSONInspector from '@rexxars/react-json-inspector'
-import {Dialog} from '../../../../ui'
+import {Dialog, Tab} from '../../../../ui'
 import {DocTitle} from '../../../components'
 import {useDeskToolSetting} from '../../../useDeskToolSetting'
 import {useDocumentPane} from '../useDocumentPane'
@@ -63,15 +63,13 @@ export function InspectDialog(props: InspectDialogProps) {
           <TabList space={1}>
             <Tab
               aria-controls={`${dialogIdPrefix}tabpanel`}
-              fontSize={1}
               id={`${dialogIdPrefix}tab-${VIEW_MODE_PARSED.id}`}
               label={VIEW_MODE_PARSED.title}
               onClick={setParsedViewMode}
               selected={viewMode === VIEW_MODE_PARSED}
             />
             <Tab
               aria-controls={`${dialogIdPrefix}tabpanel`}
-              fontSize={1}
               id={`${dialogIdPrefix}tab-${VIEW_MODE_RAW.id}`}
               label={VIEW_MODE_RAW.title}
               onClick={setRawViewMode}

diff --git a/packages/sanity/src/ui/tab/Tab.tsx b/packages/sanity/src/ui/tab/Tab.tsx
@@ -1,28 +1,25 @@
+/* eslint-disable no-restricted-imports */
 import {Tab as UITab, TabProps as UITabProps} from '@sanity/ui'
 import React, {forwardRef} from 'react'
 
 /**
  * @internal
  *
- * Icons are not supported in the Studio UI <Tab> component.
- * Padding and font size are fixed.
- *
+ * Padding and font sizes are fixed in Studio UI <Tab> components.
  */
 export type TabProps = Pick<
   UITabProps,
-  'id' | 'label' | 'aria-controls' | 'tone' | 'selected' | 'focused'
+  'aria-controls' | 'focused' | 'icon' | 'id' | 'label' | 'selected' | 'tone'
 > & {
   size?: 'default' | 'small'
 }
 
-const smallTabProps = {
+const SMALL_TAB_PROPS = {
   padding: 2,
-  muted: true,
 }
 
-const defaultTabProps = {
+const DEFAULT_TAB_PROPS = {
   padding: 3,
-  muted: true,
 }
 
 /**
@@ -36,17 +33,18 @@ const defaultTabProps = {
 export const Tab = forwardRef(function Tab(
   {
     size = 'default',
-    tone = 'primary',
+    tone = 'default',
     ...props
   }: TabProps & Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'size'>,
   ref: React.ForwardedRef<HTMLButtonElement>,
 ) {
   return (
     <UITab
       {...props}
-      {...(size === 'default' ? defaultTabProps : smallTabProps)}
-      tone={tone}
+      {...(size === 'default' ? DEFAULT_TAB_PROPS : SMALL_TAB_PROPS)}
+      muted
       ref={ref}
+      tone={tone}
     />
   )
 })