feat(popover, action): add component tokens

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

@@ -9,7 +9,9 @@ import {
   openClose,
   renders,
   t9n,
+  themed,
 } from "../../tests/commonTests";
+import { FloatingCSS } from "../../utils/floating-ui";
 import { CSS } from "./resources";
 
 describe("calcite-popover", () => {
@@ -699,4 +701,63 @@ describe("calcite-popover", () => {
       });
     });
   });
+
+  describe("theme", () => {
+    const popoverHTML = html`
+      <calcite-popover heading="I'm a heading in the header using the 'heading' prop!" closable>
+        Lorem Ipsum
+      </calcite-popover>
+    `;
+
+    describe("default", () => {
+      themed(popoverHTML, {
+        "--calcite-popover-background-color": {
+          shadowSelector: `.${FloatingCSS.animation}`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-popover-border-color": [
+          {
+            shadowSelector: `.${FloatingCSS.animation}`,
+            targetProp: "borderColor",
+          },
+          {
+            shadowSelector: `.${CSS.header}`,
+            targetProp: "borderBlockEndColor",
+          },
+        ],
+        "--calcite-popover-corner-radius": {
+          shadowSelector: `.${FloatingCSS.animation}`,
+          targetProp: "borderRadius",
+        },
+        "--calcite-popover-text-color": [
+          {
+            shadowSelector: `.${CSS.heading}`,
+            targetProp: "color",
+          },
+          {
+            shadowSelector: `.${CSS.container}`,
+            targetProp: "color",
+          },
+        ],
+      });
+    });
+    describe("closable", () => {
+      themed(popoverHTML, {
+        "--calcite-popover-corner-radius": [
+          {
+            shadowSelector: `.${CSS.closeButtonContainer}`,
+            targetProp: "borderStartEndRadius",
+          },
+          {
+            shadowSelector: `.${CSS.closeButtonContainer}`,
+            targetProp: "borderEndEndRadius",
+          },
+          {
+            shadowSelector: `.${CSS.hasHeader} .${CSS.closeButtonContainer}`,
+            targetProp: "borderEndEndRadius",
+          },
+        ],
+      });
+    });
+  });
 });

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

@@ -3,6 +3,10 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
+ * @prop --calcite-popover-background-color: Specifies the background color of the component.
+ * @prop --calcite-popover-border-color: Specifies the border color of the component.
+ * @prop --calcite-popover-corner-radius: Specifies the corner radius of the component.
+ * @prop --calcite-popover-text-color: Specifies the text color of the component.
  * @prop --calcite-popover-z-index: Sets the z-index value for the component.
  */
 
@@ -46,42 +50,40 @@
 }
 
 .calcite-floating-ui-anim {
-  @apply bg-foreground-1
-    border-color-3
-    rounded
-    border
+  @apply border
     border-solid;
-}
 
