@coinbase/cds-mobile 9.4.0 → 9.4.2

package/CHANGELOG.md

@@ -8,6 +8,16 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.4.2 ((6/23/2026, 07:32 AM PST))
+
+This is an artificial version bump with no new change.
+
+## 9.4.1 (6/15/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix: Modal appearance props now apply to the modal card. [[#758](https://github.com/coinbase/cds/pull/758)]
+
 ## 9.4.0 (6/15/2026 PST)
 
 #### 🚀 Updates

package/dts/overlays/modal/Modal.d.ts

@@ -1,12 +1,53 @@
 import React from 'react';
-import type { ModalProps as RNModalProps, ViewStyle } from 'react-native';
+import type { ModalProps as RNModalProps, StyleProp, ViewStyle } from 'react-native';
 import { type ModalContextValue } from '@coinbase/cds-common/overlays/ModalContext';
 import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
+import type { BoxProps } from '../../layout/Box';
 type ModalChildrenRenderProps = {
   closeModal: () => void;
 };
+/**
+ * Appearance style props forwarded to the visible dialog surface (rather than the
+ * underlying React Native Modal, which silently ignores them).
+ */
+type DialogStyleProps = Pick<
+  BoxProps,
+  | 'background'
+  | 'color'
+  | 'borderColor'
+  | 'borderWidth'
+  | 'borderRadius'
+  | 'borderTopLeftRadius'
+  | 'borderTopRightRadius'
+  | 'borderBottomLeftRadius'
+  | 'borderBottomRightRadius'
+  | 'borderTopWidth'
+  | 'borderBottomWidth'
+  | 'borderStartWidth'
+  | 'borderEndWidth'
+  | 'bordered'
+  | 'borderedTop'
+  | 'borderedBottom'
+  | 'borderedStart'
+  | 'borderedEnd'
+  | 'borderedHorizontal'
+  | 'borderedVertical'
+  | 'elevation'
+  | 'padding'
+  | 'paddingX'
+  | 'paddingY'
+  | 'paddingTop'
+  | 'paddingBottom'
+  | 'paddingStart'
+  | 'paddingEnd'
+  | 'minWidth'
+  | 'minHeight'
+  | 'maxWidth'
+  | 'maxHeight'
+>;
 export type ModalBaseProps = SharedProps &
   ModalContextValue &
+  DialogStyleProps &
   Omit<RNModalProps, 'children' | 'visible' | 'onRequestClose' | 'animationType'> & {
     /** Component to render as the Modal content */
     children?: React.ReactNode | ((props: ModalChildrenRenderProps) => React.ReactNode);
@@ -19,12 +60,20 @@ export type ModalBaseProps = SharedProps &
      * */
     width?: number;
     zIndex?: ViewStyle['zIndex'];
+    /** Custom styles for individual elements of the Modal */
+    styles?: {
+      /** Visible modal card element */
+      modal?: StyleProp<ViewStyle>;
+      /** Safe area region wrapping the modal children */
+      safeArea?: StyleProp<ViewStyle>;
+    };
   };
 export type ModalRefBaseProps = Pick<ModalBaseProps, 'onRequestClose'>;
 export type ModalProps = ModalBaseProps;
 export declare const Modal: React.NamedExoticComponent<
   SharedProps &
     ModalContextValue &
+    DialogStyleProps &
     Omit<RNModalProps, 'children' | 'visible' | 'onRequestClose' | 'animationType'> & {
       /** Component to render as the Modal content */
       children?: React.ReactNode | ((props: ModalChildrenRenderProps) => React.ReactNode);
@@ -37,6 +86,13 @@ export declare const Modal: React.NamedExoticComponent<
        * */
       width?: number;
       zIndex?: ViewStyle['zIndex'];
+      /** Custom styles for individual elements of the Modal */
+      styles?: {
+        /** Visible modal card element */
+        modal?: StyleProp<ViewStyle>;
+        /** Safe area region wrapping the modal children */
+        safeArea?: StyleProp<ViewStyle>;
+      };
     } & React.RefAttributes<ModalRefBaseProps>
 >;
 export {};

