@coinbase/cds-mobile 8.47.1 → 8.47.3

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.
Files changed (4) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/esm/cards/CardRoot.js +1 -1
  3. package/esm/cards/__stories__/MessagingCard.stories.js +89 -33
  4. 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.47.3 ((2/20/2026, 09:16 AM PST))
12
+
13
+ This is an artificial version bump with no new change.
14
+
15
+ ## 8.47.2 (2/19/2026 PST)
16
+
17
+ #### 🐞 Fixes
18
+
19
+ - Fix mobile CardRoot style forwarding logic. [[#405](https://github.com/coinbase/cds/pull/405)]
20
+
11
21
  ## 8.47.1 (2/19/2026 PST)
12
22
 
13
23
  #### 🐞 Fixes
package/esm/cards/CardRoot.js CHANGED
@@ -1,4 +1,4 @@
1
- const _excluded = ["children", "style", "renderAsPressable"];
1
+ const _excluded = ["children", "renderAsPressable"];
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, { forwardRef, memo } from 'react';
package/esm/cards/__stories__/MessagingCard.stories.js CHANGED
@@ -65,9 +65,7 @@ const DismissibleCardsExample = () => {
65
65
  height: 100,
66
66
  resizeMode: "cover",
67
67
  shape: "rectangle",
68
- source: {
69
- uri: coinbaseOneLogo
70
- },
68
+ source: coinbaseOneLogo,
71
69
  width: 80
72
70
  }) : /*#__PURE__*/_jsx(Pictogram, {
73
71
  accessibilityLabel: "Add to watchlist",
@@ -105,9 +103,7 @@ const MessagingCardScreen = () => {
105
103
  height: 120,
106
104
  resizeMode: "cover",
107
105
  shape: "rectangle",
108
- source: {
109
- uri: coinbaseOneLogo
110
- },
106
+ source: coinbaseOneLogo,
111
107
  width: 90
112
108
  }),
113
109
  mediaPlacement: "end",
@@ -162,9 +158,7 @@ const MessagingCardScreen = () => {
162
158
  height: 120,
163
159
  resizeMode: "cover",
164
160
  shape: "rectangle",
165
- source: {
166
- uri: coinbaseOneLogo
167
- },
161
+ source: coinbaseOneLogo,
168
162
  width: 90
169
163
  }),
170
164
  mediaPlacement: "end",
@@ -190,9 +184,7 @@ const MessagingCardScreen = () => {
190
184
  height: 120,
191
185
  resizeMode: "cover",
192
186
  shape: "rectangle",
193
- source: {
194
- uri: coinbaseOneLogo
195
- },
187
+ source: coinbaseOneLogo,
196
188
  width: 90
197
189
  }),
198
190
  mediaPlacement: "end",
@@ -218,9 +210,7 @@ const MessagingCardScreen = () => {
218
210
  height: 156,
219
211
  resizeMode: "cover",
220
212
  shape: "rectangle",
221
- source: {
222
- uri: coinbaseOneLogo
223
- },
213
+ source: coinbaseOneLogo,
224
214
  width: 120
225
215
  }),
226
216
  mediaPlacement: "end",
@@ -248,9 +238,7 @@ const MessagingCardScreen = () => {
248
238
  height: 186,
249
239
  resizeMode: "cover",
250
240
  shape: "rectangle",
251
- source: {
252
- uri: coinbaseOneLogo
253
- },
241
+ source: coinbaseOneLogo,
254
242
  width: 130
255
243
  }),
256
244
  mediaPlacement: "end",
@@ -287,9 +275,7 @@ const MessagingCardScreen = () => {
287
275
  height: 156,
288
276
  resizeMode: "cover",
289
277
  shape: "rectangle",
290
- source: {
291
- uri: coinbaseOneLogo
292
- },
278
+ source: coinbaseOneLogo,
293
279
  width: 120
294
280
  }),
295
281
  mediaPlacement: "end",
@@ -339,9 +325,7 @@ const MessagingCardScreen = () => {
339
325
  height: 120,
340
326
  resizeMode: "cover",
341
327
  shape: "rectangle",
342
- source: {
343
- uri: coinbaseOneLogo
344
- },
328
+ source: coinbaseOneLogo,
345
329
  width: 90
346
330
  }),
347
331
  mediaPlacement: "end",
@@ -386,9 +370,7 @@ const MessagingCardScreen = () => {
386
370
  height: 120,
387
371
  resizeMode: "cover",
388
372
  shape: "rectangle",
389
- source: {
390
- uri: coinbaseOneLogo
391
- },
373
+ source: coinbaseOneLogo,
392
374
  width: 90
393
375
  }),
394
376
  mediaPlacement: "end",
@@ -410,6 +392,84 @@ const MessagingCardScreen = () => {
410
392
  type: "nudge"
411
393
  })]
