Origin/cx 16499 menu overlapping border fix (#1797)

* fix: overlapping border on menu fixing the overlapping visible border on the menu by bringing the css pointer to the front and adding a border around the new pointer position * fix: removing bottom dropshadow dropshadow is not needed when menu opens down from trigger as the shadow is offset down so top edge of menu will not have shadow, so pointer won't need shadow
momentum-design · Nov 1, 2024 · e8e9782 · e8e9782
1 parent f632bf0
commit e8e9782
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 8 deletions.
diff --git a/web-components/src/components/menu-overlay/MenuOverlay.ts b/web-components/src/components/menu-overlay/MenuOverlay.ts
@@ -287,6 +287,7 @@ export namespace MenuOverlay {
           onFirstUpdate: async () => {
             // We need to find all focusable elements, after Popper finish its positioning calculation
             if (this.isOpen) {
+              this.popperInstance?.update();
               this.setFocusableElements!();
               await this.updateComplete;
               this.focusInsideOverlay();

diff --git a/web-components/src/components/menu-overlay/scss/menu-overlay.scss b/web-components/src/components/menu-overlay/scss/menu-overlay.scss
@@ -34,11 +34,9 @@
   }
 
   .overlay-arrow {
-    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.16));
     height: 0;
     visibility: hidden;
     width: 0;
-    z-index: -1;
 
     &[data-show] {
       visibility: visible;
@@ -48,28 +46,64 @@
   .overlay-container[data-popper-placement^="top"] > .overlay-arrow {
     border-left: solid $arrow-size transparent;
     border-right: solid $arrow-size transparent;
-    border-top: solid $arrow-size var(--md-menu-overlay-arrow-bg-color, var(--md-tertiary-white-bg-color));
+    border-top: solid $arrow-size var(--md-menu-overlay-border-color, --gray-20);
     bottom: $arrow-offset;
+    filter: drop-shadow(0px 14px 8px rgba(0, 0, 0, 0.16));
   }
 
   .overlay-container[data-popper-placement^="bottom"] > .overlay-arrow {
-    border-bottom: solid $arrow-size var(--md-menu-overlay-arrow-bg-color, var(--md-tertiary-white-bg-color));
+    border-bottom: solid $arrow-size var(--md-menu-overlay-border-color, --gray-20);
     border-left: solid $arrow-size transparent;
     border-right: solid $arrow-size transparent;
     top: $arrow-offset;
   }
 
   .overlay-container[data-popper-placement^="right"] > .overlay-arrow {
     border-bottom: solid $arrow-size transparent;
-    border-right: solid $arrow-size var(--md-menu-overlay-arrow-bg-color, var(--md-tertiary-white-bg-color));
+    border-right: solid $arrow-size var(--md-menu-overlay-border-color, --gray-20);
     border-top: solid $arrow-size transparent;
     left: $arrow-offset;
+    filter: drop-shadow(-16px 0px 10px rgba(0, 0, 0, 0.16));
   }
 
   .overlay-container[data-popper-placement^="left"] > .overlay-arrow {
     border-bottom: solid $arrow-size transparent;
-    border-left: solid $arrow-size var(--md-menu-overlay-arrow-bg-color, var(--md-tertiary-white-bg-color));
+    border-left: solid $arrow-size var(--md-menu-overlay-border-color, --gray-20);
     border-top: solid $arrow-size transparent;
     right: $arrow-offset;
+    filter: drop-shadow(16px 0px 10px rgba(0, 0, 0, 0.16));
   }
-}
+
+  .overlay-container > .overlay-arrow:after {
+    content: "";
+    position: absolute;
+    border-width: 19px;
+    border-style: solid;
+    border-color: transparent;
+  }
+
+  // styling to create triangle border to match menu for pointer
+  .overlay-container[data-popper-placement^="top"] > .overlay-arrow:after {
+    border-top-color: var(--md-menu-overlay-arrow-bg-color, var(--md-tertiary-white-bg-color));
+    bottom: -17px;
+    right: -19px;
+  }
+
+  .overlay-container[data-popper-placement^="bottom"] > .overlay-arrow:after {
+    border-bottom-color: var(--md-menu-overlay-arrow-bg-color, var(--md-tertiary-white-bg-color));
+    top: -17px;
+    left: -19px;
+  }
+
+  .overlay-container[data-popper-placement^="right"] > .overlay-arrow:after {
+    border-right-color: var(--md-menu-overlay-arrow-bg-color, var(--md-tertiary-white-bg-color));
+    bottom: -19px;
+    left: -17px;
+  }
+
+  .overlay-container[data-popper-placement^="left"] > .overlay-arrow:after {
+    border-left-color: var(--md-menu-overlay-arrow-bg-color, var(--md-tertiary-white-bg-color));
+    top: -19px;
+    right: -17px;
+  }
+}
diff --git a/web-components/src/components/menu-overlay/scss/settings.scss b/web-components/src/components/menu-overlay/scss/settings.scss
@@ -1,5 +1,5 @@
 $arrow-size: rem-calc(16);
-$arrow-offset: rem-calc(2) - $arrow-size;
+$arrow-offset: rem-calc(0.8) - $arrow-size;
 
 :host {
   --vw-padding: 16px;