From c0c0a18ca50bf149885de56bd4686cce35baf129 Mon Sep 17 00:00:00 2001
From: Johan Persson <johanopersson@gmail.com>
Date: Wed, 2 Apr 2025 10:38:40 +0200
Subject: [PATCH] Fix minor Canon Select component documentation issues.

Signed-off-by: Johan Persson <johanopersson@gmail.com>
---
 canon-docs/src/app/(docs)/components/select/page.mdx | 7 +++----
 packages/canon/src/components/Select/Select.tsx      | 6 ++----
 packages/canon/src/components/Select/types.ts        | 1 +
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/canon-docs/src/app/(docs)/components/select/page.mdx b/canon-docs/src/app/(docs)/components/select/page.mdx
index 7ceb4845a9..4399f62235 100644
--- a/canon-docs/src/app/(docs)/components/select/page.mdx
+++ b/canon-docs/src/app/(docs)/components/select/page.mdx
@@ -3,7 +3,6 @@ import { Snippet } from '@/components/Snippet';
 import { Tabs } from '@/components/Tabs';
 import { CodeBlock } from '@/components/CodeBlock';
 import { SelectSnippet } from '@/snippets/stories-snippets';
-import { buttonVariants } from '@/snippets/code-snippets';
 import { selectPropDefs } from './props';
 
 # Select
@@ -79,7 +78,7 @@ Select component with label and description.
 
 ### Sizes
 
-Here's a view when buttons have different sizes.
+Here's a view when the selects have different sizes.
 
 <Snippet
   align="center"
@@ -102,7 +101,7 @@ Here's a view when buttons have different sizes.
 
 ### Disabled
 
-Here's a view when buttons are disabled.
+Here's a view when the select is disabled.
 
 <Snippet
   align="center"
@@ -118,7 +117,7 @@ Here's a view when buttons are disabled.
 
 ### Responsive
 
-Here's a view when buttons are responsive.
+Here's a view when the select is responsive.
 
 <CodeBlock
   code={`<Select
diff --git a/packages/canon/src/components/Select/Select.tsx b/packages/canon/src/components/Select/Select.tsx
index a3d99efde0..1fc7072489 100644
--- a/packages/canon/src/components/Select/Select.tsx
+++ b/packages/canon/src/components/Select/Select.tsx
@@ -31,10 +31,10 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
       description,
       value,
       defaultValue,
-      placeholder,
       onValueChange,
       onOpenChange,
       options,
+      placeholder = 'Select an option',
       size = 'medium',
       disabled = false,
       required = false,
@@ -65,9 +65,7 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
               `canon-SelectTrigger--size-${size}`,
             )}
           >
-            <SelectPrimitive.Value
-              placeholder={placeholder || 'Select an option'}
-            />
+            <SelectPrimitive.Value placeholder={placeholder} />
             <SelectPrimitive.Icon className="canon-SelectIcon">
               <Icon name="chevron-down" />
             </SelectPrimitive.Icon>
diff --git a/packages/canon/src/components/Select/types.ts b/packages/canon/src/components/Select/types.ts
index c2f67b9ee7..960129da70 100644
--- a/packages/canon/src/components/Select/types.ts
+++ b/packages/canon/src/components/Select/types.ts
@@ -73,6 +73,7 @@ export interface SelectProps {
 
   /**
    * A placeholder text to show if nothing has been selected and there's no default value
+   * @defaultValue 'Select an option'
    */
   placeholder?: string;