fix!: do not override dir attribute on the overlay to rely on DirMixin (

#7677)
vaadin · Aug 21, 2024 · f18cc10 · f18cc10
1 parent 451c328
commit f18cc10
Show file tree

Hide file tree

Showing 11 changed files with 6 additions and 32 deletions.
diff --git a/packages/avatar-group/test/dom/__snapshots__/avatar-group.test.snap.js b/packages/avatar-group/test/dom/__snapshots__/avatar-group.test.snap.js
@@ -139,7 +139,6 @@ snapshots["vaadin-avatar-group opened default"] =
 
 snapshots["vaadin-avatar-group opened overlay"] = 
 `<vaadin-avatar-group-overlay
-  dir="ltr"
   id="overlay"
   no-vertical-overlap=""
   start-aligned=""
@@ -187,7 +186,6 @@ snapshots["vaadin-avatar-group opened overlay"] =
 snapshots["vaadin-avatar-group opened overlay class"] = 
 `<vaadin-avatar-group-overlay
   class="avatar-group-overlay custom"
-  dir="ltr"
   id="overlay"
   no-vertical-overlap=""
   start-aligned=""

diff --git a/packages/combo-box/test/dom/__snapshots__/combo-box.test.snap.js b/packages/combo-box/test/dom/__snapshots__/combo-box.test.snap.js
@@ -351,7 +351,6 @@ snapshots["vaadin-combo-box host opened default"] =
 
 snapshots["vaadin-combo-box host opened overlay"] = 
 `<vaadin-combo-box-overlay
-  dir="ltr"
   id="overlay"
   no-vertical-overlap=""
   opened=""
@@ -414,7 +413,6 @@ snapshots["vaadin-combo-box host opened overlay shadow"] =
 snapshots["vaadin-combo-box host opened overlay class"] = 
 `<vaadin-combo-box-overlay
   class="combo-box-overlay custom"
-  dir="ltr"
   id="overlay"
   no-vertical-overlap=""
   opened=""
@@ -452,7 +450,6 @@ snapshots["vaadin-combo-box host opened overlay class"] =
 
 snapshots["vaadin-combo-box host opened theme overlay"] = 
 `<vaadin-combo-box-overlay
-  dir="ltr"
   id="overlay"
   no-vertical-overlap=""
   opened=""

diff --git a/packages/context-menu/test/dom/__snapshots__/context-menu.test.snap.js b/packages/context-menu/test/dom/__snapshots__/context-menu.test.snap.js
@@ -2,10 +2,7 @@
 export const snapshots = {};
 
 snapshots["context-menu items"] = 
-`<vaadin-context-menu-overlay
-  dir="ltr"
-  opened=""
->
+`<vaadin-context-menu-overlay opened="">
   <vaadin-context-menu-list-box
     aria-orientation="vertical"
     role="menu"
@@ -62,7 +59,6 @@ snapshots["context-menu items"] =
 
 snapshots["context-menu items nested"] = 
 `<vaadin-context-menu-overlay
-  dir="ltr"
   modeless=""
   opened=""
   start-aligned=""
@@ -102,7 +98,6 @@ snapshots["context-menu items nested"] =
 snapshots["context-menu items overlay class"] = 
 `<vaadin-context-menu-overlay
   class="context-menu-overlay custom"
-  dir="ltr"
   opened=""
 >
   <vaadin-context-menu-list-box
@@ -162,7 +157,6 @@ snapshots["context-menu items overlay class"] =
 snapshots["context-menu items overlay class nested"] = 
 `<vaadin-context-menu-overlay
   class="context-menu-overlay custom"
-  dir="ltr"
   modeless=""
   opened=""
   start-aligned=""

diff --git a/packages/date-picker/test/dom/__snapshots__/date-picker.test.snap.js b/packages/date-picker/test/dom/__snapshots__/date-picker.test.snap.js
@@ -288,7 +288,6 @@ snapshots["vaadin-date-picker host value"] =
 
 snapshots["vaadin-date-picker host opened overlay"] = 
 `<vaadin-date-picker-overlay
-  dir="ltr"
   id="overlay"
   opened=""
   restore-focus-on-close=""
@@ -451,7 +450,6 @@ snapshots["vaadin-date-picker host opened overlay"] =
 snapshots["vaadin-date-picker host opened overlay class"] = 
 `<vaadin-date-picker-overlay
   class="custom date-picker-overlay"
-  dir="ltr"
   id="overlay"
   opened=""
   restore-focus-on-close=""
@@ -613,7 +611,6 @@ snapshots["vaadin-date-picker host opened overlay class"] =
 
 snapshots["vaadin-date-picker host opened overlay theme"] = 
 `<vaadin-date-picker-overlay
-  dir="ltr"
   id="overlay"
   opened=""
   restore-focus-on-close=""

diff --git a/packages/date-picker/theme/material/vaadin-date-picker-overlay-styles.js b/packages/date-picker/theme/material/vaadin-date-picker-overlay-styles.js
@@ -24,7 +24,7 @@ const datePickerOverlay = css`
     border-radius: 0 4px 4px;
   }
 
