[minor] Added support for dividers in dropdown options

apps/website/screens/components/dropdown/code/DropdownCodePage.tsx

@@ -4,9 +4,18 @@ import QuickNavContainer from "@/common/QuickNavContainer";
 import Example from "@/common/example/Example";
 import basicUsage from "./examples/basicUsage";
 import icons from "./examples/icons";
-import Code, { TableCode } from "@/common/Code";
+import Code, { ExtendedTableCode, TableCode } from "@/common/Code";
 import StatusBadge from "@/common/StatusBadge";
 
+const optionsTypeString = `{
+  label?: string;
+  icon?: string 
+  | (React.ReactNode 
+  & React.SVGProps<SVGSVGElement>);
+  hasDivider?: boolean;
+  value: string;
+}[]`;
+
 const sections = [
   {
     title: "Props",
@@ -117,16 +126,15 @@ const sections = [
             <tr>
               <td>
                 <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
-                  <StatusBadge status="required" />
+                  <DxcFlex gap="var(--spacing-gap-xs)" alignItems="baseline">
+                    <StatusBadge status="required" />
+                    <StatusBadge status="new" />
+                  </DxcFlex>
                   options
                 </DxcFlex>
               </td>
               <td>
-                <TableCode>
-                  {
-                    "{ label?: string; icon?: string | (React.ReactNode & React.SVGProps <SVGSVGElement>); value: string }[]"
-                  }
-                </TableCode>
+                <ExtendedTableCode>{optionsTypeString}</ExtendedTableCode>
               </td>
               <td>
                 An array of objects representing the options. Each object has the following properties:
@@ -146,6 +154,9 @@ const sections = [
                   <li>
                     <strong>value</strong>: Option inner value.
                   </li>
+                  <li>
+                    <strong>hasDivider</strong>: Whether a divider should be displayed after the option.
+                  </li>
                 </ul>
               </td>
               <td>-</td>

apps/website/screens/components/dropdown/code/examples/basicUsage.tsx

@@ -11,11 +11,25 @@ const code = `() => {
     },
     {
       value: 2,
-      label: "Windows",
+      label: "IOS",
+      hasDivider: true,
     },
     {
       value: 3,
-      label: "IOS",
+      label: "Windows",
+    },
+    {
+      value: 4,
+      label: "Linux",
+    },
+    {
+      value: 5,
+      label: "macOS",
+      hasDivider: true,
+    },
+    {
+      value: 6,
+      label: "Other",
     },
   ];
 

apps/website/screens/components/dropdown/code/examples/icons.tsx

@@ -8,17 +8,34 @@ const code = `() => {
     {
       value: 1,
       label: "Android",
-      icon: "filled_phone_android",
+      icon: "phone_android",
     },
     {
       value: 2,
+      label: "IOS",
+      icon: "phone_iphone",
+      hasDivider: true,
+    },
+    {
+      value: 3,
       label: "Windows",
       icon: "desktop_windows",
     },
     {
-      value: 3,
-      label: "IOS",
-      icon: "filled_phone_iphone",
+      value: 4,
+      label: "Linux",
+      icon: "laptop",
+    },
+    {
+      value: 5,
+      label: "macOS",
+      icon: "laptop_mac",
+      hasDivider: true,
+    },
+    {
+      value: 6,
+      label: "Other",
+      icon: "devices_other",
     },
   ];
 

apps/website/screens/components/dropdown/overview/DropdownOverviewPage.tsx

@@ -131,6 +131,10 @@ const sections = [
           <strong>Use icons thoughtfully:</strong> icons can enhance usability but should only be added when they add
           clarity. Overloading the dropdown with icons can create visual clutter.
         </DxcBulletedList.Item>
+        <DxcBulletedList.Item>
+          <strong>Add dividers when necessary:</strong> add them when it helps users understand a meaningful distinction
+          between groups of options.
+        </DxcBulletedList.Item>
       </DxcBulletedList>
     ),
   },

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

@@ -48,6 +48,7 @@ const defaultOptions: Option[] = [
   {
     value: "3",
     label: "Apple",
+    hasDivider: true,
   },
   {
     value: "4",
@@ -56,6 +57,7 @@ const defaultOptions: Option[] = [
   {
     value: "5",
     label: "Aliexpress",
+    hasDivider: true,
   },
   {
     value: "6",
@@ -78,6 +80,7 @@ const options: Option[] = [
   {
     value: "2",
     label: "Ebay",
+    hasDivider: true,
   },
   {
     value: "3",

packages/lib/src/dropdown/Dropdown.test.tsx

@@ -19,6 +19,7 @@ const options = [
   {
     value: "2",
     label: "Ebay",
+    hasDivider: true,
   },
   {
     value: "3",

packages/lib/src/dropdown/DropdownMenu.tsx

@@ -4,6 +4,7 @@ import DropdownMenuItem from "./DropdownMenuItem";
 import { DropdownMenuProps } from "./types";
 import scrollbarStyles from "../styles/scroll";
 import DxcBleed from "../bleed/Bleed";
+import DxcDivider from "../divider/Divider";
 
 const DropdownMenuContainer = styled.ul`
   max-height: 230px;
@@ -35,14 +36,17 @@ const DropdownMenu = forwardRef<HTMLUListElement, DropdownMenuProps>(
         style={styles}
       >
         {options.map((option, index) => (
-          <DropdownMenuItem
-            id={`${id}-option-${index}`}
-            key={`${id}-option-${index}`}
-            visuallyFocused={index === visualFocusIndex}
-            iconPosition={iconsPosition}
-            onClick={menuItemOnClick}
-            option={option}
-          />
+          <>
+            <DropdownMenuItem
+              id={`${id}-option-${index}`}
+              key={`${id}-option-${option.value}`}
+              visuallyFocused={index === visualFocusIndex}
+              iconPosition={iconsPosition}
+              onClick={menuItemOnClick}
+              option={option}
+            />
+            {option.hasDivider && <DxcDivider />}
+          </>
         ))}
       </DropdownMenuContainer>
     </DxcBleed>

packages/lib/src/dropdown/types.ts

@@ -16,6 +16,10 @@ export type Option = {
    * Option inner value.
    */
   value: string;
+  /**
+   * Whether the option has a divider below it.
+   */
+  hasDivider?: boolean;
 };
 
 type Props = {