feat(action-bar): add "actions-end" slot (deprecates "bottom-actions") (

#7435)

**Related Issue:** #6517

## Summary

- Add "actions-end" slot (deprecates "bottom-actions")
- Update tests
- Update stories
- Update demos
- Update usage
- Update CSS

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("<calcite-action-bar expanded></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");
 
@@ -166,7 +166,7 @@ describe("calcite-action-bar", () => {
 
       await page.setContent(html`<calcite-action-bar expand-disabled></calcite-action-bar>`);
 
-      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`<calcite-action-bar scale="l"></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");
 
@@ -338,7 +338,7 @@ describe("calcite-action-bar", () => {
               <calcite-action text="Save" icon="save" disabled></calcite-action>
               <calcite-action icon="layers" text="Layers"></calcite-action>
             </calcite-action-group>
-            <calcite-action-group slot="bottom-actions">
+            <calcite-action-group slot="actions-end">
               <calcite-action text="Tips" icon="lightbulb"></calcite-action>
             </calcite-action-group>
           </calcite-action-bar>
@@ -386,7 +386,7 @@ describe("calcite-action-bar", () => {
               <calcite-action text="Save" icon="save" disabled></calcite-action>
               <calcite-action icon="layers" text="Layers"></calcite-action>
             </calcite-action-group>
-            <calcite-action-group slot="bottom-actions">
+            <calcite-action-group slot="actions-end">
               <calcite-action text="Tips" icon="lightbulb"></calcite-action>
             </calcite-action-group>
           </calcite-action-bar>

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;
 }
 

packages/calcite-components/src/components/action-bar/action-bar.stories.ts

@@ -81,7 +81,7 @@ export const horizontal = (): string => html`
         <calcite-action text="Save" active icon="save"> </calcite-action>
         <calcite-action text="Layers" icon="layers"> </calcite-action>
       </calcite-action-group>
-      <calcite-action slot="bottom-actions" text="hello world" icon="layers"> </calcite-action>
+      <calcite-action slot="actions-end" text="hello world" icon="layers"> </calcite-action>
     </calcite-action-bar>
   </div>
 `;
@@ -99,7 +99,7 @@ export const horizontalSmall = (): string => html`
         <calcite-action text="Save" active icon="save"> </calcite-action>
         <calcite-action text="Layers" icon="layers"> </calcite-action>
       </calcite-action-group>
-      <calcite-action slot="bottom-actions" text="hello world" icon="layers"> </calcite-action>
+      <calcite-action slot="actions-end" text="hello world" icon="layers"> </calcite-action>
     </calcite-action-bar>
   </div>
 `;
@@ -172,7 +172,7 @@ export const adjacentTooltipsOpenQuickly = (): string => html`<div style="displa
         ><calcite-tooltip placement="right" slot="tooltip">Layers</calcite-tooltip></calcite-action
       >
     </calcite-action-group>
-    <calcite-action slot="bottom-actions" text="hello world" icon="layers"
+    <calcite-action slot="actions-end" text="hello world" icon="layers"
       ><calcite-tooltip placement="right" slot="tooltip">hello world</calcite-tooltip></calcite-action
     >
   </calcite-action-bar>
@@ -194,30 +194,30 @@ withTooltip_NoTest.parameters = {
 
 export const hebrewLocale_TestOnly = (): string => `<calcite-action-bar expanded lang="he">
 <calcite-action text="Information" icon="information"></calcite-action>
-<calcite-action text="Feedback" slot="bottom-actions" icon="mega-phone"></calcite-action>
+<calcite-action text="Feedback" slot="actions-end" icon="mega-phone"></calcite-action>
 </calcite-action-bar>`;
 
 export const norwegianLocale_TestOnly = (): string => `<calcite-action-bar expanded lang="nb">
 <calcite-action text="Information" icon="information"></calcite-action>
-<calcite-action text="Feedback" slot="bottom-actions" icon="mega-phone"></calcite-action>
+<calcite-action text="Feedback" slot="actions-end" icon="mega-phone"></calcite-action>
 </calcite-action-bar>`;
 
 export const FrenchLocale_TestOnly = (): string => `<calcite-action-bar expanded lang="fr">
 <calcite-action text="Information" icon="information"></calcite-action>
-<calcite-action text="Feedback" slot="bottom-actions" icon="mega-phone"></calcite-action>
+<calcite-action text="Feedback" slot="actions-end" icon="mega-phone"></calcite-action>
 </calcite-action-bar>`;
 
 export const hongKongLocale_TestOnly = (): string => `<calcite-action-bar expanded lang="zh-HK">
 <calcite-action text="Information" icon="information"></calcite-action>
-<calcite-action text="Feedback" slot="bottom-actions" icon="mega-phone"></calcite-action>
+<calcite-action text="Feedback" slot="actions-end" icon="mega-phone"></calcite-action>
 </calcite-action-bar>`;
 
 export const ukranianLocale_TestOnly = (): string => `<calcite-action-bar expanded lang="uk">
 <calcite-action text="Information" icon="information"></calcite-action>
-<calcite-action text="Feedback" slot="bottom-actions" icon="mega-phone"></calcite-action>
+<calcite-action text="Feedback" slot="actions-end" icon="mega-phone"></calcite-action>
 </calcite-action-bar>`;
 
 export const bosnianLocale_TestOnly = (): string => `<calcite-action-bar expanded lang="bs">
 <calcite-action text="Information" icon="information"></calcite-action>
-<calcite-action text="Feedback" slot="bottom-actions" icon="mega-phone"></calcite-action>
+<calcite-action text="Feedback" slot="actions-end" icon="mega-phone"></calcite-action>
 </calcite-action-bar>`;

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 ? (
-      <calcite-action-group class={CSS.actionGroupBottom} layout={layout} scale={scale}>
+    return getSlotted(el, SLOTS.actionsEnd) ||
+      getSlotted(el, SLOTS.bottomActions) ||
+      expandToggleNode ? (
+      <calcite-action-group class={CSS.actionGroupEnd} layout={layout} scale={scale}>
+        <slot name={SLOTS.actionsEnd} />
         <slot name={SLOTS.bottomActions} />
         <slot name={SLOTS.expandTooltip} />
         {expandToggleNode}

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.
 </calcite-action-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
 <calcite-action-bar>
   <calcite-action text="Information" icon="information"></calcite-action>
-  <calcite-action text="Feedback" slot="bottom-actions" icon="mega-phone"></calcite-action>
+  <calcite-action text="Feedback" slot="actions-end" icon="mega-phone"></calcite-action>
 </calcite-action-bar>
 ```
 
@@ -92,7 +92,7 @@ Type: `Promise<void>`
 | 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

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",
 };

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
+<calcite-action-bar>
+  <calcite-action text="Information" icon="information"></calcite-action>
+  <calcite-action text="Feedback" slot="actions-end" icon="mega-phone"></calcite-action>
+</calcite-action-bar>
+```

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("<calcite-action-pad expanded></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");
 
@@ -144,7 +144,7 @@ describe("calcite-action-pad", () => {
 
     await page.setContent(`<calcite-action-pad expand-disabled></calcite-action-pad>`);
 
-    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: `<calcite-action-pad scale="l"></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");
 

packages/calcite-components/src/components/action-pad/action-pad.tsx

@@ -260,7 +260,7 @@ export class ActionPad
     ) : null;
 
     return expandToggleNode ? (
-      <calcite-action-group class={CSS.actionGroupBottom} layout={layout} scale={scale}>
+      <calcite-action-group class={CSS.actionGroupEnd} layout={layout} scale={scale}>
         <slot name={SLOTS.expandTooltip} />
         {expandToggleNode}
       </calcite-action-group>

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",
 };
 

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
           <calcite-action text="Save" disabled icon="save"></calcite-action>
           <calcite-action text="Layers" icon="layers"></calcite-action>
         </calcite-action-group>
-        <calcite-action slot="bottom-actions" text="Tips" icon="lightbulb"></calcite-action>
+        <calcite-action slot="actions-end" text="Tips" icon="lightbulb"></calcite-action>
       </calcite-action-bar>
       <calcite-flow>
         <calcite-flow-item heading="Layer settings">

packages/calcite-components/src/components/shell/shell.stories.ts

@@ -141,7 +141,7 @@ const centerRowWithActionBarHTML = html`
       <calcite-action text="Share" icon="share"></calcite-action>
       <calcite-action text="Print" icon="print"></calcite-action>
     </calcite-action-group>
-    <calcite-action-group slot="bottom-actions">
+    <calcite-action-group slot="actions-end">
       <calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
       <calcite-action text="What's next" icon="mega-phone"></calcite-action>
     </calcite-action-group>
@@ -799,7 +799,7 @@ position:relative;
         <calcite-action text="Share" icon="share"></calcite-action>
         <calcite-action text="Print" icon="print"></calcite-action>
       </calcite-action-group>
-      <calcite-action-group slot="bottom-actions">
+      <calcite-action-group slot="actions-end">
         <calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
         <calcite-action text="What's next" icon="mega-phone"></calcite-action>
       </calcite-action-group>
@@ -826,7 +826,7 @@ position:relative;
         <calcite-action text-enabled icon="pencil-square" text="Edit" disabled slot="menu-actions"> </calcite-action>
         <calcite-action text-enabled icon="clock" text="Time" disabled slot="menu-actions"></calcite-action>
       </calcite-action-group>
-      <calcite-action-group slot="bottom-actions">
+      <calcite-action-group slot="actions-end">
         <calcite-action text="Tips" id="tip-manager-button">
           <calcite-icon icon="lightbulb" scale="s"></calcite-icon>
         </calcite-action>
@@ -869,7 +869,7 @@ position:relative;
         <calcite-action text="Share" icon="share"></calcite-action>
         <calcite-action text="Print" icon="print"></calcite-action>
       </calcite-action-group>
-      <calcite-action-group slot="bottom-actions">
+      <calcite-action-group slot="actions-end">
         <calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
         <calcite-action text="What's next" icon="mega-phone"></calcite-action>
       </calcite-action-group>
@@ -893,7 +893,7 @@ position:relative;
         <calcite-action text="Share" icon="share"></calcite-action>
         <calcite-action text="Print" icon="print"></calcite-action>
       </calcite-action-group>
-      <calcite-action-group slot="bottom-actions">
+      <calcite-action-group slot="actions-end">
         <calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
         <calcite-action text="What's next" icon="mega-phone"></calcite-action>
       </calcite-action-group>
@@ -926,7 +926,7 @@ position:relative;
         <calcite-action text="Share" icon="share"></calcite-action>
         <calcite-action text="Print" icon="print"></calcite-action>
       </calcite-action-group>
-      <calcite-action-group slot="bottom-actions">
+      <calcite-action-group slot="actions-end">
         <calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
         <calcite-action text="What's next" icon="mega-phone"></calcite-action>
       </calcite-action-group>
@@ -956,7 +956,7 @@ position:relative;
         <calcite-action text-enabled icon="pencil-square" text="Edit" disabled slot="menu-actions"> </calcite-action>
         <calcite-action text-enabled icon="clock" text="Time" disabled slot="menu-actions"></calcite-action>
       </calcite-action-group>
-      <calcite-action-group slot="bottom-actions">
+      <calcite-action-group slot="actions-end">
         <calcite-action text="Tips" id="tip-manager-button">
           <calcite-icon icon="lightbulb" scale="s"></calcite-icon>
         </calcite-action>
@@ -1091,7 +1091,7 @@ position:relative;
         <calcite-action text="Share" icon="share"></calcite-action>
         <calcite-action text="Print" icon="print"></calcite-action>
       </calcite-action-group>
-      <calcite-action-group slot="bottom-actions">
+      <calcite-action-group slot="actions-end">
         <calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
         <calcite-action text="What's next" icon="mega-phone"></calcite-action>
       </calcite-action-group>
@@ -1122,7 +1122,7 @@ position:relative;
         <calcite-action text="Share" icon="share"></calcite-action>
         <calcite-action text="Print" icon="print"></calcite-action>
       </calcite-action-group>
-      <calcite-action-group slot="bottom-actions">
+      <calcite-action-group slot="actions-end">
         <calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
         <calcite-action text="What's next" icon="mega-phone"></calcite-action>
       </calcite-action-group>

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
           <calcite-action text="Save" disabled icon="save"></calcite-action>
           <calcite-action text="Layers" icon="layers"></calcite-action>
         </calcite-action-group>
-        <calcite-action slot="bottom-actions" text="Tips" icon="lightbulb"></calcite-action>
+        <calcite-action slot="actions-end" text="Tips" icon="lightbulb"></calcite-action>
       </calcite-action-bar>
       <calcite-flow>
         <calcite-flow-item heading="Layer settings">