@coinbase/cds-mobile 8.22.1 → 8.23.0

package/CHANGELOG.md

@@ -8,6 +8,16 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.23.0 ((12/1/2025, 06:33 AM PST))
+
+This is an artificial version bump with no new change.
+
+## 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":"AACA,OAAO,EAAa,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAc3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAiB7E,KAAK,6BAA6B,GAAG,CACnC,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,gBAAgB,CAAC,CAAA;CAAE,KACvF,KAAK,CAAC,YAAY,CAAC;AAExB,eAAO,MAAM,6BAA6B;;;;;;;;;;;;;;;;;;;;wBA+IlC,CAAA;wBAMA,CAAP;wBAGY,CAAC;wBAGR,CAAA;6BAMM,CAAX;sBACuC,CAAC;;qDAgGxC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAoC,6BAA6B,CAAC"}
+{"version":3,"file":"DefaultSelectControl.d.ts","sourceRoot":"","sources":["../../../src/alpha/select/DefaultSelectControl.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAc3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAiB7E,KAAK,6BAA6B,GAAG,CACnC,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,gBAAgB,CAAC,CAAA;CAAE,KACvF,KAAK,CAAC,YAAY,CAAC;AAExB,eAAO,MAAM,6BAA6B;;;;;;;;;;;;;;;;;;;;wBA6I9B,CAAH;wBAMD,CAAC;wBAIc,CAAC;wBAIhB,CAAP;6BAI2B,CAAC;sBAIV,CAAC;;qDAiGnB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAoC,6BAA6B,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":"AACA,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,cAAc,CAAC;AAOzC,OAAO,KAAK,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAkG9D,eAAO,MAAM,mBAAmB,EAAqD,CACnF,IAAI,SAAS,UAAU,GAAG,QAAQ,EAClC,iBAAiB,SAAS,MAAM,GAAG,MAAM,EAEzC,KAAK,EAAE,iBAAiB,CAAC,IAAI,EAAE,iBAAiB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;CAAE,KAC1E,KAAK,CAAC,YAAY,CAAC"}
+{"version":3,"file":"DefaultSelectOption.d.ts","sourceRoot":"","sources":["../../../src/alpha/select/DefaultSelectOption.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,cAAc,CAAC;AAOzC,OAAO,KAAK,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AA4F9D,eAAO,MAAM,mBAAmB,EAAqD,CACnF,IAAI,SAAS,UAAU,GAAG,QAAQ,EAClC,iBAAiB,SAAS,MAAM,GAAG,MAAM,EAEzC,KAAK,EAAE,iBAAiB,CAAC,IAAI,EAAE,iBAAiB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;CAAE,KAC1E,KAAK,CAAC,YAAY,CAAC"}

package/esm/alpha/select/DefaultSelectControl.js

@@ -75,6 +75,8 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
     children: /*#__PURE__*/_jsx(InputLabel, {
       alignSelf: labelVariant === 'inside' ? 'flex-start' : undefined,
       color: "fg",
+      ellipsizeMode: "tail",
+      numberOfLines: 2,
       paddingX: labelVariant === 'inside' ? 2 : 0,
       paddingY: shouldShowCompactLabel || labelVariant === 'inside' ? 0 : 0.5,
       children: label
@@ -151,12 +153,12 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
           children: startNode
         }), shouldShowCompactLabel ? /*#__PURE__*/_jsx(HStack, {
           alignItems: "center",
-          maxWidth: "40%",
           paddingEnd: 1,
+          width: "40%",
           children: labelNode
         }) : null, /*#__PURE__*/_jsx(VStack, {
           justifyContent: "center",
-          maxWidth: startNode ? '70%' : '85%',
+          maxWidth: shouldShowCompactLabel ? '45%' : startNode ? '70%' : '85%',
           style: styles == null ? void 0 : styles.controlValueNode,
           children: valueNode
         })]

package/esm/alpha/select/DefaultSelectOption.js

@@ -17,7 +17,6 @@ const DefaultSelectOptionComponent = (_ref, ref) => {
       indeterminate,
       compact,
       description,
-      multiline,
       style,
       styles,
       type,
@@ -26,20 +25,20 @@ const DefaultSelectOptionComponent = (_ref, ref) => {
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const labelNode = useMemo(() => typeof label === 'string' ? /*#__PURE__*/_jsx(Text, {
-    ellipsize: description ? 'tail' : multiline ? undefined : 'tail',
+    ellipsize: "tail",
     font: "headline",
-    numberOfLines: description ? 1 : multiline ? undefined : 2,
+    numberOfLines: 2,
     style: styles == null ? void 0 : styles.optionLabel,
     children: label
-  }) : label, [label, description, multiline, styles == null ? void 0 : styles.optionLabel]);
+  }) : label, [label, styles == null ? void 0 : styles.optionLabel]);
   const descriptionNode = useMemo(() => typeof description === 'string' ? /*#__PURE__*/_jsx(Text, {
     color: "fgMuted",
-    ellipsize: multiline ? undefined : 'tail',
+    ellipsize: "tail",
     font: "body",
-    numberOfLines: multiline ? undefined : description && label ? 1 : 2,
+    numberOfLines: 2,
     style: styles == null ? void 0 : styles.optionDescription,
     children: description
-  }) : description, [description, multiline, label, styles == null ? void 0 : styles.optionDescription]);
+  }) : description, [description, styles == null ? void 0 : styles.optionDescription]);
   const handlePress = useCallback(() => onPress == null ? void 0 : onPress(value), [onPress, value]);
   const multiSelectCheckedAccessibilityState = useMemo(() => {
     if (selected) return true;
@@ -59,7 +58,6 @@ const DefaultSelectOptionComponent = (_ref, ref) => {
     background: background,
     borderRadius: 0,
     disabled: disabled,
-    maxHeight: multiline ? undefined : compact ? 56 : 64,
     minHeight: compact ? 40 : 56,
     onPress: handlePress,
     priority: "end",

package/esm/alpha/select/__stories__/Select.stories.js

@@ -994,24 +994,38 @@ const VeryLongLabelsExample = () => {
     label: 'Remove selection'
   }, {
     value: '1',
-    label: 'This is an extremely long option label that should test how the component handles very long text content'
+    label: 'This is an extremely long option label that should test how the component handles very long text content',
+    description: 'This is an extremely long option description that should test how the component handles very long text content'
   }, {
     value: '2',
-    label: 'Another super long option label with even more text to see how it wraps or truncates in the UI'
+    label: 'Another super long option label with even more text to see how it wraps or truncates in the UI',
+    description: 'Another super long option description with even more text to see how it wraps or truncates in the UI'
   }, {
     value: '3',
-    label: 'Short'
+    label: 'Short',
+    description: 'Short description'
   }, {
     value: '4',
-    label: 'A moderately long label that is somewhere between short and extremely long'
+    label: 'A moderately long label that is somewhere between short and extremely long',
+    description: 'A moderately long description that is somewhere between short and extremely long'
   }];
   const [value, setValue] = useState('1');
-  return /*#__PURE__*/_jsx(Select, {
-    label: "Single select - very long option labels",
-    onChange: setValue,
-    options: longOptions,
-    placeholder: "Empty value",
-    value: value
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(Select, {
+      label: "Single select - very long option labels",
+      onChange: setValue,
+      options: longOptions,
+      placeholder: "Empty value",
+      value: value
+    }), /*#__PURE__*/_jsx(Select, {
+      compact: true,
+      label: "Single select - very long option labels - compact",
+      onChange: setValue,
+      options: longOptions,
+      placeholder: "Empty value",
+      value: value
+    })]
   });
 };
 const LongPlaceholder = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.22.1",
+  "version": "8.23.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -154,7 +154,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.22.1",
+    "@coinbase/cds-common": "^8.23.0",
     "@coinbase/cds-icons": "^5.7.0",
     "@coinbase/cds-illustrations": "^4.28.0",
     "@coinbase/cds-lottie-files": "^3.3.3",