fix(menu-button): fix multible button alignment (eBay#1849)

cordeliadillon · Sep 21, 2022 · 55169c4 · 55169c4
1 parent ecb3c02
commit 55169c4
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 15 deletions.
diff --git a/dist/combobox/combobox.css b/dist/combobox/combobox.css
@@ -16,9 +16,6 @@ span.combobox {
 .combobox__options--fix-width[role="listbox"] {
   width: 100%;
 }
-.combobox__options--reverse[role="listbox"] {
-  right: 0;
-}
 .combobox__listbox {
   background-color: var(--combobox-listbox-background-color, var(--color-background-primary));
   border-color: var(--combobox-listbox-border-color, var(--color-stroke-default));
@@ -28,6 +25,7 @@ span.combobox {
   box-shadow: var(--combobox-listbox-box-shadow, var(--dropdown-box-shadow));
   box-sizing: border-box;
   display: none;
+  left: 0;
   max-height: 400px;
   min-width: 100%;
   overflow-y: auto;
@@ -36,6 +34,18 @@ span.combobox {
   width: auto;
   z-index: 2;
 }
+[dir="rtl"] .combobox__listbox {
+  left: unset;
+  right: 0;
+}
+.combobox__listbox--reverse {
+  left: unset;
+  right: 0;
+}
+[dir="rtl"] .combobox__listbox--reverse {
+  left: 0;
+  right: unset;
+}
 .combobox__option[role^="option"] {
   background-color: transparent;
   border-style: solid;

diff --git a/dist/listbox-button/listbox-button.css b/dist/listbox-button/listbox-button.css
@@ -20,6 +20,7 @@ div.listbox-button__listbox {
   box-shadow: var(--listbox-button-listbox-box-shadow, var(--dropdown-box-shadow));
   box-sizing: border-box;
   display: none;
+  left: 0;
   max-height: 400px;
   min-width: 100%;
   overflow-y: auto;
@@ -28,6 +29,10 @@ div.listbox-button__listbox {
   width: auto;
   z-index: 2;
 }
+[dir="rtl"] div.listbox-button__listbox {
+  left: unset;
+  right: 0;
+}
 button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox,
 .listbox-button button.btn[aria-expanded="true"] ~ div.listbox-button__listbox {
   display: block;

diff --git a/dist/menu-button/menu-button.css b/dist/menu-button/menu-button.css
@@ -13,6 +13,7 @@
   box-shadow: var(--menu-button-menu-box-shadow, var(--dropdown-box-shadow));
   box-sizing: border-box;
   display: none;
+  left: 0;
   max-height: 400px;
   min-width: 100%;
   overflow-y: auto;
@@ -22,6 +23,11 @@
   z-index: 2;
   outline: 0;
 }
+[dir="rtl"] .menu-button__menu,
+[dir="rtl"] .fake-menu-button__menu {
+  left: unset;
+  right: 0;
+}
 span.menu-button__button,
 span.fake-menu-button__button {
   display: inline-block;
@@ -189,12 +195,13 @@ div.menu-button__item--badged[role^="menuitem"] .badge {
 }
 .menu-button__menu--reverse,
 .fake-menu-button__menu--reverse {
+  left: unset;
   right: 0;
 }
 [dir="rtl"] .menu-button__menu--reverse,
 [dir="rtl"] .fake-menu-button__menu--reverse {
   left: 0;
-  right: inherit;
+  right: unset;
 }
 .menu-button__button[aria-expanded="true"] ~ .menu-button__menu,
 .fake-menu-button__button[aria-expanded="true"] ~ .fake-menu-button__menu,

diff --git a/src/less/combobox/combobox.less b/src/less/combobox/combobox.less
@@ -27,14 +27,14 @@ span.combobox {
     width: 100%;
 }
 
-.combobox__options--reverse[role="listbox"] {
-    right: 0;
-}
-
 .combobox__listbox {
     .dropdown-base(combobox-listbox);
 }
 
+.combobox__listbox--reverse {
+    .dropdown-reverse(combobox-listbox-reverse);
+}
+
 .combobox__option[role^="option"] {
     .listbox-option-base();
     .dropdown-item-border-radius(combobox-listbox);

diff --git a/src/less/menu-button/menu-button.less b/src/less/menu-button/menu-button.less
@@ -146,13 +146,7 @@ div.menu-button__item--badged[role^="menuitem"] .badge {
 
 .menu-button__menu--reverse,
 .fake-menu-button__menu--reverse {
-    right: 0;
-}
-
-[dir="rtl"] .menu-button__menu--reverse,
-[dir="rtl"] .fake-menu-button__menu--reverse {
-    left: 0;
-    right: inherit;
+    .dropdown-reverse(menu-button-menu-reverse);
 }
 
 .menu-button__button[aria-expanded="true"] ~ .menu-button__menu,

diff --git a/src/less/mixins/private/dropdown-mixins.less b/src/less/mixins/private/dropdown-mixins.less
@@ -9,13 +9,29 @@
     .box-shadow-token(~"@{component}-box-shadow", dropdown-box-shadow);
     box-sizing: border-box;
     display: none;
+    left: 0;
     max-height: 400px;
     min-width: 100%;
     overflow-y: auto;
     position: absolute;
     top: calc(100% + 4px);
     width: auto;
     z-index: 2;
+
+    [dir="rtl"] & {
+        left: unset;
+        right: 0;
+    }
+}
+
+.dropdown-reverse() {
+    left: unset;
+    right: 0;
+
+    [dir="rtl"] & {
+        left: 0;
+        right: unset;
+    }
 }
 
 .dropdown-item-border-radius(@component) {