@coinbase/cds-mobile 9.0.1 → 9.1.0

package/CHANGELOG.md

@@ -8,6 +8,20 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.1.0 (5/26/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: support DotCount theming. [[#723](https://github.com/coinbase/cds/pull/723)]
+
+#### 🐞 Fixes
+
+- Fix: DotCount border mixing with background color. [[#723](https://github.com/coinbase/cds/pull/723)]
+
+## 9.0.2 ((5/22/2026, 09:54 AM PST))
+
+This is an artificial version bump with no new change.
+
 ## 9.0.1 (5/22/2026 PST)
 
 #### 🐞 Fixes

package/dts/dots/DotCount.d.ts

@@ -7,13 +7,18 @@ import type {
   SharedAccessibilityProps,
   SharedProps,
 } from '@coinbase/cds-common/types';
-export declare const MAX_OVERFLOW_COUNT = 99;
-export declare const parseDotCountMaxOverflow: (count: number, max?: number) => string | number;
+import {
+  MAX_OVERFLOW_COUNT,
+  parseDotCountMaxOverflow,
+} from '@coinbase/cds-common/utils/parseDotCountMaxOverflow';
+import { type BoxBaseProps } from '../layout/Box';
+export { MAX_OVERFLOW_COUNT, parseDotCountMaxOverflow };
 export type DotCountBaseProps = SharedProps &
   Pick<
     SharedAccessibilityProps,
     'accessibilityLabel' | 'accessibilityLabelledBy' | 'accessibilityHint'
-  > & {
+  > &
+  Omit<BoxBaseProps, 'children' | 'background' | 'pin' | 'style' | 'height'> & {
     /**
      * The number value to be shown in the dot. If count is <= 0, dot will not show up.
      *  */
@@ -35,17 +40,10 @@ export type DotCountBaseProps = SharedProps &
     /** Indicates what shape Dot is overlapping */
     overlap?: DotOverlap;
     /**
-     * An optional fixed height of the DotCount component.
-     * Width grows based on content length.
+     * Fixed height of the DotCount badge container. Width grows based on content length.
      * @default 24
-     * */
-    height?: number;
-    /**
-     * An optional fixed width of the DotCount component.
-     * By default, width grows based on content length.
-     * @default auto
-     * */
-    width?: number;
+     */
+    height?: BoxBaseProps['height'];
   };
 export type DotCountProps = DotCountBaseProps & {
   style?: StyleProp<ViewStyle>;

package/dts/dots/DotCount.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DotCount.d.ts","sourceRoot":"","sources":["../../src/dots/DotCount.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAClE,OAAO,EAEL,KAAK,SAAS,EAEd,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAgBtB,OAAO,KAAK,EACV,oBAAoB,EACpB,gBAAgB,EAChB,UAAU,EACV,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAepC,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAErC,eAAO,MAAM,wBAAwB,GAAI,OAAO,MAAM,EAAE,MAAK,MAA2B,oBAEvF,CAAC;AAaF,MAAM,MAAM,iBAAiB,GAAG,WAAW,GACzC,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GAAG;IACF;;UAEM;IACN,KAAK,EAAE,MAAM,CAAC;IACd;;;UAGM;IACN,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;SAGK;IACL,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,6CAA6C;IAC7C,GAAG,CAAC,EAAE,oBAAoB,CAAC;IAC3B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,8CAA8C;IAC9C,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB;;;;SAIK;IACL,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;SAIK;IACL,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEJ,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,sEAAsE;IACtE,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,wBAAwB;QACxB,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACjC,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC7B,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,QAAQ,qCAAiB,aAAa,6CAsHjD,CAAC"}
+{"version":3,"file":"DotCount.d.ts","sourceRoot":"","sources":["../../src/dots/DotCount.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAClE,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAgBtB,OAAO,KAAK,EACV,oBAAoB,EACpB,gBAAgB,EAChB,UAAU,EACV,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,kBAAkB,EAClB,wBAAwB,EACzB,MAAM,qDAAqD,CAAC;AAK7D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AASvD,OAAO,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,CAAC;AAexD,MAAM,MAAM,iBAAiB,GAAG,WAAW,GACzC,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GACD,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,YAAY,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC,GAAG;IAC3E;;UAEM;IACN,KAAK,EAAE,MAAM,CAAC;IACd;;;UAGM;IACN,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;SAGK;IACL,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,6CAA6C;IAC7C,GAAG,CAAC,EAAE,oBAAoB,CAAC;IAC3B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,8CAA8C;IAC9C,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;CACjC,CAAC;AAEJ,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,sEAAsE;IACtE,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,wBAAwB;QACxB,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACjC,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC7B,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,QAAQ,qCAAiB,aAAa,6CAyJjD,CAAC"}

package/esm/dots/DotCount.js

@@ -1,31 +1,26 @@
-const _excluded = ["children", "pin", "variant", "count", "max", "height", "width", "overlap", "style", "styles"];
+const _excluded = ["children", "pin", "variant", "count", "max", "height", "width", "testID", "accessibilityLabel", "accessibilityLabelledBy", "accessibilityHint", "overlap", "style", "styles", "alignItems", "justifyContent", "paddingX", "borderWidth", "borderRadius", "borderColor", "font", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "overflow"];
 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, useEffect, useMemo, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { View } from 'react-native';
 import Animated, { runOnJS, useAnimatedReaction, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
 import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
 import { dotOpacityEnterConfig, dotOpacityExitConfig, dotScaleEnterConfig, dotScaleExitConfig } from '@coinbase/cds-common/motion/dot';
 import { dotCountSize } from '@coinbase/cds-common/tokens/dot';
+import { MAX_OVERFLOW_COUNT, parseDotCountMaxOverflow } from '@coinbase/cds-common/utils/parseDotCountMaxOverflow';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useDotPinStyles } from '../hooks/useDotPinStyles';
-import { useTheme } from '../hooks/useTheme';
+import { Box } from '../layout/Box';
 import { convertMotionConfigs } from '../motion/convertMotionConfig';
 import { withMotionTiming } from '../motion/withMotionTiming';
 import { Text } from '../typography/Text';
 import { getTransform } from './dotStyles';
 import { useDotsLayout } from './useDotsLayout';
 
-// If a badge count is greater than max (optional, defaults at 99), it should
-// truncate the numbers so its x+.
+// Re-exporting for backwards compatibility
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const MAX_OVERFLOW_COUNT = 99;
-export const parseDotCountMaxOverflow = function (count, max) {
-  if (max === void 0) {
-    max = MAX_OVERFLOW_COUNT;
-  }
-  return count <= max ? count : max + "+";
-};
+export { MAX_OVERFLOW_COUNT, parseDotCountMaxOverflow };
+const AnimatedBox = Animated.createAnimatedComponent(Box);
 const [opacityEnter, opacityExit, scaleEnter, scaleExit] = convertMotionConfigs([dotOpacityEnterConfig, dotOpacityExitConfig, dotScaleEnterConfig, dotScaleExitConfig]);
 const variantColorMap = {
   negative: 'bgNegative'
@@ -40,12 +35,28 @@ export const DotCount = /*#__PURE__*/memo(_props => {
       max,
       height = dotCountSize,
       width,
+      testID = 'dot-count',
+      accessibilityLabel,
+      accessibilityLabelledBy,
+      accessibilityHint,
       overlap,
       style,
-      styles
+      styles,
+      alignItems = 'center',
+      justifyContent = 'center',
+      paddingX = 0.75,
+      borderWidth = 100,
+      borderRadius = 400,
+      borderColor = 'bgSecondary',
+      font = 'caption',
+      color = 'fgInverse',
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight,
+      overflow = 'hidden'
     } = mergedProps,
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
-  const theme = useTheme();
   const [childrenSize, onChildrenLayout] = useDotsLayout();
   const transforms = useDotPinStyles(childrenSize, {
     width: width != null ? width : height,
@@ -63,18 +74,6 @@ export const DotCount = /*#__PURE__*/memo(_props => {
     }
     return {};
   }, [pin, transforms]);
-  const containerStyles = useMemo(() => {
-    return [styleSheet.container, {
-      height,
-      minWidth: height,
-      width,
-      paddingHorizontal: theme.space[0.75],
-      borderWidth: theme.borderWidth[100],
-      borderRadius: theme.borderRadius[400],
-      borderColor: theme.color.bgSecondary,
-      backgroundColor: theme.color[variantColorMap[variant]]
-    }];
-  }, [height, width, theme.space, theme.borderWidth, theme.borderRadius, theme.color, variant]);
 
   // avoid displaying 0 during animations and preserve exit animation
   useEffect(() => {
@@ -106,37 +105,51 @@ export const DotCount = /*#__PURE__*/memo(_props => {
       }]
     };
   });
-  const dotCountContainerStyle = useMemo(() => [containerStyles, animatedStyles, styles == null ? void 0 : styles.container], [containerStyles, animatedStyles, styles == null ? void 0 : styles.container]);
+  const dotCountContainerStyle = useMemo(() => [animatedStyles, styles == null ? void 0 : styles.container], [animatedStyles, styles == null ? void 0 : styles.container]);
   const rootStyles = useMemo(() => [style, styles == null ? void 0 : styles.root], [styles == null ? void 0 : styles.root, style]);
+  const displayCount = useMemo(() => parseDotCountMaxOverflow(countInternal, max), [countInternal, max]);
 
   // only check childrenSize when children is defined
   const shouldShow = children !== undefined ? childrenSize !== null : true;
-  return /*#__PURE__*/_jsxs(View, _extends({
-    style: rootStyles
-  }, props, {
+  return /*#__PURE__*/_jsxs(View, {
+    accessibilityHint: accessibilityHint,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityLabelledBy: accessibilityLabelledBy,
+    style: rootStyles,
+    testID: testID,
     children: [/*#__PURE__*/_jsx(View, {
       onLayout: onChildrenLayout,
-      testID: props.testID + "-children",
+      testID: testID + "-children",
       children: children
     }), !shouldUnmount && shouldShow && /*#__PURE__*/_jsx(View, {
       style: pinStyles,
-      children: /*#__PURE__*/_jsx(Animated.View, {
+      children: /*#__PURE__*/_jsx(AnimatedBox, _extends({
+        animated: true,
+        alignItems: alignItems,
+        background: variantColorMap[variant],
+        borderColor: borderColor,
+        borderRadius: borderRadius,
+        borderWidth: borderWidth,
+        height: height,
+        justifyContent: justifyContent,
+        minWidth: height,
+        overflow: overflow,
+        paddingX: paddingX,
         style: dotCountContainerStyle,
         testID: "dotcount-container",
+        width: width
+      }, props, {
         children: /*#__PURE__*/_jsx(Text, {
-          color: "fgInverse",
-          font: "caption",
+          color: color,
+          font: font,
+          fontFamily: fontFamily,
+          fontSize: fontSize,
+          fontWeight: fontWeight,
+          lineHeight: lineHeight,
           style: styles == null ? void 0 : styles.text,
-          children: parseDotCountMaxOverflow(countInternal, max)
+          children: displayCount
         })
-      })
+      }))
     })]
-  }));
-});
-const styleSheet = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    display: 'flex'
-  }
+  });
 });

package/esm/system/__stories__/componentConfigStickerSheet/customComponentConfig.js

@@ -5,20 +5,22 @@ export const customComponentConfig = {
   Banner: {
     borderRadius: 0
   },
-  Button: props => ({
+  Button: props => _extends({
     borderRadius: 200,
-    height: props.compact ? 24 : 32,
-    font: props.compact ? 'label1' : 'headline',
-    progressCircleSize: props.compact ? 12 : 16,
-    paddingY: 0
-  }),
+    paddingX: props.compact ? 2 : 4,
+    paddingY: props.compact ? 1 : 2,
+    font: props.compact ? 'label1' : 'headline'
+  }, props.variant === 'tertiary' ? {
+    background: 'bgAlternate',
+    color: 'fg',
+    borderColor: 'bgAlternate'
+  } : {}),
   IconButton: props => {
     var _props$compact;
     const isCompact = (_props$compact = props.compact) != null ? _props$compact : true;
     return _extends({
       borderRadius: 200,
-      height: isCompact ? 24 : 32,
-      width: isCompact ? 24 : 32
+      padding: isCompact ? 1.5 : 2
     }, props.variant === 'tertiary' ? {
       background: 'bgAlternate',
       color: 'fg',
@@ -49,7 +51,7 @@ export const customComponentConfig = {
   },
   Radio: props => ({
     background: 'bg',
-    borderWidth: props.checked ? 200 : 100,
+    borderWidth: 200,
     borderColor: props.checked ? 'bgPrimary' : 'bgLinePrimarySubtle',
     controlColor: 'bgPrimary',
     dotSize: 20 / 3
@@ -124,5 +126,11 @@ export const customComponentConfig = {
     paddingX: 1,
     font: 'caption',
     emphasis: 'low'
+  },
+  DotCount: {
+    height: 16,
+    // Design is 1.5 but this causes the badge to be too wide for some single-digit counts
+    paddingX: 1,
+    paddingY: 0
   }
 };

package/esm/system/__stories__/componentConfigStickerSheet/customTheme.js

@@ -512,7 +512,7 @@ export const customTheme = _extends({}, defaultTheme, {
     title4: 20,
     headline: 16,
     body: 16,
-    label1: 12,
+    label1: 16,
     label2: 16,
     caption: 12,
     legal: 12

package/esm/system/__stories__/componentConfigStickerSheet/examples/DotCount.js

@@ -1,28 +1,21 @@
 import React, { memo } from 'react';
+import { IconButton } from '../../../../buttons/IconButton';
 import { DotCount } from '../../../../dots/DotCount';
-import { Icon } from '../../../../icons/Icon';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { HStack } from '../../../../layout/HStack';
+import { jsx as _jsx } from "react/jsx-runtime";
+const dotCounts = [3, 12, 100];
 export const DotCountExample = /*#__PURE__*/memo(() => {
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(DotCount, {
-      count: 3,
-      children: /*#__PURE__*/_jsx(Icon, {
-        name: "bell",
-        size: "m"
+  return /*#__PURE__*/_jsx(HStack, {
+    gap: 2,
+    children: dotCounts.map(count => /*#__PURE__*/_jsx(DotCount, {
+      count: count,
+      pin: "top-end",
+      children: /*#__PURE__*/_jsx(IconButton, {
+        transparent: true,
+        accessibilityLabel: "Notifications",
+        iconSize: "m",
+        name: "bell"
       })
-    }), /*#__PURE__*/_jsx(DotCount, {
-      count: 12,
-      children: /*#__PURE__*/_jsx(Icon, {
-        name: "bell",
-        size: "m"
-      })
-    }), /*#__PURE__*/_jsx(DotCount, {
-      count: 100,
-      max: 99,
-      children: /*#__PURE__*/_jsx(Icon, {
-        name: "bell",
-        size: "m"
-      })
-    })]
+    }, count))
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "9.0.1",
+  "version": "9.1.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -202,7 +202,7 @@
     "react-native-worklets": "0.5.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.0.1",
+    "@coinbase/cds-common": "^9.1.0",
     "@coinbase/cds-icons": "^5.17.0",
     "@coinbase/cds-illustrations": "^4.40.1",
     "@coinbase/cds-lottie-files": "^3.3.4",