chore: fix popover close button background (#1756)

razorpay · Oct 30, 2023 · a17076b · a17076b
1 parent ab0b18e
commit a17076b
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 241 deletions.
diff --git a/.changeset/witty-mails-tickle.md b/.changeset/witty-mails-tickle.md
@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+chore: fix popover close button background
diff --git a/packages/blade/src/components/Popover/PopoverContent.tsx b/packages/blade/src/components/Popover/PopoverContent.tsx
@@ -21,7 +21,6 @@ const PopoverHeader = ({ title, titleLeading }: PopoverHeaderProps): React.React
   if (isFloating) {
     return (
       <BaseBox
-        backgroundColor="white"
         borderRadius="max"
         position="absolute"
         padding="spacing.2"

diff --git a/packages/blade/src/components/Popover/__tests__/__snapshots__/Popover.native.test.tsx.snap b/packages/blade/src/components/Popover/__tests__/__snapshots__/Popover.native.test.tsx.snap
@@ -274,7 +274,6 @@ exports[`<Popover /> should render 1`] = `
           }
         >
           <View
-            backgroundColor="white"
             borderRadius="max"
             data-blade-component="base-box"
             position="absolute"
@@ -790,7 +789,6 @@ exports[`<Popover /> should render popover with custom zIndex 1`] = `
           }
         >
           <View
-            backgroundColor="white"
             borderRadius="max"
             data-blade-component="base-box"
             position="absolute"

diff --git a/packages/blade/src/components/Popover/__tests__/__snapshots__/Popover.web.test.tsx.snap b/packages/blade/src/components/Popover/__tests__/__snapshots__/Popover.web.test.tsx.snap
@@ -47,120 +47,6 @@ exports[`<Popover /> should render 1`] = `
   border-radius: 9999px;
 }
 
-.c7 backgroundColor action background primary {
-  default: hsla(0,0%,100%,1);
-  hover: hsla(216,6%,94%,1);
-  focus: hsla(216,4%,89%,1);
-  active: hsla(216,4%,89%,1);
-  disabled: hsla(210,6%,94%,0.18);
-}
-
-.c7 backgroundColor action background secondary {
-  default: hsla(214,15%,18%,0);
-  hover: hsla(210,6%,94%,0.18);
-  focus: hsla(210,6%,94%,0.32);
-  active: hsla(210,6%,94%,0.32);
-  disabled: hsla(214,15%,18%,0);
-}
-
-.c7 backgroundColor action background tertiary {
-  default: hsla(210,6%,94%,0.09);
-  hover: hsla(210,6%,94%,0.18);
-  focus: hsla(210,6%,94%,0.32);
-  active: hsla(210,6%,94%,0.32);
-  disabled: hsla(210,6%,94%,0.09);
-}
-
-.c7 backgroundColor action border primary {
-  default: hsla(0,0%,100%,1);
-  hover: hsla(216,6%,94%,1);
-  focus: hsla(216,4%,89%,1);
-  active: hsla(216,4%,89%,1);
-  disabled: hsla(210,6%,94%,0.18);
-}
-
-.c7 backgroundColor action border secondary {
-  default: hsla(0,0%,100%,1);
-  hover: hsla(0,0%,100%,1);
-  focus: hsla(0,0%,100%,1);
-  active: hsla(0,0%,100%,1);
-  disabled: hsla(210,6%,94%,0.32);
-}
-
-.c7 backgroundColor action border tertiary {
-  default: hsla(214,15%,18%,0);
-  hover: hsla(214,15%,18%,0);
-  focus: hsla(214,15%,18%,0);
-  active: hsla(214,15%,18%,0);
-  disabled: hsla(214,15%,18%,0);
-}
-
-.c7 backgroundColor action text primary {
-  default: hsla(218,89%,51%,1);
-  hover: hsla(218,89%,51%,1);
-  focus: hsla(218,89%,51%,1);
-  active: hsla(218,89%,51%,1);
-  disabled: hsla(210,6%,94%,0.32);
-}
-
-.c7 backgroundColor action text secondary {
-  default: hsla(0,0%,100%,1);
-  hover: hsla(0,0%,100%,1);
-  focus: hsla(0,0%,100%,1);
-  active: hsla(0,0%,100%,1);
-  disabled: hsla(210,6%,94%,0.32);
-}
-
-.c7 backgroundColor action text tertiary {
-  default: hsla(0,0%,100%,1);
-  hover: hsla(0,0%,100%,1);
-  focus: hsla(0,0%,100%,1);
-  active: hsla(0,0%,100%,1);
-  disabled: hsla(210,6%,94%,0.32);
-}
-
-.c7 backgroundColor action text link {
-  default: hsla(0,0%,100%,1);
-  hover: hsla(216,4%,89%,1);
-  focus: hsla(214,7%,81%,1);
-  active: hsla(214,7%,81%,1);
-  disabled: hsla(210,6%,94%,0.32);
-  visited: hsla(268,100%,79%,1);
-}
-
-.c7 backgroundColor action icon primary {
-  default: hsla(218,89%,51%,1);
-  hover: hsla(218,89%,51%,1);
-  focus: hsla(218,89%,51%,1);
-  active: hsla(218,89%,51%,1);
-  disabled: hsla(210,6%,94%,0.32);
-}
-
-.c7 backgroundColor action icon secondary {
-  default: hsla(0,0%,100%,1);
-  hover: hsla(0,0%,100%,1);
-  focus: hsla(0,0%,100%,1);
-  active: hsla(0,0%,100%,1);
-  disabled: hsla(210,6%,94%,0.32);
-}
-
-.c7 backgroundColor action icon tertiary {
-  default: hsla(0,0%,100%,1);
-  hover: hsla(0,0%,100%,1);
-  focus: hsla(0,0%,100%,1);
-  active: hsla(0,0%,100%,1);
-  disabled: hsla(210,6%,94%,0.32);
-}
-
-.c7 backgroundColor action icon link {
-  default: hsla(0,0%,100%,1);
-  hover: hsla(216,4%,89%,1);
-  focus: hsla(214,7%,81%,1);
-  active: hsla(214,7%,81%,1);
-  disabled: hsla(210,6%,94%,0.32);
-  visited: hsla(268,100%,79%,1);
-}
-
 .c5 {
   width: 100%;
   max-width: 328px;
@@ -315,7 +201,7 @@ exports[`<Popover /> should render 1`] = `
 <body>
   <div
     aria-hidden="true"
-    data-aria-hidden="true"
+    data-floating-ui-inert=""
   >
     <button
       aria-controls=":r0:"
@@ -345,8 +231,8 @@ exports[`<Popover /> should render 1`] = `
   >
     <span
       aria-hidden="true"
-      data-aria-hidden="true"
       data-floating-ui-focus-guard=""
+      data-floating-ui-inert=""
       data-type="inside"
       role="button"
       style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
@@ -412,7 +298,7 @@ exports[`<Popover /> should render 1`] = `
           aria-hidden="true"
           fill="#FFFFFF"
           height="14"
-          style="position: absolute; pointer-events: none; top: 100%; left: 14px;"
+          style="position: absolute; pointer-events: none; top: 100%; left: -1px;"
           viewBox="0 0 14 14"
           width="16"
         >
@@ -442,8 +328,8 @@ exports[`<Popover /> should render 1`] = `
     </div>
     <span
       aria-hidden="true"
-      data-aria-hidden="true"
       data-floating-ui-focus-guard=""
+      data-floating-ui-inert=""
       data-type="inside"
       role="button"
       style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
@@ -500,120 +386,6 @@ exports[`<Popover /> should render popover with custom zIndex 1`] = `
   border-radius: 9999px;
 }
 
-.c7 backgroundColor action background primary {
-  default: hsla(0,0%,100%,1);
-  hover: hsla(216,6%,94%,1);
-  focus: hsla(216,4%,89%,1);
-  active: hsla(216,4%,89%,1);
-  disabled: hsla(210,6%,94%,0.18);
-}
-
-.c7 backgroundColor action background secondary {
-  default: hsla(214,15%,18%,0);
-  hover: hsla(210,6%,94%,0.18);
-  focus: hsla(210,6%,94%,0.32);
-  active: hsla(210,6%,94%,0.32);
-  disabled: hsla(214,15%,18%,0);
-}
-
-.c7 backgroundColor action background tertiary {
-  default: hsla(210,6%,94%,0.09);
-  hover: hsla(210,6%,94%,0.18);
-  focus: hsla(210,6%,94%,0.32);
-  active: hsla(210,6%,94%,0.32);
-  disabled: hsla(210,6%,94%,0.09);
-}
-
-.c7 backgroundColor action border primary {
-  default: hsla(0,0%,100%,1);
-  hover: hsla(216,6%,94%,1);
-  focus: hsla(216,4%,89%,1);
-  active: hsla(216,4%,89%,1);
-  disabled: hsla(210,6%,94%,0.18);
-}
-
-.c7 backgroundColor action border secondary {
-  default: hsla(0,0%,100%,1);
-  hover: hsla(0,0%,100%,1);
-  focus: hsla(0,0%,100%,1);
-  active: hsla(0,0%,100%,1);
-  disabled: hsla(210,6%,94%,0.32);
-}
-
-.c7 backgroundColor action border tertiary {
-  default: hsla(214,15%,18%,0);
-  hover: hsla(214,15%,18%,0);
-  focus: hsla(214,15%,18%,0);
-  active: hsla(214,15%,18%,0);
-  disabled: hsla(214,15%,18%,0);
-}
-
-.c7 backgroundColor action text primary {
-  default: hsla(218,89%,51%,1);
-  hover: hsla(218,89%,51%,1);
-  focus: hsla(218,89%,51%,1);
-  active: hsla(218,89%,51%,1);
-  disabled: hsla(210,6%,94%,0.32);
-}
-
-.c7 backgroundColor action text secondary {
-  default: hsla(0,0%,100%,1);
-  hover: hsla(0,0%,100%,1);
-  focus: hsla(0,0%,100%,1);
-  active: hsla(0,0%,100%,1);
-  disabled: hsla(210,6%,94%,0.32);
-}
-
-.c7 backgroundColor action text tertiary {
-  default: hsla(0,0%,100%,1);
-  hover: hsla(0,0%,100%,1);
-  focus: hsla(0,0%,100%,1);
-  active: hsla(0,0%,100%,1);
-  disabled: hsla(210,6%,94%,0.32);
-}
-
-.c7 backgroundColor action text link {
-  default: hsla(0,0%,100%,1);
-  hover: hsla(216,4%,89%,1);
-  focus: hsla(214,7%,81%,1);
-  active: hsla(214,7%,81%,1);
-  disabled: hsla(210,6%,94%,0.32);
-  visited: hsla(268,100%,79%,1);
-}
-
-.c7 backgroundColor action icon primary {
-  default: hsla(218,89%,51%,1);
-  hover: hsla(218,89%,51%,1);
-  focus: hsla(218,89%,51%,1);
-  active: hsla(218,89%,51%,1);
-  disabled: hsla(210,6%,94%,0.32);
-}
-
-.c7 backgroundColor action icon secondary {
-  default: hsla(0,0%,100%,1);
-  hover: hsla(0,0%,100%,1);
-  focus: hsla(0,0%,100%,1);
-  active: hsla(0,0%,100%,1);
-  disabled: hsla(210,6%,94%,0.32);
-}
-
-.c7 backgroundColor action icon tertiary {
-  default: hsla(0,0%,100%,1);
-  hover: hsla(0,0%,100%,1);
-  focus: hsla(0,0%,100%,1);
-  active: hsla(0,0%,100%,1);
-  disabled: hsla(210,6%,94%,0.32);
-}
-
-.c7 backgroundColor action icon link {
-  default: hsla(0,0%,100%,1);
-  hover: hsla(216,4%,89%,1);
-  focus: hsla(214,7%,81%,1);
-  active: hsla(214,7%,81%,1);
-  disabled: hsla(210,6%,94%,0.32);
-  visited: hsla(268,100%,79%,1);
-}
-
 .c5 {
   width: 100%;
   max-width: 328px;
@@ -767,7 +539,7 @@ exports[`<Popover /> should render popover with custom zIndex 1`] = `
 <body>
   <div
     aria-hidden="true"
-    data-aria-hidden="true"
+    data-floating-ui-inert=""
   >
     <button
       aria-controls=":r8:"
@@ -797,8 +569,8 @@ exports[`<Popover /> should render popover with custom zIndex 1`] = `
   >
     <span
       aria-hidden="true"
-      data-aria-hidden="true"
       data-floating-ui-focus-guard=""
+      data-floating-ui-inert=""
       data-type="inside"
       role="button"
       style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
@@ -894,8 +666,8 @@ exports[`<Popover /> should render popover with custom zIndex 1`] = `
     </div>
     <span
       aria-hidden="true"
-      data-aria-hidden="true"
       data-floating-ui-focus-guard=""
+      data-floating-ui-inert=""
       data-type="inside"
       role="button"
       style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
@@ -1135,7 +907,7 @@ exports[`<Popover /> should render with title,footer 1`] = `
 <body>
   <div
     aria-hidden="true"
-    data-aria-hidden="true"
+    data-floating-ui-inert=""
   >
     <button
       aria-controls=":r4:"
@@ -1165,8 +937,8 @@ exports[`<Popover /> should render with title,footer 1`] = `
   >
     <span
       aria-hidden="true"
-      data-aria-hidden="true"
       data-floating-ui-focus-guard=""
+      data-floating-ui-inert=""
       data-type="inside"
       role="button"
       style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
@@ -1290,8 +1062,8 @@ exports[`<Popover /> should render with title,footer 1`] = `
     </div>
     <span
       aria-hidden="true"
-      data-aria-hidden="true"
       data-floating-ui-focus-guard=""
+      data-floating-ui-inert=""
       data-type="inside"
       role="button"
       style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"