@coinbase/cds-mobile 8.26.0 → 8.27.1

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 (7) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dts/cells/CellAccessory.d.ts +1 -1
  3. package/dts/cells/CellAccessory.d.ts.map +1 -1
  4. package/esm/cells/Cell.js +1 -1
  5. package/esm/cells/CellAccessory.js +9 -0
  6. package/esm/cells/__stories__/ListCell.stories.js +80 -70
  7. 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.27.1 ((12/4/2025, 06:51 AM PST))
12
+
13
+ This is an artificial version bump with no new change.
14
+
15
+ ## 8.27.0 (12/3/2025 PST)
16
+
17
+ #### 🚀 Updates
18
+
19
+ - Feat: introduce `unselected` state for ListCell. [[#194](https://github.com/coinbase/cds/pull/194)] [DX-4947]
20
+
11
21
  ## 8.26.0 (12/1/2025 PST)
12
22
 
13
23
  #### 🚀 Updates
package/dts/cells/CellAccessory.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import type { PaddingProps } from '@coinbase/cds-common/types';
3
- export type CellAccessoryType = 'arrow' | 'more' | 'selected';
3
+ export type CellAccessoryType = 'arrow' | 'more' | 'selected' | 'unselected';
4
4
  export type CellAccessoryProps = PaddingProps & {
5
5
  /** Type of accessory to display at the end. */
6
6
  type: CellAccessoryType;
package/dts/cells/CellAccessory.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CellAccessory.d.ts","sourceRoot":"","sources":["../../src/cells/CellAccessory.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAK/D,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;AAE9D,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG;IAC9C,+CAA+C;IAC/C,IAAI,EAAE,iBAAiB,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,aAAa,gDAwBxB,CAAC"}
1
+ {"version":3,"file":"CellAccessory.d.ts","sourceRoot":"","sources":["../../src/cells/CellAccessory.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAK/D,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,YAAY,CAAC;AAE7E,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG;IAC9C,+CAA+C;IAC/C,IAAI,EAAE,iBAAiB,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,aAAa,gDA4BxB,CAAC"}
package/esm/cells/Cell.js CHANGED
@@ -35,7 +35,7 @@ export const Cell = /*#__PURE__*/memo(function Cell(_ref) {
35
35
  testID,
36
36
  accessibilityLabel,
37
37
  accessibilityHint,
38
- accessibilityRole,
38
+ accessibilityRole = 'button',
39
39
  accessibilityState,
40
40
  gap = 2,
41
41
  columnGap,
package/esm/cells/CellAccessory.js CHANGED
@@ -33,6 +33,15 @@ export const CellAccessory = /*#__PURE__*/memo(function CellAccessory(_ref) {
33
33
  size: "s"
34
34
  });
35
35
  }
36
+ if (type === 'unselected') {
37
+ icon = /*#__PURE__*/_jsx(Icon, {
38
+ name: "checkmark",
39
+ size: "s",
40
+ style: {
41
+ opacity: 0
42
+ }
43
+ });
44
+ }
36
45
  if (!icon) {
37
46
  return null;
38
47
  }
package/esm/cells/__stories__/ListCell.stories.js CHANGED
@@ -1,5 +1,5 @@
1
1
  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); }
2
- import React from 'react';
2
+ import React, { useState } from 'react';
3
3
  import { assets, squareAssets } from '@coinbase/cds-common/internal/data/assets';
4
4
  import { selectCellSpacingConfig } from '@coinbase/cds-common/tokens/select';
5
5
  import { gutter } from '@coinbase/cds-common/tokens/sizing';
@@ -490,75 +490,85 @@ const PriorityContent = () => /*#__PURE__*/_jsxs(_Fragment, {
490
490
  variant: "warning"
491
491
  })]
492
492
  });
