@coinbase/cds-mobile 8.49.1 → 8.50.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 +12 -0
- package/dts/buttons/IconButton.d.ts +11 -1
- package/dts/buttons/IconButton.d.ts.map +1 -1
- package/dts/cells/ListCell.d.ts +6 -3
- package/dts/cells/ListCell.d.ts.map +1 -1
- package/esm/buttons/IconButton.js +2 -2
- package/esm/buttons/__stories__/IconButton.stories.js +30 -0
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
|
|
|
8
8
|
|
|
9
9
|
<!-- template-start -->
|
|
10
10
|
|
|
11
|
+
## 8.50.0 (3/6/2026 PST)
|
|
12
|
+
|
|
13
|
+
#### 🚀 Updates
|
|
14
|
+
|
|
15
|
+
- Feat: iconSize customization for IconButton. [[#474](https://github.com/coinbase/cds/pull/474)]
|
|
16
|
+
|
|
17
|
+
## 8.49.2 (3/6/2026 PST)
|
|
18
|
+
|
|
19
|
+
#### 🐞 Fixes
|
|
20
|
+
|
|
21
|
+
- Feat: improve deprecation notice in ListCell. [[#411](https://github.com/coinbase/cds/pull/411)]
|
|
22
|
+
|
|
11
23
|
## 8.49.1 (3/5/2026 PST)
|
|
12
24
|
|
|
13
25
|
#### 🐞 Fixes
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type {
|
|
2
|
+
import type {
|
|
3
|
+
IconButtonVariant,
|
|
4
|
+
IconName,
|
|
5
|
+
IconSize,
|
|
6
|
+
SharedProps,
|
|
7
|
+
} from '@coinbase/cds-common/types';
|
|
3
8
|
import { type PressableBaseProps } from '../system/Pressable';
|
|
4
9
|
import type { ButtonBaseProps } from './Button';
|
|
5
10
|
export type IconButtonBaseProps = SharedProps &
|
|
@@ -7,6 +12,11 @@ export type IconButtonBaseProps = SharedProps &
|
|
|
7
12
|
Pick<ButtonBaseProps, 'disabled' | 'transparent' | 'compact' | 'flush' | 'loading'> & {
|
|
8
13
|
/** Name of the icon, as defined in Figma. */
|
|
9
14
|
name: IconName;
|
|
15
|
+
/**
|
|
16
|
+
* Size for the icon rendered inside the button.
|
|
17
|
+
* @default compact ? 's' : 'm'
|
|
18
|
+
*/
|
|
19
|
+
iconSize?: IconSize;
|
|
10
20
|
/** Whether the icon is active */
|
|
11
21
|
active?: boolean;
|
|
12
22
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/buttons/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAI1D,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/buttons/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAI1D,OAAO,KAAK,EACV,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAKpC,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAEzE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhD,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAC3C,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,GACpC,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC,GAAG;IACpF,6CAA6C;IAC7C,IAAI,EAAE,QAAQ,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B,CAAC;AAEJ,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC;AAElD,eAAO,MAAM,UAAU,iDAiFrB,CAAC"}
|
package/dts/cells/ListCell.d.ts
CHANGED
|
@@ -30,12 +30,12 @@ export type ListCellBaseProps = CellDetailProps &
|
|
|
30
30
|
*/
|
|
31
31
|
action?: React.ReactNode;
|
|
32
32
|
/**
|
|
33
|
-
* @deprecated Use `spacingVariant="
|
|
33
|
+
* @deprecated Use `spacingVariant="condensed"`. `compact` will be removed in a release.
|
|
34
34
|
*/
|
|
35
35
|
compact?: boolean;
|
|
36
36
|
/**
|
|
37
37
|
* Spacing variant configuration.
|
|
38
|
-
* Deprecated
|
|
38
|
+
* Deprecated values: 'normal' and 'compact'. Prefer 'condensed'.
|
|
39
39
|
*
|
|
40
40
|
* When `spacingVariant="normal"`:
|
|
41
41
|
* 1. `min-height` is `80px`
|
|
@@ -56,7 +56,10 @@ export type ListCellBaseProps = CellDetailProps &
|
|
|
56
56
|
*
|
|
57
57
|
* @default 'normal'
|
|
58
58
|
*/
|
|
59
|
-
spacingVariant?:
|
|
59
|
+
spacingVariant?: /** @deprecated Use 'condensed' instead. */
|
|
60
|
+
| 'normal'
|
|
61
|
+
| /** @deprecated Use 'condensed' instead. */ 'compact'
|
|
62
|
+
| 'condensed';
|
|
60
63
|
/** Description of content. Max 1 line (with title) or 2 lines (without), otherwise will truncate. This prop is only intended to accept a string or Text component; other use cases, while allowed, are not supported and may result in unexpected behavior. For arbitrary content, use `descriptionNode`. */
|
|
61
64
|
description?: React.ReactNode;
|
|
62
65
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListCell.d.ts","sourceRoot":"","sources":["../../src/cells/ListCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMpE,OAAO,EAAQ,KAAK,aAAa,EAAE,KAAK,SAAS,EAAoB,MAAM,QAAQ,CAAC;AACpF,OAAO,EAAiB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAEhE,eAAO,MAAM,qBAAqB;;;;CAIF,CAAC;AAGjC,eAAO,MAAM,qBAAqB;;;;CAIF,CAAC;AAEjC,MAAM,MAAM,iBAAiB,GAAG,eAAe,GAC7C,IAAI,CAAC,aAAa,EAAE,WAAW,GAAG,UAAU,CAAC,GAAG;IAC9C,mDAAmD;IACnD,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,gGAAgG;IAChG,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;;;OAIG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,cAAc,CAAC,
|
|
1
|
+
{"version":3,"file":"ListCell.d.ts","sourceRoot":"","sources":["../../src/cells/ListCell.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const _excluded = ["name", "active", "variant", "transparent", "compact", "background", "color", "borderColor", "borderWidth", "borderRadius", "feedback", "flush", "loading", "style", "accessibilityHint", "accessibilityLabel"];
|
|
1
|
+
const _excluded = ["name", "active", "variant", "transparent", "compact", "background", "color", "borderColor", "iconSize", "borderWidth", "borderRadius", "feedback", "flush", "loading", "style", "accessibilityHint", "accessibilityLabel"];
|
|
2
2
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
3
3
|
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
4
4
|
import React, { memo, useCallback, useMemo } from 'react';
|
|
@@ -20,6 +20,7 @@ export const IconButton = /*#__PURE__*/memo(function IconButton(_ref) {
|
|
|
20
20
|
background,
|
|
21
21
|
color,
|
|
22
22
|
borderColor,
|
|
23
|
+
iconSize = compact ? 's' : 'm',
|
|
23
24
|
borderWidth = 100,
|
|
24
25
|
borderRadius = 1000,
|
|
25
26
|
feedback = compact ? 'light' : 'normal',
|
|
@@ -31,7 +32,6 @@ export const IconButton = /*#__PURE__*/memo(function IconButton(_ref) {
|
|
|
31
32
|
} = _ref,
|
|
32
33
|
props = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
33
34
|
const theme = useTheme();
|
|
34
|
-
const iconSize = compact ? 's' : 'm';
|
|
35
35
|
const variantMap = transparent ? transparentVariants : variants;
|
|
36
36
|
const variantStyle = variantMap[variant];
|
|
37
37
|
const colorValue = color != null ? color : variantStyle.color;
|
|
@@ -138,6 +138,36 @@ const IconButtonScreen = () => {
|
|
|
138
138
|
}), variant.title]
|
|
139
139
|
}, index);
|
|
140
140
|
})
|
|
141
|
+
}), /*#__PURE__*/_jsx(Example, {
|
|
142
|
+
inline: true,
|
|
143
|
+
title: "Icon sizes",
|
|
144
|
+
children: /*#__PURE__*/_jsx(Box, {
|
|
145
|
+
alignItems: "center",
|
|
146
|
+
flexDirection: "row",
|
|
147
|
+
justifyContent: "space-between",
|
|
148
|
+
width: 350,
|
|
149
|
+
children: /*#__PURE__*/_jsxs(HStack, {
|
|
150
|
+
gap: 2,
|
|
151
|
+
children: [/*#__PURE__*/_jsx(IconButton, {
|
|
152
|
+
accessibilityLabel: "Extra small icon",
|
|
153
|
+
iconSize: "xs",
|
|
154
|
+
name: iconName
|
|
155
|
+
}), /*#__PURE__*/_jsx(IconButton, {
|
|
156
|
+
accessibilityLabel: "Small icon",
|
|
157
|
+
iconSize: "s",
|
|
158
|
+
name: iconName
|
|
159
|
+
}), /*#__PURE__*/_jsx(IconButton, {
|
|
160
|
+
accessibilityLabel: "Medium icon",
|
|
161
|
+
iconSize: "m",
|
|
162
|
+
name: iconName
|
|
163
|
+
}), /*#__PURE__*/_jsx(IconButton, {
|
|
164
|
+
accessibilityLabel: "Large icon",
|
|
165
|
+
compact: false,
|
|
166
|
+
iconSize: "l",
|
|
167
|
+
name: iconName
|
|
168
|
+
})]
|
|
169
|
+
})
|
|
170
|
+
})
|
|
141
171
|
}), /*#__PURE__*/_jsx(Example, {
|
|
142
172
|
title: "All",
|
|
143
173
|
children: names.map(name => {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coinbase/cds-mobile",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.50.0",
|
|
4
4
|
"description": "Coinbase Design System - Mobile",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -198,7 +198,7 @@
|
|
|
198
198
|
"react-native-svg": "^14.1.0"
|
|
199
199
|
},
|
|
200
200
|
"dependencies": {
|
|
201
|
-
"@coinbase/cds-common": "^8.
|
|
201
|
+
"@coinbase/cds-common": "^8.50.0",
|
|
202
202
|
"@coinbase/cds-icons": "^5.12.0",
|
|
203
203
|
"@coinbase/cds-illustrations": "^4.32.0",
|
|
204
204
|
"@coinbase/cds-lottie-files": "^3.3.4",
|