<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
penumbra-zone · Jul 26, 2024 · 887e228 · 887e228
1 parent 146d054
commit 887e228
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 54 deletions.
diff --git a/.../ui/src/SegmentedPicker/index.stories.tsx → packages/ui/src/Tabs/index.stories.tsx b/.../ui/src/SegmentedPicker/index.stories.tsx → 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/...ges/ui/src/SegmentedPicker/index.test.tsx → packages/ui/src/Tabs/index.test.tsx b/...ges/ui/src/SegmentedPicker/index.test.tsx → 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 → packages/ui/src/Tabs/index.tsx b/packages/ui/src/SegmentedPicker/index.tsx → 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
@@ -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;
   }