docs(dropdown): stories description for dropdown

packages/components/dropdown/src/Dropdown.doc.mdx

@@ -79,23 +79,35 @@ import { Dropdown } from '@spark-ui/dropdown'
 
 <Canvas of={stories.Default} />
 
-### Controlled value
+### Controlled
+
+Use `value` and `onValueChange` props to control the value of the dropdown.
 
 <Canvas of={stories.Controlled} />
 
 ### Controlled open state
 
+Use `open` and `onOpenChange` props to control when the dropdown is opened or closed.
+
 <Canvas of={stories.ControlledOpenState} />
 
 ### Disabled
 
+Use `disabled` on the root component to disable the dropdown entirely.
+
 TODO
 
 ### Disabled Item
 
+Use `disabled` on individual `Dropdown.Item` to disable them.
+
 <Canvas of={stories.DisabledItem} />
 
-### Grouped items
+### Groups
+
+Similar to `optgroup` HTML tag, you can gather your items in groups.
+
+It is important to use `Dropdown.Label` inside each `Dropdown.Group` to give it an accessible name.
 
 <Canvas of={stories.Grouped} />
 
@@ -105,24 +117,40 @@ TODO
 
 ### Trigger leading icon
 
+Use `Dropdown.LeadingIcon` inside `Dropdown.Trigger` to prefix your trigger with an icon.
+
+<Canvas of={stories.LeadingIcon} />
+
+### Read only
+
 TODO
 
-### Multiple selection
+## Multiple selection
 
-<Canvas of={stories.MultipleSelection} />
+When using `multiple` mode, the component manages an array of values and no longer a single value.
 
-### Multiple selection (controlled)
+It means you must adapt `value`, `onValueChange` and `defaultValue` accordingly.
 
-<Canvas of={stories.MultipleSelectionControlled} />
+In `multiple` mode, the dropdown won't close when the user selects an item, and it is possible to unselect every item.
 
-### Read only
+### Default
 
-TODO
+<Canvas of={stories.MultipleSelection} />
+
+### Controlled - multiple selection
+
+Use `value` and `onValueChange` props to control the value of the dropdown.
+
+<Canvas of={stories.MultipleSelectionControlled} />
 
 ## Advanced usage
 
 ### Custom item
 
+If your `Dropdown.Item` contains anything else than raw text, you may use any JSX markup to customize it.
+
+**If you do so, you MUST use `Dropdown.ItemText` inside of your item to give it a proper accessible name.**
+
 <Canvas of={stories.CustomItem} />
 
 ### With form field label

packages/components/dropdown/src/Dropdown.stories.tsx

@@ -19,9 +19,6 @@ export const Default: StoryFn = _args => {
     <div className="pb-[300px]">
       <Dropdown>
         <Dropdown.Trigger aria-label="Book">
-          <Dropdown.LeadingIcon>
-            <Book />
-          </Dropdown.LeadingIcon>
           <Dropdown.Value placeholder="Pick a book" />
         </Dropdown.Trigger>
 
@@ -198,6 +195,32 @@ export const Grouped: StoryFn = _args => {
   )
 }
 
+export const LeadingIcon: StoryFn = _args => {
+  return (
+    <div className="pb-[300px]">
+      <Dropdown>
+        <Dropdown.Trigger aria-label="Book">
+          <Dropdown.LeadingIcon>
+            <Book />
+          </Dropdown.LeadingIcon>
+          <Dropdown.Value placeholder="Pick a book" />
+        </Dropdown.Trigger>
+
+        <Dropdown.Popover>
+          <Dropdown.Items>
+            <Dropdown.Item value="book-1">To Kill a Mockingbird</Dropdown.Item>
+            <Dropdown.Item value="book-2">War and Peace</Dropdown.Item>
+            <Dropdown.Item value="book-3">The Idiot</Dropdown.Item>
+            <Dropdown.Item value="book-4">A Picture of Dorian Gray</Dropdown.Item>
+            <Dropdown.Item value="book-5">1984</Dropdown.Item>
+            <Dropdown.Item value="book-6">Pride and Prejudice</Dropdown.Item>
+          </Dropdown.Items>
+        </Dropdown.Popover>
+      </Dropdown>
+    </div>
+  )
+}
+
 export const FormFieldLabel: StoryFn = _args => {
   return (
     <div className="pb-[300px]">