@coinbase/cds-mobile 9.8.0 → 9.9.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
CHANGED
|
@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
|
|
|
8
8
|
|
|
9
9
|
<!-- template-start -->
|
|
10
10
|
|
|
11
|
+
## 9.9.0 (7/27/2026 PST)
|
|
12
|
+
|
|
13
|
+
#### 🚀 Updates
|
|
14
|
+
|
|
15
|
+
- Feat: support disabling icon scaling. [[#811](https://github.com/coinbase/cds/pull/811)]
|
|
16
|
+
|
|
11
17
|
## 9.8.0 (7/23/2026 PST)
|
|
12
18
|
|
|
13
19
|
#### 🚀 Updates
|
package/dts/icons/Icon.d.ts
CHANGED
|
@@ -15,7 +15,8 @@ export declare const Icon: import('react').MemoExoticComponent<
|
|
|
15
15
|
Pick<
|
|
16
16
|
import('@coinbase/cds-common').SharedAccessibilityProps,
|
|
17
17
|
'accessibilityLabel' | 'accessibilityHint'
|
|
18
|
-
> &
|
|
18
|
+
> &
|
|
19
|
+
Pick<import('react-native').TextProps, 'allowFontScaling'> & {
|
|
19
20
|
size?: import('@coinbase/cds-common').IconSize;
|
|
20
21
|
name: IconName;
|
|
21
22
|
fallback?: null | React.ReactNode;
|
package/dts/icons/Icon.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/icons/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAC;AAGpE,OAAO,EAGL,iBAAiB,EACjB,KAAK,aAAa,IAAI,oBAAoB,EAC1C,KAAK,SAAS,IAAI,gBAAgB,EACnC,MAAM,cAAc,CAAC;AAEtB,MAAM,MAAM,aAAa,GAAG,oBAAoB,CAAC,QAAQ,CAAC,CAAC;AAC3D,MAAM,MAAM,SAAS,GAAG,gBAAgB,CAAC,QAAQ,CAAC,CAAC;AAEnD,eAAO,MAAM,IAAI;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/icons/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAC;AAGpE,OAAO,EAGL,iBAAiB,EACjB,KAAK,aAAa,IAAI,oBAAoB,EAC1C,KAAK,SAAS,IAAI,gBAAgB,EACnC,MAAM,cAAc,CAAC;AAEtB,MAAM,MAAM,aAAa,GAAG,oBAAoB,CAAC,QAAQ,CAAC,CAAC;AAC3D,MAAM,MAAM,SAAS,GAAG,gBAAgB,CAAC,QAAQ,CAAC,CAAC;AAEnD,eAAO,MAAM,IAAI;;;;;;;;;;;YAMitG,CAAC;YAAyE,CAAC;;;;kWAH3yG,CAAC;AAEH,OAAO,EAAE,iBAAiB,EAAE,CAAC"}
|
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
Animated,
|
|
4
|
+
type StyleProp,
|
|
5
|
+
Text,
|
|
6
|
+
type TextProps as NativeTextProps,
|
|
7
|
+
type TextStyle,
|
|
8
|
+
type ViewStyle,
|
|
9
|
+
} from 'react-native';
|
|
3
10
|
import type { ThemeVars } from '@coinbase/cds-common/core/theme';
|
|
4
11
|
import type { IconSize, IconSourcePixelSize } from '@coinbase/cds-common/types/IconSize';
|
|
5
12
|
import type { SharedAccessibilityProps } from '@coinbase/cds-common/types/SharedAccessibilityProps';
|
|
@@ -48,7 +55,8 @@ export type CreateIconConfig<Name extends string> = {
|
|
|
48
55
|
};
|
|
49
56
|
export type IconBaseProps<Name extends string = string> = SharedProps &
|
|
50
57
|
PaddingProps &
|
|
51
|
-
Pick<SharedAccessibilityProps, 'accessibilityLabel' | 'accessibilityHint'> &
|
|
58
|
+
Pick<SharedAccessibilityProps, 'accessibilityLabel' | 'accessibilityHint'> &
|
|
59
|
+
Pick<NativeTextProps, 'allowFontScaling'> & {
|
|
52
60
|
/**
|
|
53
61
|
* Size for a given icon.
|
|
54
62
|
* @default m
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createIcon.d.ts","sourceRoot":"","sources":["../../src/icons/createIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EACL,QAAQ,EACR,KAAK,SAAS,EACd,IAAI,EACJ,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,QAAQ,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AACzF,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yCAAyC,CAAC;AAO5E,uDAAuD;AACvD,eAAO,MAAM,wBAAwB,kBAAkB,CAAC;AAExD;;;;GAIG;AACH,MAAM,MAAM,QAAQ,CAAC,IAAI,SAAS,MAAM,IAAI,MAAM,CAChD,GAAG,IAAI,IAAI,mBAAmB,IAAI,QAAQ,GAAG,UAAU,EAAE,EACzD,MAAM,CACP,CAAC;AAEF,uEAAuE;AACvE,MAAM,MAAM,qBAAqB,CAAC,IAAI,SAAS,MAAM,IAAI;IACvD,wCAAwC;IACxC,QAAQ,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IACzB,+CAA+C;IAC/C,IAAI,EAAE,IAAI,CAAC;IACX,gDAAgD;IAChD,IAAI,EAAE,QAAQ,CAAC;IACf,yEAAyE;IACzE,SAAS,EAAE,MAAM,CAAC;IAClB,gDAAgD;IAChD,MAAM,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,0EAA0E;AAC1E,MAAM,MAAM,gBAAgB,CAAC,IAAI,SAAS,MAAM,IAAI;IAClD,6CAA6C;IAC7C,QAAQ,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,qBAAqB,CAAC,IAAI,CAAC,KAAK,MAAM,GAAG,SAAS,CAAC;CACtE,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,IAAI,SAAS,MAAM,GAAG,MAAM,IAAI,WAAW,GACnE,YAAY,GACZ,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,GAAG,mBAAmB,CAAC,GAAG;
|
|
1
|
+
{"version":3,"file":"createIcon.d.ts","sourceRoot":"","sources":["../../src/icons/createIcon.tsx"],"names":[],"mappings":"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"}
|
package/esm/icons/createIcon.js
CHANGED
|
@@ -78,16 +78,15 @@ export function createIcon(_ref2) {
|
|
|
78
78
|
paddingEnd,
|
|
79
79
|
paddingBottom,
|
|
80
80
|
paddingStart,
|
|
81
|
-
active
|
|
81
|
+
active,
|
|
82
|
+
allowFontScaling = true
|
|
82
83
|
} = mergedProps;
|
|
83
84
|
const TextComponent = animated ? Animated.Text : Text;
|
|
84
85
|
const theme = useTheme();
|
|
85
86
|
const {
|
|
86
87
|
fontScale
|
|
87
88
|
} = useWindowDimensions();
|
|
88
|
-
|
|
89
|
-
// Scale according to device a11y font size settings
|
|
90
|
-
const iconSize = theme.iconSize[size] * fontScale;
|
|
89
|
+
const iconSize = allowFontScaling ? theme.iconSize[size] * fontScale : theme.iconSize[size];
|
|
91
90
|
const iconColor = theme.color[color];
|
|
92
91
|
const finalColor = dangerouslySetColor != null ? dangerouslySetColor : iconColor;
|
|
93
92
|
const rootStyle = useMemo(() => {
|
|
@@ -129,7 +128,9 @@ export function createIcon(_ref2) {
|
|
|
129
128
|
accessibilityHint: accessibilityHint,
|
|
130
129
|
accessibilityLabel: accessibilityLabel,
|
|
131
130
|
accessibilityRole: "image",
|
|
132
|
-
accessible: !!accessibilityLabel
|
|
131
|
+
accessible: !!accessibilityLabel
|
|
132
|
+
// We do not use the built in scaling because it changes the icon thickness
|
|
133
|
+
,
|
|
133
134
|
allowFontScaling: false
|
|
134
135
|
// TODO https://linear.app/coinbase/issue/CDS-1518/audit-potentially-harmful-reactnative-animated-pattern
|
|
135
136
|
,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coinbase/cds-mobile",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.9.0",
|
|
4
4
|
"description": "Coinbase Design System - Mobile",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -218,9 +218,9 @@
|
|
|
218
218
|
"react-native-worklets": "0.5.2"
|
|
219
219
|
},
|
|
220
220
|
"dependencies": {
|
|
221
|
-
"@coinbase/cds-common": "^9.
|
|
221
|
+
"@coinbase/cds-common": "^9.9.0",
|
|
222
222
|
"@coinbase/cds-icons": "^5.21.0",
|
|
223
|
-
"@coinbase/cds-illustrations": "^4.
|
|
223
|
+
"@coinbase/cds-illustrations": "^4.45.0",
|
|
224
224
|
"@coinbase/cds-lottie-files": "^3.3.4",
|
|
225
225
|
"@coinbase/cds-utils": "^2.3.5",
|
|
226
226
|
"@floating-ui/react-native": "^0.10.5",
|