feat(popover): apply component tokens to arrow (#10386)

**Related Issue:** #7180 ## Summary Apply `popover` component tokens `--calcite-popover-background-color` and `--calcite-popover-border-color` to `floating arrow`.
Esri · Sep 25, 2024 · 2d19268 · 2d19268
1 parent 9332733
commit 2d19268
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 8 deletions.
diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
@@ -7108,7 +7108,7 @@ declare global {
         new (): HTMLCalciteListItemElement;
     };
     interface HTMLCalciteListItemGroupElementEventMap {
-        "calciteInternalListItemGroupDefaultSlotChange": DragEvent;
+        "calciteInternalListItemGroupDefaultSlotChange": void;
     }
     interface HTMLCalciteListItemGroupElement extends Components.CalciteListItemGroup, HTMLStencilElement {
         addEventListener<K extends keyof HTMLCalciteListItemGroupElementEventMap>(type: K, listener: (this: HTMLCalciteListItemGroupElement, ev: CalciteListItemGroupCustomEvent<HTMLCalciteListItemGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -7854,7 +7854,7 @@ declare global {
         new (): HTMLCalciteTileSelectGroupElement;
     };
     interface HTMLCalciteTimePickerElementEventMap {
-        "calciteInternalTimePickerChange": string;
+        "calciteInternalTimePickerChange": void;
     }
     interface HTMLCalciteTimePickerElement extends Components.CalciteTimePicker, HTMLStencilElement {
         addEventListener<K extends keyof HTMLCalciteTimePickerElementEventMap>(type: K, listener: (this: HTMLCalciteTimePickerElement, ev: CalciteTimePickerCustomEvent<HTMLCalciteTimePickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -11469,7 +11469,7 @@ declare namespace LocalJSX {
         /**
           * Fires when changes occur in the default slot, notifying parent lists of the changes.
          */
-        "onCalciteInternalListItemGroupDefaultSlotChange"?: (event: CalciteListItemGroupCustomEvent<DragEvent>) => void;
+        "onCalciteInternalListItemGroupDefaultSlotChange"?: (event: CalciteListItemGroupCustomEvent<void>) => void;
     }
     interface CalciteLoader {
         /**
@@ -13821,7 +13821,7 @@ declare namespace LocalJSX {
           * Specifies the Unicode numeral system used by the component for localization.
          */
         "numberingSystem"?: NumberingSystem;
-        "onCalciteInternalTimePickerChange"?: (event: CalciteTimePickerCustomEvent<string>) => void;
+        "onCalciteInternalTimePickerChange"?: (event: CalciteTimePickerCustomEvent<void>) => void;
         /**
           * Specifies the size of the component.
          */

diff --git a/packages/calcite-components/src/components/popover/popover.e2e.ts b/packages/calcite-components/src/components/popover/popover.e2e.ts
@@ -11,6 +11,7 @@ import {
   t9n,
   themed,
 } from "../../tests/commonTests";
+import { FloatingCSS } from "../../utils/floating-ui";
 import { CSS } from "./resources";
 
 describe("calcite-popover", () => {
@@ -710,10 +711,16 @@ describe("calcite-popover", () => {
           </calcite-popover>
         `,
         {
-          "--calcite-popover-background-color": {
-            shadowSelector: `.${CSS.container}`,
-            targetProp: "backgroundColor",
-          },
+          "--calcite-popover-background-color": [
+            {
+              shadowSelector: `.${CSS.container}`,
+              targetProp: "backgroundColor",
+            },
+            {
+              shadowSelector: `.${FloatingCSS.arrow}`,
+              targetProp: "fill",
+            },
+          ],
           "--calcite-popover-border-color": [
             {
               shadowSelector: `.${CSS.container}`,
@@ -723,6 +730,10 @@ describe("calcite-popover", () => {
               shadowSelector: `.${CSS.header}`,
               targetProp: "borderBlockEndColor",
             },
+            {
+              shadowSelector: `.${FloatingCSS.arrowStroke}`,
+              targetProp: "stroke",
+            },
           ],
           "--calcite-popover-corner-radius": {
             shadowSelector: `.${CSS.container}`,

diff --git a/packages/calcite-components/src/components/popover/popover.scss b/packages/calcite-components/src/components/popover/popover.scss
@@ -58,6 +58,14 @@
   border-radius: var(--calcite-popover-corner-radius, var(--calcite-corner-radius-round));
 }
 
+.calcite-floating-ui-arrow {
+  fill: var(--calcite-popover-background-color, var(--calcite-color-foreground-1));
+}
+
+.calcite-floating-ui-arrow__stroke {
+  stroke: var(--calcite-popover-border-color, var(--calcite-color-border-3));
+}
+
 .header {
   @apply flex
     flex-auto

diff --git a/packages/calcite-components/src/utils/floating-ui.ts b/packages/calcite-components/src/utils/floating-ui.ts
@@ -319,6 +319,8 @@ export type FloatingLayout = Extract<Layout, "vertical" | "horizontal">;
 export const FloatingCSS = {
   animation: "calcite-floating-ui-anim",
   animationActive: "calcite-floating-ui-anim--active",
+  arrow: "calcite-floating-ui-arrow",
+  arrowStroke: "calcite-floating-ui-arrow__stroke",
 };
 
 function getMiddleware({