@coinbase/cds-web 8.27.3 → 8.28.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.
Files changed (10) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dts/cells/ContentCell.d.ts +88 -1
  3. package/dts/cells/ContentCell.d.ts.map +1 -1
  4. package/dts/cells/ContentCellFallback.d.ts +24 -12
  5. package/dts/cells/ContentCellFallback.d.ts.map +1 -1
  6. package/dts/cells/ListCell.d.ts +18 -5
  7. package/dts/cells/ListCell.d.ts.map +1 -1
  8. package/esm/cells/ContentCell.js +124 -37
  9. package/esm/cells/ContentCellFallback.js +33 -4
  10. package/package.json +4 -4
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.28.0 (12/10/2025 PST)
12
+
13
+ #### 🚀 Updates
14
+
15
+ - Updated ContentCell to support condensed variant. [[#205](https://github.com/coinbase/cds/pull/205)] [DX-5013]
16
+
17
+ ## 8.27.4 ((12/7/2025, 11:54 AM PST))
18
+
19
+ This is an artificial version bump with no new change.
20
+
11
21
  ## 8.27.3 ((12/5/2025, 01:46 PM PST))
12
22
 
13
23
  This is an artificial version bump with no new change.
package/dts/cells/ContentCell.d.ts CHANGED
@@ -4,21 +4,105 @@ import { type CellBaseProps } from './Cell';
4
4
  import { type CellAccessoryType } from './CellAccessory';
5
5
  export declare const contentCellDefaultElement = 'div';
6
6
  export type ContentCellDefaultElement = typeof contentCellDefaultElement;
7
+ /**
8
+ * @deprecated this component will be removed in a future version. Use ListCell instead.
9
+ */
7
10
  export type ContentCellBaseProps = Polymorphic.ExtendableProps<
8
11
  Omit<CellBaseProps, 'children'>,
9
12
  {
10
13
  /** Accessory to display at the end of the cell. */
11
14
  accessory?: CellAccessoryType;
15
+ /**
16
+ * @deprecated Use `spacingVariant="compact"` instead. `compact` will be removed in a future major release.
17
+ */
18
+ compact?: boolean;
19
+ /**
20
+ * Spacing variant configuration.
21
+ * Deprecated value: 'compact'. Prefer 'condensed'.
22
+ *
23
+ * When `spacingVariant="normal"`:
24
+ * 1. `min-height` is `80px`
25
+ * 2. `padding` is `'var(--space-2) var(--space-3)'`
26
+ * 3. `border-radius` is `'var(--borderRadius-200)'`
27
+ *
28
+ * When `spacingVariant="compact"`:
29
+ * 1. same as `spacingVariant="normal"`, except `min-height` is `40px`
30
+ *
31
+ * When `spacingVariant="condensed"`:
32
+ * 1. `min-height` is undefined
33
+ * 2. `padding` is `'var(--space-1) var(--space-2)'`
34
+ * 3. `border-radius` is `'var(--borderRadius-0)'`
35
+ * 4. subtitle uses `label1`
36
+ * 5. title wraps to 2 lines regardless of description content
37
+ * 6. meta is placed alongside the accessory
38
+ *
39
+ * @default 'normal'
40
+ */
41
+ spacingVariant?: 'normal' | 'compact' | 'condensed';
42
+ /**
43
+ * React node to render description. Takes precedence over `description`.
44
+ * When provided, `classNames.description` and `styles.description` are not applied.
45
+ */
46
+ descriptionNode?: React.ReactNode;
12
47
  /** Description of content. Content will wrap accordingly. */
13
48
  description?: React.ReactNode;
49
+ /**
50
+ * React node to render meta. Takes precedence over `meta`.
51
+ * When provided, `classNames.meta` and `styles.meta` are not applied.
52
+ */
53
+ metaNode?: React.ReactNode;
14
54
  /** Media (icon, asset, image, etc) to display at the start of the cell. */
15
55
  media?: React.ReactElement;
16
56
  /** Meta information to display at the end of the title. */
17
57
  meta?: React.ReactNode;
58
+ /**
59
+ * React node to render subtitle. Takes precedence over `subtitle`.
60
+ * When provided, `classNames.subtitle` and `styles.subtitle` are not applied.
61
+ */
62
+ subtitleNode?: React.ReactNode;
18
63
  /** Subtitle of content. Max 1 line, otherwise will truncate. */
19
64
  subtitle?: React.ReactNode;
20
- /** Title of content. Max 1 line, otherwise will truncate. */
65
+ /**
66
+ * React node to render title. Takes precedence over `title`.
67
+ * When provided, `classNames.title` and `styles.title` are not applied.
68
+ */
69
+ titleNode?: React.ReactNode;
70
+ /** Title of content. Up to 2 lines depending on spacing variant. */
21
71
  title?: React.ReactNode;
72
+ /**
73
+ * Class names for default subcomponents. Ignored when the corresponding `xxNode` prop is used.
74
+ */
75
+ classNames?: {
76
+ root?: string;
77
+ media?: string;
78
+ accessory?: string;
79
+ contentContainer?: string;
80
+ pressable?: string;
81
+ mainContent?: string;
82
+ title?: string;
83
+ subtitle?: string;
84
+ end?: string;
85
+ metaContainer?: string;
86
+ meta?: string;
87
+ description?: string;
88
+ };
89
+ /**
90
+ * Styles for default subcomponents. Ignored when the corresponding `xxNode` prop is used.
91
+ */
92
+ styles?: {
93
+ root?: React.CSSProperties;
94
+ media?: React.CSSProperties;
95
+ accessory?: React.CSSProperties;
96
+ contentContainer?: React.CSSProperties;
97
+ pressable?: React.CSSProperties;
98
+ mainContent?: React.CSSProperties;
99
+ title?: React.CSSProperties;
100
+ subtitle?: React.CSSProperties;
101
+ end?: React.CSSProperties;
102
+ metaContainer?: React.CSSProperties;
103
+ meta?: React.CSSProperties;
104
+ description?: React.CSSProperties;
105
+ };
22
106
  }
23
107
  >;
24
108
  export type ContentCellProps<AsComponent extends React.ElementType> = Polymorphic.Props<
@@ -29,6 +113,9 @@ type ContentCellComponent = (<AsComponent extends React.ElementType = ContentCel
29
113
  props: ContentCellProps<AsComponent>,
30
114
  ) => Polymorphic.ReactReturn) &
31
115
  Polymorphic.ReactNamed;
116
+ /**
117
+ * @deprecated this component will be removed in a future version. Use ListCell instead.
118
+ */
32
119
  export declare const ContentCell: ContentCellComponent;
33
120
  export {};
34
121
  //# sourceMappingURL=ContentCell.d.ts.map
package/dts/cells/ContentCell.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ContentCell.d.ts","sourceRoot":"","sources":["../../src/cells/ContentCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAMxD,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EAAiB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAgBxE,eAAO,MAAM,yBAAyB,QAAQ,CAAC;AAE/C,MAAM,MAAM,yBAAyB,GAAG,OAAO,yBAAyB,CAAC;AAEzE,MAAM,MAAM,oBAAoB,GAAG,WAAW,CAAC,eAAe,CAC5D,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,EAC/B;IACE,mDAAmD;IACnD,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,6DAA6D;IAC7D,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,2EAA2E;IAC3E,KAAK,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC3B,2DAA2D;IAC3D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,6DAA6D;IAC7D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CACF,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,IAAI,WAAW,CAAC,KAAK,CACrF,WAAW,EACX,oBAAoB,CACrB,CAAC;AAEF,KAAK,oBAAoB,GAAG,CAAC,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,yBAAyB,EAC7F,KAAK,EAAE,gBAAgB,CAAC,WAAW,CAAC,KACjC,WAAW,CAAC,WAAW,CAAC,GAC3B,WAAW,CAAC,UAAU,CAAC;AAEzB,eAAO,MAAM,WAAW,EAAE,oBAkGzB,CAAC"}
1
+ {"version":3,"file":"ContentCell.d.ts","sourceRoot":"","sources":["../../src/cells/ContentCell.tsx"],"names":[],"mappings":"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"}
package/dts/cells/ContentCellFallback.d.ts CHANGED
@@ -1,17 +1,29 @@
1
1
  import React from 'react';
2
2
  import type { FallbackRectWidthProps } from '@coinbase/cds-common/types';
3
+ import { type CellAccessoryType } from './CellAccessory';
3
4
  import type { CellMediaType } from './CellMedia';
4
- export type ContentCellFallbackProps = FallbackRectWidthProps & {
5
- /** Display description shimmer. */
6
- description?: boolean;
7
- /** Display media shimmer with a shape according to type. */
8
- media?: CellMediaType;
9
- /** Display meta shimmer. */
10
- meta?: boolean;
11
- /** Display subtitle shimmer. */
12
- subtitle?: boolean;
13
- /** Display title shimmer. */
14
- title?: boolean;
15
- };
5
+ import type { ContentCellBaseProps } from './ContentCell';
6
+ type ContentCellFallbackSpacingProps = Pick<
7
+ ContentCellBaseProps,
8
+ 'innerSpacing' | 'outerSpacing' | 'spacingVariant'
9
+ >;
10
+ export type ContentCellFallbackProps = FallbackRectWidthProps &
11
+ ContentCellFallbackSpacingProps & {
12
+ /** Accessory to display at the end of the cell. */
13
+ accessory?: CellAccessoryType;
14
+ /** Custom accessory rendered at the end of the cell. Takes precedence over `accessory`. */
15
+ accessoryNode?: React.ReactNode;
16
+ /** Display description shimmer. */
17
+ description?: boolean;
18
+ /** Display media shimmer with a shape according to type. */
19
+ media?: CellMediaType;
20
+ /** Display meta shimmer. */
21
+ meta?: boolean;
22
+ /** Display subtitle shimmer. */
23
+ subtitle?: boolean;
24
+ /** Display title shimmer. */
25
+ title?: boolean;
26
+ };
16
27
  export declare const ContentCellFallback: React.NamedExoticComponent<ContentCellFallbackProps>;
28
+ export {};
17
29
  //# sourceMappingURL=ContentCellFallback.d.ts.map
package/dts/cells/ContentCellFallback.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ContentCellFallback.d.ts","sourceRoot":"","sources":["../../src/cells/ContentCellFallback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAOzE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAGjD,MAAM,MAAM,wBAAwB,GAAG,sBAAsB,GAAG;IAC9D,mCAAmC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAMF,eAAO,MAAM,mBAAmB,sDA4D9B,CAAC"}
1
+ {"version":3,"file":"ContentCellFallback.d.ts","sourceRoot":"","sources":["../../src/cells/ContentCellFallback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAOzE,OAAO,EAAiB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAI1D,KAAK,+BAA+B,GAAG,IAAI,CACzC,oBAAoB,EACpB,cAAc,GAAG,cAAc,GAAG,gBAAgB,CACnD,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,sBAAsB,GAC3D,+BAA+B,GAAG;IAChC,mDAAmD;IACnD,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,2FAA2F;IAC3F,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,mCAAmC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAMJ,eAAO,MAAM,mBAAmB,sDA6F9B,CAAC"}
package/dts/cells/ListCell.d.ts CHANGED
@@ -60,7 +60,10 @@ export type ListCellBaseProps = Polymorphic.ExtendableProps<
60
60
  spacingVariant?: 'normal' | 'compact' | 'condensed';
61
61
  /** 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`. */
62
62
  description?: React.ReactNode;
63
- /** React node to render description. Takes precedence over `description`. */
63
+ /**
64
+ * React node to render description. Takes precedence over `description`.
65
+ * When provided, `classNames.description` and `styles.description` are not applied.
66
+ */
64
67
  descriptionNode?: React.ReactNode;
65
68
  /**
66
69
  * When there is no description the title will take up two lines by default.
@@ -82,13 +85,21 @@ export type ListCellBaseProps = Polymorphic.ExtendableProps<
82
85
  multiline?: boolean;
83
86
  /** Title of content. Max 1 line (with description) 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 `titleNode`. */
84
87
  title?: React.ReactNode;
85
- /** React node to render title. Takes precedence over `title`. */
88
+ /**
89
+ * React node to render title. Takes precedence over `title`.
90
+ * When provided, `classNames.title` and `styles.title` are not applied.
91
+ */
86
92
  titleNode?: React.ReactNode;
87
93
  /** Subtitle to display below the title and above the description. 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 `subtitleNode`. */
88
94
  subtitle?: React.ReactNode;
89
- /** React node to render subtitle. Takes precedence over `subtitle`. */
95
+ /**
96
+ * React node to render subtitle. Takes precedence over `subtitle`.
97
+ * When provided, `classNames.subtitle` and `styles.subtitle` are not applied.
98
+ */
90
99
  subtitleNode?: React.ReactNode;
91
- /** Class names for the components */
100
+ /**
101
+ * Class names for default subcomponents. Ignored when the corresponding `xxNode` prop is used.
102
+ */
92
103
  classNames?: {
93
104
  root?: string;
94
105
  media?: string;
@@ -103,7 +114,9 @@ export type ListCellBaseProps = Polymorphic.ExtendableProps<
103
114
  subtitle?: string;
104
115
  description?: string;
105
116
  };
106
- /** Styles for the components */
117
+ /**
118
+ * Styles for default subcomponents. Ignored when the corresponding `xxNode` prop is used.
119
+ */
107
120
  styles?: {
108
121
  root?: React.CSSProperties;
109
122
  media?: React.CSSProperties;
package/dts/cells/ListCell.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListCell.d.ts","sourceRoot":"","sources":["../../src/cells/ListCell.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ListCell.d.ts","sourceRoot":"","sources":["../../src/cells/ListCell.tsx"],"names":[],"mappings":"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"}
package/esm/cells/ContentCell.js CHANGED
@@ -1,4 +1,4 @@
1
- const _excluded = ["as", "accessory", "title", "description", "disabled", "media", "meta", "selected", "subtitle", "detailWidth", "priority", "innerSpacing", "outerSpacing", "alignItems"];
1
+ const _excluded = ["as", "accessory", "accessoryNode", "title", "titleNode", "description", "descriptionNode", "disabled", "media", "meta", "metaNode", "selected", "subtitle", "subtitleNode", "detailWidth", "priority", "innerSpacing", "outerSpacing", "compact", "spacingVariant", "alignItems", "className", "classNames", "style", "styles"];
2
2
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
3
3
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
4
4
  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; }
@@ -6,106 +6,193 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
6
6
  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); }
