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

fix(loading)!: remove redundant description label (#1783)

Browse source 
Fixes #1670
This commit is contained in:
Eric Liu 2023-07-23 14:07:55 -07:00 • committed by GitHub
commit d6804b44fe
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 25 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

25
COMPONENT_INDEX.md
View file

@ -1895,12 +1895,12 @@ None.
### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------ | ---------------------- | ----------------------------------------------------------------- |
| status | No | <code>let</code> | No | <code>"active" &#124; "inactive" &#124; "finished" &#124; "error"</code> | <code>"active"</code> | Set the loading status |
| description | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the loading description |
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the loading icon |
| successDelay | No | <code>let</code> | No | <code>number</code> | <code>1500</code> | Specify the timeout delay (ms) after `status` is set to "success" |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------ | ---------------------- | -------------------------------------------------------------------------------------------------------------------- |
| status | No | <code>let</code> | No | <code>"active" &#124; "inactive" &#124; "finished" &#124; "error"</code> | <code>"active"</code> | Set the loading status |
| description | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the loading description |
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a description for the loading icon.<br />Defaults to the `status` prop for the "error" and "finished" states |
| successDelay | No | <code>let</code> | No | <code>number</code> | <code>1500</code> | Specify the timeout delay (ms) after `status` is set to "success" |
### Slots
@ -2172,13 +2172,12 @@ None.
### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :---------- | :------- | :--------------- | :------- | -------------------- | ------------------------------------------------ | ------------------------------------------ |
| small | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the small variant |
| active | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to disable the active state |
| withOverlay | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to disable the overlay |
| description | No | <code>let</code> | No | <code>string</code> | <code>"Active loading indicator"</code> | Specify the label description |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the label element |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :---------- | :------- | :--------------- | :------- | -------------------- | ---------------------- | ----------------------------------------------------- |
| small | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the small variant |
| active | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to disable the active state |
| withOverlay | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to disable the overlay |
| description | No | <code>let</code> | No | <code>string</code> | <code>"loading"</code> | Specify the description to describe the loading state |
### Slots

18
docs/src/COMPONENT_API.json
View file

@ -5549,7 +5549,7 @@
{
"name": "iconDescription",
"kind": "let",
"description": "Specify the ARIA label for the loading icon",
"description": "Specify a description for the loading icon.\nDefaults to the `status` prop for the \"error\" and \"finished\" states",
"type": "string",
"isFunction": false,
"isFunctionDeclaration": false,
@ -6334,21 +6334,9 @@
{
"name": "description",
"kind": "let",
"description": "Specify the label description",
"description": "Specify the description to describe the loading state",
"type": "string",
"value": "\"Active loading indicator\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "id",
"kind": "let",
"description": "Set an id for the label element",
"type": "string",
"value": "\"ccs-\" + Math.random().toString(36)",
"value": "\"loading\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,

7
src/InlineLoading/InlineLoading.svelte
View file

@ -12,7 +12,8 @@
export let description = undefined;
/**
* Specify the ARIA label for the loading icon
* Specify a description for the loading icon.
* Defaults to the `status` prop for the "error" and "finished" states
* @type {string}
*/
export let iconDescription = undefined;
@ -59,12 +60,12 @@
{#if status === "error"}
<ErrorFilled
class="bx--inline-loading--error"
title="{iconDescription}"
title="{iconDescription || status}"
/>
{:else if status === "finished"}
<CheckmarkFilled
class="bx--inline-loading__checkmark-container"
title="{iconDescription}"
title="{iconDescription || status}"
/>
{:else if status === "inactive" || status === "active"}
<Loading

13
src/Loading/Loading.svelte
View file

@ -8,11 +8,8 @@
/** Set to `false` to disable the overlay */
export let withOverlay = true;
/** Specify the label description */
export let description = "Active loading indicator";
/** Set an id for the label element */
export let id = "ccs-" + Math.random().toString(36);
/** Specify the description to describe the loading state */
export let description = "loading";
$: spinnerRadius = small ? "42" : "44";
</script>
@ -25,14 +22,11 @@
>
<div
aria-atomic="true"
aria-labelledby="{id}"
aria-live="{active ? 'assertive' : 'off'}"
class:bx--loading="{true}"
class:bx--loading--small="{small}"
class:bx--loading--stop="{!active}"
>
<!-- svelte-ignore a11y-label-has-associated-control -->
<label class:bx--visually-hidden="{true}" id="{id}">{description}</label>
<svg class:bx--loading__svg="{true}" viewBox="0 0 100 100">
<title>{description}</title>
{#if small}
@ -53,15 +47,12 @@
{:else}
<div
aria-atomic="true"
aria-labelledby="{id}"
aria-live="{active ? 'assertive' : 'off'}"
class:bx--loading="{true}"
class:bx--loading--small="{small}"
class:bx--loading--stop="{!active}"
{...$$restProps}
>
<!-- svelte-ignore a11y-label-has-associated-control -->
<label class:bx--visually-hidden="{true}" id="{id}">{description}</label>
<svg class:bx--loading__svg="{true}" viewBox="0 0 100 100">
<title>{description}</title>
{#if small}

3
types/InlineLoading/InlineLoading.svelte.d.ts vendored
View file

@ -17,7 +17,8 @@ export interface InlineLoadingProps extends RestProps {
description?: string;
/**
* Specify the ARIA label for the loading icon
* Specify a description for the loading icon.
* Defaults to the `status` prop for the "error" and "finished" states
* @default undefined
*/
iconDescription?: string;

10
types/Loading/Loading.svelte.d.ts vendored
View file

@ -23,17 +23,11 @@ export interface LoadingProps extends RestProps {
withOverlay?: boolean;
/**
* Specify the label description
* @default "Active loading indicator"
* Specify the description to describe the loading state
* @default "loading"
*/
description?: string;
/**
* Set an id for the label element
* @default "ccs-" + Math.random().toString(36)
*/
id?: string;
[key: `data-${string}`]: any;
}