Fix compatibility issue between Popover and Button (#1218)

sumup-oss · Oct 14, 2021 · 8402e6b · 8402e6b · vercel · Oct 14, 2021
1 parent ed09eee
commit 8402e6b
Show file tree

Hide file tree

Showing 28 changed files with 97 additions and 69 deletions.
diff --git a/.changeset/fifty-pets-jump.md b/.changeset/fifty-pets-jump.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': patch
+---
+
+Fixed a compatibility issue between the Popover and Button where the Button content would remain visible when the Popover was closed.
diff --git a/packages/circuit-ui/components/Button/Button.tsx b/packages/circuit-ui/components/Button/Button.tsx
@@ -288,7 +288,7 @@ const spinnerLoadingStyles = ({ isLoading }: { isLoading: boolean }) =>
   isLoading &&
   css`
     opacity: 1;
-    visibility: visible;
+    visibility: inherit;
   `;
 
 const LoadingIcon = styled(Spinner)<{ isLoading: boolean }>(
@@ -302,7 +302,7 @@ const contentStyles = ({ theme }: StyleProps) => css`
   display: inline-flex;
   align-items: center;
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
   transform: scale3d(1, 1, 1);
   transition: opacity ${theme.transitions.default},
     transform ${theme.transitions.default},

diff --git a/packages/circuit-ui/components/Button/__snapshots__/Button.spec.tsx.snap b/packages/circuit-ui/components/Button/__snapshots__/Button.spec.tsx.snap
@@ -113,7 +113,7 @@ exports[`Button should render with loading styles 1`] = `
   -webkit-transition: opacity 120ms ease-in-out,visibility 120ms ease-in-out;
   transition: opacity 120ms ease-in-out,visibility 120ms ease-in-out;
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
 }
 
 .circuit-2 {
@@ -138,7 +138,7 @@ exports[`Button should render with loading styles 1`] = `
   -ms-flex-align: center;
   align-items: center;
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
   -webkit-transform: scale3d(1, 1, 1);
   -moz-transform: scale3d(1, 1, 1);
   -ms-transform: scale3d(1, 1, 1);
@@ -296,7 +296,7 @@ exports[`Button styles should render a button with icon 1`] = `
   -ms-flex-align: center;
   align-items: center;
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
   -webkit-transform: scale3d(1, 1, 1);
   -moz-transform: scale3d(1, 1, 1);
   -ms-transform: scale3d(1, 1, 1);
@@ -464,7 +464,7 @@ exports[`Button styles should render a disabled button 1`] = `
   -ms-flex-align: center;
   align-items: center;
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
   -webkit-transform: scale3d(1, 1, 1);
   -moz-transform: scale3d(1, 1, 1);
   -ms-transform: scale3d(1, 1, 1);
@@ -612,7 +612,7 @@ exports[`Button styles should render a giga button 1`] = `
   -ms-flex-align: center;
   align-items: center;
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
   -webkit-transform: scale3d(1, 1, 1);
   -moz-transform: scale3d(1, 1, 1);
   -ms-transform: scale3d(1, 1, 1);
@@ -759,7 +759,7 @@ exports[`Button styles should render a kilo button 1`] = `
   -ms-flex-align: center;
   align-items: center;
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
   -webkit-transform: scale3d(1, 1, 1);
   -moz-transform: scale3d(1, 1, 1);
   -ms-transform: scale3d(1, 1, 1);
@@ -906,7 +906,7 @@ exports[`Button styles should render a primary button by default 1`] = `
   -ms-flex-align: center;
   align-items: center;
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
   -webkit-transform: scale3d(1, 1, 1);
   -moz-transform: scale3d(1, 1, 1);
   -ms-transform: scale3d(1, 1, 1);
@@ -1053,7 +1053,7 @@ exports[`Button styles should render a secondary button 1`] = `
   -ms-flex-align: center;
   align-items: center;
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
   -webkit-transform: scale3d(1, 1, 1);
   -moz-transform: scale3d(1, 1, 1);
   -ms-transform: scale3d(1, 1, 1);
@@ -1201,7 +1201,7 @@ exports[`Button styles should render a stretched button 1`] = `
   -ms-flex-align: center;
   align-items: center;
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
   -webkit-transform: scale3d(1, 1, 1);
   -moz-transform: scale3d(1, 1, 1);
   -ms-transform: scale3d(1, 1, 1);
@@ -1348,7 +1348,7 @@ exports[`Button styles should render a tertiary button 1`] = `
   -ms-flex-align: center;
   align-items: center;
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
   -webkit-transform: scale3d(1, 1, 1);
   -moz-transform: scale3d(1, 1, 1);
   -ms-transform: scale3d(1, 1, 1);

diff --git a/packages/circuit-ui/components/ButtonGroup/__snapshots__/ButtonGroup.spec.tsx.snap b/packages/circuit-ui/components/ButtonGroup/__snapshots__/ButtonGroup.spec.tsx.snap
@@ -170,7 +170,7 @@ exports[`ButtonGroup Center aligment should render with center alignment styles
   -ms-flex-align: center;
   align-items: center;
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
   -webkit-transform: scale3d(1, 1, 1);
   -moz-transform: scale3d(1, 1, 1);
   -ms-transform: scale3d(1, 1, 1);
@@ -451,7 +451,7 @@ exports[`ButtonGroup Left aligment should render with left alignment styles 1`]
   -ms-flex-align: center;
   align-items: center;
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
   -webkit-transform: scale3d(1, 1, 1);
   -moz-transform: scale3d(1, 1, 1);
   -ms-transform: scale3d(1, 1, 1);
@@ -732,7 +732,7 @@ exports[`ButtonGroup should render with default styles 1`] = `
   -ms-flex-align: center;
   align-items: center;
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
   -webkit-transform: scale3d(1, 1, 1);
   -moz-transform: scale3d(1, 1, 1);
   -ms-transform: scale3d(1, 1, 1);
@@ -993,7 +993,7 @@ exports[`ButtonGroup should render with the actions prop 1`] = `
   -ms-flex-align: center;
   align-items: center;
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
   -webkit-transform: scale3d(1, 1, 1);
   -moz-transform: scale3d(1, 1, 1);
   -ms-transform: scale3d(1, 1, 1);

diff --git a/packages/circuit-ui/components/Carousel/__snapshots__/Carousel.spec.js.snap b/packages/circuit-ui/components/Carousel/__snapshots__/Carousel.spec.js.snap
@@ -440,7 +440,7 @@ exports[`Carousel styles should render with children as a function 1`] = `
   -ms-flex-align: center;
   align-items: center;
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
   -webkit-transform: scale3d(1, 1, 1);
   -moz-transform: scale3d(1, 1, 1);
   -ms-transform: scale3d(1, 1, 1);
@@ -1106,7 +1106,7 @@ exports[`Carousel styles should render with children as a node 1`] = `
   -ms-flex-align: center;
   align-items: center;
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
   -webkit-transform: scale3d(1, 1, 1);
   -moz-transform: scale3d(1, 1, 1);
   -ms-transform: scale3d(1, 1, 1);
@@ -1771,7 +1771,7 @@ exports[`Carousel styles should render with default paused styles 1`] = `
   -ms-flex-align: center;
   align-items: center;
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
   -webkit-transform: scale3d(1, 1, 1);
   -moz-transform: scale3d(1, 1, 1);
   -ms-transform: scale3d(1, 1, 1);
@@ -2407,7 +2407,7 @@ exports[`Carousel styles should render with default styles 1`] = `
   -ms-flex-align: center;
   align-items: center;
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
   -webkit-transform: scale3d(1, 1, 1);
   -moz-transform: scale3d(1, 1, 1);
   -ms-transform: scale3d(1, 1, 1);

diff --git a/...ages/circuit-ui/components/Carousel/components/Buttons/__snapshots__/Buttons.spec.js.snap b/...ages/circuit-ui/components/Carousel/components/Buttons/__snapshots__/Buttons.spec.js.snap
@@ -141,7 +141,7 @@ exports[`Buttons styles should render with default styles 1`] = `
   -ms-flex-align: center;
   align-items: center;
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
   -webkit-transform: scale3d(1, 1, 1);
   -moz-transform: scale3d(1, 1, 1);
   -ms-transform: scale3d(1, 1, 1);

diff --git a/packages/circuit-ui/components/CloseButton/__snapshots__/CloseButton.spec.tsx.snap b/packages/circuit-ui/components/CloseButton/__snapshots__/CloseButton.spec.tsx.snap
@@ -122,7 +122,7 @@ exports[`CloseButton should render with default styles 1`] = `
   -ms-flex-align: center;
   align-items: center;
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
   -webkit-transform: scale3d(1, 1, 1);
   -moz-transform: scale3d(1, 1, 1);
   -ms-transform: scale3d(1, 1, 1);

diff --git a/packages/circuit-ui/components/Hamburger/__snapshots__/Hamburger.spec.tsx.snap b/packages/circuit-ui/components/Hamburger/__snapshots__/Hamburger.spec.tsx.snap
@@ -123,7 +123,7 @@ exports[`Hamburger should render with active styles when passed the isActive pro
   -ms-flex-align: center;
   align-items: center;
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
   -webkit-transform: scale3d(1, 1, 1);
   -moz-transform: scale3d(1, 1, 1);
   -ms-transform: scale3d(1, 1, 1);
@@ -373,7 +373,7 @@ exports[`Hamburger should render with default styles 1`] = `
   -ms-flex-align: center;
   align-items: center;
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
   -webkit-transform: scale3d(1, 1, 1);
   -moz-transform: scale3d(1, 1, 1);
   -ms-transform: scale3d(1, 1, 1);
@@ -596,7 +596,7 @@ exports[`Hamburger should render with giga styles 1`] = `
   -ms-flex-align: center;
   align-items: center;
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
   -webkit-transform: scale3d(1, 1, 1);
   -moz-transform: scale3d(1, 1, 1);
   -ms-transform: scale3d(1, 1, 1);
@@ -819,7 +819,7 @@ exports[`Hamburger should render with kilo styles 1`] = `
   -ms-flex-align: center;
   align-items: center;
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
   -webkit-transform: scale3d(1, 1, 1);
   -moz-transform: scale3d(1, 1, 1);
   -ms-transform: scale3d(1, 1, 1);

diff --git a/packages/circuit-ui/components/IconButton/__snapshots__/IconButton.spec.tsx.snap b/packages/circuit-ui/components/IconButton/__snapshots__/IconButton.spec.tsx.snap
@@ -121,7 +121,7 @@ exports[`IconButton should render with the default styles 1`] = `
   -ms-flex-align: center;
   align-items: center;
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
   -webkit-transform: scale3d(1, 1, 1);
   -moz-transform: scale3d(1, 1, 1);
   -ms-transform: scale3d(1, 1, 1);

diff --git a/packages/circuit-ui/components/ImageInput/ImageInput.tsx b/packages/circuit-ui/components/ImageInput/ImageInput.tsx
@@ -255,7 +255,7 @@ const spinnerLoadingStyles = ({ isLoading }: LoadingIconProps) =>
   isLoading &&
   css`
     opacity: 1;
-    visibility: visible;
+    visibility: inherit;
   `;
 
 const LoadingIcon = styled(Spinner)<LoadingIconProps>(

diff --git a/packages/circuit-ui/components/ImageInput/__snapshots__/ImageInput.spec.tsx.snap b/packages/circuit-ui/components/ImageInput/__snapshots__/ImageInput.spec.tsx.snap
@@ -251,7 +251,7 @@ exports[`ImageInput styles should render a custom component 1`] = `
   -ms-flex-align: center;
   align-items: center;
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
   -webkit-transform: scale3d(1, 1, 1);
   -moz-transform: scale3d(1, 1, 1);
   -ms-transform: scale3d(1, 1, 1);
@@ -625,7 +625,7 @@ exports[`ImageInput styles should render with an existing image 1`] = `
   -ms-flex-align: center;
   align-items: center;
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
   -webkit-transform: scale3d(1, 1, 1);
   -moz-transform: scale3d(1, 1, 1);
   -ms-transform: scale3d(1, 1, 1);
@@ -1000,7 +1000,7 @@ exports[`ImageInput styles should render with default styles 1`] = `
   -ms-flex-align: center;
   align-items: center;
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
   -webkit-transform: scale3d(1, 1, 1);
   -moz-transform: scale3d(1, 1, 1);
   -ms-transform: scale3d(1, 1, 1);
@@ -1379,7 +1379,7 @@ exports[`ImageInput styles should render with invalid styles 1`] = `
   -ms-flex-align: center;
   align-items: center;
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
   -webkit-transform: scale3d(1, 1, 1);
   -moz-transform: scale3d(1, 1, 1);
   -ms-transform: scale3d(1, 1, 1);

diff --git a/packages/circuit-ui/components/Modal/__snapshots__/Modal.spec.tsx.snap b/packages/circuit-ui/components/Modal/__snapshots__/Modal.spec.tsx.snap
@@ -235,7 +235,7 @@ exports[`Modal should match the snapshot 1`] = `
   -ms-flex-align: center;
   align-items: center;
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
   -webkit-transform: scale3d(1, 1, 1);
   -moz-transform: scale3d(1, 1, 1);
   -ms-transform: scale3d(1, 1, 1);

diff --git a/...s/circuit-ui/components/NotificationBanner/__snapshots__/NotificationBanner.spec.tsx.snap b/...s/circuit-ui/components/NotificationBanner/__snapshots__/NotificationBanner.spec.tsx.snap
@@ -199,7 +199,7 @@ exports[`NotificationBanner styles should render a promotional banner 1`] = `
   -ms-flex-align: center;
   align-items: center;
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
   -webkit-transform: scale3d(1, 1, 1);
   -moz-transform: scale3d(1, 1, 1);
   -ms-transform: scale3d(1, 1, 1);
@@ -463,7 +463,7 @@ exports[`NotificationBanner styles should render with default styles 1`] = `
   -ms-flex-align: center;
   align-items: center;
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
   -webkit-transform: scale3d(1, 1, 1);
   -moz-transform: scale3d(1, 1, 1);
   -ms-transform: scale3d(1, 1, 1);

diff --git a/packages/circuit-ui/components/Pagination/__snapshots__/Pagination.spec.tsx.snap b/packages/circuit-ui/components/Pagination/__snapshots__/Pagination.spec.tsx.snap
@@ -142,7 +142,7 @@ exports[`Pagination with 2 to 5 pages should render with default styles 1`] = `
   -ms-flex-align: center;
   align-items: center;
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
   -webkit-transform: scale3d(1, 1, 1);
   -moz-transform: scale3d(1, 1, 1);
   -ms-transform: scale3d(1, 1, 1);
@@ -703,7 +703,7 @@ exports[`Pagination with more than 5 pages should render with default styles 1`]
   -ms-flex-align: center;
   align-items: center;
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
   -webkit-transform: scale3d(1, 1, 1);
   -moz-transform: scale3d(1, 1, 1);
   -ms-transform: scale3d(1, 1, 1);

diff --git a/...circuit-ui/components/Pagination/components/PageList/__snapshots__/PageList.spec.tsx.snap b/...circuit-ui/components/Pagination/components/PageList/__snapshots__/PageList.spec.tsx.snap
@@ -139,7 +139,7 @@ li:last-child .circuit-1 {
   -ms-flex-align: center;
   align-items: center;
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
   -webkit-transform: scale3d(1, 1, 1);
   -moz-transform: scale3d(1, 1, 1);
   -ms-transform: scale3d(1, 1, 1);

diff --git a/packages/circuit-ui/components/Popover/Popover.tsx b/packages/circuit-ui/components/Popover/Popover.tsx
@@ -141,8 +141,10 @@ const menuBaseStyles = ({ theme }: StyleProps) => css`
   border-radius: ${theme.borderRadius.byte};
   background-color: ${theme.colors.white};
   visibility: hidden;
+  opacity: 0;
 
   ${theme.mq.untilKilo} {
+    opacity: 1;
     transform: translateY(100%);
     transition: transform ${theme.transitions.default},
       visibility ${theme.transitions.default};
@@ -156,7 +158,8 @@ type OpenProps = { isOpen: boolean };
 const menuOpenStyles = ({ theme, isOpen }: StyleProps & OpenProps) =>
   isOpen &&
   css`
-    visibility: visible;
+    opacity: 1;
+    visibility: inherit;
 
     ${theme.mq.untilKilo} {
       transform: translateY(0);
@@ -193,7 +196,7 @@ const overlayOpenStyles = ({ theme, isOpen }: StyleProps & OpenProps) =>
   isOpen &&
   css`
     ${theme.mq.untilKilo} {
-      visibility: visible;
+      visibility: inherit;
       opacity: 1;
     }
   `;