diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 1d5478a7..989b3da3 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -2788,15 +2788,16 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------- | :--------------- | :------- | :---------------------------- | ------------------------------------------------ | --------------------------------------------- | -| value | let | No | number | undefined | Specify the current value | -| max | let | No | number | 100 | Specify the maximum value | -| size | let | No | "sm" | "md" | "md" | Specify the size | -| labelText | let | No | string | "" | Specify the label text | -| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | -| helperText | let | No | string | "" | Specify the helper text | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the progress bar element | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :--------- | :--------------- | :------- | :------------------------------------------------------- | ------------------------------------------------ | --------------------------------------------- | +| value | let | No | number | undefined | Specify the current value | +| max | let | No | number | 100 | Specify the maximum value | +| kind | let | No | "default" | "inline" | "indented" | "default" | Specify the kind of progress bar | +| size | let | No | "sm" | "md" | "md" | Specify the size | +| labelText | let | No | string | "" | Specify the label text | +| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | +| helperText | let | No | string | "" | Specify the helper text | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the progress bar element | ### Slots diff --git a/docs/package.json b/docs/package.json index 7d4c6515..9095bf17 100644 --- a/docs/package.json +++ b/docs/package.json @@ -12,7 +12,7 @@ "@sveltech/routify": "^1.9.9", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.33", "autoprefixer": "^10.2.3", - "carbon-components": "10.54.0", + "carbon-components": "10.56.0", "carbon-components-10.47": "npm:carbon-components@10.47", "carbon-components-svelte": "../", "carbon-icons-svelte": "^10.44.3", diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 64b49dd2..57038afb 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -8260,6 +8260,17 @@ "constant": false, "reactive": false }, + { + "name": "kind", + "kind": "let", + "description": "Specify the kind of progress bar", + "type": "\"default\" | \"inline\" | \"indented\"", + "value": "\"default\"", + "isFunction": false, + "isFunctionDeclaration": false, + "constant": false, + "reactive": false + }, { "name": "size", "kind": "let", diff --git a/docs/src/pages/components/ProgressBar.svx b/docs/src/pages/components/ProgressBar.svx index e24a46f1..4cd09440 100644 --- a/docs/src/pages/components/ProgressBar.svx +++ b/docs/src/pages/components/ProgressBar.svx @@ -35,6 +35,16 @@ Use `hideLabel` to visually hide the label text. +### Inline variant + +The inline variant visually hides the `helperText`. + + + +### Indented variant + + + ### UX example This example shows how to animate the progress bar from 0 to 100% with start and end states. diff --git a/docs/yarn.lock b/docs/yarn.lock index 9b1b1821..d4f0acc1 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -114,6 +114,11 @@ winston "^3.3.3" yargs "^16.1.1" +"@carbon/telemetry@0.1.0": + version "0.1.0" + resolved "https://registry.yarnpkg.com/@carbon/telemetry/-/telemetry-0.1.0.tgz#57b331cd5a855b4abbf55457456da8211624d879" + integrity sha512-kNWt0bkgPwGW0i5h7HFuljbKRXPvIhsKbB+1tEURAYLXoJg9iJLF1eGvWN5iVoFCS2zje4GR3OGOsvvKVe7Hlg== + "@dabh/diagnostics@^2.0.2": version "2.0.2" resolved "https://registry.npmjs.org/@dabh/diagnostics/-/diagnostics-2.0.2.tgz#290d08f7b381b8f94607dc8f471a12c675f9db31" @@ -467,16 +472,16 @@ caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178: warning "^3.0.0" carbon-components-svelte@../: - version "0.59.0" + version "0.62.2" dependencies: flatpickr "4.6.9" -carbon-components@10.54.0: - version "10.54.0" - resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.54.0.tgz#f70d0a9fcc7e84f8fb00a45b6b9894d77155acce" - integrity sha512-gl0b4wRG1E/ns02nG/M0FaNm4FCT91iTr1XFzqY+h1wFsjG1/2OOu7A6lth8Qtk0jsr//YZcB0MNjq8WFaFciw== +carbon-components@10.56.0: + version "10.56.0" + resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.56.0.tgz#bb5890f00f81cebcddfa2dbae4794477deb539f4" + integrity sha512-GPLqHiu2SWvMxcQOi/CcgA/XA3aX/5HiEPSQjLwzjKAJsnkpzq043Jf7QwgLOVbTBzGSjFbFkJnE2lc73I2WBw== dependencies: - "@carbon/telemetry" "0.0.0-alpha.6" + "@carbon/telemetry" "0.1.0" flatpickr "4.6.1" lodash.debounce "^4.0.8" warning "^3.0.0" diff --git a/package.json b/package.json index 6a5dd745..ccc96d4b 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "@rollup/plugin-node-resolve": "^13.1.3", "@tsconfig/svelte": "^3.0.0", "autoprefixer": "^10.4.2", - "carbon-components": "10.54.0", + "carbon-components": "10.56.0", "carbon-components-10.47": "npm:carbon-components@10.47", "carbon-icons-svelte": "^10.38.0", "husky": "^4.3.8", diff --git a/src/ProgressBar/ProgressBar.svelte b/src/ProgressBar/ProgressBar.svelte index f4b388a0..21ab66db 100644 --- a/src/ProgressBar/ProgressBar.svelte +++ b/src/ProgressBar/ProgressBar.svelte @@ -8,6 +8,12 @@ /** Specify the maximum value */ export let max = 100; + /** + * Specify the kind of progress bar + * @type {"default" | "inline" | "indented"} + */ + export let kind = "default"; + /** * Specify the size * @type {"sm" | "md"} @@ -37,6 +43,8 @@ class:bx--progress-bar--indeterminate="{indeterminate}" class:bx--progress-bar--big="{size === 'md'}" class:bx--progress-bar--small="{size === 'sm'}" + class:bx--progress-bar--inline="{kind === 'inline'}" + class:bx--progress-bar--indented="{kind === 'indented'}" {...$$restProps} >