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.

Sign up for GitHub

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(button, fab, inline-editable, split-button): prevent redundant opacity when button is both loading and disabled #8015

Merged
merged 1 commit into from
Oct 20, 2023
Merged

fix(button, fab, inline-editable, split-button): prevent redundant opacity when button is both loading and disabled #8015

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/calcite-components/src/components/button/button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@

@include disabled();

:host([loading]) {
:host([loading]:not([disabled])) {
@extend %non-interactive-host-contents;

button,
Expand Down
6 changes: 5 additions & 1 deletion packages/calcite-components/src/components/button/button.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,11 @@ export const setWidthContainer = (): string => html`
</div>
`;

export const disabled_TestOnly = (): string => html`<calcite-button disabled>disabled</calcite-button>`;
export const disabled_TestOnly = (): string => html`
<calcite-button disabled>disabled</calcite-button>
<br />
<calcite-button loading disabled>loading + disabled</calcite-button>
`;

export const withIconStartEmpty_TestOnly = (): string => html` <calcite-button icon-start> Button </calcite-button>`;

Expand Down
6 changes: 5 additions & 1 deletion packages/calcite-components/src/components/fab/fab.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,11 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({
};

export const simple = (): string => create("calcite-fab", createAttributes());
export const disabled_TestOnly = (): string => html`<calcite-fab disabled icon="plus"></calcite-fab>`;
export const disabled_TestOnly = (): string => html`
<calcite-fab disabled icon="plus"></calcite-fab>
<br />
<calcite-fab disabled loading icon="plus"></calcite-fab>
`;

export const darkModeRTL_TestOnly = (): string =>
create(
Expand Down
12 changes: 9 additions & 3 deletions packages/calcite-components/src/components/inline-editable/inline-editable.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,15 @@ export const simple = (): string => html`
</div>
`;

export const disabled_TestOnly = (): string => html`<calcite-inline-editable disabled>
<calcite-input value="disabled"></calcite-input>
</calcite-inline-editable>`;
export const disabled_TestOnly = (): string => html`
<calcite-inline-editable disabled>
<calcite-input value="disabled"></calcite-input>
</calcite-inline-editable>
<br />
<calcite-inline-editable controls disabled editing-enabled loading>
<calcite-input value="disabled and loading"></calcite-input>
</calcite-inline-editable>
`;

export const darkModeRTL_TestOnly = (): string => html`
<div dir="rtl" style="width:300px;max-width:100%;">
Expand Down
26 changes: 19 additions & 7 deletions packages/calcite-components/src/components/split-button/split-button.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,13 +112,23 @@ export const darkModeRTL_TestOnly = (): string => html`

darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };

export const disabled_TestOnly = (): string => html`<calcite-split-button disabled>
<calcite-dropdown-group selection-mode="none">
<calcite-dropdown-item>Option 2</calcite-dropdown-item>
<calcite-dropdown-item>Option 3</calcite-dropdown-item>
<calcite-dropdown-item>Option 4</calcite-dropdown-item>
</calcite-dropdown-group>
</calcite-split-button>`;
export const disabled_TestOnly = (): string => html`
<calcite-split-button disabled>
<calcite-dropdown-group selection-mode="none">
<calcite-dropdown-item>Option 2</calcite-dropdown-item>
<calcite-dropdown-item>Option 3</calcite-dropdown-item>
<calcite-dropdown-item>Option 4</calcite-dropdown-item>
</calcite-dropdown-group>
</calcite-split-button>
<br />
<calcite-split-button disabled loading>
<calcite-dropdown-group selection-mode="none">
<calcite-dropdown-item>Option 2</calcite-dropdown-item>
<calcite-dropdown-item>Option 3</calcite-dropdown-item>
<calcite-dropdown-item>Option 4</calcite-dropdown-item>
</calcite-dropdown-group>
</calcite-split-button>
`;

export const appearanceAndKindCombinations_TestOnly = (): string => html`
<calcite-split-button primary-text="outline+brand" appearance="outline" kind="brand"></calcite-split-button>
Expand Down Expand Up @@ -161,3 +171,5 @@ export const appearanceAndKindCombinations_TestOnly = (): string => html`
kind="neutral"
></calcite-split-button>
`;

export const loadingAndDisabled_TestOnly = (): string => html`<calcite-button loading disabled>Test</calcite-button>`;
Loading