From f9befad0d494620c48e533d4f97fe1ef2b00a8d3 Mon Sep 17 00:00:00 2001 From: eliza Date: Wed, 25 Sep 2024 12:18:45 -0700 Subject: [PATCH 1/3] feat(popover): add component tokens --- .../calcite-components/src/components.d.ts | 8 ++++---- .../src/components/popover/popover.e2e.ts | 19 +++++++++++++++---- .../src/components/popover/popover.scss | 7 +++++++ .../src/utils/floating-ui.ts | 2 ++ 4 files changed, 28 insertions(+), 8 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 68d4f03e98e..8e093960068 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -7104,7 +7104,7 @@ declare global { new (): HTMLCalciteListItemElement; }; interface HTMLCalciteListItemGroupElementEventMap { - "calciteInternalListItemGroupDefaultSlotChange": DragEvent; + "calciteInternalListItemGroupDefaultSlotChange": void; } interface HTMLCalciteListItemGroupElement extends Components.CalciteListItemGroup, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLCalciteListItemGroupElement, ev: CalciteListItemGroupCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; @@ -7850,7 +7850,7 @@ declare global { new (): HTMLCalciteTileSelectGroupElement; }; interface HTMLCalciteTimePickerElementEventMap { - "calciteInternalTimePickerChange": string; + "calciteInternalTimePickerChange": void; } interface HTMLCalciteTimePickerElement extends Components.CalciteTimePicker, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLCalciteTimePickerElement, ev: CalciteTimePickerCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; @@ -11461,7 +11461,7 @@ declare namespace LocalJSX { /** * Fires when changes occur in the default slot, notifying parent lists of the changes. */ - "onCalciteInternalListItemGroupDefaultSlotChange"?: (event: CalciteListItemGroupCustomEvent) => void; + "onCalciteInternalListItemGroupDefaultSlotChange"?: (event: CalciteListItemGroupCustomEvent) => void; } interface CalciteLoader { /** @@ -13813,7 +13813,7 @@ declare namespace LocalJSX { * Specifies the Unicode numeral system used by the component for localization. */ "numberingSystem"?: NumberingSystem; - "onCalciteInternalTimePickerChange"?: (event: CalciteTimePickerCustomEvent) => void; + "onCalciteInternalTimePickerChange"?: (event: CalciteTimePickerCustomEvent) => 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 index 9a078854371..9115f117d69 100644 --- 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-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.arrow} .${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 index 1314105f7dd..cc7da4f08b9 100644 --- a/packages/calcite-components/src/components/popover/popover.scss +++ b/packages/calcite-components/src/components/popover/popover.scss @@ -58,6 +58,13 @@ 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 index ad5faedea05..7b5b3e2cd9a 100644 --- 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; 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({ From 406d151cbfdd283f48069d1b59a6e38450debc75 Mon Sep 17 00:00:00 2001 From: eliza Date: Wed, 25 Sep 2024 12:41:19 -0700 Subject: [PATCH 2/3] lower specificity --- .../calcite-components/src/components/popover/popover.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/calcite-components/src/components/popover/popover.scss b/packages/calcite-components/src/components/popover/popover.scss index cc7da4f08b9..ca6e5392b1d 100644 --- a/packages/calcite-components/src/components/popover/popover.scss +++ b/packages/calcite-components/src/components/popover/popover.scss @@ -60,9 +60,10 @@ .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)); - } +} + +.calcite-floating-ui-arrow__stroke { + stroke: var(--calcite-popover-border-color, var(--calcite-color-border-3)); } .header { From 760214f9d7ded700ea8823d01aad2ab4bad33c48 Mon Sep 17 00:00:00 2001 From: eliza Date: Wed, 25 Sep 2024 12:45:15 -0700 Subject: [PATCH 3/3] simplify e2e selector --- .../calcite-components/src/components/popover/popover.e2e.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/popover/popover.e2e.ts b/packages/calcite-components/src/components/popover/popover.e2e.ts index 9115f117d69..29e8a2b11c2 100644 --- a/packages/calcite-components/src/components/popover/popover.e2e.ts +++ b/packages/calcite-components/src/components/popover/popover.e2e.ts @@ -731,7 +731,7 @@ describe("calcite-popover", () => { targetProp: "borderBlockEndColor", }, { - shadowSelector: `.${FloatingCSS.arrow} .${FloatingCSS.arrowStroke}`, + shadowSelector: `.${FloatingCSS.arrowStroke}`, targetProp: "stroke", }, ],