diff --git a/apps/website/pages/components/tooltip/code.tsx b/apps/website/pages/components/tooltip/code.tsx new file mode 100644 index 0000000000..12ac3c2691 --- /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..01f31ebe28 100644 --- a/apps/website/pages/components/tooltip/index.tsx +++ b/apps/website/pages/components/tooltip/index.tsx @@ -1,7 +1,7 @@ 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 ( @@ -9,13 +9,11 @@ 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/badge/overview/BadgeOverviewPage.tsx b/apps/website/screens/components/badge/overview/BadgeOverviewPage.tsx index 3e08f39142..f5b3a8bb3b 100644 --- a/apps/website/screens/components/badge/overview/BadgeOverviewPage.tsx +++ b/apps/website/screens/components/badge/overview/BadgeOverviewPage.tsx @@ -118,40 +118,40 @@ const sections = [ <> - Use badges to convey key information: Notification badges are ideal for displaying counts, + 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 + 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 + 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 + 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 + 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 + 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 + 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 + 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 + Use positive or neutral indicators: notification badges should typically display counts or statuses without negative symbols to ensure clarity. diff --git a/apps/website/screens/components/contextual-menu/overview/ContextualMenuOverviewPage.tsx b/apps/website/screens/components/contextual-menu/overview/ContextualMenuOverviewPage.tsx index 106f757706..b2e4195fbf 100644 --- a/apps/website/screens/components/contextual-menu/overview/ContextualMenuOverviewPage.tsx +++ b/apps/website/screens/components/contextual-menu/overview/ContextualMenuOverviewPage.tsx @@ -89,40 +89,42 @@ const sections = [ { 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. - - + <> + + + 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. + + + ), }, ]; diff --git a/apps/website/screens/components/status-light/overview/StatusLightOverviewPage.tsx b/apps/website/screens/components/status-light/overview/StatusLightOverviewPage.tsx index f4976e0778..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"; @@ -29,7 +29,7 @@ const sections = [ Status light's anatomy - Status light: the core visual element of a status light, designed as dot for clarity and + Status light: the core visual element of a status light, designed as a dot for clarity and easy recognition. 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 diff --git a/apps/website/screens/components/tooltip/TooltipPageLayout.tsx b/apps/website/screens/components/tooltip/TooltipPageLayout.tsx index b0dfb1e923..98119811df 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 ( @@ -21,10 +17,9 @@ 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. - + {children} diff --git a/apps/website/screens/components/tooltip/code/TooltipCodePage.tsx b/apps/website/screens/components/tooltip/code/TooltipCodePage.tsx index 2f9ea1d1b4..15f6175607 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/overview/TooltipOverviewPage.tsx b/apps/website/screens/components/tooltip/overview/TooltipOverviewPage.tsx new file mode 100644 index 0000000000..991e221653 --- /dev/null +++ b/apps/website/screens/components/tooltip/overview/TooltipOverviewPage.tsx @@ -0,0 +1,105 @@ +import { DxcParagraph, DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react"; +import QuickNavContainer from "@/common/QuickNavContainer"; +import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; +import DocFooter from "@/common/DocFooter"; +import positions from "./images/tooltip_positions.png"; +import Image from "@/common/Image"; +import anatomy from "./images/tooltip_anatomy.png"; + +const sections = [ + { + title: "Introduction", + 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: "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. + + 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 = () => ( + + + + + + +); + +export default 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 0000000000..0c8579d9c2 Binary files /dev/null and b/apps/website/screens/components/tooltip/overview/images/tooltip_anatomy.png differ 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 622bc9ecdc..0000000000 Binary files a/apps/website/screens/components/tooltip/specs/images/tooltip_anatomy.png and /dev/null differ 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 c85c43c775..0000000000 Binary files a/apps/website/screens/components/tooltip/specs/images/tooltip_specs.png and /dev/null differ diff --git a/apps/website/screens/components/tooltip/usage/TooltipUsagePage.tsx b/apps/website/screens/components/tooltip/usage/TooltipUsagePage.tsx deleted file mode 100644 index efb4f954a1..0000000000 --- a/apps/website/screens/components/tooltip/usage/TooltipUsagePage.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import { DxcParagraph, DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react"; -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"; - -const sections = [ - { - title: "Usage", - 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. - - - ), - }, - ], - }, - { - title: "Position", - content: ( - <> - - Depending on the tooltip's placement relative to the object it describes, there are four possible - configurations: top, right, bottom and left. - -
- Tooltip positions -
- - ), - }, -]; - -const TooltipUsagePage = () => { - return ( - - - - - - - ); -}; - -export default TooltipUsagePage; 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; };