-.arrow::before {
-  outline: 1px solid var(--calcite-color-border-3);
+  background-color: var(--calcite-popover-background-color, var(--calcite-color-foreground-1));
+  border-color: var(--calcite-popover-border-color, var(--calcite-color-border-3));
+  border-radius: var(--calcite-popover-corner-radius, var(--calcite-corner-radius-round));
 }
 
 .header {
-  @apply border-b-color-3
-    flex
+  @apply flex
     flex-auto
     items-stretch
     justify-start
     border-0
     border-b
     border-solid;
+
+  border-block-end-color: var(--calcite-popover-border-color, var(--calcite-color-border-3));
 }
 
 .heading {
-  @apply text-color-1
-  word-break
+  @apply word-break
   m-0
   block
   flex-auto
   self-center
   whitespace-normal
   font-medium;
+
+  color: var(--calcite-popover-text-color, var(--calcite-color-text-1));
 }
 
 .container {
-  @apply text-color-1
-    relative
+  @apply relative
     flex
     h-full
     flex-row
@@ -90,6 +92,8 @@
   &.has-header {
     @apply flex-col;
   }
+
+  color: var(--calcite-popover-text-color, var(--calcite-color-text-1));
 }
 
 .content {
@@ -105,12 +109,12 @@
 .close-button-container {
   @apply flex overflow-hidden;
   flex: 0 0 auto;
-  border-start-end-radius: theme("borderRadius.DEFAULT");
-  border-end-end-radius: theme("borderRadius.DEFAULT");
+  border-start-end-radius: var(--calcite-popover-corner-radius, var(--calcite-corner-radius-round));
+  border-end-end-radius: var(--calcite-popover-corner-radius, var(--calcite-corner-radius-round));
 }
 
 .has-header .close-button-container {
-  border-end-end-radius: none;
+  border-end-end-radius: var(--calcite-popover-corner-radius, none);
 }
 
 ::slotted(calcite-panel),

packages/calcite-components/src/components/popover/popover.stories.ts

@@ -186,25 +186,3 @@ export const largeScaleLayout_TestOnly = (): string => html`
     </calcite-popover>
   </div>
 `;
-
-export const transparentBG_TestOnly = (): string => html`
-  <style>
-    calcite-popover {
-      --calcite-color-foreground-1: rgba(0, 0, 0, 0.5);
-      --calcite-color-text-1: orange;
-    }
-  </style>
-  <div style="width: 400px;">
-    ${referenceElementHTML}
-    <calcite-popover
-      heading="these 🥨s are making me thirsty"
-      reference-element="reference-element"
-      placement="auto"
-      open
-      closable
-      scale="l"
-    >
-      ${contentHTML}
-    </calcite-popover>
-  </div>
-`;

packages/calcite-components/src/custom-theme.stories.ts

@@ -21,6 +21,7 @@ import { icon } from "./custom-theme/icon";
 import { loader } from "./custom-theme/loader";
 import { notices } from "./custom-theme/notice";
 import { pagination } from "./custom-theme/pagination";
+import { popover, popoverTokens } from "./custom-theme/popover";
 import { segmentedControl } from "./custom-theme/segmented-control";
 import { slider } from "./custom-theme/slider";
 import { calciteSwitch } from "./custom-theme/switch";
@@ -104,7 +105,9 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
           <div>${checkbox}</div>
           ${chips} ${pagination} ${slider}
         </div>
-        <div class="demo-column">${datePicker} ${tabs} ${loader} ${calciteSwitch}</div>
+        <div class="demo-column">${datePicker} ${tabs} ${loader} ${calciteSwitch} 
+        <div style="margin-top: 40px">${popover}</div>
+        </div>
       </div>
     </div>
   </div>`;
@@ -119,14 +122,15 @@ export default {
     ...actionPadTokens,
     ...actionGroupTokens,
     ...cardTokens,
+    ...popoverTokens,
   },
 };
 
 export const themingInteractive = (args: Record<string, string>): string => {
   return kitchenSink(args);
 };
 
-export const theming_TestOnly = (): string => {
+export const theming = (): string => {
   return kitchenSink(
     {
       ...actionTokens,
@@ -135,6 +139,7 @@ export const theming_TestOnly = (): string => {
       ...actionPadTokens,
       ...actionGroupTokens,
       ...cardTokens,
+      ...popoverTokens,
     },
     true,
   );

packages/calcite-components/src/custom-theme/popover.ts

@@ -0,0 +1,26 @@
+import { html } from "../../support/formatting";
+
+export const popoverTokens = {
+  calcitePopoverBackgroundColor: "",
+  calcitePopoverBorderColor: "",
+  calcitePopoverCornerRadius: "",
+  calcitePopoverTextColor: "",
+  calcitePopoverFloatingUIZIndex: "",
+};
+
+export const popover = html`
+  <calcite-button title="Reference Element" id="reference-element">nostrud exercitation</calcite-button>
+  <calcite-popover
+    heading="these 🥨s are making me thirsty"
+    reference-element="reference-element"
+    placement="auto"
+    open
+    closable
+    scale="l"
+  >
+    <div style="width: 300px; padding:12px 16px;">
+      <b>I am a title!</b> <br />
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
+    </div>
+  </calcite-popover>
+`;