update/Dropdown: props

wpmudev · Mar 22, 2024 · 70e21e8 · 70e21e8
1 parent ba4cb86
commit 70e21e8
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 4 deletions.
diff --git a/packages/ui/dropdown/src/dropdown.types.ts b/packages/ui/dropdown/src/dropdown.types.ts
@@ -143,6 +143,9 @@ interface DropdownProps
 			"className"
 		>,
 		SuiStyleType {
+	/**
+	 * The type of dropdown.
+	 */
 	type?: "" | "default" | "select" | "select-checkbox" | "select-variable"
 	/**
 	 * The label for the dropdown.

diff --git a/packages/ui/dropdown/stories/tabs/TabCode.mdx b/packages/ui/dropdown/stories/tabs/TabCode.mdx
@@ -4,7 +4,6 @@ import { buttonCode } from "@wpmudev/sui-tooltip/stories/tabs/Examples/Types.mdx
 <PackageInstallGuide packageName="@wpmudev/sui-dropdown" />
 
 <Section title="Props" border={true}>
-
     	<PropSection title="label" type="string">
     		<p>The dropdown label</p>
     	</PropSection>
@@ -46,7 +45,7 @@ import { buttonCode } from "@wpmudev/sui-tooltip/stories/tabs/Examples/Types.mdx
     		<p>Indicates the color of the button, check <Code isSmall={true}>Button</Code> component for allowed values </p>
     	</PropSection>
 
-		<PropSection title="className" type="boolean">
+		<PropSection title="className" type="string">
     		<p>Custom classNames(s) for further styling</p>
     	</PropSection>
 
@@ -68,6 +67,63 @@ import { buttonCode } from "@wpmudev/sui-tooltip/stories/tabs/Examples/Types.mdx
     		</List>
     	</PropSection>
 
+		<PropSection title="type" type="string">
+    		<p>Represents the type of the Dropdown</p>
+			<p>
+				Allowed values
+				<List>
+					<span label="default" />
+					<span label="select" />
+					<span label="select-checkbox" />
+					<span label="select-variable" />
+				</List>
+			</p>
+    	</PropSection>
+
+		<PropSection title="isResponsive" type="boolean" defaultValue="false">
+    		<p>whther to hide the label of the button or not</p>
+    	</PropSection>
+
+		<PropSection title="isFluid" type="boolean" defaultValue="false">
+    		<p>When set to <Code isSmall={true}>true</Code> the Dropdown will have a full width</p>
+    	</PropSection>
+
+		<PropSection title="closeOnOuterClick" type="boolean" defaultValue="true">
+    		<p>Set this to <Code isSmall={true}>true</Code> if you want the Dropdown to be closed onClick</p>
+    	</PropSection>
+
+		<PropSection title="onToggle" type="function">
+    		<p> Detects when the Dropdown is toggled, the first parameter represents the state </p>
+    	</PropSection>
+
+		<PropSection title="allowSearch" type="boolean" defaultValue="false">
+    		<p> Whether to dsiplay the search field or not </p>
+    	</PropSection>
+
+		<PropSection title="isAsync" type="boolean" defaultValue="true">
+    		<p> Whether to dsiplay the search field or not </p>
+    	</PropSection>
+
+		<PropSection title="isAsync" type="boolean" defaultValue="false">
+    		<p> Whether the options are asynchronous or not </p>
+    	</PropSection>
+
+		<PropSection title="asyncOptions" type="object" defaultValue="{}">
+    		<p> This prop represnt the settings of the async Dropdown, it has two properties: <Code isSmall={true}>perPage</Code>, and <Code isSmall={true}>totlaItems</Code>, both are numbers </p>
+    	</PropSection>
+
+		<PropSection title="getOptions" type="function">
+    		<p> The function used to fetch the options </p>
+    	</PropSection>
+
+		<PropSection title="menuCustomWidth" type="number">
+    		<p> Width for the menu in pixels </p>
+    	</PropSection>
+
+		<PropSection title="searchPlaceholder" type="string">
+    		<p> Placeholder text for the search field </p>
+    	</PropSection>
+
     	<PropSection title="menu" type="array">
     		<p>The menu items to be rendered, each item is an object that could be either a <strong>Menu Group</strong> or a <strong>Menu Item</strong>. </p>
 
@@ -178,9 +234,7 @@ import { buttonCode } from "@wpmudev/sui-tooltip/stories/tabs/Examples/Types.mdx
     				} />
     			</List>
     		</Section>
-
     	</PropSection>
-
 </Section>
 
 <CommonPropsNotice />