Skip to content

Commit 3fdc3ea

Browse files
GomezIvannGomezIvann
authored
Merge pull request #2200 from dxc-technology/Mil4n0r/tokens-progressbar
Progressbar redesign
2 parents 0b2b42b + ad3b4f3 commit 3fdc3ea

File tree

18 files changed

+297
-747
lines changed

18 files changed

+297
-747
lines changed

‎apps/website/pages/components/progress-bar/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 ProgressBarPageLayout from "screens/components/progress-bar/ProgressBarPageLayout";
4+
import ProgressBarCodePage from "screens/components/progress-bar/code/ProgressBarCodePage";
5+
6+
const Code = () => (
7+
<>
8+
<Head>
9+
<title>Progress bar code — Halstack Design System</title>
10+
</Head>
11+
<ProgressBarCodePage />
12+
</>
13+
);
14+
15+
Code.getLayout = (page: ReactElement) => <ProgressBarPageLayout>{page}</ProgressBarPageLayout>;
16+
17+
export default Code;

‎apps/website/pages/components/progress-bar/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";
3-
import ProgressBarCodePage from "screens/components/progress-bar/code/ProgressBarCodePage";
3+
import ProgressBarOverviewPage from "screens/components/progress-bar/overview/ProgressBarOverviewPage";
44
import ProgressBarPageLayout from "screens/components/progress-bar/ProgressBarPageLayout";
55

6-
const Index = () => {
7-
return (
8-
<>
9-
<Head>
10-
<title>Progress Bar — Halstack Design System</title>
11-
</Head>
12-
<ProgressBarCodePage></ProgressBarCodePage>
13-
</>
14-
);
15-
};
6+
const Index = () => (
7+
<>
8+
<Head>
9+
<title>Progress bar — Halstack Design System</title>
10+
</Head>
11+
<ProgressBarOverviewPage />
12+
</>
13+
);
1614

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

2117
export default Index;

‎apps/website/pages/components/progress-bar/specifications.tsx‎

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

‎apps/website/pages/components/progress-bar/usage.tsx‎

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

‎apps/website/screens/components/progress-bar/ProgressBarPageLayout.tsx‎

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

