Fix dialog CSS to prevent tooltip issues (#2706)

Co-authored-by: camertron <camertron@users.noreply.github.com> Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com>
primer · Mar 18, 2024 · 60c5f01 · 60c5f01
1 parent 90192bb
commit 60c5f01
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 7 deletions.
diff --git a/.changeset/brave-cougars-brush.md b/.changeset/brave-cougars-brush.md
@@ -0,0 +1,6 @@
+---
+"@primer/view-components": patch
+---
+
+Fix dialog CSS to prevent tooltip issues
+
diff --git a/....test.ts-snapshots/primer/alpha/action_list/long_label_with_tooltip/focused.png b/....test.ts-snapshots/primer/alpha/action_list/long_label_with_tooltip/focused.png
diff --git a/...hots.test.ts-snapshots/primer/beta/nav_list/long_label_with_tooltip/focused.png b/...hots.test.ts-snapshots/primer/beta/nav_list/long_label_with_tooltip/focused.png
diff --git a/app/components/primer/alpha/dialog.pcss b/app/components/primer/alpha/dialog.pcss
@@ -21,13 +21,14 @@ dialog.Overlay:not([open]) {
   opacity: 0;
 }
 
-/* hacks until firefox fully supports popovers */
-:where([popover]:not(.\:popover-open)) {
-  display: none !important;
-}
-
-:popover-open {
-  display: inherit !important;
+/* This is for @oddbird/popover-polyfill;
+ * A FOUC occurs in browsers which do not support :popover-open.
+ * We can try to hide the popover if :popover-open is not supported.
+ */
+@supports not selector(:popover-open) {
+  [popover]:not(.\:popover-open) {
+    display: none;
+  }
 }
 
 .Overlay {