From 75b7bb09f43aa2b24bbe29fa28af67566ed704c2 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Thu, 13 Feb 2025 13:40:26 +0100 Subject: [PATCH 01/14] Reimplementation of the Dropdown component with new CSS variables --- packages/lib/src/dropdown/Dropdown.tsx | 221 +++++++++--------- packages/lib/src/dropdown/DropdownMenu.tsx | 50 ++-- .../lib/src/dropdown/DropdownMenuItem.tsx | 84 +++---- 3 files changed, 168 insertions(+), 187 deletions(-) diff --git a/packages/lib/src/dropdown/Dropdown.tsx b/packages/lib/src/dropdown/Dropdown.tsx index 070005679d..1c04de8fa1 100644 --- a/packages/lib/src/dropdown/Dropdown.tsx +++ b/packages/lib/src/dropdown/Dropdown.tsx @@ -10,6 +10,113 @@ import DropdownMenu from "./DropdownMenu"; import DropdownPropsType from "./types"; import { Tooltip } from "../tooltip/Tooltip"; +const sizes = { + small: "60px", + medium: "240px", + large: "480px", + fillParent: "100%", + fitContent: "fit-content", +}; + +const calculateWidth = (margin: DropdownPropsType["margin"], size: DropdownPropsType["size"]) => + size != null && + (size === "fillParent" + ? `calc(${sizes[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` + : sizes[size]); + +const DropdownContainer = styled.div<{ + margin: DropdownPropsType["margin"]; + size: DropdownPropsType["size"]; +}>` + width: ${(props) => calculateWidth(props.margin, props.size)}; + margin: ${(props) => (props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px")}; + margin-top: ${(props) => + props.margin && typeof props.margin === "object" && props.margin.top ? spaces[props.margin.top] : ""}; + margin-right: ${(props) => + props.margin && typeof props.margin === "object" && props.margin.right ? spaces[props.margin.right] : ""}; + margin-bottom: ${(props) => + props.margin && typeof props.margin === "object" && props.margin.bottom ? spaces[props.margin.bottom] : ""}; + margin-left: ${(props) => + props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""}; +`; + +const DropdownTrigger = styled.button<{ + label: DropdownPropsType["label"]; + margin: DropdownPropsType["margin"]; + size: DropdownPropsType["size"]; +}>` + display: flex; + justify-content: space-between; + align-items: center; + gap: var(--spacing-gap-s); + width: 100%; + height: var(--height-m); + min-width: ${(props) => (props.label === "" ? "0px" : calculateWidth(props.margin, props.size))}; + border: 0; + border-radius: var(--border-radius-s); + background-color: ${(props) => + props.disabled ? "var(--color-bg-neutral-lightest);" : "var(--color-bg-neutral-light);"}; + color: ${(props) => (props.disabled ? "var(--color-fg-neutral-medium);" : "var(--color-fg-neutral-dark);")}; + cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")}; + + ${(props) => + !props.disabled && + ` + &:focus { + outline: 2px solid var(--border-color-secondary-medium); + } + &:hover { + background-color: var(--color-bg-neutral-light); + } + &:active { + background-color: var(--color-bg-neutral-light); + } + `}; +`; + +const DropdownTriggerContent = styled.span` + display: flex; + align-items: center; + gap: var(--spacing-gap-s); + margin-left: 0px; + margin-right: 0px; + width: 100%; + overflow: hidden; + white-space: nowrap; +`; + +const DropdownTriggerLabel = styled.span` + font-family: var(--typography-font-family); + font-size: var(--typography-label-l); + font-weight: var(--typography-label-regular); + text-overflow: ellipsis; + overflow: hidden; +`; + +const DropdownTriggerIcon = styled.span<{ + disabled: DropdownPropsType["disabled"]; +}>` + display: flex; + color: var(--color-fg-neutral-dark); + font-size: var(--typography-label-xl); + + svg { + width: 20px; + height: var(--height-xs); + } +`; + +const CaretIcon = styled.span<{ disabled: DropdownPropsType["disabled"] }>` + display: flex; + color: ${(props) => (props.disabled ? "var(--color-fg-neutral-medium);" : "var(--color-fg-neutral-dark);")}; + font-size: var(--typography-label-l); + + svg { + width: 16px; + height: var(--height-xxs); + } +`; + const DxcDropdown = ({ options, optionsIconPosition = "before", @@ -220,118 +327,4 @@ const DxcDropdown = ({ ); }; -const sizes = { - small: "60px", - medium: "240px", - large: "480px", - fillParent: "100%", - fitContent: "fit-content", -}; - -const calculateWidth = (margin: DropdownPropsType["margin"], size: DropdownPropsType["size"]) => - size != null && - (size === "fillParent" - ? `calc(${sizes[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` - : sizes[size]); - -const DropdownContainer = styled.div<{ - margin: DropdownPropsType["margin"]; - size: DropdownPropsType["size"]; -}>` - width: ${(props) => calculateWidth(props.margin, props.size)}; - margin: ${(props) => (props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px")}; - margin-top: ${(props) => - props.margin && typeof props.margin === "object" && props.margin.top ? spaces[props.margin.top] : ""}; - margin-right: ${(props) => - props.margin && typeof props.margin === "object" && props.margin.right ? spaces[props.margin.right] : ""}; - margin-bottom: ${(props) => - props.margin && typeof props.margin === "object" && props.margin.bottom ? spaces[props.margin.bottom] : ""}; - margin-left: ${(props) => - props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""}; -`; - -const DropdownTrigger = styled.button<{ - label: DropdownPropsType["label"]; - margin: DropdownPropsType["margin"]; - size: DropdownPropsType["size"]; -}>` - display: flex; - justify-content: space-between; - align-items: center; - gap: ${(props) => props.theme.caretIconSpacing}; - width: 100%; - height: ${(props) => props.theme.buttonHeight}; - min-width: ${(props) => (props.label === "" ? "0px" : calculateWidth(props.margin, props.size))}; - border-radius: ${(props) => props.theme.buttonBorderRadius}; - border-width: ${(props) => props.theme.buttonBorderThickness}; - border-style: ${(props) => props.theme.buttonBorderStyle}; - border-color: ${(props) => (props.disabled ? props.theme.disabledButtonBorderColor : props.theme.buttonBorderColor)}; - padding-top: ${(props) => props.theme.buttonPaddingTop}; - padding-bottom: ${(props) => props.theme.buttonPaddingBottom}; - padding-left: ${(props) => props.theme.buttonPaddingLeft}; - padding-right: ${(props) => props.theme.buttonPaddingRight}; - background-color: ${(props) => - props.disabled ? props.theme.disabledButtonBackgroundColor : props.theme.buttonBackgroundColor}; - color: ${(props) => (props.disabled ? props.theme.disabledColor : props.theme.buttonFontColor)}; - cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")}; - - ${(props) => - !props.disabled && - ` - &:focus { - outline: 2px solid ${props.theme.focusColor}; - } - &:hover { - background-color: ${props.theme.hoverButtonBackgroundColor}; - } - &:active { - background-color: ${props.theme.activeButtonBackgroundColor}; - } - `}; -`; - -const DropdownTriggerContent = styled.span` - display: flex; - align-items: center; - gap: ${(props) => props.theme.buttonIconSpacing}; - margin-left: 0px; - margin-right: 0px; - width: 100%; - overflow: hidden; - white-space: nowrap; -`; - -const DropdownTriggerLabel = styled.span` - font-family: ${(props) => props.theme.buttonFontFamily}; - font-size: ${(props) => props.theme.buttonFontSize}; - font-style: ${(props) => props.theme.buttonFontStyle}; - font-weight: ${(props) => props.theme.buttonFontWeight}; - text-overflow: ellipsis; - overflow: hidden; -`; - -const DropdownTriggerIcon = styled.span<{ - disabled: DropdownPropsType["disabled"]; -}>` - display: flex; - color: ${(props) => (props.disabled ? props.theme.disabledColor : props.theme.buttonIconColor)}; - font-size: ${(props) => props.theme.buttonIconSize}; - - svg { - width: ${(props) => props.theme.buttonIconSize}; - height: ${(props) => props.theme.buttonIconSize}; - } -`; - -const CaretIcon = styled.span<{ disabled: DropdownPropsType["disabled"] }>` - display: flex; - color: ${(props) => (props.disabled ? props.theme.disabledColor : props.theme.caretIconColor)}; - font-size: ${(props) => props.theme.caretIconSize}; - - svg { - width: ${(props) => props.theme.caretIconSize}; - height: ${(props) => props.theme.caretIconSize}; - } -`; - export default DxcDropdown; diff --git a/packages/lib/src/dropdown/DropdownMenu.tsx b/packages/lib/src/dropdown/DropdownMenu.tsx index 900b1d6500..c0109be3a2 100644 --- a/packages/lib/src/dropdown/DropdownMenu.tsx +++ b/packages/lib/src/dropdown/DropdownMenu.tsx @@ -2,6 +2,25 @@ import { forwardRef, memo } from "react"; import styled from "styled-components"; import DropdownMenuItem from "./DropdownMenuItem"; import { DropdownMenuProps } from "./types"; +import { scrollbarStyles } from "../styles/scroll"; + +const DropdownMenuContainer = styled.ul` + display: inline-flex; + flex-direction: column; + align-items: flex-start; + box-sizing: border-box; + max-height: 230px; + min-width: min-content; + padding: 0; + margin: 0; + background-color: var(--color-bg-neutral-lightest); + border-radius: 0px 0px var(--border-radius-s) var(--border-radius-s); + box-shadow: var(--shadow-low-x-position) var(--shadow-low-y-position) var(--shadow-low-blur) var(--shadow-low-spread) + var(--shadow-dark); + outline: none; + overflow-y: auto; + ${scrollbarStyles} +`; const DropdownMenu = forwardRef( ( @@ -38,35 +57,4 @@ const DropdownMenu = forwardRef( ) ); -const DropdownMenuContainer = styled.ul` - box-sizing: border-box; - max-height: 230px; - min-width: min-content; - padding: 0; - margin: 0; - background-color: ${(props) => props.theme.optionBackgroundColor}; - border-width: ${(props) => props.theme.borderThickness}; - border-style: ${(props) => props.theme.borderStyle}; - border-color: ${(props) => props.theme.borderColor}; - border-radius: ${(props) => props.theme.borderRadius}; - border-top-right-radius: 0; - border-top-left-radius: 0; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); - outline: none; - - overflow-y: auto; - &::-webkit-scrollbar { - width: 8px; - height: 8px; - } - &::-webkit-scrollbar-thumb { - background-color: ${(props) => props.theme.scrollBarThumbColor}; - border-radius: 6px; - } - &::-webkit-scrollbar-track { - background-color: ${(props) => props.theme.scrollBarTrackColor}; - border-radius: 6px; - } -`; - export default memo(DropdownMenu); diff --git a/packages/lib/src/dropdown/DropdownMenuItem.tsx b/packages/lib/src/dropdown/DropdownMenuItem.tsx index 3d9f5d35d6..2cc01a1ea3 100644 --- a/packages/lib/src/dropdown/DropdownMenuItem.tsx +++ b/packages/lib/src/dropdown/DropdownMenuItem.tsx @@ -3,6 +3,48 @@ import styled from "styled-components"; import { DropdownMenuItemProps } from "./types"; import DxcIcon from "../icon/Icon"; +const DropdownMenuItemContainer = styled.li<{ visuallyFocused: DropdownMenuItemProps["visuallyFocused"] }>` + box-sizing: border-box; + display: flex; + align-items: center; + gap: var(--spacing-gap-xs); + min-height: 36px; + padding: 0px var(--spacing-padding-xs); + cursor: pointer; + + ${(props) => + props.visuallyFocused && + ` + outline: var(--border-width-m) solid var(--border-color-secondary-medium); + outline-offset: calc(-1 * var(--border-width-m)); +`} + &:hover { + background-color: var(--color-bg-neutral-light); + } + &:active { + background-color: var(--color-bg-neutral-light); + } +`; + +const DropdownMenuItemLabel = styled.span` + font-family: var(--typography-font-family); + font-size: var(--typography-label-l); + font-weight: var(--typography-label-regular); + color: var(--color-fg-neutral-dark); + white-space: nowrap; +`; + +const DropdownMenuItemIcon = styled.div` + display: flex; + color: var(--color-fg-neutral-dark); + font-size: var(--typography-label-xl); + + svg { + width: 20px; + height: var(--height-xs); + } +`; + const DropdownMenuItem = ({ id, visuallyFocused, @@ -29,46 +71,4 @@ const DropdownMenuItem = ({ ); -const DropdownMenuItemContainer = styled.li<{ visuallyFocused: DropdownMenuItemProps["visuallyFocused"] }>` - box-sizing: border-box; - display: flex; - align-items: center; - gap: ${(props) => props.theme.optionIconSpacing}; - min-height: 36px; - padding-top: ${(props) => props.theme.optionPaddingTop}; - padding-bottom: ${(props) => props.theme.optionPaddingBottom}; - padding-left: ${(props) => props.theme.optionPaddingLeft}; - padding-right: ${(props) => props.theme.optionPaddingRight}; - cursor: pointer; - - ${(props) => props.visuallyFocused && `outline: ${props.theme.focusColor} solid 2px; outline-offset: -2px;`} - &:hover { - background-color: ${(props) => props.theme.hoverOptionBackgroundColor}; - } - &:active { - background-color: ${(props) => props.theme.activeOptionBackgroundColor}; - } -`; - -const DropdownMenuItemLabel = styled.span` - font-family: ${(props) => props.theme.optionFontFamily}; - font-size: ${(props) => props.theme.optionFontSize}; - font-style: ${(props) => props.theme.optionFontStyle}; - font-weight: ${(props) => props.theme.optionFontWeight}; - line-height: 1.5rem; - color: ${(props) => props.theme.optionFontColor}; - white-space: nowrap; -`; - -const DropdownMenuItemIcon = styled.div` - display: flex; - color: ${(props) => props.theme.optionIconColor}; - font-size: ${(props) => props.theme.optionIconSize}; - - svg { - width: ${(props) => props.theme.optionIconSize}; - height: ${(props) => props.theme.optionIconSize}; - } -`; - export default memo(DropdownMenuItem); From 31597e97cd7daa568165ddd4b8b5cb8035ddceaf Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Thu, 13 Feb 2025 13:50:59 +0100 Subject: [PATCH 02/14] Fixed problem with hover --- packages/lib/src/dropdown/DropdownMenu.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/lib/src/dropdown/DropdownMenu.tsx b/packages/lib/src/dropdown/DropdownMenu.tsx index c0109be3a2..659b787404 100644 --- a/packages/lib/src/dropdown/DropdownMenu.tsx +++ b/packages/lib/src/dropdown/DropdownMenu.tsx @@ -5,9 +5,6 @@ import { DropdownMenuProps } from "./types"; import { scrollbarStyles } from "../styles/scroll"; const DropdownMenuContainer = styled.ul` - display: inline-flex; - flex-direction: column; - align-items: flex-start; box-sizing: border-box; max-height: 230px; min-width: min-content; From 644f814c9cc2f70dd8412de5a1f1a725e68b12c2 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Thu, 13 Feb 2025 15:43:01 +0100 Subject: [PATCH 03/14] Fixed color for background --- packages/lib/src/dropdown/Dropdown.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/lib/src/dropdown/Dropdown.tsx b/packages/lib/src/dropdown/Dropdown.tsx index 1c04de8fa1..7242bf5b11 100644 --- a/packages/lib/src/dropdown/Dropdown.tsx +++ b/packages/lib/src/dropdown/Dropdown.tsx @@ -55,7 +55,7 @@ const DropdownTrigger = styled.button<{ border: 0; border-radius: var(--border-radius-s); background-color: ${(props) => - props.disabled ? "var(--color-bg-neutral-lightest);" : "var(--color-bg-neutral-light);"}; + props.disabled ? "var(--color-bg-neutral-light);" : "var(--color-bg-neutral-lightest);"}; color: ${(props) => (props.disabled ? "var(--color-fg-neutral-medium);" : "var(--color-fg-neutral-dark);")}; cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")}; From 27a1dab641b6da21b48a53a449b8c496cc0095d5 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Tue, 18 Feb 2025 16:24:03 +0100 Subject: [PATCH 04/14] Fixed border-radius based on latest visual updates --- packages/lib/src/dropdown/DropdownMenu.tsx | 2 +- packages/lib/src/dropdown/DropdownMenuItem.tsx | 9 +++++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/lib/src/dropdown/DropdownMenu.tsx b/packages/lib/src/dropdown/DropdownMenu.tsx index 659b787404..d136e6d9e6 100644 --- a/packages/lib/src/dropdown/DropdownMenu.tsx +++ b/packages/lib/src/dropdown/DropdownMenu.tsx @@ -11,7 +11,7 @@ const DropdownMenuContainer = styled.ul` padding: 0; margin: 0; background-color: var(--color-bg-neutral-lightest); - border-radius: 0px 0px var(--border-radius-s) var(--border-radius-s); + border-radius: var(--border-radius-s); box-shadow: var(--shadow-low-x-position) var(--shadow-low-y-position) var(--shadow-low-blur) var(--shadow-low-spread) var(--shadow-dark); outline: none; diff --git a/packages/lib/src/dropdown/DropdownMenuItem.tsx b/packages/lib/src/dropdown/DropdownMenuItem.tsx index 2cc01a1ea3..8944abcb32 100644 --- a/packages/lib/src/dropdown/DropdownMenuItem.tsx +++ b/packages/lib/src/dropdown/DropdownMenuItem.tsx @@ -18,6 +18,15 @@ const DropdownMenuItemContainer = styled.li<{ visuallyFocused: DropdownMenuItemP outline: var(--border-width-m) solid var(--border-color-secondary-medium); outline-offset: calc(-1 * var(--border-width-m)); `} + &:first-child { + border-top-left-radius: var(--border-radius-s); + border-top-right-radius: var(--border-radius-s); + } + + &:last-child { + border-bottom-left-radius: var(--border-radius-s); + border-bottom-right-radius: var(--border-radius-s); + } &:hover { background-color: var(--color-bg-neutral-light); } From 57511e4301cf00ff20d183929e1da971da137c10 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Thu, 20 Feb 2025 17:21:30 +0100 Subject: [PATCH 05/14] Added documentation with the new structure --- .../pages/components/dropdown/code.tsx | 19 + .../pages/components/dropdown/index.tsx | 8 +- .../components/dropdown/specifications.tsx | 21 - .../pages/components/dropdown/usage.tsx | 21 - .../dropdown/DropdownPageLayout.tsx | 13 +- .../dropdown/code/DropdownCodePage.tsx | 128 ++-- .../overview/DropdownOverviewPage.tsx | 148 +++++ .../{usage => overview}/examples/iconUsage.ts | 0 .../overview/images/dropdown_anatomy.png | Bin 0 -> 27965 bytes .../dropdown/specs/DropdownSpecsPage.tsx | 585 ------------------ .../images/dropdown_option_list_states.png | Bin 24775 -> 0 bytes .../dropdown/specs/images/dropdown_specs.png | Bin 31558 -> 0 bytes .../dropdown/specs/images/dropdown_states.png | Bin 24391 -> 0 bytes .../dropdown/usage/DropdownUsagePage.tsx | 85 --- .../usage/images/dropdown_icon_usage.png | Bin 21493 -> 0 bytes 15 files changed, 239 insertions(+), 789 deletions(-) create mode 100644 apps/website/pages/components/dropdown/code.tsx delete mode 100644 apps/website/pages/components/dropdown/specifications.tsx delete mode 100644 apps/website/pages/components/dropdown/usage.tsx create mode 100644 apps/website/screens/components/dropdown/overview/DropdownOverviewPage.tsx rename apps/website/screens/components/dropdown/{usage => overview}/examples/iconUsage.ts (100%) create mode 100644 apps/website/screens/components/dropdown/overview/images/dropdown_anatomy.png delete mode 100644 apps/website/screens/components/dropdown/specs/DropdownSpecsPage.tsx delete mode 100644 apps/website/screens/components/dropdown/specs/images/dropdown_option_list_states.png delete mode 100644 apps/website/screens/components/dropdown/specs/images/dropdown_specs.png delete mode 100644 apps/website/screens/components/dropdown/specs/images/dropdown_states.png delete mode 100644 apps/website/screens/components/dropdown/usage/DropdownUsagePage.tsx delete mode 100644 apps/website/screens/components/dropdown/usage/images/dropdown_icon_usage.png diff --git a/apps/website/pages/components/dropdown/code.tsx b/apps/website/pages/components/dropdown/code.tsx new file mode 100644 index 0000000000..0c8172ff01 --- /dev/null +++ b/apps/website/pages/components/dropdown/code.tsx @@ -0,0 +1,19 @@ +import Head from "next/head"; +import type { ReactElement } from "react"; +import DropdownPageLayout from "screens/components/dropdown/DropdownPageLayout"; +import DropdownCodePage from "screens/components/dropdown/code/DropdownCodePage"; + +const Code = () => { + return ( + <> + + Dropdown Code — Halstack Design System + + + + ); +}; + +Code.getLayout = (page: ReactElement) => {page}; + +export default Code; diff --git a/apps/website/pages/components/dropdown/index.tsx b/apps/website/pages/components/dropdown/index.tsx index 7432d8ce33..cbfd01fbe0 100644 --- a/apps/website/pages/components/dropdown/index.tsx +++ b/apps/website/pages/components/dropdown/index.tsx @@ -1,7 +1,7 @@ import Head from "next/head"; import type { ReactElement } from "react"; import DropdownPageLayout from "screens/components/dropdown/DropdownPageLayout"; -import DropdownCodePage from "screens/components/dropdown/code/DropdownCodePage"; +import DropdownOverviewPage from "screens/components/dropdown/overview/DropdownOverviewPage"; const Index = () => { return ( @@ -9,13 +9,11 @@ const Index = () => { Dropdown — Halstack Design System - + ); }; -Index.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; +Index.getLayout = (page: ReactElement) => {page}; export default Index; diff --git a/apps/website/pages/components/dropdown/specifications.tsx b/apps/website/pages/components/dropdown/specifications.tsx deleted file mode 100644 index c76e0006ae..0000000000 --- a/apps/website/pages/components/dropdown/specifications.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import DropdownPageLayout from "screens/components/dropdown/DropdownPageLayout"; -import DropdownSpecsPage from "screens/components/dropdown/specs/DropdownSpecsPage"; - -const Specifications = () => { - return ( - <> - - Dropdown Specs — Halstack Design System - - - - ); -}; - -Specifications.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Specifications; diff --git a/apps/website/pages/components/dropdown/usage.tsx b/apps/website/pages/components/dropdown/usage.tsx deleted file mode 100644 index 10037bd07b..0000000000 --- a/apps/website/pages/components/dropdown/usage.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import DropdownPageLayout from "screens/components/dropdown/DropdownPageLayout"; -import DropdownUsagePage from "screens/components/dropdown/usage/DropdownUsagePage"; - -const Usage = () => { - return ( - <> - - Dropdown Usage — Halstack Design System - - - - ); -}; - -Usage.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Usage; diff --git a/apps/website/screens/components/dropdown/DropdownPageLayout.tsx b/apps/website/screens/components/dropdown/DropdownPageLayout.tsx index 2c62cf8ee1..1fb0d5236c 100644 --- a/apps/website/screens/components/dropdown/DropdownPageLayout.tsx +++ b/apps/website/screens/components/dropdown/DropdownPageLayout.tsx @@ -6,9 +6,8 @@ import { ReactNode } from "react"; const DropdownPageHeading = ({ children }: { children: ReactNode }) => { const tabs = [ - { label: "Code", path: "/components/dropdown" }, - { label: "Usage", path: "/components/dropdown/usage" }, - { label: "Specifications", path: "/components/dropdown/specifications" }, + { label: "Overview", path: "/components/dropdown" }, + { label: "Code", path: "/components/dropdown/code" }, ]; return ( @@ -17,12 +16,10 @@ const DropdownPageHeading = ({ children }: { children: ReactNode }) => { - The use of dropdowns has its advantages but it depends on the screen support. Dropdowns are a standard - widget, so the users know how to interact with them. The options available in a dropdown component are - static, preventing erroneous data entered by the user since it only shows a range of correct values for that - input. + The dropdown component is a compact, interactive element that allows users to select from a list of options, + reducing clutter in the interface. - + {children} diff --git a/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx b/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx index 02163b429c..4ffc44ef96 100644 --- a/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx +++ b/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx @@ -25,49 +25,33 @@ const sections = [ + caretHidden - - - options - + boolean + Whether the arrow next to the label must be displayed or not. - - { - "{ label?: string; icon?: string | (React.ReactNode & React.SVGProps ); value: string }[]" - } - + false + + + disabled - An array of objects representing the options. Each object has the following properties: -
    -
  • - label: Option display value. -
    • -
  • - icon:{" "} - - Material Symbol - {" "} - name or SVG element as the icon that will be placed next to the option label. When using Material - Symbols, replace spaces with underscores. By default they are outlined if you want it to be filled - prefix the symbol name with "filled_". -
    • -
  • - value: Option inner value. -
    • -
+ boolean + + If true, the component will be disabled. + + false - - - optionsIconPosition + expandOnHover - 'before' | 'after' + boolean - In case options include icons, whether the icon should appear after or before the label. + If true, the options are shown when the dropdown is hovered. - 'before' + false @@ -96,42 +80,25 @@ const sections = [ - label - - string - - Text to be placed within the dropdown. - - - - - caretHidden - - boolean - - Whether the arrow next to the label must be displayed or not. - - false - - - - disabled + margin - boolean + + 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin + - If true, the component will be disabled. - false + Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' + and 'right' properties in order to specify different margin sizes. + - - expandOnHover - - boolean - - If true, the options are shown when the dropdown is hovered. + label - false + string + Text to be placed within the dropdown. + - @@ -150,18 +117,51 @@ const sections = [ - - margin + + + + options + + - 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin + { + "{ label?: string; icon?: string | (React.ReactNode & React.SVGProps ); value: string }[]" + } - Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' - and 'right' properties in order to specify different margin sizes. + An array of objects representing the options. Each object has the following properties: +
    +
  • + label: Option display value. +
    • +
  • + icon:{" "} + + Material Symbol + {" "} + name or SVG element as the icon that will be placed next to the option label. When using Material + Symbols, replace spaces with underscores. By default they are outlined if you want it to be filled + prefix the symbol name with "filled_". +
    • +
  • + value: Option inner value. +
    • +
- + + optionsIconPosition + + 'before' | 'after' + + In case options include icons, whether the icon should appear after or before the label. + + 'before' + + size diff --git a/apps/website/screens/components/dropdown/overview/DropdownOverviewPage.tsx b/apps/website/screens/components/dropdown/overview/DropdownOverviewPage.tsx new file mode 100644 index 0000000000..1b4f079cf7 --- /dev/null +++ b/apps/website/screens/components/dropdown/overview/DropdownOverviewPage.tsx @@ -0,0 +1,148 @@ +import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react"; +import DocFooter from "@/common/DocFooter"; +import QuickNavContainer from "@/common/QuickNavContainer"; +import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; +import Example from "@/common/example/Example"; +import iconUsage from "./examples/iconUsage"; +import Image from "@/common/Image"; +import anatomy from "./images/dropdown_anatomy.png"; + +const sections = [ + { + title: "Introduction", + content: ( + <> + + The Dropdown enhances usability by displaying a list of choices in a collapsible menu, optimizing space while + keeping options easily accessible. It supports icons, sections, and different selection behaviors to adapt to + various use cases. Designed for efficiency, it ensures keyboard navigation, accessibility, and proper contrast + for readability. + + + ), + }, + { + title: "Anatomy", + content: ( + <> + Dropdown's anatomy + + + Dropdown: the main container that triggers the list of options when clicked, allowing users + to select an item. + + + Listbox: the expanded panel displaying all available options for selection. + + + Icon: a visual aid that can accompany the selected option, helping users quickly recognize + the category or purpose. + + + Label: the textual representation of the selected option, ensuring clarity in the user's + choice. + + + Expand/collapse icon: an indicator that shows whether the dropdown is expanded or + collapsed. + + + List item: an individual option within the dropdown list, which users can click to make a + selection. + + + + ), + }, + { + title: "Using dropdowns", + content: ( + <> + + Dropdowns have a similar look and behavior to select components, the difference is that while select is only + to collect user's data into a form, dropdown can be used in various scenarios. + + + + Dropdowns display a list of options that appear when the user clicks or hovers over the parent element, + providing a compact and efficient way to make selections. + + + The arrow linked to the dropdown label indicates to the user that more options are available but currently + hidden. + + + By default, a dropdown expands below its main container if there is enough screen space to accommodate the + full size of the pop-up. + + + + If displaying the dropdown below the selector hides important information, reducing discoverability and + scanability, consider alternative ways to present the content or adjust the pop-up's position to better fit + the application's needs. + + + ), + }, + { + title: "Icon usage", + content: ( + <> + + Icons can be used within the dropdown component in various configurations. They can be placed before or after + the label or serve as the sole content of the dropdown placeholder and options. This maintains consistency + with other components in our Design System, such as buttons and selects, which follow the same behavior. + + + + ), + }, + { + title: "Best practices", + content: ( + + + User clear and concise labels: ensure dropdown labels are descriptive and easily understood, + helping users quickly grasp their choices. Avoid vague terms like "Select an option.” + + + Prioritize logical ordering: arrange options in a meaningful order—alphabetically for lists, + by frequency of use for common selections, or categorically when grouping similar items. + + + Keep the list of options manageable: avoid overwhelming users with too many options. If the + list is long, consider using grouped sections or an alternative selection method like autocomplete. + + + Ensure accessibility: provide sufficient contrast, keyboard navigation, and screen reader + support. Icons should always have accessible labels to maintain clarity. + + + Avoid nesting too deep: multi-level dropdowns can be hard to navigate. If multiple selection + levels are required, consider using a different component, like a sidebar or tree structure. + + + Be mindful of placement and screen space: ensure the dropdown appears in a location where it + doesn't obscure critical content. If needed, adjust its position dynamically to fit within the viewport. + + + 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. + + + ), + }, +]; + +const DropdownOverviewPage = () => { + return ( + + + + + + + ); +}; + +export default DropdownOverviewPage; diff --git a/apps/website/screens/components/dropdown/usage/examples/iconUsage.ts b/apps/website/screens/components/dropdown/overview/examples/iconUsage.ts similarity index 100% rename from apps/website/screens/components/dropdown/usage/examples/iconUsage.ts rename to apps/website/screens/components/dropdown/overview/examples/iconUsage.ts diff --git a/apps/website/screens/components/dropdown/overview/images/dropdown_anatomy.png b/apps/website/screens/components/dropdown/overview/images/dropdown_anatomy.png new file mode 100644 index 0000000000000000000000000000000000000000..d76d897b90d34bbc4c79af617e409370ccfb16c4 GIT binary patch literal 27965 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 literal 0 HcmV?d00001 diff --git a/apps/website/screens/components/dropdown/specs/DropdownSpecsPage.tsx b/apps/website/screens/components/dropdown/specs/DropdownSpecsPage.tsx deleted file mode 100644 index 563745d180..0000000000 --- a/apps/website/screens/components/dropdown/specs/DropdownSpecsPage.tsx +++ /dev/null @@ -1,585 +0,0 @@ -import { DxcTable, DxcParagraph, DxcBulletedList, DxcFlex, DxcLink } from "@dxc-technology/halstack-react"; -import Image from "@/common/Image"; -import Figure from "@/common/Figure"; -import Code from "@/common/Code"; -import DocFooter from "@/common/DocFooter"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import specsImage from "./images/dropdown_specs.png"; -import statesImage from "./images/dropdown_states.png"; -import optionListStatesImage from "./images/dropdown_option_list_states.png"; - -const sections = [ - { - title: "Specifications", - content: ( -
- Dropdown design specifications -
- ), - }, - { - title: "States", - subSections: [ - { - title: "Dropdown button", - content: ( - <> - - States: enabled, hover, focus, active{" "} - and disabled. - -
- Dropdown button states -
- - ), - }, - { - title: "Option list", - content: ( - <> - - States: Enabled, hover, focus and{" "} - selected. - -
- Option list states -
- - ), - }, - ], - }, - { - title: "Design tokens", - subSections: [ - { - title: "Color", - content: ( - - - - Component Token - Element - Core token - Value - - - - - - buttonBackgroundColor - - Button - - color-white - - #ffffff - - - - buttonFontColor - - Button - - color-black - - #000000 - - - - hoverButtonBackgroundColor - - Button:hover - - color-grey-100 - - #f2f2f2 - - - - activeButtonBackgroundColor - - Button:active - - color-grey-300 - - #cccccc - - - - buttonIconColor - - Icon - - color-black - - #000000 - - - - disabledColor - - Button font:disabled - - color-grey-500 - - #999999 - - - - disabledButtonBackgroundColor - - Button:disabled - - color-transparent - - transparent - - - - optionBackgroundColor - - Option - - color-white - - #ffffff - - - - hoverOptionBackgroundColor - - Option:hover - - color-grey-100 - - #f2f2f2 - - - - activeOptionBackgroundColor - - Option:active - - color-grey-300 - - #cccccc - - - - scrollBarThumbColor - - Scroll thumb - - color-grey-700 - - #666666 - - - - scrollBarTrackColor - - Scroll track - - color-grey-300 - - #cccccc - - - - focusColor - - Focus - - color-blue-600 - - #0095ff - - - - ), - }, - { - title: "Width", - content: ( - - - - Width - Value - - - - - - small - - 60px - - - - medium - - 240px - - - - large - - 480px - - - - fitContent - - - - - - - fillParent - - - - - - - ), - }, - { - title: "Margin", - content: ( - - - - Margin - Value - - - - - - xxsmall - - 6px - - - - xsmall - - 16px - - - - small - - 24px - - - - medium - - 36px - - - - large - - 48px - - - - xlarge - - 64px - - - - xxlarge - - 100px - - - - ), - }, - { - title: "Padding", - content: ( - - - - Property - Element - Value - - - - - - padding-left - - Dropdown button - 16px - - - - padding-left - - Options list - 16px - - - - padding-right - - Dropdown button - 16px - - - - padding-right - - Options list - 16px - - - - ), - }, - { - title: "Border", - content: ( - - - - Property - Element - Core token - Value - - - - - - border-width - - Dropdown button - - border-width-0 - - 0rem / 0px - - - - border-style - - Dropdown button - - border-style-none - - none - - - - border-radius - - Dropdown button - - border-radius-medium - - 0.25rem / 4px - - - - border-width - - Options list - - border-width-0 - - 0rem / 0px - - - - border-style - - Options list - - border-style-none - - none - - - - border-radius - - Options list - - border-radius-medium - - 0.25rem / 4px - - - - border-width - - Focus outline - - border-width-2 - - 2px - - - - border-style - - Focus outline - - border-style-solid - - solid - - - - border-radius - - Focus outline - - border-radius-medium - - 0.25rem / 4px - - - - ), - }, - { - title: "Typography", - content: ( - - - - Property - Element - Value - - - - - - font-size - - Dropdown button - 1rem / 16px - - - - font-size - - List item - 1rem / 16px - - - - font-weight - - Dropdown button - 400 - - - - font-weight - - List item - 400 - - - - ), - }, - { - title: "Iconography", - content: ( - - - - Property - Element - Value - - - - - - height / width - - Caret - 24 / 24px - - - - height / width - - Custom icon - 20 / 20px - - - - ), - }, - ], - }, - { - title: "Accessibility", - subSections: [ - { - title: "WCAG 2.2", - content: ( - <> - - - Understanding WCAG 2.2 -{" "} - - SC 1.4.13: Content on Hover or Focus - - - - Understanding WCAG 2.2 -{" "} - - SC 3.2.2: On Input - - - - - ), - }, - { - title: "WAI-ARIA 1.2", - content: ( - - - WAI-ARIA Authoring Practices 1.2 -{" "} - - 3.16 Menu button - - - - ), - }, - ], - }, -]; - -const DropdownSpecsPage = () => { - return ( - - - - - - - ); -}; - -export default DropdownSpecsPage; diff --git a/apps/website/screens/components/dropdown/specs/images/dropdown_option_list_states.png b/apps/website/screens/components/dropdown/specs/images/dropdown_option_list_states.png deleted file mode 100644 index c1adacf3f511c50a07663a2071650048fe449d9f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 24775 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

L-U)ZgR|JWpeSQx9^Xa!lafzD-Rl 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 wKemrURI*zm*}&fsV~ayi4V^Ck8{VbZIRF3v diff --git a/apps/website/screens/components/dropdown/specs/images/dropdown_states.png b/apps/website/screens/components/dropdown/specs/images/dropdown_states.png deleted file mode 100644 index 3ab10031ccb9b74337aaafaedee94400539b77e1..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 24391 zcmeIac|4Ts8$XW7lq00#WQ`*vTPfMbBujQulx@T*AtYObF|EjQDkAHYEG1O-U1d3C z-^-qTU&l6<`CU(^#pnFy^ZI=M{eEBl(W~)1GxyxjeeLh-eT~1KjvC|kz1yj%s2J5x zDxadFq9agIQBR<@!j(T$1QhDu%e_~~oZ6J7Mtrf0eods!do3Aj8% z-P-X)Jxh=7cs}arGymIcyN(C=29z>1dgz~qx9@t@tGQeGGD`V4t+Em`pXfGb-b~t^ zCr{1|yLXdcW{7_Nb8%v#*1L8%W1>3ddR@$XXVm*z_gV$_`b?XqivqW)sA*_X%)A)i z|9nAwQ|eV@8aGDa7V>7y9%hUj3+0;xKVPbRREh@dHM!feqTQTg(BR0^&<2?pWypl+WK0`kH{><$LlNh?!_sJ2fz#uNdM~r zDahiN1b?aMcjNkDAir$zmy`LS44Yp3@}j@u;J@>WUxEHtCPUF%{z}z;<)Z&qj9=9R zluLvQv<@Zfi!Pte->rGApkU@0yt^ptoj|zh1F_uR8?i5KxuAxrHtcpb6A=Fi%+u{s@B5yGR`QA7047@XzXbh?b&Q3MX!Oc`pL47TM@mFP!9akvc~MV^(v z)h?ENkuM~bvFbh>Pb+W;Hd%Bjk})K3<>`$y=7=eh|v@@h|vRIuDsuFLY5yY9y5bO!V5lUYRg+#&5qDVyvwBdpd{{VJQP zuD!e18+#Xz3SxXqIqBTGJ%(K>ez(pvacodwvtR0Dg?DDYC=HVCj=00b6Kn1@TTbk~ z$&@(lJ$>D#Nn2XGXMM`O$!B%4t#u;ZXCcL=J=4a%PGNJAi4lPk(d3Je?H0U`*sJBf zdr1pz*b?3DLBjEyq(2qil%V>I-LAY`I236&)Y7w%=00d6X}OE2uf`SD$B>`!$oN1> zcCG9SvXEj?7Ui)Ae#M& z&&+3KaI$rDOuf2@G#i4GPtENMu*qsM)Kug4_%l-0)wbYF|N2B`la9^f3y;*Ny@uuH zN6I72mG{9ZcA}I^W`i8P_-mqN4tuY5^f+`7?XauHvO^J8?Xl#39`fG?S6>!P<$KV& zYT39G(bw5N)8pg_dTx|z2JNL*~mig`CPwnxVugUhz_ax{}Xp|q?B(ouvQq+it zeg-2oP0@jwk@%2AU9Ub?VO4UB*W3r2k@_d2Yx8xwMp$px9Z%TKTHp&yDtU17^mUT9 zGjR60NilB5q^7uy(D&o*908i0@o6Yq%l43nxRv@7Oxh>z{Puy`*}jO>W00t&ZepKx zCZKn<@1D3$9eVY$>{6$5lXIOyxX)rn+~Ar1*`pnoAKskoSsRj;iAE1cJ2w_Bbw_2x zIg-ZY_kY!?zI!hxb9&HA`?A9Li9sGw@mg_cg~|N!G@GR^cU{Ge*^v3U`}}H&=ilFH zG1OHUWwja{Va@4qC|JADIbWw3cVcQpL_B}wX?Fe?&j{=I5oFo#Xahl?n%X7)Mz$cv zBA5oZ{GR7({izbmz$?M`>$2W7YKSDT*BFUt9(=95<2sMW!2Qg(TR8^Gxg2X3#!}J~ zZ|;y4QaSr(<{iVZD_>#W*o%}#P=t*&ICW`Vuw+f^SdWW2)GpPPq()8g!P4vZRrY-7 zQ1PbczGe}yo}Sfe?2+kQUE}%rLik`*K)FWLAX>Q8BL{2eA;=Gax6&J(B>WKTXo@396 z#3tQg{l7CV)@X>AtX+j$<7FoYNjsaIyv9v>K8}lL)+;TD4_3N&I;j=!I~#a0Ev&tH zujHgEZ9RxrxBYTPP5Zmyv*Pc@BKl4sDqV>Bja&Yh3Qy}9f1kr?Y0EQr6{B@zN1tVa zN(`i&kWG_I_qGgt<$8#OB&hUk_b1ws$P8F=+@!aFRjkGG^ljkE}QiXObp(6e(^<0S|m>!*?QvB zYn!#@+0j?;ccfsWZw|N1KWDktrh29=Jrm47+w2gwq|*vHdv)GKo)=xwuTosoOEyR@ zZ|T?uqIUbNRAFn^M}`&2D^g%tgB$6B-j>ZK1s~4a^USK4t|`ZTI@2KNmSFk&ro*2< z!0Q`pB-6pdTc1M1l3bk@?cVJn>;ujuJ6pdpr^n}d`}wwVI3dW(BTVqQSNTa9H<{469oqd2 zS**J9lJs?oYhRe=IaeBnIdN;Vd5RP2aqM9wb00+}7iT|Ng$#-)5&b96%7a*bobO+y z6RdGca%V(g<3onMwQ|$d&Pr{%9{N#oSw}Tw#{%^mmU?iwf-y3wtz@XGdfc)5Ov$@D z91ama5HFHGJQQpbcUU@>_$3!YPP^#6b@X!Y&B;d|h-a4BRu;CqlKcAQsr0_Y7tRMH z1-+}6IOmU($BarorYvRZ28K-+Oc%Qq_}Rz5ELv=zeAE^@!fLnEhxMncuIB)7v0Lvn zJ%qd6e)oM?wzrYxH%%m(o?^^TriP*%yQhY8`-8_l=p0k?ri)h-Q?uI-*cZ-L*sKhO*HM2& zBB~?pS!@IM^@;mx+qpeQp4hxD-=hg}!A^FBaI^8g8uz&p zwwYf~h;Xo4oy@7D*0(QTXf+Wx^B4?Ud9xH@KvJ0Y(Cy%SndQ0$E)ruz14?RA{MeRg zrMNz-+mzkm5Cu6y*kbqf=`_Q-D$4^;c-DI9k+4=Z|4EH3?X^79xm3PgVUpD8S@TZ3$AM8 zH;py$=b*39rm>Tjif$s!lA50zG-cGGqb$uwRQ8;ER;3;5G4xp8)(OIuS+T=D&|ObW z-b9jr6kP?IqghzqD661ObcCgB$nvO7gW%%nkDi-qSrz7BqM6_oBV^VY`zz%KWD6=i^(un%0_ z39qA@Le!?O#!u1G)^~k4tF!6aradrjgQT!8LvqulO?&uXPmH1JVvY;?FWZuXZMh$M zw8aH*51eoWY<;z->x77vPDtP!hn(|rh-N}rRF0)45?vE4v`C>!|wiOdNNbx3b z{a^_WK#{eo@ef=Kh79=u|)$zr9jvbF0E{l4SxqzDmp=I)d;4Z(c)T#L zFLy*`O#wwWgehTT#w@L#7+~D_GerM%2No7ko6-+C&8JcHCH2z~>DD)xJ#JF8Y4!*( zTD(VRp&dnsK)eo)s6==MYKSnP7| zk@8tv&g*Ccu&-YBZ1>dgen2ZL&)*Y89EbeRpe{4P+EWr@}Qh zIkQXNu;+0eE73nB2z1=ndht?-zJPYzX=iy`RfpS{Cw>%3mpZL$-;Y#TX3jN7vXYSW zhtNg`*+l{|o@YJzi_dtCbdOepwRRl3$f&zNCA~PZBABZ~#P#{DpU;YK1<~YeNVY0b zJUuBD5c@7SIY^|>(MU!bgZ^N4(_O5IJX3zr?(n7))!xJ2II!NK0GIaefwY0G@tk!` zm_z<(B2pS8A*skDgyPYMach4j@mq8_zJpqL9w8=q^)p;n1{Jl$+C;bXZeeakUuX8pbH&M(X7+$Rv`-QMRBM& z$lzDyd5B1z84TY_ggQ6zo_KMteGw{F7b+Z=G8VOGOC{v>QNS0fN~ZIMV>266IkHlR zsqv?1Shkx(iZlv%%g9wW7Fq1o4+8Io#av%xNxbVv1@zy0lMrq$OW)wseehK&jm=<~ zk;7eR>!73mQ!*Jgd0 zTfw_?04Q+*K_@uZ$_Tb~WWT1T-M+1vW~dHI{}`o_c00*N>^|n<6JE~^MOc&+7e85z z!s(3f!lb{h*y~Z|Y~O`ScPv_H&77^^NV?5teykidx;kB=c(?BLL5;xVV3sDykDjo8 zs{NQW-jc@2T(xu!@P~xpeJ-M2=9c~f0h8GBAGTj44hf&P!I7Q3^?%?a%=`TXV^4x^ zo-%gG8=U)lDA-Xzb)zLb#;si#EKFg2K8{>X?c&uNbIi$dFWT$cju^Y~G$>DOnv?Yr z>l6~xV~89-G17kMi?h=Pb7$WJ1#xNO(f!`8Lc-WO== zB`1$-jk56T32H^uXWM#xU|WBoL`bL2-~Qxwop*wx;~FyIB&CY{qFWZGN1@m935MzY3S$@ zwH`k}z&~Q~Qjs|JD))S>s=sEV+*YC2h5bQ6eWw;8-1x;zLf%v#sv77~T>V_vm>A^{ z$+OCYzqq|wX@nim<9tGd)|N){LWO8f=YwI_ZUo4R;7soVG{tNYC#jKNtgNR1k1vmP zIhcOC+9}~=rTF+*&U^$0yA4^Pi-&)H_YWh+3rqBrdUbRk0o~rv?ZuKwM%*h)0O&mz zRrY7WJF%vn%ed%jnZMM1y+d>r;LQhdZK|4;s1(%N*l?&r4qlKpl9ze-*-YNHnRT!5 z+1tjQ%2(DG+8i0;thNV5WaOo6OoL8dYI~Z?Vi($eX|$XTE8p{J@`GU9<(ydfurTw! z%$dB$YNf^B!(b2tJ9Ss?lf4i+w%~KA4J#X}##3|5+poN5ocF40!{WR>hvj-6tA=pL z)G91>a`L$^WETSvI6xqkZegl+j;xqBbMHEm3UGkO0>HGBwie1gRwh`=J7%%D@EOJscko|t&y`qRneo{I6J}&H7xt&wI;eQa0oJ9cIFp(T* z<*na^_g?&*)Z{}3tn*pW(RQI2__x3SOBHa+E2bENIr zmL11<5l`W9tCt=IYkL9zcCRmPZ>A9>f~Xp|JO@zyrh zM)2JolOrXhk5l9uRn>2`LO zC5I(?jh(UUAzC_d)XzuM=c18ich|@gpYN1o#Wjkp$>Jg)Bs{PPeH z@4pwm(3aCWbrUS{a}`V+82f5;=Z^2%ylMMTv@=4Ab0j#!kn+lPkn(x!INbe@&wS4q zlkY$gx3}_~2*s7_hhbM}!JHGDMfO8>r%%Aa1@*rSqmAT~a2~2ooM_Y8#(c>XNx*}Q zo+1(a$9tKR3*n3Al7P)ONXzHD$1-gG%wdSZ#qtLPQp`8M^RzCkT4a@0PD?s%Q4#pN zI&)XjfSamCEL|T%{PNOXvcnHQ^H1aieCmW}{7yhvF$6h0D)ZL4uF?O0k$%aZnx9~@ zx@-%n{N{aqOQIw918lIjh>N0R30ZK2soq{$!9SC|O{-`FAR!&p9ZdNM+u;aX(Z$A~ z+nYY~Z43BBD9@u*9V;np3B?S1rgpL8!KU(m7uV*LAJYWtrX8O{xp>dahV#w}NpIcU zbosFbf(`5{v7v)9T48JgnQD8b(fB6${ru*7DcDuh$RuTWCRG#;apkN-R?{wl=2tJ${uF}{m@`qsl#_lO~*hCSJ<;$>t6iu5z-KZ zB%63GinJTbNBKo2C+*%?K-6U z?NK(M3YaRXtdRSbAsAyUfRUhsAT$h_%B=7%33nQ#d$?D@)1|mwRH;9Yks!CVF005f zr^_wt?)N_577Vmpw)FCP+@pQ5{|a>Wfn?AwT(myvSofp`TBMJV&f4!j^HDv|w2yxN zqlh$?GIyp`{jN@$TeuE4qWZR|(S8D)&$~nW zN}_ID>~PWsF-bAT(&24{nuHQBQXqN@&-m+l@j>kdRd-v{G;oSCp#l6X#D^F^iX$)K zI=WT8zU-maxmAzQKAK$H%)-%g_d}kA8JWwZ&(FMPa?k(0Ey}U@@%vcm?rZ$%^9Xzx z4zGB-%$NfB!8UTc$|zID;dX|>+!2O0v{)XY#O z6ncA)ak7uTkE!ATnLW`!sFCrNS)It}Xbo!cmK+lw+7W2skzTa;k>@l5FK4^c z_LC4$Z7cixG3uNx-X$;+R4G0fWnn9TF6{(z)DJxPsqTvse?!`mhV=D?bX?8xlYvv9 zuM2ZN{Z%=rXe%iT(>zH)mpP-A37pu>@@)O=&ljWC3X;hF_v@WLcsBnopt|<}D7}y{ zvyrn_th@{Y<9bN5D693j)yfPHaAZ`x1FbvE#E!J`=X!6RUF=>emi8HZ1HJWOJiSwx ziMznYQTZ>oSQ~SS7gDo5)APq(c+r{uW)T6brdXN*KmOoL9G73U7@8!oAK{9BX%(6c zGyo(k4BgF)312uP2aOCY@4E-=Pa0o0i|tDn4PoMQ$^kA%coc%LuiRAf`rEInUUB&? zQz9tmzP8`_Eqnm#OvJ8_8F^%&Lam|zy2)Y)N3dIjOV(->qqaBOq<0&l2IqR=O6~Eh zsqO4}Yw5Uk5qk02L1R&`v?6ZooAOJ8NwJ;>iu$>x{~j+N9Lk!>%kJ)63+|N}Q&^jM z-^5n3Tt2Yh&pF=O42TdaysC1QnTmksUh9^>F~T1re+c(@4}VmA8JiPyw{1<9quFW) zakdK;JvW?otA}FO`q(@M7QicnuXX@sX9$m4xVghJ)U~pNVfbpB;kQ1drw};IeW5K- zTxsUwB_|?RS zI>$;b_v-Wz4r#Fvx0TLev{8pV+5FG@D($Kj&E|dD;5O^v!DVVI>c+O6HjBX*6nfH0#lj;ONEYNwuHp#_8W zGOs!otu~sG+5SrR&rG#7*Zn-=`w!&i?iC|tBUC|;v=M{?kQdqB6M~SP3dFbcmoKlL zf;}K2{|OK(?DAt0lGKn@m2y9r<*{Mu5qQymRNB&^1Vyk4)vV?@c5SA&@H4QaVv<&u zD-}2H-}&vax3qLpn_Mwd9aOdTCNwFj*~U9=%e5MfZ|T2?*MEu)%$u<`lHFR1;MwLy zJ|3o5x$%0$AneLVqd6&VUHMsMV`yDi8)da2L8y&}Wou=R6~YoKup`qOz zX2&oa(3X3nZE=-Z9fZ5OePg-HCNn@DslxG8xTx~02L5f*MruSA_p7!-cMl1w^-DAk zN}ra77Ek(?UZ(B4`PM$CtJNWhU6j?p`SPo`TkWg*Z>m;zv4!hYm{s?Cq?UCivh;R( zj;Cg+eC_M>Y*WUu&DU3+93k!Ww(#1Q^YK8+Ksn1(xJs>UB#_7%K$TS7387~}w?n}P z0R=66nnz6fEAAp2@HF8aI@9e~vVO|cTc6A-%^t{7g&?YPV)3|p94bB6r;E&rZ|CAp znsP}e?KFC;Qsl(?KH@>@#`HVzp@LXyHlu3cZ@Gap6!0}pIYuSjd))& zNWZiCh=x11tbAmYo!T4PT0=5%ii@v91{eAjB|pjzm4q~Wl4MjP<~S{=5u@PQcsg3= zzhzBAKo}9TPPqt<;W)2@;Wg+g4a+^Nq`#B9x-!xbKQC0o{`nNvHl8r9mRB}@b1UP= zd8Nwe=PY`a0)!}sd>dKv+Pw43DePSYXu0$VL%ZL|+~Y#5CBLeG8qd-fCfqT40TxV~ zMkiq$I9^)PT`mU3=Wp*m)v0$xm8CUt>=-cX=EEJJA#goFvj%u`6Kl6SI=UCLjd#m@ z^2h8~HLQ$IVl#8mM`%eM^+6@=2bPenyV9_TIRfr!1Kplf6H?q=dM+2e9bx>>f_-L4 zZ8h_cDpKt=;L&l< zNgISOfOZA|${ey{KY5wiut}7rylgS&ALBv|C68o zW3WHKD?N2;?26&sD?6!w-T1e|`sbm(#;xzw+5zZ_rwyEMyY$ru{8;kai%`H;!=5xW=JjWIz7is%7UGh)0XHWs(eil(GjW4&+oH*< zG_tHeWM(l@CT!F35Ep0u_>gzE$ZG*8xx}t?#*QblqNSeJEp=$fK@KY2v^?8yu*Q`P zxz82ocbMBgPuN<^u?YPUc0C%j*^cD*gEc$Z&(h3N!_)zAk;+QUs9mfoCqH(?{rzR$ z(=q6U{P}bin;dP!OD~m7Sb6oddIxigg-G3wmCu~ha6)7t8^*^<**uuZlZ5-10x)YG zWAdmtkkRyOWuT@F@)wXrsSces^L% zdH6g7W6f&7sB@?Xn*`PQ?#avQgwHgR-oZ$$*aTE7{v({2Av(WZ)fW?0${=3&*Vo}5sC{18pW|mz z4d#3te5}t;^~EcM@l8^;fN>)m^7@i)e`UyY*m@UKoCrsLJS_h-a{do!5Tb-E@OPS^ z8R~gK`s*kWBv`FK*hi<;A;2ZXr>4?wC6odmJ>m`{$0KeaF5Kx}2XfRSnC!tOs6X6) z1YtP=B6Fw<^12^YEy5~BI6q%WQDeay)8Qp+7t$ASNDiMrl|R1MQx{>xmQK)e0}&^4 zvE43d#Br}MGF}2!Wfci?FZ?Z;_8iy&7$z#QyFP^=0*DSChB#Fh{qj5V^{;s43;{h> zQzC_xSK<{Nn7h;~j^3^x!l(}OEg=sDRDJv^FyLa{A$kTKfaWNMhoKOrkiL${G~T;RlBK(XJ=xn9dUpaB_fE) zC^9Jq@YV%V{atiuT~IJ%$cAH&_mZ~c-E|}*EbK;57WXkS04_WUAbtr2NY;@AP}@4% zNwpoCj+%$rIPNrTQxpu>j1I>A})LWCRJJ zmwm-B5zq#iwLq}F%zrpn9QK*|B*?cTHei^+E$<%6494(izG#NawivVXDDw+#Kv5n3 zJ{d4Ghhb@bIWzS7|&MO$t>FYgF$YhAi%v<^- z1kX*)sFk%J_rMTBOZ`~*=M*@mV3JDAo#n~Aa8fj%*VL&>AO(^Nz}1!T?3)gO$&Bp> zvp-oPysk?o;;N-(j5$+<^R+tEM5w=KT^iK|vrShOS0p8n0#h#X4@<9>S+-6NK{@*1@hHo7J_dkxTSYf|G~VDCAw$50T3!7 zj=VO!QaH+vsXVjK>4;jYGMSD4Y5#%0U~FmM5{~5~C&FeySRX0&Fj0VT;!Y07xSI!v zoY+N^Kxa$s>~)`$Je?|@)n@suM9Bii3$=SzYTes;`ECVsD63s#!xCD;a}P}c;A(5K zYaP3$c(nNPbpVcH&2j4sUW1i_V0=W-X>>Z_0pZvXX+2^=iX6davuv@g^)k4yGnyqM5=xmQWd!x)u_IrtGDDsMgY)k_~sM^RyIbtXOn(U)o zQhf0QjCtgd?^Sv8`);(AY=ou%_B#;H^4AwTIt z1ew;7f9f%s5MEm%mu-1ZH2YGHP;LD3s`$p#J@h;p+<6qsb!Vp>L&$vZC3Ba{wmZ4!Ji&--}2pd@+mP${H|s(g%G13_8+!66pwR@UlEn zul&k619(%Yybd8h<$SazyTVRB+Y?v;ON*)CCYWR)OHCB)ragH zK37>neu_PVA|_x&uLLv8*3K`BdQDaFTVMf#gdYY9*E=H!8Pk4=3m-$hG9I&kb_ZHl z65XD&ywh@G3e(HfeCB@oHx>jO4zV{mG~amKem5`zCq4A!G)l^Zut!M|x;er_cMMU@ zv|!4`VnZ)VV3w$ZRFb>R$Y>o~?QV>|saEn*t&z`P8DIl1;aGr2O3@Zru|S;b}ATdmrIP^t0FKIA&`nyxV@@3_%I z1jc~Yb{{c9(&|(-V=83%76gWB>3WXdb;!)@@wo>NCARyqJk6SsNv!wtaJH_AY}qC_ zC1!@*Sj;IIOv-9#oRve*RB+zdj^E(>%4;j(4BD7STQ+00vYdzwYB>uyC+C(3=^P-o z0R&^WG-MUKCIqqDZG%htbAaO(l!wA65;Y1Ys(!?xi>w$EGA!=0+6?ol{;(bb;W;J(pUn0 zP1#>qc83D7eiuKXe~!4m)T5{!byT$H)_zs>%9AJlX+tnOH@g>l@}vJ!je|H{m4LJ( zRu}@<1$g3@^2f+0x$H?PX{Sa1>6|GbiI3o-|Z1@Gg{H_)4{8<$#53Vq3B}OBz7myT7(UkQ8Gc^_a`;(>`wiWYe*t zUq^V6Nz>ztHc2s$u=i#LUuM+WBBVsXQ5f(c-V;_aZmiCVju4?n5kyYX+MBknfy@Qt zf*u}$J6?)6+%*GNF^Z6#zfSIv`=GmUc}$b&(Lj#DZLH*p2ew(-KAo?XgQiso0?!K4 zV3*&q$xaT#Sgxj1xhnC(th6c73Pyp|$qQI=Sa{n|M!G%wm#e=W^IMs-svQANp>zU( zSQ&OH13hY7uBSKVM8{T<*}L%aW=^L#mTy$UOIknJd1qs?5qx@&-~IQ{T%9-^lzZPI z@Xlk$VwpOzT}>`!s9_*vUdx`I9!-j?<+0`S9R;FYYV|$Zt$$$xpSsr8tx|XNzf?@R z&!np*9sSC_{p#eL^s4}lZDIuzZxm!NN@}YSy`9I%h)?Y#FJxk4+(k`xj_}ZUuTN*= zGV_;uR66U$hm59Dc1rII6#wiwM}C=0;#WOZ+2flbGAljU`}XF1*gl2l?ryFgL8X|T zXQ7WYUveK$j4c9yb?Y5pmijII$2`J;R*vCK>>IK1XF8xDECPIOUBiqWkO)N{U^Z|f zW;Q!y%O))#?G2gKK3B+OrOXI!TUufZ@3+@%9nPHUT+^0G$}jvj1@=s8`23Af$aX0~ zDy8x;J3mZav;Sw+vH6`6*3{I*=%AO!DM2;VH1oWWAk#}l{g<_)p+a#!`ey4t$@ag$ zzWOH2VsO`Ah6;kx8=Rr6s{8!+-v6>OCa7RMFd0ZsXY+=?eM$8>7^1P}w}aX?ga)wI z$VyRrsC6>v)>bED_-6*@(-(A9Z1-UZxuwZY=>y)snOr(K>zy^X1B&_1k2Ot4X+%XO zdc63aK0=r7RU`P*c!uxq>p-}|U?S=8)fK_jkL<)BiY#}FS~Y4fDKwqE0Ln*5F0C?1 zOma@UE>twvIxWQUvhZ5NdY0$li94tnlXZ4G?D+QIxMVY3Ig&0QFu29npXocY!1W16 z1w}<9>{?$U1H74+SET}>-L8C%7jtQ1Bsk`nfW33$bknovWVTC345Lzk`YnR*Uo@4D znR&wEomKFtvkqy8!f!#u^-W`LQ{nOa5|=-{%4|NR$rvp?5wnw5f&f7Nma!`y8MIqt zF<#3NXm3xz+=oi9&v#4Wfdrg9jEXfwcgfLj;9rX;Wu*Nc)3>zDmb9pofE<%wspmfs z#x+@&$|C{I*es2H#}YQImn4%igdEkD$n+xGt$~=eNw)Y{0GS(hQD-8R;VC$(Q*XvL zQ&fKl8&ghKO>H*IikYWaqv~lu#i(IeL`l5N$+?iG_6hn9{iwz^s~{m1?uNefq`a;Z z)O_W-R5cXG{xHIDSNPllWu9suJWfCyRirK@mHl52OIyENkyPL~z;^ME6Uuh%kQ%_M1xove+MC>X*fS^HqAkT=Dm$?3XM4 z7K8}DV(j-s`Tw#QJ40@NZH4?C_O0_9X7QG6M=(n7>8NSKe7EF32&0_YI8)OTSE!mP zXJP`qzG;6BQcT2pO-rf0(NqhR6TEH52qNe5HfJl}t&I5?+Z9Y46ULijI&_+5$B2fZ w7{zR;mX5Q2c#9t8?CsYh{*vPV - - Dropdowns have a similar look and behavior to select components, the difference is that while select is only - to collect user's data into a form, dropdown can be used in a variety of scenarios. - - - - Dropdowns can be useful as a list of items that will be shown when the user clicks or hovers their main - parent that will trigger the pop up with the options. - - - An arrow linked with the label of the dropdown should be shown to indicate the user that more options are - available but are currently hidden. - - - By default, every dropdown will be extending underneath his main container if the space in the screen is - enough to contain all the size declared for the pop-up. - - - - If there is a special case when the dropdown couldn't be displayed below the selector because it is hiding - important information reducing discoverability and scanability in the website then consider using other - options to display the information or customize the position of the pop-up to fitting the necessities of the - application. - - - ), - }, - { - title: "Icon usage", - content: ( - <> - - It is allowed the use of icons within the dropdown component. There are several options of configuration, the - icon can be placed before or after the label, also the icon can be the unique content of the dropdown - placeholder and options, so the final goal of this is to keep consistency with the rest of the components of - the Design System such as buttons or selects, that have the same behavior. - - - - ), - }, - { - title: "User Interface Design Considerations", - content: ( - - - Consider the number of options (binary decisions or a few items) to decide to implement one component that - represent in a better way the data, i.e. switch toggle. - - - For a large number of well specified options, consider using an autocomplete field to filter the number of - options while typing. - - - Consider the input, might be that a text input would fit better than a dropdown. - - - ), - }, -]; - -const DropdownUsagePage = () => { - return ( - - - - - - - ); -}; - -export default DropdownUsagePage; diff --git a/apps/website/screens/components/dropdown/usage/images/dropdown_icon_usage.png b/apps/website/screens/components/dropdown/usage/images/dropdown_icon_usage.png deleted file mode 100644 index 53c2a2541fc015b5bca639431e2caaff03df3501..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 21493 zcmeHvcT`hp_bxC`zOwNN*y&hFCzUHbg;46a@vO_pX$P zl+ckbAf3>Q5R%;YB+NH64&S}^ue*MCEoUu9%*i?DefPWfv!DI!tq*jx)OPPWu#1k4 zZuf;h&R?dZW5m+Y(PuDi2cMYAenNoX=v^q>6JCh^z)-;SG;vAbfjGHIn6O#%< z#_*XcwG7>$liV2+f=&#Bj}b=nEa%2I7N;oXtMKAU;|3>ZeB=B?@^!0qufEwupZKq{ zOC>V~SvP9G+&F{?q@#y1FtG{#^9N-S3G@4Py1ZLm1Kui$ ztv{SJh;ek!Q$GUI4Z3kJ8^Tl1H$@a3!8vzobutD6E;U@fWwhJs|9sDurT>8=f`Lxl zxqR$f2@2S3AQ{B9_uFY~rEs8wb~0gkR2|he#fN`Be_Vu~-px8UzkBbNPreR=jR#%o zVgKh%n_rdFK+yH+6F%f^`DB~tfpkUJ+dR&1xv2k`Xv-)6-)^^pZP#>GotSOua!1Nk z=4=^}bufOv3U-+>ug{~Wt-bwfr^RZYr!#3+3O#s_!FdFw_t5SU394R$U~xv+Sq$bP-SIiPh`j*xM){<$PUXSe&f zvf0vjv%ko18`Bq_9C^Eg-wQhc^XPHRccYM2SBtgeMU0BvY~`;g^D(h;Z>J}@=8mtA z+4)ClQC;yMaK$hWJq;K`Ki9iMfdRweGM5?Zoy*p&Ud^vhrDGV|cpNg$4lcZkSsNCh zoDsd2fgKpi>$XdAt72DMD%N^&4>o?%r=i?&KfRh?z)(^@$v+_8d-TPX<*}rEGP8Ke z!-fO!0KZw4s8X(*S5#BXV2`~`tgq;b0vqatBN!~Qts2z* zcjMUW4zR})ayv~X-aOHoJaso>ZY{<>?fv$%?-{lqXTyY}i1{cDuv@e1J2O++F_`W+ zJO&Q;Cof{~R;0S}4UGdbPDTXtbnw_FcG&t@gpF0y?^Noxn?qu|Tje{#eLA$q{;$sE zq?UVJCI#xt<|ZQcRZn-+&-eOHI_uB6mmY1hL2qL{BS;#ClZQ_fhkIwHKGMC5*GJh{XX{6!fE#- zQjYQ{R!i{aBG1X3^pj>#OE4_XB&G}^4mv$Mj4szLth!L_z_U7Rb-<>3bM~-OYGJ>*ZJDlUg)B(9o?-|xZ*ApkzTG;P;ME1 zMw+-8i<4ZyN+i7wU^9dU)A_lL(pi6T`3^6~LkKJi4O~%}&%NyuDQ({rum4grDb3;_ zI7=p$4}pIJ${-NWibe}707lTe7<wk+d6*S$eMbl={d2HiU$u{rZ19k8Xv(vCpE^(8F1Dw(9+^4KAzG!gl`3_4^i*#BL zav)S1f_Sk7iQjUt~&7835yNgw$tSKG~)K0OR0y4{CP#`5Wj)Hjq11tr=ku>89}ok1 z;7lRk){8m?<$?drcEjv`@Dm==(96af9VLv+^W%$o4^xPJf7*a@t*EHTpnR{Lgbh8Z z7CW&^=DYr9^HD*@CH$Sc*}u`lM8(0o*N$8P3!B`}EopwG{w-F4tCw%&Kdn< zdLOCz`<}%G0)G&1o&1S|?kH7XjJ68K*n}ViP$W$hoJ^O8L9I7D6*ZId3~35uxCM+X zHu!=LoyWy3d+QBd(Q7?cLtWop-%-azP0JM8^IVn6747@J8UPk>k*@FBLSCOCxv>6D z#5nr;Esiay?qYvXqiZjQod@_Gmh^5rQsG!|MnFOJF>t5K5T{ zg8sVLRJhg6C@aQZ|c%*RF{_QTVS$hTe*_=^fS>vz&kAr_6D_Ibn3E5o(M%W4h% zmp{1pl`4myncT=WAQpZwPCsoodMuP-AwXtUZKyCWZqadJd0{nvisLg_#j>}43JTpF zAcNw=m%{Vcvd9|QPyznoIIvuUhie;%xXXgKTTXXevv_FO6NVUL`u<8qp;O6kut|0- zFeWb#!CBXXYcr}xjT1iI-wKp=|N2KpJE=z7?$sD2cd~(=FV~bW|c>ad`HnH z`QH2Rr-up*TpLas6Z$(u({B-eXEQCRv6faUp8u_}{Era1QOvwYvU5_~Vdvr!#btb4 z%fe)r7Kj!PJ5Be42&@S>hSJL&LR7%z`(1~}>3oHx&(b(+a%u8j8v$^%HP!{5OnpkH zr%PhSG4kmR?FEX!F$i60b}E60OyJO8tBt4*+w=%lnw}QA%5K!&ADAI@{YnfXbXS#i zzO-K&DJsUOqT|YnA!itSrE&z#T5RmOW`gf?_?RFQz z?{MDIzH&FcnwnI(dR`{NFUU8T_flUs-j4@aE}E>@qqjbmXLC79@F7U*aZC(MZXsY7 zx&{V{RCZ87$FLA6gyOGA)B|8$%dmiVA@|-09=o~y*u#7avO-0}2dzK^$IkDV;f=xv ztPQUqp!$Q6p-K76dkLB$x?#B}x{-8a`o3<*$?=^_W$UsOhbOk8=x&cX(k!KO5@0S`z0Wm=y~S@2;nud>e5Lx2Vxp~nngzn$)t-<@l2R?T4(7>IY- z_KI2?<>e!;tNT)`g%TgDm!q|+Q^q=A)AE@I=A``So!5+Q#;DV$GUI$Qv* zddF>F-k^Z!5`y);)rd}PkQpeE`c%5wAG^}; zJ1b>T6Xy15=h3BOvtZ|q&j@A2nTa4Cr}50xc$r8z*(*lk`ZnG}+YZKb2 zm_GrEHe>wB*i+`N83(Z?+WUju5BY&9ej`9;9r(K=v} zX&e)rCc1=IwtoL+0a$4vNFAKPX$B+uz5|5s$Eco*sAD$r=(4m8=JWUi$LHC5!d>69 z&%G5{zTPh7yE4tM>~b+yTGZIR{ptjujM~M7JVOH%X}J|FId%s8Z{}pcN;c-LGOO(G zzU5PC#ffpA{j$a`)%&}MjLe)jX2%+0J4*vf3dZ7nTh8v_dn(;+laNEm>q&f~tt1PG zxS?Xl1AjGH_Csnn%W99rzOjf@lqPMA!Dll~nqwh;2B^8?1PA8Fc^^t0`SsO$fI5g) zu(R02`+OPFx^;_(&#kBnSz78~Wo z`CRKIyL1k^RF7W|=6lBPGycji_tRKzhk>yFk4k~YXVp=mnQ;$*J2jlZqMSOOxfoFs zI98D%h$53r7<|V`OXwAL4DkW$6Vtnf%Jh27Lq)R=!puv%CxAy?WRFM%)U#{af2HfF zW66BYM2m)aLz+%R>;|D=IHD`7bfsIE#{}y^>`yNzFQ+F}?tv?4Vw6gKFBuK;eq5=4 zajJD5CorH0U*Ws%+Ivhg@vCPTVI#$qbbYowVY6f$K36P=^@CgyZ2^L}9{mOb(yBQYeWThjPhjxw1x{faC>!Fxuil)-2 zb;UKy%H1*-ca*>#YJk5rTLetY@4;A{HR|G3MwftySL|2}g0i3pFw01X>om+xd?e={A}n`fV-dfqAB{BiKP_rfa>g;g&jUD9N}R8@?@Xa}$ib7_<*N5LxKviY zjy+Mc|0`Z`)hP0iOpil0|Lm~l-S3jAL6G?ghroNHpIzBQ+uuuotD_EFYARF?*sUcP zR9gU!lbDJ$dcoVOB~NIxi0d>(mEwqA9K&)rP5K>j)tW3qO=2fbjV`mkBpyij!4h+o zfMdq!gZi=l!|+!sFGEZL`bbO3kkjVet$1M_|AMgzEV}0ejz@+P%0uP@9-3lA&o>P3 z>_0CdT}E2zX}!CXqo__FKvs6Ai~HhaV(pWoNv4$bPDQ=Y>+nN#m@_Wsk!$@BwsHVi zifj5ZNdv+lZGeM*D=QbN`;b#N0|lctj@R{~$F_<(@p1*lweL?R!e#nD*BAqEyVF|Y zy-2N;LN2hxviJ1)ulDJ)`GZ(V0#W?tRO6Wh-@XD_voH=tfL#t=VN5y1m_*IkXI2d{ zQC9f)xMyOfTbCjr0#*Fc|7LhSt?Tn zo;skdPI2pR;VQ_=YA z(92J=SNnZE(|KfM6vke;ZYR>r^ri6*;&~&}plvTa#jPl|9>6s6{hF%sD}))M)t7t|70gs~=sW zZZ>NYzwj>=&z8j+`mk!VvbL&w~!n5lH2Kb6jXVz%A* zG5DyA^}mO+z8pF66XkO zk}FQCIK(3mRD#tgLXq12Zw*3js;HnjDyx}f+T(n^QsjhK*87PdEPpiH9ociUQ2m}j$ zzEOTQr;%R%GPuL-K3IwJ0fW;tj>E>pz0HS-Z9hN-V7>0M*k+5cygM)C*lZZ-!B6Le zmr-HsV`P7k!%fK`+vqvU;xq#*5R5DzC3PgHHWM-p)Tr-+oB&}A;;ra;>Xxz(J#5>4 zHpHGQ_3J;~wRyWvG;k-eBf?wCT+o{tnzrrFhGOyGr4duxVZp$(&|3Aau7TQHhn{{3 zQJo5WW~yA*xeD-)6aD)`pPD*nDx5Hw*<3UoO4H4g@2bla1SVdYbc$dhj2C zh({GA8muBQj{J~8wLtml*!kwfmbO5TvfX5KbIrMv@b}kMU>QgKEF#Z3+bhEu4hT!E z^%4&hEBk^RSs}q(0P}gyQ!zt5yq|aR6My{42;gQWY;Ym{bo|fvQ7J#+1Sn8CpIsH- z(y%Pqfpq^*UflE@7Ro8A&de$DZsQn=LL5liFRXW^4D*^#1c<;X!wVyIp`5X5z~+hj zynwLR`sp6CFg!1q-^b<}aqL|Jxp2WMZyR+F55d$HjJ6x>b(kL0mW$nw_qSn>(*_X6vdhV(YdQS_@679dJW!NA3M<;r3v{ZA1JYBe(2KC4$0=|e*<5k$0t88u6hAV!3osBK@q->z~_z6;J zA=jfjVqSqfs+5gzXFs8yF>%ydofN1d-1@!8-a>?{Azslp@U1>oJ_JK^NSbUqW!&XM z^HKzHSCzo%noz)F-bf}EDDiXvO5d_S623HSmz|PUbb=Xc&+JDe#r zeR;k1DCXjmquN@44EY>5ZFj}E=SpGAP<3eQb4d%I>7gd&J(^SLy3;5dmx+shJ@p~qWMx)2lChud z-5+KPg{zi_@x|W}Bv+N15KvDRLX6#rFla+#5%O{L2E|%RG@&qPvei)YoQFGFaXZe)aa5;IZyyYl-t#+D(*{H?5fe51i zYVklrfBBE0&@N(9yic+($&0-QHN=7W!-dhr=)K?iL{bu9nJGBA%-LgO&kUVvKg|QG zB^~G1a$zE`$7u>8>ivVRsT|5K-1a$t)G5Fif(!-I=*Zu8z`yoIcktuorc$4j&D|4! zW9VF(i__taHu14tVSXY&`GGs0_Ao-6J^_XLhTc&mQx0~O?P#IOqOmj|iBjmhS-HDw zfm`}`Kb$z7-8Y2`-67y70Z5~ZEnwnWJNVpm)`{g5;y%;M9a_-p;FLvp_BTJk1}>Pc zeL=Q>uU;xP7@UHZ2l0t<40CQhO(#|s5)9-&p!RkXv{TryzWGgO;)*nUCf-K39F8`6y!$$PrRT<6FucAdEFxuM0dq$!gV>28b#_U!-@EF2T=%(1;mU-*7XXvDS}QHS zaByfVu#-w-@caHqt*9<#wHkzbG-KCtnzJH+Bq?>l0F|tP0OE2Nd=^BQK81I9a!faD z%5S+HnPi_{D(yexim59T3Cko!f>L$~po(P*Q~*p=acI|@;O6+bjNLA+%p&UVn|`f| zzLQIGy^D9z4jk_s?v$8UF+1(@ikb$`9mq1g2 z+zxvHJxB?+JH31vG(ezFnr^@(`xmX@#4e>sJ5WyJgP86w+a(p8l&v`wj#0zylc^3# ziMN<;VoDO4yDyw#5yE3#JqIIcO7>gdZJ^BUp){2m7!`7%)mS3g2i26S%PdkScT0a2 zjNMNpuc9cc`;g1k_~xm&p%bMA^X*~3oto^cf*`==IU=l504ce8+OcRN5tw7DT?+&8@s<_FLe!5Gg zYW&_eRyPVxtb;B9yolm>-=8wXRsMN>y5MzT|M8mJ5yU-JTyOp|!jQ(ph9z0G3 z*F%IiW&kqqFIo(E|KMfr0L0GWbHtAcuTov3!BwDc94~IZ$})T%h&zbvomK7Cl3HG- zx=Y3LBPJWkZ#+QGh`Y?Mgxk0#UiL0jym$MlJ`{zdPiI{07#1f`>C(npy07l&#pg}K z13}#D$3{!nCsT4`SBY|Eb1$VG4LH4UY})_X5vZM^t|T?FGx+Ru$Zn9H04&yP)Gy&WM+GOrat(lUM4ac zmkHLiM^Y=c_BK$lfx^TqN>irm#*=*{Tf&tble^!SSMc*H<}8GL$g4O_Ce6)U;11~H zq(c;~%3*3_+L#xhxJW-$ZAj%8AO7Ev?!5K>@1 z0kGw}|Iv>%&#*CGwBxKWc6juj%ZM>yDRy8ZQB4N`v%Phw#l@y}O_yai z2UGd#3<35)T$Hb}WGQ)lYT~|7#2=t0M6Nbu2E8`2gyM4-n#p2V^?hmZ!4Q8H%0}O8 zfQ$BIN%mDc*2UMHx0#+=>`&wVCgcgl0FCSX}wo&)lFYXvTX!JhM z0oLlJ8Xo5xGO917Y%i~OT@k&I84(*kG zwIxq#V%WAv;UQylr;)3s56~Z5U2uGzrFOmNC2Ag!2lt=~y2)!#b+u}pM7%&|wj#Om zRu+!M$1X$7L4ufThPe6t$nogm0ESB@VOJGFtvaK|vdw(+Zwv&Pn6))=y+2QbO`vuo z?s5ze`&V0{kR~r0m59?h=G7t7N!^kctDRBAo*bY(eaISYRuhOLi4Z{>){FDp`6gb= z^W!hI*^g9(zd7_$X|`lBOHejGG_j!T+kT|cBQa10i#R;^=DqN}b|MK*vW?_1*zahF zF9C{_2y?7O-yK#tn<&jgKa{>dRMvap3>{vOt{LDVwjHVZ6F`X30BkUz1CGm3acS+u zY$R8@N`z zB4T&flqEz)poE6%s*c%@*1u46^7v|zKwt7g#@PhOUBOwRN~8(x^eoGbo-7KPn0|7A zg=Q4&OGGCTZks$SCO5KTVZZrdE#pv)=9&TuCZ|`>)!)-BU9a8Vd#*l zf~l@)_j0N3-UA5j^fhy%5unXx;g^M);^C-(5FWesQ%W{0QIb~m&($Y8$IcocupeQP zOCJG+)9po^a%$m>OiN3fQM_jP2+AMU$E4O^x8Yc|7i;j9Vx^dwY-X;PK=g@uC(>nA$>U>}Y_ zrB_yEyk{*MRK5-f+{M6(Kt>~aMYEGUn-oL&Als`?h}-v=@axQ&;pd0iz5?`{QYz_} z$xZfE76v^!Y&hdkXrWh|yb7h)^at|&*N@`Wva5!TkF*cD~z4p%{^I9CJ*4)oM+bqv3 zkIaF@>H2lW5l4&nis+7R zcFpeW49Ni8;*fO6CJkCu6|9al3xrGVQ%O4*;m{ z)w{Q4mo_kvu3PpmEBr%_hyvymzJB%C&!(b%i3uCG?SJMAQ#h{W*j$Q%qsWtb!lizV zFJ*13L-xO|`|TpV#xs!%>1FGaX41L4!M1`l5flZ7B@bGD@4gJ$N6#9PFH^ULm1WdR zGkPIbzOj%4RYRE;IBLBEaY#r>eOoyW6&g|M@cAkZTR^}rvY(T&3z2J#IW0^87-$Q~ zjh3NPp=At6buoY!8I*XrB(PQn0B@5Jq$g#Qy%9&lqG;L|9q5&BtH|2qzB*cFlWp%O z>QCV>9*y@hkCFFu@&Qk40iyiNcpybexeQe;eYJ?(?X!bjO589n6}Q6fMj2Owe}R4D zXFlP_ac~hTRg$Qg3epe3oQelE+lrMgwYbd`j_DOxtALO+n}e-elNP_>`3v#+w}3@-6rvK-PiJnGsQ`OgTBIL`SdG*LdEve z-JM;T5eH5u$7>!aYrLe!7sV-Z?I9%B2hH}d${U&ue!6E1rjU*+@d&9!)I)=G$5C#1 zTJ~*9v$4ba6ongxB=P5GkQK7LlWV;_4!~Ik$c5_ zEY4F4Y2>1^q68c8f;;z@%q$OAE3WoFVU-)l<^Y!ZmRghk}^L(PYLjwwh*Xu;`{-cm2T0bp-}O}MLZmCe5>~G1dzZr*`=KU zm$v=#^!UX4r1&o#p-pS4*^OUJaP94##-7H~iEj1xQ}PACe9aON11#&HT5&diAix$> zai6~w1J2%hXOGhJsNayBqq@_?+stBrfUTRzjXt-?dUb9nq#4u`B49DfYj!FA5yG6# zKd?oS6gJNo5=?E6p0hj5Ko$#XKXDLI>B4{jGrc#HCfI>)wX~Riw9*i!g+)#Fv zK95L6%9pN<#vcFl2sGxzV@m;TdIPBV86I8PG#!30a@7r(Qnn?;Jf%wzgq2btYE7AH z2MYvvK`Q?0Yi_d8ZNiIF)``QB@G@V}+4(eDaLN2)<}8S_!z6Iv>c!Jp8mm4k;zM61 zK-rAa^z8Sx4iPQ^B9Lh!U}YILR~Mo9OQrgKMtqRH>I5>*{&3S0i+ae_ny!i^9bP#sCB__>5$iDrPz;)WvaEf7T&H2bdH-LYD%PrfelT$ zk*B(sd&8PRYC~J?g_aOI;pZj-VPI1L$XHJ0(pQCOx&A3k@}eq>T65<<eHio61=kaGp*HU?l%y@InIwf~f^eAEA=Y<_I+e zUo@)WsDy)X6e!Jq-yd(DdpImBW2%_3N^cP+$LJ4 zxj~OFXP*T&-e>Z?zoQ<|25hf~t!{uFzc~}Jwm6mqX_VEwIU?mI-~Aq#7TXd6O4~mW zlvI>c(|ao!>an~6z`^S1)eepK(!(kbO1O^JOZl%a?W1=y`p66Q`e0CrLseKokc``kMd$iNCSJVIY2xe1 z=@ALWCV0LGrDa8=yte4cYK8R5VIq*;p4Wu^_M|3K0HXybEiHB71EiTh*FAIg1?PF? zAQlyWi81BmW-zTnNu_pTa`yF|5E|Cm_@WCkP006!J%`zmjJT_xRAdOk%nLKcvsOp} z=faU^{+#YZ4~|;N>@ER(GRwjns-l2W-afW2te5(Sc*)#3&h?H{0j^<0-h(bmchxYA zd(1zAlCwoPz2q@yug9GYM=IVo?!Jq7RRLsqT|ddaGEKa)w{EPAPfn_@CEOG`6{{{t z%`Zk}woCYt-BA)!psDoA<;pJ5G8dOfUfa{mzR8#f$1;F~@)jb_UL928JYLcu-P2}x z0}LC4PnvjQg;n2?fC6oXjn&6MCnAPL@vj`YNt;H*eqdnv*sRy^{v>pG|KeIU{2#J#Bd6<$%@>&zdWL4Y<0#1iZwQGqb{AH zhxNf~xCx0iU0my9&m84;XkkskjAXe2=U%}kRanqBn}nJx`)M!v2hRfz_5@JG7Y3D? zTdWVN8vr|TYPTQF}u0Y;8BfOZ@|c&0mR-*;%FaosnML7M9Oe;_*k7H7zR6o{-IEFg;?029IOy5ZkgfTtJbO~@94sdpHUneJN?0TL3^PPxp__KxfMQ?VmHl>A; z_?>Lr{9pqw;A$1@^p@n8_{fCN&cu#=_wz!_WSsFf!+u}J+E*IpyU&9q@A{5u*pQu# zUL5la;I%A~h8Ptecmv^U@+7S+1EbxjAHZV!*k^rr@XiMS(%*+1-g##G1IJS^Ya;$N|kiKakgD!IT4M0QiMY+7G6mz)8+j=?yVz}9&}Hl2yVpcbRDz+|h;snv zxU!yaR>^k}#&zs>-C1Mjpcea z5Mu^>6=#9JHcf)$r{{bYM{AuQ5Nsmud9$&rxPOu7<}r`6fnc7=PYk)O%_`J4Kc8IK zaNwGIw>oxpEce5SBnW`V)j*NACqjjW#b8(zjtw!c2l{lyO)%6NT+BEPAvp9!(K(d! z^#R|sRoYi+pZ*Q{ux|je{f=#*WjX3Sf4_PS=n2#2Vn2UQL*A$R*bvbSIkH<{-3Qv^ zq0~kF>!rYskAVRm2TB7)a;vN6Kyc3tE!=v|I-tTe-rF?#U#^M>28ww|MsM+0uuk<| zOjr$A_sgxXh5*m278~7KV?bO0i@Jb_{Vy{be;?TW*QSnvX=SmUHdIRdH}h`p{TL@3 zf~)xXmVecV9(EWk>M*?{ZSdw_xwjhF(VWZmzZ~DM!~M%iejV;#&hsmB|AL)=jN1Q- z++VQ#rw{ys<-bzZublfglJhI){*_gK5vo7o0u)-m*z$jP^)I&kSBx@b bg?_-TQdw&dtRpRS;J*thTIbWwnce Date: Fri, 21 Feb 2025 08:52:12 +0100 Subject: [PATCH 06/14] Uncommented variables css import --- packages/lib/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/lib/src/index.ts b/packages/lib/src/index.ts index fd0fc86ca5..3ded437d20 100644 --- a/packages/lib/src/index.ts +++ b/packages/lib/src/index.ts @@ -1,5 +1,5 @@ import "./styles/fonts.css"; -// import "./styles/variables.css"; +import "./styles/variables.css"; export { default as DxcAccordion } from "./accordion/Accordion"; export { default as DxcAccordionGroup } from "./accordion-group/AccordionGroup"; From 79b3b57f9471ef23e10b708f955ddeeada397aff Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Mon, 10 Mar 2025 13:41:38 +0100 Subject: [PATCH 07/14] Fixed some problems in dropdown refactor --- .../dropdown/code/DropdownCodePage.tsx | 16 +- .../overview/DropdownOverviewPage.tsx | 2 +- packages/lib/src/dropdown/Dropdown.tsx | 148 +++++++++--------- 3 files changed, 79 insertions(+), 87 deletions(-) diff --git a/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx b/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx index 4ffc44ef96..2a7d56441f 100644 --- a/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx +++ b/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx @@ -79,6 +79,14 @@ const sections = [ 'before' + + label + + string + + Text to be placed within the dropdown. + - + margin @@ -92,14 +100,6 @@ const sections = [ - - - label - - string - - Text to be placed within the dropdown. - - - diff --git a/apps/website/screens/components/dropdown/overview/DropdownOverviewPage.tsx b/apps/website/screens/components/dropdown/overview/DropdownOverviewPage.tsx index 1b4f079cf7..358b813073 100644 --- a/apps/website/screens/components/dropdown/overview/DropdownOverviewPage.tsx +++ b/apps/website/screens/components/dropdown/overview/DropdownOverviewPage.tsx @@ -13,7 +13,7 @@ const sections = [ content: ( <> - The Dropdown enhances usability by displaying a list of choices in a collapsible menu, optimizing space while + The dropdown enhances usability by displaying a list of choices in a collapsible menu, optimizing space while keeping options easily accessible. It supports icons, sections, and different selection behaviors to adapt to various use cases. Designed for efficiency, it ensures keyboard navigation, accessibility, and proper contrast for readability. diff --git a/packages/lib/src/dropdown/Dropdown.tsx b/packages/lib/src/dropdown/Dropdown.tsx index 7242bf5b11..81999bfc08 100644 --- a/packages/lib/src/dropdown/Dropdown.tsx +++ b/packages/lib/src/dropdown/Dropdown.tsx @@ -63,12 +63,10 @@ const DropdownTrigger = styled.button<{ !props.disabled && ` &:focus { - outline: 2px solid var(--border-color-secondary-medium); + outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + outline-offset: -2px; } - &:hover { - background-color: var(--color-bg-neutral-light); - } - &:active { + &:hover, &:active { background-color: var(--color-bg-neutral-light); } `}; @@ -78,11 +76,8 @@ const DropdownTriggerContent = styled.span` display: flex; align-items: center; gap: var(--spacing-gap-s); - margin-left: 0px; - margin-right: 0px; width: 100%; overflow: hidden; - white-space: nowrap; `; const DropdownTriggerLabel = styled.span` @@ -91,13 +86,13 @@ const DropdownTriggerLabel = styled.span` font-weight: var(--typography-label-regular); text-overflow: ellipsis; overflow: hidden; + white-space: nowrap; `; const DropdownTriggerIcon = styled.span<{ disabled: DropdownPropsType["disabled"]; }>` display: flex; - color: var(--color-fg-neutral-dark); font-size: var(--typography-label-xl); svg { @@ -108,7 +103,6 @@ const DropdownTriggerIcon = styled.span<{ const CaretIcon = styled.span<{ disabled: DropdownPropsType["disabled"] }>` display: flex; - color: ${(props) => (props.disabled ? "var(--color-fg-neutral-medium);" : "var(--color-fg-neutral-dark);")}; font-size: var(--typography-label-l); svg { @@ -131,7 +125,7 @@ const DxcDropdown = ({ size = "fitContent", tabIndex = 0, title, -}: DropdownPropsType): JSX.Element => { +}: DropdownPropsType) => { const id = useId(); const triggerId = `trigger-${id}`; const menuId = `menu-${id}`; @@ -256,74 +250,72 @@ const DxcDropdown = ({ }, [visualFocusIndex]); return ( - - - - - - { - event.stopPropagation(); - }} - disabled={disabled} - label={label} - margin={margin} - size={size} - id={triggerId} - aria-haspopup="true" - aria-controls={isOpen ? menuId : undefined} - aria-expanded={isOpen ? true : undefined} - aria-label="Show options" - tabIndex={tabIndex} - ref={triggerRef} - > - - {label && iconPosition === "after" && {label}} - {icon && ( - - {typeof icon === "string" ? : icon} - - )} - {label && iconPosition === "before" && {label}} - - {!caretHidden && ( - - {" "} - + + + + + { + event.stopPropagation(); + }} + disabled={disabled} + label={label} + margin={margin} + size={size} + id={triggerId} + aria-haspopup="true" + aria-controls={isOpen ? menuId : undefined} + aria-expanded={isOpen ? true : undefined} + aria-label="Show options" + tabIndex={tabIndex} + ref={triggerRef} + > + + {label && iconPosition === "after" && {label}} + {icon && ( + + {typeof icon === "string" ? : icon} + )} - - - - - - - - - - - + {label && iconPosition === "before" && {label}} + + {!caretHidden && ( + + {" "} + + )} + + + + + + + + + + ); }; From dfa69607460d85f0c6eb2d7292c4fc8b307d1ca7 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Mon, 10 Mar 2025 13:42:24 +0100 Subject: [PATCH 08/14] Removed return statement --- .../dropdown/code/DropdownCodePage.tsx | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx b/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx index 2a7d56441f..b4fb830f69 100644 --- a/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx +++ b/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx @@ -223,15 +223,13 @@ const sections = [ }, ]; -const DropdownCodePage = () => { - return ( - - - - - - - ); -}; +const DropdownCodePage = () => ( + + + + + + +); export default DropdownCodePage; From 4db9a509dd899502003ba2b165af73cff069a3be Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Mon, 10 Mar 2025 13:46:51 +0100 Subject: [PATCH 09/14] Fixed some problems in dropdown menu item refactor --- packages/lib/src/dropdown/DropdownMenu.tsx | 3 +-- .../lib/src/dropdown/DropdownMenuItem.tsx | 25 ++++++------------- 2 files changed, 8 insertions(+), 20 deletions(-) diff --git a/packages/lib/src/dropdown/DropdownMenu.tsx b/packages/lib/src/dropdown/DropdownMenu.tsx index d136e6d9e6..92bead8f4c 100644 --- a/packages/lib/src/dropdown/DropdownMenu.tsx +++ b/packages/lib/src/dropdown/DropdownMenu.tsx @@ -5,7 +5,6 @@ import { DropdownMenuProps } from "./types"; import { scrollbarStyles } from "../styles/scroll"; const DropdownMenuContainer = styled.ul` - box-sizing: border-box; max-height: 230px; min-width: min-content; padding: 0; @@ -23,7 +22,7 @@ const DropdownMenu = forwardRef( ( { id, dropdownTriggerId, iconsPosition, visualFocusIndex, menuItemOnClick, onKeyDown, options, styles }, ref - ): JSX.Element => ( + ) => ( { // Prevent the onBlur event from closing menu when clicking on the menu since diff --git a/packages/lib/src/dropdown/DropdownMenuItem.tsx b/packages/lib/src/dropdown/DropdownMenuItem.tsx index 8944abcb32..f283b66509 100644 --- a/packages/lib/src/dropdown/DropdownMenuItem.tsx +++ b/packages/lib/src/dropdown/DropdownMenuItem.tsx @@ -5,31 +5,29 @@ import DxcIcon from "../icon/Icon"; const DropdownMenuItemContainer = styled.li<{ visuallyFocused: DropdownMenuItemProps["visuallyFocused"] }>` box-sizing: border-box; + color: var(--color-fg-neutral-dark); display: flex; align-items: center; gap: var(--spacing-gap-xs); - min-height: 36px; - padding: 0px var(--spacing-padding-xs); + height: var(--height-m); + padding: var(--spacing-padding-none) var(--spacing-padding-xs); cursor: pointer; ${(props) => props.visuallyFocused && ` - outline: var(--border-width-m) solid var(--border-color-secondary-medium); + outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); outline-offset: calc(-1 * var(--border-width-m)); `} &:first-child { border-top-left-radius: var(--border-radius-s); border-top-right-radius: var(--border-radius-s); } - &:last-child { border-bottom-left-radius: var(--border-radius-s); border-bottom-right-radius: var(--border-radius-s); } - &:hover { - background-color: var(--color-bg-neutral-light); - } + &:hover, &:active { background-color: var(--color-bg-neutral-light); } @@ -39,14 +37,11 @@ const DropdownMenuItemLabel = styled.span` font-family: var(--typography-font-family); font-size: var(--typography-label-l); font-weight: var(--typography-label-regular); - color: var(--color-fg-neutral-dark); - white-space: nowrap; `; const DropdownMenuItemIcon = styled.div` display: flex; - color: var(--color-fg-neutral-dark); - font-size: var(--typography-label-xl); + font-size: var(--height-xs); svg { width: 20px; @@ -54,13 +49,7 @@ const DropdownMenuItemIcon = styled.div` } `; -const DropdownMenuItem = ({ - id, - visuallyFocused, - iconPosition, - onClick, - option, -}: DropdownMenuItemProps): JSX.Element => ( +const DropdownMenuItem = ({ id, visuallyFocused, iconPosition, onClick, option }: DropdownMenuItemProps) => ( { From 76dde7013b756d2199af1486b171edb982e5c4a0 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Mon, 10 Mar 2025 13:57:20 +0100 Subject: [PATCH 10/14] Minor fixes and removing opinionated theme --- .../lib/src/dropdown/Dropdown.stories.tsx | 61 ------------------- packages/lib/src/dropdown/Dropdown.tsx | 4 +- 2 files changed, 2 insertions(+), 63 deletions(-) diff --git a/packages/lib/src/dropdown/Dropdown.stories.tsx b/packages/lib/src/dropdown/Dropdown.stories.tsx index 2f1f9c57d5..f7453809ed 100644 --- a/packages/lib/src/dropdown/Dropdown.stories.tsx +++ b/packages/lib/src/dropdown/Dropdown.stories.tsx @@ -3,7 +3,6 @@ import { userEvent, within } from "@storybook/test"; import { ThemeProvider } from "styled-components"; import ExampleContainer from "../../.storybook/components/ExampleContainer"; import Title from "../../.storybook/components/Title"; -import { HalstackProvider } from "../HalstackContext"; import HalstackContext from "../HalstackContext"; import DxcDropdown from "./Dropdown"; import DropdownMenu from "./DropdownMenu"; @@ -86,14 +85,6 @@ const optionWithIcon: Option[] = [ const optionsIcon: any = options.map((op, i) => ({ ...op, icon: icons[i] })); -const opinionatedTheme = { - dropdown: { - baseColor: "#fabada", - fontColor: "#fff", - optionFontColor: "#0095ff", - }, -}; - const Dropdown = () => ( <> @@ -347,48 +338,6 @@ const DropdownListStates = () => { ); }; -const OpinionatedTheme = () => ( - <> - - <ExampleContainer> - <Title title="Default" theme="light" level={4} /> - <HalstackProvider theme={opinionatedTheme}> - <DxcDropdown label="Default" options={options} onSelectOption={(value) => {}} icon={iconSVG} /> - </HalstackProvider> - </ExampleContainer> - <ExampleContainer pseudoState="pseudo-hover"> - <Title title="Hovered" theme="light" level={4} /> - <HalstackProvider theme={opinionatedTheme}> - <DxcDropdown label="Hovered" options={options} onSelectOption={(value) => {}} icon={iconSVG} /> - </HalstackProvider> - </ExampleContainer> - <ExampleContainer pseudoState="pseudo-active"> - <Title title="Active" theme="light" level={4} /> - <HalstackProvider theme={opinionatedTheme}> - <DxcDropdown label="Active" options={options} onSelectOption={(value) => {}} icon={iconSVG} /> - </HalstackProvider> - </ExampleContainer> - <ExampleContainer pseudoState="pseudo-focus"> - <Title title="Focused" theme="light" level={4} /> - <HalstackProvider theme={opinionatedTheme}> - <DxcDropdown label="Focused" options={options} onSelectOption={(value) => {}} icon={iconSVG} /> - </HalstackProvider> - </ExampleContainer> - <ExampleContainer> - <Title title="Disabled" theme="light" level={4} /> - <HalstackProvider theme={opinionatedTheme}> - <DxcDropdown label="Disabled" options={options} onSelectOption={(value) => {}} icon={iconSVG} disabled /> - </HalstackProvider> - </ExampleContainer> - <ExampleContainer expanded> - <Title title="List opened" theme="light" level={4} /> - <HalstackProvider theme={opinionatedTheme}> - <DxcDropdown label="Default" options={options} onSelectOption={(value) => {}} icon={iconSVG} /> - </HalstackProvider> - </ExampleContainer> - </> -); - const TooltipTitle = () => ( <ExampleContainer expanded> <Title title="Tooltip" theme="light" level={3} /> @@ -415,16 +364,6 @@ export const Chromatic: Story = { }, }; -export const OpinionatedThemed: Story = { - render: OpinionatedTheme, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - const buttonList = canvas.getAllByRole("button"); - const lastButton = buttonList[buttonList.length - 1]; - lastButton != null && (await userEvent.click(lastButton)); - }, -}; - export const MenuStates: Story = { render: DropdownListStates, play: async ({ canvasElement }) => { diff --git a/packages/lib/src/dropdown/Dropdown.tsx b/packages/lib/src/dropdown/Dropdown.tsx index 81999bfc08..a1047a7d27 100644 --- a/packages/lib/src/dropdown/Dropdown.tsx +++ b/packages/lib/src/dropdown/Dropdown.tsx @@ -93,7 +93,7 @@ const DropdownTriggerIcon = styled.span<{ disabled: DropdownPropsType["disabled"]; }>` display: flex; - font-size: var(--typography-label-xl); + font-size: var(--height-xs); svg { width: 20px; @@ -293,7 +293,7 @@ const DxcDropdown = ({ </DropdownTriggerContent> {!caretHidden && ( <CaretIcon disabled={disabled}> - <DxcIcon icon={isOpen ? "arrow_drop_up" : "arrow_drop_down"} />{" "} + <DxcIcon icon={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"} /> </CaretIcon> )} </DropdownTrigger> From 515352c2381063c3fa351f7c4fd7d702c7921b1b Mon Sep 17 00:00:00 2001 From: Enrique Moreno <enrique.moreno@dxc.com> Date: Fri, 14 Mar 2025 12:34:41 +0100 Subject: [PATCH 11/14] Solved styles and doc problems --- .../overview/DropdownOverviewPage.tsx | 29 ++++++++++--------- packages/lib/src/dropdown/Dropdown.tsx | 3 +- 2 files changed, 17 insertions(+), 15 deletions(-) diff --git a/apps/website/screens/components/dropdown/overview/DropdownOverviewPage.tsx b/apps/website/screens/components/dropdown/overview/DropdownOverviewPage.tsx index 358b813073..2ec908ab2e 100644 --- a/apps/website/screens/components/dropdown/overview/DropdownOverviewPage.tsx +++ b/apps/website/screens/components/dropdown/overview/DropdownOverviewPage.tsx @@ -83,19 +83,22 @@ const sections = [ </DxcParagraph> </> ), - }, - { - title: "Icon usage", - content: ( - <> - <DxcParagraph> - Icons can be used within the dropdown component in various configurations. They can be placed before or after - the label or serve as the sole content of the dropdown placeholder and options. This maintains consistency - with other components in our Design System, such as buttons and selects, which follow the same behavior. - </DxcParagraph> - <Example example={iconUsage}></Example> - </> - ), + subSections: [ + { + title: "Icon usage", + content: ( + <> + <DxcParagraph> + Icons can be used within the dropdown component in various configurations. They can be placed before or + after the label or serve as the sole content of the dropdown placeholder and options. This maintains + consistency with other components in our Design System, such as buttons and selects, which follow the same + behavior. + </DxcParagraph> + <Example example={iconUsage}></Example> + </> + ), + }, + ], }, { title: "Best practices", diff --git a/packages/lib/src/dropdown/Dropdown.tsx b/packages/lib/src/dropdown/Dropdown.tsx index a1047a7d27..3c807a5724 100644 --- a/packages/lib/src/dropdown/Dropdown.tsx +++ b/packages/lib/src/dropdown/Dropdown.tsx @@ -54,8 +54,7 @@ const DropdownTrigger = styled.button<{ min-width: ${(props) => (props.label === "" ? "0px" : calculateWidth(props.margin, props.size))}; border: 0; border-radius: var(--border-radius-s); - background-color: ${(props) => - props.disabled ? "var(--color-bg-neutral-light);" : "var(--color-bg-neutral-lightest);"}; + background-color: var(--color-bg-neutral-lightest); color: ${(props) => (props.disabled ? "var(--color-fg-neutral-medium);" : "var(--color-fg-neutral-dark);")}; cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")}; From 05e0d72dafa584c3ece4a6be4260a5074e7ae782 Mon Sep 17 00:00:00 2001 From: Enrique Moreno <enrique.moreno@dxc.com> Date: Fri, 14 Mar 2025 12:44:38 +0100 Subject: [PATCH 12/14] Improved code for dropdown icon position --- packages/lib/src/dropdown/Dropdown.tsx | 10 +++++----- packages/lib/src/dropdown/DropdownMenuItem.tsx | 11 ++++++++--- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/packages/lib/src/dropdown/Dropdown.tsx b/packages/lib/src/dropdown/Dropdown.tsx index 3c807a5724..d2bcb70175 100644 --- a/packages/lib/src/dropdown/Dropdown.tsx +++ b/packages/lib/src/dropdown/Dropdown.tsx @@ -71,10 +71,11 @@ const DropdownTrigger = styled.button<{ `}; `; -const DropdownTriggerContent = styled.span` +const DropdownTriggerContent = styled.span<{ iconPosition: DropdownPropsType["iconPosition"] }>` display: flex; + ${({ iconPosition }) => (iconPosition === "after" ? "flex-direction: row-reverse;" : "flex-direction: row;")} align-items: center; - gap: var(--spacing-gap-s); + gap: var(--spacing-gap-xs); width: 100%; overflow: hidden; `; @@ -277,8 +278,7 @@ const DxcDropdown = ({ tabIndex={tabIndex} ref={triggerRef} > - <DropdownTriggerContent> - {label && iconPosition === "after" && <DropdownTriggerLabel>{label}</DropdownTriggerLabel>} + <DropdownTriggerContent iconPosition={iconPosition}> {icon && ( <DropdownTriggerIcon disabled={disabled} @@ -288,7 +288,7 @@ const DxcDropdown = ({ {typeof icon === "string" ? <DxcIcon icon={icon} /> : icon} </DropdownTriggerIcon> )} - {label && iconPosition === "before" && <DropdownTriggerLabel>{label}</DropdownTriggerLabel>} + {label && <DropdownTriggerLabel>{label}</DropdownTriggerLabel>} </DropdownTriggerContent> {!caretHidden && ( <CaretIcon disabled={disabled}> diff --git a/packages/lib/src/dropdown/DropdownMenuItem.tsx b/packages/lib/src/dropdown/DropdownMenuItem.tsx index f283b66509..e319a2738a 100644 --- a/packages/lib/src/dropdown/DropdownMenuItem.tsx +++ b/packages/lib/src/dropdown/DropdownMenuItem.tsx @@ -3,7 +3,10 @@ import styled from "styled-components"; import { DropdownMenuItemProps } from "./types"; import DxcIcon from "../icon/Icon"; -const DropdownMenuItemContainer = styled.li<{ visuallyFocused: DropdownMenuItemProps["visuallyFocused"] }>` +const DropdownMenuItemContainer = styled.li<{ + visuallyFocused: DropdownMenuItemProps["visuallyFocused"]; + iconPosition: DropdownMenuItemProps["iconPosition"]; +}>` box-sizing: border-box; color: var(--color-fg-neutral-dark); display: flex; @@ -13,6 +16,8 @@ const DropdownMenuItemContainer = styled.li<{ visuallyFocused: DropdownMenuItemP padding: var(--spacing-padding-none) var(--spacing-padding-xs); cursor: pointer; + ${({ iconPosition }) => (iconPosition === "after" ? "flex-direction: row-reverse;" : "flex-direction: row;")} + ${(props) => props.visuallyFocused && ` @@ -51,6 +56,7 @@ const DropdownMenuItemIcon = styled.div` const DropdownMenuItem = ({ id, visuallyFocused, iconPosition, onClick, option }: DropdownMenuItemProps) => ( <DropdownMenuItemContainer + iconPosition={iconPosition} visuallyFocused={visuallyFocused} onClick={() => { onClick(option.value); @@ -59,13 +65,12 @@ const DropdownMenuItem = ({ id, visuallyFocused, iconPosition, onClick, option } role="menuitem" tabIndex={-1} > - {iconPosition === "after" && <DropdownMenuItemLabel>{option.label}</DropdownMenuItemLabel>} {option.icon && ( <DropdownMenuItemIcon role={typeof option.icon === "string" ? undefined : "img"} aria-hidden> {typeof option.icon === "string" ? <DxcIcon icon={option.icon} /> : option.icon} </DropdownMenuItemIcon> )} - {iconPosition === "before" && <DropdownMenuItemLabel>{option.label}</DropdownMenuItemLabel>} + <DropdownMenuItemLabel>{option.label}</DropdownMenuItemLabel> </DropdownMenuItemContainer> ); From 3afea434a34ac2b8ea4ff703e6d26f86b9f426fe Mon Sep 17 00:00:00 2001 From: Enrique Moreno <enrique.moreno@dxc.com> Date: Fri, 14 Mar 2025 13:19:35 +0100 Subject: [PATCH 13/14] Fixed problem with long texts and paddings --- packages/lib/src/dropdown/Dropdown.tsx | 1 + packages/lib/src/dropdown/DropdownMenuItem.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/lib/src/dropdown/Dropdown.tsx b/packages/lib/src/dropdown/Dropdown.tsx index d2bcb70175..9aa78be5a4 100644 --- a/packages/lib/src/dropdown/Dropdown.tsx +++ b/packages/lib/src/dropdown/Dropdown.tsx @@ -51,6 +51,7 @@ const DropdownTrigger = styled.button<{ gap: var(--spacing-gap-s); width: 100%; height: var(--height-m); + padding: var(--spacing-padding-none) var(--spacing-padding-xs); min-width: ${(props) => (props.label === "" ? "0px" : calculateWidth(props.margin, props.size))}; border: 0; border-radius: var(--border-radius-s); diff --git a/packages/lib/src/dropdown/DropdownMenuItem.tsx b/packages/lib/src/dropdown/DropdownMenuItem.tsx index e319a2738a..ddf9420a57 100644 --- a/packages/lib/src/dropdown/DropdownMenuItem.tsx +++ b/packages/lib/src/dropdown/DropdownMenuItem.tsx @@ -42,6 +42,7 @@ const DropdownMenuItemLabel = styled.span` font-family: var(--typography-font-family); font-size: var(--typography-label-l); font-weight: var(--typography-label-regular); + white-space: nowrap; `; const DropdownMenuItemIcon = styled.div` From 64061fddd04058b39f4a5d0c2495d7a633b31f40 Mon Sep 17 00:00:00 2001 From: Enrique Moreno <enrique.moreno@dxc.com> Date: Tue, 18 Mar 2025 11:06:24 +0100 Subject: [PATCH 14/14] Minor fixes from review --- .../dropdown/code/DropdownCodePage.tsx | 2 +- .../dropdown/overview/DropdownOverviewPage.tsx | 18 ++++++++---------- packages/lib/src/dropdown/Dropdown.tsx | 2 +- 3 files changed, 10 insertions(+), 12 deletions(-) diff --git a/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx b/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx index b4fb830f69..2ce387ea7e 100644 --- a/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx +++ b/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx @@ -226,7 +226,7 @@ const sections = [ const DropdownCodePage = () => ( <DxcFlex direction="column" gap="4rem"> <QuickNavContainerLayout> - <QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer> + <QuickNavContainer sections={sections} startHeadingLevel={2} /> </QuickNavContainerLayout> <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx" /> </DxcFlex> diff --git a/apps/website/screens/components/dropdown/overview/DropdownOverviewPage.tsx b/apps/website/screens/components/dropdown/overview/DropdownOverviewPage.tsx index 2ec908ab2e..d70381de65 100644 --- a/apps/website/screens/components/dropdown/overview/DropdownOverviewPage.tsx +++ b/apps/website/screens/components/dropdown/overview/DropdownOverviewPage.tsx @@ -137,15 +137,13 @@ const sections = [ }, ]; -const DropdownOverviewPage = () => { - return ( - <DxcFlex direction="column" gap="4rem"> - <QuickNavContainerLayout> - <QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer> - </QuickNavContainerLayout> - <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/dropdown/overview/DropdownOverviewPage.tsx" /> - </DxcFlex> - ); -}; +const DropdownOverviewPage = () => ( + <DxcFlex direction="column" gap="4rem"> + <QuickNavContainerLayout> + <QuickNavContainer sections={sections} startHeadingLevel={2} /> + </QuickNavContainerLayout> + <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/dropdown/overview/DropdownOverviewPage.tsx" /> + </DxcFlex> +); export default DropdownOverviewPage; diff --git a/packages/lib/src/dropdown/Dropdown.tsx b/packages/lib/src/dropdown/Dropdown.tsx index 9aa78be5a4..3fed994a6e 100644 --- a/packages/lib/src/dropdown/Dropdown.tsx +++ b/packages/lib/src/dropdown/Dropdown.tsx @@ -1,6 +1,6 @@ import * as Popover from "@radix-ui/react-popover"; import { FocusEvent, KeyboardEvent, useCallback, useId, useLayoutEffect, useRef, useState, useContext } from "react"; -import styled, { ThemeProvider } from "styled-components"; +import styled from "styled-components"; import { getMargin } from "../common/utils"; import { spaces } from "../common/variables"; import DxcIcon from "../icon/Icon";