@coinbase/cds-mobile 8.23.0 → 8.24.0

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.24.0 (12/1/2025 PST)
+
+#### 🚀 Updates
+
+- Support labelNode in TextInput. [[#198](https://github.com/coinbase/cds/pull/198)]
+
 ## 8.23.0 ((12/1/2025, 06:33 AM PST))
 
 This is an artificial version bump with no new change.

package/dts/controls/TextInput.d.ts

@@ -51,6 +51,11 @@ export type TextInputBaseProps = SharedProps &
      * @default 'error'
      */
     helperTextErrorIconAccessibilityLabel?: string;
+    /**
+     * React node to render label. Takes precedence over `label`.
+     * @note if both labelNode and label are provided, label will still be used as accessibility label for the input if no accessibilityLabel is provided.
+     */
+    labelNode?: React.ReactNode;
   };
 export type TextInputProps = TextInputBaseProps &
   Omit<RNTextInputProps, 'value' | 'onChange' | 'onChangeText' | 'textAlign'> & {
@@ -118,6 +123,11 @@ export declare const TextInput: React.MemoExoticComponent<
          * @default 'error'
          */
         helperTextErrorIconAccessibilityLabel?: string;
+        /**
+         * React node to render label. Takes precedence over `label`.
+         * @note if both labelNode and label are provided, label will still be used as accessibility label for the input if no accessibilityLabel is provided.
+         */
+        labelNode?: React.ReactNode;
       } & Omit<RNTextInputProps, 'value' | 'textAlign' | 'onChange' | 'onChangeText'> & {
         value?: RNTextInputProps['value'];
         onChange?: RNTextInputProps['onChange'];

package/dts/controls/TextInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/controls/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAEV,SAAS,IAAI,WAAW,EAExB,cAAc,IAAI,gBAAgB,EAEnC,MAAM,cAAc,CAAC;AAItB,OAAO,KAAK,EACV,wBAAwB,EACxB,gBAAgB,EAChB,WAAW,EACX,cAAc,EACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4CAA4C,CAAC;AAcjF,OAAO,EAAc,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAGpE,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAC1C,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GACD,gBAAgB,GAChB,IAAI,CACF,mBAAmB,EACjB,QAAQ,GACR,SAAS,GACT,OAAO,GACP,UAAU,GACV,cAAc,GACd,kBAAkB,GAClB,cAAc,CACjB,GAAG;IACF;;;OAGG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uHAAuH;IACvH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mHAAmH;IACnH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF;;;OAGG;IACH,qCAAqC,CAAC,EAAE,MAAM,CAAC;CAChD,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAC7C,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,UAAU,GAAG,cAAc,GAAG,WAAW,CAAC,GAAG;IAC5E,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAChD;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,OAAO,CAAC;IACpD;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAWJ,eAAO,MAAM,SAAS;IA5DlB;;;OAGG;YACK,cAAc,CAAC,OAAO,CAAC;IAC/B;;OAEG;aACM,MAAM;IACf,uHAAuH;YAC/G,KAAK,CAAC,SAAS;IACvB,mHAAmH;UAC7G,KAAK,CAAC,SAAS;IACrB;;OAEG;gBACS;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB;IACD;;;OAGG;4CACqC,MAAM;;YAKtC,gBAAgB,CAAC,OAAO,CAAC;eACtB,gBAAgB,CAAC,UAAU,CAAC;mBACxB,gBAAgB,CAAC,cAAc,CAAC;IAC/C;;;OAGG;gBACS,cAAc;IAC1B;;;OAGG;gBACS,gBAAgB,CAAC,WAAW,CAAC,GAAG,OAAO;IACnD;;;OAGG;eACQ,OAAO;sCAuOrB,CAAC"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/controls/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAEV,SAAS,IAAI,WAAW,EAExB,cAAc,IAAI,gBAAgB,EAEnC,MAAM,cAAc,CAAC;AAItB,OAAO,KAAK,EACV,wBAAwB,EACxB,gBAAgB,EAChB,WAAW,EACX,cAAc,EACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4CAA4C,CAAC;AAcjF,OAAO,EAAc,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAGpE,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAC1C,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GACD,gBAAgB,GAChB,IAAI,CACF,mBAAmB,EACjB,QAAQ,GACR,SAAS,GACT,OAAO,GACP,UAAU,GACV,cAAc,GACd,kBAAkB,GAClB,cAAc,CACjB,GAAG;IACF;;;OAGG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uHAAuH;IACvH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mHAAmH;IACnH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF;;;OAGG;IACH,qCAAqC,CAAC,EAAE,MAAM,CAAC;IAC/C;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAC7C,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,UAAU,GAAG,cAAc,GAAG,WAAW,CAAC,GAAG;IAC5E,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAChD;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,OAAO,CAAC;IACpD;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAWJ,eAAO,MAAM,SAAS;IAjElB;;;OAGG;YACK,cAAc,CAAC,OAAO,CAAC;IAC/B;;OAEG;aACM,MAAM;IACf,uHAAuH;YAC/G,KAAK,CAAC,SAAS;IACvB,mHAAmH;UAC7G,KAAK,CAAC,SAAS;IACrB;;OAEG;gBACS;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB;IACD;;;OAGG;4CACqC,MAAM;IAC9C;;;OAGG;gBACS,KAAK,CAAC,SAAS;;YAKnB,gBAAgB,CAAC,OAAO,CAAC;eACtB,gBAAgB,CAAC,UAAU,CAAC;mBACxB,gBAAgB,CAAC,cAAc,CAAC;IAC/C;;;OAGG;gBACS,cAAc;IAC1B;;;OAGG;gBACS,gBAAgB,CAAC,WAAW,CAAC,GAAG,OAAO;IACnD;;;OAGG;eACQ,OAAO;sCA8OrB,CAAC"}

package/esm/controls/TextInput.js

@@ -1,4 +1,4 @@
-const _excluded = ["label", "helperText", "variant", "testID", "testIDMap", "start", "end", "width", "disabled", "align", "compact", "suffix", "accessibilityLabel", "borderRadius", "enableColorSurge", "helperTextErrorIconAccessibilityLabel", "bordered", "labelVariant"];
+const _excluded = ["label", "helperText", "variant", "testID", "testIDMap", "start", "end", "width", "disabled", "align", "compact", "suffix", "accessibilityLabel", "borderRadius", "enableColorSurge", "helperTextErrorIconAccessibilityLabel", "bordered", "labelVariant", "labelNode"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { cloneElement, forwardRef, isValidElement, memo, useCallback, useMemo, useRef, useState } from 'react';
@@ -45,7 +45,8 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       enableColorSurge = false,
       helperTextErrorIconAccessibilityLabel = 'error',
       bordered = true,
-      labelVariant = 'outside'
+      labelVariant = 'outside',
+      labelNode
     } = _ref,
     editableInputProps = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
@@ -155,7 +156,7 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       disabled: disabled,
       testID: testID
     }, editableInputAddonProps)),
