test(button, fab): add component token E2E tests

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.
          */

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

@@ -1,5 +1,5 @@
 import { E2EElement, newE2EPage } from "@stencil/core/testing";
-import { accessible, disabled, HYDRATED_ATTR, labelable, defaults, hidden, t9n } from "../../tests/commonTests";
+import { accessible, disabled, HYDRATED_ATTR, labelable, defaults, hidden, t9n, themed } from "../../tests/commonTests";
 import { GlobalTestProps } from "../../tests/utils";
 import { html } from "../../../support/formatting";
 import { CSS } from "./resources";
@@ -758,4 +758,95 @@ describe("calcite-button", () => {
     expect(elementHost).toEqualAttribute("width", "full");
     expect(await elementAsButton.getComputedStyle()["width"]).toEqual(await elementHost.getComputedStyle()["width"]);
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed("calcite-button", {
+        "--calcite-button-background-color": {
+          shadowSelector: `.${CSS.button}`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-button-border-color": {
+          shadowSelector: `.${CSS.button}`,
+          targetProp: "borderColor",
+        },
+        "--calcite-button-corner-radius": [
+          {
+            targetProp: "borderRadius",
+          },
+          {
+            shadowSelector: `.${CSS.button}`,
+            targetProp: "borderRadius",
+          },
+        ],
+        "--calcite-button-shadow": {
+          targetProp: "boxShadow",
+        },
+        "--calcite-button-text-color": {
+          shadowSelector: `.${CSS.button}`,
+          targetProp: "color",
+        },
+      });
+    });
+
+    describe("fine-grained round corners", () => {
+      themed("calcite-button", {
+        "--calcite-button-corner-radius-start-start": {
+          shadowSelector: `.${CSS.button}`,
+          targetProp: "borderStartStartRadius",
+        },
+        "--calcite-button-corner-radius-start-end": {
+          shadowSelector: `.${CSS.button}`,
+          targetProp: "borderStartEndRadius",
+        },
+        "--calcite-button-corner-radius-end-start": {
+          shadowSelector: `.${CSS.button}`,
+          targetProp: "borderEndStartRadius",
+        },
+        "--calcite-button-corner-radius-end-end": {
+          shadowSelector: `.${CSS.button}`,
+          targetProp: "borderEndEndRadius",
+        },
+      });
+    });
+
+    describe("link", () => {
+      themed(html`<calcite-button href="https://www.esri.com">button</calcite-button>`, {
+        "--calcite-button-background-color": {
+          shadowSelector: `.${CSS.button}`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-button-border-color": {
+          shadowSelector: `.${CSS.button}`,
+          targetProp: "borderColor",
+        },
+        "--calcite-button-corner-radius": {
+          shadowSelector: `.${CSS.button}`,
+          targetProp: "borderRadius",
+        },
+        "--calcite-button-text-color": {
+          shadowSelector: `.${CSS.button}`,
+          targetProp: "color",
+        },
+      });
+    });
+
+    describe("with icons", () => {
+      themed(html`<calcite-button icon-start="banana">button</calcite-button>`, {
+        "--calcite-button-icon-color": {
+          shadowSelector: `.${CSS.icon}`,
+          targetProp: "color",
+        },
+      });
+    });
+
+    describe("loading", () => {
+      themed(html`<calcite-button loading>button</calcite-button>`, {
+        "--calcite-button-loader-color": {
+          shadowSelector: `calcite-loader`,
+          targetProp: "--calcite-loader-color-start",
+        },
+      });
+    });
+  });
 });