mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 11:36:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

ProgressBar status feature added

Browse source
This commit is contained in:
jqlio18 2022-11-20 21:54:08 -05:00
commit 43090c5f47
2 changed files with 72 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

16
docs/src/pages/components/ProgressBar.svx
View file

@ -21,6 +21,18 @@ Specify a `value` for the progress bar to be determinate.
<ProgressBar value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
## Finished status
Specify `status="finished"` for the progress bar.
<ProgressBar value={100} status="finished" labelText="Upload status" helperText="100 MB of 100 MB" />
## Error status
Specify `status="error"` for the progress bar.
<ProgressBar value={40} status="error" labelText="Upload status" helperText="40 MB of 100 MB" />
## Custom max value
The default `max` value is `100`.
@ -45,6 +57,10 @@ The inline variant visually hides the `helperText`.
<ProgressBar kind="indented" value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
## Indented status variant
<ProgressBar kind="indented" status="finished" value={40} labelText="Upload status" helperText="100 MB of 100 MB" />
## UX example
This example shows how to animate the progress bar from 0 to 100% with start and end states.

56
src/ProgressBar/ProgressBar.svelte
View file

@ -14,6 +14,12 @@
*/
export let kind = "default";
/**
* Specify the status of progress bar
* @type {"active" | "finished" | "error"}
*/
export let status = "active";
/**
* Specify the size
* @type {"sm" | "md"}
@ -32,6 +38,14 @@
/** Set an id for the progress bar element */
export let id = "ccs-" + Math.random().toString(36);
import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
import ErrorFilled from "../icons/ErrorFilled.svelte";
const statusIcons = {
error: ErrorFilled,
finished: CheckmarkFilled,
};
let helperId = "ccs-" + Math.random().toString(36);
$: indeterminate = value === undefined;
@ -45,6 +59,8 @@
class:bx--progress-bar--small="{size === 'sm'}"
class:bx--progress-bar--inline="{kind === 'inline'}"
class:bx--progress-bar--indented="{kind === 'indented'}"
class:bx--progress-bar--error="{status === 'error'}"
class:bx--progress-bar--finished="{status === 'finished'}"
{...$$restProps}
>
<label
@ -55,6 +71,11 @@
<slot name="labelText">
{labelText}
</slot>
{#if status === "error" || status === "finished"}
<span class="bx--progress-bar__status-icon">
<svelte:component this="{statusIcons[status]}" />
</span>
{/if}
</label>
<div
role="progressbar"
@ -76,3 +97,38 @@
</div>
{/if}
</div>
<style>
.bx--progress-bar--error .bx--progress-bar__bar {
background-color: var(--cds-support-error, #da1e28);
}
.bx--progress-bar__status-icon {
float: right;
}
.bx--progress-bar--error .bx--progress-bar__helper-text,
.bx--progress-bar--error .bx--progress-bar__status-icon {
color: var(--cds-support-error, #da1e28);
}
.bx--progress-bar--finished .bx--progress-bar__bar {
background-color: var(--cds-support-success, #198038);
}
.bx--progress-bar--finished .bx--progress-bar__status-icon {
color: var(--cds-support-success, #198038);
}
.bx--progress-bar__status-icon {
flex-shrink: 0;
margin-left: 1rem;
}
.bx--progress-bar--error .bx--progress-bar__bar,
.bx--progress-bar--finished .bx--progress-bar__bar {
transform: scaleX(
1
) !important; /* Overwrite the style applied to the div */
}
</style>