@coinbase/cds-web 8.17.2 → 8.17.3

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.17.3 (10/14/2025 PST)
+
+#### 🐞 Fixes
+
+- Fix avatar hexagon shape. [[#107](https://github.com/coinbase/cds/pull/107)]
+
 ## 8.17.2 (10/16/2025 PST)
 
 #### 🐞 Fixes

package/dts/media/Hexagon.d.ts

@@ -13,8 +13,7 @@ export declare const HexagonAvatarClipPath: {
   displayName: string;
 };
 /**
- * Because the hexagon is not symmetrical, we have to get all mathy to scale the border appropriately
- * Note: These values were manually set with my eyeballs
+ * @deprecated will be removed in a future version
  */
 export declare const hexagonSvgTransformStyles: {
   readonly standard: {
@@ -71,12 +70,12 @@ type HexagonBorderProps = SharedProps & {
    * Child path elements are programmed to use the currentColor CSS value to inherit this color.
    */
   className?: string;
+  computedSize?: string | number;
 };
 export declare const HexagonBorder: React.MemoExoticComponent<
   ({
     strokeColor,
     offset,
-    size,
     testID,
     className,
   }: HexagonBorderProps) => import('react/jsx-runtime').JSX.Element

package/dts/media/Hexagon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Hexagon.d.ts","sourceRoot":"","sources":["../../src/media/Hexagon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AAExD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAO9D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhD,eAAO,MAAM,gBAAgB,gBAAgB,CAAC;AAC9C,eAAO,MAAM,0BAA0B,mCAAmC,CAAC;AAC3E,eAAO,MAAM,mBAAmB,+BAA+B,CAAC;AAEhE;;;GAGG;AACH,eAAO,MAAM,qBAAqB;;;CAkBjC,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiB5B,CAAC;AAOX,KAAK,kBAAkB,GAAG,WAAW,GAAG;IACtC;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,aAAa,gFAOrB,kBAAkB,6CAyBtB,CAAC;AAUF,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAiCxC,CAAC;AAGH,eAAO,MAAM,kBAAkB;;;CAK9B,CAAC"}
+{"version":3,"file":"Hexagon.d.ts","sourceRoot":"","sources":["../../src/media/Hexagon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AAExD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAQ9D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhD,eAAO,MAAM,gBAAgB,gBAAgB,CAAC;AAC9C,eAAO,MAAM,0BAA0B,mCAAmC,CAAC;AAC3E,eAAO,MAAM,mBAAmB,+BAA+B,CAAC;AAIhE;;;GAGG;AACH,eAAO,MAAM,qBAAqB;;;CAejC,CAAC;AAGF;;GAEG;AACH,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiB5B,CAAC;AAsBX,KAAK,kBAAkB,GAAG,WAAW,GAAG;IACtC;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC,CAAC;AAEF,eAAO,MAAM,aAAa,yEACwC,kBAAkB,6CAqBnF,CAAC;AAUF,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAiCxC,CAAC;AAGH,eAAO,MAAM,kBAAkB;;;CAK9B,CAAC"}

package/esm/media/Avatar.js

@@ -120,7 +120,7 @@ export const Avatar = /*#__PURE__*/memo(_ref => {
         offset: true,
         size: size,
         strokeColor: "currentColor"
-      }), shape === 'hexagon' && borderColor && /*#__PURE__*/_jsx(HexagonBorder, {
+      }), shape === 'hexagon' && shouldShowBorder && /*#__PURE__*/_jsx(HexagonBorder, {
         size: size,
         strokeColor: "var(--color-".concat(borderColor, ")")
       })]

package/esm/media/Hexagon.css

@@ -1 +1,2 @@
-@layer cds{.pathElementCss-p13ka9b8{fill:none;stroke-linecap:round;}}
+@layer cds{.hexagonBorderContainerCss-h13ka9b8{position:absolute;inset:0;}.hexagonBorderContainerCss-h13ka9b8[data-offset='false']{width:calc(100% - 2px);height:calc(100% - 2px);-webkit-transform:translate(1px,1px);-ms-transform:translate(1px,1px);transform:translate(1px,1px);}.hexagonBorderContainerCss-h13ka9b8[data-offset='true']{inset:-2px;}
+.pathElementCss-p1lp5uqu{fill:none;stroke-linecap:round;}}

package/esm/media/Hexagon.js

@@ -1,6 +1,7 @@
 var _getBrowserGlobals;
 import React, { memo, useEffect, useMemo } from 'react';
 import { createPortal } from 'react-dom';
+import { cx } from '../cx';
 import { useIsBrowser } from '../hooks/useIsBrowser';
 import { Box } from '../layout/Box';
 import { getBrowserGlobals } from '../utils/browser';
@@ -8,26 +9,25 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export const cdsHexagonTestId = 'cds-hexagon';
 export const hexagonClipPathContainerId = 'cds-hexagon-clipPath-container';
 export const hexagonAvatarClipId = 'cds-hexagon-avatar-clipper';
+const hexagonBorderWidth = 2;
 
 /**
  * We need to mount this to the DOM one time
  * This is currently done in the PortalProvider
  */
 export const HexagonAvatarClipPath = () => {
-  // to get scale values use equation 1/x, where x is height or width
-  const xScale = 1 / 66;
-  const yScale = 1 / 62;
+  const viewBoxSize = 16;
   return /*#__PURE__*/_jsx("svg", {
     height: "0",
-    viewBox: "0 0 66 62",
+    viewBox: "0 0 ".concat(viewBoxSize, " ").concat(viewBoxSize),
     width: "0",
     children: /*#__PURE__*/_jsx("defs", {
       children: /*#__PURE__*/_jsx("clipPath", {
         clipPathUnits: "objectBoundingBox",
         id: hexagonAvatarClipId,
-        transform: "scale(".concat(xScale, " ").concat(yScale, ")"),
+        transform: "scale(".concat(1 / viewBoxSize, " ").concat(1 / viewBoxSize, ")"),
         children: /*#__PURE__*/_jsx("path", {
-          d: "M63.4372 22.8624C66.2475 27.781 66.2475 33.819 63.4372 38.7376L54.981 53.5376C52.1324 58.5231 46.8307 61.6 41.0887 61.6H24.4562C18.7142 61.6 13.4125 58.5231 10.564 53.5376L2.10774 38.7376C-0.702577 33.819 -0.702582 27.781 2.10774 22.8624L10.564 8.06243C13.4125 3.07687 18.7142 0 24.4562 0H41.0887C46.8307 0 52.1324 3.07686 54.981 8.06242L63.4372 22.8624Z"
+          d: "M15.4855 6.0242C16.1715 7.24852 16.1715 8.75148 15.4855 9.97581L13.4213 13.6598C12.7259 14.9008 11.4317 15.6667 10.0301 15.6667H5.96994C4.56828 15.6667 3.2741 14.9008 2.57874 13.6598L0.514515 9.97581C-0.171504 8.75148 -0.171505 7.24852 0.514514 6.0242L2.57874 2.34022C3.2741 1.09922 4.56828 0.333336 5.96994 0.333336H10.0301C11.4317 0.333336 12.7259 1.09922 13.4213 2.34022L15.4855 6.0242Z"
         })
       })
     })
@@ -36,8 +36,7 @@ export const HexagonAvatarClipPath = () => {
 HexagonAvatarClipPath.displayName = 'HexagonAvatarClipPath';
 
 /**
- * Because the hexagon is not symmetrical, we have to get all mathy to scale the border appropriately
- * Note: These values were manually set with my eyeballs
+ * @deprecated will be removed in a future version
  */
 export const hexagonSvgTransformStyles = {
   standard: {
@@ -81,33 +80,30 @@ export const hexagonSvgTransformStyles = {
     }
   }
 };
-const pathElementCss = "pathElementCss-p13ka9b8";
+const hexagonBorderContainerCss = "hexagonBorderContainerCss-h13ka9b8";
+const pathElementCss = "pathElementCss-p1lp5uqu";
 export const HexagonBorder = /*#__PURE__*/memo(_ref => {
   let {
     strokeColor,
     offset,
-    size = 'l',
     testID = cdsHexagonTestId,
     className
   } = _ref;
-  const svgTransformStyles = hexagonSvgTransformStyles[offset ? 'offset' : 'standard'][size];
   return /*#__PURE__*/_jsx(Box, {
     "aria-hidden": true,
-    className: className,
+    className: cx(hexagonBorderContainerCss, className),
+    "data-offset": !!offset,
     "data-testid": testID,
-    height: "100%",
-    position: "absolute",
-    width: "100%",
     children: /*#__PURE__*/_jsx("svg", {
       "data-testid": "".concat(testID, "-svg"),
-      style: svgTransformStyles,
-      viewBox: "-2.25 0 70 62",
+      overflow: "visible",
+      viewBox: "0 0 16 16",
       children: /*#__PURE__*/_jsx("path", {
         className: pathElementCss,
-        d: "M63.4372 22.8624C66.2475 27.781 66.2475 33.819 63.4372 38.7376L54.981 53.5376C52.1324 58.5231 46.8307 61.6 41.0887 61.6H24.4562C18.7142 61.6 13.4125 58.5231 10.564 53.5376L2.10774 38.7376C-0.702577 33.819 -0.702582 27.781 2.10774 22.8624L10.564 8.06243C13.4125 3.07687 18.7142 0 24.4562 0H41.0887C46.8307 0 52.1324 3.07686 54.981 8.06242L63.4372 22.8624Z",
+        d: "M15.4855 6.0242C16.1715 7.24852 16.1715 8.75148 15.4855 9.97581L13.4213 13.6598C12.7259 14.9008 11.4317 15.6667 10.0301 15.6667H5.96994C4.56828 15.6667 3.2741 14.9008 2.57874 13.6598L0.514515 9.97581C-0.171504 8.75148 -0.171505 7.24852 0.514514 6.0242L2.57874 2.34022C3.2741 1.09922 4.56828 0.333336 5.96994 0.333336H10.0301C11.4317 0.333336 12.7259 1.09922 13.4213 2.34022L15.4855 6.0242Z",
         "data-testid": "".concat(testID, "-path"),
         stroke: strokeColor,
-        strokeWidth: 1.5,
+        strokeWidth: hexagonBorderWidth,
         vectorEffect: "non-scaling-stroke"
       })
     })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.17.2",
+  "version": "8.17.3",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -147,7 +147,7 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.17.2",
+    "@coinbase/cds-common": "^8.17.3",
     "@coinbase/cds-icons": "^5.4.2",
     "@coinbase/cds-illustrations": "^4.24.0",
     "@coinbase/cds-lottie-files": "^3.3.2",