-  :host([dir='ltr']:not([fullscreen])[end-aligned]) [part='overlay'],
+  :host(:not([dir='rtl']):not([fullscreen])[end-aligned]) [part='overlay'],
   :host([dir='rtl']:not([fullscreen])[start-aligned]) [part='overlay'] {
     border-radius: 4px 0 4px 4px;
   }

diff --git a/packages/date-time-picker/test/dom/__snapshots__/date-time-picker.test.snap.js b/packages/date-time-picker/test/dom/__snapshots__/date-time-picker.test.snap.js
@@ -526,7 +526,6 @@ snapshots["vaadin-date-time-picker host error"] =
 snapshots["vaadin-date-time-picker host overlay class date-picker"] = 
 `<vaadin-date-picker-overlay
   class="custom date-time-picker-overlay"
-  dir="ltr"
   id="overlay"
   opened=""
   restore-focus-on-close=""

diff --git a/packages/menu-bar/test/dom/__snapshots__/menu-bar.test.snap.js b/packages/menu-bar/test/dom/__snapshots__/menu-bar.test.snap.js
@@ -58,7 +58,6 @@ snapshots["menu-bar basic"] =
 
 snapshots["menu-bar overlay"] = 
 `<vaadin-menu-bar-overlay
-  dir="ltr"
   opened=""
   right-aligned=""
   start-aligned=""
@@ -95,7 +94,6 @@ snapshots["menu-bar overlay"] =
 snapshots["menu-bar overlay class"] = 
 `<vaadin-menu-bar-overlay
   class="custom menu-bar-overlay"
-  dir="ltr"
   opened=""
   right-aligned=""
   start-aligned=""

diff --git a/packages/overlay/src/vaadin-overlay-position-mixin.js b/packages/overlay/src/vaadin-overlay-position-mixin.js
@@ -203,7 +203,6 @@ export const PositionMixin = (superClass) =>
             this.__margins[propName] = parseInt(computedStyle[propName], 10);
           });
         }
-        this.setAttribute('dir', computedStyle.direction);
 
         this._updatePosition();
         // Schedule another position update (to cover virtual keyboard opening for example)

diff --git a/packages/overlay/test/position-mixin.common.js b/packages/overlay/test/position-mixin.common.js
@@ -376,11 +376,9 @@ describe('position mixin', () => {
     });
 
     it('should align right edges with right-to-left', async () => {
-      overlay.opened = false;
-      await nextUpdate(overlay);
       document.dir = 'rtl';
-      overlay.opened = true;
-      await nextUpdate(overlay);
+      await nextRender();
+      updatePosition();
       expectEdgesAligned(RIGHT, RIGHT);
     });
 
@@ -483,11 +481,9 @@ describe('position mixin', () => {
     });
 
     it('should align left edges with right-to-left', async () => {
-      overlay.opened = false;
-      await nextUpdate(overlay);
       document.dir = 'rtl';
-      overlay.opened = true;
-      await nextUpdate(overlay);
+      await nextRender();
+      updatePosition();
       expectEdgesAligned(LEFT, LEFT);
     });
 

diff --git a/packages/select/test/dom/__snapshots__/select.test.snap.js b/packages/select/test/dom/__snapshots__/select.test.snap.js
@@ -307,7 +307,6 @@ snapshots["vaadin-select host opened default"] =
 
 snapshots["vaadin-select host opened overlay"] = 
 `<vaadin-select-overlay
-  dir="ltr"
   opened=""
   start-aligned=""
   top-aligned=""
@@ -340,7 +339,6 @@ snapshots["vaadin-select host opened overlay"] =
 snapshots["vaadin-select host opened overlay class"] = 
 `<vaadin-select-overlay
   class="custom select-overlay"
-  dir="ltr"
   opened=""
   start-aligned=""
   top-aligned=""

diff --git a/packages/tooltip/test/dom/__snapshots__/tooltip.test.snap.js b/packages/tooltip/test/dom/__snapshots__/tooltip.test.snap.js
@@ -184,7 +184,6 @@ snapshots["vaadin-tooltip end-bottom"] =
 
 snapshots["vaadin-tooltip opened overlay"] = 
 `<vaadin-tooltip-overlay
-  dir="ltr"
   hidden=""
   modeless=""
   no-vertical-overlap=""
@@ -198,7 +197,6 @@ snapshots["vaadin-tooltip opened overlay"] =
 snapshots["vaadin-tooltip opened overlay class"] = 
 `<vaadin-tooltip-overlay
   class="custom tooltip-overlay"
-  dir="ltr"
   hidden=""
   modeless=""
   no-vertical-overlap=""