Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(Loading): wc parity issues #18343

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Original file line number Diff line number Diff line change
@@ -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>
`;
}
15 changes: 7 additions & 8 deletions packages/web-components/src/components/loading/loading-icon.ts
Original file line number Diff line number Diff line change
@@ -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%"
4 changes: 2 additions & 2 deletions packages/web-components/src/components/loading/loading.scss
Original file line number Diff line number Diff line change
@@ -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;
}

33 changes: 21 additions & 12 deletions packages/web-components/src/components/loading/loading.stories.ts
Original file line number Diff line number Diff line change
@@ -18,24 +18,26 @@ 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: {
description: {
control: 'text',
description: `Specify a description that would be used to best describe the loading state.`,
},
type: {
control: 'radio',
options: types,
description: `Specify the spinner type.`,
small: {
control: 'boolean',
description: 'Specify whether you would like the small variant of',
},
withOverlay: {
control: 'boolean',
@@ -44,17 +46,24 @@ const controls = {
};

export const Default = {
render: () => html` <cds-loading></cds-loading> `,
};

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>
`,
};
58 changes: 48 additions & 10 deletions packages/web-components/src/components/loading/loading.ts
Original file line number Diff line number Diff line change
@@ -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;
}