493
- const WithAccessory = () => /*#__PURE__*/_jsxs(_Fragment, {
494
- children: [/*#__PURE__*/_jsx(ListCell, {
495
- accessory: "arrow",
496
- spacingVariant: "condensed",
497
- title: "Title"
498
- }), /*#__PURE__*/_jsx(ListCell, {
499
- accessory: "more",
500
- detail: "Detail",
501
- spacingVariant: "condensed",
502
- title: "Title"
503
- }), /*#__PURE__*/_jsx(ListCell, {
504
- accessory: "selected",
505
- description: "Description",
506
- spacingVariant: "condensed",
507
- title: "Title"
508
- }), /*#__PURE__*/_jsx(ListCell, {
509
- accessory: "arrow",
510
- description: "Description",
511
- detail: "Detail",
512
- spacingVariant: "condensed",
513
- title: "Title"
514
- }), /*#__PURE__*/_jsx(ListCell, {
515
- selected: true,
516
- accessory: "arrow",
517
- description: "Description",
518
- detail: "Detail",
519
- spacingVariant: "condensed",
520
- title: "Title"
521
- }), /*#__PURE__*/_jsx(ListCell, {
522
- disableSelectionAccessory: true,
523
- selected: true,
524
- accessory: "arrow",
525
- description: "Description",
526
- detail: "Detail",
527
- spacingVariant: "condensed",
528
- title: "Title"
529
- }), /*#__PURE__*/_jsx(ListCell, {
530
- accessory: "more",
531
- description: "Description",
532
- detail: "Detail",
533
- spacingVariant: "condensed",
534
- subdetail: "Neutral",
535
- title: "Title"
536
- }), /*#__PURE__*/_jsx(ListCell, {
537
- accessory: "selected",
538
- description: "Description",
539
- detail: "Detail",
540
- spacingVariant: "condensed",
541
- subdetail: "+Positive",
542
- title: "Title",
543
- variant: "positive"
544
- }), /*#__PURE__*/_jsx(ListCell, {
545
- accessory: "arrow",
546
- description: "Description",
547
- detail: "Detail",
548
- spacingVariant: "condensed",
549
- subdetail: "-Negative",
550
- title: "Title",
551
- variant: "negative"
552
- }), /*#__PURE__*/_jsx(ListCell, {
553
- accessory: "arrow",
554
- description: "Description",
555
- detail: "Detail",
556
- spacingVariant: "condensed",
557
- subdetail: "Warning",
558
- title: "Title",
559
- variant: "warning"
560
- })]
561
- });
493
+ const WithAccessory = () => {
494
+ const [isSelected, setIsSelected] = useState(false);
495
+ return /*#__PURE__*/_jsxs(_Fragment, {
496
+ children: [/*#__PURE__*/_jsx(ListCell, {
497
+ accessory: "arrow",
498
+ spacingVariant: "condensed",
499
+ title: "Title"
500
+ }), /*#__PURE__*/_jsx(ListCell, {
501
+ accessory: isSelected ? 'selected' : 'unselected',
502
+ description: "Selected state uses the same space, no layout shift when selected",
503
+ onPress: () => setIsSelected(prev => !prev),
504
+ selected: isSelected,
505
+ spacingVariant: "condensed",
506
+ title: "Leverage unselected state"
507
+ }), /*#__PURE__*/_jsx(ListCell, {
508
+ accessory: "more",
509
+ detail: "Detail",
510
+ spacingVariant: "condensed",
511
+ title: "Title"
512
+ }), /*#__PURE__*/_jsx(ListCell, {
513
+ accessory: "selected",
514
+ description: "Description",
515
+ spacingVariant: "condensed",
516
+ title: "Title"
517
+ }), /*#__PURE__*/_jsx(ListCell, {
518
+ accessory: "arrow",
519
+ description: "Description",
520
+ detail: "Detail",
521
+ spacingVariant: "condensed",
522
+ title: "Title"
523
+ }), /*#__PURE__*/_jsx(ListCell, {
524
+ selected: true,
525
+ accessory: "arrow",
526
+ description: "Description",
527
+ detail: "Detail",
528
+ spacingVariant: "condensed",
529
+ title: "Title"
530
+ }), /*#__PURE__*/_jsx(ListCell, {
531
+ disableSelectionAccessory: true,
532
+ selected: true,
533
+ accessory: "arrow",
534
+ description: "Description",
535
+ detail: "Detail",
536
+ spacingVariant: "condensed",
537
+ title: "Title"
538
+ }), /*#__PURE__*/_jsx(ListCell, {
539
+ accessory: "more",
540
+ description: "Description",
541
+ detail: "Detail",
542
+ spacingVariant: "condensed",
543
+ subdetail: "Neutral",
544
+ title: "Title"
545
+ }), /*#__PURE__*/_jsx(ListCell, {
546
+ accessory: "selected",
547
+ description: "Description",
548
+ detail: "Detail",
549
+ spacingVariant: "condensed",
550
+ subdetail: "+Positive",
551
+ title: "Title",
552
+ variant: "positive"
553
+ }), /*#__PURE__*/_jsx(ListCell, {
554
+ accessory: "arrow",
555
+ description: "Description",
556
+ detail: "Detail",
557
+ spacingVariant: "condensed",
558
+ subdetail: "-Negative",
559
+ title: "Title",
560
+ variant: "negative"
561
+ }), /*#__PURE__*/_jsx(ListCell, {
562
+ accessory: "arrow",
563
+ description: "Description",
564
+ detail: "Detail",
565
+ spacingVariant: "condensed",
566
+ subdetail: "Warning",
567
+ title: "Title",
568
+ variant: "warning"
569
+ })]
570
+ });
571
+ };
562
572
  const WithMedia = () => /*#__PURE__*/_jsxs(_Fragment, {
563
573
  children: [/*#__PURE__*/_jsx(ListCell, {
564
574
  media: /*#__PURE__*/_jsx(Icon, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinbase/cds-mobile",
3
- "version": "8.26.0",
3
+ "version": "8.27.1",
4
4
  "description": "Coinbase Design System - Mobile",
5
5
  "repository": {
6
6
  "type": "git",
@@ -154,7 +154,7 @@
154
154
  "react-native-svg": "^14.1.0"
155
155
  },
156
156
  "dependencies": {
157
- "@coinbase/cds-common": "^8.26.0",
157
+ "@coinbase/cds-common": "^8.27.1",
158
158
  "@coinbase/cds-icons": "^5.7.0",
159
159
  "@coinbase/cds-illustrations": "^4.28.0",
160
160
  "@coinbase/cds-lottie-files": "^3.3.3",