FIX STORIES

Author: rivka-ungar

packages/docs/src/pages/components/Dropdown/DropdownBasicDropdown.mdx

@@ -1,5 +1,11 @@
 import { Meta } from "@storybook/blocks";
 import * as DropdownBasicDropdownStories from "./DropdownBasicDropdown.stories";
+import basicSelectDo1 from "./assets/basicSelectDo1.png";
+import basicSelectDont1 from "./assets/basicSelectDont1.png";
+import basicSelectDo2 from "./assets/basicSelectDo2.png";
+import basicSelectDont2 from "./assets/basicSelectDont2.png";
+import dont1 from "./assets/dont1.png";
+import { StorybookLink } from "vibe-storybook-components";
 
 <Meta of={DropdownBasicDropdownStories} />
 
@@ -86,6 +92,39 @@ The Dropdown component supports multi select option that display as chips. The s
 
 <Canvas of={DropdownBasicDropdownStories.DropdownWithIconOrAvatar} />
 
+## Do's and Don'ts
+
+<ComponentRules
+  rules={[
+    {
+      positive: {
+        component: <img src={basicSelectDo1} alt="do1" style={{ width: "300px" }} />,
+        description: "Use the searchable option when having a long list of options."
+      },
+      negative: {
+        component: <img src={basicSelectDont1} alt="dont1" style={{ width: "300px" }} />,
+        description: <>Use a searchable select when the list is short. Use the select as is.</>
+      }
+    },
+    {
+      positive: {
+        component: <img src={basicSelectDo2} alt="do2" style={{ width: "300px" }} />,
+        description:
+          "Use the select as a closed component. Users should normally be allowed only to click on the items; search is not recommended, though possible."
+      },
+      negative: {
+        component: <img src={basicSelectDont2} alt="dont2" style={{ width: "300px" }} />,
+        description: (
+          <>
+            Keep the select component in open mode as permanent state. If this is a design requirement consider use the
+            box mode instead <StorybookLink page="Components/Dropdown">box mode</StorybookLink> instead.
+          </>
+        )
+      }
+    }
+  ]}
+/>
+
 ## Use cases and examples
 
 ### Searchable dropdown

packages/docs/src/pages/components/Dropdown/DropdownBasicDropdown.stories.tsx

@@ -82,7 +82,7 @@ export const Sizes: Story = {
       []
     );
     return (
-      <Flex direction="column" gap="medium">
+      <Flex gap="medium">
         <div style={{ width: "300px" }}>
           <Dropdown
             id="sizes-large"

packages/docs/src/pages/components/Dropdown/DropdownBoxMode.mdx

@@ -1,5 +1,7 @@
 import { Meta } from "@storybook/blocks";
 import * as DropdownBoxModeStories from "./DropdownBoxMode.stories";
+import boxModeDo from "./assets/boxModeDo.png";
+import boxModeDont from "./assets/boxModeDont.png";
 
 <Meta of={DropdownBoxModeStories} />
 
@@ -64,36 +66,17 @@ The box mode supports multi select option that display as chips. The selected it
   rules={[
     {
       positive: {
-        component: (
-          <div style={{ width: "200px", padding: "16px", background: "#f5f5f5" }}>
-            <div style={{ background: "white", padding: "12px", borderRadius: "8px" }}>
-              <div style={{ marginBottom: "8px", fontWeight: "bold" }}>Tooltip</div>
-              <div style={{ marginBottom: "4px" }}>Chip</div>
-              <div>Button</div>
-              <div style={{ marginTop: "8px", fontSize: "12px", color: "#666" }}>Helper text</div>
-            </div>
-          </div>
-        ),
-        description: "Use when there's need for a dropdown that displays the list in a persistent, always-open panel."
+        component: <img src={boxModeDo} alt="do1" style={{ width: "300px" }} />,
+        description: "Use when there’s a need for a select that displays the list in a persistent, always-open panel."
       },
       negative: {
-        component: (
-          <div style={{ width: "300px", padding: "16px", background: "#f5f5f5" }}>
-            <div style={{ background: "white", padding: "12px", borderRadius: "8px" }}>
-              <input
-                type="text"
-                placeholder="Search menu"
-                style={{ width: "100%", padding: "8px", border: "1px solid #ddd", borderRadius: "4px" }}
-                autoFocus={false}
-                tabIndex={-1}
-              />
-              <div style={{ marginTop: "8px" }}>Category 1</div>
-              <div>Option 1</div>
-              <div>Option 2</div>
-            </div>
-          </div>
-        ),
-        description: "Use when there's need for a searchable menu, for navigation. Use a menu instead"
+        component: <img src={boxModeDont} alt="dont1" style={{ width: "300px" }} />,
+        description: (
+          <>
+            Use when there's need for a searchable menu, for navigation. Use a{" "}
+            <StorybookLink page="Components/Menu">menu</StorybookLink> instead
+          </>
+        )
       }
     }
   ]}