@coinbase/cds-mobile 8.66.2 → 9.0.0-rc.2

package/esm/cards/__figma__/UpsellCard.figma.js

@@ -38,8 +38,10 @@ figma.connect(UpsellCard, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/
     const theme = useTheme();
     const green60 = "rgb" + theme.spectrum.green60;
     return /*#__PURE__*/_jsx(UpsellCard, _extends({}, props, {
-      dangerouslySetBackground: green60,
       description: description.string,
+      style: {
+        backgroundColor: green60
+      },
       title: title.string
     }));
   }

package/esm/cards/__stories__/ContainedAssetCard.stories.js

@@ -81,8 +81,10 @@ const ContainedAssetCardScreen = () => {
       children: /*#__PURE__*/_jsx(ContainedAssetCard, _extends({}, exampleProps, {
         description: /*#__PURE__*/_jsxs(Text, {
           accessibilityLabel: "Up 6.37%",
-          dangerouslySetColor: customUpwardTrendColor,
           font: "label2",
+          style: {
+            color: customUpwardTrendColor
+          },
           children: [subheadIconSignMap.upwardTrend, "6.37%"]
         }),
         header: /*#__PURE__*/_jsx(Image, {
@@ -126,7 +128,7 @@ const ContainedAssetCardScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       title: "ContainedAssetCard with no max width",
       children: /*#__PURE__*/_jsx(ContainedAssetCard, _extends({}, exampleProps, {
-        maxWidth: "none"
+        maxWidth: null
       }))
     })]
   });

package/esm/cards/__stories__/ContentCard.stories.js

@@ -348,7 +348,7 @@ const ContentCardScreen = () => {
             })]
           }), /*#__PURE__*/_jsx(Button, {
             compact: true,
-            variant: "tertiary",
+            variant: "inverse",
             children: "Share"
           })]
         })]
@@ -391,7 +391,7 @@ const ContentCardScreen = () => {
             })]
           }), /*#__PURE__*/_jsx(Button, {
             compact: true,
-            variant: "tertiary",
+            variant: "inverse",
             children: "Share"
           })]
         })]
@@ -424,7 +424,7 @@ const ContentCardScreen = () => {
             })]
           }), /*#__PURE__*/_jsx(Button, {
             compact: true,
-            variant: "tertiary",
+            variant: "inverse",
             children: "Share"
           })]
         })]
@@ -506,7 +506,7 @@ const ContentCardScreen = () => {
             }), /*#__PURE__*/_jsx(Button, {
               compact: true,
               onPress: () => {},
-              variant: "secondary",
+              variant: "inverse",
               children: "View Details"
             })]
           })]
@@ -552,7 +552,7 @@ const ContentCardScreen = () => {
             }), /*#__PURE__*/_jsx(Button, {
               compact: true,
               onPress: () => {},
-              variant: "tertiary",
+              variant: "inverse",
               children: "View Details"
             })]
           })]
@@ -600,7 +600,7 @@ const ContentCardScreen = () => {
             }), /*#__PURE__*/_jsx(Button, {
               compact: true,
               onPress: () => {},
-              variant: "tertiary",
+              variant: "inverse",
               children: "View Details"
             })]
           })]
@@ -648,7 +648,7 @@ const ContentCardScreen = () => {
             }), /*#__PURE__*/_jsx(Button, {
               compact: true,
               disabled: true,
-              variant: "tertiary",
+              variant: "inverse",
               children: "View Details"
             })]
           })]

package/esm/cards/__stories__/MediaCard.stories.js

@@ -6,7 +6,6 @@ import { Carousel } from '../../carousel/Carousel';
 import { CarouselItem } from '../../carousel/CarouselItem';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { RemoteImage } from '../../media/RemoteImage';
