Skip to content

Slider redesign #2164

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 14 commits into from
Mar 18, 2025
Merged

Slider redesign #2164

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
fa1b898
Slider redesign with new tokens architecture
GomezIvann Feb 18, 2025
cae98c6
Updated test and behaviour from Slider
GomezIvann Feb 19, 2025
49a7cd8
Round up slider enhancements
GomezIvann Feb 19, 2025
d0d1346
Slider updates
GomezIvann Feb 20, 2025
acbba59
Small enhacements on round up
GomezIvann Feb 20, 2025
61417dc
Design updates
GomezIvann Feb 24, 2025
870abee
Merge branch 'master' into gomezivann/tokens-slider
GomezIvann Feb 25, 2025
7f8fa86
Number input, fixed rounding, new example & more
GomezIvann Feb 26, 2025
4cbc00c
More functionality added to the Slider
GomezIvann Feb 26, 2025
0caa162
Merge branch 'master' into gomezivann/tokens-slider
Mil4n0r Feb 28, 2025
075500c
Slider documentation
GomezIvann Mar 18, 2025
46caf04
Merge branch 'master' into gomezivann/tokens-slider
GomezIvann Mar 18, 2025
7da04d0
Contextual menu doc update
GomezIvann Mar 18, 2025
bb4129c
Updates based on feedback
GomezIvann Mar 18, 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/slider/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 SliderPageLayout from "screens/components/slider/SliderPageLayout";
import SliderCodePage from "screens/components/slider/code/SliderCodePage";

const Code = () => (
<>
<Head>
<title>Slider code — Halstack Design System</title>
</Head>
<SliderCodePage />
</>
);

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

export default Code;
24 changes: 10 additions & 14 deletions apps/website/pages/components/slider/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,17 @@
import Head from "next/head";
import type { ReactElement } from "react";
import SliderPageLayout from "screens/components/slider/SliderPageLayout";
import SliderCodePage from "screens/components/slider/code/SliderCodePage";
import SliderOverviewPage from "screens/components/slider/overview/SliderOverviewPage";

const Index = () => {
return (
<>
<Head>
<title>Slider — Halstack Design System</title>
</Head>
<SliderCodePage></SliderCodePage>
</>
);
};
const Index = () => (
<>
<Head>
<title>Slider — Halstack Design System</title>
</Head>
<SliderOverviewPage />
</>
);

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

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

This file was deleted.

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

This file was deleted.

70 changes: 34 additions & 36 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,42 +89,40 @@ const sections = [
{
title: "Best practices",
content: (
<>
<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>
</>
<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>
),
},
];
Expand Down
12 changes: 5 additions & 7 deletions apps/website/screens/components/slider/SliderPageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,8 @@ import { ReactNode } from "react";

const SliderPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
{ label: "Code", path: "/components/slider" },
{ label: "Usage", path: "/components/slider/usage" },
{ label: "Specifications", path: "/components/slider/specifications" },
{ label: "Overview", path: "/components/slider" },
{ label: "Code", path: "/components/slider/code" },
];

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