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

feat: upgrade carbon-components to v10.56.0 (#1213)

Browse source 
* chore(deps-dev): upgrade carbon-components to v10.56.0

* feat(progress-bar): add kind prop

* Run "yarn build:docs"

* test(progress-bar): assert kind prop
This commit is contained in:
metonym 2022-03-27 08:27:23 -07:00 • committed by GitHub
commit ade0557448
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 71 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

19
COMPONENT_INDEX.md
View file

@ -2788,15 +2788,16 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :--------- | :--------------- | :------- | :---------------------------- | ------------------------------------------------ | --------------------------------------------- |
| value | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the current value |
| max | <code>let</code> | No | <code>number</code> | <code>100</code> | Specify the maximum value |
| size | <code>let</code> | No | <code>"sm" &#124; "md"</code> | <code>"md"</code> | Specify the size |
| 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 |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :--------- | :--------------- | :------- | :------------------------------------------------------- | ------------------------------------------------ | --------------------------------------------- |
| value | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the current value |
| max | <code>let</code> | No | <code>number</code> | <code>100</code> | Specify the maximum value |
| kind | <code>let</code> | No | <code>"default" &#124; "inline" &#124; "indented"</code> | <code>"default"</code> | Specify the kind of progress bar |
| size | <code>let</code> | No | <code>"sm" &#124; "md"</code> | <code>"md"</code> | Specify the size |
| 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

2
docs/package.json
View file

@ -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",

11
docs/src/COMPONENT_API.json
View file

@ -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",

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

@ -35,6 +35,16 @@ Use `hideLabel` to visually hide the label text.
<ProgressBar hideLabel value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
### Inline variant
The inline variant visually hides the `helperText`.
<ProgressBar kind="inline" value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
### Indented variant
<ProgressBar kind="indented" 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.

17
docs/yarn.lock
View file

@ -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"

2
package.json
View file

@ -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",

8
src/ProgressBar/ProgressBar.svelte
View file

@ -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}
>
<label

16
tests/ProgressBar.test.svelte
View file

@ -5,21 +5,11 @@
<ProgressBar helperText="Loading..." />
<ProgressBar
kind="inline"
size="md"
value="{40}"
max="{100}"
labelText="Upload status"
helperText="40 MB of 100 MB"
/>
<ProgressBar
value="{40}"
max="{200}"
labelText="Upload status"
helperText="40 MB of 100 MB"
/>
<ProgressBar
hideLabel
value="{40}"
labelText="Upload status"
helperText="40 MB of 100 MB"
/>

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

@ -15,6 +15,12 @@ export interface ProgressBarProps
*/
max?: number;
/**
* Specify the kind of progress bar
* @default "default"
*/
kind?: "default" | "inline" | "indented";
/**
* Specify the size
* @default "md"

15
yarn.lock
View file

@ -121,6 +121,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"
@ -464,12 +469,12 @@ caniuse-lite@^1.0.30001297, caniuse-lite@^1.0.30001313:
lodash.debounce "^4.0.8"
warning "^3.0.0"
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"