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): correct footer padding and layout #9868

Merged
merged 8 commits into from
Jul 29, 2024
Merged

fix(panel): correct footer padding and layout #9868

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
e0a87bf
fix(panel): add footer slot gaps settings #9858
driskull Jul 26, 2024
d08e7dc
cleanup
driskull Jul 26, 2024
6c11936
cleanup
driskull Jul 26, 2024
1932497
cleanup
driskull Jul 26, 2024
67acb05
cleanup
driskull Jul 26, 2024
456b6b9
cleanup
driskull Jul 26, 2024
ae013b6
cleanup
driskull Jul 26, 2024
ceae510
review fixes
driskull Jul 29, 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
2 changes: 1 addition & 1 deletion 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 @@ -249,7 +249,7 @@ export const footerStartEndAndContentBottom = (): string =>
</calcite-flow-item>
</div>`;

export const footerSlotCoexistence = (): string =>
export const footerSlot = (): 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>
Expand Down
27 changes: 16 additions & 11 deletions packages/calcite-components/src/components/panel/panel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,25 +169,30 @@
}

.footer {
@apply flex mt-auto flex-row content-between justify-center items-center bg-foreground-1;

@apply flex mt-auto flex-row content-between justify-center items-center bg-foreground-1 text-n2-wrap;
border-block-start: 1px solid var(--calcite-color-border-3);
padding: var(--calcite-panel-footer-padding, var(--calcite-internal-panel-default-padding));
column-gap: 0;
row-gap: var(--calcite-spacing-md);
}

@include slotted("footer-start", "*") {
@apply flex text-n2-wrap self-center;
.footer-content {
@apply flex flex-row items-center justify-center flex-1;
}

margin-inline-end: auto;
gap: var(--calcite-spacing-md);
.footer-actions {
@apply flex flex-row items-center justify-evenly flex-1;
gap: var(--calcite-internal-panel-default-padding);
}

@include slotted("footer-end", "*") {
@apply flex text-n2-wrap self-center;
.footer-start {
@apply flex flex-row items-center justify-start flex-1;
margin-inline-end: auto;
gap: var(--calcite-internal-panel-default-padding);
}

gap: var(--calcite-spacing-md);
.footer-end {
@apply flex flex-row items-center justify-end flex-1;
margin-inline-start: auto;
gap: var(--calcite-internal-panel-default-padding);
}

.fab-container {
Expand Down
89 changes: 88 additions & 1 deletion packages/calcite-components/src/components/panel/panel.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,10 +242,97 @@ export const footerPadding_TestOnly = (): string =>
<calcite-panel height-scale="s" style="--calcite-panel-footer-padding: 20px;">
<div slot="header-content">Header!</div>
<p>Slotted content!</p>
<div slot="footer">Footer!</div>
<calcite-button type="button" slot="footer">1</calcite-button>
<calcite-button type="button" slot="footer">2</calcite-button>
<calcite-button type="button" slot="footer-start">3</calcite-button>
<calcite-button type="button" slot="footer-start">4</calcite-button>
<calcite-button type="button" slot="footer-end">5</calcite-button>
<calcite-button type="button" slot="footer-end">6</calcite-button>
<calcite-button type="button" slot="footer-actions">7</calcite-button>
<calcite-button type="button" slot="footer-actions">8</calcite-button>
</calcite-panel>
</div>`;

export const footerActions = (): string =>
html`<h2>footer-actions (Deprecated): Auto width</h2>
<div style="width: 300px;">
<calcite-panel height-scale="s">
<div slot="header-content">Header!</div>
<p>Slotted content!</p>
<calcite-button type="button" slot="footer-actions">1</calcite-button>
<calcite-button type="button" slot="footer-actions">2</calcite-button>
</calcite-panel>
</div>
<h2>footer-actions (Deprecated): Full width</h2>
<div style="width: 300px;">
<calcite-panel height-scale="s">
<div slot="header-content">Header!</div>
<p>Slotted content!</p>
<calcite-button width="full" type="button" slot="footer-actions">1</calcite-button>
<calcite-button width="full" type="button" slot="footer-actions">2</calcite-button>
</calcite-panel>
</div>`;

