fix: remote image group zIndex and trailing space issue (#170)

adrienzheng-cb · web-flow · commit feeb1a38cf00 · 2025-12-19T13:12:27.000-05:00
* fix: RemoteImageGroup trailing space and zIndex problem

* release

* update docs examples for SelectChip
diff --git a/apps/docs/docs/components/inputs/SelectChipAlpha/_mobileExamples.mdx b/apps/docs/docs/components/inputs/SelectChipAlpha/_mobileExamples.mdx
@@ -178,6 +178,59 @@ function ExampleMultiGroups() {
 }
 ```
 
+### Multi-select with assets
+
+```tsx
+function ExampleMultiAssets() {
+  const assetImageMap: Record<string, string> = {
+    btc: assets.btc.imageUrl,
+    eth: assets.eth.imageUrl,
+    dai: assets.dai.imageUrl,
+    ltc: assets.ltc.imageUrl,
+    xrp: assets.xrp.imageUrl,
+  };
+  const exampleOptions = [
+    { value: 'btc', label: assets.btc.name },
+    { value: 'eth', label: assets.eth.name },
+    { value: 'dai', label: assets.dai.name },
+    { value: 'ltc', label: assets.ltc.name },
+    { value: 'xrp', label: assets.xrp.name },
+  ];
+  const { value, onChange } = useMultiSelect({
+    initialValue: ['eth', 'btc'],
+  });
+
+  // Get startNode based on selected assets
+  const startNode = useMemo(() => {
+    if (value.length === 0) return null;
+
+    // Multiple assets selected - use RemoteImageGroup
+    return (
+      <RemoteImageGroup shape="circle" size={24}>
+        {value.map((assetValue) => {
+          const imageUrl = assetImageMap[assetValue];
+          if (!imageUrl) return null;
+          return <RemoteImage key={assetValue} source={imageUrl} />;
+        })}
+      </RemoteImageGroup>
+    );
+  }, [value]);
+
+  return (
+    <SelectChip
+      accessibilityLabel="Select multiple assets"
+      maxWidth={400}
+      onChange={onChange}
+      options={exampleOptions}
+      placeholder="Choose assets"
+      startNode={startNode}
+      type="multi"
+      value={value}
+    />
+  );
+}
+```
+
 ### Compact
 
 ```tsx
diff --git a/apps/docs/docs/components/inputs/SelectChipAlpha/_webExamples.mdx b/apps/docs/docs/components/inputs/SelectChipAlpha/_webExamples.mdx
@@ -173,6 +173,60 @@ function ExampleMultiGroups() {
 }
 ```
 
+### Multi-select with assets
+
+```jsx live
+function ExampleMultiAssets() {
+  const assetImageMap: Record<string, string> = {
+    btc: assets.btc.imageUrl,
+    eth: assets.eth.imageUrl,
+    dai: assets.dai.imageUrl,
+    ltc: assets.ltc.imageUrl,
+    xrp: assets.xrp.imageUrl,
+  };
+
+  const exampleOptions = [
+    { value: 'btc', label: assets.btc.name },
+    { value: 'eth', label: assets.eth.name },
+    { value: 'dai', label: assets.dai.name },
+    { value: 'ltc', label: assets.ltc.name },
+    { value: 'xrp', label: assets.xrp.name },
+  ];
+  const { value, onChange } = useMultiSelect({
+    initialValue: ['eth', 'btc'],
+  });
+
+  // Get startNode based on selected assets
+  const startNode = useMemo(() => {
+    if (value.length === 0) return null;
+
+    // Multiple assets selected - use RemoteImageGroup
+    return (
+      <RemoteImageGroup shape="circle" size={24}>
+        {value.map((assetValue) => {
+          const imageUrl = assetImageMap[assetValue];
+          if (!imageUrl) return null;
+          return <RemoteImage key={assetValue} source={imageUrl} />;
+        })}
+      </RemoteImageGroup>
+    );
+  }, [value]);
+
+  return (
+    <SelectChip
+      controlAccessibilityLabel="Select multiple assets"
+      maxWidth={400}
+      onChange={onChange}
+      options={exampleOptions}
+      placeholder="Choose assets"
+      startNode={startNode}
+      type="multi"
+      value={value}
+    />
+  );
+}
+```
+
 ### Compact
 
 ```jsx live
diff --git a/packages/common/CHANGELOG.md b/packages/common/CHANGELOG.md
@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.33.1 ((12/19/2025, 08:09 AM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.33.0 (12/18/2025 PST)
 
 #### 🚀 Updates
diff --git a/packages/common/package.json b/packages/common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-common",
-  "version": "8.33.0",
+  "version": "8.33.1",
   "description": "Coinbase Design System - Common",
   "repository": {
     "type": "git",
diff --git a/packages/mcp-server/CHANGELOG.md b/packages/mcp-server/CHANGELOG.md
@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.33.1 ((12/19/2025, 08:09 AM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.33.0 ((12/18/2025, 11:46 AM PST))
 
 This is an artificial version bump with no new change.
diff --git a/packages/mcp-server/package.json b/packages/mcp-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mcp-server",
-  "version": "8.33.0",
+  "version": "8.33.1",
   "description": "Coinbase Design System - MCP Server",
   "repository": {
     "type": "git",
diff --git a/packages/mobile/CHANGELOG.md b/packages/mobile/CHANGELOG.md
@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.33.1 (12/19/2025 PST)
+
+#### 🐞 Fixes
+
+- Fix RemoteImageGroup zIndex and trailing space issue. [[#170](https://github.com/coinbase/cds/pull/170)]
+
 ## 8.33.0 (12/18/2025 PST)
 
 #### 🚀 Updates
diff --git a/packages/mobile/package.json b/packages/mobile/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.33.0",
+  "version": "8.33.1",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
diff --git a/packages/mobile/src/alpha/select-chip/__stories__/AlphaSelectChip.stories.tsx b/packages/mobile/src/alpha/select-chip/__stories__/AlphaSelectChip.stories.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { assets } from '@coinbase/cds-common/internal/data/assets';
 import { useMultiSelect } from '@coinbase/cds-common/select/useMultiSelect';
 
@@ -121,47 +121,47 @@ const assetImageMap: Record<string, string> = {
   xrp: assets.xrp.imageUrl,
 };
 
-// TODO: Add multi-select with assets story when RemoteImageGroup is fixed
-// export const MultiSelectWithAssets = () => {
-//   const exampleOptions = [
-//     { value: 'btc', label: assets.btc.name },
-//     { value: 'eth', label: assets.eth.name },
-//     { value: 'dai', label: assets.dai.name },
-//     { value: 'ltc', label: assets.ltc.name },
-//     { value: 'xrp', label: assets.xrp.name },
-//   ];
-//   const { value, onChange } = useMultiSelect({
-//     initialValue: ['eth', 'btc'],
-//   });
-
-//   // Get startNode based on selected assets
-//   const startNode = useMemo(() => {
-//     if (value.length === 0) return null;
-
-//     // Multiple assets selected - use RemoteImageGroup
-//     return (
-//       <RemoteImageGroup shape="circle" size={24}>
-//         {value.map((assetValue) => {
-//           const imageUrl = assetImageMap[assetValue];
-//           if (!imageUrl) return null;
-//           return <RemoteImage key={assetValue} source={imageUrl} />;
-//         })}
-//       </RemoteImageGroup>
-//     );
-//   }, [value]);
-
-//   return (
-//     <SelectChip
-//       accessibilityLabel="Select multiple assets"
-//       onChange={onChange}
-//       options={exampleOptions}
-//       placeholder="Choose assets"
-//       startNode={startNode}
-//       type="multi"
-//       value={value}
-//     />
-//   );
-// };
+export const MultiSelectWithAssets = () => {
+  const exampleOptions = [
+    { value: 'btc', label: assets.btc.name },
+    { value: 'eth', label: assets.eth.name },
+    { value: 'dai', label: assets.dai.name },
+    { value: 'ltc', label: assets.ltc.name },
+    { value: 'xrp', label: assets.xrp.name },
+  ];
+  const { value, onChange } = useMultiSelect({
+    initialValue: ['eth', 'btc'],
+  });
+
+  // Get startNode based on selected assets
+  const startNode = useMemo(() => {
+    if (value.length === 0) return null;
+
+    // Multiple assets selected - use RemoteImageGroup
+    return (
+      <RemoteImageGroup shape="circle" size={24}>
+        {value.map((assetValue) => {
+          const imageUrl = assetImageMap[assetValue];
+          if (!imageUrl) return null;
+          return <RemoteImage key={assetValue} source={imageUrl} />;
+        })}
+      </RemoteImageGroup>
+    );
+  }, [value]);
+
+  return (
+    <SelectChip
+      accessibilityLabel="Select multiple assets"
+      maxWidth={400}
+      onChange={onChange}
+      options={exampleOptions}
+      placeholder="Choose assets"
+      startNode={startNode}
+      type="multi"
+      value={value}
+    />
+  );
+};
 
 export const InvertColorScheme = () => {
   const exampleOptions = [
@@ -473,9 +473,9 @@ const SelectChipScreen = () => {
       <Example title="With Start End Nodes">
         <WithStartEndNodes />
       </Example>
-      {/* <Example title="Multi-Select with Assets">
+      <Example title="Multi-Select with Assets">
         <MultiSelectWithAssets />
-      </Example> */}
+      </Example>
       <Example title="Invert Color Scheme">
         <InvertColorScheme />
       </Example>
diff --git a/packages/mobile/src/media/RemoteImageGroup.tsx b/packages/mobile/src/media/RemoteImageGroup.tsx
@@ -4,6 +4,7 @@ import type { ViewStyle } from 'react-native';
 import { shapeBorderRadius } from '@coinbase/cds-common/tokens/borderRadius';
 import type {
   AvatarSize,
+  NegativeSpace,
   Shape,
   SharedAccessibilityProps,
   SharedProps,
@@ -49,7 +50,7 @@ export const RemoteImageGroup = ({
 
   const shapeStyle = shapeStyles[shape];
   const sizeAsNumber = typeof size === 'number' ? size : avatarSize[size];
-  const overlapSpacing = sizeAsNumber <= 40 ? 8 : 16;
+  const overlapSpacing: NegativeSpace = sizeAsNumber <= 40 ? -1 : -2;
 
   const excess = Children.count(children) - max;
   const groupChildren = useMemo(() => {
@@ -98,7 +99,7 @@ export const RemoteImageGroup = ({
         return (
           <Box
             key={index}
-            left={index === 0 ? 'initial' : overlapSpacing * zIndex}
+            marginStart={index === 0 ? undefined : overlapSpacing}
             position="relative"
             testID={`${testID ? `${testID}-` : ''}inner-box-${index}`}
             zIndex={zIndex}
@@ -113,7 +114,7 @@ export const RemoteImageGroup = ({
           background="bgOverlay"
           height={sizeAsNumber}
           justifyContent="center"
-          left={groupChildren.length * overlapSpacing * -1}
+          marginStart={overlapSpacing}
           position="relative"
           style={shapeStyle}
           width={sizeAsNumber}
diff --git a/packages/mobile/src/media/__stories__/RemoteImageGroup.stories.tsx b/packages/mobile/src/media/__stories__/RemoteImageGroup.stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { assets, squareAssets } from '@coinbase/cds-common/internal/data/assets';
 import { avatarSizes } from '@coinbase/cds-common/internal/data/avatars';
 
diff --git a/packages/mobile/src/media/__tests__/RemoteImageGroup.test.tsx b/packages/mobile/src/media/__tests__/RemoteImageGroup.test.tsx
@@ -34,15 +34,15 @@ describe('RemoteImageGroup', () => {
 
     const remoteImage1 = screen.getByTestId(`${TEST_ID}-inner-box-0`);
 
-    expect(remoteImage1).toHaveStyle({
-      left: 'initial',
+    expect(remoteImage1).not.toHaveStyle({
+      marginStart: -8,
     });
 
     remoteImageIndices.slice(1).forEach((index) => {
       const imageChildren = screen.getByTestId(`${TEST_ID}-inner-box-${index}`);
 
       expect(imageChildren).toHaveStyle({
-        left: -index * 8,
+        marginStart: -8,
       });
     });
   });
@@ -52,15 +52,15 @@ describe('RemoteImageGroup', () => {
 
     const remoteImage1 = screen.getByTestId(`${TEST_ID}-inner-box-0`);
 
-    expect(remoteImage1).toHaveStyle({
-      left: 'initial',
+    expect(remoteImage1).not.toHaveStyle({
+      marginStart: -16,
     });
 
     remoteImageIndices.slice(1).forEach((index) => {
       const imageChildren = screen.getByTestId(`${TEST_ID}-inner-box-${index}`);
 
       expect(imageChildren).toHaveStyle({
-        left: -index * 16,
+        marginStart: -16,
       });
     });
   });
diff --git a/packages/web/CHANGELOG.md b/packages/web/CHANGELOG.md
@@ -8,7 +8,11 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
-## Unreleased
+## 8.33.1 (12/19/2025 PST)
+
+#### 🐞 Fixes
+
+- Fix RemoteImageGroup zIndex and trailing space issue. [[#170](https://github.com/coinbase/cds/pull/170)]
 
 #### 📘 Misc
 
diff --git a/packages/web/package.json b/packages/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.33.0",
+  "version": "8.33.1",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
diff --git a/packages/web/src/alpha/select-chip/__stories__/SelectChip.stories.tsx b/packages/web/src/alpha/select-chip/__stories__/SelectChip.stories.tsx
diff --git a/packages/web/src/media/RemoteImageGroup.tsx b/packages/web/src/media/RemoteImageGroup.tsx
diff --git a/packages/web/src/media/__stories__/RemoteImageGroup.stories.tsx b/packages/web/src/media/__stories__/RemoteImageGroup.stories.tsx
diff --git a/packages/web/src/media/__tests__/RemoteImageGroup.test.tsx b/packages/web/src/media/__tests__/RemoteImageGroup.test.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@coinbase/cds-common",`
`3`		`- "version": "8.33.0",`
	`3`	`+ "version": "8.33.1",`
`4`	`4`	`"description": "Coinbase Design System - Common",`
`5`	`5`	`"repository": {`
`6`	`6`	`"type": "git",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@coinbase/cds-mcp-server",`
`3`		`- "version": "8.33.0",`
	`3`	`+ "version": "8.33.1",`
`4`	`4`	`"description": "Coinbase Design System - MCP Server",`
`5`	`5`	`"repository": {`
`6`	`6`	`"type": "git",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@coinbase/cds-mobile",`
`3`		`- "version": "8.33.0",`
	`3`	`+ "version": "8.33.1",`
`4`	`4`	`"description": "Coinbase Design System - Mobile",`
`5`	`5`	`"repository": {`
`6`	`6`	`"type": "git",`