-    labelNode: !compact && !!label && /*#__PURE__*/_jsx(Pressable, {
+    labelNode: !compact && (labelNode ? labelNode : !!label && /*#__PURE__*/_jsx(Pressable, {
       accessibilityRole: "button",
       disabled: disabled,
       onPress: handleNodePress,
@@ -169,7 +170,7 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
         testID: (_testIDMap$label = testIDMap == null ? void 0 : testIDMap.label) != null ? _testIDMap$label : '',
         children: label
       }))
-    }),
+    })),
     labelVariant: labelVariant,
     startNode: (compact && !!label || !!start) && /*#__PURE__*/_jsx(Box, {
       alignItems: "center",

package/esm/controls/__stories__/TextInput.stories.js

@@ -8,9 +8,11 @@ import { Icon } from '../../icons';
 import { Box } from '../../layout/Box';
 import { HStack } from '../../layout/HStack';
 import { VStack } from '../../layout/VStack';
+import { Tooltip } from '../../overlays/tooltip/Tooltip';
 import { Text } from '../../typography/Text';
 import { InputIcon } from '../InputIcon';
 import { InputIconButton } from '../InputIconButton';
+import { InputLabel } from '../InputLabel';
 import { TextInput } from '../TextInput';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const MockTextInput = _ref => {
@@ -537,6 +539,28 @@ const InputScreen = () => {
         placeholder: "Enter your favorite color",
         variant: "negative"
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "TextInput with labelNode",
+      children: /*#__PURE__*/_jsx(MockTextInput, {
+        label: "Display name",
+        labelNode: /*#__PURE__*/_jsxs(HStack, {
+          alignItems: "center",
+          gap: 1,
+          children: [/*#__PURE__*/_jsx(InputLabel, {
+            children: "Display name"
+          }), /*#__PURE__*/_jsx(Tooltip, {
+            content: "This will be visible to other users.",
+            children: /*#__PURE__*/_jsx(Icon, {
+              active: true,
+              color: "fg",
+              name: "info",
+              size: "xs"
+            })
+          })]
+        }),
+        placeholder: "Satoshi Nakamoto"
+      })
     })]
   });
 };

