Skip to content

Tooltip redesign #2182

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Mil4n0r merged 9 commits into from
Mar 19, 2025
Merged

Tooltip redesign #2182

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a1b22b1
Tooltip redesign
GomezIvann Mar 10, 2025
bf096c8
Stashed changes
GomezIvann Mar 19, 2025
90355b7
Merge branch 'master' into gomezivann/tooltip-redesign
GomezIvann Mar 19, 2025
023789b
Tooltip doc updates
GomezIvann Mar 19, 2025
9b65853
Merge branch 'master' into gomezivann/tooltip-redesign
GomezIvann Mar 19, 2025
127dad2
Folder name updated
GomezIvann Mar 19, 2025
4e783d0
Merge branch 'master' into gomezivann/tooltip-redesign
Mil4n0r Mar 19, 2025
7aa06c8
Changes based on feedback
GomezIvann Mar 19, 2025
9f055de
Merge branch 'gomezivann/tooltip-redesign' of https://github.com/dxc-…
GomezIvann Mar 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions apps/website/pages/components/tooltip/code.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = () => (
<>
<Head>
<title>Tooltip code — Halstack Design System</title>
</Head>
<TooltipCodePage />
</>
);

Code.getLayout = (page: ReactElement) => <TooltipPageLayout>{page}</TooltipPageLayout>;

export default Code;
8 changes: 3 additions & 5 deletions apps/website/pages/components/tooltip/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,19 @@
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 (
<>
<Head>
<title>Tooltip — Halstack Design System</title>
</Head>
<TooltipCodePage></TooltipCodePage>
<TooltipOverviewPage />
</>
);
};

Index.getLayout = function getLayout(page: ReactElement) {
return <TooltipPageLayout>{page}</TooltipPageLayout>;
};
Index.getLayout = (page: ReactElement) => <TooltipPageLayout>{page}</TooltipPageLayout>;

export default Index;
21 changes: 0 additions & 21 deletions apps/website/pages/components/tooltip/specifications.tsx
View file
Open in desktop

This file was deleted.

21 changes: 0 additions & 21 deletions apps/website/pages/components/tooltip/usage.tsx
View file
Open in desktop

This file was deleted.

