From 5edf9447257d90ef832ebcb4044368bc4c7ff7fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Fri, 4 Apr 2025 11:14:07 +0200 Subject: [PATCH 1/6] Breadcrumbs component redesign --- .../pages/components/breadcrumbs/code.tsx | 17 +++ .../pages/components/breadcrumbs/index.tsx | 26 ++--- .../components/breadcrumbs/specifications.tsx | 21 ---- .../pages/components/breadcrumbs/usage.tsx | 21 ---- .../breadcrumbs/BreadcrumbsPageLayout.tsx | 7 +- .../breadcrumbs/code/BreadcrumbsCodePage.tsx | 18 ++-- .../overview/BreadcrumbsOverviewPage.tsx | 86 ++++++++++++++++ .../examples/collapsed.tsx | 0 .../{usage => overview}/examples/noRoot.tsx | 0 .../specs/BreadcrumbsSpecsPage.tsx | 48 --------- .../specs/images/breadcrumbs_anatomy.png | Bin 7270 -> 0 bytes .../specs/images/breadcrumbs_specs.png | Bin 8718 -> 0 bytes .../usage/BreadcrumbsUsagePage.tsx | 97 ------------------ .../src/breadcrumbs/Breadcrumbs.stories.tsx | 36 +------ packages/lib/src/breadcrumbs/Breadcrumbs.tsx | 77 ++++++-------- packages/lib/src/breadcrumbs/Item.tsx | 91 ++++++++-------- packages/lib/src/breadcrumbs/dropdownTheme.ts | 57 ---------- packages/lib/src/dropdown/Dropdown.tsx | 4 +- packages/lib/src/dropdown/DropdownMenu.tsx | 1 + 19 files changed, 206 insertions(+), 401 deletions(-) create mode 100644 apps/website/pages/components/breadcrumbs/code.tsx delete mode 100644 apps/website/pages/components/breadcrumbs/specifications.tsx delete mode 100644 apps/website/pages/components/breadcrumbs/usage.tsx create mode 100644 apps/website/screens/components/breadcrumbs/overview/BreadcrumbsOverviewPage.tsx rename apps/website/screens/components/breadcrumbs/{usage => overview}/examples/collapsed.tsx (100%) rename apps/website/screens/components/breadcrumbs/{usage => overview}/examples/noRoot.tsx (100%) delete mode 100644 apps/website/screens/components/breadcrumbs/specs/BreadcrumbsSpecsPage.tsx delete mode 100644 apps/website/screens/components/breadcrumbs/specs/images/breadcrumbs_anatomy.png delete mode 100644 apps/website/screens/components/breadcrumbs/specs/images/breadcrumbs_specs.png delete mode 100644 apps/website/screens/components/breadcrumbs/usage/BreadcrumbsUsagePage.tsx delete mode 100644 packages/lib/src/breadcrumbs/dropdownTheme.ts diff --git a/apps/website/pages/components/breadcrumbs/code.tsx b/apps/website/pages/components/breadcrumbs/code.tsx new file mode 100644 index 0000000000..d2a465bb4f --- /dev/null +++ b/apps/website/pages/components/breadcrumbs/code.tsx @@ -0,0 +1,17 @@ +import Head from "next/head"; +import type { ReactElement } from "react"; +import BreadcrumbsPageLayout from "screens/components/breadcrumbs/BreadcrumbsPageLayout"; +import BreadcrumbsCodePage from "screens/components/breadcrumbs/code/BreadcrumbsCodePage"; + +const Code = () => ( + <> + + Breadcrumbs code — Halstack Design System + + + +); + +Code.getLayout = (page: ReactElement) => {page}; + +export default Code; diff --git a/apps/website/pages/components/breadcrumbs/index.tsx b/apps/website/pages/components/breadcrumbs/index.tsx index 0816cbb238..1dd988b222 100644 --- a/apps/website/pages/components/breadcrumbs/index.tsx +++ b/apps/website/pages/components/breadcrumbs/index.tsx @@ -1,21 +1,17 @@ import Head from "next/head"; import type { ReactElement } from "react"; -import BreadcrumbsCodePage from "screens/components/breadcrumbs/code/BreadcrumbsCodePage"; import BreadcrumbsPageLayout from "screens/components/breadcrumbs/BreadcrumbsPageLayout"; +import BreadcrumbsOverviewPage from "screens/components/breadcrumbs/overview/BreadcrumbsOverviewPage"; -const Usage = () => { - return ( - <> - - Breadcrumbs — Halstack Design System - - - - ); -}; +const Index = () => ( + <> + + Breadcrumbs — Halstack Design System + + + +); -Usage.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; +Index.getLayout = (page: ReactElement) => {page}; -export default Usage; +export default Index; diff --git a/apps/website/pages/components/breadcrumbs/specifications.tsx b/apps/website/pages/components/breadcrumbs/specifications.tsx deleted file mode 100644 index abe0373d74..0000000000 --- a/apps/website/pages/components/breadcrumbs/specifications.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import BreadcrumbsPageLayout from "screens/components/breadcrumbs/BreadcrumbsPageLayout"; -import BreadcrumbsSpecsPage from "screens/components/breadcrumbs/specs/BreadcrumbsSpecsPage"; - -const Specifications = () => { - return ( - <> - - Breadcrumbs Specs — Halstack Design System - - - - ); -}; - -Specifications.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Specifications; diff --git a/apps/website/pages/components/breadcrumbs/usage.tsx b/apps/website/pages/components/breadcrumbs/usage.tsx deleted file mode 100644 index e5353edc79..0000000000 --- a/apps/website/pages/components/breadcrumbs/usage.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import BreadcrumbsPageLayout from "screens/components/breadcrumbs/BreadcrumbsPageLayout"; -import BreadcrumbsUsagePage from "screens/components/breadcrumbs/usage/BreadcrumbsUsagePage"; - -const Usage = () => { - return ( - <> - - Breadcrumbs Usage — Halstack Design System - - - - ); -}; - -Usage.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Usage; diff --git a/apps/website/screens/components/breadcrumbs/BreadcrumbsPageLayout.tsx b/apps/website/screens/components/breadcrumbs/BreadcrumbsPageLayout.tsx index a96d5c06b4..16a8142011 100644 --- a/apps/website/screens/components/breadcrumbs/BreadcrumbsPageLayout.tsx +++ b/apps/website/screens/components/breadcrumbs/BreadcrumbsPageLayout.tsx @@ -6,9 +6,8 @@ import { ReactNode } from "react"; const BreadcrumbsPageHeading = ({ children }: { children: ReactNode }) => { const tabs = [ - { label: "Code", path: "/components/breadcrumbs" }, - { label: "Usage", path: "/components/breadcrumbs/usage" }, - { label: "Specifications", path: "/components/breadcrumbs/specifications" }, + { label: "Overview", path: "/components/breadcrumbs" }, + { label: "Code", path: "/components/breadcrumbs/code" }, ]; return ( @@ -20,7 +19,7 @@ const BreadcrumbsPageHeading = ({ children }: { children: ReactNode }) => { A breadcrumbs trail is a secondary form of navigation that allows users to keep track and maintain awareness of their location as they move through a hierarchically structured web application. - + {children} diff --git a/apps/website/screens/components/breadcrumbs/code/BreadcrumbsCodePage.tsx b/apps/website/screens/components/breadcrumbs/code/BreadcrumbsCodePage.tsx index 0fe08b8970..5753b01673 100644 --- a/apps/website/screens/components/breadcrumbs/code/BreadcrumbsCodePage.tsx +++ b/apps/website/screens/components/breadcrumbs/code/BreadcrumbsCodePage.tsx @@ -124,15 +124,13 @@ const sections = [ }, ]; -const BreadcrumbsCodePage = () => { - return ( - - - - - - - ); -}; +const BreadcrumbsCodePage = () => ( + + + + + + +); export default BreadcrumbsCodePage; diff --git a/apps/website/screens/components/breadcrumbs/overview/BreadcrumbsOverviewPage.tsx b/apps/website/screens/components/breadcrumbs/overview/BreadcrumbsOverviewPage.tsx new file mode 100644 index 0000000000..e6d3689c1b --- /dev/null +++ b/apps/website/screens/components/breadcrumbs/overview/BreadcrumbsOverviewPage.tsx @@ -0,0 +1,86 @@ +import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react"; +import QuickNavContainer from "@/common/QuickNavContainer"; +import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; +import DocFooter from "@/common/DocFooter"; +import Example from "@/common/example/Example"; +import collapsed from "./examples/collapsed"; +import noRoot from "./examples/noRoot"; + +const sections = [ + { + title: "Introduction", + content: ( + + Breadcrumbs are a navigational component used in user interfaces to improve the user experience by providing a + clear path to previous steps or navigational levels. They typically display the user's current location within + the hierarchical structure of an application, allowing for easy navigation and improved orientation. + + ), + }, + { + title: "Collapsed breadcrumbs", + content: ( + <> + + When there are more than four items in the breadcrumbs, the component will collapse the items in a dropdown + menu to avoid overloading the interface. Users can click on the dropdown to view the hidden items and navigate + to the desired level. + + + Although this can be configurable, we highly encourage our users to stick with the collapsing at five or more + items. This was not a random decision, we carefully selected it to ensure the component does not overload the + interface and remains an effective navigational aid. + + + + Depending on the amount of available space, the collapsed breadcrumbs can be synthesized more by removing the + root element and displaying only the collapsed dropdown and the current page. + + + Be mindful of your user's cognitive load and collapse breadcrumbs appropriately. + + ), + }, + { + title: "Best practices", + content: ( + + + Use breadcrumbs when there are more than two navigational levels within the same hierarchy to help users + easily navigate and understand their position. + + + Ensure each label of the breadcrumbs items is informative yet brief, providing users with a clear + understanding of where each link will take them without overwhelming them with too much text. + + + Always position breadcrumbs in the top left corner of the interface. + + + Avoid overloading the component. Including too many items in the breadcrumbs increases the cognitive load of + the interface and can confuse users. We recommend using the collapsed version of the component when there are + more than four items. + + + Don't use breadcrumbs to replace primary navigation or links, as they are intended to serve as a supplementary + navigation aid. + + + Refrain from using breadcrumbs to represent the sequence of steps to complete an action. Remember that it is a + navigation component through levels with an established hierarchy. + + + ), + }, +]; + +const BreadcrumbsOverviewPage = () => ( + + + + + + +); + +export default BreadcrumbsOverviewPage; diff --git a/apps/website/screens/components/breadcrumbs/usage/examples/collapsed.tsx b/apps/website/screens/components/breadcrumbs/overview/examples/collapsed.tsx similarity index 100% rename from apps/website/screens/components/breadcrumbs/usage/examples/collapsed.tsx rename to apps/website/screens/components/breadcrumbs/overview/examples/collapsed.tsx diff --git a/apps/website/screens/components/breadcrumbs/usage/examples/noRoot.tsx b/apps/website/screens/components/breadcrumbs/overview/examples/noRoot.tsx similarity index 100% rename from apps/website/screens/components/breadcrumbs/usage/examples/noRoot.tsx rename to apps/website/screens/components/breadcrumbs/overview/examples/noRoot.tsx diff --git a/apps/website/screens/components/breadcrumbs/specs/BreadcrumbsSpecsPage.tsx b/apps/website/screens/components/breadcrumbs/specs/BreadcrumbsSpecsPage.tsx deleted file mode 100644 index ac1a756391..0000000000 --- a/apps/website/screens/components/breadcrumbs/specs/BreadcrumbsSpecsPage.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react"; -import Image from "@/common/Image"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import DocFooter from "@/common/DocFooter"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import Figure from "@/common/Figure"; -import specs from "./images/breadcrumbs_specs.png"; -import anatomy from "./images/breadcrumbs_anatomy.png"; - -const sections = [ - { - title: "Specifications", - content: ( -
- Breadcrumbs design specifications -
- ), - }, - { - title: "Anatomy", - content: ( - <> - Breadcrumbs anatomy - - Breadcrumbs item - Divider - - - ), - }, - { - title: "Design tokens", - content: This component currently has no design tokens., - }, -]; - -const BreadcrumbsSpecsPage = () => { - return ( - - - - - - - ); -}; - -export default BreadcrumbsSpecsPage; diff --git a/apps/website/screens/components/breadcrumbs/specs/images/breadcrumbs_anatomy.png b/apps/website/screens/components/breadcrumbs/specs/images/breadcrumbs_anatomy.png deleted file mode 100644 index 05f77825592283b5598ee383337aef29961ca255..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 7270 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 bo(G^^pV9wLTF&Qt7GPpzcB9D9DeAufipPUH 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 diff --git a/apps/website/screens/components/breadcrumbs/usage/BreadcrumbsUsagePage.tsx b/apps/website/screens/components/breadcrumbs/usage/BreadcrumbsUsagePage.tsx deleted file mode 100644 index aefbb75888..0000000000 --- a/apps/website/screens/components/breadcrumbs/usage/BreadcrumbsUsagePage.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import DocFooter from "@/common/DocFooter"; -import Example from "@/common/example/Example"; -import collapsed from "./examples/collapsed"; -import noRoot from "./examples/noRoot"; - -const sections = [ - { - title: "Usage", - content: ( - - Breadcrumbs are a navigational component used in user interfaces to improve the user experience by providing a - clear path to previous steps or navigational levels. They typically display the user's current location within - the hierarchical structure of an application, allowing for easy navigation and improved orientation. - - ), - subSections: [ - { - title: "Do's", - content: ( - - - Use breadcrumbs when there are more than two navigational levels within the same hierarchy to help users - easily navigate and understand their position. - - - Ensure each label of the Breadcrumbs items is informative yet brief, providing users with a clear - understanding of where each link will take them without overwhelming them with too much text. - - - Always position breadcrumbs in the top left corner of the interface. - - - ), - }, - { - title: "Don'ts", - content: ( - - - Avoid overloading the component. Including too many items in the breadcrumbs increases the cognitive load - of the interface and can confuse users. We recommend using the collapsed version of the component when - there are more than four items. - - - Don't use breadcrumbs to replace primary navigation or links, as they are intended to serve as a - supplementary navigation aid. - - - Refrain from using breadcrumbs to represent the sequence of steps to complete an action. Remember that it - is a navigation component through levels with an established hierarchy. - - - ), - }, - ], - }, - { - title: "Collapsed Breadcrumbs", - content: ( - <> - - When there are more than four items in the breadcrumbs, the component will collapse the items in a dropdown - menu to avoid overloading the interface. Users can click on the dropdown to view the hidden items and navigate - to the desired level. - - - Although this can be configurable, we highly encourage our users to stick with the collapsing at five or more - items. This was not a random decision, we carefully selected it to ensure the component does not overload the - interface and remains an effective navigational aid. - - - - Depending on the amount of available space, the collapsed breadcrumbs can be synthesized more by removing the - root element and displaying only the collapsed dropdown and the current page. - - - Be mindful of your user's cognitive load and collapse breadcrumbs appropriately. - - ), - }, -]; - -const BreadcrumbsUsagePage = () => { - return ( - - - - - - - ); -}; - -export default BreadcrumbsUsagePage; diff --git a/packages/lib/src/breadcrumbs/Breadcrumbs.stories.tsx b/packages/lib/src/breadcrumbs/Breadcrumbs.stories.tsx index 828addc0ba..26ac3f1c57 100644 --- a/packages/lib/src/breadcrumbs/Breadcrumbs.stories.tsx +++ b/packages/lib/src/breadcrumbs/Breadcrumbs.stories.tsx @@ -2,7 +2,6 @@ import Title from "../../.storybook/components/Title"; import ExampleContainer from "../../.storybook/components/ExampleContainer"; import DxcBreadcrumbs from "./Breadcrumbs"; import DxcContainer from "../container/Container"; -import { HalstackProvider } from "../HalstackContext"; import { userEvent, within } from "@storybook/test"; import { disabledRules } from "../../test/accessibility/rules/specific/breadcrumbs/disabledRules"; import preview from "../../.storybook/preview"; @@ -150,39 +149,6 @@ const Breadcrumbs = () => ( /> - - <ExampleContainer> - <Title title="Opinionated theming" theme="light" level={4} /> - <ExampleContainer> - <HalstackProvider - theme={{ - dropdown: { - baseColor: "#fabada", - fontColor: "#999", - optionFontColor: "#4d4d4d", - }, - }} - > - <DxcBreadcrumbs items={items} itemsBeforeCollapse={3} /> - </HalstackProvider> - </ExampleContainer> - <Title title="Advanced theming" theme="light" level={4} /> - <ExampleContainer> - <HalstackProvider - advancedTheme={{ - dropdown: { - buttonBackgroundColor: "#fabada", - buttonHeight: "100px", - buttonBorderThickness: "2px", - buttonBorderStyle: "solid", - buttonBorderColor: "#000", - }, - }} - > - <DxcBreadcrumbs items={items} itemsBeforeCollapse={3} /> - </HalstackProvider> - </ExampleContainer> - </ExampleContainer> </> ); @@ -193,6 +159,6 @@ export const Chromatic: Story = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); const dropdowns = canvas.getAllByRole("button"); - dropdowns[2] != null && await userEvent.click(dropdowns[2]); + dropdowns[2] != null && (await userEvent.click(dropdowns[2])); }, }; diff --git a/packages/lib/src/breadcrumbs/Breadcrumbs.tsx b/packages/lib/src/breadcrumbs/Breadcrumbs.tsx index 52a30c90e1..43ea302b6e 100644 --- a/packages/lib/src/breadcrumbs/Breadcrumbs.tsx +++ b/packages/lib/src/breadcrumbs/Breadcrumbs.tsx @@ -2,13 +2,33 @@ import { useCallback } from "react"; import styled from "styled-components"; import BreadcrumbsProps from "./types"; import DxcDropdown from "../dropdown/Dropdown"; -import { HalstackProvider } from "../HalstackContext"; -import dropdownTheme from "./dropdownTheme"; -import CoreTokens from "../common/coreTokens"; import DxcIcon from "../icon/Icon"; import Item from "./Item"; -import DxcFlex from "../flex/Flex"; import { Option } from "../dropdown/types"; +import DxcFlex from "../flex/Flex"; + +const OrderedList = styled.ol` + display: flex; + align-items: center; + gap: var(--spacing-gap-m); + list-style-type: none; + margin: 0; + padding-left: 0; + + > li:not(:first-child) { + > a, + > span { + margin-left: var(--spacing-gap-m); + } + &::before { + border-right: var(--border-width-s) var(--border-style-default) var(--border-color-neutral-strong); + content: ""; + height: var(--height-s); + margin: var(--spacing-padding-none) var(--spacing-padding-xxs); + transform: rotate(15deg); + } + } +`; const DxcBreadcrumbs = ({ ariaLabel = "Breadcrumbs", @@ -19,11 +39,8 @@ const DxcBreadcrumbs = ({ }: BreadcrumbsProps) => { const handleOnSelectOption = useCallback( (href: string) => { - if (onItemClick) { - onItemClick(href); - } else { - window.location.href = href; - } + if (onItemClick) onItemClick(href); + else window.location.href = href; }, [items] ); @@ -35,17 +52,14 @@ const DxcBreadcrumbs = ({ <> {showRoot && <Item href={items[0]?.href} key={0} label={items[0]?.label ?? ""} />} <DxcFlex alignItems="center" as="li" key={1}> - <HalstackProvider advancedTheme={dropdownTheme}> - <DxcDropdown - caretHidden - icon={<DxcIcon icon="more_horiz" />} - margin={showRoot ? { left: "small" } : undefined} - onSelectOption={handleOnSelectOption} - options={items - .slice(showRoot ? 1 : 0, -1) - .map(({ label, href }) => ({ label, value: href }) as Option)} - /> - </HalstackProvider> + <DxcDropdown + caretHidden + icon={<DxcIcon icon="more_horiz" />} + margin={showRoot ? { left: "small" } : undefined} + onSelectOption={handleOnSelectOption} + options={items.slice(showRoot ? 1 : 0, -1).map(({ label, href }) => ({ label, value: href }) as Option)} + title="More options" + /> </DxcFlex> <Item isCurrentPage key={2} label={items[items.length - 1]?.label ?? ""} /> </> @@ -65,27 +79,4 @@ const DxcBreadcrumbs = ({ ); }; -const OrderedList = styled.ol` - margin: ${CoreTokens.spacing_0}; - padding-left: ${CoreTokens.spacing_0}; - display: flex; - align-items: center; - gap: ${CoreTokens.spacing_12}; - list-style-type: none; - - > li:not(:first-child) { - > a, - > span { - margin-left: ${CoreTokens.spacing_12}; - } - &::before { - margin: ${CoreTokens.spacing_0} ${CoreTokens.spacing_2}; - transform: rotate(15deg); - border-right: ${CoreTokens.border_width_1} solid ${CoreTokens.color_grey_500}; - height: 1rem; - content: ""; - } - } -`; - export default DxcBreadcrumbs; diff --git a/packages/lib/src/breadcrumbs/Item.tsx b/packages/lib/src/breadcrumbs/Item.tsx index 472e027690..5c7c750a1d 100644 --- a/packages/lib/src/breadcrumbs/Item.tsx +++ b/packages/lib/src/breadcrumbs/Item.tsx @@ -1,78 +1,75 @@ import { useRef, MouseEvent } from "react"; import styled from "styled-components"; -import CoreTokens from "../common/coreTokens"; import { ItemPropsType } from "./types"; -const Item = ({ isCurrentPage = false, href, label, onClick }: ItemPropsType) => { - const currentItemRef = useRef<HTMLSpanElement | null>(null); - - const handleOnMouseEnter = (event: MouseEvent<HTMLAnchorElement>) => { - const labelContainer = event.currentTarget; - const optionElement = currentItemRef.current; - if (optionElement?.title === "" && labelContainer.scrollWidth > labelContainer.clientWidth) { - optionElement.title = label; - } - }; - - const handleOnClick = (event: MouseEvent<HTMLAnchorElement>) => { - event.preventDefault(); - if (href) { - onClick?.(href); - } - }; - - return ( - <ListItem aria-current={isCurrentPage ? "page" : undefined} isCurrentPage={isCurrentPage}> - {isCurrentPage ? ( - <CurrentPage ref={currentItemRef} onMouseEnter={handleOnMouseEnter}> - {label} - </CurrentPage> - ) : ( - <Link href={href} onClick={handleOnClick}> - <Text>{label}</Text> - </Link> - )} - </ListItem> - ); -}; - const ListItem = styled.li<{ isCurrentPage?: ItemPropsType["isCurrentPage"] }>` display: flex; align-items: center; - font-family: ${CoreTokens.type_sans}; - font-size: ${CoreTokens.type_scale_02}; - color: ${CoreTokens.color_black}; + color: var(--color-fg-neutral-dark); + font-family: var(--typography-font-family); + font-size: var(--typography-label-m); + font-weight: var(--typography-label-regular); ${({ isCurrentPage }) => isCurrentPage && "overflow: hidden;"} `; const CurrentPage = styled.span` - font-weight: ${CoreTokens.type_semibold}; + font-weight: var(--typography-label-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - cursor: default; `; const Link = styled.a` - border-radius: ${CoreTokens.border_radius_small}; - padding: ${CoreTokens.spacing_0} ${CoreTokens.spacing_2}; + border-radius: var(--border-radius-s); + padding: var(--spacing-padding-none) var(--spacing-padding-xxs); display: inline-flex; align-items: center; - height: 24px; - color: ${CoreTokens.color_black}; - text-decoration: ${CoreTokens.type_no_line}; + height: var(--height-s); + color: inherit; + text-decoration: none; cursor: pointer; &:focus { - outline: ${CoreTokens.border_width_2} solid ${CoreTokens.color_blue_600}; + outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + outline-offset: -2px; } `; const Text = styled.span` - border: ${CoreTokens.border_width_1} solid ${CoreTokens.color_transparent}; + border: var(--border-width-s) var(--border-style-default) transparent; &:hover { - border-bottom-color: ${CoreTokens.color_black}; + border-bottom-color: var(--color-fg-neutral-dark); } `; +const Item = ({ isCurrentPage = false, href, label, onClick }: ItemPropsType) => { + const currentItemRef = useRef<HTMLSpanElement | null>(null); + + const handleOnClick = (event: MouseEvent<HTMLAnchorElement>) => { + event.preventDefault(); + if (href) onClick?.(href); + }; + + const handleOnMouseEnter = (event: MouseEvent<HTMLAnchorElement>) => { + const labelContainer = event.currentTarget; + const optionElement = currentItemRef.current; + if (optionElement?.title === "" && labelContainer.scrollWidth > labelContainer.clientWidth) + optionElement.title = label; + }; + + return ( + <ListItem aria-current={isCurrentPage ? "page" : undefined} isCurrentPage={isCurrentPage}> + {isCurrentPage ? ( + <CurrentPage ref={currentItemRef} onMouseEnter={handleOnMouseEnter}> + {label} + </CurrentPage> + ) : ( + <Link href={href} onClick={handleOnClick}> + <Text>{label}</Text> + </Link> + )} + </ListItem> + ); +}; + export default Item; diff --git a/packages/lib/src/breadcrumbs/dropdownTheme.ts b/packages/lib/src/breadcrumbs/dropdownTheme.ts deleted file mode 100644 index 5fe908d28b..0000000000 --- a/packages/lib/src/breadcrumbs/dropdownTheme.ts +++ /dev/null @@ -1,57 +0,0 @@ -import CoreTokens from "../common/coreTokens"; - -export default { - dropdown: { - // Breadcrumbs tokens - buttonIconSize: CoreTokens.spacing_16, - buttonPaddingTop: CoreTokens.spacing_4, - buttonPaddingBottom: CoreTokens.spacing_4, - buttonPaddingLeft: CoreTokens.spacing_4, - buttonPaddingRight: CoreTokens.spacing_4, - buttonHeight: "24px", - buttonBorderRadius: "2px", - buttonBorderColor: CoreTokens.color_transparent, - optionFontSize: "14px", - optionPaddingTop: CoreTokens.spacing_0, - optionPaddingBottom: CoreTokens.spacing_0, - optionPaddingLeft: CoreTokens.spacing_16, - optionPaddingRight: CoreTokens.spacing_16, - - // Dropdown tokens - buttonBackgroundColor: CoreTokens.color_white, - hoverButtonBackgroundColor: CoreTokens.color_grey_100, - activeButtonBackgroundColor: CoreTokens.color_grey_300, - buttonFontFamily: CoreTokens.type_sans, - buttonFontSize: CoreTokens.type_scale_03, - buttonFontStyle: CoreTokens.type_normal, - buttonFontWeight: CoreTokens.type_regular, - buttonFontColor: CoreTokens.color_black, - buttonIconSpacing: "10px", - buttonIconColor: CoreTokens.color_black, - buttonBorderStyle: CoreTokens.border_none, - buttonBorderThickness: CoreTokens.border_width_0, - disabledColor: CoreTokens.color_grey_500, - disabledButtonBackgroundColor: CoreTokens.color_transparent, - disabledButtonBorderColor: CoreTokens.color_transparent, - optionBackgroundColor: CoreTokens.color_white, - hoverOptionBackgroundColor: CoreTokens.color_grey_100, - activeOptionBackgroundColor: CoreTokens.color_grey_300, - optionFontFamily: CoreTokens.type_sans, - optionFontStyle: CoreTokens.type_normal, - optionFontWeight: CoreTokens.type_regular, - optionFontColor: CoreTokens.color_black, - optionIconSize: "20px", - optionIconSpacing: "10px", - optionIconColor: CoreTokens.color_black, - caretIconSize: "24px", - caretIconColor: CoreTokens.color_black, - caretIconSpacing: "12px", - borderRadius: "4px", - borderStyle: CoreTokens.border_none, - borderThickness: CoreTokens.border_width_0, - borderColor: CoreTokens.color_transparent, - scrollBarThumbColor: CoreTokens.color_grey_700, - scrollBarTrackColor: CoreTokens.color_grey_300, - focusColor: CoreTokens.color_blue_600, - }, -}; diff --git a/packages/lib/src/dropdown/Dropdown.tsx b/packages/lib/src/dropdown/Dropdown.tsx index 3fed994a6e..daac4234da 100644 --- a/packages/lib/src/dropdown/Dropdown.tsx +++ b/packages/lib/src/dropdown/Dropdown.tsx @@ -4,7 +4,6 @@ import styled from "styled-components"; import { getMargin } from "../common/utils"; import { spaces } from "../common/variables"; import DxcIcon from "../icon/Icon"; -import HalstackContext from "../HalstackContext"; import useWidth from "../utils/useWidth"; import DropdownMenu from "./DropdownMenu"; import DropdownPropsType from "./types"; @@ -133,7 +132,6 @@ const DxcDropdown = ({ const [isOpen, changeIsOpen] = useState(false); const [visualFocusIndex, setVisualFocusIndex] = useState(0); - const colorsTheme = useContext(HalstackContext); const triggerRef = useRef<HTMLButtonElement | null>(null); const menuRef = useRef<HTMLUListElement | null>(null); const width = useWidth(triggerRef.current); @@ -309,7 +307,7 @@ const DxcDropdown = ({ visualFocusIndex={visualFocusIndex} menuItemOnClick={handleMenuItemOnClick} onKeyDown={handleMenuOnKeyDown} - styles={{ width, zIndex: "2147483647" }} + styles={{ width }} ref={menuRef} /> </Popover.Content> diff --git a/packages/lib/src/dropdown/DropdownMenu.tsx b/packages/lib/src/dropdown/DropdownMenu.tsx index 92bead8f4c..676c0d995d 100644 --- a/packages/lib/src/dropdown/DropdownMenu.tsx +++ b/packages/lib/src/dropdown/DropdownMenu.tsx @@ -15,6 +15,7 @@ const DropdownMenuContainer = styled.ul` var(--shadow-dark); outline: none; overflow-y: auto; + z-index: "2147483647"; ${scrollbarStyles} `; From 216cdbee6a4adb8adc6873d04ba5ad8c3a0aaf2a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Fri, 4 Apr 2025 12:51:01 +0200 Subject: [PATCH 2/6] Correct z-index issue Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- 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 676c0d995d..f5361523dc 100644 --- a/packages/lib/src/dropdown/DropdownMenu.tsx +++ b/packages/lib/src/dropdown/DropdownMenu.tsx @@ -15,7 +15,7 @@ const DropdownMenuContainer = styled.ul` var(--shadow-dark); outline: none; overflow-y: auto; - z-index: "2147483647"; + z-index: 2147483647; ${scrollbarStyles} `; From 4f9e39d0cb4a7670bfe0c234d6d0f9818aba334f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Fri, 4 Apr 2025 13:04:49 +0200 Subject: [PATCH 3/6] Breadcrumbs visual adjustments --- packages/lib/src/breadcrumbs/Breadcrumbs.tsx | 4 ++-- packages/lib/src/breadcrumbs/Item.tsx | 2 ++ 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/lib/src/breadcrumbs/Breadcrumbs.tsx b/packages/lib/src/breadcrumbs/Breadcrumbs.tsx index 43ea302b6e..af6a8265fe 100644 --- a/packages/lib/src/breadcrumbs/Breadcrumbs.tsx +++ b/packages/lib/src/breadcrumbs/Breadcrumbs.tsx @@ -13,7 +13,7 @@ const OrderedList = styled.ol` gap: var(--spacing-gap-m); list-style-type: none; margin: 0; - padding-left: 0; + padding: 0; > li:not(:first-child) { > a, @@ -23,7 +23,7 @@ const OrderedList = styled.ol` &::before { border-right: var(--border-width-s) var(--border-style-default) var(--border-color-neutral-strong); content: ""; - height: var(--height-s); + height: var(--height-xxs); margin: var(--spacing-padding-none) var(--spacing-padding-xxs); transform: rotate(15deg); } diff --git a/packages/lib/src/breadcrumbs/Item.tsx b/packages/lib/src/breadcrumbs/Item.tsx index 5c7c750a1d..b6bb47b094 100644 --- a/packages/lib/src/breadcrumbs/Item.tsx +++ b/packages/lib/src/breadcrumbs/Item.tsx @@ -13,6 +13,7 @@ const ListItem = styled.li<{ isCurrentPage?: ItemPropsType["isCurrentPage"] }>` `; const CurrentPage = styled.span` + padding: var(--spacing-padding-none) var(--spacing-padding-xxs); font-weight: var(--typography-label-semibold); overflow: hidden; text-overflow: ellipsis; @@ -37,6 +38,7 @@ const Link = styled.a` const Text = styled.span` border: var(--border-width-s) var(--border-style-default) transparent; + &:hover { border-bottom-color: var(--color-fg-neutral-dark); } From b84170edf852e6e14f4f59c01b4e915585524b59 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Wed, 9 Apr 2025 16:50:37 +0200 Subject: [PATCH 4/6] Updates based on feedback --- .../src/breadcrumbs/Breadcrumbs.stories.tsx | 2 +- .../lib/src/dropdown/Dropdown.stories.tsx | 98 ++++++++----------- 2 files changed, 41 insertions(+), 59 deletions(-) diff --git a/packages/lib/src/breadcrumbs/Breadcrumbs.stories.tsx b/packages/lib/src/breadcrumbs/Breadcrumbs.stories.tsx index 26ac3f1c57..c515ebbf83 100644 --- a/packages/lib/src/breadcrumbs/Breadcrumbs.stories.tsx +++ b/packages/lib/src/breadcrumbs/Breadcrumbs.stories.tsx @@ -93,7 +93,7 @@ const Breadcrumbs = () => ( <DxcBreadcrumbs items={items} /> </ExampleContainer> <Title title="Active state" theme="light" level={3} /> - <ExampleContainer pseudoState="pseudo-active"> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> <DxcBreadcrumbs items={items} /> </ExampleContainer> <Title title="Truncation and text ellipsis with tooltip (only when collapsed)" theme="light" level={3} /> diff --git a/packages/lib/src/dropdown/Dropdown.stories.tsx b/packages/lib/src/dropdown/Dropdown.stories.tsx index f7453809ed..6d655d1a89 100644 --- a/packages/lib/src/dropdown/Dropdown.stories.tsx +++ b/packages/lib/src/dropdown/Dropdown.stories.tsx @@ -89,74 +89,68 @@ const Dropdown = () => ( <> <ExampleContainer> <Title title="Default" theme="light" level={4} /> - <DxcDropdown label="Default" options={options} onSelectOption={(value) => {}} /> + <DxcDropdown label="Default" options={options} onSelectOption={() => {}} /> </ExampleContainer> <ExampleContainer pseudoState="pseudo-hover"> <Title title="Hovered" theme="light" level={4} /> - <DxcDropdown label="Hovered" options={options} onSelectOption={(value) => {}} /> + <DxcDropdown label="Hovered" options={options} onSelectOption={() => {}} /> </ExampleContainer> <ExampleContainer pseudoState="pseudo-focus"> <Title title="Focused" theme="light" level={4} /> - <DxcDropdown label="Focused" options={options} onSelectOption={(value) => {}} /> + <DxcDropdown label="Focused" options={options} onSelectOption={() => {}} /> </ExampleContainer> - <ExampleContainer pseudoState="pseudo-active"> - <Title title="Actived" theme="light" level={4} /> - <DxcDropdown label="Actived" options={options} onSelectOption={(value) => {}} /> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <Title title="Active" theme="light" level={4} /> + <DxcDropdown label="Active" options={options} onSelectOption={() => {}} /> </ExampleContainer> <ExampleContainer> <Title title="Disabled" theme="light" level={4} /> - <DxcDropdown label="Disabled" options={options} onSelectOption={(value) => {}} disabled /> + <DxcDropdown label="Disabled" options={options} onSelectOption={() => {}} disabled /> </ExampleContainer> <ExampleContainer> <Title title="Caret hidden" theme="light" level={4} /> - <DxcDropdown label="Caret hidden" options={options} onSelectOption={(value) => {}} caretHidden /> + <DxcDropdown label="Caret hidden" options={options} onSelectOption={() => {}} caretHidden /> </ExampleContainer> <ExampleContainer> <Title title="With icon before" theme="light" level={4} /> - <DxcDropdown label="Icon before" options={options} onSelectOption={(value) => {}} icon={iconSVG} /> + <DxcDropdown label="Icon before" options={options} onSelectOption={() => {}} icon={iconSVG} /> </ExampleContainer> <ExampleContainer> <Title title="With icon after" theme="light" level={4} /> <DxcDropdown label="Icon after" options={options} - onSelectOption={(value) => {}} + onSelectOption={() => {}} icon="shopping_cart" iconPosition="after" /> </ExampleContainer> <ExampleContainer> <Title title="Only icon" theme="light" level={4} /> - <DxcDropdown options={options} onSelectOption={(value) => {}} icon={iconSVG} /> + <DxcDropdown options={options} onSelectOption={() => {}} icon={iconSVG} /> </ExampleContainer> <ExampleContainer> <Title title="Only icon without caret" theme="light" level={4} /> - <DxcDropdown options={options} onSelectOption={(value) => {}} icon="menu" caretHidden /> + <DxcDropdown options={options} onSelectOption={() => {}} icon="menu" caretHidden /> </ExampleContainer> <ExampleContainer> <Title title="Large icon (SVG)" theme="light" level={4} /> - <DxcDropdown label="Large icon" options={options} onSelectOption={(value) => {}} icon={iconSVGLarge} /> + <DxcDropdown label="Large icon" options={options} onSelectOption={() => {}} icon={iconSVGLarge} /> </ExampleContainer> <ExampleContainer> <Title title="Large icon (image)" theme="light" level={4} /> - <DxcDropdown label="Large icon" options={options} onSelectOption={(value) => {}} icon="menu" /> + <DxcDropdown label="Large icon" options={options} onSelectOption={() => {}} icon="menu" /> </ExampleContainer> <ExampleContainer> <Title title="Disabled with icon" theme="light" level={4} /> - <DxcDropdown - label="Disabled with icon" - options={options} - onSelectOption={(value) => {}} - icon={iconSVG} - disabled - /> + <DxcDropdown label="Disabled with icon" options={options} onSelectOption={() => {}} icon={iconSVG} disabled /> </ExampleContainer> <ExampleContainer> <Title title="Ellipsis" theme="light" level={4} /> <DxcDropdown label="Very long text in dropdown button" options={options} - onSelectOption={(value) => {}} + onSelectOption={() => {}} icon={iconSVG} size="medium" /> @@ -164,68 +158,56 @@ const Dropdown = () => ( <Title title="Margins" theme="light" level={2} /> <ExampleContainer> <Title title="Xxsmall" theme="light" level={4} /> - <DxcDropdown label="Xxsmall" options={options} onSelectOption={(value) => {}} icon={iconSVG} margin="xxsmall" /> + <DxcDropdown label="Xxsmall" options={options} onSelectOption={() => {}} icon={iconSVG} margin="xxsmall" /> </ExampleContainer> <ExampleContainer> <Title title="Xsmall" theme="light" level={4} /> - <DxcDropdown label="Xsmall" options={options} onSelectOption={(value) => {}} icon={iconSVG} margin="xsmall" /> + <DxcDropdown label="Xsmall" options={options} onSelectOption={() => {}} icon={iconSVG} margin="xsmall" /> </ExampleContainer> <ExampleContainer> <Title title="Small" theme="light" level={4} /> - <DxcDropdown label="Small" options={options} onSelectOption={(value) => {}} icon={iconSVG} margin="small" /> + <DxcDropdown label="Small" options={options} onSelectOption={() => {}} icon={iconSVG} margin="small" /> </ExampleContainer> <ExampleContainer> <Title title="Medium" theme="light" level={4} /> - <DxcDropdown label="Medium" options={options} onSelectOption={(value) => {}} icon={iconSVG} margin="medium" /> + <DxcDropdown label="Medium" options={options} onSelectOption={() => {}} icon={iconSVG} margin="medium" /> </ExampleContainer> <ExampleContainer> <Title title="Large" theme="light" level={4} /> - <DxcDropdown label="Large" options={options} onSelectOption={(value) => {}} icon={iconSVG} margin="large" /> + <DxcDropdown label="Large" options={options} onSelectOption={() => {}} icon={iconSVG} margin="large" /> </ExampleContainer> <ExampleContainer> <Title title="Xlarge" theme="light" level={4} /> - <DxcDropdown label="Xlarge" options={options} onSelectOption={(value) => {}} icon={iconSVG} margin="xlarge" /> + <DxcDropdown label="Xlarge" options={options} onSelectOption={() => {}} icon={iconSVG} margin="xlarge" /> </ExampleContainer> <ExampleContainer> <Title title="Xxlarge" theme="light" level={4} /> - <DxcDropdown label="Xxlarge" options={options} onSelectOption={(value) => {}} icon={iconSVG} margin="xxlarge" /> + <DxcDropdown label="Xxlarge" options={options} onSelectOption={() => {}} icon={iconSVG} margin="xxlarge" /> </ExampleContainer> <Title title="Sizes" theme="light" level={2} /> <ExampleContainer> <Title title="Small" theme="light" level={4} /> - <DxcDropdown label="Small" options={options} onSelectOption={(value) => {}} icon={iconSVG} size="small" /> + <DxcDropdown label="Small" options={options} onSelectOption={() => {}} icon={iconSVG} size="small" /> </ExampleContainer> <ExampleContainer> <Title title="Medium" theme="light" level={4} /> - <DxcDropdown label="Medium" options={options} onSelectOption={(value) => {}} icon={iconSVG} size="medium" /> + <DxcDropdown label="Medium" options={options} onSelectOption={() => {}} icon={iconSVG} size="medium" /> </ExampleContainer> <ExampleContainer> <Title title="Large" theme="light" level={4} /> - <DxcDropdown label="Large" options={options} onSelectOption={(value) => {}} icon={iconSVG} size="large" /> + <DxcDropdown label="Large" options={options} onSelectOption={() => {}} icon={iconSVG} size="large" /> </ExampleContainer> <ExampleContainer> <Title title="FitContent" theme="light" level={4} /> - <DxcDropdown - label="FitContent" - options={options} - onSelectOption={(value) => {}} - icon={iconSVG} - size="fitContent" - /> + <DxcDropdown label="FitContent" options={options} onSelectOption={() => {}} icon={iconSVG} size="fitContent" /> </ExampleContainer> <ExampleContainer> <Title title="FillParent" theme="light" level={4} /> - <DxcDropdown - label="FillParent" - options={options} - onSelectOption={(value) => {}} - icon={iconSVG} - size="fillParent" - /> + <DxcDropdown label="FillParent" options={options} onSelectOption={() => {}} icon={iconSVG} size="fillParent" /> </ExampleContainer> <ExampleContainer expanded> <Title title="Opened menu" theme="light" level={4} /> - <DxcDropdown label="Label" options={options} onSelectOption={(value) => {}} margin={{ top: "xxlarge" }} /> + <DxcDropdown label="Label" options={options} onSelectOption={() => {}} margin={{ top: "xxlarge" }} /> </ExampleContainer> </> ); @@ -276,8 +258,8 @@ const DropdownListStates = () => { dropdownTriggerId="dtx1" iconsPosition="before" visualFocusIndex={-1} - menuItemOnClick={(value) => {}} - onKeyDown={(e) => {}} + menuItemOnClick={() => {}} + onKeyDown={() => {}} options={optionWithIcon} styles={{ width: 240 }} /> @@ -289,8 +271,8 @@ const DropdownListStates = () => { dropdownTriggerId="dtx2" iconsPosition="before" visualFocusIndex={-1} - menuItemOnClick={(value) => {}} - onKeyDown={(e) => {}} + menuItemOnClick={() => {}} + onKeyDown={() => {}} options={optionWithIcon} styles={{ width: 240 }} /> @@ -302,8 +284,8 @@ const DropdownListStates = () => { dropdownTriggerId="dtx3" iconsPosition="before" visualFocusIndex={0} - menuItemOnClick={(value) => {}} - onKeyDown={(e) => {}} + menuItemOnClick={() => {}} + onKeyDown={() => {}} options={options} styles={{ width: 240 }} /> @@ -316,8 +298,8 @@ const DropdownListStates = () => { dropdownTriggerId="dtx4" iconsPosition="before" visualFocusIndex={-1} - menuItemOnClick={(value) => {}} - onKeyDown={(e) => {}} + menuItemOnClick={() => {}} + onKeyDown={() => {}} options={optionsIcon} styles={{ width: 240 }} /> @@ -327,8 +309,8 @@ const DropdownListStates = () => { dropdownTriggerId="dtx5" iconsPosition="after" visualFocusIndex={-1} - menuItemOnClick={(value) => {}} - onKeyDown={(e) => {}} + menuItemOnClick={() => {}} + onKeyDown={() => {}} options={optionsIcon} styles={{ width: 240 }} /> @@ -344,7 +326,7 @@ const TooltipTitle = () => ( <DxcDropdown title="Show options" options={options} - onSelectOption={(value) => {}} + onSelectOption={() => {}} icon="menu" caretHidden margin="large" From fd8ba3179f7bab254ae2049636acd291e57d212a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Thu, 10 Apr 2025 11:03:35 +0200 Subject: [PATCH 5/6] Breadcrumbs documentation --- .../overview/BreadcrumbsOverviewPage.tsx | 72 +++++++++++++----- .../overview/images/breadcrumbs_anatomy.png | Bin 0 -> 18154 bytes 2 files changed, 52 insertions(+), 20 deletions(-) create mode 100644 apps/website/screens/components/breadcrumbs/overview/images/breadcrumbs_anatomy.png diff --git a/apps/website/screens/components/breadcrumbs/overview/BreadcrumbsOverviewPage.tsx b/apps/website/screens/components/breadcrumbs/overview/BreadcrumbsOverviewPage.tsx index e6d3689c1b..3196fad5e6 100644 --- a/apps/website/screens/components/breadcrumbs/overview/BreadcrumbsOverviewPage.tsx +++ b/apps/website/screens/components/breadcrumbs/overview/BreadcrumbsOverviewPage.tsx @@ -5,26 +5,50 @@ import DocFooter from "@/common/DocFooter"; import Example from "@/common/example/Example"; import collapsed from "./examples/collapsed"; import noRoot from "./examples/noRoot"; +import Image from "@/common/Image"; +import anatomy from "./images/breadcrumbs_anatomy.png"; const sections = [ { title: "Introduction", content: ( <DxcParagraph> - Breadcrumbs are a navigational component used in user interfaces to improve the user experience by providing a - clear path to previous steps or navigational levels. They typically display the user's current location within - the hierarchical structure of an application, allowing for easy navigation and improved orientation. + Breadcrumbs are a navigational component used in user interfaces to improve the user experience by providing a{" "} + <strong>clear path to previous steps or navigational levels</strong>. They typically display the user's current + location within the hierarchical structure of an application, allowing for easy navigation and improved + orientation. </DxcParagraph> ), }, + { + title: "Anatomy", + content: ( + <> + <Image src={anatomy} alt="Button's anatomy" /> + <DxcBulletedList type="number"> + <DxcBulletedList.Item> + <strong>Unvisited item:</strong> these are links that represent the navigational path taken by the user but + are not the current page + </DxcBulletedList.Item> + <DxcBulletedList.Item> + <strong>Divider:</strong> a visual element that complements the label, providing additional meaning or + enhancing recognition. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + <strong>Visited item:</strong> displays the textual action that the button is going to carry out. + </DxcBulletedList.Item> + </DxcBulletedList> + </> + ), + }, { title: "Collapsed breadcrumbs", content: ( <> <DxcParagraph> - When there are more than four items in the breadcrumbs, the component will collapse the items in a dropdown - menu to avoid overloading the interface. Users can click on the dropdown to view the hidden items and navigate - to the desired level. + When there are more than four items in the breadcrumbs, the component will{" "} + <strong>collapse the items in a dropdown menu</strong> to avoid overloading the interface. Users can click on + the dropdown to view the hidden items and navigate to the desired level. </DxcParagraph> <DxcParagraph> Although this can be configurable, we highly encourage our users to stick with the collapsing at five or more @@ -33,8 +57,8 @@ const sections = [ </DxcParagraph> <Example example={collapsed} /> <DxcParagraph> - Depending on the amount of available space, the collapsed breadcrumbs can be synthesized more by removing the - root element and displaying only the collapsed dropdown and the current page. + Depending on the amount of available space, the collapsed <strong>breadcrumbs can be synthesized more</strong>{" "} + by removing the root element and displaying only the collapsed dropdown and the current page. </DxcParagraph> <Example example={noRoot} /> <DxcParagraph>Be mindful of your user's cognitive load and collapse breadcrumbs appropriately.</DxcParagraph> @@ -46,28 +70,36 @@ const sections = [ content: ( <DxcBulletedList> <DxcBulletedList.Item> - Use breadcrumbs when there are more than two navigational levels within the same hierarchy to help users - easily navigate and understand their position. + Use breadcrumbs to <strong>support secondary navigation in hierarchical structures</strong>, helping users + understand where they are and how they got there. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + Always include the full path from the homepage or root section to the current page to provide meaningful + context. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + Display <strong>only one breadcrumb trail per page</strong> to avoid confusion and maintain a clear navigation + hierarchy. </DxcBulletedList.Item> <DxcBulletedList.Item> - Ensure each label of the breadcrumbs items is informative yet brief, providing users with a clear - understanding of where each link will take them without overwhelming them with too much text. + Make all breadcrumb items navigable except for the last one, which should reflect the current page and remain + non-interactive. </DxcBulletedList.Item> <DxcBulletedList.Item> - Always position breadcrumbs in the top left corner of the interface. + <strong>Keep labels concise</strong> and consistent with the destination page titles to avoid ambiguity. </DxcBulletedList.Item> <DxcBulletedList.Item> - Avoid overloading the component. Including too many items in the breadcrumbs increases the cognitive load of - the interface and can confuse users. We recommend using the collapsed version of the component when there are - more than four items. + <strong>Place breadcrumbs at the top of the page</strong>, just below the main navigation or header, to follow + common UI patterns and user expectations. </DxcBulletedList.Item> <DxcBulletedList.Item> - Don't use breadcrumbs to replace primary navigation or links, as they are intended to serve as a supplementary - navigation aid. + Avoid using breadcrumbs as a replacement for primary navigation—they are meant to complement it, not replace + menus or sidebars. </DxcBulletedList.Item> <DxcBulletedList.Item> - Refrain from using breadcrumbs to represent the sequence of steps to complete an action. Remember that it is a - navigation component through levels with an established hierarchy. + When truncating breadcrumbs due to space constraints,{" "} + <strong>prioritize showing the first and last items</strong> while collapsing the middle items with a clear + overflow mechanism. </DxcBulletedList.Item> </DxcBulletedList> ), diff --git a/apps/website/screens/components/breadcrumbs/overview/images/breadcrumbs_anatomy.png b/apps/website/screens/components/breadcrumbs/overview/images/breadcrumbs_anatomy.png new file mode 100644 index 0000000000000000000000000000000000000000..8c0d1c9e08df766ee80eb26d5bbe4e4dc1cb2e36 GIT binary patch literal 18154 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 B<L&?e literal 0 HcmV?d00001 From 76db9b457f339119ec17d148435213a168f7eab0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Fri, 11 Apr 2025 11:01:41 +0200 Subject: [PATCH 6/6] Breadcrumbs anatomy alt fix --- .../components/breadcrumbs/overview/BreadcrumbsOverviewPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/screens/components/breadcrumbs/overview/BreadcrumbsOverviewPage.tsx b/apps/website/screens/components/breadcrumbs/overview/BreadcrumbsOverviewPage.tsx index 3196fad5e6..5a3589e08a 100644 --- a/apps/website/screens/components/breadcrumbs/overview/BreadcrumbsOverviewPage.tsx +++ b/apps/website/screens/components/breadcrumbs/overview/BreadcrumbsOverviewPage.tsx @@ -24,7 +24,7 @@ const sections = [ title: "Anatomy", content: ( <> - <Image src={anatomy} alt="Button's anatomy" /> + <Image src={anatomy} alt="Breadcrumbs's anatomy" /> <DxcBulletedList type="number"> <DxcBulletedList.Item> <strong>Unvisited item:</strong> these are links that represent the navigational path taken by the user but