feat(tooltip): add component tokens (#10687)

**Related Issue:** #7180 ## Summary Add `tooltip` component tokens. `--calcite-tooltip-background-color`: Specifies the background color of the component. `--calcite-tooltip-border-color`: Specifies the border color of the component. `--calcite-tooltip-corner-radius`: Specifies the corner radius of the component. `--calcite-tooltip-text-color`: Specifies the text color of the component.
Esri · Nov 15, 2024 · facfbe8 · facfbe8
1 parent 3a5e939
commit facfbe8
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 12 deletions.
diff --git a/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts b/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts
@@ -1,8 +1,9 @@
 import { newE2EPage, E2EPage } from "@arcgis/lumina-compiler/puppeteerTesting";
 import { describe, expect, it } from "vitest";
-import { accessible, defaults, floatingUIOwner, hidden, openClose, renders } from "../../tests/commonTests";
+import { accessible, defaults, floatingUIOwner, hidden, openClose, renders, themed } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { getElementXY, GlobalTestProps, skipAnimations } from "../../tests/utils";
+import { FloatingCSS } from "../../utils/floating-ui";
 import { TOOLTIP_OPEN_DELAY_MS, TOOLTIP_CLOSE_DELAY_MS, CSS } from "./resources";
 import type { Tooltip } from "./tooltip";
 
@@ -1202,4 +1203,56 @@ describe("calcite-tooltip", () => {
       expect(await tooltip.getProperty("open")).toBe(false);
     });
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed(
+        html`
+          <calcite-tooltip heading="I'm a heading in the header using the 'heading' prop!">
+            Lorem Ipsum
+          </calcite-tooltip>
+        `,
+        {
+          "--calcite-tooltip-background-color": [
+            {
+              shadowSelector: `.${FloatingCSS.animation}`,
+              targetProp: "backgroundColor",
+            },
+            {
+              shadowSelector: `.${FloatingCSS.arrow}`,
+              targetProp: "fill",
+            },
+          ],
+          "--calcite-tooltip-border-color": [
+            {
+              shadowSelector: `.${FloatingCSS.animation}`,
+              targetProp: "borderColor",
+            },
+            {
+              shadowSelector: `.${FloatingCSS.arrowStroke}`,
+              targetProp: "stroke",
+            },
+          ],
+          "--calcite-tooltip-corner-radius": [
+            {
+              shadowSelector: `.${CSS.container}`,
+              targetProp: "borderRadius",
+            },
+            {
+              shadowSelector: `.${FloatingCSS.animation}`,
+              targetProp: "borderRadius",
+            },
+          ],
+          "--calcite-tooltip-text-color": {
+            shadowSelector: `.${CSS.container}`,
+            targetProp: "color",
+          },
+          "--calcite-tooltip-z-index": {
+            shadowSelector: `.${CSS.positionContainer}`,
+            targetProp: "zIndex",
+          },
+        },
+      );
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/tooltip/tooltip.scss b/packages/calcite-components/src/components/tooltip/tooltip.scss
@@ -3,6 +3,10 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
+ * @prop --calcite-tooltip-background-color: Specifies the background color of the component.
+ * @prop --calcite-tooltip-border-color: Specifies the border color of the component.
+ * @prop --calcite-tooltip-corner-radius: Specifies the corner radius of the component.
+ * @prop --calcite-tooltip-text-color: Specifies the text color of the component.
  * @prop --calcite-tooltip-z-index: Sets the z-index value for the component.
  */
 
@@ -20,29 +24,33 @@
 @include floating-ui-arrow();
 
 .container {
-  @apply text-color-1
-    text-n2-wrap
+  @apply text-n2-wrap
     relative
     overflow-hidden
-    rounded
     py-3
     px-4
     font-medium;
+  border-radius: var(--calcite-tooltip-corner-radius, var(--calcite-corner-radius-round));
+  color: var(--calcite-tooltip-text-color, var(--calcite-color-text-1));
   max-inline-size: 20rem;
   max-block-size: 20rem;
   text-align: start;
 }
 
-.calcite-floating-ui-anim {
-  @apply bg-foreground-1
-    border-color-3
-    rounded
-    border
+.position-container .calcite-floating-ui-anim {
+  @apply border
     border-solid;
+  background-color: var(--calcite-tooltip-background-color, var(--calcite-color-foreground-1));
+  border-color: var(--calcite-tooltip-border-color, var(--calcite-color-border-3));
+  border-radius: var(--calcite-tooltip-corner-radius, var(--calcite-corner-radius-round));
 }
 
-.arrow::before {
-  outline: 1px solid var(--calcite-color-border-3);
+.calcite-floating-ui-arrow {
+  fill: var(--calcite-tooltip-background-color, var(--calcite-color-foreground-1));
+}
+
+.calcite-floating-ui-arrow__stroke {
+  stroke: var(--calcite-tooltip-border-color, var(--calcite-color-border-3));
 }
 
 @include base-component();
diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
@@ -34,6 +34,7 @@ import { segmentedControl } from "./custom-theme/segmented-control";
 import { slider } from "./custom-theme/slider";
 import { tabs } from "./custom-theme/tabs";
 import { textArea, textAreaTokens } from "./custom-theme/text-area";
+import { tooltip, tooltipTokens } from "./custom-theme/tooltip";
 import { avatarIcon, avatarInitials, avatarThumbnail, avatarTokens } from "./custom-theme/avatar";
 import { tileTokens, tile } from "./custom-theme/tile";
 import { navigationTokens, navigation } from "./custom-theme/navigation";
@@ -119,7 +120,7 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
       </div>
       <div class="demo-column">
         ${datePicker} ${tabs} ${loader} ${calciteSwitch} ${avatarIcon} ${avatarInitials} ${avatarThumbnail} ${progress}
-        ${handle} ${textArea} ${popover} ${tile}
+        ${handle} ${textArea} ${popover} ${tile} ${tooltip}
       </div>
       ${alert} ${navigation}
     </div>
@@ -144,6 +145,7 @@ const componentTokens = {
   ...progressTokens,
   ...inputTokens,
   ...textAreaTokens,
+  ...tooltipTokens,
   ...tileTokens,
   ...navigationTokens,
 };

diff --git a/packages/calcite-components/src/custom-theme/tooltip.ts b/packages/calcite-components/src/custom-theme/tooltip.ts
@@ -0,0 +1,18 @@
+import { html } from "../../support/formatting";
+
+export const tooltipTokens = {
+  calciteTooltipBackgroundColor: "",
+  calciteTooltipBorderColor: "",
+  calciteTooltipCornerRadius: "",
+  calciteTooltipTextColor: "",
+  calciteTooltipZIndex: "",
+};
+
+export const tooltip = html`
+  <calcite-label layout="inline">
+    <calcite-button title="Reference Element" id="tooltip-reference-element">nostrud exercitation</calcite-button>
+    <calcite-tooltip reference-element="tooltip-reference-element" placement="auto" open>
+      these 🥨s are making me thirsty
+    </calcite-tooltip>
+  </calcite-label>
+`;
diff --git a/packages/calcite-components/src/demos/tooltip.html b/packages/calcite-components/src/demos/tooltip.html
@@ -188,6 +188,30 @@ <h1 style="margin: 0 auto; text-align: center">Tooltip</h1>
         </div>
       </div>
 
+      <!-- themed -->
+      <div class="parent">
+        <div class="child right-aligned-text">themed</div>
+
+        <style>
+          .themed-tooltip {
+            --calcite-tooltip-background-color: lightpink;
+            --calcite-tooltip-border-color: blue;
+            --calcite-tooltip-corner-radius: 10px;
+            --calcite-tooltip-text-color: green;
+            --calcite-tooltip-z-index: 999;
+          }
+        </style>
+
+        <div class="child">
+          <button id="tooltip-themed">themed</button>
+          <calcite-tooltip class="themed-tooltip" placement="auto" reference-element="tooltip-themed">
+            <p>placement: auto</p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+            dolore magna aliqua.
+          </calcite-tooltip>
+        </div>
+      </div>
+
       <!-- containers to hold the tooltip -->
       <div>
         <calcite-tooltip placement="auto" reference-element="tooltip-auto-ref">