fix(tooltip, popover): Support transparent backgrounds. #6798

Esri · Apr 17, 2023 · e2eaf28 · e2eaf28
1 parent 27e489b
commit e2eaf28
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 6 deletions.
diff --git a/src/assets/styles/_floating-ui.scss b/src/assets/styles/_floating-ui.scss
@@ -98,7 +98,7 @@ $floating-ui-transform-right: translateX(-5px);
   @include calciteHydratedHidden();
 }
 
-$pointer_size: 8px;
+$pointer_size: 12px;
 $pointer_offset: -$pointer_size * 0.5;
 
 @mixin floatingUIArrow {
@@ -113,18 +113,25 @@ $pointer_offset: -$pointer_size * 0.5;
   .arrow::before {
     content: "";
     @apply shadow-1;
-    transform: rotate(45deg);
     background: var(--calcite-ui-foreground-1);
   }
 
   :host([data-placement^="top"]) .arrow {
     inset-block-end: $pointer_offset;
   }
 
+  :host([data-placement^="top"]) .arrow::before {
+    clip-path: polygon(50% 100%, 0 50%, 100% 50%);
+  }
+
   :host([data-placement^="bottom"]) .arrow {
     inset-block-start: $pointer_offset;
   }
 
+  :host([data-placement^="bottom"]) .arrow::before {
+    clip-path: polygon(50% 0, 0 50%, 100% 50%);
+  }
+
   :host([data-placement^="right"]) .arrow,
   :host([data-placement^="left"]) .arrow {
     direction: ltr;
@@ -135,7 +142,15 @@ $pointer_offset: -$pointer_size * 0.5;
     inset-inline-end: $pointer_offset;
   }
 
+  :host([data-placement^="left"]) .arrow::before {
+    clip-path: polygon(100% 50%, 50% 0, 50% 100%);
+  }
+
   :host([data-placement^="right"]) .arrow {
     inset-inline-start: $pointer_offset;
   }
+
+  :host([data-placement^="right"]) .arrow::before {
+    clip-path: polygon(0 50%, 50% 0, 50% 100%);
+  }
 }
diff --git a/src/components/popover/popover.scss b/src/components/popover/popover.scss
@@ -81,8 +81,7 @@
 }
 
 .container {
-  @apply bg-foreground-1
-    text-color-1
+  @apply text-color-1
     relative
     flex
     h-full

diff --git a/src/components/popover/popover.stories.ts b/src/components/popover/popover.stories.ts
@@ -202,3 +202,25 @@ export const largeScaleLayout_TestOnly = (): string => html`
     </calcite-popover>
   </div>
 `;
+
+export const transparentBG_TestOnly = (): string => html`
+  <style>
+    :root {
+      --calcite-ui-foreground-1: rgba(0, 0, 0, 0.5);
+      --calcite-ui-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>
+`;
diff --git a/src/components/tooltip/tooltip.scss b/src/components/tooltip/tooltip.scss
@@ -14,8 +14,7 @@
 @include floatingUIArrow();
 
 .container {
-  @apply bg-foreground-1
-    text-color-1
+  @apply text-color-1
     text-n2-wrap
     relative
     overflow-hidden

diff --git a/src/components/tooltip/tooltip.stories.ts b/src/components/tooltip/tooltip.stories.ts
@@ -72,3 +72,16 @@ export const rightAligned_TestOnly = (): string => html`<div style="text-align:
     <span>Tooltip content lorem ipsum</span>
   </calcite-tooltip>
 </div>`;
+
+export const transparentBG_TestOnly = (): string => html`
+  <style>
+    :root {
+      --calcite-ui-foreground-1: rgba(0, 0, 0, 0.5);
+      --calcite-ui-text-1: orange;
+    }
+  </style>
+  <div style="width: 400px;">
+    ${referenceElementHTML}
+    <calcite-tooltip reference-element="reference-element" placement="auto" open> ${contentHTML} </calcite-tooltip>
+  </div>
+`;