Merge branch 'master' into sverg/datepicker-mobile

Author: sverg-cb

packages/mobile-visualization/CHANGELOG.md

@@ -8,6 +8,14 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 3.4.0-beta.22 (3/4/2026 PST)
+
+#### 🚀 Updates
+
+- Improve PeriodSelector types. [[#464](https://github.com/coinbase/cds/pull/464)]
+- Skip null path transitions. [[#464](https://github.com/coinbase/cds/pull/464)]
+- Fix path transition on incompatible paths. [[#464](https://github.com/coinbase/cds/pull/464)]
+
 ## 3.4.0-beta.21 (3/2/2026 PST)
 
 #### 🚀 Updates

packages/mobile-visualization/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile-visualization",
-  "version": "3.4.0-beta.21",
+  "version": "3.4.0-beta.22",
   "description": "Coinbase Design System - Mobile Visualization Native",
   "repository": {
     "type": "git",

packages/mobile-visualization/src/chart/Path.tsx

@@ -133,12 +133,7 @@ export type PathProps = PathBaseProps &
   };
 
 const AnimatedPath = memo<
-  Omit<
-    PathProps,
-    'animate' | 'clipRect' | 'clipOffset' | 'clipPath' | 'transitions' | 'transition'
-  > & {
-    transitions?: { enter?: Transition; update?: Transition };
-  }
+  Omit<PathProps, 'animate' | 'clipRect' | 'clipOffset' | 'clipPath' | 'transition'>
 >(
   ({
     d = '',
@@ -246,18 +241,20 @@ export const Path = memo<PathProps>((props) => {
     [animate, transitions?.update, transition],
   );
 
+  const shouldAnimateClip = animate && enterTransition !== null;
+
   // The clip offset provides extra padding to prevent path from being cut off
   // Area charts typically use offset=0 for exact clipping, while lines use offset=2 for breathing room
   const totalOffset = clipOffset * 2; // Applied on both sides
 
   // Animation progress for clip path reveal
-  const clipProgress = useSharedValue(animate ? 0 : 1);
+  const clipProgress = useSharedValue(shouldAnimateClip ? 0 : 1);
 
   useEffect(() => {
-    if (animate && isReady) {
+    if (shouldAnimateClip && isReady) {
       clipProgress.value = buildTransition(1, enterTransition);
     }
-  }, [animate, isReady, clipProgress, enterTransition]);
+  }, [shouldAnimateClip, isReady, clipProgress, enterTransition]);
 
   // Create initial and target clip paths for animation
   const { initialClipPath, targetClipPath } = useMemo(() => {
@@ -288,7 +285,7 @@ export const Path = memo<PathProps>((props) => {
   const animatedClipPath = usePathInterpolation(
     clipProgress,
     [0, 1],
-    animate && initialClipPath && targetClipPath
+    shouldAnimateClip && initialClipPath && targetClipPath
       ? [initialClipPath, targetClipPath]
       : targetClipPath
         ? [targetClipPath, targetClipPath]
@@ -306,13 +303,13 @@ export const Path = memo<PathProps>((props) => {
     }
 
     // If not animating or paths are null, return target clip path
-    if (!animate || !targetClipPath) {
+    if (!shouldAnimateClip || !targetClipPath) {
       return targetClipPath;
     }
 
     // Return undefined here since we'll use animatedClipPath directly
     return undefined;
-  }, [clipPathProp, animate, targetClipPath]);
+  }, [clipPathProp, shouldAnimateClip, targetClipPath]);
 
   // Convert SVG path string to SkPath for static rendering
   const staticPath = useDerivedValue(() => {
@@ -365,7 +362,7 @@ export const Path = memo<PathProps>((props) => {
 
   // Determine which clip path to use
   const finalClipPath =
-    animate && resolvedClipPath === undefined ? animatedClipPath : resolvedClipPath;
+    shouldAnimateClip && resolvedClipPath === undefined ? animatedClipPath : resolvedClipPath;
 
   // If finalClipPath is null, render without clipping
   if (finalClipPath === null) {

packages/mobile-visualization/src/chart/PeriodSelector.tsx

@@ -134,8 +134,7 @@ const PeriodSelectorTab: TabComponent = memo(
   )),
 );
 
-export type PeriodSelectorProps = Omit<SegmentedTabsProps, 'styles'> &
-  Pick<SegmentedTabsProps, 'styles'>;
+export type PeriodSelectorProps = SegmentedTabsProps;
 
 /**
  * PeriodSelector is a specialized version of SegmentedTabs optimized for chart period selection.

packages/mobile-visualization/src/chart/__stories__/ChartTransitions.stories.tsx

@@ -5,7 +5,7 @@ import { ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
 import { Box, HStack, VStack } from '@coinbase/cds-mobile/layout';
 import { Text } from '@coinbase/cds-mobile/typography';
 
-import { Area } from '../area/Area';
+import { AreaChart } from '../area/AreaChart';
 import type { BarProps } from '../bar/Bar';
 import { BarChart } from '../bar/BarChart';
 import { CartesianChart } from '../CartesianChart';
@@ -108,21 +108,21 @@ const TransitionAreaChart = memo<{
   idlePulse?: boolean;
   scrubberRef?: React.RefObject<ScrubberRef | null>;
 }>(({ data, transitions, idlePulse, scrubberRef }) => (
-  <CartesianChart
+  <AreaChart
     enableScrubbing
+    showLines
     height={200}
     inset={{ top: 16, bottom: 16, left: 16, right: 16 }}
     series={[{ id: 'values', data }]}
+    transitions={transitions}
   >
-    <Area seriesId="values" transitions={transitions} />
-    <Line seriesId="values" transitions={transitions} />
     <Scrubber
       ref={scrubberRef as React.RefObject<ScrubberRef>}
       hideOverlay
       idlePulse={idlePulse}
       transitions={transitions}
     />
-  </CartesianChart>
+  </AreaChart>
 ));
 
 const MultiLineChart = memo<{

packages/mobile-visualization/src/chart/area/AreaChart.tsx

@@ -22,10 +22,22 @@ export type AreaSeries = Series &
   Partial<
     Pick<
       AreaProps,
-      'AreaComponent' | 'curve' | 'fillOpacity' | 'type' | 'fill' | 'connectNulls' | 'transition'
+      | 'AreaComponent'
+      | 'curve'
+      | 'fillOpacity'
+      | 'type'
+      | 'fill'
+      | 'connectNulls'
+      | 'transition'
+      | 'transitions'
     >
   > &
-  Partial<Pick<LineProps, 'LineComponent' | 'strokeWidth' | 'stroke' | 'opacity'>> & {
+  Partial<
+    Pick<
+      LineProps,
+      'LineComponent' | 'strokeWidth' | 'stroke' | 'opacity' | 'transition' | 'transitions'
+    >
+  > & {
     /**
      * The type of line to render for this series.
      * Overrides the chart-level lineType if provided.
@@ -37,7 +49,13 @@ export type AreaSeries = Series &
 export type AreaChartBaseProps = Omit<CartesianChartBaseProps, 'xAxis' | 'yAxis' | 'series'> &
   Pick<
     AreaProps,
-    'AreaComponent' | 'curve' | 'fillOpacity' | 'type' | 'connectNulls' | 'transition'
+    | 'AreaComponent'
+    | 'curve'
+    | 'fillOpacity'
+    | 'type'
+    | 'connectNulls'
+    | 'transition'
+    | 'transitions'
   > &
   Pick<LineProps, 'LineComponent' | 'strokeWidth'> & {
     /**
@@ -101,6 +119,7 @@ export const AreaChart = memo(
         type,
         connectNulls,
         transition,
+        transitions,
         LineComponent,
         strokeWidth,
         showXAxis,
@@ -221,6 +240,7 @@ export const AreaChart = memo(
                 fillOpacity={fillOpacity}
                 seriesId={id}
                 transition={transition}
+                transitions={transitions}
                 type={type}
                 {...areaPropsFromSeries}
               />
@@ -238,7 +258,6 @@ export const AreaChart = memo(
                 fillOpacity,
                 stackId,
                 type, // Area type (don't pass to Line)
-                lineType: seriesLineType,
                 ...otherPropsFromSeries
               }) => {
                 return (
@@ -250,7 +269,8 @@ export const AreaChart = memo(
                     seriesId={id}
                     strokeWidth={strokeWidth}
                     transition={transition}
-                    type={seriesLineType ?? lineType}
+                    transitions={transitions}
+                    type={lineType}
                     {...otherPropsFromSeries}
                   />
                 );

packages/mobile-visualization/src/chart/area/DottedArea.tsx

@@ -7,7 +7,7 @@ import { Gradient } from '../gradient';
 import { Path, type PathProps } from '../Path';
 import { createGradient, getBaseline } from '../utils';
 import { getDottedAreaPath } from '../utils/path';
-import { usePathTransition } from '../utils/transition';
+import { defaultTransition, usePathTransition } from '../utils/transition';
 
 import type { AreaComponentProps } from './Area';
 
@@ -73,13 +73,23 @@ export const DottedArea = memo<DottedAreaProps>(
     const theme = useTheme();
     const { drawingArea, animate, getYAxis } = useCartesianChartContext();
 
+    const shouldAnimate = animateProp ?? animate;
+
     const yAxisConfig = getYAxis(yAxisId);
 
     const fill = useMemo(
       () => fillProp ?? theme.color.fgPrimary,
       [fillProp, theme.color.fgPrimary],
     );
 
+    const updateTransition = useMemo(() => {
+      return transitions?.update !== undefined
+        ? transitions.update
+        : transition !== undefined
+          ? transition
+          : defaultTransition;
+    }, [transitions?.update, transition]);
+
     const dottedPath = useMemo(() => {
       if (!drawingArea) return '';
 
@@ -95,16 +105,11 @@ export const DottedArea = memo<DottedAreaProps>(
       );
     }, [drawingArea, patternSize, dotSize]);
 
-    const animatedClipPath = usePathTransition({
+    const clipPath = usePathTransition({
       currentPath: d,
-      transitions: { update: transition },
+      transitions: { update: shouldAnimate ? updateTransition : null },
     });
 
-    const staticClipPath = useMemo(() => {
-      if (!d) return;
-      return Skia.Path.MakeFromSVGString(d) ?? undefined;
-    }, [d]);
-
     const gradient = useMemo(() => {
       if (gradientProp) return gradientProp;
       if (!yAxisConfig) return;
@@ -113,10 +118,11 @@ export const DottedArea = memo<DottedAreaProps>(
       return createGradient(yAxisConfig.domain, baselineValue, fill, peakOpacity, baselineOpacity);
     }, [gradientProp, yAxisConfig, fill, baseline, peakOpacity, baselineOpacity]);
 
+    // Update transition is used for clip path, we skip update animation on Path itself
     return (
-      <Group clip={animate ? animatedClipPath : staticClipPath}>
+      <Group clip={clipPath}>
         <Path
-          animate={animateProp ?? animate}
+          animate={shouldAnimate}
           d={dottedPath}
           fill={fill}
           transition={transition}

packages/mobile-visualization/src/chart/line/Line.tsx

@@ -292,7 +292,12 @@ export const Line = memo<LineProps>(
               // If points is true, render with defaults
               if (points === true) {
                 return (
-                  <Point key={`${seriesId}-${xValue}`} transition={transition} {...defaults} />
+                  <Point
+                    key={`${seriesId}-${xValue}`}
+                    transition={transition}
+                    transitions={transitions}
+                    {...defaults}
+                  />
                 );
               }
 
@@ -307,6 +312,7 @@ export const Line = memo<LineProps>(
                 <Point
                   key={`${seriesId}-${xValue}`}
                   transition={transition}
+                  transitions={transitions}
                   {...defaults}
                   {...pointConfig}
                 />

packages/mobile-visualization/src/chart/line/LineChart.tsx

@@ -30,6 +30,7 @@ export type LineSeries = Series &
       | 'points'
       | 'connectNulls'
       | 'transition'
+      | 'transitions'
     >
   >;
 
@@ -47,6 +48,7 @@ export type LineChartBaseProps = Omit<CartesianChartBaseProps, 'xAxis' | 'yAxis'
     | 'strokeOpacity'
     | 'connectNulls'
     | 'transition'
+    | 'transitions'
     | 'opacity'
   > & {
     /**
@@ -95,6 +97,7 @@ export const LineChart = memo(
         strokeOpacity,
         connectNulls,
         transition,
+        transitions,
         opacity,
         showXAxis,
         showYAxis,
@@ -189,7 +192,8 @@ export const LineChart = memo(
               showArea={showArea}
               strokeOpacity={strokeOpacity}
               strokeWidth={strokeWidth}
-              transition={linePropsFromSeries.transition ?? transition}
+              transition={transition}
+              transitions={transitions}
               type={type}
               {...linePropsFromSeries}
             />

packages/mobile-visualization/src/chart/scrubber/DefaultScrubberBeacon.tsx

@@ -20,7 +20,6 @@ import {
   buildTransition,
   defaultTransition,
   getTransition,
-  instantTransition,
   type Transition,
 } from '../utils/transition';