[Amsterdam] Remove borders from flyouts and popover arrows (#3477)

* [Amsterdam] Removing border-left from flyout

* Improve popover arrow borders into faux-shadows

* Use $euiColorInk for arrow shadow

* Use clip for IE11 (instead of clip-path)

* Add changelog notices for amsterdam changes

* Remove some uneccessary overrides

* Using sizing vars wherever possible

* cl

* Change template %eui-flyout to mixin euiFlyout

Easier override of border with variable

* Replace clip with clip-path

* Remove IE only helper for popover arrows

* Add interpolation for all arrow shadow calculations

* cl

* Adjust arrow compensation

* Compensate by position

Co-authored-by: cchaos <caroline.horn@elastic.co>
Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

CHANGELOG.md

@@ -29,6 +29,8 @@
 
 - Removed borders `EuiModal` ([#3515](https://github.com/elastic/eui/pull/3515))
 - Improve `EuiOverlayMask` colors ([#3515](https://github.com/elastic/eui/pull/3515))
+- Updated shadow styles to improve smoothness, use black as the base color, and deprecated `opacity` value of shadow mixins ([#3428](https://github.com/elastic/eui/pull/3428))
+- Removed borders from `EuiFlyout` and `EuiPopover` ([#3477](https://github.com/elastic/eui/pull/3477))
 
 ## [`24.0.0`](https://github.com/elastic/eui/tree/v24.0.0)
 

src/components/collapsible_nav/_collapsible_nav.scss

@@ -1,8 +1,10 @@
 // Extends euiFlyout
-@use '../flyout/flyout';
+@import '../flyout/variables';
+@import '../flyout/mixins';
 
 .euiCollapsibleNav {
-  @extend %eui-flyout;
+  @include euiFlyout;
+  border-left: none;
   right: auto;
   left: 0;
   width: $euiCollapsibleNavWidth;
@@ -25,7 +27,7 @@
 
   &,
   &:focus {
-    // Override default `EuiButtonEmpty` :focus background to ensure better contrast 
+    // Override default `EuiButtonEmpty` :focus background to ensure better contrast
     background: $euiColorEmptyShade;
   }
 }

src/components/flyout/_flyout.scss

@@ -1,30 +1,5 @@
-@import '../header/variables';
-
-%eui-flyout {
-  border-left: $euiBorderThin;
-  // The mixin augments the above
-  // sass-lint:disable mixins-before-declarations
-  @include euiBottomShadowLarge($adjustBorders: true);
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  height: 100%;
-  z-index: $euiZModal;
-  background: $euiColorEmptyShade;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-
-  // When the EuiHeader is fixed, we need to account for it in the position of the flyout
-  .euiBody--headerIsFixed & {
-    top: $euiHeaderHeightCompensation;
-    height: calc(100% - #{$euiHeaderHeightCompensation});
-  }
-}
-
 .euiFlyout {
-  @extend %eui-flyout;
+  @include euiFlyout;
   animation: euiFlyout $euiAnimSpeedNormal $euiAnimSlightResistance;
 }
 

src/components/flyout/_index.scss

@@ -1,3 +1,6 @@
+@import 'variables';
+@import 'mixins';
+
 @import 'flyout';
 @import 'flyout_body';
 @import 'flyout_footer';

src/components/flyout/_mixins.scss

@@ -0,0 +1,24 @@
+@import '../header/variables';
+
+@mixin euiFlyout {
+  border-left: $euiFlyoutBorder;
+  // The mixin augments the above
+  // sass-lint:disable mixins-before-declarations
+  @include euiBottomShadowLarge($adjustBorders: true);
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  height: 100%;
+  z-index: $euiZModal;
+  background: $euiColorEmptyShade;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  // When the EuiHeader is fixed, we need to account for it in the position of the flyout
+  .euiBody--headerIsFixed & {
+    top: $euiHeaderHeightCompensation;
+    height: calc(100% - #{$euiHeaderHeightCompensation});
+  }
+}

src/components/flyout/_variables.scss

@@ -0,0 +1 @@
+$euiFlyoutBorder: $euiBorderThin !default;

src/themes/eui-amsterdam/global_styling/variables/_flyout.scss

@@ -0,0 +1 @@
+$euiFlyoutBorder: none;

src/themes/eui-amsterdam/global_styling/variables/_index.scss

@@ -1,4 +1,5 @@
 @import 'buttons';
 @import 'borders';
+@import 'flyout';
 @import 'typography';
 @import 'shadows';

src/themes/eui-amsterdam/overrides/_index.scss

@@ -4,4 +4,5 @@
 @import 'image';
 @import 'modal';
 @import 'overlay_mask';
+@import 'popover';
 @import 'text';

src/themes/eui-amsterdam/overrides/_popover.scss

@@ -0,0 +1,56 @@
+.euiPopover__panel {
+  .euiPopover__panelArrow {
+    &:before {
+      filter: blur($euiSizeXS - 1px);
+      opacity: .2;
+    }
+
+    $arrowShadowCompensation: $euiSizeXS;
+
+    &.euiPopover__panelArrow--top {
+      &:before {
+        bottom: -$euiPopoverArrowSize;
+        border-top-color: $euiShadowColor;
+        clip-path: polygon(#{-$arrowShadowCompensation} 0, #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation} 0, #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation} #{$euiPopoverArrowSize + $arrowShadowCompensation}, #{-$arrowShadowCompensation} #{$euiPopoverArrowSize + $arrowShadowCompensation});
+      }
+
+      &:after {
+        bottom: -$euiPopoverArrowSize + 1;
+      }
+    }
+
+    &.euiPopover__panelArrow--right {
+      &:before {
+        border-right-color: $euiShadowColor;
+        clip-path: polygon(#{-$arrowShadowCompensation} #{-$arrowShadowCompensation}, $euiPopoverArrowSize #{-$arrowShadowCompensation}, $euiPopoverArrowSize #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation}, #{-$arrowShadowCompensation} #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation});
+      }
+
+      &:after {
+        left: -$euiPopoverArrowSize + 1;
+      }
+    }
+
+    &.euiPopover__panelArrow--bottom {
+      &:before {
+        border-bottom-color: $euiShadowColor;
+        clip-path: polygon(#{-$arrowShadowCompensation} #{-$arrowShadowCompensation}, #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation} #{-$arrowShadowCompensation}, #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation} $euiPopoverArrowSize, #{-$arrowShadowCompensation} $euiPopoverArrowSize);
+      }
+
+      &:after {
+        top: -$euiPopoverArrowSize + 1;
+      }
+    }
+
+    &.euiPopover__panelArrow--left {
+      &:before {
+        right: -$euiPopoverArrowSize;
+        border-left-color: $euiShadowColor;
+        clip-path: polygon(0 #{-$arrowShadowCompensation}, #{$euiPopoverArrowSize + $arrowShadowCompensation} #{-$arrowShadowCompensation}, #{$euiPopoverArrowSize + $arrowShadowCompensation} #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation}, 0 #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation});
+      }
+
+      &:after {
+        right: -$euiPopoverArrowSize + 1;
+      }
+    }
+  }
+}