[Emotion] Fix overly large scroll shadow gradients (elastic#6374)

* Fix overly large scroll shadow gradients * changelog * snapshots
edmarmoretti · Nov 17, 2022 · 4630905 · 4630905
1 parent 726e2f2
commit 4630905
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 6 deletions.
diff --git a/src/components/flyout/__snapshots__/flyout_body.test.tsx.snap b/src/components/flyout/__snapshots__/flyout_body.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`EuiFlyoutBody is rendered 1`] = `
   data-test-subj="test subject string"
 >
   <div
-    class="euiFlyoutBody__overflow css-1fk8opf-noBanner"
+    class="euiFlyoutBody__overflow css-18yrfj9-noBanner"
     tabindex="0"
   >
     <div

diff --git a/src/global_styling/mixins/_helpers.ts b/src/global_styling/mixins/_helpers.ts
@@ -93,7 +93,7 @@ const euiOverflowShadowStyles = (
 ) => {
   const direction = _direction || 'y';
   const side = _side || 'both';
-  const hideHeight = `calc(${size.base} * 0.75 * 1.25)`;
+  const hideHeight = size.s;
   const gradientStart = `
   ${transparentize('red', 0.1)} 0%,
   ${transparentize('red', 1)} ${hideHeight}

diff --git a/src/global_styling/utility/__snapshots__/utility.test.tsx.snap b/src/global_styling/utility/__snapshots__/utility.test.tsx.snap
@@ -178,9 +178,9 @@ exports[`global utility styles generates static global styles 1`] = `
 
   mask-image: linear-gradient(to bottom, 
   rgba(255,0,0,0.1) 0%,
-  rgb(255,0,0) calc(16px * 0.75 * 1.25)
+  rgb(255,0,0) 8px
   , 
-  rgb(255,0,0) calc(100% - calc(16px * 0.75 * 1.25)),
+  rgb(255,0,0) calc(100% - 8px),
   rgba(255,0,0,0.1) 100%
   );
 ;}
@@ -217,9 +217,9 @@ exports[`global utility styles generates static global styles 1`] = `
 
   mask-image: linear-gradient(to right, 
   rgba(255,0,0,0.1) 0%,
-  rgb(255,0,0) calc(16px * 0.75 * 1.25)
+  rgb(255,0,0) 8px
   , 
-  rgb(255,0,0) calc(100% - calc(16px * 0.75 * 1.25)),
+  rgb(255,0,0) calc(100% - 8px),
   rgba(255,0,0,0.1) 100%
   );
 ;}[class*='eui-showFor']{display:none!important;}

diff --git a/upcoming_changelogs/6374.md b/upcoming_changelogs/6374.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed the shadow sizes of `.eui-yScrollWithShadows` and `.eui-xScrollWithShadows`