package/dts/overlays/modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/overlays/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,UAAU,IAAI,YAAY,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG1E,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAKlG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAO1E,KAAK,wBAAwB,GAAG;IAAE,UAAU,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAE3D,MAAM,MAAM,cAAc,GAAG,WAAW,GACtC,iBAAiB,GACjB,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,SAAS,GAAG,gBAAgB,GAAG,eAAe,CAAC,GAAG;IAChF,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,wBAAwB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACpF;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;;SAEK;IACL,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC;CAC9B,CAAC;AAEJ,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC;AAEvE,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC;AAMxC,eAAO,MAAM,KAAK;IArBd,+CAA+C;eACpC,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,wBAAwB,KAAK,KAAK,CAAC,SAAS,CAAC;IACnF;;OAEG;iBACU,MAAM,IAAI;IACvB;;SAEK;YACG,MAAM;aACL,SAAS,CAAC,QAAQ,CAAC;2CAiG/B,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/overlays/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,UAAU,IAAI,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGrF,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAKlG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAG1E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKjD,KAAK,wBAAwB,GAAG;IAAE,UAAU,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAE3D;;;GAGG;AACH,KAAK,gBAAgB,GAAG,IAAI,CAC1B,QAAQ,EACN,YAAY,GACZ,OAAO,GACP,aAAa,GACb,aAAa,GACb,cAAc,GACd,qBAAqB,GACrB,sBAAsB,GACtB,wBAAwB,GACxB,yBAAyB,GACzB,gBAAgB,GAChB,mBAAmB,GACnB,kBAAkB,GAClB,gBAAgB,GAChB,UAAU,GACV,aAAa,GACb,gBAAgB,GAChB,eAAe,GACf,aAAa,GACb,oBAAoB,GACpB,kBAAkB,GAClB,WAAW,GACX,SAAS,GACT,UAAU,GACV,UAAU,GACV,YAAY,GACZ,eAAe,GACf,cAAc,GACd,YAAY,GACZ,UAAU,GACV,WAAW,GACX,UAAU,GACV,WAAW,CACd,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,WAAW,GACtC,iBAAiB,GACjB,gBAAgB,GAChB,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,SAAS,GAAG,gBAAgB,GAAG,eAAe,CAAC,GAAG;IAChF,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,wBAAwB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACpF;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;;SAEK;IACL,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC;IAC7B,yDAAyD;IACzD,MAAM,CAAC,EAAE;QACP,iCAAiC;QACjC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B,mDAAmD;QACnD,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACjC,CAAC;CACH,CAAC;AAEJ,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC;AAEvE,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC;AAMxC,eAAO,MAAM,KAAK;IA5Bd,+CAA+C;eACpC,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,wBAAwB,KAAK,KAAK,CAAC,SAAS,CAAC;IACnF;;OAEG;iBACU,MAAM,IAAI;IACvB;;SAEK;YACG,MAAM;aACL,SAAS,CAAC,QAAQ,CAAC;IAC5B,yDAAyD;aAChD;QACP,iCAAiC;QACjC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B,mDAAmD;QACnD,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACjC;2CAkKJ,CAAC"}

package/esm/overlays/__stories__/ModalNavigation.stories.js

@@ -0,0 +1,53 @@
+import React, { useCallback, useMemo } from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { ModalContext } from '@coinbase/cds-common/overlays/ModalContext';
+import { useNavigation } from '@react-navigation/native';
+import { Button } from '../../buttons/Button';
+import { LoremIpsum } from '../../layout/__stories__/LoremIpsum';
+import { VStack } from '../../layout/VStack';
+import { ModalBody } from '../modal/ModalBody';
+import { ModalFooter } from '../modal/ModalFooter';
+import { ModalHeader } from '../modal/ModalHeader';
+
+/** Deep link: expoapp:///DebugReactNavigationModal */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ModalNavigationScreen = () => {
+  const navigation = useNavigation();
+  const handleClose = useCallback(() => navigation.goBack(), [navigation]);
+  const {
+    top
+  } = useSafeAreaInsets();
+  const modalContext = useMemo(() => ({
+    visible: true,
+    onRequestClose: handleClose
+  }), [handleClose]);
+  const rootStyle = useMemo(() => ({
+    paddingTop: top
+  }), [top]);
+  return /*#__PURE__*/_jsx(ModalContext.Provider, {
+    value: modalContext,
+    children: /*#__PURE__*/_jsxs(VStack, {
+      flexGrow: 1,
+      style: rootStyle,
+      children: [/*#__PURE__*/_jsx(ModalHeader, {
+        closeAccessibilityLabel: "Close",
+        title: "Navigation Modal"
+      }), /*#__PURE__*/_jsx(ModalBody, {
+        children: /*#__PURE__*/_jsx(LoremIpsum, {})
+      }), /*#__PURE__*/_jsx(ModalFooter, {
+        primaryAction: /*#__PURE__*/_jsx(Button, {
+          onPress: handleClose,
+          children: "Save"
+        }),
+        secondaryAction: /*#__PURE__*/_jsx(Button, {
+          onPress: handleClose,
+          variant: "secondary",
+          children: "Cancel"
+        })
+      })]
+    })
+  });
+};
+
+// eslint-disable-next-line internal/example-screen-default
+export default ModalNavigationScreen;

