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(panel, flow-item): prevent footer slots from conflicting with each other #9856

Merged
merged 3 commits into from
Jul 25, 2024
Merged

fix(panel, flow-item): prevent footer slots from conflicting with each other #9856

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
499bc3d
fix(panel, flow-item): prevent footer slots from conflicting with eac…
driskull Jul 25, 2024
4744ce7
cleanup
driskull Jul 25, 2024
c4dc007
doc fixes
driskull Jul 25, 2024
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
8 changes: 5 additions & 3 deletions packages/calcite-components/src/components/flow-item/flow-item.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -234,7 +234,8 @@ export const footerPaddingAndContentBottom = (): string =>
<div slot="header-content">Header!</div>
<p>Slotted content!</p>
<div slot="content-bottom">Content bottom!</div>
<div slot="footer">Footer!</div>
<calcite-button slot="footer" width="half" appearance="outline">Footer 1</calcite-button>
<calcite-button slot="footer" width="half">Footer 2</calcite-button>
</calcite-flow-item>
</div>`;

Expand All @@ -248,13 +249,14 @@ export const footerStartEndAndContentBottom = (): string =>
</calcite-flow-item>
</div>`;

export const footerSlotPrecedence = (): string =>
export const footerSlotCoexistence = (): string =>
html`<div style="width: 300px;">
<calcite-flow-item height-scale="s" style="--calcite-flow-item-footer-padding: 20px;">
<div slot="header-content">Header!</div>
<p>Slotted content!</p>
<div slot="content-bottom">Content bottom!</div>
<div slot="footer">Footer!</div>
<calcite-button slot="footer" width="half" appearance="outline">Footer 1</calcite-button>
<calcite-button slot="footer" width="half">Footer 2</calcite-button>
${footerHTML}
</calcite-flow-item>
</div>`;
Expand Down
13 changes: 6 additions & 7 deletions packages/calcite-components/src/components/flow-item/flow-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,10 +52,10 @@ import { CSS, ICONS, SLOTS } from "./resources";
* @slot header-content - A slot for adding custom content to the component's header.
* @slot header-menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.
* @slot fab - A slot for adding a `calcite-fab` (floating action button) to perform an action.
* @slot footer - A slot for adding custom content to the component's footer.
* @slot footer - A slot for adding custom content to the component's footer. Should not be used in conjunction with footer-start or footer-end slots.
driskull marked this conversation as resolved.
Show resolved Hide resolved
* @slot footer-actions - [Deprecated] Use the `"footer"` slot instead. A slot for adding `calcite-button`s to the component's footer.
* @slot footer-end - A slot for adding a trailing footer custom content.
* @slot footer-start - A slot for adding a leading footer custom content.
* @slot footer-end - A slot for adding a trailing footer custom content. Should not be used in conjunction with footer slot.
* @slot footer-start - A slot for adding a leading footer custom content. Should not be used in conjunction with footer slot.
driskull marked this conversation as resolved.
Show resolved Hide resolved
*/
@Component({
tag: "calcite-flow-item",
Expand Down Expand Up @@ -405,10 +405,9 @@ export class FlowItem
<slot name={SLOTS.fab} slot={PANEL_SLOTS.fab} />
<slot name={SLOTS.contentTop} slot={PANEL_SLOTS.contentTop} />
<slot name={SLOTS.contentBottom} slot={PANEL_SLOTS.contentBottom} />
<slot name={SLOTS.footer} slot={PANEL_SLOTS.footer}>
<slot name={SLOTS.footerStart} slot={PANEL_SLOTS.footerStart} />
<slot name={SLOTS.footerEnd} slot={PANEL_SLOTS.footerEnd} />
</slot>
<slot name={SLOTS.footerStart} slot={PANEL_SLOTS.footerStart} />
<slot name={SLOTS.footer} slot={PANEL_SLOTS.footer} />
<slot name={SLOTS.footerEnd} slot={PANEL_SLOTS.footerEnd} />
<slot name={SLOTS.footerActions} slot={PANEL_SLOTS.footerActions} />
<slot />
</calcite-panel>
Expand Down
13 changes: 6 additions & 7 deletions packages/calcite-components/src/components/panel/panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,10 +58,10 @@ import { CSS, ICONS, SLOTS } from "./resources";
* @slot header-content - A slot for adding custom content to the header.
* @slot header-menu-actions - A slot for adding an overflow menu with actions inside a `calcite-dropdown`.
* @slot fab - A slot for adding a `calcite-fab` (floating action button) to perform an action.
* @slot footer - A slot for adding custom content to the component's footer.
* @slot footer - A slot for adding custom content to the component's footer. Should not be used in conjunction with footer-start or footer-end slots.
* @slot footer-actions - [Deprecated] Use the `footer-start` and `footer-end` slots instead. A slot for adding `calcite-button`s to the component's footer.
* @slot footer-end - A slot for adding a trailing footer custom content.
* @slot footer-start - A slot for adding a leading footer custom content.
* @slot footer-end - A slot for adding a trailing footer custom content. Should not be used in conjunction with footer slot.
* @slot footer-start - A slot for adding a leading footer custom content. Should not be used in conjunction with footer slot.
driskull marked this conversation as resolved.
Show resolved Hide resolved
*/
@Component({
tag: "calcite-panel",
Expand Down Expand Up @@ -620,10 +620,9 @@ export class Panel

return (
<footer class={CSS.footer} hidden={!showFooter}>
<slot name={SLOTS.footer} onSlotchange={this.handleFooterSlotChange}>
<slot name={SLOTS.footerStart} onSlotchange={this.handleFooterStartSlotChange} />
<slot name={SLOTS.footerEnd} onSlotchange={this.handleFooterEndSlotChange} />
</slot>
<slot name={SLOTS.footerStart} onSlotchange={this.handleFooterStartSlotChange} />
<slot name={SLOTS.footer} onSlotchange={this.handleFooterSlotChange} />
<slot name={SLOTS.footerEnd} onSlotchange={this.handleFooterEndSlotChange} />
<slot
key="footer-actions-slot"
name={SLOTS.footerActions}
Expand Down
Loading