7
7
  function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
8
8
  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; }
9
- import React, { forwardRef, memo } from 'react';
9
+ import React, { forwardRef, memo, useMemo } from 'react';
10
+ import { compactListHeight, listHeight } from '@coinbase/cds-common/tokens/cell';
10
11
  import { isProduction } from '@coinbase/cds-utils';
12
+ import { cx } from '../cx';
11
13
  import { Box } from '../layout/Box';
12
14
  import { HStack } from '../layout/HStack';
13
15
  import { VStack } from '../layout/VStack';
14
16
  import { Text } from '../typography/Text';
15
17
  import { Cell } from './Cell';
16
18
  import { CellAccessory } from './CellAccessory';
19
+ import { condensedInnerSpacing, condensedOuterSpacing } from './ListCell';
17
20
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
18
21
  const overflowCss = "overflowCss-o1npfhjk";
19
22
  const truncationCss = "truncationCss-t1vpzve9";
20
23
  export const contentCellDefaultElement = 'div';
24
+
25
+ /**
26
+ * @deprecated this component will be removed in a future version. Use ListCell instead.
27
+ */
28
+
29
+ /**
30
+ * @deprecated this component will be removed in a future version. Use ListCell instead.
31
+ */
21
32
  export const ContentCell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
33
+ var _props$borderRadius;
22
34
  let {
23
35
  as,
24
36
  accessory,
37
+ accessoryNode,
25
38
  title,
39
+ titleNode,
26
40
  description,
41
+ descriptionNode,
27
42
  disabled,
28
43
  media,
29
44
  meta,
45
+ metaNode,
30
46
  selected,
31
47
  subtitle,
48
+ subtitleNode,
32
49
  detailWidth,
33
50
  priority,
34
51
  innerSpacing,
35
52
  outerSpacing,
36
- alignItems = 'flex-start'
53
+ compact: compactProp,
54
+ spacingVariant = compactProp ? 'compact' : 'normal',
55
+ alignItems = 'flex-start',
56
+ className,
57
+ classNames,
58
+ style,
59
+ styles
37
60
  } = _ref,