package/esm/overlays/modal/Modal.js

@@ -1,4 +1,4 @@
-const _excluded = ["children", "visible", "onRequestClose", "onDidClose", "hideDividers", "hideCloseButton"];
+const _excluded = ["children", "visible", "onRequestClose", "onDidClose", "hideDividers", "hideCloseButton", "styles", "background", "color", "borderColor", "borderWidth", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "borderTopWidth", "borderBottomWidth", "borderStartWidth", "borderEndWidth", "bordered", "borderedTop", "borderedBottom", "borderedStart", "borderedEnd", "borderedHorizontal", "borderedVertical", "elevation", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd", "minWidth", "minHeight", "maxWidth", "maxHeight"];
 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, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react';
@@ -10,6 +10,11 @@ import { OverlayContentContext } from '@coinbase/cds-common/overlays/OverlayCont
 import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { VStack } from '../../layout/VStack';
 import { useModalAnimation } from './useModalAnimation';
+
+/**
+ * Appearance style props forwarded to the visible dialog surface (rather than the
+ * underlying React Native Modal, which silently ignores them).
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
 const overlayContentContextValue = {
   isModal: true
@@ -23,7 +28,41 @@ export const Modal = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
       onRequestClose,
       onDidClose,
       hideDividers,
-      hideCloseButton
+      hideCloseButton,
+      styles: customStyles,
+      // Dialog surface appearance
+      background,
+      color,
+      borderColor,
+      borderWidth,
+      borderRadius,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      borderTopWidth,
+      borderBottomWidth,
+      borderStartWidth,
+      borderEndWidth,
+      bordered,
+      borderedTop,
+      borderedBottom,
+      borderedStart,
+      borderedEnd,
+      borderedHorizontal,
+      borderedVertical,
+      elevation = 2,
+      padding,
+      paddingX,
+      paddingY,
+      paddingTop,
+      paddingBottom,
+      paddingStart,
+      paddingEnd,
+      minWidth,
+      minHeight,
+      maxWidth,
+      maxHeight
     } = props,
     restProps = _objectWithoutPropertiesLoose(props, _excluded);
   const [{
@@ -76,17 +115,47 @@ export const Modal = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
       animationType: "none",
       children: /*#__PURE__*/_jsx(VStack, {
         animated: true,
-        elevation: 2,
+        background: background,
+        borderBottomLeftRadius: borderBottomLeftRadius,
+        borderBottomRightRadius: borderBottomRightRadius,
+        borderBottomWidth: borderBottomWidth,
+        borderColor: borderColor,
+        borderEndWidth: borderEndWidth,
+        borderRadius: borderRadius,
+        borderStartWidth: borderStartWidth,
+        borderTopLeftRadius: borderTopLeftRadius,
+        borderTopRightRadius: borderTopRightRadius,
+        borderTopWidth: borderTopWidth,
+        borderWidth: borderWidth,
+        bordered: bordered,
+        borderedBottom: borderedBottom,
+        borderedEnd: borderedEnd,
+        borderedHorizontal: borderedHorizontal,
+        borderedStart: borderedStart,
+        borderedTop: borderedTop,
+        borderedVertical: borderedVertical,
+        color: color,
+        elevation: elevation,
+        maxHeight: maxHeight,
+        maxWidth: maxWidth,
+        minHeight: minHeight,
+        minWidth: minWidth,
+        padding: padding,
+        paddingBottom: paddingBottom,
+        paddingEnd: paddingEnd,
+        paddingStart: paddingStart,
+        paddingTop: paddingTop,
+        paddingX: paddingX,
+        paddingY: paddingY,
         pin: "all",
-        style: {
+        style: [{
           transform: [{
             scale
           }],
-          opacity,
-          borderWidth: 0
-        },
+          opacity
+        }, customStyles == null ? void 0 : customStyles.modal],
         children: /*#__PURE__*/_jsx(SafeAreaView, {
-          style: styles.safeAreaContainer,
+          style: [styles.safeAreaContainer, customStyles == null ? void 0 : customStyles.safeArea],
           children: /*#__PURE__*/_jsx(ModalContext.Provider, {
             value: modalData,
             children: typeof children === 'function' ? children(renderChildrenProps) : children

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "9.4.0",
+  "version": "9.4.2",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -206,9 +206,9 @@
     "react-native-worklets": "0.5.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.4.0",
+    "@coinbase/cds-common": "^9.4.2",
     "@coinbase/cds-icons": "^5.19.0",
-    "@coinbase/cds-illustrations": "^4.42.0",
+    "@coinbase/cds-illustrations": "^4.43.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
     "@coinbase/cds-utils": "^2.3.5",
     "@floating-ui/react-native": "^0.10.5",