From 38cfa3266b68df43137fea1a925b6f517dd01a54 Mon Sep 17 00:00:00 2001
From: Amal K Joy <amal.joy.k@gmail.com>
Date: Tue, 14 Jan 2025 16:44:38 +0530
Subject: [PATCH 1/5] fix(Loading): parity issues

---
 .../src/components/loading/loading-icon.ts    | 15 +++--
 .../src/components/loading/loading.scss       |  4 +-
 .../src/components/loading/loading.stories.ts | 42 ++++++++++---
 .../src/components/loading/loading.ts         | 62 +++++++++++++++----
 4 files changed, 95 insertions(+), 28 deletions(-)

diff --git a/packages/web-components/src/components/loading/loading-icon.ts b/packages/web-components/src/components/loading/loading-icon.ts
index 5e95a4118ee5..b53e9a14fb13 100644
--- a/packages/web-components/src/components/loading/loading-icon.ts
+++ b/packages/web-components/src/components/loading/loading-icon.ts
@@ -9,7 +9,6 @@
 
 import { html } from 'lit';
 import { prefix } from '../../globals/settings';
-import LOADING_TYPE from './types';
 
 /**
  * @param Object options The options.
@@ -18,18 +17,18 @@ import LOADING_TYPE from './types';
  * @returns The spinner icon.
  */
 export default ({
-  assistiveText,
-  type,
+  description,
+  small,
 }: {
-  assistiveText?: string;
-  type?: string;
+  description?: string;
+  small?: boolean;
 }) => {
-  const radius = type === LOADING_TYPE.SMALL ? '42' : '44';
+  const radius = small ? '42' : '44';
   return html`
     <svg class="${prefix}--loading__svg" viewBox="0 0 100 100">
-      ${!assistiveText ? undefined : html` <title>${assistiveText}</title> `}
+      ${!description ? undefined : html` <title>${description}</title> `}
       <circle
-        ?hidden="${type !== LOADING_TYPE.SMALL}"
+        ?hidden="${!small}"
         class="${prefix}--loading__background"
         cx="50%"
         cy="50%"
diff --git a/packages/web-components/src/components/loading/loading.scss b/packages/web-components/src/components/loading/loading.scss
index 4f1a28ff4f77..690480e22444 100644
--- a/packages/web-components/src/components/loading/loading.scss
+++ b/packages/web-components/src/components/loading/loading.scss
@@ -24,11 +24,11 @@ $css--plex: true !default;
   animation: none;
 }
 
-:host(#{$prefix}-loading[type='small']) {
+:host(#{$prefix}-loading[small]) {
   @extend .#{$prefix}--loading--small;
 }
 
-:host(#{$prefix}-loading[inactive]) {
+:host(#{$prefix}-loading:not([active])) {
   @extend .#{$prefix}--loading--stop;
 }
 
diff --git a/packages/web-components/src/components/loading/loading.stories.ts b/packages/web-components/src/components/loading/loading.stories.ts
index 1124086457b6..70c3e81043e2 100644
--- a/packages/web-components/src/components/loading/loading.stories.ts
+++ b/packages/web-components/src/components/loading/loading.stories.ts
@@ -18,24 +18,41 @@ const types = {
 
 const defaultArgs = {
   inactive: false,
+  active: true,
   assistiveText: 'Loading',
+  description: 'Loading',
   type: null,
   withOverlay: false,
+  small: false,
 };
 
 const controls = {
-  inactive: {
+  active: {
     control: 'boolean',
-    description: `Specify whether the component should be inactive, or not.`,
+    description: `Specify whether the component should be active, or not.`,
   },
-  assistiveText: {
+  inactive: {
+    description:
+      ' The `inactive` property will be deprecated in the next major release. Please use `active` instead.',
+    control: false,
+  },
+  description: {
     control: 'text',
     description: `Specify a description that would be used to best describe the loading state.`,
   },
+  assistiveText: {
+    control: false,
+    description:
+      ' The `assistiveText` property will be deprecated in the next major release. Please use `description` instead.',
+  },
   type: {
-    control: 'radio',
-    options: types,
-    description: `Specify the spinner type.`,
+    control: false,
+    description:
+      ' The `type` property will be deprecated in the next major release. Please use `small` instead.',
+  },
+  small: {
+    control: 'boolean',
+    description: 'Specify whether you would like the small variant of',
   },
   withOverlay: {
     control: 'boolean',
@@ -50,11 +67,22 @@ export const Default = {
 export const Playground = {
   args: defaultArgs,
   argTypes: controls,
-  render: ({ inactive, assistiveText, type, withOverlay }) => html`
+  render: ({
+    active,
+    inactive,
+    assistiveText,
+    description,
+    type,
+    withOverlay,
+    small,
+  }) => html`
     <cds-loading
       ?inactive=${inactive}
+      ?active=${active}
+      description=${description}
       assistive-text=${assistiveText}
       type=${ifDefined(type)}
+      ?small=${small}
       ?overlay=${withOverlay}></cds-loading>
   `,
 };
