Skip to content

Progressbar redesign #2200

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

Progressbar redesign #2200

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
108e309
Reimplemented component using new tokens
Mar 25, 2025
18159d0
Changed styled-components order
Mar 26, 2025
35b16aa
Merge branch 'master' of github.com:dxc-technology/halstack-react int…
Mar 26, 2025
bd71ede
Reimplemented component
Mar 26, 2025
3a5fb60
Removed dead code
Mar 26, 2025
894fa04
Refactoring and fixed colors for overlay
Mar 31, 2025
48132b4
Removed ThemeProvider import
Mar 31, 2025
941e968
Merge branch 'master' into Mil4n0r/tokens-progressbar
Mil4n0r Apr 1, 2025
ece8ed0
Revert "Changed styled-components order"
Apr 1, 2025
468698b
Merge branch 'Mil4n0r/tokens-progressbar' of github.com:dxc-technolog…
Apr 1, 2025
3df69d9
Restored accordion
Apr 1, 2025
526eb0d
Changed ProgressBar component structure
Apr 2, 2025
ca1e01b
Added documentation
Apr 9, 2025
4bad383
Added fixes from review
Apr 10, 2025
ad3b4f3
Fixed problem with vertical alignment in overlay mode
Apr 10, 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/progress-bar/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 ProgressBarPageLayout from "screens/components/progress-bar/ProgressBarPageLayout";
import ProgressBarCodePage from "screens/components/progress-bar/code/ProgressBarCodePage";

const Code = () => (
<>
<Head>
<title>Progress bar code — Halstack Design System</title>
</Head>
<ProgressBarCodePage />
</>
);

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

export default Code;
24 changes: 10 additions & 14 deletions apps/website/pages/components/progress-bar/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 ProgressBarCodePage from "screens/components/progress-bar/code/ProgressBarCodePage";
import ProgressBarOverviewPage from "screens/components/progress-bar/overview/ProgressBarOverviewPage";
import ProgressBarPageLayout from "screens/components/progress-bar/ProgressBarPageLayout";

const Index = () => {
return (
<>
<Head>
<title>Progress Bar — Halstack Design System</title>
</Head>
<ProgressBarCodePage></ProgressBarCodePage>
</>
);
};
const Index = () => (
<>
<Head>
<title>Progress bar — Halstack Design System</title>
</Head>
<ProgressBarOverviewPage />
</>
);

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

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

This file was deleted.

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

This file was deleted.

20 changes: 5 additions & 15 deletions apps/website/screens/components/progress-bar/ProgressBarPageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,27 +6,17 @@ import { ReactNode } from "react";

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

