diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index e78b10dc23..d23aef9339 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1895,12 +1895,12 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------ | ---------------------- | ----------------------------------------------------------------- | -| status | No | let | No | "active" | "inactive" | "finished" | "error" | "active" | Set the loading status | -| description | No | let | No | string | undefined | Set the loading description | -| iconDescription | No | let | No | string | undefined | Specify the ARIA label for the loading icon | -| successDelay | No | let | No | number | 1500 | Specify the timeout delay (ms) after `status` is set to "success" | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------ | ---------------------- | -------------------------------------------------------------------------------------------------------------------- | +| status | No | let | No | "active" | "inactive" | "finished" | "error" | "active" | Set the loading status | +| description | No | let | No | string | undefined | Set the loading description | +| iconDescription | No | let | No | string | undefined | Specify a description for the loading icon.
Defaults to the `status` prop for the "error" and "finished" states | +| successDelay | No | let | No | number | 1500 | 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 | let | No | boolean | false | Set to `true` to use the small variant | -| active | No | let | No | boolean | true | Set to `false` to disable the active state | -| withOverlay | No | let | No | boolean | true | Set to `false` to disable the overlay | -| description | No | let | No | string | "Active loading indicator" | Specify the label description | -| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the label element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :---------- | :------- | :--------------- | :------- | -------------------- | ---------------------- | ----------------------------------------------------- | +| small | No | let | No | boolean | false | Set to `true` to use the small variant | +| active | No | let | No | boolean | true | Set to `false` to disable the active state | +| withOverlay | No | let | No | boolean | true | Set to `false` to disable the overlay | +| description | No | let | No | string | "loading" | Specify the description to describe the loading state | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index d5be4edcc3..3c2338c6cb 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -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, diff --git a/src/InlineLoading/InlineLoading.svelte b/src/InlineLoading/InlineLoading.svelte index 277636eaea..a560cb1ab5 100644 --- a/src/InlineLoading/InlineLoading.svelte +++ b/src/InlineLoading/InlineLoading.svelte @@ -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"} {:else if status === "finished"} {:else if status === "inactive" || status === "active"} @@ -25,14 +22,11 @@ >
- - {description} {#if small} @@ -53,15 +47,12 @@ {:else}
- - {description} {#if small} diff --git a/types/InlineLoading/InlineLoading.svelte.d.ts b/types/InlineLoading/InlineLoading.svelte.d.ts index d137980b18..215a989eb0 100644 --- a/types/InlineLoading/InlineLoading.svelte.d.ts +++ b/types/InlineLoading/InlineLoading.svelte.d.ts @@ -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; diff --git a/types/Loading/Loading.svelte.d.ts b/types/Loading/Loading.svelte.d.ts index e4e39d8507..f86fd565df 100644 --- a/types/Loading/Loading.svelte.d.ts +++ b/types/Loading/Loading.svelte.d.ts @@ -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; }