diff --git a/packages/web-components/src/components/loading/loading.ts b/packages/web-components/src/components/loading/loading.ts
index 7b44cf3d0cf1..cc38463d816a 100644
--- a/packages/web-components/src/components/loading/loading.ts
+++ b/packages/web-components/src/components/loading/loading.ts
@@ -21,19 +21,40 @@ import { carbonElement as customElement } from '../../globals/decorators/carbon-
  *
  * @element cds-loading
  */
+
 @customElement(`${prefix}-loading`)
 class CDSLoading extends LitElement {
   /**
-   * The assistive text for the spinner icon.
+ * @deprecated The 'assistive-text' property will be deprecated in the next major release. Please use `description` instead.
    */
   @property({ attribute: 'assistive-text' })
-  assistiveText = 'Loading';
-
-  /**
-   * Spinner type.
+  get assistiveText() {
+    return this.description;
+  }
+  set assistiveText(value) {
+    this.description = value;
+  }
+    /**
+   * Specify a description that would be used to best describe the loading state
    */
+    @property({ reflect: true })
+    description = 'Loading';
+ /**
+ *
+ * @deprecated The 'type' property will be deprecated in the next major release. Please use `small` instead.
+ */
   @property()
-  type = LOADING_TYPE.REGULAR;
+  get type() {
+    return this.small ? LOADING_TYPE.SMALL : LOADING_TYPE.REGULAR;
+  }
+  set type(value) {
+    this.small = value == LOADING_TYPE.SMALL;
+  }
+/**
+ * Specify whether you would like the small variant of <Loading>
+ */
+  @property({ type: Boolean, reflect: true })
+  small = false;
 
   /**
    * `true` if overlay should be applied.
@@ -44,17 +65,36 @@ class CDSLoading extends LitElement {
   /**
    * `true` if spinner should stop.
    */
+
+   /**
+ *
+ * @deprecated The 'inactive' property will be deprecated in the next major release. Please use `active` instead.
+ */
+  @property({ type: Boolean, reflect: true })
+  get inactive(): Boolean {
+    return this.active;
+  }
+
+  set inactive(value: boolean) {
+    this.active = value;
+  }
+ /**
+   * Specify whether you want the loading indicator to be spinning or not
+   */
   @property({ type: Boolean, reflect: true })
-  inactive = false;
+  active = false;
+
+ 
 
   render() {
-    const { inactive, assistiveText, type, overlay } = this;
+    const { active, description, small, overlay } = this;
+    
     const innerClasses = classMap({
       [`${prefix}--loading`]: true,
-      [`${prefix}--loading--stop`]: inactive,
-      [`${prefix}--loading--small`]: type === LOADING_TYPE.SMALL,
+      [`${prefix}--loading--stop`]: !active,
+      [`${prefix}--loading--small`]: small,
     });
-    const icon = getLoadingIcon({ assistiveText, type });
+    const icon = getLoadingIcon({ description, small });
     return overlay ? html`<div class="${innerClasses}">${icon}</div>` : icon;
   }
 

From 59c9648b6c4f89a8606aaee6ab6ae4e1dd214822 Mon Sep 17 00:00:00 2001
From: Amal K Joy <amal.joy.k@gmail.com>
Date: Tue, 14 Jan 2025 16:57:56 +0530
Subject: [PATCH 2/5] fix(Loading): yarn format

---
 .../src/components/loading/loading.ts         | 36 +++++++++----------
 1 file changed, 17 insertions(+), 19 deletions(-)

diff --git a/packages/web-components/src/components/loading/loading.ts b/packages/web-components/src/components/loading/loading.ts
index cc38463d816a..8e3e600f430b 100644
--- a/packages/web-components/src/components/loading/loading.ts
+++ b/packages/web-components/src/components/loading/loading.ts
@@ -25,7 +25,7 @@ import { carbonElement as customElement } from '../../globals/decorators/carbon-
 @customElement(`${prefix}-loading`)
 class CDSLoading extends LitElement {
   /**
- * @deprecated The 'assistive-text' property will be deprecated in the next major release. Please use `description` instead.
+   * @deprecated The 'assistive-text' property will be deprecated in the next major release. Please use `description` instead.
    */
   @property({ attribute: 'assistive-text' })
   get assistiveText() {
@@ -34,15 +34,15 @@ class CDSLoading extends LitElement {
   set assistiveText(value) {
     this.description = value;
   }
-    /**
+  /**
    * Specify a description that would be used to best describe the loading state
    */
-    @property({ reflect: true })
-    description = 'Loading';
- /**
- *
- * @deprecated The 'type' property will be deprecated in the next major release. Please use `small` instead.
- */
+  @property({ reflect: true })
+  description = 'Loading';
+  /**
+   *
+   * @deprecated The 'type' property will be deprecated in the next major release. Please use `small` instead.
+   */
   @property()
   get type() {
     return this.small ? LOADING_TYPE.SMALL : LOADING_TYPE.REGULAR;
@@ -50,9 +50,9 @@ class CDSLoading extends LitElement {
   set type(value) {
     this.small = value == LOADING_TYPE.SMALL;
   }
-/**
- * Specify whether you would like the small variant of <Loading>
- */
+  /**
+   * Specify whether you would like the small variant of <Loading>
+   */
   @property({ type: Boolean, reflect: true })
   small = false;
 
@@ -66,10 +66,10 @@ class CDSLoading extends LitElement {
    * `true` if spinner should stop.
    */
 
-   /**
- *
- * @deprecated The 'inactive' property will be deprecated in the next major release. Please use `active` instead.
- */
+  /**
+   *
+   * @deprecated The 'inactive' property will be deprecated in the next major release. Please use `active` instead.
+   */
   @property({ type: Boolean, reflect: true })
   get inactive(): Boolean {
     return this.active;
@@ -78,17 +78,15 @@ class CDSLoading extends LitElement {
   set inactive(value: boolean) {
     this.active = value;
   }
- /**
+  /**
    * Specify whether you want the loading indicator to be spinning or not
    */
   @property({ type: Boolean, reflect: true })
   active = false;
 
- 
-
   render() {
     const { active, description, small, overlay } = this;
-    
+
     const innerClasses = classMap({
       [`${prefix}--loading`]: true,
       [`${prefix}--loading--stop`]: !active,

From fa4fd9ae450efca57496ebec1ffef30d1589abc2 Mon Sep 17 00:00:00 2001
From: Amal K Joy <amal.joy.k@gmail.com>
Date: Fri, 17 Jan 2025 12:30:19 +0530
Subject: [PATCH 3/5] fix(Loading): check failure fix

---
 .../src/components/inline-loading/inline-loading.ts             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-components/src/components/inline-loading/inline-loading.ts b/packages/web-components/src/components/inline-loading/inline-loading.ts
index d37b46085158..6bf83766dccb 100644
--- a/packages/web-components/src/components/inline-loading/inline-loading.ts
+++ b/packages/web-components/src/components/inline-loading/inline-loading.ts
@@ -60,7 +60,7 @@ class CDSInlineLoading extends LitElement {
       });
       return html`
         <div class="${classes}">
-          ${getLoadingIcon({ assistiveText, type: LOADING_TYPE.SMALL })}
+          ${getLoadingIcon({ description: assistiveText, small: true })}
         </div>
       `;
     }

From 93edee5249ed19812f4a20586efb776577008f2e Mon Sep 17 00:00:00 2001
From: Amal K Joy <amal.joy.k@gmail.com>
Date: Fri, 17 Jan 2025 14:11:25 +0530
Subject: [PATCH 4/5] fix(Loading): check failure fix2

---
 .../src/components/inline-loading/inline-loading.ts              | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/web-components/src/components/inline-loading/inline-loading.ts b/packages/web-components/src/components/inline-loading/inline-loading.ts
index 6bf83766dccb..0d5ecfd425b0 100644
--- a/packages/web-components/src/components/inline-loading/inline-loading.ts
+++ b/packages/web-components/src/components/inline-loading/inline-loading.ts
@@ -13,7 +13,6 @@ import { classMap } from 'lit/directives/class-map.js';
 import CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16.js';
 import ErrorFilled16 from '@carbon/icons/lib/error--filled/16.js';
 import { prefix } from '../../globals/settings';
-import LOADING_TYPE from '../loading/types';
 import getLoadingIcon from '../loading/loading-icon';
 import { INLINE_LOADING_STATE } from './defs';
 import styles from './inline-loading.scss?lit';

From 6fda84d5a076d586395d8997bd741022be1d25ca Mon Sep 17 00:00:00 2001
From: Amal K Joy <amal.joy.k@gmail.com>
Date: Fri, 17 Jan 2025 15:19:43 +0530
Subject: [PATCH 5/5] fix: correct return types

---
 packages/web-components/src/components/loading/loading.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/web-components/src/components/loading/loading.ts b/packages/web-components/src/components/loading/loading.ts
index 8e3e600f430b..d7f3212677f4 100644
--- a/packages/web-components/src/components/loading/loading.ts
+++ b/packages/web-components/src/components/loading/loading.ts
@@ -71,12 +71,12 @@ class CDSLoading extends LitElement {
    * @deprecated The 'inactive' property will be deprecated in the next major release. Please use `active` instead.
    */
   @property({ type: Boolean, reflect: true })
-  get inactive(): Boolean {
-    return this.active;
+  get inactive(): boolean {
+    return !this.active;
   }
 
   set inactive(value: boolean) {
-    this.active = value;
+    this.active = !value;
   }
   /**
    * Specify whether you want the loading indicator to be spinning or not