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

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 ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | 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 | | 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 | | 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 | | 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" | | successDelay | No | <code>let</code> | No | <code>number</code> | <code>1500</code> | Specify the timeout delay (ms) after `status` is set to "success" |
### Slots ### Slots
@ -2172,13 +2172,12 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | 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 | | 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 | | 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 | | 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 | | description | No | <code>let</code> | No | <code>string</code> | <code>"loading"</code> | Specify the description to describe the loading state |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the label element |
### Slots ### Slots

18
docs/src/COMPONENT_API.json
View file

@ -5549,7 +5549,7 @@
{ {
"name": "iconDescription", "name": "iconDescription",
"kind": "let", "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", "type": "string",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -6334,21 +6334,9 @@
{ {
"name": "description", "name": "description",
"kind": "let", "kind": "let",
"description": "Specify the label description", "description": "Specify the description to describe the loading state",
"type": "string", "type": "string",
"value": "\"Active loading indicator\"", "value": "\"loading\"",
"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)",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,

7
src/InlineLoading/InlineLoading.svelte
View file

@ -12,7 +12,8 @@
export let description = undefined; 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} * @type {string}
*/ */
export let iconDescription = undefined; export let iconDescription = undefined;
@ -59,12 +60,12 @@
{#if status === "error"} {#if status === "error"}
<ErrorFilled <ErrorFilled
class="bx--inline-loading--error" class="bx--inline-loading--error"
title="{iconDescription}" title="{iconDescription || status}"
/> />
{:else if status === "finished"} {:else if status === "finished"}
<CheckmarkFilled <CheckmarkFilled
class="bx--inline-loading__checkmark-container" class="bx--inline-loading__checkmark-container"
title="{iconDescription}" title="{iconDescription || status}"
/> />
{:else if status === "inactive" || status === "active"} {:else if status === "inactive" || status === "active"}
<Loading <Loading

13
src/Loading/Loading.svelte
View file

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

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

@ -17,7 +17,8 @@ export interface InlineLoadingProps extends RestProps {
description?: string; 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 * @default undefined
*/ */
iconDescription?: string; iconDescription?: string;

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

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