Improve docs

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

canon-docs/src/content/components/select.mdx

@@ -10,6 +10,7 @@ import {
   selectSizesSnippet,
   selectDisabledSnippet,
   selectResponsiveSnippet,
+  selectIconSnippet,
 } from './select.props';
 import { ComponentInfos } from '@/components/ComponentInfos';
 
@@ -26,7 +27,16 @@ A common form component for choosing a predefined value in a dropdown menu.
 
 <ComponentInfos
   component="select"
-  classNames={['canon-SelectFieldRoot']}
+  classNames={[
+    'bui-Select',
+    'bui-SelectTrigger',
+    'bui-SelectValue',
+    'bui-SelectIcon',
+    'bui-SelectList',
+    'bui-SelectItem',
+    'bui-SelectItemIndicator',
+    'bui-SelectItemLabel',
+  ]}
   usageCode={selectUsageSnippet}
 />
 
@@ -44,7 +54,7 @@ Select component with label and description.
   align="center"
   py={4}
   open
-  preview={<SelectSnippet story="WithDescription" />}
+  preview={<SelectSnippet story="WithLabelAndDescription" />}
   code={selectDescriptionSnippet}
 />
 
@@ -60,6 +70,19 @@ Here's a view when the selects have different sizes.
   code={selectSizesSnippet}
 />
 
+### With Icon
+
+Here's a view when the select has an icon.
+
+<Snippet
+
+align="center"
+py={4}
+open
+preview={<SelectSnippet story="WithIcon" />}
+code={selectIconSnippet}
+/>
+
 ### Disabled
 
 Here's a view when the select is disabled.

canon-docs/src/content/components/select.props.ts

@@ -7,7 +7,6 @@ import {
 export const selectPropDefs: Record<string, PropDef> = {
   label: {
     type: 'string',
-    default: 'Select an option',
     responsive: false,
   },
   description: {
@@ -24,6 +23,16 @@ export const selectPropDefs: Record<string, PropDef> = {
     values: ['Array<{ value: string, label: string }>'],
     required: true,
   },
+  placeholder: {
+    type: 'string',
+    default: 'Select an item',
+    responsive: false,
+  },
+  icon: {
+    type: 'enum',
+    values: ['ReactNode'],
+    responsive: false,
+  },
   value: {
     type: 'string',
     responsive: false,
@@ -32,24 +41,53 @@ export const selectPropDefs: Record<string, PropDef> = {
     type: 'string',
     responsive: false,
   },
-  placeholder: {
-    type: 'string',
-    responsive: false,
-  },
   size: {
     type: 'enum',
     values: ['small', 'medium'],
     default: 'medium',
     responsive: true,
   },
-  onValueChange: {
+  isOpen: {
+    type: 'boolean',
+    responsive: false,
+  },
+  defaultOpen: {
+    type: 'boolean',
+    responsive: false,
+  },
+  disabledKeys: {
     type: 'enum',
-    values: ['(value: string) => void'],
+    values: ['string[]'],
+    responsive: false,
+  },
+  isDisabled: {
+    type: 'boolean',
+    responsive: false,
+  },
+  isRequired: {
+    type: 'boolean',
+    responsive: false,
+  },
+  isInvalid: {
+    type: 'boolean',
+    responsive: false,
+  },
+  selectedKey: {
+    type: 'string',
+    responsive: false,
+  },
+  defaultSelectedKey: {
+    type: 'string',
     responsive: false,
   },
   onOpenChange: {
     type: 'enum',
-    values: ['(open: boolean) => void'],
+    values: ['(isOpen: boolean) => void'],
+    responsive: false,
+  },
+  onSelectionChange: {
+    type: 'enum',
+    values: ['(key: Key | null) => void'],
     responsive: false,
   },
   ...classNamePropDefs,
@@ -82,6 +120,13 @@ export const selectDescriptionSnippet = `<Select
   options={[ ... ]}
 />`;
 
+export const selectIconSnippet = `<Select
+  name="font"
+  label="Font Family"
+  icon={<RiCloudLine />}
+  options={[ ... ]}
+/>`;
+
 export const selectSizesSnippet = `<Flex>
   <Select
     size="small"

packages/canon/css/styles.css

@@ -10682,12 +10682,16 @@
     border-width: 2px;
   }
 
-  &[data-disabled] {
+  &[disabled] {
     cursor: not-allowed;
     border-color: var(--bui-border-disabled);
     color: var(--bui-fg-disabled);
   }
 
+  &[disabled] .bui-SelectValue {
+    color: var(--bui-fg-disabled);
+  }
+
   &[data-popup-open] .bui-SelectIcon {
     transform: rotate(180deg);
   }
@@ -10706,6 +10710,10 @@
   & .bui-SelectItemIndicator {
     display: none;
   }
+
+  &[disabled] {
+    color: var(--bui-fg-disabled);
+  }
 }
 
 .bui-SelectItem {

packages/canon/src/components/Select/Select.stories.tsx

@@ -77,9 +77,9 @@ export const Sizes: Story = {
     ...Preview.args,
   },
   render: args => (
-    <Flex direction="row" gap="2" style={{ width: '100%', maxWidth: 540 }}>
-      <Select {...args} size="small" />
-      <Select {...args} size="medium" />
+    <Flex direction="row" gap="2">
+      <Select {...args} size="small" icon={<RiCloudLine />} />
+      <Select {...args} size="medium" icon={<RiCloudLine />} />
     </Flex>
   ),
 };

packages/canon/src/components/Select/Select.styles.css

@@ -81,12 +81,16 @@
     border-width: 2px;
   }
 
-  &[data-disabled] {
+  &[disabled] {
     cursor: not-allowed;
     border-color: var(--bui-border-disabled);
     color: var(--bui-fg-disabled);
   }
 
+  &[disabled] .bui-SelectValue {
+    color: var(--bui-fg-disabled);
+  }
+
   &[data-popup-open] .bui-SelectIcon {
     transform: rotate(180deg);
   }
@@ -105,6 +109,10 @@
   & .bui-SelectItemIndicator {
     display: none;
   }
+
+  &[disabled] {
+    color: var(--bui-fg-disabled);
+  }
 }
 
 .bui-SelectItem {