feat(action, action-bar, action-group, action-menu, action-pad): add component tokens

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

@@ -10,6 +10,7 @@ import {
   renders,
   slots,
   t9n,
+  themed,
 } from "../../tests/commonTests";
 import { getFocusedElementProp } from "../../tests/utils";
 import { DEBOUNCE } from "../../utils/resources";
@@ -532,4 +533,27 @@ describe("calcite-action-bar", () => {
 
     expect(await group.getProperty("layout")).toBe("vertical");
   });
+
+  describe("theme", () => {
+    themed(
+      html`<calcite-action-bar expanded layout="vertical">
+        <calcite-action-group>
+          <calcite-action id="my-action" text="Add" label="Add Item" icon="plus"></calcite-action>
+        </calcite-action-group>
+        <calcite-action-group>
+          <calcite-action-menu label="Save and open">
+            <calcite-action id="menu-action" text-enabled text="Save" label="Save" icon="save"></calcite-action>
+          </calcite-action-menu>
+        </calcite-action-group>
+      </calcite-action-bar>`,
+      {
+        "--calcite-action-bar-expanded-max-width": {
+          targetProp: "maxInlineSize",
+        },
+        "--calcite-action-bar-items-space": {
+          targetProp: "gap",
+        },
+      },
+    );
+  });
 });

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

@@ -3,59 +3,53 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-action-bar-expanded-max-width: When `layout` is `"vertical"`, specifies the expanded max width of the component.
+ * @prop --calcite-action-bar-expanded-max-width: Specifies the maximum width of the component when it's `layout` is `"vertical"`.
+ * @prop --calcite-action-bar-items-space: Specifies the space between slotted components in the component.
  */
 
 :host {
   @extend %component-host;
   @apply pointer-events-auto
     inline-flex
     self-stretch;
-  --calcite-action-bar-expanded-max-width: auto;
+
+  gap: var(--calcite-action-bar-items-space, 0);
 }
 
 :host([layout="vertical"]) {
   @apply flex-col;
+
+  &:host([overflow-actions-disabled]) {
+    overflow-y: auto;
+  }
+
+  &:host([expanded]) {
+    max-inline-size: var(--calcite-action-bar-expanded-max-width, auto);
+  }
+
   .action-group--end {
     margin-block-start: auto;
   }
+
+  ::slotted(calcite-action-group:not(:last-of-type)) {
+    border-block-end-width: var(--calcite-border-width-sm);
+  }
 }
 
 :host([layout="horizontal"]) {
   @apply flex-row;
+
+  &:host([overflow-actions-disabled]) {
+    overflow-x: auto;
+  }
+
   .action-group--end {
     @apply ms-auto;
   }
-}
 
