From a1b22b1f91e835ae3866791a224d9928378b5e19 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: Mon, 10 Mar 2025 12:46:49 +0100 Subject: [PATCH 1/5] Tooltip redesign --- .../website/pages/components/tooltip/code.tsx | 17 ++++++ .../pages/components/tooltip/index.tsx | 12 ++-- .../components/tooltip/specifications.tsx | 21 ------- .../pages/components/tooltip/usage.tsx | 21 ------- .../components/tooltip/TooltipPageLayout.tsx | 10 +--- .../tooltip/code/TooltipCodePage.tsx | 44 ++++++++------- .../TooltipOverviewPage.tsx} | 22 ++++---- .../images/tooltip_positions.png | Bin .../tooltip/specs/TooltipSpecsPage.tsx | 53 ------------------ .../tooltip/specs/images/tooltip_anatomy.png | Bin 8676 -> 0 bytes .../tooltip/specs/images/tooltip_specs.png | Bin 12170 -> 0 bytes packages/lib/src/tooltip/Tooltip.tsx | 25 ++++----- packages/lib/src/tooltip/types.tsx | 10 ++-- 13 files changed, 75 insertions(+), 160 deletions(-) create mode 100644 apps/website/pages/components/tooltip/code.tsx delete mode 100644 apps/website/pages/components/tooltip/specifications.tsx delete mode 100644 apps/website/pages/components/tooltip/usage.tsx rename apps/website/screens/components/tooltip/{usage/TooltipUsagePage.tsx => overview/TooltipOverviewPage.tsx} (85%) rename apps/website/screens/components/tooltip/{usage => overview}/images/tooltip_positions.png (100%) delete mode 100644 apps/website/screens/components/tooltip/specs/TooltipSpecsPage.tsx delete mode 100644 apps/website/screens/components/tooltip/specs/images/tooltip_anatomy.png delete mode 100644 apps/website/screens/components/tooltip/specs/images/tooltip_specs.png diff --git a/apps/website/pages/components/tooltip/code.tsx b/apps/website/pages/components/tooltip/code.tsx new file mode 100644 index 0000000000..85b2f9f2ad --- /dev/null +++ b/apps/website/pages/components/tooltip/code.tsx @@ -0,0 +1,17 @@ +import Head from "next/head"; +import type { ReactElement } from "react"; +import TooltipPageLayout from "screens/components/tooltip/TooltipPageLayout"; +import TooltipCodePage from "screens/components/tooltip/code/TooltipCodePage"; + +const Code = () => ( + <> + + Tooltip Code — Halstack Design System + + + +); + +Code.getLayout = (page: ReactElement) => {page}; + +export default Code; diff --git a/apps/website/pages/components/tooltip/index.tsx b/apps/website/pages/components/tooltip/index.tsx index eeddb42443..f3d1b7de16 100644 --- a/apps/website/pages/components/tooltip/index.tsx +++ b/apps/website/pages/components/tooltip/index.tsx @@ -1,21 +1,17 @@ import Head from "next/head"; import type { ReactElement } from "react"; import TooltipPageLayout from "screens/components/tooltip/TooltipPageLayout"; -import TooltipCodePage from "screens/components/tooltip/code/TooltipCodePage"; +import TooltipOverviewPage from "screens/components/tooltip/overview/TooltipOverviewPage"; -const Index = () => { - return ( +const Index = () => ( <> Tooltip — 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/tooltip/specifications.tsx b/apps/website/pages/components/tooltip/specifications.tsx deleted file mode 100644 index 839ce0a717..0000000000 --- a/apps/website/pages/components/tooltip/specifications.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import TooltipPageLayout from "screens/components/tooltip/TooltipPageLayout"; -import TooltipSpecsPage from "screens/components/tooltip/specs/TooltipSpecsPage"; - -const Specifications = () => { - return ( - <> - - Tooltip Specs — Halstack Design System - - - - ); -}; - -Specifications.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Specifications; diff --git a/apps/website/pages/components/tooltip/usage.tsx b/apps/website/pages/components/tooltip/usage.tsx deleted file mode 100644 index 7c9372ffc2..0000000000 --- a/apps/website/pages/components/tooltip/usage.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import TooltipPageLayout from "screens/components/tooltip/TooltipPageLayout"; -import TooltipUsagePage from "screens/components/tooltip/usage/TooltipUsagePage"; - -const Usage = () => { - return ( - <> - - Tooltip Usage — Halstack Design System - - - - ); -}; - -Usage.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Usage; diff --git a/apps/website/screens/components/tooltip/TooltipPageLayout.tsx b/apps/website/screens/components/tooltip/TooltipPageLayout.tsx index b0dfb1e923..3db94bd000 100644 --- a/apps/website/screens/components/tooltip/TooltipPageLayout.tsx +++ b/apps/website/screens/components/tooltip/TooltipPageLayout.tsx @@ -6,12 +6,8 @@ import { ReactNode } from "react"; const TooltipPageHeading = ({ children }: { children: ReactNode }) => { const tabs = [ - { label: "Code", path: "/components/tooltip" }, - { label: "Usage", path: "/components/tooltip/usage" }, - { - label: "Specifications", - path: "/components/tooltip/specifications", - }, + { label: "Overview", path: "/components/tooltip" }, + { label: "Code", path: "/components/tooltip/code" }, ]; return ( @@ -24,7 +20,7 @@ const TooltipPageHeading = ({ children }: { children: ReactNode }) => { over. They are typically employed to enhance user experience by offering brief and helpful descriptions, instructions or tips without cluttering the interface. - + {children} diff --git a/apps/website/screens/components/tooltip/code/TooltipCodePage.tsx b/apps/website/screens/components/tooltip/code/TooltipCodePage.tsx index 2f9ea1d1b4..3eb9afeeef 100644 --- a/apps/website/screens/components/tooltip/code/TooltipCodePage.tsx +++ b/apps/website/screens/components/tooltip/code/TooltipCodePage.tsx @@ -5,6 +5,7 @@ import DocFooter from "@/common/DocFooter"; import TableCode from "@/common/TableCode"; import basicUsage from "./examples/basicUsage"; import Example from "@/common/example/Example"; +import StatusBadge from "@/common/StatusBadge"; const sections = [ { @@ -21,16 +22,17 @@ const sections = [ - position - 'bottom' | 'top' | 'left' | 'right' - - - Preferred position for displaying the tooltip. It may adjust automatically based on available space. + + + children + - 'bottom' + React.ReactNode + Custom content inside the container. + - label @@ -41,12 +43,16 @@ const sections = [ - - children + position - React.ReactNode + 'bottom' | 'top' | 'left' | 'right' + + + Preferred position for displaying the tooltip. It may adjust automatically based on available space. + + + 'bottom' - Content in which the Tooltip will be displayed. - - @@ -63,15 +69,13 @@ const sections = [ }, ]; -const TooltipCodePage = () => { - return ( - - - - - - - ); -}; +const TooltipCodePage = () => ( + + + + + + +); export default TooltipCodePage; diff --git a/apps/website/screens/components/tooltip/usage/TooltipUsagePage.tsx b/apps/website/screens/components/tooltip/overview/TooltipOverviewPage.tsx similarity index 85% rename from apps/website/screens/components/tooltip/usage/TooltipUsagePage.tsx rename to apps/website/screens/components/tooltip/overview/TooltipOverviewPage.tsx index efb4f954a1..91ce6c9e93 100644 --- a/apps/website/screens/components/tooltip/usage/TooltipUsagePage.tsx +++ b/apps/website/screens/components/tooltip/overview/TooltipOverviewPage.tsx @@ -8,7 +8,7 @@ import Image from "@/common/Image"; const sections = [ { - title: "Usage", + title: "Introduction", subSections: [ { title: "Do's", @@ -68,15 +68,13 @@ const sections = [ }, ]; -const TooltipUsagePage = () => { - return ( - - - - - - - ); -}; +const TooltipOverviewPage = () => ( + + + + + + +); -export default TooltipUsagePage; +export default TooltipOverviewPage; diff --git a/apps/website/screens/components/tooltip/usage/images/tooltip_positions.png b/apps/website/screens/components/tooltip/overview/images/tooltip_positions.png similarity index 100% rename from apps/website/screens/components/tooltip/usage/images/tooltip_positions.png rename to apps/website/screens/components/tooltip/overview/images/tooltip_positions.png diff --git a/apps/website/screens/components/tooltip/specs/TooltipSpecsPage.tsx b/apps/website/screens/components/tooltip/specs/TooltipSpecsPage.tsx deleted file mode 100644 index 5b72ed4be6..0000000000 --- a/apps/website/screens/components/tooltip/specs/TooltipSpecsPage.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { DxcParagraph, DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react"; -import Image from "@/common/Image"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import Figure from "@/common/Figure"; -import DocFooter from "@/common/DocFooter"; -import tooltipAnatomy from "./images/tooltip_anatomy.png"; -import tooltipSpecs from "./images/tooltip_specs.png"; - -const sections = [ - { - title: "Specifications", - content: ( -
- Tooltip design specifications -
- ), - }, - { - title: "Anatomy", - content: ( - <> - Tooltip anatomy - - Container - Label - Chevron - - - ), - }, - { - title: "Design tokens", - content: ( - <> - This component currently has no design tokens. - - ), - }, -]; - -const TooltipSpecsPage = () => { - return ( - - - - - - - ); -}; - -export default TooltipSpecsPage; diff --git a/apps/website/screens/components/tooltip/specs/images/tooltip_anatomy.png b/apps/website/screens/components/tooltip/specs/images/tooltip_anatomy.png deleted file mode 100644 index 622bc9ecdcf019e57cf382e9d232482fd6bf3d94..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 8676 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 diff --git a/apps/website/screens/components/tooltip/specs/images/tooltip_specs.png b/apps/website/screens/components/tooltip/specs/images/tooltip_specs.png deleted file mode 100644 index c85c43c77522e4390b28daf91a71e5f9979af926..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 12170 zcmeHtXIN8d*KV+YGoXxvBZ5F?Wb8_jCN-iE91&1aLAp|sjkw_qx}9c*)jk z=g-PNgFv92f1S6u0s?JCgFsvE?2rbI#1IFYfS;d2&ff?Jfn*gVn-nO&a363`D*TGo zSx_xeWd_*U=4)ILp=J&Hy*s<&Y$<@9b(sZUN~=f z{`a43d&AzE?|75dzN6!ceKot8?Rg~W^_z$_ zb+hbaiZW&Qj{Ua#KAF<~CQyxNpW?vu?CC-WzV@Gmm_zhdH<9-|ZzlzCMX^muSv;y}|;kfUCb!Rr!3Wg6GEt2c#TB*w_t zS@5wF7l^P8?Wb&9E@>4lDGAcp{8Me0=der+ zRnJ^@QvgvicDp8C``Q|6<@MB++3E`w+_A^RSj8r0kOH=}Z)lgwzS$*huM9TXjSyf8?7{Qa$#azjxcbY3c zKS=+wr9-l#3hZqE&(6u$8e1F2K2<(ATrMNLa`Vv0w1guc@3tS4?j}e^jd^_wna8(m6W{iQl?U?Ts$T4xpMsmFO zfKFWevVGq`6cu@{z`SXB5)SfYJrpsfpYe{j8_g{`ZF}?n6?ywU@;AcNOpg1h<%1jV z9agwHi{~x4`H_n4TZa77SzFTmT?%=JKiM@k}RmPnhfRkXux1v#TQ+r_g&`ekXEc52VX!91lzl9 znb}XsF|&aUL2um7$S#R&;uenDzr3^aFTg_AY+Zv93x@*W_3j>yD`wHK5_V;Mk!V$$&c-G z5Kn|n_fv?)`)i0jm2RDbwpL8z>u%EeIW|)5=igmNt(xl8LkEkWX%)YN@_UWu%UZ8D z)>mx2h<0X<`uChOVi-n&5iv+9{T-5pDFU!zeiqgGJ75_Op9%ylXyRobcqY9=XLoLc zAktrJ2`#PHfQfS5EWDP}8m01pE+&h`0ry-yJhdZ~JS>u)x9-wI)8-ZTL4cJczUKwN zTluQ;puIj8!0<_z2UcH^_3~vWZi~HEb~S&HOBuC8X0MXW)x%&%e5KU{M>ft2H=9wf1rw| zNz$*$Y)r@j9}y=rPlRukDQi_gMpr||siO6*4d%d#W-GgXGr3WQ_)DN(YF$Y#;_ovE zN*gX2QdSU8dx5Tc&7Nxi^%dE>B~#5*8K0@T-vzfep5{4NJHSx8&kI@^y!Q}tdM{=$ zQ0bmq;)U<=q!kh4ukW;477rgD+66XKfozV+PxL<1N$R zbE^B;qV=nwtLlJnoX^nc$-cw;^5Pt6UAzgo8I^SWO;&L2htZhXc@J-�!99U1pcK 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 diff --git a/packages/lib/src/tooltip/Tooltip.tsx b/packages/lib/src/tooltip/Tooltip.tsx index ea1fdab172..da16e70fbd 100644 --- a/packages/lib/src/tooltip/Tooltip.tsx +++ b/packages/lib/src/tooltip/Tooltip.tsx @@ -1,5 +1,4 @@ import styled from "styled-components"; -import CoreTokens from "../common/coreTokens"; import TooltipPropsType, { TooltipWrapperProps } from "./types"; import { useContext } from "react"; import { Root, Trigger, Portal, Arrow, Content } from "@radix-ui/react-tooltip"; @@ -77,14 +76,14 @@ const StyledTooltipContent = styled(Content)` const TooltipContainer = styled.div` box-sizing: border-box; - max-width: 242px; - border-radius: 4px; - border-color: ${CoreTokens.color_grey_800}; - padding: 8px 12px; - font-size: ${CoreTokens.type_scale_01}; - font-family: ${CoreTokens.type_sans}; - color: ${CoreTokens.color_white}; - background-color: ${CoreTokens.color_grey_800}; + max-width: 271px; + border-radius: var(--border-radius-s); + background-color: var(--color-bg-neutral-stronger); + padding: var(--spacing-padding-xs) var(--spacing-padding-s); + color: var(--color-fg-neutral-bright); + font-family: var(--typography-font-family); + font-size: var(--typography-label-s); + font-weight: var(--typography-label-regular); overflow-wrap: break-word; `; @@ -99,17 +98,17 @@ const triangleIcon = ( > ); export const Tooltip = ({ + children, + hasAdditionalContainer, label, - hasAdditionalContainer = false, position = "bottom", - children, -}: { hasAdditionalContainer?: boolean } & TooltipPropsType): JSX.Element => { +}: { hasAdditionalContainer?: boolean } & TooltipPropsType) => { const hasTooltip = useContext(TooltipContext); return ( diff --git a/packages/lib/src/tooltip/types.tsx b/packages/lib/src/tooltip/types.tsx index 541c7d71ef..c1486a47bd 100644 --- a/packages/lib/src/tooltip/types.tsx +++ b/packages/lib/src/tooltip/types.tsx @@ -2,22 +2,22 @@ import { ReactNode } from "react"; type Props = { /** - * Preferred position for displaying the tooltip. It may adjust automatically based on available space. + * Content in which the Tooltip will be displayed. */ - position?: "bottom" | "top" | "left" | "right"; + children: ReactNode; /** * Text to be displayed inside the tooltip. */ label?: string; /** - * Content in which the Tooltip will be displayed. + * Preferred position for displaying the tooltip. It may adjust automatically based on available space. */ - children: ReactNode; + position?: "bottom" | "top" | "left" | "right"; }; export type TooltipWrapperProps = { - condition?: boolean; children: ReactNode; + condition?: boolean; label?: string; }; From bf096c865859b73b65c04343d2bedfd15ed26eda 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, 19 Mar 2025 12:49:47 +0100 Subject: [PATCH 2/5] Stashed changes --- .../pages/components/tooltip/index.tsx | 6 +- .../badge/overview/BadgeOverviewPage.tsx | 174 ++++++++++++++++++ .../overview/ContextualMenuOverviewPage.tsx | 141 ++++++++++++++ .../overview/StatusLightOverviewPage.tsx | 137 ++++++++++++++ .../components/tooltip/TooltipPageLayout.tsx | 3 +- .../tooltip/code/TooltipCodePage.tsx | 8 + 6 files changed, 465 insertions(+), 4 deletions(-) create mode 100644 apps/website/screens/components/badge/overview/BadgeOverviewPage.tsx create mode 100644 apps/website/screens/components/contextual-menu/overview/ContextualMenuOverviewPage.tsx create mode 100644 apps/website/screens/components/status-light/overview/StatusLightOverviewPage.tsx diff --git a/apps/website/pages/components/tooltip/index.tsx b/apps/website/pages/components/tooltip/index.tsx index f3d1b7de16..6b4292b316 100644 --- a/apps/website/pages/components/tooltip/index.tsx +++ b/apps/website/pages/components/tooltip/index.tsx @@ -3,14 +3,16 @@ import type { ReactElement } from "react"; import TooltipPageLayout from "screens/components/tooltip/TooltipPageLayout"; import TooltipOverviewPage from "screens/components/tooltip/overview/TooltipOverviewPage"; -const Index = () => ( +const Index = () => { + return ( <> Tooltip — Halstack Design System - + ); +}; Index.getLayout = (page: ReactElement) => {page}; diff --git a/apps/website/screens/components/badge/overview/BadgeOverviewPage.tsx b/apps/website/screens/components/badge/overview/BadgeOverviewPage.tsx new file mode 100644 index 0000000000..f5b3a8bb3b --- /dev/null +++ b/apps/website/screens/components/badge/overview/BadgeOverviewPage.tsx @@ -0,0 +1,174 @@ +import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react"; +import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; +import QuickNavContainer from "@/common/QuickNavContainer"; +import DocFooter from "@/common/DocFooter"; +import Image from "@/common/Image"; +import notification from "./examples/notification"; +import contextual from "./examples/contextual"; +import anatomy from "./images/badge_anatomy.png"; +import Example from "@/common/example/Example"; + +const sections = [ + { + title: "Introduction", + content: ( + + Being a non-clickable UI element, the badge serves the purpose of highlighting status, categories or key + information within an interface. Designed for clarity and flexibility, the badge seamlessly integrates with + different layouts while maintaining consistency. It supports various styles to adapt to diverse use cases + without overwhelming the interface and it can be found in combination with other components, such as navtabs. + + ), + }, + { + title: "Anatomy", + content: ( + <> + Badge's anatomy + + + Container: it's the area that holds the badge's content, defining its shape, size and + background while ensuring proper visibility within the interface. + + + Semantic categorization: a visual element that complements the label, providing additional + meaning or enhancing recognition. + + + Label: displays the textual content of the badge, conveying status, category or key + information. + + + + ), + }, + { + title: "Variants", + content: ( + + The Badge component has two distinct variants, each serving specific purposes within our interface. + + ), + subSections: [ + { + title: "Notification badge", + content: ( + <> + + The notification badge is a non-interactive component that serves as an informative indicator, typically + used to display counts or alerts, such as the number of unread messages or missed notifications. + + + + This notification badge allows label, though it is not not mandatory to use it. You may want to use the + label to display the number of notifications missed, or just the empty badge to show that some changes + have been made to a certain section of the interface. + + + Only one color is allowed for this badge, which is red, and cannot be changed by any means. + + + ), + }, + { + title: "Contextual badge", + content: ( + <> + + Designed mainly for data visualization interfaces, the contextual variant of the Badge component’s main + advantage lies in its ability to categorize content and represent specific information. It is + intentionally non-interactive and may contain icons strategically chosen to enhance the conveyed + information. + + + + The contextual badge is available in 8 different colors from the Halstack palette. This flexibility allows + the user to adapt the tag smoothly to diverse contexts: + + + + Non-semantic categorization: used in instances where the badge does not carry semantic + meaning, it can be employed in any color from the available palette. + + + Semantic categorization: when the badge conveys semantic information, specific semantic + colors are available: + + + Green: positive actions, such as approved, completed, success… + + Blue: informative actions, such as published, in use... + + Red: negative actions, such as error, rejection, incomplete... + + + Orange: alert actions, such as pending or paused actions... + + + + + + ), + }, + ], + }, + { + title: "Best practices", + content: ( + <> + + + Use badges to convey key information: notification badges are ideal for displaying counts, + such as unread messages or missed notifications, while contextual badges help indicate task statuses or + progress. + + + Leverage color for clarity: contextual badge colors can improve recognition and enhance the + user experience, especially in data-heavy interfaces with high cognitive load. + + + Keep labels short and meaningful: badge labels should be concise, ideally no more than + three words, to ensure quick comprehension. + + + Use badges to categorize content: contextual badges can help group-related elements, such + as team names, repositories, or file types, providing additional context. + + + Ensure consistent placement: establish clear guidelines for where badges appear in the + interface to maintain visual coherence and usability. + + + Avoid overuse: excessive badges can clutter the interface and reduce their effectiveness in + communicating key information. + + + Ensure clarity in data visualization: avoid mixing semantic and non-semantic contextual + badges within the same format to prevent confusion. + + + Avoid obstructing key content: badges should be placed thoughtfully to ensure they do not + interfere with essential information or interactions. + + + Use positive or neutral indicators: notification badges should typically display counts or + statuses without negative symbols to ensure clarity. + + + + ), + }, +]; + +const BadgeOverviewPage = () => { + return ( + + + + + + + ); +}; + +export default BadgeOverviewPage; diff --git a/apps/website/screens/components/contextual-menu/overview/ContextualMenuOverviewPage.tsx b/apps/website/screens/components/contextual-menu/overview/ContextualMenuOverviewPage.tsx new file mode 100644 index 0000000000..b2e4195fbf --- /dev/null +++ b/apps/website/screens/components/contextual-menu/overview/ContextualMenuOverviewPage.tsx @@ -0,0 +1,141 @@ +import { DxcParagraph, DxcFlex, DxcBulletedList } from "@dxc-technology/halstack-react"; +import DocFooter from "@/common/DocFooter"; +import QuickNavContainer from "@/common/QuickNavContainer"; +import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; +import Image from "@/common/Image"; +import anatomy from "./images/contextual-menu_anatomy.png"; + +const sections = [ + { + title: "Introduction", + content: ( + + This powerful component improves user experience by allowing users to{" "} + navigate through page-level content or choose from a list of actions while complementing the + general disposition of the main content within the interface. It also allows a wide range of possibilities when + it comes to placing content cohesively and comprehensively. To achieve this, it's important to understand how + the items in our contextual menu behave and interact with each other. + + ), + }, + { + title: "Anatomy", + content: ( + <> + Contextual menu's anatomy + + + Section title: a label that groups related menu items within a contextual menu, enhancing + organization and readability. + + + Container: the structural wrapper that holds all menu elements, ensuring proper alignment, + spacing, and visual consistency. + + + Group item: they are nests of other group items or individual items that are related to + each other and show indentation as they are unfolded. + + + Badge: a small visual indicator, often used to display counts, status updates or categories + within a menu item. + + + Single item: an actionable element within the menu that triggers navigation or an operation + when selected. + + + Expand/collapse Icon: a visual indicator for nested menus, allowing users to reveal or hide + subitems. + + + Icon: a graphical representation within a menu item that aids recognition and reinforces + meaning. + + + Section: they are a collection of group and single items within the menu that share a + certain relationship and have a title that describes them. + + + Divider: a subtle separator that groups related menu items and improves menu structure. + + + Scrollbar: appears when the menu content exceeds the container's height, enabling vertical + navigation. + + + + ), + }, + { + title: "Contextual menu and Sidenav", + content: ( + <> + + Although visually similar, the Sidenav component and the contextual menu differ significantly in + functionality. Our Sidenav is designed to provide a consistent and persistent navigation structure throughout + the application, allowing users to easily switch between different sections or pages within the app. + + + On the other hand, the contextual menu is more{" "} + context-sensitive, and appears in response to specific user actions, offering a set of + relevant options or actions that can be performed on the current page. This means that it{" "} + operates on a page level, so the component may appear or not depending on the specific needs + and requirements for each screen or interaction. + + + ), + }, + { + title: "Best practices", + content: ( + <> + + + Use meaningful icons: select icons that accurately represent menu items, ensuring clarity + and intuitive navigation. + + + Align properly: position the contextual menu to the left or right, avoiding placement in + the center to prevent obstruction of main content. + + + Enhance navigation with hierarchy: structure menu items using different levels to maintain + logical organization. + + + Use badges for status indication: incorporate a Badge component to display status updates, + counts or categories for navigable sections. + + + Default selection: when pre-selecting an option, try to limit it to the first menu item to + maintain intuitive user interactions. + + + Avoid deep hierarchies: limit navigation depth to a maximum of three levels to prevent + excessive indentation and complexity. + + + Restrict icon usage: use icons only at the first navigation level to maintain readability + and avoid visual clutter. + + + Don't overload with icons: too many icons can create confusion rather than improve + usability. Keep them purposeful and minimal. + + + + ), + }, +]; + +const ContextualMenuOverviewPage = () => ( + + + + + + +); + +export default ContextualMenuOverviewPage; diff --git a/apps/website/screens/components/status-light/overview/StatusLightOverviewPage.tsx b/apps/website/screens/components/status-light/overview/StatusLightOverviewPage.tsx new file mode 100644 index 0000000000..71f8b50399 --- /dev/null +++ b/apps/website/screens/components/status-light/overview/StatusLightOverviewPage.tsx @@ -0,0 +1,137 @@ +import { DxcParagraph, DxcBulletedList, DxcFlex, DxcTable } 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 HeaderDescriptionCell from "@/common/HeaderDescriptionCell"; +import variants from "./example/variants"; +import anatomy from "./images/status_light_anatomy.png"; +import Image from "@/common/Image"; + +const sections = [ + { + title: "Introduction", + content: ( + + Being a non-clickable UI element, the status light is used to provide a quick, at-a-glance + indication of system states, alerts, or conditions within an interface. Designed for clarity and instant + recognition, it seamlessly integrates into various layouts without adding cognitive load. Status lights follow a + consistent color-coded system to ensure users can easily interpret their meaning. They are often used alongside + other components, such as tables, accordions, or dashboards, to enhance visibility and provide contextual + awareness. + + ), + }, + { + title: "Anatomy", + content: ( + <> + Status light's anatomy + + + Status light: the core visual element of a status light, designed as a dot for clarity and + easy recognition. + + + Label: a short text description alongside the status light to provide additional context. + + + + ), + }, + { + title: "Variants", + content: ( + <> + + The status light component is available in five semantic variants, each represented by a distinct color. These + colors ensure clear communication of different states. + + + Additionally, the component comes in three different sizes, allowing for flexibility across various layouts + and screen sizes while maintaining readability and visual consistency. + + + + + + Variant + Description + + + + + + Default + + For neutral statuses, like archived, draft, paused... + + + + Info + + For live statuses, like active, in use, uploaded... + + + + Success + + For positive statuses, like finished, approved, completed... + + + + Warning + + For pending or critical statuses, like scheduled, in progress, processing... + + + + Error + + For negative statuses, like incomplete, rejected, failed... + + + + + ), + }, + { + title: "Best practices", + content: ( + + + Ensure semantic accuracy: always match each status light color with the correct meaning to + maintain clarity and avoid misinterpretation. + + + Optimize for different screen sizes: Select the appropriate size to ensure visibility and + legibility across various layouts. + + + Use clear and concise labels: Keep them brief and ensure they accurately describe the current + state. + + + Combine with badges carefully: status lights and semantic badges can only be used together if + one of them does not use a semantic color or if their semantic colors do not contradict each other. This + prevents misinterpretation and maintains clarity in data visualizations such as tables, charts, or grids. + + + Use strategically: overusing status lights in interfaces with high cognitive load can + overwhelm users and disrupt readability. Use them only where they add real value. + + + ), + }, +]; + +const StatusLightOverviewPage = () => ( + + + + + + +); + +export default StatusLightOverviewPage; diff --git a/apps/website/screens/components/tooltip/TooltipPageLayout.tsx b/apps/website/screens/components/tooltip/TooltipPageLayout.tsx index 3db94bd000..98119811df 100644 --- a/apps/website/screens/components/tooltip/TooltipPageLayout.tsx +++ b/apps/website/screens/components/tooltip/TooltipPageLayout.tsx @@ -17,8 +17,7 @@ const TooltipPageHeading = ({ children }: { children: ReactNode }) => { A tooltip is a descriptive or supplementary element that is displayed when an object is focused or hovered - over. They are typically employed to enhance user experience by offering brief and helpful descriptions, - instructions or tips without cluttering the interface. + over. diff --git a/apps/website/screens/components/tooltip/code/TooltipCodePage.tsx b/apps/website/screens/components/tooltip/code/TooltipCodePage.tsx index 3eb9afeeef..1dcf8658bb 100644 --- a/apps/website/screens/components/tooltip/code/TooltipCodePage.tsx +++ b/apps/website/screens/components/tooltip/code/TooltipCodePage.tsx @@ -22,6 +22,7 @@ const sections = [ +<<<<<<< Updated upstream @@ -32,6 +33,13 @@ const sections = [ React.ReactNode Custom content inside the container. +======= + children + + React.ReactNode + + Content in which the Tooltip will be displayed. +>>>>>>> Stashed changes - From 023789b7274242f124ad47e21c89b9faea3896cc 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, 19 Mar 2025 13:01:30 +0100 Subject: [PATCH 3/5] Tooltip doc updates --- .../website/pages/components/tooltip/code.tsx | 2 +- .../pages/components/tooltip/index.tsx | 2 +- .../tooltip/code/TooltipCodePage.tsx | 8 -- .../tooltip/overview/TooltipOverviewPage.tsx | 120 +++++++++++------- .../overview/images/tooltip_anatomy.png | Bin 0 -> 13814 bytes 5 files changed, 75 insertions(+), 57 deletions(-) create mode 100644 apps/website/screens/components/tooltip/overview/images/tooltip_anatomy.png diff --git a/apps/website/pages/components/tooltip/code.tsx b/apps/website/pages/components/tooltip/code.tsx index 85b2f9f2ad..12ac3c2691 100644 --- a/apps/website/pages/components/tooltip/code.tsx +++ b/apps/website/pages/components/tooltip/code.tsx @@ -6,7 +6,7 @@ import TooltipCodePage from "screens/components/tooltip/code/TooltipCodePage"; const Code = () => ( <> - Tooltip Code — Halstack Design System + Tooltip code — Halstack Design System diff --git a/apps/website/pages/components/tooltip/index.tsx b/apps/website/pages/components/tooltip/index.tsx index 6b4292b316..01f31ebe28 100644 --- a/apps/website/pages/components/tooltip/index.tsx +++ b/apps/website/pages/components/tooltip/index.tsx @@ -9,7 +9,7 @@ const Index = () => { Tooltip — Halstack Design System - + ); }; diff --git a/apps/website/screens/components/tooltip/code/TooltipCodePage.tsx b/apps/website/screens/components/tooltip/code/TooltipCodePage.tsx index 1dcf8658bb..3eb9afeeef 100644 --- a/apps/website/screens/components/tooltip/code/TooltipCodePage.tsx +++ b/apps/website/screens/components/tooltip/code/TooltipCodePage.tsx @@ -22,7 +22,6 @@ const sections = [ -<<<<<<< Updated upstream @@ -33,13 +32,6 @@ const sections = [ React.ReactNode Custom content inside the container. -======= - children - - React.ReactNode - - Content in which the Tooltip will be displayed. ->>>>>>> Stashed changes - diff --git a/apps/website/screens/components/tooltip/overview/TooltipOverviewPage.tsx b/apps/website/screens/components/tooltip/overview/TooltipOverviewPage.tsx index 91ce6c9e93..f1f1901da5 100644 --- a/apps/website/screens/components/tooltip/overview/TooltipOverviewPage.tsx +++ b/apps/website/screens/components/tooltip/overview/TooltipOverviewPage.tsx @@ -5,67 +5,93 @@ import DocFooter from "@/common/DocFooter"; import positions from "./images/tooltip_positions.png"; import Figure from "@/common/Figure"; import Image from "@/common/Image"; +import anatomy from "./images/tooltip_anatomy.png"; const sections = [ { title: "Introduction", - subSections: [ - { - title: "Do's", - content: ( - - - Use tooltips when sharing valuable information as clearly and concisely as possible. - - - Describe icons by using tooltips. Tooltips effectively provide context and clarity for components without - labels, delivering helpful information directly to the user when they hover over or focus on an icon. - - - Maintain consistency in the positioning of tooltips throughout the user interface. - - - Use clear and accurate phrasing when placing the text inside a tooltip. - - - ), - }, - { - title: "Don'ts", - content: ( - - - Avoid using tooltips to convey crucial information. This type of information must always be present, not - only when the user hovers over or focuses on a component. - - - Don't place tooltips where they might cover or obscure important information or critical areas of the - interface that need to remain visible at all times. - - Don't use tooltips to communicate error messages. - - Avoid using tooltips in interfaces where there is sufficient space to display additional information - directly, without the need for hiding it. - - - ), - }, - ], + content: ( + + The tooltip component{" "} + provides contextual information when users hover over, focus on, or interact with an element. + It enhances usability by offering additional details without cluttering the interface. Tooltips are especially + useful for clarifying icons, abbreviations, or complex functionalities, ensuring users can access helpful + explanations without disrupting their workflow. + + ), + }, + { + title: "Anatomy", + content: ( + <> + Tooltip's anatomy + + + Container: it's the structure that holds the component's content. It appears near the + target element when triggered and provides a contrasting background to ensure readability. + + + Icon: a small directional indicator, often in the form of a triangle or arrow, that + visually connects the tooltip to the element it describes, reinforcing the relationship between them. + + + Label: the text content inside the component that provides additional context or + information about the associated element, ensuring clarity without taking up permanent screen space. + + + + ), }, { - title: "Position", + title: "Placing tooltips", content: ( <> Depending on the tooltip's placement relative to the object it describes, there are four possible - configurations: top, right, bottom and left. + configurations: top, right, bottom, and{" "} + left. -
- Tooltip positions -
+ Tooltip positions ), }, + { + title: "Best practices", + content: ( + + + Use tooltips for clarification, not essential information: tooltips should provide additional + context for UI elements but should not contain crucial instructions or actions users must take to complete a + task. + + + Keep content short and clear: avoid long sentences or excessive details. The tooltip should + be a quick reference, not a replacement for proper UI labels or descriptions. + + + Ensure tooltips are accessible: they should be triggered not only on hover but also on + keyboard focus so that users navigating with assistive technologies can access them. + + + Place tooltips thoughtfully: they should not obstruct important content or interactive + elements. Position them near the element they describe while maintaining readability. + + + Avoid excessive tooltips: overuse can clutter the interface and become distracting. If too + many tooltips are needed, consider improving the overall UI clarity instead. + + + Use appropriate dismissal behavior: tooltips should disappear when users move away from the + trigger but remain visible long enough to be read comfortably. A short delay before appearing can prevent + accidental activations. + + + Do not use tooltips for critical messages: warnings, errors, or essential system feedback + should be displayed using more persistent components like alerts, modals, or inline messages. + + + ), + }, ]; const TooltipOverviewPage = () => ( diff --git a/apps/website/screens/components/tooltip/overview/images/tooltip_anatomy.png b/apps/website/screens/components/tooltip/overview/images/tooltip_anatomy.png new file mode 100644 index 0000000000000000000000000000000000000000..0c8579d9c2c12e9b0b6d2c79ea601c47dd20523b GIT binary patch literal 13814 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 literal 0 HcmV?d00001 From 127dad21f73ec35aa0042a4a1708670ed7a8f168 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, 19 Mar 2025 13:53:33 +0100 Subject: [PATCH 4/5] Folder name updated --- .../status-light/overview/StatusLightOverviewPage.tsx | 2 +- .../status-light/overview/{example => examples}/variants.ts | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename apps/website/screens/components/status-light/overview/{example => examples}/variants.ts (100%) diff --git a/apps/website/screens/components/status-light/overview/StatusLightOverviewPage.tsx b/apps/website/screens/components/status-light/overview/StatusLightOverviewPage.tsx index 71f8b50399..ce27671cca 100644 --- a/apps/website/screens/components/status-light/overview/StatusLightOverviewPage.tsx +++ b/apps/website/screens/components/status-light/overview/StatusLightOverviewPage.tsx @@ -4,7 +4,7 @@ import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import DocFooter from "@/common/DocFooter"; import Example from "@/common/example/Example"; import HeaderDescriptionCell from "@/common/HeaderDescriptionCell"; -import variants from "./example/variants"; +import variants from "./examples/variants"; import anatomy from "./images/status_light_anatomy.png"; import Image from "@/common/Image"; diff --git a/apps/website/screens/components/status-light/overview/example/variants.ts b/apps/website/screens/components/status-light/overview/examples/variants.ts similarity index 100% rename from apps/website/screens/components/status-light/overview/example/variants.ts rename to apps/website/screens/components/status-light/overview/examples/variants.ts From 7aa06c82c1a561d17d272789a9684630450e1a01 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, 19 Mar 2025 16:54:55 +0100 Subject: [PATCH 5/5] Changes based on feedback --- .../website/screens/components/tooltip/code/TooltipCodePage.tsx | 2 +- .../screens/components/tooltip/overview/TooltipOverviewPage.tsx | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/website/screens/components/tooltip/code/TooltipCodePage.tsx b/apps/website/screens/components/tooltip/code/TooltipCodePage.tsx index 3eb9afeeef..15f6175607 100644 --- a/apps/website/screens/components/tooltip/code/TooltipCodePage.tsx +++ b/apps/website/screens/components/tooltip/code/TooltipCodePage.tsx @@ -72,7 +72,7 @@ const sections = [ const TooltipCodePage = () => ( - + diff --git a/apps/website/screens/components/tooltip/overview/TooltipOverviewPage.tsx b/apps/website/screens/components/tooltip/overview/TooltipOverviewPage.tsx index f1f1901da5..991e221653 100644 --- a/apps/website/screens/components/tooltip/overview/TooltipOverviewPage.tsx +++ b/apps/website/screens/components/tooltip/overview/TooltipOverviewPage.tsx @@ -3,7 +3,6 @@ import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import DocFooter from "@/common/DocFooter"; import positions from "./images/tooltip_positions.png"; -import Figure from "@/common/Figure"; import Image from "@/common/Image"; import anatomy from "./images/tooltip_anatomy.png";