test(dropdown, dropdown-group): 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/dropdown-group/dropdown-group.e2e.ts

@@ -1,6 +1,7 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { defaults, hidden, reflects, renders } from "../../tests/commonTests";
+import { defaults, hidden, reflects, renders, themed } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
+import { CSS } from "./resources";
 
 describe("calcite-dropdown-group", () => {
   describe("defaults", () => {
@@ -64,4 +65,41 @@ describe("calcite-dropdown-group", () => {
     expect(items.length).toBe(3);
     items.forEach(async (item) => expect(await item.getProperty("selectionMode")).toBe("none"));
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed(html` <calcite-dropdown-group group-title="test"></calcite-dropdown-group>`, {
+        "--calcite-dropdown-group-border-color": [
+          {
+            shadowSelector: `.${CSS.title}`,
+            targetProp: "borderColor",
+          },
+        ],
+        "--calcite-dropdown-group-text-color": {
+          shadowSelector: `.${CSS.title}`,
+          targetProp: "color",
+        },
+      });
+    });
+
+    describe("separator", () => {
+      themed(
+        html`
+          <calcite-dropdown open>
+            <calcite-dropdown-group group-title="first"></calcite-dropdown-group>
+            <calcite-dropdown-group group-title="second (with separator)"></calcite-dropdown-group>
+          </calcite-dropdown>
+        `,
+        {
+          "--calcite-dropdown-group-border-color": [
+            {
+              selector: "calcite-dropdown-group[group-title^='second']",
+              shadowSelector: `.${CSS.separator}`,
+              targetProp: "backgroundColor",
+            },
+          ],
+        },
+      );
+    });
+  });
 });

packages/calcite-components/src/components/dropdown-group/dropdown-group.tsx

@@ -12,7 +12,7 @@ import {
 } from "@stencil/core";
 import { Scale, SelectionMode } from "../interfaces";
 import { createObserver } from "../../utils/observers";
-import { CSS } from "../dropdown-item/resources";
+import { CSS } from "./resources";
 import { RequestedItem } from "./interfaces";
 
 /**
@@ -91,13 +91,13 @@ export class DropdownGroup {
 
   render(): VNode {
     const groupTitle = this.groupTitle ? (
-      <span aria-hidden="true" class="dropdown-title">
+      <span aria-hidden="true" class={CSS.title}>
         {this.groupTitle}
       </span>
     ) : null;
 
     const dropdownSeparator =
-      this.groupPosition > 0 ? <div class="dropdown-separator" role="separator" /> : null;
+      this.groupPosition > 0 ? <div class={CSS.separator} role="separator" /> : null;
 
     return (
       <Host aria-label={this.groupTitle} role="group">

packages/calcite-components/src/components/dropdown-group/resources.ts

@@ -0,0 +1,5 @@
+export const CSS = {
+  container: "container",
+  separator: "dropdown-separator",
+  title: "dropdown-title",
+};

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

@@ -11,13 +11,15 @@ import {
   openClose,
   reflects,
   renders,
+  themed,
 } from "../../tests/commonTests";
 import {
   createSelectedItemsAsserter,
   getFocusedElementProp,
   isElementFocused,
   skipAnimations,
 } from "../../tests/utils";
+import { CSS } from "./resources";
 
 describe("calcite-dropdown", () => {
   const simpleDropdownHTML = html`
@@ -1309,4 +1311,24 @@ describe("calcite-dropdown", () => {
       expect(await isElementFocused(page, "#item-3")).toBe(true);
     });
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed("calcite-dropdown", {
+        "--calcite-dropdown-background-color": {
+          shadowSelector: `.${CSS.content}`,
+          targetProp: "backgroundColor",
+        },
+      });
+    });
+
+    describe("deprecated", () => {
+      themed("calcite-dropdown", {
+        "--calcite-dropdown-width": {
+          shadowSelector: `.${CSS.content}`,
+          targetProp: "inlineSize",
+        },
+      });
+    });
+  });
 });

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

@@ -18,7 +18,15 @@
   @include floatingUIWrapper();
 }
 
-@include floatingUIElemAnim(".calcite-dropdown-wrapper");
+@include floatingUIElemAnim(
+  ".calcite-dropdown-wrapper",
+  null,
+  null,
+  null,
+  null,
+  "#{var(--calcite-dropdown-background-color, var(--calcite-color-foreground-1))}"
+);
+
 :host([open]) .calcite-dropdown-wrapper {
   @include floatingUIWrapperActive();
 }
@@ -29,8 +37,8 @@
     overflow-x-hidden
     max-h-menu;
   inline-size: var(--calcite-dropdown-width, var(--calcite-internal-dropdown-width));
-  background-color: var(--calcite-dropdown-background-color, var(--calcite-color-foreground-1));
 }
+
 .calcite-trigger-container {
   @apply relative flex flex-auto;
   @include word-break;

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

@@ -45,7 +45,7 @@ import { RequestedItem } from "../dropdown-group/interfaces";
 import { Scale } from "../interfaces";
 import { componentOnReady } from "../../utils/component";
 import { ItemKeyboardEvent } from "./interfaces";
-import { SLOTS } from "./resources";
+import { CSS, SLOTS } from "./resources";
 
 /**
  * @slot - A slot for adding `calcite-dropdown-group` elements. Every `calcite-dropdown-item` must have a parent `calcite-dropdown-group`, even if the `groupTitle` property is not set.
@@ -237,7 +237,7 @@ export class Dropdown
       <Host>
         <InteractiveContainer disabled={this.disabled}>
           <div
-            class="calcite-trigger-container"
+            class={CSS.triggerContainer}
             id={`${guid}-menubutton`}
             onClick={this.openCalciteDropdown}
             onKeyDown={this.keyDownHandler}
@@ -251,15 +251,11 @@ export class Dropdown
               onSlotchange={this.updateTriggers}
             />
           </div>
-          <div
-            aria-hidden={toAriaBoolean(!open)}
-            class="calcite-dropdown-wrapper"
-            ref={this.setFloatingEl}
-          >
+          <div aria-hidden={toAriaBoolean(!open)} class={CSS.wrapper} ref={this.setFloatingEl}>
             <div
               aria-labelledby={`${guid}-menubutton`}
               class={{
-                ["calcite-dropdown-content"]: true,
+                [CSS.content]: true,
                 [FloatingCSS.animation]: true,
                 [FloatingCSS.animationActive]: open,
               }}

packages/calcite-components/src/components/dropdown/resources.ts

@@ -1,3 +1,9 @@
 export const SLOTS = {
   dropdownTrigger: "trigger",
 };
+
+export const CSS = {
+  content: "calcite-dropdown-content",
+  triggerContainer: "calcite-trigger-container",
+  wrapper: "calcite-dropdown-wrapper",
+};