Skip to content

fix(block): loader now appears for all loading cases #7303

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

Merged
merged 9 commits into from
Jul 12, 2023
Merged

fix(block): loader now appears for all loading cases #7303

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
9f77af9
fix(block): loader now appears for all loading cases
Elijbet Jul 10, 2023
d62e951
block loading case stories
Elijbet Jul 10, 2023
8299adf
Merge branch 'main' into elijbet/6485-loader-to-appear-for-loading-bl…
Elijbet Jul 11, 2023
d5d0e9c
seperate loader icon with styling to avoid bringing in unnecessary pa…
Elijbet Jul 11, 2023
4928fae
Merge branch 'main' into elijbet/6485-loader-to-appear-for-loading-bl…
Elijbet Jul 11, 2023
63140d1
refactor into one liner chained conditional to vary padding applicait…
Elijbet Jul 11, 2023
c301cc9
Merge branch 'main' into elijbet/6485-loader-to-appear-for-loading-bl…
Elijbet Jul 11, 2023
ed0be92
inline so that jsx creates only one VNode because only one function e…
Elijbet Jul 11, 2023
a22dcb6
add keys to a repeating wrapper
Elijbet Jul 12, 2023
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
28 changes: 28 additions & 0 deletions packages/calcite-components/src/components/block/block.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,3 +215,31 @@ export const contentSpacing_TestOnly = (): string =>
<div>Some text that has padding built in</div>
</calcite-block>
`;

export const loadingWithSlottedIcon_TestOnly = (): string =>
html`
<calcite-block collapsible open loading heading="Layer effects" description="Adjust blur">
<calcite-icon scale="s" slot="icon" icon="effects"></calcite-icon>
<calcite-notice open>
<div slot="message">Use layer effects sparingly</div>
</calcite-notice>
</calcite-block>
`;

export const loadingWithNoStatusNorSlottedIcon_TestOnly = (): string =>
html`
<calcite-block collapsible open loading heading="Layer effects" description="Adjust blur">
<calcite-notice open>
<div slot="message">Use layer effects sparingly</div>
</calcite-notice>
</calcite-block>
`;

export const loadingWithStatusIcon_TestOnly = (): string =>
html`
<calcite-block loading heading="Valid status" description="summary" collapsible status="valid">
<calcite-input icon="form-field" placeholder="This is valid input field"></calcite-input>
</calcite-block>

<calcite-block heading="Invalid status" description="summary" status="invalid"> </calcite-block>
`;
46 changes: 24 additions & 22 deletions packages/calcite-components/src/components/block/block.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,29 +237,31 @@ export class Block
}

renderIcon(): VNode[] {
const { el, loading, messages, status } = this;

const statusIcon = ICONS[status];

const hasIcon = getSlotted(el, SLOTS.icon) || statusIcon;

const iconEl = !statusIcon ? (
<slot key="icon-slot" name={SLOTS.icon} />
) : loading ? (
<calcite-loader inline label={messages.loading} />
) : (
<calcite-icon
class={{
[CSS.statusIcon]: true,
[CSS.valid]: status == "valid",
[CSS.invalid]: status == "invalid"
}}
icon={statusIcon}
scale="m"
/>
);
const { loading, messages, status } = this;

const hasSlottedIcon = !!getSlotted(this.el, SLOTS.icon);

return hasIcon ? <div class={CSS.icon}>{iconEl}</div> : null;
return loading ? (
<div class={CSS.icon} key="loader">
<calcite-loader inline label={messages.loading} />
</div>
) : !!status ? (
<div class={CSS.icon} key="status-icon">
<calcite-icon
class={{
[CSS.statusIcon]: true,
[CSS.valid]: status == "valid",
[CSS.invalid]: status == "invalid"
}}
icon={ICONS[status]}
scale="m"
/>
</div>
) : hasSlottedIcon ? (
<div class={CSS.icon} key="icon-slot">
<slot key="icon-slot" name={SLOTS.icon} />
</div>
) : null;
}

renderTitle(): VNode {
Expand Down