return (
<DxcFlex direction="column" gap="3rem">
<PageHeading>
<DxcFlex direction="column" gap="2rem">
<ComponentHeading name="Progress Bar" />
<DxcParagraph>
Progress indicators offer visibility of system status to the user, giving feedback to indicate that the
application is taking some time to processing data. The main aim of these components is to reduce the
user&#39;s uncertainty about offering something to look at while the user is waiting for the end. A progress
bar should be used in any scenario that will take more than 1 second in performing the action, for anything
that takes less than that time, it will be distracting for the user.
</DxcParagraph>
<TabsPageHeading tabs={tabs}></TabsPageHeading>
<ComponentHeading name="Progress bar" />
<DxcParagraph>A progress bar visually indicates the completion status of a task or process.</DxcParagraph>
<TabsPageHeading tabs={tabs} />
</DxcFlex>
</PageHeading>
{children}
Expand Down
70 changes: 35 additions & 35 deletions apps/website/screens/components/progress-bar/code/ProgressBarCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,17 @@ const sections = [
</thead>
<tbody>
<tr>
<td>label</td>
<td>ariaLabel</td>
<td>
<TableCode>string</TableCode>
</td>
<td>Text to be placed above the progress bar.</td>
<td>-</td>
<td>
Specifies a string to be used as the name for the progress bar element when no <Code>label</Code> is
provided.
</td>
<td>
<TableCode>'Progress bar'</TableCode>
</td>
</tr>
<tr>
<td>helperText</td>
Expand All @@ -39,57 +44,54 @@ const sections = [
<td>-</td>
</tr>
<tr>
<td>overlay</td>
<td>
<TableCode>boolean</TableCode>
</td>
<td>If true, the progress bar will be displayed as a modal.</td>
<td>label</td>
<td>
<TableCode>false</TableCode>
<TableCode>string</TableCode>
</td>
<td>Text to be placed above the progress bar.</td>
<td>-</td>
</tr>
<tr>
<td>value</td>
<td>margin</td>
<td>
<TableCode>number</TableCode>
<TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin</TableCode>
</td>
<td>
The value of the progress indicator. If it's received the component is determinate otherwise is
indeterminate.
Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
'right' properties in order to specify different margin sizes.
</td>
<td>-</td>
</tr>
<tr>
<td>showValue</td>
<td>overlay</td>
<td>
<TableCode>boolean</TableCode>
</td>
<td>If true, the determined value is displayed above the progress bar.</td>
<td>If true, the progress bar will be displayed as a modal.</td>
<td>
<TableCode>false</TableCode>
</td>
</tr>
<tr>
<td>margin</td>
<td>showValue</td>
<td>
<TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin</TableCode>
<TableCode>boolean</TableCode>
</td>
<td>If true, the determined value is displayed above the progress bar.</td>
<td>
Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
'right' properties in order to specify different margin sizes.
<TableCode>false</TableCode>
</td>
<td>-</td>
</tr>
<tr>
<td>ariaLabel</td>
<td>value</td>
<td>
<TableCode>string</TableCode>
<TableCode>number</TableCode>
</td>
<td>
Specifies a string to be used as the name for the progress bar element when no <Code>label</Code> is
provided.
The value of the progress indicator. If it's received the component is determinate otherwise is
indeterminate.
</td>
<td>'Progress bar'</td>
<td>-</td>
</tr>
</tbody>
</DxcTable>
Expand All @@ -110,15 +112,13 @@ const sections = [
},
];

const ProgressBarCodePage = () => {
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/progress-bar/code/ProgressBarCodePage.tsx" />
</DxcFlex>
);
};
const ProgressBarCodePage = () => (
<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/progress-bar/code/ProgressBarCodePage.tsx" />
</DxcFlex>
);

export default ProgressBarCodePage;
146 changes: 146 additions & 0 deletions apps/website/screens/components/progress-bar/overview/ProgressBarOverviewPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
import { DxcParagraph, DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react";
import QuickNavContainer from "@/common/QuickNavContainer";
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import DocFooter from "@/common/DocFooter";
import Image from "@/common/Image";
import Example from "@/common/example/Example";
import default_overlay from "./images/default_overlay.png";
import anatomy from "./images/progress_bar_anatomy.png";
import determinate_undeterminate from "./examples/determinate_undeterminate";

const sections = [
{
title: "Introduction",
content: (
<DxcParagraph>
Progress bars are used to show the progression of a task over time. They provide users with immediate visual
feedback about the current state of an operation, such as loading content, uploading a file, or completing a
form.
</DxcParagraph>
),
},
{
title: "Anatomy",
content: (
<>
<Image src={anatomy} alt="Progress bar's anatomy" />
<DxcBulletedList type="number">
<DxcBulletedList.Item>
<strong>Label</strong> <em>(Optional)</em>: text element that describes the purpose or context of the
progress bar (e.g., "Uploading file…").
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Helper text</strong> <em>(Optional)</em>: provides additional information or clarification related
to the progress, such as status messages or expected duration.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Progress track line:</strong> the filled portion of the bar showing completed progress.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Progress total line:</strong> the background bar representing the total task to be completed.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Progress indicator</strong> <em>(Optional)</em>: highlights the current progress value within the
bar.
</DxcBulletedList.Item>
</DxcBulletedList>
</>
),
},
{
title: "Variants",
content: (
<>
<DxcParagraph>Progress bars come in different styles based on task nature and UI context.</DxcParagraph>
</>
),
subSections: [
{
title: "Default or overlay",
content: (
<>
<DxcBulletedList>
<DxcBulletedList.Item>
<strong>Default:</strong> displays the progress bar inline, directly within the page or component
layout. This is the most commonly used style, suitable for non-blocking tasks that allow the user to
continue interacting with the UI.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Overlay:</strong> displays the progress with a background overlay, temporarily blocking
interaction with the UI. It's used for tasks that require user attention or when interaction must be
paused until the task is complete.
</DxcBulletedList.Item>
</DxcBulletedList>
<Image src={default_overlay} alt="Default mode and overlay mode example" />
</>
),
},
{
title: "Determinate or indeterminate",
content: (
<>
<DxcBulletedList>
<DxcBulletedList.Item>
<strong>Determinate:</strong> are used when the system can calculate the percentage of work completed.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Indeterminate:</strong> are used when the duration of the task is unknown or unpredictable.
</DxcBulletedList.Item>
</DxcBulletedList>
<Example example={determinate_undeterminate} />
</>
),
},
],
},
{
title: "Best practices",
content: (
<>
<DxcBulletedList>
<DxcBulletedList.Item>
<strong>Provide clear feedback:</strong> always display a progress bar when the task takes longer than a few
seconds. This reassures users that the system is processing and gives them a sense of control. If possible,
include a label or percentage to indicate how much of the task is completed.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Avoid overuse:</strong> don't show a progress bar for tasks shorter than 1 second — use a spinner or
no feedback instead. Don't use a progress bar just for decoration; it should always reflect a real process.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Provide contextual information:</strong> whenever possible, provide additional information like
"Starting," "Halfway," or "Almost Done" to help users gauge the task status. If applicable, show what the
task involves, especially when the user is waiting for something critical (e.g., "Updating to the latest
version...").
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Use the right variant:</strong> use determinate when the completion percentage is known (e.g., file
uploads, task completion). Use indeterminate when the system can’t predict the time or progress (e.g.,
loading content, waiting for server responses).
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Avoid blocking the UI:</strong> when progress is happening in the background, place the progress bar
in a non-intrusive area, like near the top of the page or inside a specific section. Use overlay variant
only when necessary, as it blocks user interaction. Make sure to include a clear indication of what the user
is waiting for and an estimated time if possible.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Combine with other feedback:</strong> pair with success, warning, or info toasts or alerts when
appropriate to give users closure after completion.
</DxcBulletedList.Item>
</DxcBulletedList>
</>
),
},
];

const ProgressBarOverviewPage = () => (
<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/progress-bar/overview/ProgressBarOverviewPage.tsx" />
</DxcFlex>
);

export default ProgressBarOverviewPage;
0 ...age/examples/determinate_undeterminate.ts → ...iew/examples/determinate_undeterminate.ts
View file
Open in desktop
File renamed without changes.
Binary file added apps/website/screens/components/progress-bar/overview/images/default_overlay.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...ebsite/screens/components/progress-bar/overview/images/progress_bar_anatomy.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading