diff --git a/packages/common/CHANGELOG.md b/packages/common/CHANGELOG.md index 43c753023..12e4d96b0 100644 --- 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. +## 8.34.2 ((1/2/2026, 09:41 AM PST)) + +This is an artificial version bump with no new change. + ## 8.34.1 ((12/23/2025, 11:31 AM PST)) This is an artificial version bump with no new change. diff --git a/packages/common/package.json b/packages/common/package.json index 77022bf1d..edc6cc73e 100644 --- a/packages/common/package.json +++ b/packages/common/package.json @@ -1,6 +1,6 @@ { "name": "@coinbase/cds-common", - "version": "8.34.1", + "version": "8.34.2", "description": "Coinbase Design System - Common", "repository": { "type": "git", diff --git a/packages/mcp-server/CHANGELOG.md b/packages/mcp-server/CHANGELOG.md index c297724cc..7f0f7515d 100644 --- 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. +## 8.34.2 ((1/2/2026, 09:41 AM PST)) + +This is an artificial version bump with no new change. + ## 8.34.1 ((12/23/2025, 11:31 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 index 0dea85d10..4c79c0d6c 100644 --- a/packages/mcp-server/package.json +++ b/packages/mcp-server/package.json @@ -1,6 +1,6 @@ { "name": "@coinbase/cds-mcp-server", - "version": "8.34.1", + "version": "8.34.2", "description": "Coinbase Design System - MCP Server", "repository": { "type": "git", diff --git a/packages/mobile/CHANGELOG.md b/packages/mobile/CHANGELOG.md index 3f3160839..30b0fb34d 100644 --- a/packages/mobile/CHANGELOG.md +++ b/packages/mobile/CHANGELOG.md @@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file. +## 8.34.2 ((1/2/2026, 09:41 AM PST)) + +This is an artificial version bump with no new change. + ## 8.34.1 ((12/23/2025, 11:31 AM PST)) This is an artificial version bump with no new change. diff --git a/packages/mobile/package.json b/packages/mobile/package.json index 9b4fe60f0..57093434f 100644 --- a/packages/mobile/package.json +++ b/packages/mobile/package.json @@ -1,6 +1,6 @@ { "name": "@coinbase/cds-mobile", - "version": "8.34.1", + "version": "8.34.2", "description": "Coinbase Design System - Mobile", "repository": { "type": "git", diff --git a/packages/web/CHANGELOG.md b/packages/web/CHANGELOG.md index aca7f809b..bc941f28b 100644 --- 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. +## 8.34.2 (1/2/2026 PST) + +#### 🐞 Fixes + +- Handle disableAnimateOnMount prop for web ProgressCircle. [[#280](https://github.com/coinbase/cds/pull/280)] + ## 8.34.1 (12/23/2025 PST) #### 🐞 Fixes diff --git a/packages/web/package.json b/packages/web/package.json index fc793e5a9..0a91a2ca1 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -1,6 +1,6 @@ { "name": "@coinbase/cds-web", - "version": "8.34.1", + "version": "8.34.2", "description": "Coinbase Design System - Web", "repository": { "type": "git", diff --git a/packages/web/src/visualizations/DefaultProgressCircleContent.tsx b/packages/web/src/visualizations/DefaultProgressCircleContent.tsx index 1511be504..1127c23c0 100644 --- a/packages/web/src/visualizations/DefaultProgressCircleContent.tsx +++ b/packages/web/src/visualizations/DefaultProgressCircleContent.tsx @@ -4,9 +4,19 @@ import type { ProgressCircleContentProps } from './ProgressCircle'; import { ProgressTextLabel } from './ProgressTextLabel'; export const DefaultProgressCircleContent = memo( - ({ progress, disabled, color = 'fgMuted' }: ProgressCircleContentProps) => { + ({ + progress, + disableAnimateOnMount, + disabled, + color = 'fgMuted', + }: ProgressCircleContentProps) => { return ( - + ); }, ); diff --git a/packages/web/src/visualizations/ProgressCircle.tsx b/packages/web/src/visualizations/ProgressCircle.tsx index 5df23462f..f8aeae448 100644 --- a/packages/web/src/visualizations/ProgressCircle.tsx +++ b/packages/web/src/visualizations/ProgressCircle.tsx @@ -99,7 +99,10 @@ export type ProgressCircleProps = ProgressCircleBaseProps & { }; }; -export type ProgressCircleContentProps = Pick & { +export type ProgressCircleContentProps = Pick< + ProgressCircleBaseProps, + 'progress' | 'disableAnimateOnMount' | 'disabled' +> & { /** * Custom text color. * @default fgMuted @@ -109,7 +112,7 @@ export type ProgressCircleContentProps = Pick & Required> & { visuallyDisabled?: boolean; @@ -128,6 +131,7 @@ const ProgressCircleInner = memo( className, onAnimationEnd, onAnimationStart, + disableAnimateOnMount, }: ProgressInnerCircleProps) => { const strokeWidth = useProgressSize(weight); const circleRef = useRef(null); @@ -145,7 +149,9 @@ const ProgressCircleInner = memo( strokeDashoffset: progressOffset, }, transition: animateProgressBaseSpec, - initial: { strokeDashoffset: circumference }, + initial: { + strokeDashoffset: disableAnimateOnMount ? progressOffset : circumference, + }, }); return ( @@ -176,6 +182,7 @@ export const ProgressCircle = memo( progress, color = 'bgPrimary', disabled = false, + disableAnimateOnMount = false, testID, hideContent, hideText, @@ -240,6 +247,7 @@ export const ProgressCircle = memo( {contentNode ?? ( - + )} diff --git a/packages/web/src/visualizations/ProgressTextLabel.tsx b/packages/web/src/visualizations/ProgressTextLabel.tsx index a4b936459..8eb595dfc 100644 --- a/packages/web/src/visualizations/ProgressTextLabel.tsx +++ b/packages/web/src/visualizations/ProgressTextLabel.tsx @@ -10,7 +10,10 @@ import { Text } from '../typography/Text'; import { Counter } from './Counter'; import type { ProgressBaseProps } from './ProgressBar'; -export type ProgressTextLabelProps = Pick & { +export type ProgressTextLabelProps = Pick< + ProgressBaseProps, + 'disableAnimateOnMount' | 'disabled' +> & { value: number; renderLabel?: (num: number, disabled?: boolean) => React.ReactNode; color?: ThemeVars.Color; @@ -25,8 +28,18 @@ export type ProgressTextLabelProps = Pick & { }; export const ProgressTextLabel = memo( - ({ value, renderLabel, disabled, color, style, className }: ProgressTextLabelProps) => { - const { getPreviousValue, addPreviousValue } = usePreviousValues([0]); + ({ + value, + renderLabel, + disableAnimateOnMount, + disabled, + color, + style, + className, + }: ProgressTextLabelProps) => { + const { getPreviousValue, addPreviousValue } = usePreviousValues([ + disableAnimateOnMount ? value : 0, + ]); addPreviousValue(value); diff --git a/packages/web/src/visualizations/__stories__/ProgressCircle.stories.tsx b/packages/web/src/visualizations/__stories__/ProgressCircle.stories.tsx index 6ae8609a2..a94ab66a7 100644 --- a/packages/web/src/visualizations/__stories__/ProgressCircle.stories.tsx +++ b/packages/web/src/visualizations/__stories__/ProgressCircle.stories.tsx @@ -372,3 +372,14 @@ export const Thin = () => { ); }; + +export const DisableAnimateOnMount = () => { + return ( + + {({ calculateProgress }) => ( + + )} + + ); +}; +DisableAnimateOnMount.parameters = { percy: { enableJavaScript: true } }; diff --git a/packages/web/src/visualizations/__tests__/ProgressCircle.test.tsx b/packages/web/src/visualizations/__tests__/ProgressCircle.test.tsx index e7c8740d5..dd301eb22 100644 --- a/packages/web/src/visualizations/__tests__/ProgressCircle.test.tsx +++ b/packages/web/src/visualizations/__tests__/ProgressCircle.test.tsx @@ -237,4 +237,24 @@ describe('ProgressCircle tests', () => { expect(screen.queryByText(`${customText} ${progress * 100}%`)).toBeNull(); expect(screen.queryByTestId('custom-content-node')).toBeNull(); }); + + it('skips mount animation when disableAnimateOnMount is true', () => { + const size = 100; + const progress = 0.5; + render( + + + , + ); + + const circumference = getCircumference(getRadius(size, 4)); + const expectedOffset = (1 - progress) * circumference; + const innerCircle = screen.getByTestId('cds-progress-circle-inner'); + + // Should start at target offset, not at circumference (empty) + expect(innerCircle).toHaveAttribute('stroke-dashoffset', expectedOffset.toString()); + + // Should show target percentage immediately, not animate from 0 + expect(screen.getAllByText('50%').length).toBeGreaterThan(0); + }); });