feat(inline-loading): parity work

packages/web-components/src/components/inline-loading/inline-loading.mdx

@@ -42,6 +42,6 @@ import '@carbon/web-components/es/components/inline-loading/index.js';
 <cds-inline-loading status="active">Loading data...</cds-inline-loading>
 ```
 
-## `<cds-inline-loading>` attributes and properties
+## `<cds-inline-loading>` attributes, properties and events
 
 <ArgTypes of="cds-inline-loading" />

packages/web-components/src/components/inline-loading/inline-loading.stories.ts

@@ -9,6 +9,7 @@
 
 import { html } from 'lit';
 import { INLINE_LOADING_STATE } from './inline-loading';
+import { prefix } from '../../globals/settings';
 
 const states = {
   [`Inactive (${INLINE_LOADING_STATE.INACTIVE})`]:
@@ -19,44 +20,123 @@ const states = {
   [`Failed (${INLINE_LOADING_STATE.ERROR})`]: INLINE_LOADING_STATE.ERROR,
 };
 
+const noop = () => {};
 const defaultArgs = {
   description: 'Loading data...',
   assistiveText: 'Loading',
+  iconDescription: 'Loading',
   status: INLINE_LOADING_STATE.ACTIVE,
+  successDelay: 2000,
 };
 
-const controls = {
-  description: {
-    control: 'text',
-    description: 'Specify the description for the inline loading text.',
-  },
-  assistiveText: {
-    control: 'text',
-    description:
-      'Specify a description that would be used to best describe the loading state.',
-  },
-  status: {
-    control: 'select',
-    description: 'Specify the loading status.',
-    options: states,
-  },
+const getControls = ({ disableControl }) => {
+  return {
+    description: {
+      control: disableControl || 'text',
+      description: 'Specify the description for the inline loading text.',
+    },
+    iconDescription: {
+      control: disableControl || 'text',
+      description:
+        'Specify a description that would be used to best describe the loading state.',
+    },
+    status: {
+      control: disableControl || 'select',
+      description: 'Specify the loading status.',
+      options: states,
+    },
+    onSuccess: {
+      control: disableControl,
+      action: `${prefix}-inline-loading-onsuccess`,
+      description:
+        'Provide an optional handler to be invoked when is successful',
+    },
+  };
 };
 
 export const Default = {
-  render: () => html`<cds-inline-loading>Loading data...</cds-inline-loading>`,
+  args: defaultArgs,
+  argTypes: getControls({ disableControl: false }),
+  parameters: {
+    percy: { skip: true },
+  },
+  render: ({
+    assistiveText,
+    description,
+    status,
+    iconDescription,
+    onSuccess = noop,
+  }) => {
+    return html`
+      <cds-inline-loading
+        status="${status}"
+        success-delay=${2000}
+        assistive-text=${assistiveText}
+        icon-description=${iconDescription}
+        @cds-inline-loading-onsuccess=${onSuccess}
+        }>
+        ${description}
+      </cds-inline-loading>
+    `;
+  },
 };
-
-export const Playground = {
+export const UxExample = {
   args: defaultArgs,
-  argTypes: controls,
+  argTypes: getControls({ disableControl: true }),
   parameters: {
     percy: { skip: true },
   },
-  render: ({ assistiveText, description, status }) => html`
-    <cds-inline-loading status="${status}" assistive-text=${assistiveText}>
-      ${description}
-    </cds-inline-loading>
-  `,
+  render: ({ onSuccess = noop }) => {
+    const onSubmit = () => {
+      const submit = document.querySelector('#submit');
+      const cancel = document
+        .querySelector('#cancel')
+        ?.shadowRoot?.querySelector('button');
+      const loadingElem = document.querySelector('cds-inline-loading');
+
+      if (loadingElem) {
+        (loadingElem as HTMLElement).style.display = 'inherit';
+
+        loadingElem.setAttribute('status', 'active');
+        loadingElem.setAttribute('aria-live', 'assertive');
+      }
+
+      submit && ((submit as HTMLElement).style.display = 'none');
+
+      cancel && (cancel.disabled = true);
+
+      // Instead of making a real request, we mock it with a timer
+      setTimeout(() => {
+        loadingElem && loadingElem.setAttribute('status', 'finished');
+
+        // To make submittable again, we reset the state after a bit so the user gets completion feedback
+        setTimeout(() => {
+          loadingElem && ((loadingElem as HTMLElement).style.display = 'none');
+
+          submit && ((submit as HTMLElement).style.display = 'block');
+
+          cancel && (cancel.disabled = false);
+          loadingElem && loadingElem.setAttribute('aria-live', 'off');
+        }, 1500);
+      }, 2000);
+    };
+
+    return html`<div style="display:flex;width:300px">
+        <cds-button kind="secondary" id="cancel"> Cancel </cds-button>
+        <cds-button @click=${onSubmit} id="submit">Submit</cds-button>
+        <cds-inline-loading
+            style='display:none;margin-left:1rem'
+            success-delay=${2000}
+            icon-description='Submitting'
+            aria-live='off'
+            @cds-inline-loading-onsuccess=${onSuccess}
+            >
+           Submitting
+          </cds-inline-loading>
+
+       </div></div>
+        `;
+  },
 };
 
 const meta = {

packages/web-components/src/components/inline-loading/inline-loading.ts

@@ -24,28 +24,62 @@ export { INLINE_LOADING_STATE };
  * Lnline loading spinner.
  *
  * @element cds-inline-loading
+ * @fires cds-inline-loading-onsuccess The custom event fired when inline-loading has finished status
  */
 @customElement(`${prefix}-inline-loading`)
 class CDSInlineLoading extends LitElement {
   /**
-   * The assistive text for the spinner icon.
+   * @deprecated The 'assistive-text' property will be deprecated in the next major release. Please use `icon-description` instead.
    */
   @property({ attribute: 'assistive-text' })
-  assistiveText = 'Loading';
+  get assistiveText() {
+    return this.iconDescription;
+  }
+  set assistiveText(value) {
+    this.iconDescription = value;
+  }
+  /**
+   * The assistive text for the spinner icon.
+   */
+  @property({ attribute: 'icon-description' })
+  iconDescription = 'Loading';
+
+  /**
+   * Provide a delay for the setTimeout for success
+   */
+  @property({ attribute: 'success-delay' })
+  successDelay = 1500;
 
   /**
    * @returns The template for the status icon.
    */
   private _renderIcon() {
-    const { assistiveText, status } = this;
+    const { iconDescription, status } = this;
     if (status === INLINE_LOADING_STATE.ERROR) {
       return ErrorFilled16({
         class: `${prefix}--inline-loading--error`,
+        children: html`<title>${iconDescription}</title>`,
       });
     }
+    const init = {
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+    };
+
     if (status === INLINE_LOADING_STATE.FINISHED) {
+      setTimeout(() => {
+        this.dispatchEvent(
+          new CustomEvent(
+            (this.constructor as typeof CDSInlineLoading).eventOnSuccess,
+            init
+          )
+        );
+      }, this.successDelay);
+
       return CheckmarkFilled16({
         class: `${prefix}--inline-loading__checkmark-container`,
+        children: html`<title>${iconDescription}</title>`,
       });
     }
     if (
@@ -59,7 +93,7 @@ class CDSInlineLoading extends LitElement {
       });
       return html`
         <div class="${classes}">
-          ${getLoadingIcon({ description: assistiveText, small: true })}
+          ${getLoadingIcon({ description: iconDescription, small: true })}
         </div>
       `;
     }
@@ -72,6 +106,10 @@ class CDSInlineLoading extends LitElement {
   @property({ reflect: true })
   status = INLINE_LOADING_STATE.ACTIVE;
 
+  static get eventOnSuccess() {
+    return `${prefix}-inline-loading-onsuccess`;
+  }
+
   connectedCallback() {
     if (!this.hasAttribute('aria-live')) {
       this.setAttribute('aria-live', 'assertive');