18 changes: 9 additions & 9 deletions apps/website/screens/components/badge/overview/BadgeOverviewPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,40 +118,40 @@ const sections = [
<>
<DxcBulletedList>
<DxcBulletedList.Item>
<strong>Use badges to convey key information:</strong> Notification badges are ideal for displaying counts,
<strong>Use badges to convey key information:</strong> notification badges are ideal for displaying counts,
such as unread messages or missed notifications, while contextual badges help indicate task statuses or
progress.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Leverage color for clarity:</strong> Contextual badge colors can improve recognition and enhance the
<strong>Leverage color for clarity:</strong> contextual badge colors can improve recognition and enhance the
user experience, especially in data-heavy interfaces with high cognitive load.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Keep labels short and meaningful:</strong> Badge labels should be concise, ideally no more than
<strong>Keep labels short and meaningful:</strong> badge labels should be concise, ideally no more than
three words, to ensure quick comprehension.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Use badges to categorize content:</strong> Contextual badges can help group-related elements, such
<strong>Use badges to categorize content:</strong> contextual badges can help group-related elements, such
as team names, repositories, or file types, providing additional context.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Ensure consistent placement:</strong> Establish clear guidelines for where badges appear in the
<strong>Ensure consistent placement:</strong> establish clear guidelines for where badges appear in the
interface to maintain visual coherence and usability.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Avoid overuse:</strong> Excessive badges can clutter the interface and reduce their effectiveness in
<strong>Avoid overuse:</strong> excessive badges can clutter the interface and reduce their effectiveness in
communicating key information.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Ensure clarity in data visualization:</strong> Avoid mixing semantic and non-semantic contextual
<strong>Ensure clarity in data visualization:</strong> avoid mixing semantic and non-semantic contextual
badges within the same format to prevent confusion.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Avoid obstructing key content:</strong> Badges should be placed thoughtfully to ensure they do not
<strong>Avoid obstructing key content:</strong> badges should be placed thoughtfully to ensure they do not
interfere with essential information or interactions.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Use positive or neutral indicators:</strong> Notification badges should typically display counts or
<strong>Use positive or neutral indicators:</strong> notification badges should typically display counts or
statuses without negative symbols to ensure clarity.
</DxcBulletedList.Item>
</DxcBulletedList>
Expand Down
70 changes: 36 additions & 34 deletions apps/website/screens/components/contextual-menu/overview/ContextualMenuOverviewPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,40 +89,42 @@ const sections = [
{
title: "Best practices",
content: (
<DxcBulletedList>
<DxcBulletedList.Item>
<strong>Use meaningful icons:</strong> Select icons that accurately represent menu items, ensuring clarity and
intuitive navigation.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Align properly:</strong> position the contextual menu to the left or right, avoiding placement in the
center to prevent obstruction of main content.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Enhance navigation with hierarchy:</strong> structure menu items using different levels to maintain
logical organization.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Use badges for status indication:</strong> incorporate a Badge component to display status updates,
counts or categories for navigable sections.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Default selection:</strong> when pre-selecting an option, try to limit it to the first menu item to
maintain intuitive user interactions.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Avoid deep hierarchies:</strong> limit navigation depth to a maximum of three levels to prevent
excessive indentation and complexity.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Restrict icon usage:</strong> use icons only at the first navigation level to maintain readability and
avoid visual clutter.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Don't overload with icons:</strong> too many icons can create confusion rather than improve usability.
Keep them purposeful and minimal.
</DxcBulletedList.Item>
</DxcBulletedList>
<>
<DxcBulletedList type="number">
<DxcBulletedList.Item>
<strong>Use meaningful icons:</strong> select icons that accurately represent menu items, ensuring clarity
and intuitive navigation.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Align properly:</strong> position the contextual menu to the left or right, avoiding placement in
the center to prevent obstruction of main content.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Enhance navigation with hierarchy:</strong> structure menu items using different levels to maintain
logical organization.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Use badges for status indication:</strong> incorporate a Badge component to display status updates,
counts or categories for navigable sections.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Default selection:</strong> when pre-selecting an option, try to limit it to the first menu item to
maintain intuitive user interactions.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Avoid deep hierarchies:</strong> limit navigation depth to a maximum of three levels to prevent
excessive indentation and complexity.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Restrict icon usage:</strong> use icons only at the first navigation level to maintain readability
and avoid visual clutter.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Don't overload with icons:</strong> too many icons can create confusion rather than improve
usability. Keep them purposeful and minimal.
</DxcBulletedList.Item>
</DxcBulletedList>
</>
),
},
];
Expand Down
4 changes: 2 additions & 2 deletions apps/website/screens/components/status-light/overview/StatusLightOverviewPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand All @@ -29,7 +29,7 @@ const sections = [
<Image src={anatomy} alt="Status light's anatomy" />
<DxcBulletedList type="number">
<DxcBulletedList.Item>
<strong>Status light:</strong> the core visual element of a status light, designed as dot for clarity and
<strong>Status light:</strong> the core visual element of a status light, designed as a dot for clarity and
easy recognition.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Expand Down
0 ...status-light/overview/example/variants.ts → ...tatus-light/overview/examples/variants.ts
View file
Open in desktop
File renamed without changes.
13 changes: 4 additions & 9 deletions apps/website/screens/components/tooltip/TooltipPageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -21,10 +17,9 @@ const TooltipPageHeading = ({ children }: { children: ReactNode }) => {
<ComponentHeading name="Tooltip" />
<DxcParagraph>
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.
</DxcParagraph>
<TabsPageHeading tabs={tabs}></TabsPageHeading>
<TabsPageHeading tabs={tabs} />
</DxcFlex>
</PageHeading>
{children}
Expand Down
44 changes: 24 additions & 20 deletions apps/website/screens/components/tooltip/code/TooltipCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
{
Expand All @@ -21,16 +22,17 @@ const sections = [
</thead>
<tbody>
<tr>
<td>position</td>
<td>
<TableCode>'bottom' | 'top' | 'left' | 'right'</TableCode>
</td>
<td>
Preferred position for displaying the tooltip. It may adjust automatically based on available space.
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
<StatusBadge status="required" />
children
</DxcFlex>
</td>
<td>
<TableCode>'bottom'</TableCode>
<TableCode>React.ReactNode</TableCode>
</td>
<td>Custom content inside the container.</td>
<td>-</td>
</tr>
<tr>
<td>label</td>
Expand All @@ -41,12 +43,16 @@ const sections = [
<td>-</td>
</tr>
<tr>
<td>children</td>
<td>position</td>
<td>
<TableCode>React.ReactNode</TableCode>
<TableCode>'bottom' | 'top' | 'left' | 'right'</TableCode>
</td>
<td>
Preferred position for displaying the tooltip. It may adjust automatically based on available space.
</td>
<td>
<TableCode>'bottom'</TableCode>
</td>
<td>Content in which the Tooltip will be displayed.</td>
<td>-</td>
</tr>
</tbody>
</DxcTable>
Expand All @@ -63,15 +69,13 @@ const sections = [
},
];

const TooltipCodePage = () => {
return (
<DxcFlex direction="column" gap="4rem">
<QuickNavContainerLayout>
<QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
</QuickNavContainerLayout>
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/tooltip/code/TooltipCodePage.tsx" />
</DxcFlex>
);
};
const TooltipCodePage = () => (
<DxcFlex direction="column" gap="4rem">
<QuickNavContainerLayout>
<QuickNavContainer sections={sections} startHeadingLevel={2} />
</QuickNavContainerLayout>
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/tooltip/code/TooltipCodePage.tsx" />
</DxcFlex>
);

export default TooltipCodePage;
Loading