@coinbase/cds-web 8.35.0 → 8.36.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +10 -0
- package/dts/visualizations/ProgressBar.d.ts +0 -2
- package/dts/visualizations/ProgressBar.d.ts.map +1 -1
- package/dts/visualizations/ProgressBarWithFixedLabels.d.ts +13 -8
- package/dts/visualizations/ProgressBarWithFixedLabels.d.ts.map +1 -1
- package/dts/visualizations/ProgressBarWithFloatLabel.d.ts +8 -2
- package/dts/visualizations/ProgressBarWithFloatLabel.d.ts.map +1 -1
- package/esm/visualizations/ProgressBar.js +2 -2
- package/esm/visualizations/ProgressBarWithFixedLabels.js +12 -0
- package/esm/visualizations/ProgressBarWithFloatLabel.js +22 -8
- package/esm/visualizations/ProgressCircle.js +2 -2
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,16 @@ All notable changes to this project will be documented in this file.
|
|
|
8
8
|
|
|
9
9
|
<!-- template-start -->
|
|
10
10
|
|
|
11
|
+
## 8.36.0 ((1/6/2026, 01:00 PM PST))
|
|
12
|
+
|
|
13
|
+
This is an artificial version bump with no new change.
|
|
14
|
+
|
|
15
|
+
## 8.35.1 (1/5/2026 PST)
|
|
16
|
+
|
|
17
|
+
#### 🐞 Fixes
|
|
18
|
+
|
|
19
|
+
- Fix disableAnimateOnMount for progress bar label components. [[#284](https://github.com/coinbase/cds/pull/284)]
|
|
20
|
+
|
|
11
21
|
## 8.35.0 (1/5/2026 PST)
|
|
12
22
|
|
|
13
23
|
#### 🚀 Updates
|
|
@@ -13,7 +13,6 @@ export type ProgressBaseProps = SharedProps &
|
|
|
13
13
|
weight?: Weight;
|
|
14
14
|
/**
|
|
15
15
|
* Toggle used to show a disabled progress visualization
|
|
16
|
-
* @default false
|
|
17
16
|
*/
|
|
18
17
|
disabled?: boolean;
|
|
19
18
|
/**
|
|
@@ -79,7 +78,6 @@ export declare const ProgressBar: React.MemoExoticComponent<
|
|
|
79
78
|
weight?: Weight;
|
|
80
79
|
/**
|
|
81
80
|
* Toggle used to show a disabled progress visualization
|
|
82
|
-
* @default false
|
|
83
81
|
*/
|
|
84
82
|
disabled?: boolean;
|
|
85
83
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,KAAK,EAAE,wBAAwB,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAOhG,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAI3D,MAAM,MAAM,iBAAiB,GAAG,WAAW,GACzC,IAAI,CAAC,mBAAmB,EAAE,uBAAuB,CAAC,GAClD,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GAAG;IACrD,8DAA8D;IAC9D,QAAQ,EAAE,MAAM,CAAC;IACjB;;SAEK;IACL,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB
|
|
1
|
+
{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,KAAK,EAAE,wBAAwB,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAOhG,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAI3D,MAAM,MAAM,iBAAiB,GAAG,WAAW,GACzC,IAAI,CAAC,mBAAmB,EAAE,uBAAuB,CAAC,GAClD,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GAAG;IACrD,8DAA8D;IAC9D,QAAQ,EAAE,MAAM,CAAC;IACjB;;SAEK;IACL,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAEJ,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,GAAG;IACjD;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC,CAAC;IACF;;OAEG;IACH,UAAU,CAAC,EAAE;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,CAAC;AAQF,eAAO,MAAM,WAAW;IApEpB,8DAA8D;cACpD,MAAM;IAChB;;SAEK;aACI,MAAM;IACf;;OAEG;eACQ,OAAO;IAClB;;;OAGG;YACK,SAAS,CAAC,KAAK;IACvB;;OAEG;qBACc,MAAM,IAAI;IAC3B;;OAEG;uBACgB,MAAM,IAAI;;IAI/B;;OAEG;YACK,KAAK,CAAC,aAAa;IAC3B;;OAEG;gBACS,MAAM;IAClB;;OAEG;aACM;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC;IACD;;OAEG;iBACU;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB;yCA8FF,CAAC"}
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { PaddingProps, Placement } from '@coinbase/cds-common/types';
|
|
3
3
|
import { type ProgressBarLabel } from './getProgressBarLabelParts';
|
|
4
|
-
import { type
|
|
5
|
-
export type ProgressBarWithFixedLabelsProps = Pick<
|
|
4
|
+
import { type ProgressBarProps } from './ProgressBar';
|
|
5
|
+
export type ProgressBarWithFixedLabelsProps = Pick<
|
|
6
|
+
ProgressBarProps,
|
|
7
|
+
'disableAnimateOnMount' | 'disabled' | 'testID'
|
|
8
|
+
> & {
|
|
6
9
|
/** Label that is pinned to the start of the container. If a number is used then it will format it as a percentage. */
|
|
7
10
|
startLabel?: ProgressBarLabel;
|
|
8
11
|
/** Label that is pinned to the end of the container. If a number is used then it will format it as a percentage. */
|
|
@@ -70,18 +73,20 @@ export type ProgressBarFixedLabelContainerProps = Omit<
|
|
|
70
73
|
Pick<PaddingProps, 'paddingBottom' | 'paddingTop'> & {
|
|
71
74
|
visuallyDisabled: boolean;
|
|
72
75
|
};
|
|
73
|
-
export type ProgressBarFixedLabelBesideProps =
|
|
76
|
+
export type ProgressBarFixedLabelBesideProps = Pick<
|
|
77
|
+
ProgressBarProps,
|
|
78
|
+
'disableAnimateOnMount' | 'style' | 'className'
|
|
79
|
+
> & {
|
|
74
80
|
label: ProgressBarLabel;
|
|
75
81
|
visuallyDisabled: boolean;
|
|
76
|
-
style?: React.CSSProperties;
|
|
77
|
-
className?: string;
|
|
78
82
|
};
|
|
79
|
-
export type ProgressBarFixedLabelProps =
|
|
83
|
+
export type ProgressBarFixedLabelProps = Pick<
|
|
84
|
+
ProgressBarProps,
|
|
85
|
+
'disableAnimateOnMount' | 'style' | 'className'
|
|
86
|
+
> & {
|
|
80
87
|
position: 'start' | 'end';
|
|
81
88
|
label: ProgressBarLabel;
|
|
82
89
|
visuallyDisabled: boolean;
|
|
83
|
-
style?: React.CSSProperties;
|
|
84
|
-
className?: string;
|
|
85
90
|
};
|
|
86
91
|
export declare const ProgressBarWithFixedLabels: React.FC<
|
|
87
92
|
React.PropsWithChildren<ProgressBarWithFixedLabelsProps>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBarWithFixedLabels.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressBarWithFixedLabels.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAO1E,OAAO,EAA4B,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC7F,OAAO,EAAE,KAAK,
|
|
1
|
+
{"version":3,"file":"ProgressBarWithFixedLabels.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressBarWithFixedLabels.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAO1E,OAAO,EAA4B,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC7F,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGtD,MAAM,MAAM,+BAA+B,GAAG,IAAI,CAChD,gBAAgB,EAChB,uBAAuB,GAAG,UAAU,GAAG,QAAQ,CAChD,GAAG;IACF,sHAAsH;IACtH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,oHAAoH;IACpH,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B;;;SAGK;IACL,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC,CAAC;IAClE;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACrC;;WAEG;QACH,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACjC;;WAEG;QACH,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC,CAAC;IACF;;OAEG;IACH,UAAU,CAAC,EAAE;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB;;WAEG;QACH,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,mCAAmC,GAAG,IAAI,CACpD,+BAA+B,EAC/B,gBAAgB,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,WAAW,CACnE,GACC,IAAI,CAAC,YAAY,EAAE,eAAe,GAAG,YAAY,CAAC,GAAG;IACnD,gBAAgB,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEJ,MAAM,MAAM,gCAAgC,GAAG,IAAI,CACjD,gBAAgB,EAChB,uBAAuB,GAAG,OAAO,GAAG,WAAW,CAChD,GAAG;IACF,KAAK,EAAE,gBAAgB,CAAC;IACxB,gBAAgB,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAC3C,gBAAgB,EAChB,uBAAuB,GAAG,OAAO,GAAG,WAAW,CAChD,GAAG;IACF,QAAQ,EAAE,OAAO,GAAG,KAAK,CAAC;IAC1B,KAAK,EAAE,gBAAgB,CAAC;IACxB,gBAAgB,EAAE,OAAO,CAAC;CAC3B,CAAC;AAoHF,eAAO,MAAM,0BAA0B,EAAE,KAAK,CAAC,EAAE,CAC/C,KAAK,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,CAiFzD,CAAC"}
|
|
@@ -4,11 +4,17 @@ import { type ProgressBarLabel } from './getProgressBarLabelParts';
|
|
|
4
4
|
import { type ProgressBaseProps } from './ProgressBar';
|
|
5
5
|
export type ProgressBarFloatLabelProps = Pick<
|
|
6
6
|
ProgressBarWithFloatLabelProps,
|
|
7
|
-
|
|
7
|
+
| 'label'
|
|
8
|
+
| 'progress'
|
|
9
|
+
| 'disableAnimateOnMount'
|
|
10
|
+
| 'disabled'
|
|
11
|
+
| 'labelPlacement'
|
|
12
|
+
| 'styles'
|
|
13
|
+
| 'classNames'
|
|
8
14
|
>;
|
|
9
15
|
export type ProgressBarWithFloatLabelProps = Pick<
|
|
10
16
|
ProgressBaseProps,
|
|
11
|
-
'progress' | 'disabled' | 'testID'
|
|
17
|
+
'progress' | 'disableAnimateOnMount' | 'disabled' | 'testID'
|
|
12
18
|
> & {
|
|
13
19
|
/** Label that is floated at the end of the filled in bar. If a number is used then it will format it as a percentage. */
|
|
14
20
|
label: ProgressBarLabel;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBarWithFloatLabel.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressBarWithFloatLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"ProgressBarWithFloatLabel.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressBarWithFloatLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8C,MAAM,OAAO,CAAC;AAGnE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAc5D,OAAO,EAA4B,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC7F,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGvD,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAC3C,8BAA8B,EAC5B,OAAO,GACP,UAAU,GACV,uBAAuB,GACvB,UAAU,GACV,gBAAgB,GAChB,QAAQ,GACR,YAAY,CACf,CAAC;AA0GF,MAAM,MAAM,8BAA8B,GAAG,IAAI,CAC/C,iBAAiB,EACjB,UAAU,GAAG,uBAAuB,GAAG,UAAU,GAAG,QAAQ,CAC7D,GAAG;IACF,yHAAyH;IACzH,KAAK,EAAE,gBAAgB,CAAC;IACxB;;;SAGK;IACL,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,OAAO,CAAC,CAAC;IACvD;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACrC;;WAEG;QACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC7B,CAAC;IACF;;OAEG;IACH,UAAU,CAAC,EAAE;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAC9C,KAAK,CAAC,iBAAiB,CAAC,8BAA8B,CAAC,CAwCxD,CAAC"}
|
|
@@ -21,8 +21,8 @@ export const ProgressBar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forw
|
|
|
21
21
|
weight = 'normal',
|
|
22
22
|
progress,
|
|
23
23
|
color = 'bgPrimary',
|
|
24
|
-
disabled
|
|
25
|
-
disableAnimateOnMount
|
|
24
|
+
disabled,
|
|
25
|
+
disableAnimateOnMount,
|
|
26
26
|
testID,
|
|
27
27
|
accessibilityLabel,
|
|
28
28
|
style,
|
|
@@ -15,6 +15,7 @@ const ProgressBarFixedLabelBeside = /*#__PURE__*/memo(_ref => {
|
|
|
15
15
|
let {
|
|
16
16
|
label,
|
|
17
17
|
visuallyDisabled,
|
|
18
|
+
disableAnimateOnMount,
|
|
18
19
|
style,
|
|
19
20
|
className
|
|
20
21
|
} = _ref;
|
|
@@ -25,6 +26,7 @@ const ProgressBarFixedLabelBeside = /*#__PURE__*/memo(_ref => {
|
|
|
25
26
|
return /*#__PURE__*/_jsx(ProgressTextLabel, {
|
|
26
27
|
className: className,
|
|
27
28
|
color: "fg",
|
|
29
|
+
disableAnimateOnMount: disableAnimateOnMount,
|
|
28
30
|
disabled: visuallyDisabled,
|
|
29
31
|
renderLabel: renderLabel,
|
|
30
32
|
style: style,
|
|
@@ -36,6 +38,7 @@ const ProgressBarFixedLabel = /*#__PURE__*/memo(_ref2 => {
|
|
|
36
38
|
label,
|
|
37
39
|
position,
|
|
38
40
|
visuallyDisabled,
|
|
41
|
+
disableAnimateOnMount,
|
|
39
42
|
style,
|
|
40
43
|
className
|
|
41
44
|
} = _ref2;
|
|
@@ -43,6 +46,7 @@ const ProgressBarFixedLabel = /*#__PURE__*/memo(_ref2 => {
|
|
|
43
46
|
"data-testid": "cds-progress-bar-fixed-label-".concat(position),
|
|
44
47
|
children: /*#__PURE__*/_jsx(ProgressBarFixedLabelBeside, {
|
|
45
48
|
className: className,
|
|
49
|
+
disableAnimateOnMount: disableAnimateOnMount,
|
|
46
50
|
label: label,
|
|
47
51
|
style: style,
|
|
48
52
|
visuallyDisabled: visuallyDisabled
|
|
@@ -54,6 +58,7 @@ const ProgressBarFixedLabelContainer = /*#__PURE__*/memo(_ref3 => {
|
|
|
54
58
|
startLabel,
|
|
55
59
|
endLabel,
|
|
56
60
|
visuallyDisabled,
|
|
61
|
+
disableAnimateOnMount,
|
|
57
62
|
paddingBottom,
|
|
58
63
|
paddingTop,
|
|
59
64
|
styles,
|
|
@@ -63,6 +68,7 @@ const ProgressBarFixedLabelContainer = /*#__PURE__*/memo(_ref3 => {
|
|
|
63
68
|
if (typeof startLabel !== 'undefined') {
|
|
64
69
|
nodes.push(/*#__PURE__*/_jsx(ProgressBarFixedLabel, {
|
|
65
70
|
className: classNames === null || classNames === void 0 ? void 0 : classNames.startLabel,
|
|
71
|
+
disableAnimateOnMount: disableAnimateOnMount,
|
|
66
72
|
label: startLabel,
|
|
67
73
|
position: "start",
|
|
68
74
|
style: styles === null || styles === void 0 ? void 0 : styles.startLabel,
|
|
@@ -75,6 +81,7 @@ const ProgressBarFixedLabelContainer = /*#__PURE__*/memo(_ref3 => {
|
|
|
75
81
|
if (typeof endLabel !== 'undefined') {
|
|
76
82
|
nodes.push(/*#__PURE__*/_jsx(ProgressBarFixedLabel, {
|
|
77
83
|
className: classNames === null || classNames === void 0 ? void 0 : classNames.endLabel,
|
|
84
|
+
disableAnimateOnMount: disableAnimateOnMount,
|
|
78
85
|
label: endLabel,
|
|
79
86
|
position: "end",
|
|
80
87
|
style: styles === null || styles === void 0 ? void 0 : styles.endLabel,
|
|
@@ -104,6 +111,7 @@ export const ProgressBarWithFixedLabels = /*#__PURE__*/memo(_ref4 => {
|
|
|
104
111
|
startLabel,
|
|
105
112
|
endLabel,
|
|
106
113
|
labelPlacement = 'beside',
|
|
114
|
+
disableAnimateOnMount,
|
|
107
115
|
disabled = false,
|
|
108
116
|
children,
|
|
109
117
|
testID,
|
|
@@ -118,6 +126,7 @@ export const ProgressBarWithFixedLabels = /*#__PURE__*/memo(_ref4 => {
|
|
|
118
126
|
paddingEnd: 1,
|
|
119
127
|
children: /*#__PURE__*/_jsx(ProgressBarFixedLabelBeside, {
|
|
120
128
|
className: classNames === null || classNames === void 0 ? void 0 : classNames.startLabel,
|
|
129
|
+
disableAnimateOnMount: disableAnimateOnMount,
|
|
121
130
|
label: startLabel,
|
|
122
131
|
style: styles === null || styles === void 0 ? void 0 : styles.startLabel,
|
|
123
132
|
visuallyDisabled: disabled
|
|
@@ -129,6 +138,7 @@ export const ProgressBarWithFixedLabels = /*#__PURE__*/memo(_ref4 => {
|
|
|
129
138
|
paddingStart: 1,
|
|
130
139
|
children: /*#__PURE__*/_jsx(ProgressBarFixedLabelBeside, {
|
|
131
140
|
className: classNames === null || classNames === void 0 ? void 0 : classNames.endLabel,
|
|
141
|
+
disableAnimateOnMount: disableAnimateOnMount,
|
|
132
142
|
label: endLabel,
|
|
133
143
|
style: styles === null || styles === void 0 ? void 0 : styles.endLabel,
|
|
134
144
|
visuallyDisabled: disabled
|
|
@@ -143,6 +153,7 @@ export const ProgressBarWithFixedLabels = /*#__PURE__*/memo(_ref4 => {
|
|
|
143
153
|
width: "100%",
|
|
144
154
|
children: [labelPlacement === 'above' && /*#__PURE__*/_jsx(ProgressBarFixedLabelContainer, {
|
|
145
155
|
classNames: classNames,
|
|
156
|
+
disableAnimateOnMount: disableAnimateOnMount,
|
|
146
157
|
endLabel: endLabel,
|
|
147
158
|
paddingBottom: 1,
|
|
148
159
|
startLabel: startLabel,
|
|
@@ -156,6 +167,7 @@ export const ProgressBarWithFixedLabels = /*#__PURE__*/memo(_ref4 => {
|
|
|
156
167
|
children: [labelPlacement === 'beside' && leftEl, children, labelPlacement === 'beside' && rightEl]
|
|
157
168
|
}), labelPlacement === 'below' && /*#__PURE__*/_jsx(ProgressBarFixedLabelContainer, {
|
|
158
169
|
classNames: classNames,
|
|
170
|
+
disableAnimateOnMount: disableAnimateOnMount,
|
|
159
171
|
endLabel: endLabel,
|
|
160
172
|
paddingTop: 1,
|
|
161
173
|
startLabel: startLabel,
|
|
@@ -3,7 +3,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
3
3
|
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
4
4
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
5
5
|
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
6
|
-
import React, { memo, useCallback, useRef } from 'react';
|
|
6
|
+
import React, { memo, useCallback, useRef, useState } from 'react';
|
|
7
7
|
import { animateProgressBaseSpec } from '@coinbase/cds-common/animation/progress';
|
|
8
8
|
import { usePreviousValues } from '@coinbase/cds-common/hooks/usePreviousValues';
|
|
9
9
|
import { isStorybook } from '@coinbase/cds-utils';
|
|
@@ -28,6 +28,7 @@ const ProgressBarFloatLabel = /*#__PURE__*/memo(_ref => {
|
|
|
28
28
|
label,
|
|
29
29
|
disabled,
|
|
30
30
|
progress,
|
|
31
|
+
disableAnimateOnMount,
|
|
31
32
|
labelPlacement,
|
|
32
33
|
styles,
|
|
33
34
|
classNames
|
|
@@ -37,8 +38,9 @@ const ProgressBarFloatLabel = /*#__PURE__*/memo(_ref => {
|
|
|
37
38
|
const {
|
|
38
39
|
getPreviousValue: getPreviousPercent,
|
|
39
40
|
addPreviousValue: addPreviousPercent
|
|
40
|
-
} = usePreviousValues([0]);
|
|
41
|
+
} = usePreviousValues([disableAnimateOnMount ? progress : 0]);
|
|
41
42
|
const animationControls = useAnimation();
|
|
43
|
+
const [hasAnimationMounted, setHasAnimationMounted] = useState(!disableAnimateOnMount);
|
|
42
44
|
addPreviousPercent(progress);
|
|
43
45
|
const previousPercent = (_getPreviousPercent = getPreviousPercent()) !== null && _getPreviousPercent !== void 0 ? _getPreviousPercent : 0;
|
|
44
46
|
|
|
@@ -58,12 +60,19 @@ const ProgressBarFloatLabel = /*#__PURE__*/memo(_ref => {
|
|
|
58
60
|
const textContainerWidth = textContainerRef.current.offsetWidth;
|
|
59
61
|
const startLeftTranslate = isRtl() ? Math.min(containerWidth - textContainerWidth, containerWidth - containerWidth * previousPercent) : Math.max(0, containerWidth * previousPercent - textContainerWidth);
|
|
60
62
|
const endLeftTranslate = isRtl() ? Math.min(containerWidth - textContainerWidth, containerWidth - containerWidth * progress) : Math.max(0, containerWidth * progress - textContainerWidth);
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
63
|
+
if (!hasAnimationMounted && disableAnimateOnMount) {
|
|
64
|
+
void animationControls.set({
|
|
65
|
+
x: endLeftTranslate
|
|
66
|
+
});
|
|
67
|
+
setHasAnimationMounted(true);
|
|
68
|
+
} else {
|
|
69
|
+
void animationControls.start({
|
|
70
|
+
x: [startLeftTranslate, endLeftTranslate],
|
|
71
|
+
transition: convertTransition(animateProgressBaseSpec)
|
|
72
|
+
});
|
|
73
|
+
}
|
|
65
74
|
}
|
|
66
|
-
}, [progress, cWidth, cHeight, previousPercent]);
|
|
75
|
+
}, [progress, cWidth, cHeight, previousPercent, disableAnimateOnMount]);
|
|
67
76
|
const setupContainerRef = useCallback(ref => {
|
|
68
77
|
containerRef.current = ref;
|
|
69
78
|
observe(ref);
|
|
@@ -82,10 +91,13 @@ const ProgressBarFloatLabel = /*#__PURE__*/memo(_ref => {
|
|
|
82
91
|
animate: animationControls,
|
|
83
92
|
className: floatingTextContainerCss,
|
|
84
93
|
"data-testid": "cds-progress-bar-float-label",
|
|
85
|
-
style: motionStyle,
|
|
94
|
+
style: _objectSpread(_objectSpread({}, motionStyle), {}, {
|
|
95
|
+
opacity: hasAnimationMounted ? 1 : 0
|
|
96
|
+
}),
|
|
86
97
|
children: /*#__PURE__*/_jsx(ProgressTextLabel, {
|
|
87
98
|
className: classNames === null || classNames === void 0 ? void 0 : classNames.label,
|
|
88
99
|
color: "fgMuted",
|
|
100
|
+
disableAnimateOnMount: disableAnimateOnMount,
|
|
89
101
|
disabled: disabled,
|
|
90
102
|
renderLabel: renderLabel,
|
|
91
103
|
style: styles === null || styles === void 0 ? void 0 : styles.label,
|
|
@@ -99,6 +111,7 @@ export const ProgressBarWithFloatLabel = /*#__PURE__*/memo(_ref2 => {
|
|
|
99
111
|
label,
|
|
100
112
|
labelPlacement = 'above',
|
|
101
113
|
progress,
|
|
114
|
+
disableAnimateOnMount,
|
|
102
115
|
disabled,
|
|
103
116
|
children,
|
|
104
117
|
testID,
|
|
@@ -110,6 +123,7 @@ export const ProgressBarWithFloatLabel = /*#__PURE__*/memo(_ref2 => {
|
|
|
110
123
|
const skipLabel = isStorybook();
|
|
111
124
|
const progressBarFloatLabel = !skipLabel && /*#__PURE__*/_jsx(ProgressBarFloatLabel, {
|
|
112
125
|
classNames: classNames,
|
|
126
|
+
disableAnimateOnMount: disableAnimateOnMount,
|
|
113
127
|
disabled: disabled,
|
|
114
128
|
label: label,
|
|
115
129
|
labelPlacement: labelPlacement,
|
|
@@ -65,8 +65,8 @@ export const ProgressCircle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2,
|
|
|
65
65
|
weight = 'normal',
|
|
66
66
|
progress,
|
|
67
67
|
color = 'bgPrimary',
|
|
68
|
-
disabled
|
|
69
|
-
disableAnimateOnMount
|
|
68
|
+
disabled,
|
|
69
|
+
disableAnimateOnMount,
|
|
70
70
|
testID,
|
|
71
71
|
hideContent,
|
|
72
72
|
hideText,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coinbase/cds-web",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.36.0",
|
|
4
4
|
"description": "Coinbase Design System - Web",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -203,7 +203,7 @@
|
|
|
203
203
|
"react-dom": "^18.3.1"
|
|
204
204
|
},
|
|
205
205
|
"dependencies": {
|
|
206
|
-
"@coinbase/cds-common": "^8.
|
|
206
|
+
"@coinbase/cds-common": "^8.36.0",
|
|
207
207
|
"@coinbase/cds-icons": "^5.9.0",
|
|
208
208
|
"@coinbase/cds-illustrations": "^4.29.0",
|
|
209
209
|
"@coinbase/cds-lottie-files": "^3.3.4",
|