From 4fb90bfaa651db97ba1110d96b72129510f0eb5a Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Thu, 11 Jan 2024 23:55:53 +0000
Subject: [PATCH] fix: simplify and correctly render tool filter tab buttons

---
 src/tool/scheduleFilters/ScheduleFilter.tsx  | 53 ++++++--------------
 src/tool/scheduleFilters/ScheduleFilters.tsx |  6 +--
 2 files changed, 19 insertions(+), 40 deletions(-)

diff --git a/src/tool/scheduleFilters/ScheduleFilter.tsx b/src/tool/scheduleFilters/ScheduleFilter.tsx
index 6693be03..d51fd1e7 100644
--- a/src/tool/scheduleFilters/ScheduleFilter.tsx
+++ b/src/tool/scheduleFilters/ScheduleFilter.tsx
@@ -1,6 +1,5 @@
-import {StateLink} from 'sanity/router'
-import {red, white} from '@sanity/color'
-import {Box, Flex, Tab, Text} from '@sanity/ui'
+import {useStateLink} from 'sanity/router'
+import {Button, Inline, Text} from '@sanity/ui'
 import React from 'react'
 import {SCHEDULE_STATE_DICTIONARY} from '../../constants'
 import {Schedule, ScheduleState} from '../../types'
@@ -13,54 +12,34 @@ interface Props {
 }
 
 const ScheduleFilter = (props: Props) => {
-  const {selected, schedules, state, ...rest} = props
+  const {selected, schedules, state} = props
 
   const count = useFilteredSchedules(schedules, state).length
 
   const hasItems = count > 0
 
   const critical = state === 'cancelled'
-  const criticalCount = state === 'cancelled' && hasItems
+
+  const {href, onClick} = useStateLink({
+    state: {state},
+  })
 
   return (
-    <Tab
-      // @ts-expect-error actually, this as property works but is missing in the typings
-      as={StateLink}
-      id={state}
-      paddingX={1}
-      paddingY={2}
+    <Button
+      as="a"
+      href={href}
+      mode="bleed"
+      onClick={onClick}
       selected={selected}
-      state={{state}}
       tone={critical ? 'critical' : 'default'}
-      {...rest}
     >
-      <Flex align="center" paddingX={1}>
+      <Inline space={2}>
         <Text size={2} weight="medium">
           {SCHEDULE_STATE_DICTIONARY[state].title}
         </Text>
-        {/*
-        HACK: when there are no items, we still render in with hidden visibility to
-        preserve correct tab height / vertical padding.
-        */}
-        <Box
-          marginLeft={count > 0 ? 2 : 0}
-          style={{
-            background: criticalCount ? red[500].hex : 'transparent',
-            color: criticalCount ? white.hex : 'inherit',
-            border: 'none',
-            boxShadow: 'none',
-            borderRadius: '2px',
-            visibility: hasItems ? 'visible' : 'hidden',
-            padding: hasItems ? '0.25em 0.4em' : '0.25em 0',
-            width: hasItems ? 'auto' : 0,
-          }}
-        >
-          <Text size={1} style={{color: criticalCount ? white.hex : 'inherit'}}>
-            {count}
-          </Text>
-        </Box>
-      </Flex>
-    </Tab>
+        {hasItems && <Text size={1}>{count}</Text>}
+      </Inline>
+    </Button>
   )
 }
 
diff --git a/src/tool/scheduleFilters/ScheduleFilters.tsx b/src/tool/scheduleFilters/ScheduleFilters.tsx
index 0520e20b..c126de78 100644
--- a/src/tool/scheduleFilters/ScheduleFilters.tsx
+++ b/src/tool/scheduleFilters/ScheduleFilters.tsx
@@ -1,6 +1,6 @@
 import {useRouter} from 'sanity/router'
 import {CheckmarkIcon, CloseIcon, SelectIcon} from '@sanity/icons'
-import {Box, Button, Label, Menu, MenuButton, MenuItem, TabList} from '@sanity/ui'
+import {Box, Button, Flex, Label, Menu, MenuButton, MenuItem} from '@sanity/ui'
 import {format} from 'date-fns'
 import React from 'react'
 import {SCHEDULE_FILTERS, SCHEDULE_STATE_DICTIONARY} from '../../constants'
@@ -86,7 +86,7 @@ export const ScheduleFilters = (props: ScheduleFiltersProps) => {
         )}
 
         {scheduleState && (
-          <TabList space={2}>
+          <Flex gap={2}>
             {SCHEDULE_FILTERS.map((filter) => (
               <ScheduleFilter
                 key={filter}
@@ -95,7 +95,7 @@ export const ScheduleFilters = (props: ScheduleFiltersProps) => {
                 state={filter}
               />
             ))}
-          </TabList>
+          </Flex>
         )}
       </Box>
     </>