@coinbase/cds-web 8.33.0 → 8.34.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 (5) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dts/media/RemoteImageGroup.d.ts.map +1 -1
  3. package/esm/media/RemoteImageGroup.css +2 -1
  4. package/esm/media/RemoteImageGroup.js +7 -4
  5. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -8,6 +8,20 @@ All notable changes to this project will be documented in this file.
8
8
 
9
9
  <!-- template-start -->
10
10
 
11
+ ## 8.34.0 ((12/19/2025, 02:32 PM PST))
12
+
13
+ This is an artificial version bump with no new change.
14
+
15
+ ## 8.33.1 (12/19/2025 PST)
16
+
17
+ #### 🐞 Fixes
18
+
19
+ - Fix RemoteImageGroup zIndex and trailing space issue. [[#170](https://github.com/coinbase/cds/pull/170)]
20
+
21
+ #### 📘 Misc
22
+
23
+ - Fix: rename invalid class names on docsite. [[#265](https://github.com/coinbase/cds/pull/265)]
24
+
11
25
  ## 8.33.0 (12/18/2025 PST)
12
26
 
13
27
  #### 🚀 Updates
package/dts/media/RemoteImageGroup.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"RemoteImageGroup.d.ts","sourceRoot":"","sources":["../../src/media/RemoteImageGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AACjE,OAAO,KAAK,EACV,UAAU,EACV,KAAK,EACL,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AASpC,MAAM,MAAM,yBAAyB,GAAG,WAAW,GACjD,wBAAwB,GAAG;IACzB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC3B;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,uBAAuB;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEJ,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,CAAC;AAoB9D,eAAO,MAAM,gBAAgB,GAAI,kDAO9B,qBAAqB,4CAwEvB,CAAC"}
1
+ {"version":3,"file":"RemoteImageGroup.d.ts","sourceRoot":"","sources":["../../src/media/RemoteImageGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AACjE,OAAO,KAAK,EACV,UAAU,EAGV,KAAK,EACL,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AASpC,MAAM,MAAM,yBAAyB,GAAG,WAAW,GACjD,wBAAwB,GAAG;IACzB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC3B;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,uBAAuB;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEJ,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,CAAC;AAwB9D,eAAO,MAAM,gBAAgB,GAAI,kDAO9B,qBAAqB,4CAgFvB,CAAC"}
package/esm/media/RemoteImageGroup.css CHANGED
@@ -2,4 +2,5 @@
2
2
  .square-s4x9tgq{border-radius:4px;}
3
3
  .hexagon-h112niag{border-radius:0;}
4
4
  .squircle-s8clfq8{border-radius:8px;}
5
- .rectangle-ra2rof2{border-radius:0;}}
5
+ .rectangle-ra2rof2{border-radius:0;}
6
+ .isolateCss-i1shf7o1{isolation:isolate;}}
package/esm/media/RemoteImageGroup.js CHANGED
@@ -18,6 +18,7 @@ const borderRadiusCss = {
18
18
  squircle: "squircle-s8clfq8",
19
19
  rectangle: "rectangle-ra2rof2"
20
20
  };
21
+ const isolateCss = "isolateCss-i1shf7o1";
21
22
  export const RemoteImageGroup = _ref => {
22
23
  let {
23
24
  children,
@@ -32,7 +33,7 @@ export const RemoteImageGroup = _ref => {
32
33
  } = useTheme();
33
34
  const borderRadius = borderRadiusCss[shape];
34
35
  const sizeAsNumber = typeof size === 'number' ? size : avatarSize[size];
35
- const overlapSpacing = sizeAsNumber <= 40 ? 8 : 16;
36
+ const overlapSpacing = sizeAsNumber <= 40 ? -1 : -2;
36
37
  const excess = Children.count(children) - max;
37
38
  const groupChildren = useMemo(() => {
38
39
  const arrayChildren = Children.toArray(children);
@@ -43,7 +44,9 @@ export const RemoteImageGroup = _ref => {
43
44
  }, [children, excess]);
44
45
  return /*#__PURE__*/_jsxs(Box, _objectSpread(_objectSpread({
45
46
  alignItems: "center",
46
- display: "flex",
47
+ className: isolateCss,
48
+ display: "inline-flex",
49
+ overflow: "visible",
47
50
  position: "relative",
48
51
  testID: testID
49
52
  }, props), {}, {
@@ -63,7 +66,7 @@ export const RemoteImageGroup = _ref => {
63
66
  // zIndex is progressively lower so that each child is stacked below the previous one
64
67
  const zIndex = -index;
65
68
  return /*#__PURE__*/_jsx(Box, {
66
- left: index === 0 ? 'initial' : overlapSpacing * zIndex,
69
+ marginStart: index === 0 ? undefined : overlapSpacing,
67
70
  position: "relative",
68
71
  testID: "".concat(testID ? "".concat(testID, "-") : '', "inner-box-").concat(index),
69
72
  zIndex: zIndex,
@@ -75,7 +78,7 @@ export const RemoteImageGroup = _ref => {
75
78
  className: borderRadius,
76
79
  height: sizeAsNumber,
77
80
  justifyContent: "center",
78
- left: groupChildren.length * overlapSpacing * -1,
81
+ marginStart: overlapSpacing,
79
82
  position: "relative",
80
83
  width: sizeAsNumber,
81
84
  zIndex: groupChildren.length * -1,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinbase/cds-web",
3
- "version": "8.33.0",
3
+ "version": "8.34.0",
4
4
  "description": "Coinbase Design System - Web",
5
5
  "repository": {
6
6
  "type": "git",
@@ -203,7 +203,7 @@
203
203
  "react-dom": "^18.3.1"
204
204
  },
205
205
  "dependencies": {
206
- "@coinbase/cds-common": "^8.33.0",
206
+ "@coinbase/cds-common": "^8.34.0",
207
207
  "@coinbase/cds-icons": "^5.8.0",
208
208
  "@coinbase/cds-illustrations": "^4.29.0",
209
209
  "@coinbase/cds-lottie-files": "^3.3.4",