fix(Loading): wc parity issues

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';
@@ -60,7 +59,7 @@ class CDSInlineLoading extends LitElement {
       });
       return html`
         <div class="${classes}">
-          ${getLoadingIcon({ assistiveText, type: LOADING_TYPE.SMALL })}
+          ${getLoadingIcon({ description: assistiveText, small: true })}
         </div>
       `;
     }

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%"

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;
 }
 

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>
   `,
 };

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';
-
+  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';
   /**
-   * Spinner type.
+   *
+   * @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,34 @@ 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;
   }