From 4bb688ac4db16987bb8df4e8a48e64db0435ec63 Mon Sep 17 00:00:00 2001 From: jialecl Date: Wed, 26 Aug 2026 09:31:01 +0200 Subject: [PATCH 1/3] Added support for dividers in dropdown options --- .../dropdown/code/DropdownCodePage.tsx | 22 ++++++++++------ .../dropdown/code/examples/basicUsage.tsx | 18 +++++++++++-- .../dropdown/code/examples/icons.tsx | 25 ++++++++++++++++--- .../overview/DropdownOverviewPage.tsx | 4 +++ .../lib/src/dropdown/Dropdown.stories.tsx | 3 +++ packages/lib/src/dropdown/Dropdown.test.tsx | 1 + packages/lib/src/dropdown/DropdownMenu.tsx | 20 +++++++++------ packages/lib/src/dropdown/types.ts | 4 +++ 8 files changed, 76 insertions(+), 21 deletions(-) diff --git a/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx b/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx index 714a567058..99e283368e 100644 --- a/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx +++ b/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); + hasDivider?: boolean; + value: string; +}[]`; + const sections = [ { title: "Props", @@ -117,16 +126,15 @@ const sections = [ - + + + + options - - { - "{ label?: string; icon?: string | (React.ReactNode & React.SVGProps ); value: string }[]" - } - + {optionsTypeString} An array of objects representing the options. Each object has the following properties: diff --git a/apps/website/screens/components/dropdown/code/examples/basicUsage.tsx b/apps/website/screens/components/dropdown/code/examples/basicUsage.tsx index f774cda510..abd474923c 100644 --- a/apps/website/screens/components/dropdown/code/examples/basicUsage.tsx +++ b/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", }, ]; diff --git a/apps/website/screens/components/dropdown/code/examples/icons.tsx b/apps/website/screens/components/dropdown/code/examples/icons.tsx index 938c6de8bc..d4a5f1c4d6 100644 --- a/apps/website/screens/components/dropdown/code/examples/icons.tsx +++ b/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", }, ]; diff --git a/apps/website/screens/components/dropdown/overview/DropdownOverviewPage.tsx b/apps/website/screens/components/dropdown/overview/DropdownOverviewPage.tsx index ff2bfba1de..6305ff64f1 100644 --- a/apps/website/screens/components/dropdown/overview/DropdownOverviewPage.tsx +++ b/apps/website/screens/components/dropdown/overview/DropdownOverviewPage.tsx @@ -131,6 +131,10 @@ const sections = [ Use icons thoughtfully: icons can enhance usability but should only be added when they add clarity. Overloading the dropdown with icons can create visual clutter. + + Add dividers when necessary: add them when it helps users understand a meaningful distinction + between groups of options. + ), }, diff --git a/packages/lib/src/dropdown/Dropdown.stories.tsx b/packages/lib/src/dropdown/Dropdown.stories.tsx index fa2fc16ba6..d753217f91 100644 --- a/packages/lib/src/dropdown/Dropdown.stories.tsx +++ b/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", diff --git a/packages/lib/src/dropdown/Dropdown.test.tsx b/packages/lib/src/dropdown/Dropdown.test.tsx index 1ea059b966..3d0ac9c109 100644 --- a/packages/lib/src/dropdown/Dropdown.test.tsx +++ b/packages/lib/src/dropdown/Dropdown.test.tsx @@ -19,6 +19,7 @@ const options = [ { value: "2", label: "Ebay", + hasDivider: true, }, { value: "3", diff --git a/packages/lib/src/dropdown/DropdownMenu.tsx b/packages/lib/src/dropdown/DropdownMenu.tsx index 8e8f7b7003..219bd74103 100644 --- a/packages/lib/src/dropdown/DropdownMenu.tsx +++ b/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( style={styles} > {options.map((option, index) => ( - + <> + + {option.hasDivider && } + ))} diff --git a/packages/lib/src/dropdown/types.ts b/packages/lib/src/dropdown/types.ts index 459d783548..a1e7972d74 100644 --- a/packages/lib/src/dropdown/types.ts +++ b/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 = { From c93701d9bf4dc9147badc68ad512efdba94eaaeb Mon Sep 17 00:00:00 2001 From: jialecl Date: Wed, 26 Aug 2026 10:09:02 +0200 Subject: [PATCH 2/3] reverted back menuItemId --- packages/lib/src/dropdown/DropdownMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/lib/src/dropdown/DropdownMenu.tsx b/packages/lib/src/dropdown/DropdownMenu.tsx index 219bd74103..40a4fb0194 100644 --- a/packages/lib/src/dropdown/DropdownMenu.tsx +++ b/packages/lib/src/dropdown/DropdownMenu.tsx @@ -38,7 +38,7 @@ const DropdownMenu = forwardRef( {options.map((option, index) => ( <> Date: Wed, 26 Aug 2026 10:50:39 +0200 Subject: [PATCH 3/3] Fixed id value and added hasDivider explanation to doc --- .../screens/components/dropdown/code/DropdownCodePage.tsx | 3 +++ packages/lib/src/dropdown/DropdownMenu.tsx | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx b/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx index 99e283368e..aa7617ccfa 100644 --- a/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx +++ b/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx @@ -154,6 +154,9 @@ const sections = [
  • value: Option inner value.
    • +
  • + hasDivider: Whether a divider should be displayed after the option. +
    • - diff --git a/packages/lib/src/dropdown/DropdownMenu.tsx b/packages/lib/src/dropdown/DropdownMenu.tsx index 40a4fb0194..d689e95367 100644 --- a/packages/lib/src/dropdown/DropdownMenu.tsx +++ b/packages/lib/src/dropdown/DropdownMenu.tsx @@ -38,7 +38,7 @@ const DropdownMenu = forwardRef( {options.map((option, index) => ( <>