diff --git a/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx b/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx index 714a567058..aa7617ccfa 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: @@ -146,6 +154,9 @@ const sections = [
  • value: Option inner value.
  • +
  • + hasDivider: Whether a divider should be displayed after the option. +
  • - 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..d689e95367 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 = {