fix: support padded tabs (#330)

hcopp · web-flow · commit 8cd384c36265 · 2026-01-28T10:26:51.000-05:00
* fix: support padded tabs

* Add stories

* Update tests

* Simplify logic on mobile

* Bump versions

* Bump version
diff --git a/packages/common/CHANGELOG.md b/packages/common/CHANGELOG.md
@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.39.1 ((1/28/2026, 06:48 AM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.39.0 ((1/27/2026, 11:17 AM PST))
 
 This is an artificial version bump with no new change.
diff --git a/packages/common/package.json b/packages/common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-common",
-  "version": "8.39.0",
+  "version": "8.39.1",
   "description": "Coinbase Design System - Common",
   "repository": {
     "type": "git",
diff --git a/packages/mcp-server/CHANGELOG.md b/packages/mcp-server/CHANGELOG.md
@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.39.1 ((1/28/2026, 06:48 AM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.39.0 ((1/27/2026, 11:17 AM PST))
 
 This is an artificial version bump with no new change.
diff --git a/packages/mcp-server/package.json b/packages/mcp-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mcp-server",
-  "version": "8.39.0",
+  "version": "8.39.1",
   "description": "Coinbase Design System - MCP Server",
   "repository": {
     "type": "git",
diff --git a/packages/mobile-visualization/CHANGELOG.md b/packages/mobile-visualization/CHANGELOG.md
@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 3.4.0-beta.15 (1/27/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix padding on PeriodSelector. [[#330](https://github.com/coinbase/cds/pull/330)]
+
 ## 3.4.0-beta.14 (1/22/2026 PST)
 
 #### 🚀 Updates
diff --git a/packages/mobile-visualization/package.json b/packages/mobile-visualization/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile-visualization",
-  "version": "3.4.0-beta.14",
+  "version": "3.4.0-beta.15",
   "description": "Coinbase Design System - Mobile Visualization Native",
   "repository": {
     "type": "git",
diff --git a/packages/mobile-visualization/src/chart/PeriodSelector.tsx b/packages/mobile-visualization/src/chart/PeriodSelector.tsx
@@ -20,7 +20,7 @@ export const PeriodSelectorActiveIndicator = ({
   borderRadius = 1000,
 }: TabsActiveIndicatorProps) => {
   const theme = useTheme();
-  const { width, height, x } = activeTabRect;
+  const { width, height, x, y } = activeTabRect;
 
   // Get the target background color
   const backgroundColorKey = background as keyof typeof theme.color;
@@ -31,7 +31,7 @@ export const PeriodSelectorActiveIndicator = ({
   const previousColor = React.useRef(targetColor);
 
   // Combined animated value for position, size, and color
-  const newAnimatedValues = { x, width, backgroundColor: targetColor };
+  const newAnimatedValues = { x, y, width, backgroundColor: targetColor };
   const animatedValues = useSharedValue(newAnimatedValues);
 
   const isFirstRenderWithWidth =
@@ -47,7 +47,7 @@ export const PeriodSelectorActiveIndicator = ({
 
   const animatedStyles = useAnimatedStyle(
     () => ({
-      transform: [{ translateX: animatedValues.value.x }],
+      transform: [{ translateX: animatedValues.value.x }, { translateY: animatedValues.value.y }],
       width: animatedValues.value.width,
       backgroundColor: animatedValues.value.backgroundColor,
     }),
diff --git a/packages/mobile-visualization/src/chart/__stories__/PeriodSelector.stories.tsx b/packages/mobile-visualization/src/chart/__stories__/PeriodSelector.stories.tsx
@@ -52,6 +52,25 @@ const MinWidthPeriodSelectorExample = () => {
   );
 };
 
+const PaddedPeriodSelectorExample = () => {
+  const tabs = [
+    { id: '1W', label: '1W' },
+    { id: '1M', label: '1M' },
+    { id: 'YTD', label: 'YTD' },
+  ];
+  const [activeTab, setActiveTab] = useState<TabValue | null>(tabs[0]);
+  return (
+    <PeriodSelector
+      activeTab={activeTab}
+      gap={2}
+      onChange={(tab) => setActiveTab(tab)}
+      padding={3}
+      tabs={tabs}
+      width="fit-content"
+    />
+  );
+};
+
 const LivePeriodSelectorExample = () => {
   const tabs = useMemo(
     () => [
@@ -285,6 +304,9 @@ export default function All() {
       <Example title="Colored Excluding Live">
         <ColoredExcludingLivePeriodSelectorExample />
       </Example>
+      <Example title="With Padding">
+        <PaddedPeriodSelectorExample />
+      </Example>
     </ExampleScreen>
   );
 }
diff --git a/packages/mobile/CHANGELOG.md b/packages/mobile/CHANGELOG.md
@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.39.1 (1/28/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix padding on Tab components. [[#330](https://github.com/coinbase/cds/pull/330)]
+
 ## 8.39.0 (1/27/2026 PST)
 
 #### 🚀 Updates
diff --git a/packages/mobile/package.json b/packages/mobile/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.39.0",
+  "version": "8.39.1",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
diff --git a/packages/mobile/src/tabs/Tabs.tsx b/packages/mobile/src/tabs/Tabs.tsx
@@ -163,7 +163,7 @@ export const TabsActiveIndicator = ({
   ...props
 }: TabsActiveIndicatorProps) => {
   const previousActiveTabRect = useRef(activeTabRect);
-  const newActiveTabRect = { x: activeTabRect.x, width: activeTabRect.width };
+  const newActiveTabRect = { x: activeTabRect.x, y: activeTabRect.y, width: activeTabRect.width };
   const animatedTabRect = useSharedValue(newActiveTabRect);
   const isFirstRenderWithWidth =
     previousActiveTabRect.current.width === 0 && activeTabRect.width > 0;
@@ -177,7 +177,7 @@ export const TabsActiveIndicator = ({
 
   const animatedBoxStyle = useAnimatedStyle(
     () => ({
-      transform: [{ translateX: animatedTabRect.value.x }],
+      transform: [{ translateX: animatedTabRect.value.x }, { translateY: animatedTabRect.value.y }],
       width: animatedTabRect.value.width,
     }),
     [animatedTabRect],
diff --git a/packages/mobile/src/tabs/__stories__/SegmentedTabs.stories.tsx b/packages/mobile/src/tabs/__stories__/SegmentedTabs.stories.tsx
@@ -192,6 +192,14 @@ const SegmentedTabsScreen = () => (
       tabs={basicSegments}
       title="Scaled"
     />
+    <SegmentedTabsExample
+      defaultActiveTab={basicSegments[0]}
+      gap={2}
+      padding={3}
+      tabs={basicSegments}
+      title="With Padding"
+      width="fit-content"
+    />
   </ExampleScreen>
 );
 
diff --git a/packages/mobile/src/tabs/__stories__/TabNavigation.stories.tsx b/packages/mobile/src/tabs/__stories__/TabNavigation.stories.tsx
@@ -115,6 +115,15 @@ const TabNavigationScreen = () => {
         />
         <Button onPress={randomizeCurrentTabOne}>Select random item</Button>
       </Example>
+      <Example overflow="visible" padding={gutter} title="With Padding">
+        <TabNavigation
+          onChange={setCurrentTabOne}
+          paddingX={3}
+          paddingY={1}
+          tabs={sampleTabs.slice(0, 3)}
+          value={currentTabOne}
+        />
+      </Example>
     </ExampleScreen>
   );
 };
diff --git a/packages/mobile/src/tabs/__tests__/SegmentedTabs.test.tsx b/packages/mobile/src/tabs/__tests__/SegmentedTabs.test.tsx
@@ -92,7 +92,7 @@ describe('SegmentedTabs', () => {
     expect(screen.getByTestId('tabs-active-indicator')).toHaveAnimatedStyle({
       width: 68,
       height: 40,
-      transform: [{ translateX: 0 }],
+      transform: [{ translateX: 0 }, { translateY: 0 }],
     });
   });
 
@@ -132,7 +132,7 @@ describe('SegmentedTabs', () => {
     expect(screen.getByTestId('tabs-active-indicator')).toHaveAnimatedStyle({
       width: 68,
       height: 40,
-      transform: [{ translateX: 68 }],
+      transform: [{ translateX: 68 }, { translateY: 0 }],
     });
   });
 
@@ -180,4 +180,106 @@ describe('SegmentedTabs', () => {
     );
     expect(ref.current).toBeInstanceOf(View);
   });
+
+  it('positions indicator correctly with horizontal padding', () => {
+    const mockPaddedData: ReturnType<typeof useRefMap> = {
+      refs: { current: {} },
+      registerRef: NoopFn,
+      getRef: jest.fn(() => ({
+        measureLayout: jest.fn((_, callback: MeasureOnSuccessCallback) => {
+          callback(20, 0, 68, 40, 0, 0);
+        }),
+      })),
+    };
+    mockUseRefMap(mockPaddedData);
+
+    render(
+      <DefaultThemeProvider>
+        <TabsContext.Provider value={mockApi}>
+          <SegmentedTabs {...exampleProps} paddingX={5} />
+        </TabsContext.Provider>
+      </DefaultThemeProvider>,
+    );
+
+    const tabsContainer = screen.getByTestId(TEST_ID);
+    fireEvent(tabsContainer, 'layout', {
+      nativeEvent: { layout: { x: 0, y: 0, width: 350, height: 40 } },
+    });
+
+    jest.advanceTimersByTime(300);
+
+    expect(screen.getByTestId('tabs-active-indicator')).toHaveAnimatedStyle({
+      width: 68,
+      height: 40,
+      transform: [{ translateX: 20 }, { translateY: 0 }],
+    });
+  });
+
+  it('positions indicator correctly with vertical padding', () => {
+    const mockVerticalPaddedData: ReturnType<typeof useRefMap> = {
+      refs: { current: {} },
+      registerRef: NoopFn,
+      getRef: jest.fn(() => ({
+        measureLayout: jest.fn((_, callback: MeasureOnSuccessCallback) => {
+          callback(0, 8, 68, 40, 0, 0);
+        }),
+      })),
+    };
+    mockUseRefMap(mockVerticalPaddedData);
+
+    render(
+      <DefaultThemeProvider>
+        <TabsContext.Provider value={mockApi}>
+          <SegmentedTabs {...exampleProps} paddingY={2} />
+        </TabsContext.Provider>
+      </DefaultThemeProvider>,
+    );
+
+    const tabsContainer = screen.getByTestId(TEST_ID);
+    fireEvent(tabsContainer, 'layout', {
+      nativeEvent: { layout: { x: 0, y: 0, width: 350, height: 56 } },
+    });
+
+    jest.advanceTimersByTime(300);
+
+    expect(screen.getByTestId('tabs-active-indicator')).toHaveAnimatedStyle({
+      width: 68,
+      height: 40,
+      transform: [{ translateX: 0 }, { translateY: 8 }],
+    });
+  });
+
+  it('positions indicator correctly with both horizontal and vertical padding', () => {
+    const mockBothPaddedData: ReturnType<typeof useRefMap> = {
+      refs: { current: {} },
+      registerRef: NoopFn,
+      getRef: jest.fn(() => ({
+        measureLayout: jest.fn((_, callback: MeasureOnSuccessCallback) => {
+          callback(20, 8, 68, 40, 0, 0);
+        }),
+      })),
+    };
+    mockUseRefMap(mockBothPaddedData);
+
+    render(
+      <DefaultThemeProvider>
+        <TabsContext.Provider value={mockApi}>
+          <SegmentedTabs {...exampleProps} paddingX={5} paddingY={2} />
+        </TabsContext.Provider>
+      </DefaultThemeProvider>,
+    );
+
+    const tabsContainer = screen.getByTestId(TEST_ID);
+    fireEvent(tabsContainer, 'layout', {
+      nativeEvent: { layout: { x: 0, y: 0, width: 350, height: 56 } },
+    });
+
+    jest.advanceTimersByTime(300);
+
+    expect(screen.getByTestId('tabs-active-indicator')).toHaveAnimatedStyle({
+      width: 68,
+      height: 40,
+      transform: [{ translateX: 20 }, { translateY: 8 }],
+    });
+  });
 });
diff --git a/packages/web-visualization/CHANGELOG.md b/packages/web-visualization/CHANGELOG.md
@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 3.4.0-beta.15 (1/27/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix padding on PeriodSelector. [[#330](https://github.com/coinbase/cds/pull/330)]
+
 ## 3.4.0-beta.14 (1/22/2026 PST)
 
 #### 🚀 Updates
diff --git a/packages/web-visualization/package.json b/packages/web-visualization/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web-visualization",
-  "version": "3.4.0-beta.14",
+  "version": "3.4.0-beta.15",
   "description": "Coinbase Design System - Web Sparkline",
   "repository": {
     "type": "git",
diff --git a/packages/web-visualization/src/chart/PeriodSelector.tsx b/packages/web-visualization/src/chart/PeriodSelector.tsx
@@ -36,6 +36,7 @@ export const PeriodSelectorActiveIndicator = memo(
         data-testid="period-selector-active-indicator"
         height={height}
         initial={false}
+        left={0}
         position={position}
         role="none"
         style={{
diff --git a/packages/web-visualization/src/chart/__stories__/PeriodSelector.stories.tsx b/packages/web-visualization/src/chart/__stories__/PeriodSelector.stories.tsx
@@ -67,6 +67,25 @@ const MinWidthPeriodSelectorExample = () => {
   );
 };
 
+const PaddedPeriodSelectorExample = () => {
+  const tabs = [
+    { id: '1W', label: '1W' },
+    { id: '1M', label: '1M' },
+    { id: 'YTD', label: 'YTD' },
+  ];
+  const [activeTab, setActiveTab] = useState<TabValue | null>(tabs[0]);
+  return (
+    <PeriodSelector
+      activeTab={activeTab}
+      gap={2}
+      onChange={(tab) => setActiveTab(tab)}
+      padding={3}
+      tabs={tabs}
+      width="fit-content"
+    />
+  );
+};
+
 const LivePeriodSelectorExample = () => {
   const tabs = useMemo(
     () => [
@@ -300,6 +319,9 @@ export const All = () => {
       <Example title="Colored Excluding Live Period Selector">
         <ColoredExcludingLivePeriodSelectorExample />
       </Example>
+      <Example title="With Padding">
+        <PaddedPeriodSelectorExample />
+      </Example>
     </VStack>
   );
 };
diff --git a/packages/web/CHANGELOG.md b/packages/web/CHANGELOG.md
@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.39.1 (1/27/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix padding on Tab components. [[#330](https://github.com/coinbase/cds/pull/330)]
+
 ## 8.39.0 (1/27/2026 PST)
 
 #### 🚀 Updates
diff --git a/packages/web/package.json b/packages/web/package.json
diff --git a/packages/web/src/tabs/Tabs.tsx b/packages/web/src/tabs/Tabs.tsx
diff --git a/packages/web/src/tabs/__stories__/SegmentedTabs.stories.tsx b/packages/web/src/tabs/__stories__/SegmentedTabs.stories.tsx
diff --git a/packages/web/src/tabs/__stories__/TabNavigation.stories.tsx b/packages/web/src/tabs/__stories__/TabNavigation.stories.tsx
diff --git a/packages/web/src/tabs/__tests__/SegmentedTabs.test.tsx b/packages/web/src/tabs/__tests__/SegmentedTabs.test.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@coinbase/cds-common",`
`3`		`- "version": "8.39.0",`
	`3`	`+ "version": "8.39.1",`
`4`	`4`	`"description": "Coinbase Design System - Common",`
`5`	`5`	`"repository": {`
`6`	`6`	`"type": "git",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@coinbase/cds-mcp-server",`
`3`		`- "version": "8.39.0",`
	`3`	`+ "version": "8.39.1",`
`4`	`4`	`"description": "Coinbase Design System - MCP Server",`
`5`	`5`	`"repository": {`
`6`	`6`	`"type": "git",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@coinbase/cds-mobile-visualization",`
`3`		`- "version": "3.4.0-beta.14",`
	`3`	`+ "version": "3.4.0-beta.15",`
`4`	`4`	`"description": "Coinbase Design System - Mobile Visualization Native",`
`5`	`5`	`"repository": {`
`6`	`6`	`"type": "git",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@coinbase/cds-mobile",`
`3`		`- "version": "8.39.0",`
	`3`	`+ "version": "8.39.1",`
`4`	`4`	`"description": "Coinbase Design System - Mobile",`
`5`	`5`	`"repository": {`
`6`	`6`	`"type": "git",`