package/esm/dates/__stories__/DateInput.stories.js

@@ -1,9 +1,12 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React, { useState } from 'react';
 import { LocaleProvider } from '@coinbase/cds-common/system/LocaleProvider';
+import { InputLabel } from '../../controls/InputLabel';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { Icon } from '../../icons';
+import { HStack } from '../../layout';
 import { Group } from '../../layout/Group';
+import { Tooltip } from '../../overlays';
 import { ThemeProvider } from '../../system/ThemeProvider';
 import { defaultTheme } from '../../themes/defaultTheme';
 import { DateInput } from '../DateInput';
@@ -43,6 +46,22 @@ export const Examples = () => {
           minDate: oneDayAgo
         })), /*#__PURE__*/_jsx(DateInput, _extends({}, sharedProps, props, {
           separator: "-"
+        })), /*#__PURE__*/_jsx(DateInput, _extends({}, sharedProps, props, {
+          label: "Date of birth",
+          labelNode: /*#__PURE__*/_jsxs(HStack, {
+            alignItems: "center",
+            gap: 1,
+            children: [/*#__PURE__*/_jsx(InputLabel, {
+              children: "Date of birth"
+            }), /*#__PURE__*/_jsx(Tooltip, {
+              content: "This will be visible to other users.",
+              children: /*#__PURE__*/_jsx(Icon, {
+                color: "fgMuted",
+                name: "info",
+                size: "xs"
+              })
+            })]
+          })
         })), /*#__PURE__*/_jsx(DateInput, _extends({}, sharedProps, props, {
           end: /*#__PURE__*/_jsx(Icon, {
             active: true,

package/esm/dates/__stories__/DatePicker.stories.js

@@ -1,8 +1,11 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { useState } from 'react';
+import { InputLabel } from '../../controls/InputLabel';
 import { TextInput } from '../../controls/TextInput';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { Icon } from '../../icons';
 import { HStack } from '../../layout';
+import { Tooltip } from '../../overlays/tooltip/Tooltip';
 import { DatePicker } from '../DatePicker';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const today = new Date(new Date(2024, 7, 18).setHours(0, 0, 0, 0));
@@ -76,6 +79,26 @@ export const FullExample = () => {
           width: "auto"
         })]
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "DatePicker with labelNode",
+      children: /*#__PURE__*/_jsx(ExampleDatePicker, {
+        calendarIconButtonAccessibilityLabel: "Birthdate calendar",
+        label: "Birthdate",
+        labelNode: /*#__PURE__*/_jsxs(HStack, {
+          alignItems: "center",
+          gap: 1,
+          children: [/*#__PURE__*/_jsx(InputLabel, {
+            children: "Birthdate"
+          }), /*#__PURE__*/_jsx(Tooltip, {
+            content: "This will be visible to other users.",
+            children: /*#__PURE__*/_jsx(Icon, {
+              color: "fgMuted",
+              name: "info",
+              size: "xs"
+            })
+          })]
+        })
+      })
     }), /*#__PURE__*/_jsx(Example, {
       title: "DatePicker fit-content width",
       children: /*#__PURE__*/_jsxs(HStack, {

package/package.json

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