Skip to content

feat(panel, flow-item): add footer-start and footer-end slots #9374

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
Elijbet merged 27 commits into from
Jun 25, 2024
Merged

feat(panel, flow-item): add footer-start and footer-end slots #9374

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
5119b4a
feat(panel, flow-item): add and slots
Elijbet May 20, 2024
f1bc563
css
Elijbet May 20, 2024
8bc2a04
panel and flow-item stories
Elijbet May 20, 2024
e78a89c
fix padding
Elijbet May 20, 2024
4aa6751
stories refactor for panel, shell, stack
Elijbet May 21, 2024
7e425fe
restore footer
Elijbet May 21, 2024
8f96573
WIP
Elijbet May 21, 2024
3e27a93
WIP
Elijbet May 21, 2024
2b736fb
WIP
Elijbet Jun 17, 2024
5c3b700
rule to avoid the footer-start/end being rendered at the same time
Elijbet Jun 18, 2024
30839da
tidy up
Elijbet Jun 18, 2024
6e0d995
tidy up
Elijbet Jun 18, 2024
0ae7b44
provide gap to footer, footer-start & footer-end slots according to s…
Elijbet Jun 18, 2024
894432a
apply generic scale, no scale prop on panel
Elijbet Jun 18, 2024
14cfb03
add coverage on footer, footer end and start, and footer precedence f…
Elijbet Jun 20, 2024
eb31a77
tidy up
Elijbet Jun 20, 2024
b737121
tidy up
Elijbet Jun 20, 2024
6929c63
merge and resolve conflict
Elijbet Jun 21, 2024
58fbd53
fix padding
Elijbet Jun 21, 2024
bf578e6
merge dev
Elijbet Jun 21, 2024
5ad04a0
gap for stacked footers
Elijbet Jun 21, 2024
791e77c
fix:slotchange
Elijbet Jun 22, 2024
c21ae07
cleanup screenshot discrepancies
Elijbet Jun 22, 2024
f939410
tidy up
Elijbet Jun 23, 2024
be09d2b
tidy up
Elijbet Jun 24, 2024
2c3c4d9
revert spacing to sm to minimize impact on padding across screenshots
Elijbet Jun 24, 2024
5e753b9
flow-item restructure for footer precedence to work correctly
Elijbet Jun 24, 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
4 changes: 2 additions & 2 deletions packages/calcite-components/src/components/alert/alert.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ $border-style: 1px solid var(--calcite-color-border-3);
inset-block-start: -2px;
block-size: 2px;
border-radius: var(--calcite-border-radius) var(--calcite-border-radius) 0 0;
&:after {
&::after {
@apply absolute
top-0
block;
Expand Down Expand Up @@ -299,7 +299,7 @@ $alertDurations:
}
}

