From 887e2283798e94ce1252fcb3f5801d4bce8b048a Mon Sep 17 00:00:00 2001
From: Jesse Pinho <jesse@jessepinho.com>
Date: Fri, 26 Jul 2024 09:03:17 -0700
Subject: [PATCH] `<SegmentedPicker />`: Use Radix UI's Tabs component under
 the hood, and rename to `<Tabs />` (#1543)

* Use Radix UI's Tabs component under the hood

* Tweak types

* Tweak style utils

* Remove unneeded code for now

* Rename to Tabs
---
 .../index.stories.tsx                         | 11 ++-
 .../{SegmentedPicker => Tabs}/index.test.tsx  |  8 +-
 .../src/{SegmentedPicker => Tabs}/index.tsx   | 84 +++++++++----------
 packages/ui/src/utils/button.ts               |  7 +-
 4 files changed, 56 insertions(+), 54 deletions(-)
 rename packages/ui/src/{SegmentedPicker => Tabs}/index.stories.tsx (75%)
 rename packages/ui/src/{SegmentedPicker => Tabs}/index.test.tsx (89%)
 rename packages/ui/src/{SegmentedPicker => Tabs}/index.tsx (55%)

diff --git a/packages/ui/src/SegmentedPicker/index.stories.tsx b/packages/ui/src/Tabs/index.stories.tsx
similarity index 75%
rename from packages/ui/src/SegmentedPicker/index.stories.tsx
rename to packages/ui/src/Tabs/index.stories.tsx
index feeadeabe1..055c3d0d4c 100644
--- a/packages/ui/src/SegmentedPicker/index.stories.tsx
+++ b/packages/ui/src/Tabs/index.stories.tsx
@@ -1,11 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useArgs } from '@storybook/preview-api';
 
-import { SegmentedPicker } from '.';
+import { Tabs } from '.';
 
