Merge branch 'epic/7180-component-tokens' of github.com:Esri/calcite-…

…components into astump/9644-themed-demo-helper
Esri · Jun 20, 2024 · d5f38b0 · d5f38b0
2 parents c3756fb + 7f60326
commit d5f38b0
Show file tree

Hide file tree

Showing 59 changed files with 1,764 additions and 548 deletions.
diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
@@ -4562,6 +4562,10 @@ export namespace Components {
           * Accessible name for the dropdown menu.
          */
         "dropdownLabel": string;
+        /**
+          * Defines the available placements that can be used when a flip occurs.
+         */
+        "flipPlacements": FlipPlacement[];
         /**
           * Specifies the kind of the component, which will apply to border and background, if applicable.
          */
@@ -4574,6 +4578,11 @@ export namespace Components {
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
         "overlayPositioning": OverlayPositioning;
+        /**
+          * Determines where the component will be positioned relative to the container element.
+          * @default "bottom-end"
+         */
+        "placement": MenuPlacement;
         /**
           * Specifies an icon to display at the end of the primary button.
          */
@@ -12509,6 +12518,10 @@ declare namespace LocalJSX {
           * Accessible name for the dropdown menu.
          */
         "dropdownLabel"?: string;
+        /**
+          * Defines the available placements that can be used when a flip occurs.
+         */
+        "flipPlacements"?: FlipPlacement[];
         /**
           * Specifies the kind of the component, which will apply to border and background, if applicable.
          */
@@ -12529,6 +12542,11 @@ declare namespace LocalJSX {
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
         "overlayPositioning"?: OverlayPositioning;
+        /**
+          * Determines where the component will be positioned relative to the container element.
+          * @default "bottom-end"
+         */
+        "placement"?: MenuPlacement;
         /**
           * Specifies an icon to display at the end of the primary button.
          */

diff --git a/packages/calcite-components/src/components/avatar/avatar.e2e.ts b/packages/calcite-components/src/components/avatar/avatar.e2e.ts
@@ -1,5 +1,5 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, hidden, renders } from "../../tests/commonTests";
+import { accessible, defaults, hidden, renders, themed } from "../../tests/commonTests";
 import { placeholderImage } from "../../../.storybook/placeholderImage";
 import { html } from "../../../support/formatting";
 import { CSS } from "./resources";
@@ -98,4 +98,56 @@ describe("calcite-avatar", () => {
     expect(secondBgColor).not.toEqual(thirdBgColor);
     expect(firstBgColor).not.toEqual(thirdBgColor);
   });
+
+  describe("theme", () => {
+    describe("thumbnail", () => {
+      themed(
+        html`<calcite-avatar
+          thumbnail="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII"
+        ></calcite-avatar>`,
+        {
+          "--calcite-avatar-corner-radius": [
+            {
+              targetProp: "borderRadius",
+            },
+            {
+              shadowSelector: `.${CSS.thumbnail}`,
+              targetProp: "borderRadius",
+            },
+          ],
+        },
+      );
+    });
+
+    describe("icon", () => {
+      themed(html`<calcite-avatar user-id="umonti"></calcite-avatar>`, {
+        "--calcite-avatar-icon-color": {
+          shadowSelector: `.${CSS.icon}`,
+          targetProp: "color",
+        },
+        "--calcite-avatar-corner-radius": [
+          {
+            targetProp: "borderRadius",
+          },
+          {
+            shadowSelector: `.${CSS.background}`,
+            targetProp: "borderRadius",
+          },
+        ],
+      });
+    });
+
+    describe("initials", () => {
+      themed(html`<calcite-avatar full-name="Urbano Monti"></calcite-avatar>`, {
+        "--calcite-avatar-text-color": {
+          shadowSelector: `.${CSS.initials}`,
+          targetProp: "color",
+        },
+        "--calcite-avatar-corner-radius": {
+          shadowSelector: `.${CSS.background}`,
+          targetProp: "borderRadius",
+        },
+      });
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/card-group/card-group.e2e.ts b/packages/calcite-components/src/components/card-group/card-group.e2e.ts
@@ -1,8 +1,9 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { html } from "../../../support/formatting";
-import { accessible, renders, hidden, disabled } from "../../tests/commonTests";
-import { CSS } from "../card/resources";
+import { accessible, renders, hidden, disabled, themed } from "../../tests/commonTests";
+import { CSS as CARD_CSS } from "../card/resources";
 import { createSelectedItemsAsserter } from "../../tests/utils";
+import { CSS } from "./resources";
 
 describe("calcite-card-group", () => {
   describe("renders", () => {
@@ -70,8 +71,8 @@ describe("calcite-card-group", () => {
       const element = await page.find("calcite-card-group");
       const card1 = await page.find("#card-1");
       const card2 = await page.find("#card-2");
-      const card1CheckAction = await page.find(`#card-1 >>> .${CSS.checkboxWrapper}`);
-      const card2CheckAction = await page.find(`#card-2 >>> .${CSS.checkboxWrapper}`);
+      const card1CheckAction = await page.find(`#card-1 >>> .${CARD_CSS.checkboxWrapper}`);
+      const card2CheckAction = await page.find(`#card-2 >>> .${CARD_CSS.checkboxWrapper}`);
 
       const cardGroupSelectSpy = await element.spyOnEvent("calciteCardGroupSelect");
       const selectedItemAsserter = await createSelectedItemsAsserter(
@@ -88,7 +89,7 @@ describe("calcite-card-group", () => {
       expect(await element.getProperty("selectedItems")).toHaveLength(1);
       await selectedItemAsserter([card2.id]);
 
-      card1CheckAction.click();
+      await card1CheckAction.click();
       await page.waitForChanges();
       expect(await cardGroupSelectSpy).toHaveReceivedEventTimes(1);
       expect(await cardSelectSpy1).toHaveReceivedEventTimes(1);
@@ -98,7 +99,7 @@ describe("calcite-card-group", () => {
       expect(await element.getProperty("selectedItems")).toHaveLength(1);
       await selectedItemAsserter([card1.id]);
 
-      card2CheckAction.click();
+      await card2CheckAction.click();
       await page.waitForChanges();
       expect(cardGroupSelectSpy).toHaveReceivedEventTimes(2);
       expect(cardSelectSpy1).toHaveReceivedEventTimes(1);
@@ -108,7 +109,7 @@ describe("calcite-card-group", () => {
       expect(await element.getProperty("selectedItems")).toHaveLength(1);
       await selectedItemAsserter([card2.id]);
 
-      card2CheckAction.click();
+      await card2CheckAction.click();
       await page.waitForChanges();
       expect(cardGroupSelectSpy).toHaveReceivedEventTimes(3);
       expect(cardSelectSpy1).toHaveReceivedEventTimes(1);
@@ -132,8 +133,8 @@ describe("calcite-card-group", () => {
       const element = await page.find("calcite-card-group");
       const card1 = await page.find("#card-1");
       const card2 = await page.find("#card-2");
-      const card1CheckAction = await page.find(`#card-1 >>> .${CSS.checkboxWrapper}`);
-      const card2CheckAction = await page.find(`#card-2 >>> .${CSS.checkboxWrapper}`);
+      const card1CheckAction = await page.find(`#card-1 >>> .${CARD_CSS.checkboxWrapper}`);
+      const card2CheckAction = await page.find(`#card-2 >>> .${CARD_CSS.checkboxWrapper}`);
 
       const cardGroupSelectSpy = await element.spyOnEvent("calciteCardGroupSelect");
       const selectedItemAsserter = await createSelectedItemsAsserter(
@@ -146,23 +147,23 @@ describe("calcite-card-group", () => {
       expect(await element.getProperty("selectedItems")).toHaveLength(1);
       await selectedItemAsserter([card1.id]);
 
-      card1CheckAction.click();
+      await card1CheckAction.click();
       await page.waitForChanges();
       expect(cardGroupSelectSpy).toHaveReceivedEventTimes(1);
       expect(await card1.getProperty("selected")).toBe(true);
       expect(await card2.getProperty("selected")).toBe(false);
       expect(await element.getProperty("selectedItems")).toHaveLength(1);
       await selectedItemAsserter([card1.id]);
 
-      card2CheckAction.click();
+      await card2CheckAction.click();
       await page.waitForChanges();
       expect(cardGroupSelectSpy).toHaveReceivedEventTimes(2);
       expect(await card1.getProperty("selected")).toBe(false);
       expect(await card2.getProperty("selected")).toBe(true);
       expect(await element.getProperty("selectedItems")).toHaveLength(1);
       await selectedItemAsserter([card2.id]);
 
-      card2CheckAction.click();
+      await card2CheckAction.click();
       await page.waitForChanges();
       expect(cardGroupSelectSpy).toHaveReceivedEventTimes(3);
       expect(await card1.getProperty("selected")).toBe(false);
@@ -186,9 +187,9 @@ describe("calcite-card-group", () => {
       const card1 = await page.find("#card-1");
       const card2 = await page.find("#card-2");
       const card3 = await page.find("#card-3");
-      const card1CheckAction = await page.find(`#card-1 >>> .${CSS.checkboxWrapper}`);
-      const card2CheckAction = await page.find(`#card-2 >>> .${CSS.checkboxWrapper}`);
-      const card3CheckAction = await page.find(`#card-3 >>> .${CSS.checkboxWrapper}`);
+      const card1CheckAction = await page.find(`#card-1 >>> .${CARD_CSS.checkboxWrapper}`);
+      const card2CheckAction = await page.find(`#card-2 >>> .${CARD_CSS.checkboxWrapper}`);
+      const card3CheckAction = await page.find(`#card-3 >>> .${CARD_CSS.checkboxWrapper}`);
 
       const cardGroupSelectSpy = await element.spyOnEvent("calciteCardGroupSelect");
       const selectedItemAsserter = await createSelectedItemsAsserter(
@@ -201,7 +202,7 @@ describe("calcite-card-group", () => {
       expect(await element.getProperty("selectedItems")).toEqual([]);
       await selectedItemAsserter([]);
 
-      card1CheckAction.click();
+      await card1CheckAction.click();
       await page.waitForChanges();
       expect(cardGroupSelectSpy).toHaveReceivedEventTimes(1);
       expect(await card1.getProperty("selected")).toBe(true);
@@ -210,7 +211,7 @@ describe("calcite-card-group", () => {
       expect(await element.getProperty("selectedItems")).toHaveLength(1);
       await selectedItemAsserter([card1.id]);
 
-      card2CheckAction.click();
+      await card2CheckAction.click();
       await page.waitForChanges();
       expect(cardGroupSelectSpy).toHaveReceivedEventTimes(2);
       expect(await card1.getProperty("selected")).toBe(true);
@@ -219,7 +220,7 @@ describe("calcite-card-group", () => {
       expect(await element.getProperty("selectedItems")).toHaveLength(2);
       await selectedItemAsserter([card1.id, card2.id]);
 
-      card3CheckAction.click();
+      await card3CheckAction.click();
       await page.waitForChanges();
       expect(cardGroupSelectSpy).toHaveReceivedEventTimes(3);
       expect(await card1.getProperty("selected")).toBe(true);
@@ -228,7 +229,7 @@ describe("calcite-card-group", () => {
       expect(await element.getProperty("selectedItems")).toHaveLength(3);
       await selectedItemAsserter([card1.id, card2.id, card3.id]);
 
-      card1CheckAction.click();
+      await card1CheckAction.click();
       await page.waitForChanges();
       expect(cardGroupSelectSpy).toHaveReceivedEventTimes(4);
       expect(await card1.getProperty("selected")).toBe(false);
@@ -237,7 +238,7 @@ describe("calcite-card-group", () => {
       expect(await element.getProperty("selectedItems")).toHaveLength(2);
       await selectedItemAsserter([card2.id, card3.id]);
 
-      card2CheckAction.click();
+      await card2CheckAction.click();
       await page.waitForChanges();
       expect(cardGroupSelectSpy).toHaveReceivedEventTimes(5);
       expect(await card1.getProperty("selected")).toBe(false);
@@ -246,7 +247,7 @@ describe("calcite-card-group", () => {
       expect(await element.getProperty("selectedItems")).toHaveLength(1);
       await selectedItemAsserter([card3.id]);
 
-      card3CheckAction.click();
+      await card3CheckAction.click();
       await page.waitForChanges();
       expect(cardGroupSelectSpy).toHaveReceivedEventTimes(6);
       expect(await card1.getProperty("selected")).toBe(false);
@@ -441,4 +442,15 @@ describe("calcite-card-group", () => {
     expect(await element.getProperty("selectedItems")).toHaveLength(2);
     await selectedItemAsserter([card4.id, card5.id]);
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed("calcite-card-group", {
+        "--calcite-card-group-gap": {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "gap",
+        },
+      });
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/card-group/card-group.tsx b/packages/calcite-components/src/components/card-group/card-group.tsx
@@ -26,6 +26,7 @@ import {
   setComponentLoaded,
   setUpLoadableComponent,
 } from "../../utils/loadable";
+import { CSS } from "./resources";
 
 /**
  * @slot - A slot for adding one or more `calcite-card`s.
@@ -248,7 +249,7 @@ export class CardGroup implements InteractiveComponent, LoadableComponent {
           <div
             aria-disabled={toAriaBoolean(this.disabled)}
             aria-label={this.label}
-            class="container"
+            class={CSS.container}
             role={role}
           >
             <slot

diff --git a/packages/calcite-components/src/components/card-group/resources.ts b/packages/calcite-components/src/components/card-group/resources.ts
@@ -0,0 +1,3 @@
+export const CSS = {
+  container: "container",
+};