.container.focused .dismiss-progress:after {
.container.focused .dismiss-progress::after {
animation-play-state: paused;
}

Expand Down
34 changes: 29 additions & 5 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 @@ -65,15 +65,17 @@ const contentHTML = html`
`;

const footerHTML = html`
Copy link
Copy Markdown
Member

@jcfranco jcfranco Jun 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not critical for this PR, but let's try to rename this to better match its usage. This is named as footer, but it has HTML with start/end footer slot content. Applies to panel stories.

<calcite-button slot="${SLOTS.footer}" width="half" appearance="outline">Naw.</calcite-button>
<calcite-button slot="${SLOTS.footer}" width="half">Yeah!</calcite-button>
<calcite-button slot="${SLOTS.footerStart}" width="half" appearance="outline">Naw.</calcite-button>
<calcite-button slot="${SLOTS.footerEnd}" width="half">Yeah!</calcite-button>
`;

const flowItemContent = `${headerHTML}
<calcite-action text="Action" label="Action" slot="${SLOTS.headerActionsStart}" icon="bluetooth"></calcite-action>
<calcite-action text="Action" label="Action" slot="${SLOTS.headerActionsEnd}" icon="attachment"></calcite-action>
${contentHTML}
${footerHTML}`;
<calcite-button slot="${SLOTS.footer}" width="half" appearance="outline">Naw.</calcite-button>
<calcite-button slot="${SLOTS.footer}" width="half">Yeah!</calcite-button>
`;

export const simple = (args: FlowItemStoryArgs): string => html`
<calcite-flow-item
Expand All @@ -91,7 +93,8 @@ export const simple = (args: FlowItemStoryArgs): string => html`
<calcite-action text="Action" label="Action" slot="${SLOTS.headerActionsEnd}" icon="attachment"></calcite-action>
${contentHTML}
<calcite-fab slot="fab"></calcite-fab>
${footerHTML}
<calcite-button slot="${SLOTS.footer}" width="half" appearance="outline">Naw.</calcite-button>
<calcite-button slot="${SLOTS.footer}" width="half">Yeah!</calcite-button>
</calcite-flow-item>
`;

Expand Down Expand Up @@ -218,13 +221,34 @@ export const withActionBarAndContentTop_TestOnly = (): string =>
</calcite-flow-item>
</div>`;

export const footerPaddingAndContentBottom_TestOnly = (): string =>
export const footerPaddingAndContentBottom = (): 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-flow-item>
</div>`;

export const footerStartEndAndContentBottom = (): string =>
html`<div style="width: 300px; height: 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>
${footerHTML}
</calcite-flow-item>
</div>`;

export const footerSlotPrecedence = (): 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>
${footerHTML}
</calcite-flow-item>
</div>`;

Expand Down
9 changes: 7 additions & 2 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 @@ -50,8 +50,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-actions - [Deprecated] Use the `"footer"` slot instead. A slot for adding `calcite-button`s to the component's footer.
* @slot footer - A slot for adding custom content to the component's footer.
Comment thread
Elijbet marked this conversation as 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.
*/
@Component({
tag: "calcite-flow-item",
Expand Down Expand Up @@ -390,8 +392,11 @@ 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.footerEnd} slot={PANEL_SLOTS.footerEnd} />
<slot name={SLOTS.footerStart} slot={PANEL_SLOTS.footerStart} />
</slot>
<slot name={SLOTS.footerActions} slot={PANEL_SLOTS.footerActions} />
<slot name={SLOTS.footer} slot={PANEL_SLOTS.footer} />
<slot />
</calcite-panel>
</InteractiveContainer>
Expand Down
2 changes: 2 additions & 0 deletions packages/calcite-components/src/components/flow-item/resources.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,6 @@ export const SLOTS = {
fab: "fab",
footer: "footer",
footerActions: "footer-actions",
footerEnd: "footer-end",
footerStart: "footer-start",
};
18 changes: 9 additions & 9 deletions packages/calcite-components/src/components/link/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,16 +28,16 @@ You can programmatically focus a `calcite-link` with the `setFocus()` method:

## Properties

| Property | Attribute | Description | Type | Default |
| ------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- |
| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
| Property | Attribute | Description | Type | Default |
| ------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- |
| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
| `download` | `download` | Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value: Without a value, the browser will suggest a filename/extension See <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download>. | `boolean \| string` | `false` |
| `href` | `href` | Specifies the URL of the linked resource, which can be set as an absolute or relative path. | `string` | `undefined` |
| `iconEnd` | `icon-end` | Specifies an icon to display at the end of the component. | `string` | `undefined` |
| `iconFlipRtl` | `icon-flip-rtl` | Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). | `"both" \| "end" \| "start"` | `undefined` |
| `iconStart` | `icon-start` | Specifies an icon to display at the start of the component. | `string` | `undefined` |
| `rel` | `rel` | Specifies the relationship to the linked document defined in `href`. | `string` | `undefined` |
| `target` | `target` | Specifies the frame or window to open the linked document. | `string` | `undefined` |
| `href` | `href` | Specifies the URL of the linked resource, which can be set as an absolute or relative path. | `string` | `undefined` |
| `iconEnd` | `icon-end` | Specifies an icon to display at the end of the component. | `string` | `undefined` |
| `iconFlipRtl` | `icon-flip-rtl` | Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). | `"both" \| "end" \| "start"` | `undefined` |
| `iconStart` | `icon-start` | Specifies an icon to display at the start of the component. | `string` | `undefined` |
| `rel` | `rel` | Specifies the relationship to the linked document defined in `href`. | `string` | `undefined` |
| `target` | `target` | Specifies the frame or window to open the linked document. | `string` | `undefined` |

## Methods

Expand Down
47 changes: 32 additions & 15 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 @@ -18,19 +18,25 @@

@import "../../assets/styles/header";

:host([scale="s"]) .content-top,
.content-bottom {
padding: var(--calcite-spacing-sm);
:host([scale="s"]) {
.content-top,
.content-bottom {
padding: var(--calcite-spacing-sm);
}
}

:host([scale="m"]) .content-top,
.content-bottom {
padding: var(--calcite-spacing-md);
:host([scale="m"]) {
.content-top,
.content-bottom {
padding: var(--calcite-spacing-md);
}
}

:host([scale="l"]) .content-top,
.content-bottom {
padding: var(--calcite-spacing-xl);
:host([scale="l"]) {
.content-top,
.content-bottom {
padding: var(--calcite-spacing-xl);
}
}

.content-top,
Expand Down Expand Up @@ -132,14 +138,25 @@
}

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

flex: 0 0 auto;
padding: var(--calcite-panel-footer-padding, theme("spacing.2"));
border-block-start: 1px solid var(--calcite-color-border-3);
padding: var(--calcite-spacing-sm);
column-gap: 0;
row-gap: var(--calcite-spacing-md);
}

@include slotted("footer-start", "*") {
@apply flex text-n2-wrap self-center;

margin-inline-end: auto;
gap: var(--calcite-spacing-md);
}

@include slotted("footer-end", "*") {
@apply flex text-n2-wrap self-center;

gap: var(--calcite-spacing-md);
}

.fab-container {
Expand Down
48 changes: 45 additions & 3 deletions 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 @@ -65,8 +65,8 @@ const contentHTML = html`
`;

const footerHTML = html`
<calcite-button slot="${SLOTS.footer}" width="half" appearance="outline">Naw.</calcite-button>
<calcite-button slot="${SLOTS.footer}" width="half">Yeah!</calcite-button>
<calcite-button slot="${SLOTS.footerStart}" width="half" appearance="outline">Naw.</calcite-button>
<calcite-button slot="${SLOTS.footerEnd}" width="half">Yeah!</calcite-button>
`;

const panelContent = `${headerHTML}
Expand Down Expand Up @@ -380,7 +380,7 @@ export const withNoHeaderBorderBlockEnd_TestOnly = (): string =>
>Slotted content!</calcite-panel
>`;

export const contentTopBottomSlot = (): string => html`
export const footerAndContentTopBottomSlots = (): string => html`
<div style="height: 350px; width: 400px; display: flex">
<calcite-panel height-scale="s">
<div slot="header-content">Header!</div>
Expand All @@ -399,3 +399,45 @@ export const contentTopBottomSlot = (): string => html`
</calcite-panel>
</div>
`;

export const footerStartAndEndSlots = (): string => html`
<calcite-panel style="height: 200px">
<div slot="header-content">header-content slot</div>
<p>Slotted content!</p>
<div slot="content-bottom">Slot for a content-bottom.</div>
<calcite-button
type="button"
slot="footer-start"
kind="neutral"
scale="s"
id="card-icon-test-1"
icon-start="check"
></calcite-button>
<calcite-button
type="button"
slot="footer-end"
kind="neutral"
scale="s"
id="card-icon-test-1"
icon-start="check"
></calcite-button>
</calcite-panel>
`;

export const footerSlotPrecedence = (): string => html`
<calcite-panel style="height: 200px">
<p>Slotted content!</p>
<div slot="header-content">header-content slot</div>
<div slot="content-bottom">Slot for a content-bottom.</div>
<calcite-button
type="button"
slot="footer"
kind="neutral"
scale="s"
id="card-icon-test-1"
icon-start="check"
width="full"
></calcite-button>
${footerHTML}
</calcite-panel>
`;
40 changes: 29 additions & 11 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 @@ -56,8 +56,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-actions - [Deprecated] Use the `"footer"` slot instead. A slot for adding `calcite-button`s to the component's footer.
* @slot footer - A slot for adding custom content to the footer.
* @slot footer - A slot for adding custom content to the component's footer.
* @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.
*/
@Component({
tag: "calcite-panel",
Expand Down Expand Up @@ -214,11 +216,15 @@ export class Panel

@State() hasContentTop = false;

@State() hasFooterContent = false;
@State() hasFab = false;

@State() hasFooterActions = false;

@State() hasFab = false;
@State() hasFooterContent = false;

@State() hasFooterEndContent = false;

@State() hasFooterStartContent = false;

@State() defaultMessages: PanelMessages;

Expand Down Expand Up @@ -323,16 +329,24 @@ export class Panel
this.hasHeaderContent = slotChangeHasAssignedElement(event);
};

handleFooterSlotChange = (event: Event): void => {
this.hasFooterContent = slotChangeHasAssignedElement(event);
handleFabSlotChange = (event: Event): void => {
this.hasFab = slotChangeHasAssignedElement(event);
};

handleFooterActionsSlotChange = (event: Event): void => {
this.hasFooterActions = slotChangeHasAssignedElement(event);
};

handleFabSlotChange = (event: Event): void => {
this.hasFab = slotChangeHasAssignedElement(event);
handleFooterEndSlotChange = (event: Event): void => {
this.hasFooterEndContent = slotChangeHasAssignedElement(event);
};

handleFooterStartSlotChange = (event: Event): void => {
this.hasFooterStartContent = slotChangeHasAssignedElement(event);
};

handleFooterSlotChange = (event: Event): void => {
this.hasFooterContent = slotChangeHasAssignedElement(event);
};

private contentBottomSlotChangeHandler = (event: Event): void => {
Expand Down Expand Up @@ -561,13 +575,17 @@ export class Panel
}

renderFooterNode(): VNode {
const { hasFooterContent, hasFooterActions } = this;
const { hasFooterEndContent, hasFooterStartContent, hasFooterContent, hasFooterActions } = this;

const showFooter = hasFooterContent || hasFooterActions;
const showFooter =
hasFooterStartContent || hasFooterEndContent || hasFooterContent || hasFooterActions;

return (
<footer class={CSS.footer} hidden={!showFooter}>
<slot key="footer-slot" name={SLOTS.footer} onSlotchange={this.handleFooterSlotChange} />
<slot name={SLOTS.footer} onSlotchange={this.handleFooterSlotChange}>
<slot name={SLOTS.footerStart} onSlotchange={this.handleFooterStartSlotChange} />
<slot name={SLOTS.footerEnd} onSlotchange={this.handleFooterEndSlotChange} />
</slot>
<slot
key="footer-actions-slot"
name={SLOTS.footerActions}
Expand Down
2 changes: 2 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 @@ -38,6 +38,8 @@ export const SLOTS = {
headerContent: "header-content",
fab: "fab",
footer: "footer",
footerEnd: "footer-end",
footerStart: "footer-start",
footerActions: "footer-actions",
};

Expand Down
24 changes: 23 additions & 1 deletion packages/calcite-components/src/demos/flow.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,29 @@
<div slot="content-top">Slot for a content-top.</div>
<img width="250" height="250" src="./_assets/images/placeholder.svg" />
<div slot="content-bottom">Content bottom!</div>
<div slot="footer">Footer!</div>
<calcite-button
type="button"
slot="footer-start"
kind="neutral"
scale="s"
id="card-icon-test-1"
icon-start="check"
></calcite-button>
<div slot="footer-end">
<calcite-button type="button" scale="s" kind="neutral" id="card-icon-test-2" icon-start="stairs">
</calcite-button>
<calcite-button type="button" scale="s" kind="neutral" id="card-icon-test-3" icon-start="ellipsis">
</calcite-button>
<calcite-dropdown type="hover">
<calcite-button id="card-icon-test-4" slot="trigger" scale="s" kind="neutral" icon-start="caret-down">
</calcite-button>
<calcite-dropdown-group selection-mode="none">
<calcite-dropdown-item>View details</calcite-dropdown-item>
<calcite-dropdown-item>Duplicate</calcite-dropdown-item>
<calcite-dropdown-item>Delete</calcite-dropdown-item>
</calcite-dropdown-group>
</calcite-dropdown>
</div>
</calcite-flow-item>
</calcite-flow>
<script>
Expand Down
Loading