-import { TextHeadline, TextLabel2, TextTitle3 } from '../../typography';
 import { Text } from '../../typography/Text';
 import { MediaCard } from '../MediaCard';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -72,7 +71,8 @@ const MediaCardScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       title: "Custom Content",
       children: /*#__PURE__*/_jsx(MediaCard, {
-        description: /*#__PURE__*/_jsxs(TextLabel2, {
+        description: /*#__PURE__*/_jsxs(Text, {
+          font: "label2",
           children: ["Custom description with ", /*#__PURE__*/_jsx(Text, {
             font: "headline",
             children: "bold text"
@@ -82,12 +82,14 @@ const MediaCardScreen = () => {
           })]
         }),
         media: exampleMedia,
-        subtitle: /*#__PURE__*/_jsx(TextHeadline, {
+        subtitle: /*#__PURE__*/_jsx(Text, {
           color: "fgPositive",
+          font: "headline",
           children: "Custom Subtitle"
         }),
         thumbnail: exampleThumbnail,
-        title: /*#__PURE__*/_jsx(TextTitle3, {
+        title: /*#__PURE__*/_jsx(Text, {
+          font: "title3",
           children: "Custom Title"
         })
       })

package/esm/cards/__stories__/UpsellCard.stories.js

@@ -59,19 +59,25 @@ const UpsellCardScreen = () => {
     children: [/*#__PURE__*/_jsx(Example, {
       title: "Upsell Card",
       children: /*#__PURE__*/_jsx(UpsellCard, _extends({}, exampleProps, {
-        dangerouslySetBackground: defaultBackground
+        style: {
+          backgroundColor: defaultBackground
+        }
       }))
     }), /*#__PURE__*/_jsx(Example, {
       title: "Upsell Card Compact",
       children: /*#__PURE__*/_jsx(UpsellCard, _extends({}, compactProps, {
-        dangerouslySetBackground: defaultBackground
+        style: {
+          backgroundColor: defaultBackground
+        }
       }))
     }), /*#__PURE__*/_jsx(Example, {
       title: "Long action button text",
       children: /*#__PURE__*/_jsx(UpsellCard, _extends({}, exampleProps, {
         action: "This is a very long action button text that will get truncated",
-        dangerouslySetBackground: defaultBackground,
         description: "This is a very long description text that will get truncated",
+        style: {
+          backgroundColor: defaultBackground
+        },
         title: "This is a very long title text that will get truncated"
       }))
     }), /*#__PURE__*/_jsx(Example, {
@@ -85,37 +91,51 @@ const UpsellCardScreen = () => {
           variant: "secondary",
           children: "Sign up"
         }),
-        dangerouslySetBackground: customTextNodeBackgroundColor,
         description: /*#__PURE__*/_jsx(Text, {
-          dangerouslySetColor: customTextNodeColor,
           font: "label2",
+          style: {
+            color: customTextNodeColor
+          },
           children: "Start your free 30 day trial of Coinbase One"
         }),
+        style: {
+          backgroundColor: customTextNodeBackgroundColor
+        },
         title: /*#__PURE__*/_jsx(Text, {
-          dangerouslySetColor: customTextNodeColor,
           font: "headline",
+          style: {
+            color: customTextNodeColor
+          },
           children: "Coinbase One"
         })
       }))
     }), /*#__PURE__*/_jsx(Example, {
       title: "Custom Background color",
       children: /*#__PURE__*/_jsx(UpsellCard, _extends({}, exampleProps, {
-        dangerouslySetBackground: customBackgroundColor,
         description: /*#__PURE__*/_jsx(Text, {
-          dangerouslySetColor: customTextNodeColor,
           font: "label2",
+          style: {
+            color: customTextNodeColor
+          },
           children: "Start your free 30 day trial of Coinbase One"
         }),
+        style: {
+          backgroundColor: customBackgroundColor
+        },
         title: /*#__PURE__*/_jsx(Text, {
-          dangerouslySetColor: customTextNodeColor,
           font: "headline",
+          style: {
+            color: customTextNodeColor
+          },
           children: "Coinbase One"
         })
       }))
     }), /*#__PURE__*/_jsx(Example, {
       title: "Custom Width",
       children: /*#__PURE__*/_jsx(UpsellCard, _extends({}, exampleProps, {
-        dangerouslySetBackground: defaultBackground,
+        style: {
+          backgroundColor: defaultBackground
+        },
         width: "100%"
       }))
     }), /*#__PURE__*/_jsxs(VStack, {
@@ -127,13 +147,19 @@ const UpsellCardScreen = () => {
       }), /*#__PURE__*/_jsx(Carousel, {
         gap: 2,
         items: [/*#__PURE__*/_jsx(UpsellCard, _extends({}, exampleProps, {
-          dangerouslySetBackground: defaultBackground,
+          style: {
+            backgroundColor: defaultBackground
+          },
           width: carouselCardWidth
         }), "carouselItem1"), /*#__PURE__*/_jsx(UpsellCard, _extends({}, exampleProps, {
-          dangerouslySetBackground: defaultBackground,
+          style: {
+            backgroundColor: defaultBackground
+          },
           width: carouselCardWidth
         }), "carouselItem2"), /*#__PURE__*/_jsx(UpsellCard, _extends({}, exampleProps, {
-          dangerouslySetBackground: defaultBackground,
+          style: {
+            backgroundColor: defaultBackground
+          },
           width: carouselCardWidth
         }), "carouselItem3")]
       })]

package/esm/carousel/Carousel.js

@@ -1,4 +1,4 @@
-const _excluded = ["children", "title", "hideNavigation", "hidePagination", "drag", "snapMode", "NavigationComponent", "PaginationComponent", "style", "styles", "nextPageAccessibilityLabel", "previousPageAccessibilityLabel", "startAutoplayAccessibilityLabel", "stopAutoplayAccessibilityLabel", "paginationAccessibilityLabel", "onChangePage", "onDragStart", "onDragEnd", "loop", "autoplay", "autoplayInterval", "paginationVariant"];
+const _excluded = ["children", "title", "hideNavigation", "hidePagination", "paginationVariant", "drag", "snapMode", "NavigationComponent", "PaginationComponent", "style", "styles", "nextPageAccessibilityLabel", "previousPageAccessibilityLabel", "startAutoplayAccessibilityLabel", "stopAutoplayAccessibilityLabel", "paginationAccessibilityLabel", "onChangePage", "onDragStart", "onDragEnd", "loop", "autoplay", "autoplayInterval"];
 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; }
 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); }
 import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
@@ -262,6 +262,7 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
       title,
       hideNavigation,
       hidePagination,
+      paginationVariant,
       drag = 'snap',
       snapMode = 'page',
       NavigationComponent = DefaultCarouselNavigation,
@@ -278,8 +279,7 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
       onDragEnd,
       loop,
       autoplay,
-      autoplayInterval = 3000,
-      paginationVariant
+      autoplayInterval = 3000
     } = mergedProps,
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const carouselScrollX = useRef(0);
@@ -661,7 +661,9 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
           alignItems: "center",
           justifyContent: title ? 'space-between' : 'flex-end',
           children: [typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
+            flexShrink: 1,
             font: "title3",
+            numberOfLines: 1,
             style: styles == null ? void 0 : styles.title,
             children: title
           }) : title, !hideNavigation && /*#__PURE__*/_jsx(NavigationComponent, {

package/esm/carousel/DefaultCarouselPagination.js

@@ -21,6 +21,7 @@ const PaginationPill = /*#__PURE__*/memo(function PaginationPill(_ref) {
     background: isActive ? 'bgPrimary' : 'bgLine',
     borderColor: "transparent",
     borderRadius: 100,
+    borderWidth: 0,
     height: INDICATOR_HEIGHT,
     onPress: onPress,
     style: style,
@@ -141,7 +142,7 @@ export const DefaultCarouselPagination = /*#__PURE__*/memo(function DefaultCarou
     style,
     styles,
     paginationAccessibilityLabel = defaultPaginationAccessibilityLabel,
-    variant = 'pill'
+    variant = 'dot'
   } = _ref3;
   const theme = useTheme();
   const isDot = variant === 'dot';
@@ -155,6 +156,7 @@ export const DefaultCarouselPagination = /*#__PURE__*/memo(function DefaultCarou
     gap: 0.5,
     justifyContent: "center",
     style: rootStyles,
+    testID: "carousel-pagination-" + variant,
     children: totalPages > 0 ? Array.from({
       length: totalPages
     }, (_, index) => isDot ? /*#__PURE__*/_jsx(PaginationDot, {

package/esm/carousel/__figma__/Carousel.figma.js

@@ -23,7 +23,6 @@ figma.connect(Carousel, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2
     } = _ref;
     return /*#__PURE__*/_jsxs(Carousel, {
       hidePagination: hidePagination,
-      paginationVariant: "dot",
       title: title,
       children: [/*#__PURE__*/_jsx(CarouselItem, {
         id: "1"

package/esm/carousel/__stories__/Carousel.stories.js

@@ -134,8 +134,6 @@ const BasicExamples = () => {
     children: [/*#__PURE__*/_jsx(Example, {
       paddingX: 0,
       children: /*#__PURE__*/_jsx(Carousel, {
-        autoplay: true,
-        paginationVariant: "dot",
         styles: {
           root: {
             paddingHorizontal: horizontalPadding
@@ -155,7 +153,6 @@ const BasicExamples = () => {
       paddingX: 0,
       children: /*#__PURE__*/_jsx(Carousel, {
         drag: "snap",
-        paginationVariant: "dot",
         snapMode: "item",
         styles: {
           root: {
@@ -163,9 +160,6 @@ const BasicExamples = () => {
           },
           carousel: {
             gap: horizontalGap
-          },
-          title: {
-            color: theme.color.fgPrimary
           }
         },
         title: "Snap Item",
@@ -181,7 +175,6 @@ const BasicExamples = () => {
         loop: true,
         NavigationComponent: SeeAllComponent,
         drag: "free",
-        paginationVariant: "dot",
         snapMode: "item",
         styles: {
           root: {
@@ -206,7 +199,6 @@ const BasicExamples = () => {
       paddingX: 0,
       children: /*#__PURE__*/_jsxs(Carousel, {
         drag: "snap",
-        paginationVariant: "dot",
         snapMode: "page",
         styles: {
           root: {
@@ -243,7 +235,6 @@ const BasicExamples = () => {
       paddingX: 0,
       children: /*#__PURE__*/_jsx(Carousel, {
         drag: "none",
-        paginationVariant: "dot",
         styles: {
           root: {
             paddingHorizontal: horizontalPadding
@@ -309,13 +300,13 @@ const CustomComponentsExample = () => {
           disabled: !canGoPrevious,
           name: "caretLeft",
           onPress: onPrevious,
-          variant: "foregroundMuted"
+          variant: "secondary"
         }), /*#__PURE__*/_jsx(IconButton, {
           accessibilityLabel: "Next",
           disabled: !canGoNext,
           name: "caretRight",
           onPress: onNext,
-          variant: "foregroundMuted"
+          variant: "secondary"
         })]
       }), /*#__PURE__*/_jsx(HStack, {
         alignItems: "center",
@@ -396,7 +387,6 @@ const AutoplayExample = () => {
     children: /*#__PURE__*/_jsx(Carousel, {
       autoplay: true,
       loop: true,
-      paginationVariant: "dot",
       styles: {
         root: {
           paddingHorizontal: theme.space[2]
@@ -445,7 +435,6 @@ const DynamicContentExample = () => {
         children: "Remove Last"
       })]
     }), /*#__PURE__*/_jsx(Carousel, {
-      paginationVariant: "dot",
       styles: {
         root: {
           paddingHorizontal: theme.space[3]
@@ -528,7 +517,6 @@ const AnimatedExample = () => {
   return /*#__PURE__*/_jsx(Example, {
     paddingX: 0,
     children: /*#__PURE__*/_jsx(Carousel, {
-      paginationVariant: "dot",
       styles: {
         root: {
           paddingHorizontal: theme.space[3]
@@ -675,7 +663,6 @@ const LoopingExamples = () => {
       children: /*#__PURE__*/_jsx(Carousel, {
         loop: true,
         drag: "snap",
-        paginationVariant: "dot",
         snapMode: "page",
         styles: {
           root: {
@@ -698,7 +685,6 @@ const LoopingExamples = () => {
         autoplay: true,
         loop: true,
         drag: "snap",
-        paginationVariant: "dot",
         snapMode: "item",
         styles: {
           root: {

package/esm/cells/Cell.js

@@ -1,4 +1,4 @@
-const _excluded = ["accessory", "accessoryNode", "alignItems", "borderRadius", "children", "styles", "end", "detail", "detailWidth", "disabled", "intermediary", "media", "minHeight", "maxHeight", "onLayout", "onPress", "priority", "selected", "testID", "accessibilityLabel", "accessibilityHint", "accessibilityRole", "accessibilityState", "gap", "columnGap", "rowGap", "innerSpacing", "outerSpacing", "bottomContent", "style", "background", "blendStyles"],
+const _excluded = ["accessory", "accessoryNode", "alignItems", "bordered", "borderedBottom", "borderedEnd", "borderedHorizontal", "borderedStart", "borderedTop", "borderedVertical", "borderBottomLeftRadius", "borderBottomRightRadius", "borderBottomWidth", "borderColor", "borderEndWidth", "borderRadius", "borderStartWidth", "borderTopLeftRadius", "borderTopRightRadius", "borderTopWidth", "borderWidth", "children", "styles", "end", "detail", "detailWidth", "disabled", "intermediary", "media", "minHeight", "maxHeight", "onLayout", "onPress", "priority", "selected", "testID", "accessibilityLabel", "accessibilityHint", "accessibilityRole", "accessibilityState", "gap", "columnGap", "rowGap", "innerSpacing", "outerSpacing", "bottomContent", "style", "background", "blendStyles"],
   _excluded2 = ["marginX"];
 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); }
 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; }
@@ -19,7 +19,24 @@ export const Cell = /*#__PURE__*/memo(function Cell(_props) {
       accessory,
       accessoryNode,
       alignItems = 'center',
+      bordered,
+      borderedBottom,
+      borderedEnd,
+      borderedHorizontal,
+      borderedStart,
+      borderedTop,
+      borderedVertical,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      borderBottomWidth,
+      borderColor,
+      borderEndWidth,
       borderRadius = 200,
+      borderStartWidth,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderTopWidth,
+      borderWidth,
       children,
       styles,
       end,
@@ -62,10 +79,33 @@ export const Cell = /*#__PURE__*/memo(function Cell(_props) {
       marginX: innerSpacingMarginX
     } = innerSpacing,
     innerSpacingWithoutMarginX = _objectWithoutPropertiesLoose(innerSpacing, _excluded2);
+
+  // Border props must be applied to the internal Pressable wrapper for correct visual rendering.
+  // The outer Box was only meant to create padding outside the Pressable area; this behavior
+  // will be removed in https://linear.app/coinbase/issue/CDS-1512/remove-legacy-normal-spacing-variant-from-listcell.
+  const borderProps = useMemo(() => ({
+    bordered,
+    borderedBottom,
+    borderedEnd,
+    borderedHorizontal,
+    borderedStart,
+    borderedTop,
+    borderedVertical,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderBottomWidth,
+    borderColor,
+    borderEndWidth,
+    borderRadius,
+    borderStartWidth,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderTopWidth,
+    borderWidth
+  }), [bordered, borderedBottom, borderedEnd, borderedHorizontal, borderedStart, borderedTop, borderedVertical, borderBottomLeftRadius, borderBottomRightRadius, borderBottomWidth, borderColor, borderEndWidth, borderRadius, borderStartWidth, borderTopLeftRadius, borderTopRightRadius, borderTopWidth, borderWidth]);
   const content = useMemo(() => {
     var _StyleSheet$flatten$w, _StyleSheet$flatten;
-    const contentContainerProps = _extends({
-      borderRadius,
+    const contentContainerProps = _extends({}, borderProps, {
       testID,
       renderToHardwareTextureAndroid: disabled
     }, selected ? {
@@ -133,13 +173,13 @@ export const Cell = /*#__PURE__*/memo(function Cell(_props) {
         children: bottomContent
       })]
     }));
-  }, [borderRadius, testID, disabled, selected, background, onPress, innerSpacingWithoutMarginX, innerSpacing, alignItems, columnGap, gap, media, styles == null ? void 0 : styles.media, priority, children, styles == null ? void 0 : styles.childrenContainer, intermediary, styles == null ? void 0 : styles.intermediary, end, detail, detailWidth, styles == null ? void 0 : styles.end, accessory, accessoryNode, styles == null ? void 0 : styles.accessory, bottomContent, styles == null ? void 0 : styles.contentContainer, styles == null ? void 0 : styles.topContent, styles == null ? void 0 : styles.bottomContent, rowGap]);
+  }, [borderProps, testID, disabled, selected, background, onPress, innerSpacingWithoutMarginX, innerSpacing, alignItems, columnGap, gap, media, styles == null ? void 0 : styles.media, priority, children, styles == null ? void 0 : styles.childrenContainer, intermediary, styles == null ? void 0 : styles.intermediary, end, detail, detailWidth, styles == null ? void 0 : styles.end, accessory, accessoryNode, styles == null ? void 0 : styles.accessory, bottomContent, styles == null ? void 0 : styles.contentContainer, styles == null ? void 0 : styles.topContent, styles == null ? void 0 : styles.bottomContent, rowGap]);
   const pressableWrappedContent = useMemo(() => {
     if (onPress) {
       const offsetStyle = {
         marginHorizontal: -theme.space[innerSpacingMarginX * -1]
       };
-      return /*#__PURE__*/_jsx(Pressable, {
+      return /*#__PURE__*/_jsx(Pressable, _extends({
         block: true,
         noScaleOnPress: true,
         transparentWhileInactive: true,
@@ -150,18 +190,18 @@ export const Cell = /*#__PURE__*/memo(function Cell(_props) {
           disabled
         }, accessibilityState),
         background: "bg",
-        blendStyles: blendStyles,
-        borderRadius: borderRadius,
+        blendStyles: blendStyles
+      }, borderProps, {
         contentStyle: pressStyles,
         disabled: disabled,
         onPress: onPress,
         style: [offsetStyle, pressStyles, styles == null ? void 0 : styles.pressable],
         testID: testID && testID + "-cell-pressable",
         children: content
-      });
+      }));
     }
     return content;
-  }, [onPress, content, theme.space, innerSpacingMarginX, accessibilityHint, accessibilityLabel, accessibilityRole, disabled, styles == null ? void 0 : styles.pressable, accessibilityState, blendStyles, borderRadius, testID]);
+  }, [onPress, content, theme.space, innerSpacingMarginX, accessibilityHint, accessibilityLabel, accessibilityRole, disabled, styles == null ? void 0 : styles.pressable, accessibilityState, blendStyles, borderProps, testID]);
   return /*#__PURE__*/_jsx(Box, _extends({
     alignItems: "stretch",
     flexDirection: "row",

package/esm/cells/CellAccessory.js

@@ -45,8 +45,9 @@ export const CellAccessory = /*#__PURE__*/memo(function CellAccessory(_ref) {
   if (!icon) {
     return null;
   }
-  return /*#__PURE__*/_jsx(Box, _extends({}, props, {
-    testID: "accessory",
+  return /*#__PURE__*/_jsx(Box, _extends({
+    testID: "accessory"
+  }, props, {
     children: icon
   }));
 });

package/esm/cells/ContentCellFallback.js

@@ -7,6 +7,10 @@ import { ContentCell } from './ContentCell';
 import { condensedInnerSpacing, condensedOuterSpacing } from './ListCell';
 import { MediaFallback } from './MediaFallback';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @deprecated Please use the new ListCellFallback component instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const ContentCellFallback = /*#__PURE__*/memo(function ContentCellFallback(_ref) {
   let {
     accessory,

package/esm/cells/ListCell.js

@@ -1,4 +1,4 @@
-const _excluded = ["accessory", "accessoryNode", "end", "action", "compact", "title", "titleNode", "disableMultilineTitle", "description", "descriptionNode", "subtitle", "subtitleNode", "detail", "detailNode", "detailWidth", "intermediary", "priority", "innerSpacing", "outerSpacing", "disabled", "disableSelectionAccessory", "helperText", "media", "multiline", "selected", "subdetail", "subdetailNode", "variant", "onPress", "spacingVariant", "style", "styles"];
+const _excluded = ["accessory", "accessoryNode", "end", "action", "compact", "title", "titleNode", "disableMultilineTitle", "description", "descriptionNode", "subtitle", "subtitleNode", "detail", "detailNode", "detailWidth", "intermediary", "priority", "innerSpacing", "outerSpacing", "disabled", "disableSelectionAccessory", "helperText", "media", "multiline", "selected", "subdetail", "subdetailNode", "variant", "onPress", "spacingVariant", "minHeight", "style", "styles"];
 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); }
 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; }
 import React, { memo, useMemo } from 'react';
@@ -56,11 +56,14 @@ export const ListCell = /*#__PURE__*/memo(function ListCell(_props) {
       variant,
       onPress,
       spacingVariant = compact ? 'compact' : 'normal',
+      minHeight: minHeightProp,
       style,
       styles
     } = mergedProps,
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
-  const minHeight = spacingVariant === 'compact' ? compactListHeight : spacingVariant === 'normal' ? listHeight : undefined;
+  // we need to maintain fixed min-heights for the different cell style variants until they are dropped in a breaking change
+  // see CDS-1620
+  const minHeight = minHeightProp != null ? minHeightProp : spacingVariant === 'compact' ? compactListHeight : spacingVariant === 'normal' ? listHeight : undefined;
   const accessoryType = selected && !disableSelectionAccessory ? 'selected' : accessory;
   const hasDetails = Boolean(detail || subdetail || detailNode || subdetailNode);
   const end = useMemo(() => endProp || action || hasDetails && /*#__PURE__*/_jsx(CellDetail, {

package/esm/cells/MediaFallback.js

@@ -11,15 +11,15 @@ export const MediaFallback = /*#__PURE__*/memo(function MediaFallback(_ref) {
     } = _ref,
     fallbackProps = _objectWithoutPropertiesLoose(_ref, _excluded);
   if (type === 'image') {
-    return /*#__PURE__*/_jsx(Fallback, _extends({}, fallbackProps, {
+    return /*#__PURE__*/_jsx(Fallback, _extends({
       height: imageSize,
       shape: "squircle",
       width: imageSize
-    }));
+    }, fallbackProps));
   }
-  return /*#__PURE__*/_jsx(Fallback, _extends({}, fallbackProps, {
+  return /*#__PURE__*/_jsx(Fallback, _extends({
     height: mediaSize,
     shape: "circle",
     width: mediaSize
-  }));
+  }, fallbackProps));
 });