feat(action): make actions fill full width of parent

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

@@ -289,3 +289,21 @@ export const bosnianLocale_TestOnly = (): string => `<calcite-action-bar expande
 <calcite-action text-enabled text="Information" icon="information"></calcite-action>
 <calcite-action text-enabled text="Feedback" slot="actions-end" icon="mega-phone"></calcite-action>
 </calcite-action-bar>`;
+
+export const fullWidthActions = (): string => html`
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column;
+      width: 800px;
+      margin-block: 2rem;
+    }
+  </style>
+  <div class="container">
+    <calcite-action-bar layout="horizontal">
+      <calcite-action text="Add" icon="plus" width="full"> </calcite-action>
+      <calcite-action text="Remove" icon="minus" width="full"> </calcite-action>
+      <calcite-action text="Copy" icon="plus" width="full"> </calcite-action>
+    </calcite-action-bar>
+  </div>
+`;

packages/calcite-components/src/components/action/action.e2e.ts

@@ -39,6 +39,10 @@ describe("calcite-action", () => {
         propertyName: "textEnabled",
         defaultValue: false,
       },
+      {
+        propertyName: "width",
+        defaultValue: "auto",
+      },
     ]);
   });
 
@@ -88,6 +92,10 @@ describe("calcite-action", () => {
         propertyName: "textEnabled",
         value: true,
       },
+      {
+        propertyName: "width",
+        value: "full",
+      },
     ]);
   });
 

packages/calcite-components/src/components/action/action.scss

@@ -36,6 +36,18 @@
   border-radius: inherit;
 }
 
+:host([width="full"]) {
+  flex: 1 0 auto;
+
+  .button {
+    justify-content: center;
+
+    .text-container--visible {
+      flex: none;
+    }
+  }
+}
+
 :host([drag-handle]) {
   @apply cursor-move;
   --calcite-internal-action-text-color: var(--calcite-color-border-input);

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

@@ -10,7 +10,7 @@ import {
 import { componentFocusable } from "../../utils/component";
 import { createObserver } from "../../utils/observers";
 import { getIconScale } from "../../utils/component";
-import { Alignment, Appearance, Scale } from "../interfaces";
+import { Alignment, Appearance, Scale, Width } from "../interfaces";
 import { IconNameOrString } from "../icon/interfaces";
 import { useT9n } from "../../controllers/useT9n";
 import type { Tooltip } from "../tooltip/tooltip";
@@ -105,6 +105,13 @@ export class Action extends LitElement implements InteractiveComponent {
   /** Specifies the size of the component. */
   @property({ reflect: true }) scale: Scale = "m";
 
+  /**
+   * When `full`, the component's width spans all its parent's available space
+   *
+   * @private
+   */
+  @property({ reflect: true }) width: Extract<"auto" | "full", Width> = "auto";
+
   /**
    * Specifies text that accompanies the icon.
    *