77
const ProgressBarPageHeading = ({ children }: { children: ReactNode }) => {
88
const tabs = [
9-
{ label: "Code", path: "/components/progress-bar" },
10-
{ label: "Usage", path: "/components/progress-bar/usage" },
11-
{
12-
label: "Specifications",
13-
path: "/components/progress-bar/specifications",
14-
},
9+
{ label: "Overview", path: "/components/progress-bar" },
10+
{ label: "Code", path: "/components/progress-bar/code" },
1511
];
1612

1713
return (
1814
<DxcFlex direction="column" gap="3rem">
1915
<PageHeading>
2016
<DxcFlex direction="column" gap="2rem">
21-
<ComponentHeading name="Progress Bar" />
22-
<DxcParagraph>
23-
Progress indicators offer visibility of system status to the user, giving feedback to indicate that the
24-
application is taking some time to processing data. The main aim of these components is to reduce the
25-
user&#39;s uncertainty about offering something to look at while the user is waiting for the end. A progress
26-
bar should be used in any scenario that will take more than 1 second in performing the action, for anything
27-
that takes less than that time, it will be distracting for the user.
28-
</DxcParagraph>
29-
<TabsPageHeading tabs={tabs}></TabsPageHeading>
17+
<ComponentHeading name="Progress bar" />
18+
<DxcParagraph>A progress bar visually indicates the completion status of a task or process.</DxcParagraph>
19+
<TabsPageHeading tabs={tabs} />
3020
</DxcFlex>
3121
</PageHeading>
3222
{children}

‎apps/website/screens/components/progress-bar/code/ProgressBarCodePage.tsx‎

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,17 @@ const sections = [
2323
</thead>
2424
<tbody>
2525
<tr>
26-
<td>label</td>
26+
<td>ariaLabel</td>
2727
<td>
2828
<TableCode>string</TableCode>
2929
</td>
30-
<td>Text to be placed above the progress bar.</td>
31-
<td>-</td>
30+
<td>
31+
Specifies a string to be used as the name for the progress bar element when no <Code>label</Code> is
32+
provided.
33+
</td>
34+
<td>
35+
<TableCode>'Progress bar'</TableCode>
36+
</td>
3237
</tr>
3338
<tr>
3439
<td>helperText</td>
@@ -39,57 +44,54 @@ const sections = [
3944
<td>-</td>
4045
</tr>
4146
<tr>
42-
<td>overlay</td>
43-
<td>
44-
<TableCode>boolean</TableCode>
45-
</td>
46-
<td>If true, the progress bar will be displayed as a modal.</td>
47+
<td>label</td>
4748
<td>
48-
<TableCode>false</TableCode>
49+
<TableCode>string</TableCode>
4950
</td>
51+
<td>Text to be placed above the progress bar.</td>
52+
<td>-</td>
5053
</tr>
5154
<tr>
52-
<td>value</td>
55+
<td>margin</td>
5356
<td>
54-
<TableCode>number</TableCode>
57+
<TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin</TableCode>
5558
</td>
5659
<td>
57-
The value of the progress indicator. If it's received the component is determinate otherwise is
58-
indeterminate.
60+
Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
61+
'right' properties in order to specify different margin sizes.
5962
</td>
6063
<td>-</td>
6164
</tr>
6265
<tr>
63-
<td>showValue</td>
66+
<td>overlay</td>
6467
<td>
6568
<TableCode>boolean</TableCode>
6669
</td>
67-
<td>If true, the determined value is displayed above the progress bar.</td>
70+
<td>If true, the progress bar will be displayed as a modal.</td>
6871
<td>
6972
<TableCode>false</TableCode>
7073
</td>
7174
</tr>
7275
<tr>
73-
<td>margin</td>
76+
<td>showValue</td>
7477
<td>
75-
<TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin</TableCode>
78+
<TableCode>boolean</TableCode>
7679
</td>
80+
<td>If true, the determined value is displayed above the progress bar.</td>
7781
<td>
78-
Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
79-
'right' properties in order to specify different margin sizes.
82+
<TableCode>false</TableCode>
8083
</td>
81-
<td>-</td>
8284
</tr>
8385
<tr>
84-
<td>ariaLabel</td>
86+
<td>value</td>
8587
<td>
86-
<TableCode>string</TableCode>
88+
<TableCode>number</TableCode>
8789
</td>
8890
<td>
89-
Specifies a string to be used as the name for the progress bar element when no <Code>label</Code> is
90-
provided.
91+
The value of the progress indicator. If it's received the component is determinate otherwise is
92+
indeterminate.
9193
</td>
92-
<td>'Progress bar'</td>
94+
<td>-</td>
9395
</tr>
9496
</tbody>
9597
</DxcTable>
@@ -110,15 +112,13 @@ const sections = [
110112
},
111113
];
112114

113-
const ProgressBarCodePage = () => {
114-
return (
115-
<DxcFlex direction="column" gap="4rem">
116-
<QuickNavContainerLayout>
117-
<QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
118-
</QuickNavContainerLayout>
119-
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/progress-bar/code/ProgressBarCodePage.tsx" />
120-
</DxcFlex>
121-
);
122-
};
115+
const ProgressBarCodePage = () => (
116+
<DxcFlex direction="column" gap="4rem">
117+
<QuickNavContainerLayout>
118+
<QuickNavContainer sections={sections} startHeadingLevel={2} />
119+
</QuickNavContainerLayout>
120+
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/progress-bar/code/ProgressBarCodePage.tsx" />
121+
</DxcFlex>
122+
);
123123

124124
export default ProgressBarCodePage;

‎apps/website/screens/components/progress-bar/overview/ProgressBarOverviewPage.tsx‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
import { DxcParagraph, DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react";
2+
import QuickNavContainer from "@/common/QuickNavContainer";
3+
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
4+
import DocFooter from "@/common/DocFooter";
5+
import Image from "@/common/Image";
6+
import Example from "@/common/example/Example";
7+
import default_overlay from "./images/default_overlay.png";
8+
import anatomy from "./images/progress_bar_anatomy.png";
9+
import determinate_undeterminate from "./examples/determinate_undeterminate";
10+
11+
const sections = [
12+
{
13+
title: "Introduction",
14+
content: (
15+
<DxcParagraph>
16+
Progress bars are used to show the progression of a task over time. They provide users with immediate visual
17+
feedback about the current state of an operation, such as loading content, uploading a file, or completing a
18+
form.
19+
</DxcParagraph>
20+
),
21+
},
22+
{
23+
title: "Anatomy",
24+
content: (
25+
<>
26+
<Image src={anatomy} alt="Progress bar's anatomy" />
27+
<DxcBulletedList type="number">
28+
<DxcBulletedList.Item>
29+
<strong>Label</strong> <em>(Optional)</em>: text element that describes the purpose or context of the
30+
progress bar (e.g., "Uploading file…").
31+
</DxcBulletedList.Item>
32+
<DxcBulletedList.Item>
33+
<strong>Helper text</strong> <em>(Optional)</em>: provides additional information or clarification related
34+
to the progress, such as status messages or expected duration.
35+
</DxcBulletedList.Item>
36+
<DxcBulletedList.Item>
37+
<strong>Progress track line:</strong> the filled portion of the bar showing completed progress.
38+
</DxcBulletedList.Item>
39+
<DxcBulletedList.Item>
40+
<strong>Progress total line:</strong> the background bar representing the total task to be completed.
41+
</DxcBulletedList.Item>
42+
<DxcBulletedList.Item>
43+
<strong>Progress indicator</strong> <em>(Optional)</em>: highlights the current progress value within the
44+
bar.
45+
</DxcBulletedList.Item>
46+
</DxcBulletedList>
47+
</>
48+
),
49+
},
50+
{
51+
title: "Variants",
52+
content: (
53+
<>
54+
<DxcParagraph>Progress bars come in different styles based on task nature and UI context.</DxcParagraph>
55+
</>
56+
),
57+
subSections: [
58+
{
59+
title: "Default or overlay",
60+
content: (
61+
<>
62+
<DxcBulletedList>
63+
<DxcBulletedList.Item>
64+
<strong>Default:</strong> displays the progress bar inline, directly within the page or component
65+
layout. This is the most commonly used style, suitable for non-blocking tasks that allow the user to
66+
continue interacting with the UI.
67+
</DxcBulletedList.Item>
68+
<DxcBulletedList.Item>
69+
<strong>Overlay:</strong> displays the progress with a background overlay, temporarily blocking
70+
interaction with the UI. It's used for tasks that require user attention or when interaction must be
71+
paused until the task is complete.
72+
</DxcBulletedList.Item>
73+
</DxcBulletedList>
74+
<Image src={default_overlay} alt="Default mode and overlay mode example" />
75+
</>
76+
),
77+
},
78+
{
79+
title: "Determinate or indeterminate",
80+
content: (
81+
<>
82+
<DxcBulletedList>
83+
<DxcBulletedList.Item>
84+
<strong>Determinate:</strong> are used when the system can calculate the percentage of work completed.
85+
</DxcBulletedList.Item>
86+
<DxcBulletedList.Item>
87+
<strong>Indeterminate:</strong> are used when the duration of the task is unknown or unpredictable.
88+
</DxcBulletedList.Item>
89+
</DxcBulletedList>
90+
<Example example={determinate_undeterminate} />
91+
</>
92+
),
93+
},
94+
],
95+
},
96+
{
97+
title: "Best practices",
98+
content: (
99+
<>
100+
<DxcBulletedList>
101+
<DxcBulletedList.Item>
102+
<strong>Provide clear feedback:</strong> always display a progress bar when the task takes longer than a few
103+
seconds. This reassures users that the system is processing and gives them a sense of control. If possible,
104+
include a label or percentage to indicate how much of the task is completed.
105+
</DxcBulletedList.Item>
106+
<DxcBulletedList.Item>
107+
<strong>Avoid overuse:</strong> don't show a progress bar for tasks shorter than 1 second — use a spinner or
108+
no feedback instead. Don't use a progress bar just for decoration; it should always reflect a real process.
109+
</DxcBulletedList.Item>
110+
<DxcBulletedList.Item>
111+
<strong>Provide contextual information:</strong> whenever possible, provide additional information like
112+
"Starting," "Halfway," or "Almost Done" to help users gauge the task status. If applicable, show what the
113+
task involves, especially when the user is waiting for something critical (e.g., "Updating to the latest
114+
version...").
115+
</DxcBulletedList.Item>
116+
<DxcBulletedList.Item>
117+
<strong>Use the right variant:</strong> use determinate when the completion percentage is known (e.g., file
118+
uploads, task completion). Use indeterminate when the system can’t predict the time or progress (e.g.,
119+
loading content, waiting for server responses).
120+
</DxcBulletedList.Item>
121+
<DxcBulletedList.Item>
122+
<strong>Avoid blocking the UI:</strong> when progress is happening in the background, place the progress bar
123+
in a non-intrusive area, like near the top of the page or inside a specific section. Use overlay variant
124+
only when necessary, as it blocks user interaction. Make sure to include a clear indication of what the user
125+
is waiting for and an estimated time if possible.
126+
</DxcBulletedList.Item>
127+
<DxcBulletedList.Item>
128+
<strong>Combine with other feedback:</strong> pair with success, warning, or info toasts or alerts when
129+
appropriate to give users closure after completion.
130+
</DxcBulletedList.Item>
131+
</DxcBulletedList>
132+
</>
133+
),
134+
},
135+
];
136+
137+
const ProgressBarOverviewPage = () => (
138+
<DxcFlex direction="column" gap="4rem">
139+
<QuickNavContainerLayout>
140+
<QuickNavContainer sections={sections} startHeadingLevel={2} />
141+
</QuickNavContainerLayout>
142+
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/progress-bar/overview/ProgressBarOverviewPage.tsx" />
143+
</DxcFlex>
144+
);
145+
146+
export default ProgressBarOverviewPage;

apps/website/screens/components/progress-bar/usage/examples/determinate_undeterminate.ts renamed to apps/website/screens/components/progress-bar/overview/examples/determinate_undeterminate.ts

File renamed without changes.

‎apps/website/screens/components/progress-bar/overview/images/default_overlay.png‎

29.9 KB
Loading

‎apps/website/screens/components/progress-bar/overview/images/progress_bar_anatomy.png‎

30.9 KB
Loading

0 commit comments

Comments
 (0)