-const meta: Meta<typeof SegmentedPicker> = {
-  component: SegmentedPicker,
-  title: 'SegmentedPicker',
+const meta: Meta<typeof Tabs> = {
+  component: Tabs,
   tags: ['autodocs', '!dev'],
   argTypes: {
     value: { control: false },
@@ -15,7 +14,7 @@ const meta: Meta<typeof SegmentedPicker> = {
 };
 export default meta;
 
-type Story = StoryObj<typeof SegmentedPicker>;
+type Story = StoryObj<typeof Tabs>;
 
 export const Basic: Story = {
   args: {
@@ -34,6 +33,6 @@ export const Basic: Story = {
 
     const onChange = (value: { toString: () => string }) => updateArgs({ value });
 
-    return <SegmentedPicker {...props} onChange={onChange} />;
+    return <Tabs {...props} onChange={onChange} />;
   },
 };
diff --git a/packages/ui/src/SegmentedPicker/index.test.tsx b/packages/ui/src/Tabs/index.test.tsx
similarity index 89%
rename from packages/ui/src/SegmentedPicker/index.test.tsx
rename to packages/ui/src/Tabs/index.test.tsx
index d62cd34ddc..dbc82ea583 100644
--- a/packages/ui/src/SegmentedPicker/index.test.tsx
+++ b/packages/ui/src/Tabs/index.test.tsx
@@ -1,12 +1,12 @@
 import { describe, expect, it, vi } from 'vitest';
-import { SegmentedPicker } from '.';
+import { Tabs } from '.';
 import { fireEvent, render } from '@testing-library/react';
 import { ThemeProvider } from '../ThemeProvider';
 
-describe('<SegmentedPicker />', () => {
+describe('<Tabs />', () => {
   it('renders a button for each of the `options`', () => {
     const { queryByText } = render(
-      <SegmentedPicker
+      <Tabs
         value='one'
         options={[
           { label: 'One', value: 'one' },
@@ -24,7 +24,7 @@ describe('<SegmentedPicker />', () => {
   it("calls the `onChange` handler with the clicked option's value when clicked", () => {
     const onChange = vi.fn();
     const { getByText } = render(
-      <SegmentedPicker
+      <Tabs
         value='one'
         options={[
           { label: 'One', value: 'one' },
diff --git a/packages/ui/src/SegmentedPicker/index.tsx b/packages/ui/src/Tabs/index.tsx
similarity index 55%
rename from packages/ui/src/SegmentedPicker/index.tsx
rename to packages/ui/src/Tabs/index.tsx
index 7df80e5827..d88e707c33 100644
--- a/packages/ui/src/SegmentedPicker/index.tsx
+++ b/packages/ui/src/Tabs/index.tsx
@@ -3,6 +3,7 @@ import { tab } from '../utils/typography';
 import { motion } from 'framer-motion';
 import { useId } from 'react';
 import { buttonInteractions } from '../utils/button';
+import * as RadixTabs from '@radix-ui/react-tabs';
 
 const TEN_PERCENT_OPACITY_IN_HEX = '1a';
 
@@ -25,7 +26,7 @@ const outlineColorByActionType: Record<ActionType, keyof DefaultTheme['color']['
   unshield: 'unshieldFocusOutline',
 };
 
-const SegmentButton = styled.button<{
+const Tab = styled.button<{
   $actionType: ActionType;
   $getFocusOutlineColor: (theme: DefaultTheme) => string;
   $getBorderRadius: (theme: DefaultTheme) => string;
@@ -68,37 +69,27 @@ const SelectedIndicator = styled(motion.div)`
   z-index: -1;
 `;
 
-export interface SegmentedPickerOption<ValueType> {
-  /**
-   * The value to pass to the `onChange` handler when clicked. Must be unique
-   * across all segments, and must be either a string, number, or an object with
-   * a `.toString()` method so that it can be used as a React key.
-   */
-  value: ValueType;
+export interface TabsTab {
+  value: string;
   label: string;
   disabled?: boolean;
 }
 
-export interface SegmentedPickerProps<ValueType extends { toString: () => string }> {
-  /**
-   * The currently selected value. Will be compared to the `options`' `value`
-   * property using `===` to determine which segment is selected.
-   */
-  value: ValueType;
-  onChange: (value: ValueType) => void;
-  options: SegmentedPickerOption<ValueType>[];
+export interface TabsProps {
+  value: string;
+  onChange: (value: string) => void;
+  options: TabsTab[];
   actionType?: ActionType;
 }
 
 /**
- * Renders a segmented picker where only one option can be selected at a time.
- * Functionally equivalent to a `<select>` element or a set of radio buttons,
- * but looks nicer when you only have a few options to choose from. (Probably
- * shouldn't be used with more than 5 options.)
+ * Use tabs for switching between related pages or views.
+ *
+ * Built atop Radix UI's `<Tabs />` component, so it's fully accessible and
+ * supports keyboard navigation.
  *
- * @example
  * ```TSX
- * <SegmentedPicker
+ * <Tabs
  *   value={value}
  *   onChange={setValue}
  *   options={[
@@ -109,29 +100,36 @@ export interface SegmentedPickerProps<ValueType extends { toString: () => string
  * />
  * ```
  */
-export const SegmentedPicker = <ValueType extends { toString: () => string }>({
-  value,
-  onChange,
-  options,
-  actionType = 'default',
-}: SegmentedPickerProps<ValueType>) => {
+export const Tabs = ({ value, onChange, options, actionType = 'default' }: TabsProps) => {
   const layoutId = useId();
 
   return (
-    <Root>
-      {options.map(option => (
-        <SegmentButton
-          key={option.value.toString()}
-          onClick={() => onChange(option.value)}
-          $actionType={actionType}
-          disabled={option.disabled}
-          $getFocusOutlineColor={theme => theme.color.action[outlineColorByActionType[actionType]]}
-          $getBorderRadius={theme => theme.borderRadius.xs}
-        >
-          {value === option.value && <SelectedIndicator layout layoutId={layoutId} />}
-          {option.label}
-        </SegmentButton>
-      ))}
-    </Root>
+    <RadixTabs.Root value={value} onValueChange={onChange}>
+      <RadixTabs.List asChild>
+        <Root>
+          {options.map(option => (
+            <RadixTabs.Trigger
+              value={option.value}
+              key={option.value.toString()}
+              disabled={option.disabled}
+              asChild
+            >
+              <Tab
+                onClick={() => onChange(option.value)}
+                disabled={option.disabled}
+                $actionType={actionType}
+                $getFocusOutlineColor={theme =>
+                  theme.color.action[outlineColorByActionType[actionType]]
+                }
+                $getBorderRadius={theme => theme.borderRadius.xs}
+              >
+                {value === option.value && <SelectedIndicator layout layoutId={layoutId} />}
+                {option.label}
+              </Tab>
+            </RadixTabs.Trigger>
+          ))}
+        </Root>
+      </RadixTabs.List>
+    </RadixTabs.Root>
   );
 };
diff --git a/packages/ui/src/utils/button.ts b/packages/ui/src/utils/button.ts
index 487c60cfb4..58209e26ff 100644
--- a/packages/ui/src/utils/button.ts
+++ b/packages/ui/src/utils/button.ts
@@ -31,10 +31,15 @@ const focusOutline = css<{
    * disabled button, the overlay of the disabled button would be above the
    * outline, making the outline appear to be partly cut off.
    */
-  &:focus::after {
+  &:focus-within {
+    outline: none;
+  }
+
+  &:focus-within::after {
     outline-color: ${props => props.$getFocusOutlineColor(props.theme)};
   }
 
+  &:disabled,
   &:disabled::after {
     pointer-events: none;
   }