Update popover tests for scrollover dependency

WordPress · Apr 27, 2021 · 31f9f4a · 31f9f4a
1 parent fe1f4f9
commit 31f9f4a
Showing 1 changed file with 44 additions and 54 deletions.
diff --git a/packages/components/src/ui/popover/test/__snapshots__/index.js.snap b/packages/components/src/ui/popover/test/__snapshots__/index.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`props should render correctly 1`] = `
-.emotion-17.emotion-17.emotion-17.emotion-17.emotion-17.emotion-17.emotion-17 {
+.emotion-16.emotion-16.emotion-16.emotion-16.emotion-16.emotion-16.emotion-16 {
   background-color: #ffffff;
   background-color: var(--wp-g2-surface-color);
   color: #1e1e1e;
@@ -11,43 +11,7 @@ exports[`props should render correctly 1`] = `
   --wp-g2-surface-background-size-dotted: 11px;
 }
 
-.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 {
-  height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-
-@media only screen and ( min-device-width:40em ) {
-  .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1::-webkit-scrollbar {
-    height: 12px;
-    width: 12px;
-  }
-
-  .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
-
-  .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1::-webkit-scrollbar-track {
-    background: rgba(0, 0, 0, 0.04);
-    background: var(--wp-g2-color-scrollbar-track);
-    border-radius: 8px;
-  }
-
-  .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1::-webkit-scrollbar-thumb {
-    background-clip: padding-box;
-    background-color: rgba(0, 0, 0, 0.2);
-    background-color: var(--wp-g2-color-scrollbar-thumb);
-    border: 2px solid rgba( 0,0,0,0 );
-    border-radius: 7px;
-  }
-
-  .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1:hover::-webkit-scrollbar-thumb {
-    background-color: rgba(0, 0, 0, 0.5);
-    background-color: var(--wp-g2-color-scrollbar-thumb-hover);
-  }
-}
-
-.emotion-7.emotion-7.emotion-7.emotion-7.emotion-7.emotion-7.emotion-7 {
+.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6 {
   border-radius: inherit;
   bottom: 0;
   box-shadow: 0 1px 2px 0 rgba(0 ,0,0,0.05);
@@ -62,7 +26,7 @@ exports[`props should render correctly 1`] = `
   transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function);
 }
 
-.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12 {
+.emotion-11.emotion-11.emotion-11.emotion-11.emotion-11.emotion-11.emotion-11 {
   border-radius: inherit;
   bottom: 0;
   box-shadow: 0 5px 10px 0 rgba(0 ,0,0,0.25);
@@ -77,7 +41,7 @@ exports[`props should render correctly 1`] = `
   transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function);
 }
 
-.emotion-6 {
+.emotion-5 {
   background: transparent;
   display: block;
   margin: 0 !important;
@@ -86,26 +50,56 @@ exports[`props should render correctly 1`] = `
   will-change: box-shadow;
 }
 
-.emotion-16 {
+.emotion-15 {
   box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
   outline: none;
   border-radius: 2px;
 }
 
-.emotion-16 .components-card-body {
+.emotion-15 .components-card-body {
   max-height: 80vh;
 }
 
-.emotion-8 {
+.emotion-7 {
   border-radius: 2px;
 }
 
 .emotion-0 {
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
   height: auto;
   max-height: 100%;
   padding: calc(4px * 3) calc(4px * 3);
 }
 
+@media only screen and ( min-device-width:40em ) {
+  .emotion-0::-webkit-scrollbar {
+    height: 12px;
+    width: 12px;
+  }
+
+  .emotion-0::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  .emotion-0::-webkit-scrollbar-track {
+    background: rgba(0,0,0,0.04);
+    border-radius: 8px;
+  }
+
+  .emotion-0::-webkit-scrollbar-thumb {
+    background-clip: padding-box;
+    background-color: rgba(0,0,0,0.2);
+    border: 2px solid rgba( 0,0,0,0 );
+    border-radius: 7px;
+  }
+
+  .emotion-0:hover::-webkit-scrollbar-thumb {
+    background-color: rgba(0,0,0,0.5);
+  }
+}
+
 .emotion-0:first-of-type {
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
@@ -117,12 +111,12 @@ exports[`props should render correctly 1`] = `
 }
 
 <div
-  class="components-surface components-card emotion-16 emotion-17 emotion-2 emotion-3"
+  class="components-surface components-card emotion-15 emotion-16 emotion-1 emotion-2"
   data-wp-c16t="true"
   data-wp-component="Card"
 >
   <div
-    class="emotion-2 emotion-3"
+    class="emotion-1 emotion-2"
   >
     <iframe
       aria-hidden="true"
@@ -132,9 +126,7 @@ exports[`props should render correctly 1`] = `
       tabindex="-1"
     />
     <div
-      class="components-scrollable wp-components-scrollable components-card-body emotion-0 ic-y3p1xi emotion-1 emotion-2 emotion-3"
-      data-g2-c16t="true"
-      data-g2-component="Scrollable"
+      class="components-scrollable components-card-body emotion-0 emotion-1 emotion-2"
       data-wp-c16t="true"
       data-wp-component="CardBody"
     >
@@ -143,13 +135,13 @@ exports[`props should render correctly 1`] = `
   </div>
   <div
     aria-hidden="true"
-    class="emotion-6 emotion-7 components-elevation emotion-8 emotion-2 emotion-3"
+    class="emotion-5 emotion-6 components-elevation emotion-7 emotion-1 emotion-2"
     data-wp-c16t="true"
     data-wp-component="Elevation"
   />
   <div
     aria-hidden="true"
-    class="emotion-6 emotion-12 components-elevation emotion-8 emotion-2 emotion-3"
+    class="emotion-5 emotion-11 components-elevation emotion-7 emotion-1 emotion-2"
     data-wp-c16t="true"
     data-wp-component="Elevation"
   />
@@ -198,16 +190,14 @@ Snapshot Diff:
   >
     <div
       class="components-surface components-card css-hy95ag-Card-rounded-cardStyle css-10jei3p css-1mm2cvy-View egi4jkx0"
-@@ -21,10 +21,19 @@
+@@ -21,10 +21,17 @@
           frameborder="0"
           src="about:blank"
           style="display: block; opacity: 0; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;"
           tabindex="-1"
         />
 +       <div
-+         class="components-scrollable wp-components-scrollable components-card-body css-3sz8a0-Body-borderRadius ic-y3p1xi css-1jyvxqk css-1mm2cvy-View egi4jkx0"
-+         data-g2-c16t="true"
-+         data-g2-component="Scrollable"
++         class="components-scrollable components-card-body css-1kkgl6g-Scrollable-scrollableScrollbar-scrollY-Body-borderRadius css-1mm2cvy-View egi4jkx0"
 +         data-wp-c16t="true"
 +         data-wp-component="CardBody"
 +       >