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

Export id in ProgressBar, add UX animated progress bar example (#732)

Browse source 
* fix(progress-bar): export id prop #731

Fixes #731

* docs(progress-bar): add UX example
This commit is contained in:
Eric Liu 2021-07-07 10:08:03 -07:00 • committed by GitHub
commit 2d47bcaf1f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 63 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

15
COMPONENT_INDEX.md
View file

@ -2838,13 +2838,14 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :--------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------- |
| value | <code>let</code> | No | <code>number</code> | -- | Specify the current value |
| max | <code>let</code> | No | <code>number</code> | <code>100</code> | Specify the maximum value |
| labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :--------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | --------------------------------------------- |
| value | <code>let</code> | No | <code>number</code> | -- | Specify the current value |
| max | <code>let</code> | No | <code>number</code> | <code>100</code> | Specify the maximum value |
| labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the progress bar element |
### Slots

10
docs/src/COMPONENT_API.json
View file

@ -7441,6 +7441,16 @@
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "id",
"kind": "let",
"description": "Set an id for the progress bar element",
"type": "string",
"value": "\"ccs-\" + Math.random().toString(36)",
"isFunction": false,
"constant": false,
"reactive": false
}
],
"slots": [

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

@ -22,3 +22,9 @@ The default `max` value is `100`.
### Hidden label
<ProgressBar hideLabel value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
### UX example
This example shows how to animate the progress bar from 0 to 100% with start and end states.
<FileSource src="/framed/ProgressBar/ProgressBarUx" />

50
docs/src/pages/framed/ProgressBar/ProgressBarUx.svelte
View file

@ -1,30 +1,11 @@
<script>
import { onMount } from "svelte";
import { ProgressBar } from "carbon-components-svelte";
import { ProgressBar, ButtonSet, Button } from "carbon-components-svelte";
let max = 328;
let value = 0;
let timer = undefined;
onMount(() => {
timer = setTimeout(() => {
const interval = setInterval(() => {
const delta = Math.random() * 10;
if (value + delta < max) {
value += delta;
} else {
value = max;
clearInterval(interval);
}
}, 20);
}, 2000);
return () => clearTimeout(timer);
});
$: helperText =
value > 0 ? `${value.toFixed(0)}MB of ${max}MB` : "Preparing upload...";
value > 0 ? value.toFixed(0) + "MB of " + max + "MB" : "Press start";
$: if (value === max) helperText = "Done";
</script>
@ -34,3 +15,30 @@
max="{max}"
helperText="{helperText}"
/>
<ButtonSet style="margin-top: var(--cds-spacing-08)">
<Button
disabled="{value > 0}"
on:click="{() => {
const interval = setInterval(() => {
const delta = Math.random() * 10;
if (value + delta < max) {
value += delta;
} else {
value = max;
clearInterval(interval);
}
}, 30);
}}"
>
Start
</Button>
<Button
kind="tertiary"
disabled="{value !== max}"
on:click="{() => (value = 0)}"
>
Reset
</Button>
</ButtonSet>

4
src/ProgressBar/ProgressBar.svelte
View file

@ -17,7 +17,9 @@
/** Specify the helper text */
export let helperText = "";
let id = "ccs-" + Math.random().toString(36);
/** Set an id for the progress bar element */
export let id = "ccs-" + Math.random().toString(36);
let helperId = "ccs-" + Math.random().toString(36);
$: indeterminate = value === undefined;

6
types/ProgressBar/ProgressBar.d.ts vendored
View file

@ -31,6 +31,12 @@ export interface ProgressBarProps
* @default ""
*/
helperText?: string;
/**
* Set an id for the progress bar element
* @default "ccs-" + Math.random().toString(36)
*/
id?: string;
}
export default class ProgressBar extends SvelteComponentTyped<