From 29d8ce53ac815734c26ddfb364ce7b7f2289bf66 Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Tue, 25 Jun 2024 09:55:11 -0700
Subject: [PATCH] fix(flow-item): fix inverted footer start/end slots
---
.../components/flow-item/flow-item.stories.ts | 12 +++----
.../src/components/flow-item/flow-item.tsx | 2 +-
.../src/components/panel/panel.stories.ts | 34 +++++++------------
3 files changed, 19 insertions(+), 29 deletions(-)
diff --git a/packages/calcite-components/src/components/flow-item/flow-item.stories.ts b/packages/calcite-components/src/components/flow-item/flow-item.stories.ts
index 102b3a1294f..6ce81621e66 100644
--- a/packages/calcite-components/src/components/flow-item/flow-item.stories.ts
+++ b/packages/calcite-components/src/components/flow-item/flow-item.stories.ts
@@ -65,16 +65,16 @@ const contentHTML = html`
`;
const footerHTML = html`
- <calcite-button slot="${SLOTS.footerStart}" width="half" appearance="outline">Naw.</calcite-button>
- <calcite-button slot="${SLOTS.footerEnd}" width="half">Yeah!</calcite-button>
+ <calcite-button slot="${SLOTS.footerStart}" width="half" appearance="outline">Footer start</calcite-button>
+ <calcite-button slot="${SLOTS.footerEnd}" width="half">Footer end</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}
- <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.footer}" width="half" appearance="outline">Footer</calcite-button>
+ <calcite-button slot="${SLOTS.footer}" width="half">Footer</calcite-button>
`;
export const simple = (args: FlowItemStoryArgs): string => html`
@@ -93,8 +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>
- <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.footer}" width="half" appearance="outline">Footer</calcite-button>
+ <calcite-button slot="${SLOTS.footer}" width="half">Footer</calcite-button>
</calcite-flow-item>
`;
diff --git a/packages/calcite-components/src/components/flow-item/flow-item.tsx b/packages/calcite-components/src/components/flow-item/flow-item.tsx
index 55b0cbc0d58..9d87efa0715 100644
--- a/packages/calcite-components/src/components/flow-item/flow-item.tsx
+++ b/packages/calcite-components/src/components/flow-item/flow-item.tsx
@@ -393,8 +393,8 @@ export class FlowItem
<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 name={SLOTS.footerEnd} slot={PANEL_SLOTS.footerEnd} />
</slot>
<slot name={SLOTS.footerActions} slot={PANEL_SLOTS.footerActions} />
<slot />
diff --git a/packages/calcite-components/src/components/panel/panel.stories.ts b/packages/calcite-components/src/components/panel/panel.stories.ts
index 55aec5b6167..a5d8c6f7ab9 100644
--- a/packages/calcite-components/src/components/panel/panel.stories.ts
+++ b/packages/calcite-components/src/components/panel/panel.stories.ts
@@ -65,8 +65,8 @@ const contentHTML = html`
`;
const footerHTML = html`
- <calcite-button slot="${SLOTS.footerStart}" width="half" appearance="outline">Naw.</calcite-button>
- <calcite-button slot="${SLOTS.footerEnd}" width="half">Yeah!</calcite-button>
+ <calcite-button slot="${SLOTS.footerStart}" width="half" appearance="outline">Footer start</calcite-button>
+ <calcite-button slot="${SLOTS.footerEnd}" width="half">Footer end</calcite-button>
`;
const panelContent = `${headerHTML}
@@ -253,7 +253,7 @@ export const actionBarBackgroundColor_TestOnly = (): string =>
<p style="height: 400px">Hello world!</p>
<p style="height: 400px">Hello world!</p>
<p style="height: 400px">Hello world!</p>
- <p slot="footer">Slotted content!</p>
+ <p slot="footer">Footer!</p>
</calcite-panel>`;
export const footerWithoutContent_TestOnly = (): string =>
@@ -262,7 +262,7 @@ export const footerWithoutContent_TestOnly = (): string =>
heading="Header!"
style="width: 300px; height:auto; --calcite-panel-header-border-block-end:none;"
>
- <p slot="footer">Footer content!</p>
+ <p slot="footer">Footer!</p>
</calcite-panel>`;
export const actionBarWithoutContent_TestOnly = (): string =>
@@ -309,7 +309,7 @@ export const footerAndActionBarWithoutContent_TestOnly = (): string =>
<calcite-action text="Layers" icon="layers"> </calcite-action>
</calcite-action-group>
</calcite-action-bar>
- <p slot="footer">Footer content!</p>
+ <p slot="footer">Footer!</p>
</calcite-panel>`;
export const flexContent_TestOnly = (): string =>
@@ -395,7 +395,7 @@ export const footerAndContentTopBottomSlots = (): string => html`
<p>Hello world!</p>
<p>Hello world!</p>
<div slot="content-bottom">Slot for a content-bottom.</div>
- <p slot="footer">Slotted content!</p>
+ <p slot="footer">Footer!</p>
</calcite-panel>
</div>
`;
@@ -405,22 +405,12 @@ export const footerStartAndEndSlots = (): string => html`
<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-button type="button" slot="footer-start" kind="neutral" scale="s" id="card-icon-test-1" icon-start="check"
+ >Footer start</calcite-button
+ >
+ <calcite-button type="button" slot="footer-end" kind="neutral" scale="s" id="card-icon-test-1" icon-start="check"
+ >Footer end</calcite-button
+ >
</calcite-panel>
`;