@coinbase/cds-web 8.22.1 → 8.22.2

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.22.2 (11/26/2025 PST)
+
+#### 🐞 Fixes
+
+- Wrap Select labels instead of truncating them. [[#179](https://github.com/coinbase/cds/pull/179)]
+
 ## 8.22.1 (11/24/2025 PST)
 
 #### 🐞 Fixes

package/dts/alpha/select/DefaultSelectControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultSelectControl.d.ts","sourceRoot":"","sources":["../../../src/alpha/select/DefaultSelectControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAe9E,OAAO,KAAK,EAAE,kBAAkB,EAAgB,UAAU,EAAE,MAAM,UAAU,CAAC;AAyB7E,KAAK,wBAAwB,GAAG,CAC9B,IAAI,SAAS,UAAU,EACvB,iBAAiB,SAAS,MAAM,GAAG,MAAM,EAEzC,KAAK,EAAE,kBAAkB,CAAC,IAAI,EAAE,iBAAiB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;CAAE,KAClF,KAAK,CAAC,YAAY,CAAC;AAyUxB,eAAO,MAAM,oBAAoB,EAAoC,wBAAwB,CAAC"}
+{"version":3,"file":"DefaultSelectControl.d.ts","sourceRoot":"","sources":["../../../src/alpha/select/DefaultSelectControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAe9E,OAAO,KAAK,EAAE,kBAAkB,EAAgB,UAAU,EAAE,MAAM,UAAU,CAAC;AAyB7E,KAAK,wBAAwB,GAAG,CAC9B,IAAI,SAAS,UAAU,EACvB,iBAAiB,SAAS,MAAM,GAAG,MAAM,EAEzC,KAAK,EAAE,kBAAkB,CAAC,IAAI,EAAE,iBAAiB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;CAAE,KAClF,KAAK,CAAC,YAAY,CAAC;AA0UxB,eAAO,MAAM,oBAAoB,EAAoC,wBAAwB,CAAC"}

package/dts/alpha/select/DefaultSelectOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultSelectOption.d.ts","sourceRoot":"","sources":["../../../src/alpha/select/DefaultSelectOption.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAwD9D,KAAK,uBAAuB,GAAG,CAAC,IAAI,SAAS,UAAU,EAAE,iBAAiB,SAAS,MAAM,GAAG,MAAM,EAChG,KAAK,EAAE,iBAAiB,CAAC,IAAI,EAAE,iBAAiB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;CAAE,KACvF,KAAK,CAAC,YAAY,CAAC;AAoHxB,eAAO,MAAM,mBAAmB,EAAmC,uBAAuB,CAAC"}
+{"version":3,"file":"DefaultSelectOption.d.ts","sourceRoot":"","sources":["../../../src/alpha/select/DefaultSelectOption.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAwD9D,KAAK,uBAAuB,GAAG,CAAC,IAAI,SAAS,UAAU,EAAE,iBAAiB,SAAS,MAAM,GAAG,MAAM,EAChG,KAAK,EAAE,iBAAiB,CAAC,IAAI,EAAE,iBAAiB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;CAAE,KACvF,KAAK,CAAC,YAAY,CAAC;AAmHxB,eAAO,MAAM,mBAAmB,EAAmC,uBAAuB,CAAC"}

package/esm/alpha/select/DefaultSelectControl.js

@@ -165,12 +165,13 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
     borderWidth: 0,
     className: cx(noFocusOutlineCss, classNames === null || classNames === void 0 ? void 0 : classNames.controlInputNode),
     disabled: disabled,
+    flexGrow: 1,
     focusable: false,
     minHeight: labelVariant === 'inside' ? LABEL_VARIANT_INSIDE_HEIGHT : compact ? COMPACT_HEIGHT : DEFAULT_HEIGHT,
+    minWidth: 0,
     onClick: () => setOpen(s => !s),
     paddingStart: 1,
     style: styles === null || styles === void 0 ? void 0 : styles.controlInputNode,
-    width: "100%",
     children: [!!startNode && /*#__PURE__*/_jsx(HStack, {
       alignItems: "center",
       className: classNames === null || classNames === void 0 ? void 0 : classNames.controlStartNode,
@@ -183,8 +184,8 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
     }), shouldShowCompactLabel ? /*#__PURE__*/_jsx(HStack, {
       alignItems: "center",
       height: "100%",
-      maxWidth: "40%",
       paddingStart: 1,
+      width: "40%",
       children: /*#__PURE__*/_jsx(InputLabel, {
         color: "fg",
         overflow: "truncate",
@@ -194,7 +195,7 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
       alignItems: "center",
       borderRadius: 200,
       justifyContent: "space-between",
-      width: "100%",
+      width: shouldShowCompactLabel ? '60%' : '100%',
       children: /*#__PURE__*/_jsx(HStack, {
         ref: valueNodeContainerRef,
         alignItems: "center",

package/esm/alpha/select/DefaultSelectOption.js

@@ -41,7 +41,7 @@ const DefaultSelectOptionComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
     as: "div",
     className: classNames === null || classNames === void 0 ? void 0 : classNames.optionLabel,
     font: "headline",
-    overflow: "truncate",
+    overflow: "wrap",
     style: styles === null || styles === void 0 ? void 0 : styles.optionLabel,
     children: label
   }) : label, [label, classNames === null || classNames === void 0 ? void 0 : classNames.optionLabel, styles === null || styles === void 0 ? void 0 : styles.optionLabel]);
@@ -76,7 +76,6 @@ const DefaultSelectOptionComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
       className: cx(multiline ? multilineTextCss : undefined, classNames === null || classNames === void 0 ? void 0 : classNames.optionCell),
       end: end,
       innerSpacing: selectCellSpacingConfig.innerSpacing,
-      maxHeight: compact ? 56 : 64,
       media: media,
       minHeight: compact ? 40 : 56,
       outerSpacing: selectCellSpacingConfig.outerSpacing,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.22.1",
+  "version": "8.22.2",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -147,7 +147,7 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.22.1",
+    "@coinbase/cds-common": "^8.22.2",
     "@coinbase/cds-icons": "^5.7.0",
     "@coinbase/cds-illustrations": "^4.28.0",
     "@coinbase/cds-lottie-files": "^3.3.3",