Skip to content

Commit f2ee373

Browse files
Mil4n0rMil4n0r
authored
Merge pull request #2164 from dxc-technology/gomezivann/tokens-slider
Slider redesign
2 parents d55dfa7 + bb4129c commit f2ee373

File tree

24 files changed

+851
-1536
lines changed

24 files changed

+851
-1536
lines changed

‎apps/website/pages/components/slider/code.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import Head from "next/head";
2+
import type { ReactElement } from "react";
3+
import SliderPageLayout from "screens/components/slider/SliderPageLayout";
4+
import SliderCodePage from "screens/components/slider/code/SliderCodePage";
5+
6+
const Code = () => (
7+
<>
8+
<Head>
9+
<title>Slider code — Halstack Design System</title>
10+
</Head>
11+
<SliderCodePage />
12+
</>
13+
);
14+
15+
Code.getLayout = (page: ReactElement) => <SliderPageLayout>{page}</SliderPageLayout>;
16+
17+
export default Code;

‎apps/website/pages/components/slider/index.tsx‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
11
import Head from "next/head";
22
import type { ReactElement } from "react";
33
import SliderPageLayout from "screens/components/slider/SliderPageLayout";
4-
import SliderCodePage from "screens/components/slider/code/SliderCodePage";
4+
import SliderOverviewPage from "screens/components/slider/overview/SliderOverviewPage";
55

6-
const Index = () => {
7-
return (
8-
<>
9-
<Head>
10-
<title>Slider — Halstack Design System</title>
11-
</Head>
12-
<SliderCodePage></SliderCodePage>
13-
</>
14-
);
15-
};
6+
const Index = () => (
7+
<>
8+
<Head>
9+
<title>Slider — Halstack Design System</title>
10+
</Head>
11+
<SliderOverviewPage />
12+
</>
13+
);
1614

17-
Index.getLayout = function getLayout(page: ReactElement) {
18-
return <SliderPageLayout>{page}</SliderPageLayout>;
19-
};
15+
Index.getLayout = (page: ReactElement) => <SliderPageLayout>{page}</SliderPageLayout>;
2016

2117
export default Index;

‎apps/website/pages/components/slider/specifications.tsx‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎apps/website/pages/components/slider/usage.tsx‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎apps/website/screens/components/contextual-menu/overview/ContextualMenuOverviewPage.tsx‎

Lines changed: 34 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -89,42 +89,40 @@ const sections = [
8989
{
9090
title: "Best practices",
9191
content: (
92-
<>
93-
<DxcBulletedList type="number">
94-
<DxcBulletedList.Item>
95-
<strong>Use meaningful icons:</strong> Select icons that accurately represent menu items, ensuring clarity
96-
and intuitive navigation.
97-
</DxcBulletedList.Item>
98-
<DxcBulletedList.Item>
99-
<strong>Align properly:</strong> position the contextual menu to the left or right, avoiding placement in
100-
the center to prevent obstruction of main content.
101-
</DxcBulletedList.Item>
102-
<DxcBulletedList.Item>
103-
<strong>Enhance navigation with hierarchy:</strong> structure menu items using different levels to maintain
104-
logical organization.
105-
</DxcBulletedList.Item>
106-
<DxcBulletedList.Item>
107-
<strong>Use badges for status indication:</strong> incorporate a Badge component to display status updates,
108-
counts or categories for navigable sections.
109-
</DxcBulletedList.Item>
110-
<DxcBulletedList.Item>
111-
<strong>Default selection:</strong> when pre-selecting an option, try to limit it to the first menu item to
112-
maintain intuitive user interactions.
113-
</DxcBulletedList.Item>
114-
<DxcBulletedList.Item>
115-
<strong>Avoid deep hierarchies:</strong> limit navigation depth to a maximum of three levels to prevent
116-
excessive indentation and complexity.
117-
</DxcBulletedList.Item>
118-
<DxcBulletedList.Item>
119-
<strong>Restrict icon usage:</strong> use icons only at the first navigation level to maintain readability
120-
and avoid visual clutter.
121-
</DxcBulletedList.Item>
122-
<DxcBulletedList.Item>
123-
<strong>Don't overload with icons:</strong> too many icons can create confusion rather than improve
124-
usability. Keep them purposeful and minimal.
125-
</DxcBulletedList.Item>
126-
</DxcBulletedList>
127-
</>
92+
<DxcBulletedList>
93+
<DxcBulletedList.Item>
94+
<strong>Use meaningful icons:</strong> Select icons that accurately represent menu items, ensuring clarity and
95+
intuitive navigation.
96+
</DxcBulletedList.Item>
97+
<DxcBulletedList.Item>
98+
<strong>Align properly:</strong> position the contextual menu to the left or right, avoiding placement in the
99+
center to prevent obstruction of main content.
100+
</DxcBulletedList.Item>
101+
<DxcBulletedList.Item>
102+
<strong>Enhance navigation with hierarchy:</strong> structure menu items using different levels to maintain
103+
logical organization.
104+
</DxcBulletedList.Item>
105+
<DxcBulletedList.Item>
106+
<strong>Use badges for status indication:</strong> incorporate a Badge component to display status updates,
107+
counts or categories for navigable sections.
108+
</DxcBulletedList.Item>
109+
<DxcBulletedList.Item>
110+
<strong>Default selection:</strong> when pre-selecting an option, try to limit it to the first menu item to
111+
maintain intuitive user interactions.
112+
</DxcBulletedList.Item>
113+
<DxcBulletedList.Item>
114+
<strong>Avoid deep hierarchies:</strong> limit navigation depth to a maximum of three levels to prevent
115+
excessive indentation and complexity.
116+
</DxcBulletedList.Item>
117+
<DxcBulletedList.Item>
118+
<strong>Restrict icon usage:</strong> use icons only at the first navigation level to maintain readability and
119+
avoid visual clutter.
120+
</DxcBulletedList.Item>
121+
<DxcBulletedList.Item>
122+
<strong>Don't overload with icons:</strong> too many icons can create confusion rather than improve usability.
123+
Keep them purposeful and minimal.
124+
</DxcBulletedList.Item>
125+
</DxcBulletedList>
128126
),
129127
},
130128
];

‎apps/website/screens/components/slider/SliderPageLayout.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,8 @@ import { ReactNode } from "react";
66

77
const SliderPageHeading = ({ children }: { children: ReactNode }) => {
88
const tabs = [
9-
{ label: "Code", path: "/components/slider" },
10-
{ label: "Usage", path: "/components/slider/usage" },
11-
{ label: "Specifications", path: "/components/slider/specifications" },
9+
{ label: "Overview", path: "/components/slider" },
10+
{ label: "Code", path: "/components/slider/code" },
1211
];
1312

1413
return (
@@ -17,11 +16,10 @@ const SliderPageHeading = ({ children }: { children: ReactNode }) => {
1716
<DxcFlex direction="column" gap="2rem">
1817
<ComponentHeading name="Slider" />
1918
<DxcParagraph>
20-
Slider control allows users to select a specific value or a range of values from a set. Usually, slider
21-
presents a relatively large dataset and the way that the user interacts with it is helpful to explore the
22-
multiple options swiftly.
19+
Slider control enables users to select a specific value from a predefined set by dragging a thumb along a
20+
track.
2321
</DxcParagraph>
24-
<TabsPageHeading tabs={tabs}></TabsPageHeading>
22+
<TabsPageHeading tabs={tabs} />
2523
</DxcFlex>
2624
</PageHeading>
2725
{children}

0 commit comments

Comments
 (0)