38
61
  props = _objectWithoutProperties(_ref, _excluded);
39
62
  const Component = as !== null && as !== void 0 ? as : contentCellDefaultElement;
63
+ const hasTitleContent = Boolean(titleNode !== null && titleNode !== void 0 ? titleNode : title);
64
+ const hasSubtitleContent = Boolean(subtitleNode !== null && subtitleNode !== void 0 ? subtitleNode : subtitle);
65
+ const hasMetaContent = Boolean(metaNode !== null && metaNode !== void 0 ? metaNode : meta);
66
+ const hasDescriptionContent = Boolean(descriptionNode !== null && descriptionNode !== void 0 ? descriptionNode : description);
40
67
  if (!isProduction()) {
41
- if (meta && !title && !subtitle) {
42
- console.error('ContentCell: Cannot use `meta` without a `title` or `subtitle`.');
68
+ if (hasMetaContent && !hasTitleContent && !hasSubtitleContent) {
69
+ console.error('ContentCell: Cannot use meta content without a title or subtitle.');
43
70
  }
44
71
  }
45
72
  const accessoryType = selected ? 'selected' : accessory;
46
- const hasTitles = Boolean(title !== null && title !== void 0 ? title : subtitle);
73
+ const hasTitles = hasTitleContent || hasSubtitleContent;
74
+ const minHeight = spacingVariant === 'compact' ? compactListHeight : spacingVariant === 'normal' ? listHeight : undefined;
75
+ const subtitleFont = spacingVariant === 'condensed' ? 'label1' : 'label2';
76
+ const titleNumberOfLines = spacingVariant === 'condensed' ? 2 : hasDescriptionContent ? 1 : 2;
77
+
78
+ // This meta section will be placed alongside the accessory in the condensed variant,
79
+ // when in other variants, it will be placed alongside the title and subtitle.
80
+ const metaRender = useMemo(() => metaNode ? /*#__PURE__*/_jsx(Box, {
81
+ className: cx(truncationCss, classNames === null || classNames === void 0 ? void 0 : classNames.metaContainer),
82
+ flexGrow: 0,
83
+ flexShrink: 0,
84
+ justifyContent: "flex-end",
85
+ paddingStart: 2,
86
+ paddingTop: 0.5,
87
+ style: styles === null || styles === void 0 ? void 0 : styles.metaContainer,
88
+ children: metaNode
89
+ }) : meta ? /*#__PURE__*/_jsx(Box, {
90
+ className: cx(truncationCss, classNames === null || classNames === void 0 ? void 0 : classNames.metaContainer),
91
+ flexGrow: 0,
92
+ flexShrink: 0,
93
+ justifyContent: "flex-end",
94
+ paddingStart: 2,
95
+ paddingTop: 0.5,
96
+ style: styles === null || styles === void 0 ? void 0 : styles.metaContainer,
97
+ children: /*#__PURE__*/_jsx(Text, {
98
+ className: classNames === null || classNames === void 0 ? void 0 : classNames.meta,
99
+ color: "fgMuted",
100
+ font: "label2",
101
+ overflow: "truncate",
102
+ style: styles === null || styles === void 0 ? void 0 : styles.meta,
103
+ children: meta
104
+ })
105
+ }) : null, [metaNode, meta, classNames === null || classNames === void 0 ? void 0 : classNames.metaContainer, styles === null || styles === void 0 ? void 0 : styles.metaContainer, classNames === null || classNames === void 0 ? void 0 : classNames.meta, styles === null || styles === void 0 ? void 0 : styles.meta]);
106
+ const accessoryRender = useMemo(() => {
107
+ if (spacingVariant !== 'condensed') {
108
+ return accessoryType ? /*#__PURE__*/_jsx(CellAccessory, {
109
+ paddingTop: 0.5,
110
+ type: accessoryType
111
+ }) : undefined;
112
+ }
113
+ if (!accessoryType && !metaRender) {
114
+ return undefined;
115
+ }
116
+ return /*#__PURE__*/_jsxs(HStack, {
117
+ alignItems: "center",
118
+ gap: 2,
119
+ children: [metaRender, accessoryType && /*#__PURE__*/_jsx(CellAccessory, {
120
+ paddingTop: 0.5,
121
+ type: accessoryType
122
+ })]
123
+ });
124
+ }, [spacingVariant, accessoryType, metaRender]);
47
125
  return /*#__PURE__*/_jsxs(Cell, _objectSpread(_objectSpread({
48
126
  ref: ref,
49
- accessory: accessoryType && /*#__PURE__*/_jsx(CellAccessory, {
50
- paddingTop: 0.5,
51
- type: accessoryType
52
- }),
127
+ accessory: accessoryRender,
128
+ accessoryNode: accessoryNode,
53
129
  alignItems: alignItems,
54
130
  as: Component,
131
+ borderRadius: (_props$borderRadius = props.borderRadius) !== null && _props$borderRadius !== void 0 ? _props$borderRadius : spacingVariant === 'condensed' ? 0 : undefined,
132
+ className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
133
+ classNames: {
134
+ accessory: classNames === null || classNames === void 0 ? void 0 : classNames.accessory,
135
+ contentContainer: classNames === null || classNames === void 0 ? void 0 : classNames.contentContainer,
136
+ media: classNames === null || classNames === void 0 ? void 0 : classNames.media,
137
+ pressable: classNames === null || classNames === void 0 ? void 0 : classNames.pressable
138
+ },
55
139
  detailWidth: detailWidth,
56
140
  disabled: disabled,
57
- innerSpacing: innerSpacing,
141
+ innerSpacing: innerSpacing !== null && innerSpacing !== void 0 ? innerSpacing : spacingVariant === 'condensed' ? condensedInnerSpacing : undefined,
58
142
  media: media,
59
- outerSpacing: outerSpacing,
143
+ minHeight: minHeight,
144
+ outerSpacing: outerSpacing !== null && outerSpacing !== void 0 ? outerSpacing : spacingVariant === 'condensed' ? condensedOuterSpacing : undefined,
60
145
  priority: priority,
61
- selected: selected
146
+ selected: selected,
147
+ style: _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root),
148
+ styles: {
149
+ accessory: styles === null || styles === void 0 ? void 0 : styles.accessory,
150
+ contentContainer: styles === null || styles === void 0 ? void 0 : styles.contentContainer,
151
+ media: styles === null || styles === void 0 ? void 0 : styles.media,
152
+ pressable: styles === null || styles === void 0 ? void 0 : styles.pressable
153
+ }
62
154
  }, props), {}, {
63
155
  children: [hasTitles && /*#__PURE__*/_jsxs(HStack, {
64
156
  alignItems: "flex-start",
65
157
  justifyContent: "space-between",
66
158
  children: [/*#__PURE__*/_jsxs(VStack, {
67
- className: truncationCss,
159
+ className: cx(truncationCss, classNames === null || classNames === void 0 ? void 0 : classNames.mainContent),
68
160
  flexGrow: 1,
69
161
  flexShrink: 1,
70
- children: [!!title && /*#__PURE__*/_jsx(Text, {
162
+ style: styles === null || styles === void 0 ? void 0 : styles.mainContent,
163
+ children: [titleNode ? titleNode : title ? /*#__PURE__*/_jsx(Text, {
71
164
  as: "div",
165
+ className: classNames === null || classNames === void 0 ? void 0 : classNames.title,
72
166
  display: "block",
73
167
  font: "headline",
74
- overflow: "truncate",
168
+ numberOfLines: titleNumberOfLines,
169
+ overflow: titleNumberOfLines === 1 ? 'truncate' : 'wrap',
170
+ style: styles === null || styles === void 0 ? void 0 : styles.title,
75
171
  children: title
76
- }), !!subtitle && /*#__PURE__*/_jsx(Text, {
172
+ }) : null, subtitleNode ? subtitleNode : subtitle ? /*#__PURE__*/_jsx(Text, {
77
173
  as: "div",
174
+ className: classNames === null || classNames === void 0 ? void 0 : classNames.subtitle,
78
175
  display: "block",
79
- font: "label2",
176
+ font: subtitleFont,
80
177
  overflow: "truncate",
81
- paddingBottom: description ? 0.5 : 0,
82
- paddingTop: title ? 0.5 : 0,
178
+ paddingBottom: hasDescriptionContent ? 0.5 : 0,
179
+ paddingTop: hasTitleContent ? 0.5 : 0,
180
+ style: styles === null || styles === void 0 ? void 0 : styles.subtitle,
83
181
  children: subtitle
84
- })]
85
- }), !!meta && /*#__PURE__*/_jsx(Box, {
86
- className: truncationCss,
87
- flexGrow: 0,
88
- flexShrink: 0,
89
- justifyContent: "flex-end",
90
- paddingStart: 2,
91
- paddingTop: 0.5,
92
- children: /*#__PURE__*/_jsx(Text, {
93
- color: "fgMuted",
94
- font: "label2",
95
- overflow: "truncate",
96
- children: meta
97
- })
98
- })]
99
- }), !!description && /*#__PURE__*/_jsx("div", {
182
+ }) : null]
183
+ }), spacingVariant !== 'condensed' && metaRender]
184
+ }), descriptionNode ? descriptionNode : description ? /*#__PURE__*/_jsx("div", {
100
185
  className: overflowCss,
101
186
  children: /*#__PURE__*/_jsx(Text, {
102
187
  as: "div",
188
+ className: classNames === null || classNames === void 0 ? void 0 : classNames.description,
103
189
  color: "fgMuted",
104
190
  display: "block",
105
191
  font: "body",
192
+ style: styles === null || styles === void 0 ? void 0 : styles.description,
106
193
  children: description
107
194
  })
108
- })]
195
+ }) : null]
109
196
  }));