-:host([layout="vertical"][overflow-actions-disabled]) {
-  overflow-y: auto;
-}
-
-:host([layout="horizontal"][overflow-actions-disabled]) {
-  overflow-x: auto;
-}
-
-:host([layout="vertical"][expanded]) {
-  max-inline-size: var(--calcite-action-bar-expanded-max-width);
-}
-
-::slotted(calcite-action-group) {
-  border-block-end: 1px solid var(--calcite-color-border-3);
-}
-
-:host([layout="horizontal"]) ::slotted(calcite-action-group) {
-  border-block-end: 0;
-  border-inline-end: 1px solid var(--calcite-color-border-3);
-}
-
-:host([layout="horizontal"][expand-disabled]) ::slotted(calcite-action-group:last-of-type) {
-  border-inline-end: 0;
-}
-
-::slotted(calcite-action-group:last-child) {
-  border-block-end: 0;
-  border-inline-end: 0;
+  ::slotted(calcite-action-group:not(:last-of-type)) {
+    border-inline-end-width: var(--calcite-border-width-sm);
+  }
 }
 
 .action-group--end {

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

@@ -107,23 +107,6 @@ export const horizontalOverflow_TestOnly = (): string => html`
   </div>
 `;
 
-export const withDefinedWidths = (): string => html`
-  <style>
-    calcite-action-bar {
-      --calcite-action-bar-expanded-max-width: 150px;
-    }
-  </style>
-  <calcite-action-bar expanded>
-    <calcite-action-group>
-      <calcite-action text="Add to my custom action bar application" icon="plus"></calcite-action>
-      <calcite-action text="Save to my custom action bar application" icon="save"></calcite-action>
-    </calcite-action-group>
-    <calcite-action-group>
-      <calcite-action text="Layers in my custom action bar application" icon="layers"></calcite-action>
-    </calcite-action-group>
-  </calcite-action-bar>
-`;
-
 export const darkModeRTL_TestOnly = (): string => html`
   <calcite-action-bar position="start" dir="rtl" class="calcite-mode-dark">
     <calcite-action-group>

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

@@ -1,5 +1,6 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, focusable, hidden, renders, slots, t9n } from "../../tests/commonTests";
+import { accessible, defaults, focusable, hidden, renders, slots, t9n, themed } from "../../tests/commonTests";
+import { html } from "../../../support/formatting";
 import { CSS, SLOTS } from "./resources";
 
 const actionGroupHTML = `<calcite-action-group scale="l">
@@ -72,4 +73,20 @@ describe("calcite-action-group", () => {
   describe("translation support", () => {
     t9n("calcite-action-group");
   });
+
+  describe("theme", () => {
+    describe("border", () => {
+      themed(
+        html`<calcite-action-menu open
+          ><calcite-action-group></calcite-action-group><calcite-action-group></calcite-action-group
+        ></calcite-action-menu>`,
+        {
+          "--calcite-action-group-border-color": {
+            selector: "calcite-action-group",
+            targetProp: "borderBlockEndColor",
+          },
+        },
+      );
+    });
+  });
 });

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

@@ -3,9 +3,12 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-action-group-columns: Sets number of grid-template-columns when the `layout` property is `"grid"`.
- * @prop --calcite-action-group-gap: Sets the gap (gutters) between rows and columns when the `layout` property is `"grid"`.
- * @prop --calcite-action-group-padding: Sets the padding when the `layout` property is `"grid"`.
+ * @prop --calcite-action-background-color: Specifies the component's background color.
+ * @prop --calcite-action-group-border-color: Specifies the component's border color when used in a calcite-action-bar or calcite-action-menu.
+ * @prop --calcite-action-group-columns: Specifies the component's grid-template-columns when the `layout` property is `"grid"`.
+ * @prop --calcite-action-group-gap: Specifies the component's gap  when the `layout` property is `"grid" and padding`.
+ * @prop --calcite-action-group-padding: [Deprecated] Use --calcite-action-group-gap. Specifies the component's padding.
+ *
  */
 
 :host {
@@ -15,32 +18,33 @@
   flex-col
   p-0;
 
-  --calcite-action-group-columns: 3;
-  --calcite-action-group-gap: theme("gap.px");
-  --calcite-action-group-padding: theme("padding.px");
+  background-color: transparent;
+  border-color: var(--calcite-action-group-border-color, var(--calcite-color-border-3));
+  border-style: solid;
+  border-width: 0;
 }
 
 .container {
   @apply flex flex-col flex-grow;
 }
 
 :host([columns="1"]) {
-  --calcite-action-group-columns: 1;
+  --calcite-internal-action-group-columns: 1;
 }
 :host([columns="2"]) {
-  --calcite-action-group-columns: 2;
+  --calcite-internal-action-group-columns: 2;
 }
 :host([columns="3"]) {
-  --calcite-action-group-columns: 3;
+  --calcite-internal-action-group-columns: 3;
 }
 :host([columns="4"]) {
-  --calcite-action-group-columns: 4;
+  --calcite-internal-action-group-columns: 4;
 }
 :host([columns="5"]) {
-  --calcite-action-group-columns: 5;
+  --calcite-internal-action-group-columns: 5;
 }
 :host([columns="6"]) {
-  --calcite-action-group-columns: 6;
+  --calcite-internal-action-group-columns: 6;
 }
 
 :host(:first-child) {
@@ -54,15 +58,18 @@
 
 :host([layout="grid"]) {
   @apply grid;
-}
 
-:host([layout="grid"]) .container {
-  @apply bg-background
-  grid
-  place-content-stretch;
-  gap: var(--calcite-action-group-gap);
-  padding: var(--calcite-action-group-gap);
-  grid-template-columns: repeat(var(--calcite-action-group-columns), auto);
+  .container {
+    @apply grid
+    place-content-stretch;
+    background-color: transparent;
+    grid-template-columns: repeat(
+      var(--calcite-action-group-columns, var(--calcite-internal-action-group-columns, 3)),
+      auto
+    );
+    gap: var(--calcite-action-group-gap, 1px);
+    padding: var(--calcite-action-group-gap, 1px);
+  }
 }
 
 @include base-component();

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

@@ -40,7 +40,7 @@ export const withoutDefinedGridGap_TestOnly = (): string =>
   </calcite-action-group>`;
 
 export const withDefinedGridGap_TestOnly = (): string => html`
-  <calcite-action-group layout="grid" style="--calcite-action-group-gap: 0; --calcite-action-group-padding:0;">
+  <calcite-action-group layout="grid" style="--calcite-action-group-gap: 0;">
     <calcite-action text="Add" icon="arrow-up-left"></calcite-action>
     <calcite-action text="Save" icon="chevron-up"></calcite-action>
     <calcite-action text="Layers" icon="arrow-up-right"></calcite-action>
@@ -94,3 +94,26 @@ export const TurkishLocale_TestOnly = (): string =>
       <calcite-dropdown slot="menu-actions"> </calcite-dropdown>
     </calcite-action-group>
   </div>`;
+html`<div class="container">
+  <calcite-action-bar>
+    <calcite-action-group
+      ><calcite-action id="plus" slot="menu-actions" text="Add" icon="plus"></calcite-action>
+      <calcite-action id="banana" slot="menu-actions" text="Banana" icon="banana"></calcite-action
+    ></calcite-action-group>
+    <calcite-action-group
+      ><calcite-action id="plus" slot="menu-actions" text="Add" icon="plus"></calcite-action>
+      <calcite-action id="banana" slot="menu-actions" text="Banana" icon="banana"></calcite-action
+    ></calcite-action-group>
+  </calcite-action-bar>
+  <calcite-action-group layout="grid">
+    <calcite-action text="Add" icon="arrow-up-left"></calcite-action>
+    <calcite-action text="Save" icon="chevron-up"></calcite-action>
+    <calcite-action text="Layers" icon="arrow-up-right"></calcite-action>
+    <calcite-action text="Basemaps" icon="chevron-left"></calcite-action>
+    <calcite-action text="Layers" icon="layers"></calcite-action>
+    <calcite-action text="Basemaps" icon="chevron-right"></calcite-action>
+    <calcite-action text="Basemaps" icon="arrow-down-left"></calcite-action>
+    <calcite-action text="Layers" icon="chevron-down"></calcite-action>
+    <calcite-action text="Basemaps" icon="arrow-down-right"></calcite-action>
+  </calcite-action-group>
+</div>`;

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

@@ -9,6 +9,7 @@ import {
   reflects,
   renders,
   slots,
+  themed,
 } from "../../tests/commonTests";
 import { TOOLTIP_OPEN_DELAY_MS } from "../tooltip/resources";
 import { CSS, SLOTS, activeAttr } from "./resources";
@@ -526,4 +527,20 @@ describe("calcite-action-menu", () => {
       expect(clickSpy).toHaveReceivedEventTimes(1);
     });
   });
+
+  describe("theme", () => {
+    themed(
+      html`<calcite-action-menu open>
+        <calcite-action id="triggerAction" slot="${SLOTS.trigger}" text="Add" icon="plus"></calcite-action>
+        <calcite-action text="Add" icon="plus"></calcite-action>
+        <calcite-action text="Add" icon="plus"></calcite-action
+      ></calcite-action-menu>`,
+      {
+        "--calcite-action-menu-items-space": {
+          shadowSelector: `.${CSS.menu}`,
+          targetProp: "gap",
+        },
+      },
+    );
+  });
 });

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

@@ -1,17 +1,21 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-action-menu-items-space: Specifies the space between actions in the menu.
+ *
+ */
+
 :host {
-  @apply text-color-2
-  text-1
+  @apply text-1
   box-border
   flex
   flex-col;
 }
 
-::slotted(calcite-action-group) {
-  border-block-end: 1px solid var(--calcite-color-border-3);
-}
-
-::slotted(calcite-action-group:last-child) {
-  border-block-end: 0;
+::slotted(calcite-action-group:not(:last-of-type)) {
+  border-block-end-width: var(--calcite-border-width-sm);
 }
 
 .default-trigger {
@@ -29,12 +33,14 @@
 }
 
 .menu {
-  @apply flex-col
+  @apply flex
+  flex-col
   flex-nowrap
   outline-none
   overflow-y-auto
   overflow-x-hidden
   max-h-menu;
+  gap: var(--calcite-action-menu-items-space, 0);
 }
 
 @include base-component();