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

Align v10.54 (#1133)

Browse source 
* chore(deps-dev): bump carbon-components to v10.54.0

* feat(progress-bar): add size prop

* docs(progress-bar): add "Small size" example

* docs(progress-bar): add descriptions

* refactor(structured-list): remove monkey patch

* feat(radio-button-group): add hideLegend prop

* docs(radio-button): add "Hidden legend" example
This commit is contained in:
metonym 2022-02-26 11:26:31 -08:00 • committed by GitHub
commit a3d116215d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 90 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

18
COMPONENT_INDEX.md
View file

@ -2903,14 +2903,15 @@ 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 |
| 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 |
| 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
@ -3040,6 +3041,7 @@ None.
| selected | <code>let</code> | Yes | <code>string</code> | <code>undefined</code> | Set the selected radio button value |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the radio buttons |
| legendText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the legend text |
| hideLegend | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the legend |
| labelPosition | <code>let</code> | No | <code>"right" &#124; "left"</code> | <code>"right"</code> | Specify the label position |
| orientation | <code>let</code> | No | <code>"horizontal" &#124; "vertical"</code> | <code>"horizontal"</code> | Specify the orientation of the radio buttons |
| id | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set an id for the container div element |

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.53.0",
"carbon-components": "10.54.0",
"carbon-components-10.47": "npm:carbon-components@10.47",
"carbon-components-svelte": "../",
"carbon-icons-svelte": "^10.44.3",

22
docs/src/COMPONENT_API.json
View file

@ -8354,6 +8354,17 @@
"constant": false,
"reactive": false
},
{
"name": "size",
"kind": "let",
"description": "Specify the size",
"type": "\"sm\" | \"md\"",
"value": "\"md\"",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "labelText",
"kind": "let",
@ -8782,6 +8793,17 @@
"constant": false,
"reactive": false
},
{
"name": "hideLegend",
"kind": "let",
"description": "Set to `true` to visually hide the legend",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "labelPosition",
"kind": "let",

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

@ -9,8 +9,16 @@ Without a specified `value` prop, the progress bar is indeterminate.
<ProgressBar helperText="Loading..." />
### Small size
Specify `size="sm"` to use the small variant.
<ProgressBar size="sm" helperText="Loading..." />
### Percentage
Specify a `value` for the progress bar to be determinate.
<ProgressBar value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
### Custom max value
@ -21,6 +29,10 @@ The default `max` value is `100`.
### Hidden label
It's recommended that you provide a `labelText` for accessibility.
Use `hideLabel` to visually hide the label text.
<ProgressBar hideLabel value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
### UX example

12
docs/src/pages/components/RadioButton.svx
View file

@ -41,6 +41,18 @@ Use the named "legendText" slot to customize the legend text.
<RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>
### Hidden legend
It's recommended that you provide a legend for accessibility.
Use `hideLegend` to visually hide the legend text.
<RadioButtonGroup hideLegend legendText="Storage tier (disk)" selected="standard">
<RadioButton labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>
### Reactive example
Use the `selected` prop to bind and update the selected value.

8
docs/yarn.lock
View file

@ -471,10 +471,10 @@ carbon-components-svelte@../:
dependencies:
flatpickr "4.6.9"
carbon-components@10.53.0:
version "10.53.0"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.53.0.tgz#260d77550a6f33b6cf69e3e61ce0be8089308f48"
integrity sha512-w1my4Jm//CYeraDM002TT/rMULxDSJ8wG0MCWPHGXFF/9OPHVGWo9idbLppM3lCS/PMfl/gpLvfpUVedFr7Yfw==
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==
dependencies:
"@carbon/telemetry" "0.0.0-alpha.6"
flatpickr "4.6.1"

2
package.json
View file

@ -29,7 +29,7 @@
"@rollup/plugin-node-resolve": "^11.1.1",
"@tsconfig/svelte": "^1.0.10",
"autoprefixer": "^10.2.4",
"carbon-components": "10.53.0",
"carbon-components": "10.54.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 size
* @type {"sm" | "md"}
*/
export let size = "md";
/** Specify the label text */
export let labelText = "";
@ -29,6 +35,8 @@
<div
class:bx--progress-bar="{true}"
class:bx--progress-bar--indeterminate="{indeterminate}"
class:bx--progress-bar--big="{size === 'md'}"
class:bx--progress-bar--small="{size === 'sm'}"
{...$$restProps}
>
<label

5
src/RadioButtonGroup/RadioButtonGroup.svelte
View file

@ -11,6 +11,9 @@
/** Specify the legend text */
export let legendText = "";
/** Set to `true` to visually hide the legend */
export let hideLegend = false;
/**
* Specify the label position
* @type {"right" | "left"}
@ -84,7 +87,7 @@
disabled="{disabled}"
>
{#if legendText || $$slots.legendText}
<legend class:bx--label="{true}">
<legend class:bx--label="{true}" class:bx--visually-hidden="{hideLegend}">
<slot name="legendText">{legendText}</slot>
</legend>
{/if}

1
src/StructuredList/StructuredList.svelte
View file

@ -46,7 +46,6 @@
class:bx--structured-list--condensed="{condensed}"
class:bx--structured-list--flush="{flush}"
{...$$restProps}
style="overflow-y: visible; {$$restProps.style}"
on:click
on:mouseover
on:mouseenter

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

@ -15,6 +15,12 @@ export interface ProgressBarProps
*/
max?: number;
/**
* Specify the size
* @default "md"
*/
size?: "sm" | "md";
/**
* Specify the label text
* @default ""

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

@ -21,6 +21,12 @@ export interface RadioButtonGroupProps
*/
legendText?: string;
/**
* Set to `true` to visually hide the legend
* @default false
*/
hideLegend?: boolean;
/**
* Specify the label position
* @default "right"

8
yarn.lock
View file

@ -469,10 +469,10 @@ caniuse-lite@^1.0.30001181:
lodash.debounce "^4.0.8"
warning "^3.0.0"
carbon-components@10.53.0:
version "10.53.0"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.53.0.tgz#260d77550a6f33b6cf69e3e61ce0be8089308f48"
integrity sha512-w1my4Jm//CYeraDM002TT/rMULxDSJ8wG0MCWPHGXFF/9OPHVGWo9idbLppM3lCS/PMfl/gpLvfpUVedFr7Yfw==
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==
dependencies:
"@carbon/telemetry" "0.0.0-alpha.6"
flatpickr "4.6.1"