diff --git a/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts b/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts
index 6394bbe2e82..efa739debf3 100755
--- a/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts
+++ b/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts
@@ -104,7 +104,7 @@ describe("calcite-action-bar", () => {
const bar = await page.find("calcite-action-bar");
- const buttonGroup = await page.find(`calcite-action-bar >>> .${CSS.actionGroupBottom}`);
+ const buttonGroup = await page.find(`calcite-action-bar >>> .${CSS.actionGroupEnd}`);
const button = await buttonGroup.find("calcite-action");
@@ -152,7 +152,7 @@ describe("calcite-action-bar", () => {
await page.setContent("");
- const buttonGroup = await page.find(`calcite-action-bar >>> .${CSS.actionGroupBottom}`);
+ const buttonGroup = await page.find(`calcite-action-bar >>> .${CSS.actionGroupEnd}`);
const button = await buttonGroup.find("calcite-action");
@@ -166,7 +166,7 @@ describe("calcite-action-bar", () => {
await page.setContent(html``);
- const buttonGroup = await page.find(`calcite-action-bar >>> .${CSS.actionGroupBottom}`);
+ const buttonGroup = await page.find(`calcite-action-bar >>> .${CSS.actionGroupEnd}`);
expect(buttonGroup).toBeNull();
});
@@ -315,7 +315,7 @@ describe("calcite-action-bar", () => {
it("should honor scale of expand icon", async () => {
const page = await newE2EPage({ html: html`` });
- const buttonGroup = await page.find(`calcite-action-bar >>> .${CSS.actionGroupBottom}`);
+ const buttonGroup = await page.find(`calcite-action-bar >>> .${CSS.actionGroupEnd}`);
const button = await buttonGroup.find("calcite-action");
@@ -338,7 +338,7 @@ describe("calcite-action-bar", () => {
-
+
@@ -386,7 +386,7 @@ describe("calcite-action-bar", () => {
-
+
diff --git a/packages/calcite-components/src/components/action-bar/action-bar.scss b/packages/calcite-components/src/components/action-bar/action-bar.scss
index 544f87fb75d..6d5aa78bf7f 100755
--- a/packages/calcite-components/src/components/action-bar/action-bar.scss
+++ b/packages/calcite-components/src/components/action-bar/action-bar.scss
@@ -16,14 +16,14 @@
:host([layout="vertical"]) {
@apply flex-col;
- .action-group--bottom {
+ .action-group--end {
margin-block-start: auto;
}
}
:host([layout="horizontal"]) {
@apply flex-row;
- .action-group--bottom {
+ .action-group--end {
@apply ms-auto;
}
}
@@ -58,7 +58,7 @@
border-inline-end: 0;
}
-.action-group--bottom {
+.action-group--end {
@apply justify-end;
}
diff --git a/packages/calcite-components/src/components/action-bar/action-bar.stories.ts b/packages/calcite-components/src/components/action-bar/action-bar.stories.ts
index 3d074bbb957..3ade00f0a26 100644
--- a/packages/calcite-components/src/components/action-bar/action-bar.stories.ts
+++ b/packages/calcite-components/src/components/action-bar/action-bar.stories.ts
@@ -81,7 +81,7 @@ export const horizontal = (): string => html`
-
+
`;
@@ -99,7 +99,7 @@ export const horizontalSmall = (): string => html`
-
+
`;
@@ -172,7 +172,7 @@ export const adjacentTooltipsOpenQuickly = (): string => html`
Layers
- hello world
@@ -194,30 +194,30 @@ withTooltip_NoTest.parameters = {
export const hebrewLocale_TestOnly = (): string => `
-
+
`;
export const norwegianLocale_TestOnly = (): string => `
-
+
`;
export const FrenchLocale_TestOnly = (): string => `
-
+
`;
export const hongKongLocale_TestOnly = (): string => `
-
+
`;
export const ukranianLocale_TestOnly = (): string => `
-
+
`;
export const bosnianLocale_TestOnly = (): string => `
-
+
`;
diff --git a/packages/calcite-components/src/components/action-bar/action-bar.tsx b/packages/calcite-components/src/components/action-bar/action-bar.tsx
index 8e5920af726..3a8dc4dddd1 100755
--- a/packages/calcite-components/src/components/action-bar/action-bar.tsx
+++ b/packages/calcite-components/src/components/action-bar/action-bar.tsx
@@ -47,7 +47,8 @@ import {
/**
* @slot - A slot for adding `calcite-action`s that will appear at the top of the component.
- * @slot bottom-actions - A slot for adding `calcite-action`s that will appear at the bottom of the component, above the collapse/expand button.
+ * @slot bottom-actions - [Deprecated] Use the `"actions-end"` slot instead. A slot for adding `calcite-action`s that will appear at the bottom of the component, above the collapse/expand button.
+ * @slot actions-end - A slot for adding `calcite-action`s that will appear at the end of the component, prior to the collapse/expand button.
* @slot expand-tooltip - A slot to set the `calcite-tooltip` for the expand toggle.
*/
@Component({
@@ -296,7 +297,7 @@ export class ActionBar
this.setGroupLayout(actionGroups);
const groupCount =
- getSlotted(el, SLOTS.bottomActions) || !expandDisabled
+ getSlotted(el, SLOTS.actionsEnd) || getSlotted(el, SLOTS.bottomActions) || !expandDisabled
? actionGroups.length + 1
: actionGroups.length;
@@ -370,8 +371,11 @@ export class ActionBar
/>
) : null;
- return getSlotted(el, SLOTS.bottomActions) || expandToggleNode ? (
-
+ return getSlotted(el, SLOTS.actionsEnd) ||
+ getSlotted(el, SLOTS.bottomActions) ||
+ expandToggleNode ? (
+
+
{expandToggleNode}
diff --git a/packages/calcite-components/src/components/action-bar/readme.md b/packages/calcite-components/src/components/action-bar/readme.md
index 6a1ea264a54..5837c506c58 100755
--- a/packages/calcite-components/src/components/action-bar/readme.md
+++ b/packages/calcite-components/src/components/action-bar/readme.md
@@ -19,14 +19,14 @@ Renders `calcite-action`s that stick to the top of the bar.
```
-### Bottom-actions
+### Actions-end
-The bottom-actions slot renders `calcite-action`s that stick to the bottom of the bar above the expand/collapse icon.
+The actions-end slot renders `calcite-action`s that stick to the end of the bar prior to the expand/collapse icon.
```html
-
+
```
@@ -92,7 +92,7 @@ Type: `Promise`
| Slot | Description |
| ------------------ | ---------------------------------------------------------------------------------------------------------------------- |
| | A slot for adding `calcite-action`s that will appear at the top of the component. |
-| `"bottom-actions"` | A slot for adding `calcite-action`s that will appear at the bottom of the component, above the collapse/expand button. |
+| `"actions-end"` | A slot for adding `calcite-action`s that will appear at the bottom of the component, above the collapse/expand button. |
| `"expand-tooltip"` | A slot to set the `calcite-tooltip` for the expand toggle. |
## CSS Custom Properties
diff --git a/packages/calcite-components/src/components/action-bar/resources.ts b/packages/calcite-components/src/components/action-bar/resources.ts
index 6f8cfdfff1d..0f44055d831 100644
--- a/packages/calcite-components/src/components/action-bar/resources.ts
+++ b/packages/calcite-components/src/components/action-bar/resources.ts
@@ -1,8 +1,9 @@
export const CSS = {
- actionGroupBottom: "action-group--bottom",
+ actionGroupEnd: "action-group--end",
};
export const SLOTS = {
- bottomActions: "bottom-actions",
+ actionsEnd: "actions-end",
+ bottomActions: "actions-end",
expandTooltip: "expand-tooltip",
};
diff --git a/packages/calcite-components/src/components/action-bar/usage/Actions-end.md b/packages/calcite-components/src/components/action-bar/usage/Actions-end.md
new file mode 100644
index 00000000000..6b937fc14d6
--- /dev/null
+++ b/packages/calcite-components/src/components/action-bar/usage/Actions-end.md
@@ -0,0 +1,8 @@
+The actions-end slot renders `calcite-action`s that stick to the end of the bar prior to the expand/collapse icon.
+
+```html
+
+
+
+
+```
diff --git a/packages/calcite-components/src/components/action-bar/usage/Bottom-actions.md b/packages/calcite-components/src/components/action-bar/usage/Bottom-actions.md
deleted file mode 100644
index 4dadc7567c1..00000000000
--- a/packages/calcite-components/src/components/action-bar/usage/Bottom-actions.md
+++ /dev/null
@@ -1,8 +0,0 @@
-The bottom-actions slot renders `calcite-action`s that stick to the bottom of the bar above the expand/collapse icon.
-
-```html
-
-
-
-
-```
diff --git a/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts b/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts
index a1b2a554141..939cb8473d2 100755
--- a/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts
+++ b/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts
@@ -80,7 +80,7 @@ describe("calcite-action-pad", () => {
const pad = await page.find("calcite-action-pad");
- const buttonGroup = await page.find(`calcite-action-pad >>> .${CSS.actionGroupBottom}`);
+ const buttonGroup = await page.find(`calcite-action-pad >>> .${CSS.actionGroupEnd}`);
const button = await buttonGroup.find(`calcite-action`);
@@ -129,7 +129,7 @@ describe("calcite-action-pad", () => {
await page.setContent("");
- const buttonGroup = await page.find(`calcite-action-pad >>> .${CSS.actionGroupBottom}`);
+ const buttonGroup = await page.find(`calcite-action-pad >>> .${CSS.actionGroupEnd}`);
const button = await buttonGroup.find("calcite-action");
@@ -144,7 +144,7 @@ describe("calcite-action-pad", () => {
await page.setContent(``);
- const buttonGroup = await page.find(`calcite-action-pad >>> .${CSS.actionGroupBottom}`);
+ const buttonGroup = await page.find(`calcite-action-pad >>> .${CSS.actionGroupEnd}`);
expect(buttonGroup).toBeNull();
});
@@ -255,7 +255,7 @@ describe("calcite-action-pad", () => {
it("should honor scale of expand icon", async () => {
const page = await newE2EPage({ html: `` });
- const buttonGroup = await page.find(`calcite-action-pad >>> .${CSS.actionGroupBottom}`);
+ const buttonGroup = await page.find(`calcite-action-pad >>> .${CSS.actionGroupEnd}`);
const button = await buttonGroup.find("calcite-action");
diff --git a/packages/calcite-components/src/components/action-pad/action-pad.tsx b/packages/calcite-components/src/components/action-pad/action-pad.tsx
index 8ca6810900e..dff569ee12e 100755
--- a/packages/calcite-components/src/components/action-pad/action-pad.tsx
+++ b/packages/calcite-components/src/components/action-pad/action-pad.tsx
@@ -260,7 +260,7 @@ export class ActionPad
) : null;
return expandToggleNode ? (
-
+
{expandToggleNode}
diff --git a/packages/calcite-components/src/components/action-pad/resources.ts b/packages/calcite-components/src/components/action-pad/resources.ts
index 9cfad962fda..edbb3af26d5 100644
--- a/packages/calcite-components/src/components/action-pad/resources.ts
+++ b/packages/calcite-components/src/components/action-pad/resources.ts
@@ -1,5 +1,5 @@
export const CSS = {
- actionGroupBottom: "action-group--bottom",
+ actionGroupEnd: "action-group--end",
container: "container",
};
diff --git a/packages/calcite-components/src/components/shell/readme.md b/packages/calcite-components/src/components/shell/readme.md
index a3dc196ffdd..f7afb330f33 100644
--- a/packages/calcite-components/src/components/shell/readme.md
+++ b/packages/calcite-components/src/components/shell/readme.md
@@ -52,7 +52,7 @@ Renders a shell with leading and trailing floating panels, action bar/pad, block
-
+
diff --git a/packages/calcite-components/src/components/shell/shell.stories.ts b/packages/calcite-components/src/components/shell/shell.stories.ts
index ac6acb1443b..14a88909344 100644
--- a/packages/calcite-components/src/components/shell/shell.stories.ts
+++ b/packages/calcite-components/src/components/shell/shell.stories.ts
@@ -141,7 +141,7 @@ const centerRowWithActionBarHTML = html`
-
+
@@ -799,7 +799,7 @@ position:relative;
-
+
@@ -826,7 +826,7 @@ position:relative;
-
+
@@ -869,7 +869,7 @@ position:relative;
-
+
@@ -893,7 +893,7 @@ position:relative;
-
+
@@ -926,7 +926,7 @@ position:relative;
-
+
@@ -956,7 +956,7 @@ position:relative;
-
+
@@ -1091,7 +1091,7 @@ position:relative;
-
+
@@ -1122,7 +1122,7 @@ position:relative;
-
+
diff --git a/packages/calcite-components/src/components/shell/usage/Advanced.md b/packages/calcite-components/src/components/shell/usage/Advanced.md
index d83c7324584..d27b54882e8 100644
--- a/packages/calcite-components/src/components/shell/usage/Advanced.md
+++ b/packages/calcite-components/src/components/shell/usage/Advanced.md
@@ -40,7 +40,7 @@ Renders a shell with leading and trailing floating panels, action bar/pad, block
-
+
diff --git a/packages/calcite-components/src/demos/action.html b/packages/calcite-components/src/demos/action.html
index be2347ee164..5d8fef79f56 100644
--- a/packages/calcite-components/src/demos/action.html
+++ b/packages/calcite-components/src/demos/action.html
@@ -443,7 +443,7 @@
-
+
@@ -460,7 +460,7 @@
-
+
@@ -489,7 +489,7 @@
const slotTestNode2 = document.getElementById("slot-test2");
setTimeout(function () {
const action = document.createElement("calcite-action");
- action.setAttribute("slot", "bottom-actions");
+ action.setAttribute("slot", "actions-end");
action.setAttribute("text", "Hello world");
action.setAttribute("icon", "layers");
slotTestNode2.appendChild(action);
@@ -509,7 +509,7 @@
const expandedTestNode = document.getElementById("slot-test-expanded");
setTimeout(function () {
const action = document.createElement("calcite-action");
- action.setAttribute("slot", "bottom-actions");
+ action.setAttribute("slot", "actions-end");
action.setAttribute("text", "Hello world");
action.setAttribute("icon", "layers");
expandedTestNode.appendChild(action);
@@ -546,7 +546,7 @@
-
+
@@ -563,7 +563,7 @@
-
+
@@ -590,7 +590,7 @@
-
+
diff --git a/packages/calcite-components/src/demos/mode/auto.html b/packages/calcite-components/src/demos/mode/auto.html
index b9e9d2680a3..6909e199358 100644
--- a/packages/calcite-components/src/demos/mode/auto.html
+++ b/packages/calcite-components/src/demos/mode/auto.html
@@ -98,7 +98,7 @@
-
+
@@ -134,7 +134,7 @@
-
+
diff --git a/packages/calcite-components/src/demos/panel.html b/packages/calcite-components/src/demos/panel.html
index 2aed96eba1a..ea345201c84 100644
--- a/packages/calcite-components/src/demos/panel.html
+++ b/packages/calcite-components/src/demos/panel.html
@@ -88,7 +88,7 @@
-
+
diff --git a/packages/calcite-components/src/demos/shell-panel.html b/packages/calcite-components/src/demos/shell-panel.html
index 1c80efa6a50..477c659571e 100644
--- a/packages/calcite-components/src/demos/shell-panel.html
+++ b/packages/calcite-components/src/demos/shell-panel.html
@@ -128,7 +128,7 @@
-
+
@@ -167,7 +167,7 @@
-
+
@@ -208,7 +208,7 @@
-
+
@@ -242,7 +242,7 @@
-
+
diff --git a/packages/calcite-components/src/demos/shell/block-configurations.html b/packages/calcite-components/src/demos/shell/block-configurations.html
index de7f2d85e7d..f9f5ad2f1b8 100644
--- a/packages/calcite-components/src/demos/shell/block-configurations.html
+++ b/packages/calcite-components/src/demos/shell/block-configurations.html
@@ -75,7 +75,7 @@
-
+
@@ -124,7 +124,7 @@
-
+
diff --git a/packages/calcite-components/src/demos/shell/demo-app-advanced-2-shell-header.html b/packages/calcite-components/src/demos/shell/demo-app-advanced-2-shell-header.html
index 26bf5362e6b..f42a8ff306d 100644
--- a/packages/calcite-components/src/demos/shell/demo-app-advanced-2-shell-header.html
+++ b/packages/calcite-components/src/demos/shell/demo-app-advanced-2-shell-header.html
@@ -123,7 +123,7 @@
-
+
diff --git a/packages/calcite-components/src/demos/shell/demo-app-advanced-2.html b/packages/calcite-components/src/demos/shell/demo-app-advanced-2.html
index 1d2d7245146..19953c1c54f 100644
--- a/packages/calcite-components/src/demos/shell/demo-app-advanced-2.html
+++ b/packages/calcite-components/src/demos/shell/demo-app-advanced-2.html
@@ -129,7 +129,7 @@
-
+
diff --git a/packages/calcite-components/src/demos/shell/demo-app-advanced-3.html b/packages/calcite-components/src/demos/shell/demo-app-advanced-3.html
index 28eb3f536f5..6e2e9296489 100644
--- a/packages/calcite-components/src/demos/shell/demo-app-advanced-3.html
+++ b/packages/calcite-components/src/demos/shell/demo-app-advanced-3.html
@@ -221,7 +221,7 @@
calcite-hydrated=""
>
-
+
-
+
@@ -131,7 +131,7 @@
-
+
diff --git a/packages/calcite-components/src/demos/shell/demo-app-advanced-center-row.html b/packages/calcite-components/src/demos/shell/demo-app-advanced-center-row.html
index ee4d2c9a063..46e0d3f4070 100644
--- a/packages/calcite-components/src/demos/shell/demo-app-advanced-center-row.html
+++ b/packages/calcite-components/src/demos/shell/demo-app-advanced-center-row.html
@@ -76,7 +76,7 @@
-
+
@@ -110,7 +110,7 @@
-
+
diff --git a/packages/calcite-components/src/demos/shell/demo-app-advanced.html b/packages/calcite-components/src/demos/shell/demo-app-advanced.html
index 164a7d7cc81..e4cc82f0940 100644
--- a/packages/calcite-components/src/demos/shell/demo-app-advanced.html
+++ b/packages/calcite-components/src/demos/shell/demo-app-advanced.html
@@ -87,7 +87,7 @@
-
+
@@ -123,7 +123,7 @@
-
+
diff --git a/packages/calcite-components/src/demos/shell/demo-app-blank.html b/packages/calcite-components/src/demos/shell/demo-app-blank.html
index 1a14370eca2..6f7a339bdc2 100644
--- a/packages/calcite-components/src/demos/shell/demo-app-blank.html
+++ b/packages/calcite-components/src/demos/shell/demo-app-blank.html
@@ -79,7 +79,7 @@
-
+
@@ -108,7 +108,7 @@
-
+
@@ -131,7 +131,7 @@
-
+
@@ -162,7 +162,7 @@
-
+
diff --git a/packages/calcite-components/src/demos/shell/demo-app-center-row-action-bar.html b/packages/calcite-components/src/demos/shell/demo-app-center-row-action-bar.html
index a2910666ec4..f44123affa1 100644
--- a/packages/calcite-components/src/demos/shell/demo-app-center-row-action-bar.html
+++ b/packages/calcite-components/src/demos/shell/demo-app-center-row-action-bar.html
@@ -76,7 +76,7 @@
-
+
@@ -110,7 +110,7 @@
-
+
@@ -403,7 +403,7 @@ Boomer v Millennial - California
-
+
diff --git a/packages/calcite-components/src/demos/shell/demo-app-full-window-reversed.html b/packages/calcite-components/src/demos/shell/demo-app-full-window-reversed.html
index aaabe39c98b..2f1e727c983 100644
--- a/packages/calcite-components/src/demos/shell/demo-app-full-window-reversed.html
+++ b/packages/calcite-components/src/demos/shell/demo-app-full-window-reversed.html
@@ -160,7 +160,7 @@
-
+
diff --git a/packages/calcite-components/src/demos/shell/demo-app-full-window.html b/packages/calcite-components/src/demos/shell/demo-app-full-window.html
index 188f25620fc..f36af0f334f 100644
--- a/packages/calcite-components/src/demos/shell/demo-app-full-window.html
+++ b/packages/calcite-components/src/demos/shell/demo-app-full-window.html
@@ -118,7 +118,7 @@
-
+
diff --git a/packages/calcite-components/src/demos/shell/nesting-testing-flow.html b/packages/calcite-components/src/demos/shell/nesting-testing-flow.html
index 82a6b21d405..117244ec3d4 100644
--- a/packages/calcite-components/src/demos/shell/nesting-testing-flow.html
+++ b/packages/calcite-components/src/demos/shell/nesting-testing-flow.html
@@ -79,7 +79,7 @@
-
+
@@ -105,7 +105,7 @@
-
+
diff --git a/packages/calcite-components/src/demos/shell/nesting-testing.html b/packages/calcite-components/src/demos/shell/nesting-testing.html
index 31f24b07aa8..93ccfd6f05e 100644
--- a/packages/calcite-components/src/demos/shell/nesting-testing.html
+++ b/packages/calcite-components/src/demos/shell/nesting-testing.html
@@ -79,7 +79,7 @@
-
+
@@ -105,7 +105,7 @@
-
+
diff --git a/packages/calcite-components/src/demos/shell/popup-config-example.html b/packages/calcite-components/src/demos/shell/popup-config-example.html
index 54b53e0bf1c..1f82ddd1081 100644
--- a/packages/calcite-components/src/demos/shell/popup-config-example.html
+++ b/packages/calcite-components/src/demos/shell/popup-config-example.html
@@ -89,7 +89,7 @@
-
+
@@ -138,7 +138,7 @@
-
+
diff --git a/packages/calcite-components/src/demos/shell/resizable-panels.html b/packages/calcite-components/src/demos/shell/resizable-panels.html
index 2de8ce5143f..4ced3682b60 100644
--- a/packages/calcite-components/src/demos/shell/resizable-panels.html
+++ b/packages/calcite-components/src/demos/shell/resizable-panels.html
@@ -88,7 +88,7 @@
-
+
@@ -124,7 +124,7 @@
-
+
@@ -257,7 +257,7 @@ Boomer v Millennial - California
-
+
@@ -282,7 +282,7 @@ Boomer v Millennial - California
-
+