Skip to content

Nav tab fixes and doc updates #2211

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
GomezIvann merged 10 commits into from
Apr 15, 2025
Merged

Nav tab fixes and doc updates #2211

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
34c753b
Tab outline offset hotfix
Jialecl Apr 11, 2025
ad1e2c0
Increased active nav tab underline size
Jialecl Apr 11, 2025
f407d05
Nav tabs updates, fixes and doc
GomezIvann Apr 11, 2025
2992823
Small update
GomezIvann Apr 11, 2025
67fc522
Divider updates
GomezIvann Apr 11, 2025
978bb99
Nav tabs overview fixes
GomezIvann Apr 11, 2025
efe56cd
small format changes
Jialecl Apr 14, 2025
07be78a
Nav tabs fix
GomezIvann Apr 14, 2025
89d15fc
Merge branch 'jialecl-navtab-offset' of https://github.com/dxc-techno…
GomezIvann Apr 14, 2025
c254b5b
Merge branch 'master' into jialecl-navtab-offset
Jialecl Apr 15, 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
2 changes: 1 addition & 1 deletion apps/website/pages/components/nav-tabs/code.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import NavTabsCodePage from "screens/components/nav-tabs/code/NavTabsCodePage";
const Code = () => (
<>
<Head>
<title>Nav Tabs Code — Halstack Design System</title>
<title>Nav tabs code — Halstack Design System</title>
</Head>
<NavTabsCodePage />
</>
Expand Down
2 changes: 1 addition & 1 deletion apps/website/pages/components/nav-tabs/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import NavTabsOverviewPage from "screens/components/nav-tabs/overview/NavTabsOve
const Index = () => (
<>
<Head>
<title>Nav Tabs — Halstack Design System</title>
<title>Nav tabs — Halstack Design System</title>
</Head>
<NavTabsOverviewPage />
</>
Expand Down
4 changes: 2 additions & 2 deletions apps/website/screens/components/nav-tabs/NavTabsPageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@ const NumberInputPageHeading = ({ children }: { children: ReactNode }) => {
<DxcFlex direction="column" gap="3rem">
<PageHeading>
<DxcFlex direction="column" gap="2rem">
<ComponentHeading name="Nav Tabs" />
<ComponentHeading name="Nav tabs" />
<DxcParagraph>
Nav tabs lets users switch between different views or sections within the same page, organizing related
content into a clear and accessible layout.
</DxcParagraph>
<TabsPageHeading tabs={tabs}></TabsPageHeading>
<TabsPageHeading tabs={tabs} />
</DxcFlex>
</PageHeading>
{children}
Expand Down
22 changes: 10 additions & 12 deletions apps/website/screens/components/nav-tabs/code/NavTabsCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,11 +44,11 @@ const sections = [
<tr>
<td>iconPosition</td>
<td>
<TableCode>'top' | 'left'</TableCode>
<TableCode>'left' | 'top'</TableCode>
</td>
<td>Whether the icon should appear above or to the left of the label.</td>
<td>
<TableCode>'top'</TableCode>
<TableCode>'left'</TableCode>
</td>
</tr>
<tr>
Expand Down Expand Up @@ -263,15 +263,13 @@ const sections = [
},
];

const NavTabsCodePage = () => {
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/nav-tabs/code/NavTabsCodePage.tsx" />
</DxcFlex>
);
};
const NavTabsCodePage = () => (
<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/nav-tabs/code/NavTabsCodePage.tsx" />
</DxcFlex>
);

export default NavTabsCodePage;
55 changes: 28 additions & 27 deletions apps/website/screens/components/nav-tabs/overview/NavTabsOverviewPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,32 +30,30 @@ const sections = [
<Image src={navTabsAnatomy} alt="Nav tabs anatomy" />
<DxcBulletedList type="number">
<DxcBulletedList.Item>
<strong>Container: </strong>the outer wrapper that holds and organizes all tab items. It defines the overall
<strong>Container:</strong> the outer wrapper that holds and organizes all tab items. It defines the overall
structure and layout of the navigation tabs, ensuring proper alignment and spacing across the component.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Label: </strong>the text displayed within each tab that indicates the section or category it leads
<strong>Label:</strong> the text displayed within each tab that indicates the section or category it leads
to.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Notification badge </strong>
<em>(Optional)</em>: a visual indicator that displays the number of pending actions, alerts or updates
related to a specific tab.
<strong>Notification badge</strong> <em>(Optional)</em>: a visual indicator that displays the number of
pending actions, alerts or updates related to a specific tab.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Selected tab: </strong>the active tab currently in focus, representing the visible content section.
<strong>Selected tab:</strong> the active tab currently in focus, representing the visible content section.
It is visually distinguished from unselected tabs using different color, weight or indicator styling.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Icon</strong>
<em>(Optional)</em>: an optional graphical element placed before the label to visually reinforce the tab's
meaning or category.
<strong>Icon</strong> <em>(Optional)</em>: an optional graphical element placed before the label to visually
reinforce the tab's meaning or category.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Selected tab indicator: </strong>a horizontal bar that visually marks the currently active tab.
<strong>Selected tab indicator:</strong> a horizontal bar that visually marks the currently active tab.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Unselected tab indicator: </strong>a horizontal bar that visually marks the currently inactive tab.
<strong>Unselected tab indicator:</strong> a horizontal bar that visually marks the currently inactive tab.
</DxcBulletedList.Item>
</DxcBulletedList>
</>
Expand All @@ -75,7 +73,7 @@ const sections = [
<DxcBulletedList>
<DxcBulletedList.Item>
Use the <strong>top position</strong> when the tabs are displayed in a horizontal layout and you want to
emphasize the icon as a key visual cue—ideal for dashboards or mobile - first interfaces where vertical
emphasize the icon as a key visual cue—ideal for dashboards or mobile-first interfaces where vertical
stacking feels more natural.
<Example example={icons_top} defaultIsVisible={false} />
</DxcBulletedList.Item>
Expand Down Expand Up @@ -140,8 +138,8 @@ const sections = [
</DxcBulletedList>
<DxcParagraph>
Both components improve usability, but <strong>tabs</strong> are best for grouping related content within
a page, while
<strong>nav tabs</strong> help users move across different sections or pages of an application.
a page, while <strong>nav tabs</strong> help users move across different sections or pages of an
application.
</DxcParagraph>
</>
),
Expand All @@ -162,17 +160,22 @@ const sections = [
especially on smaller viewports.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Ensure that tabs <strong>follow a logical order</strong> — based on frequency of use, workflow, or user
Ensure that tabs <strong>follow a logical order</strong>—based on frequency of use, workflow, or user
priority.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Use notification badges to <strong>highlight relevant updates</strong> only when necessary, and avoid
overloading multiple tabs with badges at once.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
While the component is flexible enough to support a mix of label-only and label-with-icon tabs, it's best to
choose one style per set. Mixing both can reduce scannability and create visual imbalance, impacting the
overall usability.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Choose icon placement (left or top) based on the available space and the importance of the icon in the
context of the label. Left is preferred for horizontal layouts; top works best in vertical or space -
constrained scenarios.
context of the label. Left is preferred for horizontal layouts; top works best in vertical or
space-constrained scenarios.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Avoid mixing navigation tabs and action buttons within the same group, as this can create confusion around
Expand All @@ -184,15 +187,13 @@ const sections = [
},
];

const NavTabsOverviewPage = () => {
return (
<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/nav-tabs/overview/NavTabsOverviewPage.tsx" />
</DxcFlex>
);
};
const NavTabsOverviewPage = () => (
<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/nav-tabs/overview/NavTabsOverviewPage.tsx" />
</DxcFlex>
);

export default NavTabsOverviewPage;
95 changes: 30 additions & 65 deletions apps/website/screens/components/tabs/overview/TabsOverviewPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,72 +160,37 @@ const sections = [
{
title: "Best practices",
content: (
<DxcParagraph>
To ensure an intuitive and user-friendly experience, follow these best practices when designing and implementing
tabs:
</DxcParagraph>
<DxcBulletedList>
<DxcBulletedList.Item>
<strong>Maintain logical order:</strong> arrange tabs in a meaningful sequence based on user needs and place
frequently used or primary tabs first.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Keep tab labels short & clear:</strong> use concise, descriptive labels (1-2 words) that clearly
indicate the content. Avoid using generic or ambiguous labels like "Info" or "More." Instead, choose specific
terms that reflect the content, such as "Account Details" for user-related settings or "Billing" for payment
information and prioritize readability—avoid using all caps unless necessary.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Managing the number of tabs effectively:</strong> while not a strict rule, keeping the number of tabs
manageable (ideally 5-7) helps maintain clarity and usability. If additional tabs are necessary, assess the
information architecture carefully and consider grouping related items.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Use icons thoughtfully:</strong> ensure the icon is intuitive and clearly represents the content of
the tab. While they are generally used alongside labels, they can also be used independently. In such cases,
it is crucial to choose highly recognizable icons that clearly convey meaning without additional text. When
used together, the icon and label must work harmoniously to reinforce their meaning and avoid any conflicting
interpretations. Avoid using overly decorative or generic icons that do not provide clear meaning, such as an
abstract shape with no context.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Keep design consistent:</strong> while the component is flexible enough to support a mix of label-only
and label-with-icon tabs, it's best to choose one style per set. Mixing both can reduce scannability and
create visual imbalance, impacting the overall usability.
</DxcBulletedList.Item>
</DxcBulletedList>
),
subSections: [
{
title: "Maintain logical order",
content: (
<DxcBulletedList>
<DxcBulletedList.Item>Arrange tabs in a meaningful sequence based on user needs.</DxcBulletedList.Item>
<DxcBulletedList.Item>Place frequently used or primary tabs first.</DxcBulletedList.Item>
</DxcBulletedList>
),
},
{
title: "Keep tab labels short & clear",
content: (
<DxcBulletedList>
<DxcBulletedList.Item>
Use concise, descriptive labels (1-2 words) that clearly indicate the content.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Avoid using generic or ambiguous labels like "Info" or "More." Instead, choose specific terms that reflect
the content, such as "Account Details" for user-related settings or "Billing" for payment information.
</DxcBulletedList.Item>
<DxcBulletedList.Item>Prioritize readability—avoid using all caps unless necessary.</DxcBulletedList.Item>
</DxcBulletedList>
),
},
{
title: "Managing the number of tabs effectively",
content: (
<DxcBulletedList>
<DxcBulletedList.Item>
While not a strict rule, keeping the number of tabs manageable (ideally 5-7) helps maintain clarity and
usability.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
If additional tabs are necessary, assess the information architecture carefully and consider grouping
related items.
</DxcBulletedList.Item>
</DxcBulletedList>
),
},
{
title: "Use icons thoughtfully",
content: (
<DxcBulletedList>
<DxcBulletedList.Item>
Ensure the icon is intuitive and clearly represents the content of the tab. While they are generally used
alongside labels, they can also be used independently. In such cases, it is crucial to choose highly
recognizable icons that clearly convey meaning without additional text.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
When used together, the icon and label must work harmoniously to reinforce their meaning and avoid any
conflicting interpretations.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Avoid using overly decorative or generic icons that do not provide clear meaning, such as an abstract
shape with no context.
</DxcBulletedList.Item>
</DxcBulletedList>
),
},
],
},
];

Expand Down
36 changes: 18 additions & 18 deletions packages/lib/src/divider/Divider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,29 +11,29 @@ const StyledDivider = styled.hr<DividerPropsType>`
: "var(--border-color-neutral-strongest)"
};
${orientation === "horizontal" ? "width" : "min-height"}: 100%;
${orientation === "horizontal" ? "height" : "width"}: 0px;
${orientation === "horizontal" ? "height" : "width"}: 0;
${
orientation === "horizontal"
? "border-width: " + (weight === "regular" ? "1px 0 0 0" : "2px 0 0 0")
: "border-width: " + (weight === "regular" ? "0 0 0 1px" : "0 0 0 2px")
? "border-width: " + (weight === "regular" ? "var(--border-width-s) 0 0 0" : "var(--border-width-m) 0 0 0")
: "border-width: " + (weight === "regular" ? "0 0 0 var(--border-width-s)" : "0 0 0 var(--border-width-m)")
};
margin: 0px;
margin: 0;
`}
`;

const DxcDivider = ({
orientation = "horizontal",
weight = "regular",
export default function DxcDivider({
color = "mediumGrey",
decorative = true,
}: DividerPropsType) => (
<StyledDivider
orientation={orientation}
weight={weight}
color={color}
aria-orientation={orientation}
aria-hidden={decorative}
/>
);

export default DxcDivider;
orientation = "horizontal",
weight = "regular",
}: DividerPropsType) {
return (
<StyledDivider
aria-hidden={decorative}
aria-orientation={orientation}
color={color}
orientation={orientation}
weight={weight}
/>
);
}
Loading