export const footerVariations = (): string =>
html`<h2>footer</h2>
<div style="width: 300px;">
<calcite-panel height-scale="s">
<div slot="header-content">Header!</div>
<p>Slotted content!</p>
<calcite-button width="full" type="button" slot="footer">1</calcite-button>
<calcite-button width="full" type="button" slot="footer">2</calcite-button>
</calcite-panel>
</div>
<h2>footer-start only</h2>
<div style="width: 300px;">
<calcite-panel height-scale="s">
<div slot="header-content">Header!</div>
<p>Slotted content!</p>
<calcite-button type="button" slot="footer-start">1</calcite-button>
<calcite-button type="button" slot="footer-start">2</calcite-button>
</calcite-panel>
</div>
<h2>footer-end only</h2>
<div style="width: 300px;">
<calcite-panel height-scale="s">
<div slot="header-content">Header!</div>
<p>Slotted content!</p>
<calcite-button type="button" slot="footer-end">1</calcite-button>
<calcite-button type="button" slot="footer-end">2</calcite-button>
</calcite-panel>
</div>
<h2>footer-start and footer-end auto width</h2>
<div style="width: 300px;">
<calcite-panel height-scale="s">
<div slot="header-content">Header!</div>
<p>Slotted content!</p>
<calcite-button type="button" slot="footer-start">1</calcite-button>
<calcite-button type="button" slot="footer-start">2</calcite-button>
<calcite-button type="button" slot="footer-end">3</calcite-button>
<calcite-button type="button" slot="footer-end">4</calcite-button>
</calcite-panel>
</div>
<h2>footer-start and footer-end full width single</h2>
<div style="width: 300px;">
<calcite-panel height-scale="s">
<div slot="header-content">Header!</div>
<p>Slotted content!</p>
<calcite-button width="full" type="button" slot="footer-start">1</calcite-button>
<calcite-button width="full" type="button" slot="footer-end">2</calcite-button>
</calcite-panel>
</div>
<h2>footer-start and footer-end full width multiple</h2>
<div style="width: 300px;">
<calcite-panel height-scale="s">
<div slot="header-content">Header!</div>
<p>Slotted content!</p>
<calcite-button width="full" type="button" slot="footer-start">1</calcite-button>
<calcite-button width="full" type="button" slot="footer-start">2</calcite-button>
<calcite-button width="full" type="button" slot="footer-end">3</calcite-button>
<calcite-button width="full" type="button" slot="footer-end">4</calcite-button>
</calcite-panel>
</div>`;

export const actionBarBackgroundColor_TestOnly = (): string =>
html`<calcite-panel height-scale="s" style="width: 300px;">
<calcite-action-bar slot="action-bar" expand-disabled>
Expand Down
24 changes: 16 additions & 8 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 @@ -620,14 +620,22 @@ export class Panel

return (
<footer class={CSS.footer} hidden={!showFooter}>
<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}
onSlotchange={this.handleFooterActionsSlotChange}
/>
<div class={CSS.footerContent} hidden={!hasFooterContent}>
<slot name={SLOTS.footer} onSlotchange={this.handleFooterSlotChange} />
</div>
<div class={CSS.footerStart} hidden={hasFooterContent || !hasFooterStartContent}>
<slot name={SLOTS.footerStart} onSlotchange={this.handleFooterStartSlotChange} />
</div>
<div class={CSS.footerEnd} hidden={hasFooterContent || !hasFooterEndContent}>
<slot name={SLOTS.footerEnd} onSlotchange={this.handleFooterEndSlotChange} />
</div>
<div class={CSS.footerActions} hidden={hasFooterContent || !hasFooterActions}>
<slot
key="footer-actions-slot"
name={SLOTS.footerActions}
onSlotchange={this.handleFooterActionsSlotChange}
/>
</div>
</footer>
);
}
Expand Down
4 changes: 4 additions & 0 deletions packages/calcite-components/src/components/panel/resources.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ export const CSS = {
contentWrapper: "content-wrapper",
fabContainer: "fab-container",
footer: "footer",
footerContent: "footer-content",
footerActions: "footer-actions",
footerStart: "footer-start",
footerEnd: "footer-end",
};

export const ICONS = {
Expand Down
13 changes: 13 additions & 0 deletions packages/calcite-components/src/demos/panel.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,10 +178,23 @@
icon-start="check"
width="full"
></calcite-button>
<calcite-button
type="button"
slot="footer"
kind="neutral"
scale="s"
id="card-icon-test-1"
icon-start="check"
width="full"
></calcite-button>
<calcite-button type="button" slot="footer-start"></calcite-button>
<calcite-button type="button" slot="footer-start"></calcite-button>
<div slot="footer-end">
<calcite-button type="button" slot="footer-end"></calcite-button>
</div>
<div slot="footer-end">
<calcite-button type="button" slot="footer-end"></calcite-button>
</div>
</calcite-panel>
</div>
</div>
Expand Down
Loading