412
394
  })
395
+ }), /*#__PURE__*/_jsx(Example, {
396
+ title: "Custom Background Color",
397
+ children: /*#__PURE__*/_jsxs(VStack, {
398
+ gap: 2,
399
+ children: [/*#__PURE__*/_jsx(MessagingCard, _extends({}, exampleProps, {
400
+ renderAsPressable: true,
401
+ accessibilityLabel: "View card details",
402
+ blendStyles: {
403
+ background: '#1E5A9E'
404
+ },
405
+ description: "Pressable card with custom background via blendStyles.background",
406
+ media: /*#__PURE__*/_jsx(RemoteImage, {
407
+ accessibilityLabel: "Coinbase One promotional image",
408
+ height: 130,
409
+ resizeMode: "cover",
410
+ shape: "rectangle",
411
+ source: coinbaseOneLogo,
412
+ width: 90
413
+ }),
414
+ mediaPlacement: "end",
415
+ onPress: NoopFn,
416
+ title: "Pressable with Custom Background",
417
+ type: "upsell"
418
+ })), /*#__PURE__*/_jsx(MessagingCard, _extends({}, exampleProps, {
419
+ renderAsPressable: true,
420
+ accessibilityLabel: "View nudge details",
421
+ blendStyles: {
422
+ background: '#FFF8E6'
423
+ },
424
+ description: "Pressable nudge with custom background via blendStyles.background",
425
+ media: /*#__PURE__*/_jsx(Pictogram, {
426
+ accessibilityLabel: "Rocket",
427
+ dimension: "48x48",
428
+ name: "baseRocket"
429
+ }),
430
+ mediaPlacement: "end",
431
+ onPress: NoopFn,
432
+ title: "Nudge with Custom Background",
433
+ type: "nudge"
434
+ })), /*#__PURE__*/_jsx(MessagingCard, _extends({}, exampleProps, {
435
+ accessibilityLabel: "Non-pressable card",
436
+ description: "Non-pressable card with custom background via styles.root",
437
+ media: /*#__PURE__*/_jsx(RemoteImage, {
438
+ accessibilityLabel: "Coinbase One promotional image",
439
+ height: 130,
440
+ resizeMode: "cover",
441
+ shape: "rectangle",
442
+ source: coinbaseOneLogo,
443
+ width: 90
444
+ }),
445
+ mediaPlacement: "end",
446
+ renderAsPressable: false,
447
+ styles: {
448
+ root: {
449
+ backgroundColor: '#1E5A9E'
450
+ }
451
+ },
452
+ title: "Non-pressable with Custom Background",
453
+ type: "upsell"
454
+ })), /*#__PURE__*/_jsx(MessagingCard, _extends({}, exampleProps, {
455
+ accessibilityLabel: "Non-pressable nudge",
456
+ description: "Non-pressable nudge with custom background via styles.root",
457
+ media: /*#__PURE__*/_jsx(Pictogram, {
458
+ accessibilityLabel: "Rocket",
459
+ dimension: "48x48",
460
+ name: "baseRocket"
461
+ }),
462
+ mediaPlacement: "end",
463
+ renderAsPressable: false,
464
+ styles: {
465
+ root: {
466
+ backgroundColor: '#FFF8E6'
467
+ }
468
+ },
469
+ title: "Non-pressable Nudge with Custom Background",
470
+ type: "nudge"
471
+ }))]
472
+ })
413
473
  }), /*#__PURE__*/_jsx(Example, {
414
474
  title: "Text Content",
415
475
  children: /*#__PURE__*/_jsxs(VStack, {
@@ -421,9 +481,7 @@ const MessagingCardScreen = () => {
421
481
  height: 160,
422
482
  resizeMode: "cover",
423
483
  shape: "rectangle",
424
- source: {
425
- uri: coinbaseOneLogo
426
- },
484
+ source: coinbaseOneLogo,
427
485
  width: 120
428
486
  }),
429
487
  mediaPlacement: "end",
@@ -446,9 +504,7 @@ const MessagingCardScreen = () => {
446
504
  height: 140,
447
505
  resizeMode: "cover",
448
506
  shape: "rectangle",
449
- source: {
450
- uri: coinbaseOneLogo
451
- },
507
+ source: coinbaseOneLogo,
452
508
  width: 100
453
509
  }),
454
510
  mediaPlacement: "end",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinbase/cds-mobile",
3
- "version": "8.47.1",
3
+ "version": "8.47.3",
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.47.1",
201
+ "@coinbase/cds-common": "^8.47.3",
202
202
  "@coinbase/cds-icons": "^5.11.0",
203
203
  "@coinbase/cds-illustrations": "^4.31.0",
204
204
  "@coinbase/cds-lottie-files": "^3.3.4",