fix: Update <SelectOption> docs and add deprecation decorators (#148)

maximo-macchi-cb · web-flow · commit 9a19d9e95788 · 2025-11-07T15:58:55.000-06:00
* Update examples to use correct React Live scope component name

* Update deprecation message

* Add deprecation flags to old Select components

* Update changelogs
diff --git a/apps/docs/docs/components/inputs/Select/mobileMetadata.json b/apps/docs/docs/components/inputs/Select/mobileMetadata.json
@@ -3,7 +3,7 @@
   "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/controls/Select.tsx",
   "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?m=auto&node-id=415-15061&t=6hbCJmIQxCsPCzeU-1",
   "description": "A control for selecting from a list of options.",
-  "warning": "This component is deprecated. Please use SelectAlpha instead.",
+  "warning": "This component is deprecated. Please use the new Select alpha component instead.",
   "relatedComponents": [
     {
       "label": "SelectOption",
diff --git a/apps/docs/docs/components/inputs/Select/webMetadata.json b/apps/docs/docs/components/inputs/Select/webMetadata.json
@@ -4,7 +4,7 @@
   "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-select-select--asset-select",
   "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?m=auto&node-id=415-15061&t=6hbCJmIQxCsPCzeU-1",
   "description": "A Dropdown control for selecting from a list of options.",
-  "warning": "This component is deprecated. Please use SelectAlpha instead.",
+  "warning": "This component is deprecated. Please use the new Select alpha component instead.",
   "relatedComponents": [
     {
       "label": "SelectAlpha",
diff --git a/apps/docs/docs/components/inputs/SelectOption/_mobileExamples.mdx b/apps/docs/docs/components/inputs/SelectOption/_mobileExamples.mdx
@@ -22,7 +22,7 @@ const SelectMobile = () => {
 
   return (
     <>
-      <Select value={value} onPress={handleOpenTray} />
+      <OldSelect value={value} onPress={handleOpenTray} />
       {isTrayVisible && (
         <Tray title={title} onCloseComplete={handleClose} ref={trayRef}>
           {/* You must wrap options in Menu. Treat it as a Select on web */}
diff --git a/apps/docs/docs/components/inputs/SelectOption/_webExamples.mdx b/apps/docs/docs/components/inputs/SelectOption/_webExamples.mdx
@@ -10,7 +10,7 @@ function DefaultSelect() {
   const options = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5', 'Option 6'];
   return (
     <VStack paddding={2}>
-      <Select value={value} placeholder="Choose something..." onChange={setValue}>
+      <OldSelect value={value} placeholder="Choose something..." onChange={setValue}>
         {options.map((option) => (
           <SelectOption
             value={option}
@@ -20,7 +20,7 @@ function DefaultSelect() {
             media={<CellMedia type="icon" name="upload" />}
           />
         ))}
-      </Select>
+      </OldSelect>
     </VStack>
   );
 }
diff --git a/apps/docs/docs/components/inputs/SelectOption/mobileMetadata.json b/apps/docs/docs/components/inputs/SelectOption/mobileMetadata.json
@@ -3,6 +3,7 @@
   "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/controls/SelectOption.tsx",
   "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?m=auto&node-id=466-13810&t=K73gadcWiDv2aYlS-1",
   "description": "A single option of a Select component.",
+  "warning": "This component is deprecated. Please use the new Select alpha component instead.",
   "relatedComponents": [
     {
       "label": "Select",
diff --git a/apps/docs/docs/components/inputs/SelectOption/webMetadata.json b/apps/docs/docs/components/inputs/SelectOption/webMetadata.json
@@ -4,6 +4,7 @@
   "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-select-selectoption--stories",
   "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?m=auto&node-id=466-13810&t=K73gadcWiDv2aYlS-1",
   "description": "A single option of a Select component.",
+  "warning": "This component is deprecated. Please use the new Select alpha component instead.",
   "relatedComponents": [
     {
       "label": "Select",
diff --git a/packages/common/CHANGELOG.md b/packages/common/CHANGELOG.md
@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.20.1 ((11/7/2025, 01:20 PM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.20.0 (11/7/2025 PST)
 
 #### 🚀 Updates
diff --git a/packages/common/package.json b/packages/common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-common",
-  "version": "8.20.0",
+  "version": "8.20.1",
   "description": "Coinbase Design System - Common",
   "repository": {
     "type": "git",
diff --git a/packages/mcp-server/CHANGELOG.md b/packages/mcp-server/CHANGELOG.md
@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.20.1 ((11/7/2025, 01:20 PM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.20.0 ((11/7/2025, 07:33 AM PST))
 
 This is an artificial version bump with no new change.
diff --git a/packages/mcp-server/package.json b/packages/mcp-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mcp-server",
-  "version": "8.20.0",
+  "version": "8.20.1",
   "description": "Coinbase Design System - MCP Server",
   "repository": {
     "type": "git",
diff --git a/packages/mobile/CHANGELOG.md b/packages/mobile/CHANGELOG.md
@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.20.1 (11/7/2025 PST)
+
+#### 🐞 Fixes
+
+- Add deprecation decorator to old Select. [[#148](https://github.com/coinbase/cds/pull/148)]
+
 ## 8.20.0 (11/7/2025 PST)
 
 #### 🚀 Updates
diff --git a/packages/mobile/package.json b/packages/mobile/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.20.0",
+  "version": "8.20.1",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
diff --git a/packages/mobile/src/controls/Select.tsx b/packages/mobile/src/controls/Select.tsx
@@ -64,6 +64,9 @@ export type SelectBaseProps = SharedProps &
 
 export type SelectProps = SelectBaseProps;
 
+/**
+ * @deprecated Please use the new Select alpha component instead.
+ */
 export const Select = memo(
   forwardRef(
     (
diff --git a/packages/web/CHANGELOG.md b/packages/web/CHANGELOG.md
@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.20.1 (11/7/2025 PST)
+
+#### 🐞 Fixes
+
+- Add deprecation decorator to old Select. [[#148](https://github.com/coinbase/cds/pull/148)]
+
 ## 8.20.0 (11/7/2025 PST)
 
 #### 🚀 Updates
diff --git a/packages/web/package.json b/packages/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.20.0",
+  "version": "8.20.1",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
diff --git a/packages/web/src/controls/Select.tsx b/packages/web/src/controls/Select.tsx
@@ -42,6 +42,9 @@ export type SelectBaseProps = SharedProps &
 
 export type SelectProps = SelectBaseProps;
 
+/**
+ * @deprecated Please use the new Select alpha component instead.
+ */
 export const Select = memo(
   forwardRef<HTMLButtonElement, SelectProps>(function Select(
     {

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`	`"source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/controls/Select.tsx",`
`4`	`4`	`"figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?m=auto&node-id=415-15061&t=6hbCJmIQxCsPCzeU-1",`
`5`	`5`	`"description": "A control for selecting from a list of options.",`
`6`		`- "warning": "This component is deprecated. Please use SelectAlpha instead.",`
	`6`	`+ "warning": "This component is deprecated. Please use the new Select alpha component instead.",`
`7`	`7`	`"relatedComponents": [`
`8`	`8`	`{`
`9`	`9`	`"label": "SelectOption",`
Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@`
`4`	`4`	`"storybook": "https://cds-storybook.coinbase.com/?path=/story/components-select-select--asset-select",`
`5`	`5`	`"figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?m=auto&node-id=415-15061&t=6hbCJmIQxCsPCzeU-1",`
`6`	`6`	`"description": "A Dropdown control for selecting from a list of options.",`
`7`		`- "warning": "This component is deprecated. Please use SelectAlpha instead.",`
	`7`	`+ "warning": "This component is deprecated. Please use the new Select alpha component instead.",`
`8`	`8`	`"relatedComponents": [`
`9`	`9`	`{`
`10`	`10`	`"label": "SelectAlpha",`
Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@`
`3`	`3`	`"source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/controls/SelectOption.tsx",`
`4`	`4`	`"figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?m=auto&node-id=466-13810&t=K73gadcWiDv2aYlS-1",`
`5`	`5`	`"description": "A single option of a Select component.",`
	`6`	`+ "warning": "This component is deprecated. Please use the new Select alpha component instead.",`
`6`	`7`	`"relatedComponents": [`
`7`	`8`	`{`
`8`	`9`	`"label": "Select",`
Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,7 @@`
`4`	`4`	`"storybook": "https://cds-storybook.coinbase.com/?path=/story/components-select-selectoption--stories",`
`5`	`5`	`"figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?m=auto&node-id=466-13810&t=K73gadcWiDv2aYlS-1",`
`6`	`6`	`"description": "A single option of a Select component.",`
	`7`	`+ "warning": "This component is deprecated. Please use the new Select alpha component instead.",`
`7`	`8`	`"relatedComponents": [`
`8`	`9`	`{`
`9`	`10`	`"label": "Select",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@coinbase/cds-common",`
`3`		`- "version": "8.20.0",`
	`3`	`+ "version": "8.20.1",`
`4`	`4`	`"description": "Coinbase Design System - Common",`
`5`	`5`	`"repository": {`
`6`	`6`	`"type": "git",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@coinbase/cds-mcp-server",`
`3`		`- "version": "8.20.0",`
	`3`	`+ "version": "8.20.1",`
`4`	`4`	`"description": "Coinbase Design System - MCP Server",`
`5`	`5`	`"repository": {`
`6`	`6`	`"type": "git",`