110
197
  }));
111
198
  import "./ContentCell.css";
package/esm/cells/ContentCellFallback.js CHANGED
@@ -1,12 +1,16 @@
1
1
  import React, { memo } from 'react';
2
+ import { compactListHeight, listHeight } from '@coinbase/cds-common/tokens/cell';
2
3
  import { getRectWidthVariant } from '@coinbase/cds-common/utils/getRectWidthVariant';
3
4
  import { Box } from '../layout/Box';
4
5
  import { Fallback } from '../layout/Fallback';
5
6
  import { Cell } from './Cell';
7
+ import { CellAccessory } from './CellAccessory';
8
+ import { condensedInnerSpacing, condensedOuterSpacing } from './ListCell';
6
9
  import { MediaFallback } from './MediaFallback';
7
10
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
8
11
  const fullWidthStyle = {
9
- width: '100%'
12
+ width: '100%',
13
+ display: 'block'
10
14
  };
11
15
  const floatStyle = {
12
16
  float: 'right',
@@ -14,21 +18,46 @@ const floatStyle = {
14
18
  };
15
19
  export const ContentCellFallback = /*#__PURE__*/memo(function ContentCellFallback(_ref) {
16
20
  let {
21
+ accessory,
22
+ accessoryNode,
17
23
  title,
18
24
  description,
19
25
  media,
20
26
  meta,
21
27
  subtitle,
22
28
  disableRandomRectWidth,
23
- rectWidthVariant
29
+ rectWidthVariant,
30
+ spacingVariant = 'normal',
31
+ innerSpacing,
32
+ outerSpacing
24
33
  } = _ref;
25
34
  // We can't use ContentCell here as we need to account for percentage based widths.
26
35
  // Flexbox collides with percentages also, so we need to wrap in normal divs.
36
+ const minHeight = spacingVariant === 'compact' ? compactListHeight : spacingVariant === 'normal' ? listHeight : undefined;
37
+ const subtitleHeight = spacingVariant === 'condensed' ? 18 : 16;
27
38
  return /*#__PURE__*/_jsx(Cell, {
39
+ accessory: accessory ? /*#__PURE__*/_jsx(CellAccessory, {
40
+ paddingTop: 0.5,
41
+ type: accessory
42
+ }) : undefined,
43
+ accessoryNode: accessoryNode,
44
+ borderRadius: spacingVariant === 'condensed' ? 0 : undefined,
45
+ innerSpacing: innerSpacing !== null && innerSpacing !== void 0 ? innerSpacing : spacingVariant === 'condensed' ? condensedInnerSpacing : undefined,
28
46
  media: media && /*#__PURE__*/_jsx(MediaFallback, {
29
47
  type: media
30
48
  }),
31
- children: /*#__PURE__*/_jsxs("div", {
49
+ minHeight: minHeight,
50
+ outerSpacing: outerSpacing !== null && outerSpacing !== void 0 ? outerSpacing : spacingVariant === 'condensed' ? condensedOuterSpacing : undefined,
51
+ styles: {
52
+ media: {
53
+ alignSelf: 'flex-start'
54
+ },
55
+ accessory: {
56
+ alignSelf: 'flex-start'
57
+ }
58
+ },
59
+ children: /*#__PURE__*/_jsxs(Box, {
60
+ paddingTop: spacingVariant === 'condensed' ? 0.5 : 0,
32
61
  style: fullWidthStyle,
33
62
  children: [meta && /*#__PURE__*/_jsx("div", {
34
63
  style: floatStyle,
@@ -52,7 +81,7 @@ export const ContentCellFallback = /*#__PURE__*/memo(function ContentCellFallbac
52
81
  }), subtitle && /*#__PURE__*/_jsx(Fallback, {
53
82
  percentage: true,
54
83
  disableRandomRectWidth: disableRandomRectWidth,
55
- height: 16,
84
+ height: subtitleHeight,
56
85
  paddingTop: 0.5,
57
86
  rectWidthVariant: getRectWidthVariant(rectWidthVariant, 2),
58
87
  width: 35
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinbase/cds-web",
3
- "version": "8.27.3",
3
+ "version": "8.28.0",
4
4
  "description": "Coinbase Design System - Web",
5
5
  "repository": {
6
6
  "type": "git",
@@ -147,9 +147,9 @@
147
147
  "react-dom": "^18.3.1"
148
148
  },
149
149
  "dependencies": {
150
- "@coinbase/cds-common": "^8.27.3",
151
- "@coinbase/cds-icons": "^5.7.0",
152
- "@coinbase/cds-illustrations": "^4.28.0",
150
+ "@coinbase/cds-common": "^8.28.0",
151
+ "@coinbase/cds-icons": "^5.8.0",
152
+ "@coinbase/cds-illustrations": "^4.29.0",
153
153
  "@coinbase/cds-lottie-files": "^3.3.3",
154
154
  "@coinbase/cds-utils": "^2.3.4",
155
155
  "@floating-ui/react-dom": "^2.1.1",