feat: make Dropdown support RTL

adobe · Feb 14, 2020 · b580068 · b580068
1 parent 3d67b64
commit b580068
Showing 1 changed file with 22 additions and 22 deletions.
diff --git a/components/dropdown/index.css b/components/dropdown/index.css
@@ -25,9 +25,9 @@ governing permissions and limitations under the License.
   display: inline-block;
 
   /* Truncate if menu options make us too wide */
-  max-width: 100%;
-  width: var(--spectrum-dropdown-width);
-  min-width: var(--spectrum-dropdown-min-width);
+  max-inline-size: 100%;
+  inline-size: var(--spectrum-dropdown-width);
+  min-inline-size: var(--spectrum-dropdown-min-width);
 
   /* Hack to enable select-powered Dropdowns */
   select {
@@ -44,16 +44,16 @@ governing permissions and limitations under the License.
 
     & + .spectrum-Dropdown-icon {
       position: absolute;
-      right: var(--spectrum-dropdown-padding-x);
-      top: 50%;
-      margin-top: calc(var(--spectrum-icon-chevron-down-medium-height) / -2);
+      inset-inline-end: var(--spectrum-dropdown-padding-x);
+      inset-block-start: 50%;
+      margin-block-start: calc(var(--spectrum-icon-chevron-down-medium-height) / -2);
     }
   }
 }
 
 .spectrum-Dropdown-trigger {
   position: relative;
-  width: 100%;
+  inline-size: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -66,13 +66,13 @@ governing permissions and limitations under the License.
   white-space: nowrap;
   overflow: hidden;
 
-  height: calc(var(--spectrum-dropdown-height) - calc(var(--spectrum-dropdown-border-size) * 2));
+  block-size: calc(var(--spectrum-dropdown-height) - calc(var(--spectrum-dropdown-border-size) * 2));
   line-height: calc(var(--spectrum-dropdown-height) - calc(var(--spectrum-dropdown-border-size) * 2));
 
   font-size: var(--spectrum-dropdown-text-size);
 
   text-overflow: ellipsis;
-  text-align: left;
+  text-align: start;
 
   &.is-placeholder {
     font-weight: var(--spectrum-dropdown-placeholder-text-font-weight);
@@ -83,16 +83,16 @@ governing permissions and limitations under the License.
 
 /* Only apply margin to the icon if there's a label */
 .spectrum-Dropdown-label + .spectrum-Dropdown-icon {
-  margin-left: var(--spectrum-dropdown-icon-margin-left);
+  margin-inline-start: var(--spectrum-dropdown-icon-margin-left);
 }
 
 .spectrum-Icon + .spectrum-Dropdown-label {
-  margin-left: var(--spectrum-selectlist-thumbnail-image-padding-x);
+  margin-inline-start: var(--spectrum-selectlist-thumbnail-image-padding-x);
 }
 
 /* Only apply margin if there's a label */
 .spectrum-Dropdown-label ~ .spectrum-Dropdown-icon {
-  margin-left: var(--spectrum-dropdown-icon-margin-left);
+  margin-inline-start: var(--spectrum-dropdown-icon-margin-left);
 }
 
 .spectrum-Dropdown-icon {
@@ -102,8 +102,8 @@ governing permissions and limitations under the License.
   transition: color var(--spectrum-global-animation-duration-100) ease-out;
 
   /* Fix Safari 10 bug where align-items is ignored inside of buttons */
-  margin-top: calc(calc(var(--spectrum-dropdown-height) - calc(var(--spectrum-dropdown-border-size) * 2) - var(--spectrum-icon-chevron-down-medium-height)) / 2);
-  margin-bottom: calc(calc(var(--spectrum-dropdown-height) - calc(var(--spectrum-dropdown-border-size) * 2) - var(--spectrum-icon-chevron-down-medium-height)) / 2);
+  margin-block-start: calc(calc(var(--spectrum-dropdown-height) - calc(var(--spectrum-dropdown-border-size) * 2) - var(--spectrum-icon-chevron-down-medium-height)) / 2);
+  margin-block-end: calc(calc(var(--spectrum-dropdown-height) - calc(var(--spectrum-dropdown-border-size) * 2) - var(--spectrum-icon-chevron-down-medium-height)) / 2);
 
   opacity: 1;
 }
@@ -112,28 +112,28 @@ governing permissions and limitations under the License.
 .spectrum-Dropdown-trigger {
   .spectrum-Icon:not(.spectrum-Dropdown-icon) {
     /* Fix Safari 10 bug where align-items is ignored inside of buttons */
-  margin-top: calc(calc(var(--spectrum-dropdown-height) - calc(var(--spectrum-dropdown-border-size) * 2) - var(--spectrum-dropdown-icon-size)) / 2);
-    margin-bottom: calc(calc(var(--spectrum-dropdown-height) - calc(var(--spectrum-dropdown-border-size) * 2) - var(--spectrum-dropdown-icon-size)) / 2);
+  margin-block-start: calc(calc(var(--spectrum-dropdown-height) - calc(var(--spectrum-dropdown-border-size) * 2) - var(--spectrum-dropdown-icon-size)) / 2);
+    margin-block-end: calc(calc(var(--spectrum-dropdown-height) - calc(var(--spectrum-dropdown-border-size) * 2) - var(--spectrum-dropdown-icon-size)) / 2);
   }
 
   .spectrum-Dropdown-label + .spectrum-Icon:not(.spectrum-Dropdown-icon) {
-    margin-left: var(--spectrum-dropdown-icon-margin-left);
+    margin-inline-start: var(--spectrum-dropdown-icon-margin-left);
   }
 }
 
 .spectrum-Icon + .spectrum-Dropdown-icon {
-  margin-left: var(--spectrum-dropdown-icon-gap);
+  margin-inline-start: var(--spectrum-dropdown-icon-gap);
 }
 
 .spectrum-Dropdown--quiet {
-  width: var(--spectrum-dropdown-quiet-width);
-  min-width: var(--spectrum-dropdown-quiet-min-width);
+  inline-size: var(--spectrum-dropdown-quiet-width);
+  min-inline-size: var(--spectrum-dropdown-quiet-min-width);
 }
 
 .spectrum-Dropdown-popover {
-  max-width: var(--spectrum-dropdown-popover-max-width);
+  max-inline-size: var(--spectrum-dropdown-popover-max-width);
 }
 
 .spectrum-Dropdown-popover--quiet {
-  margin-left: calc(-1 * calc(var(--spectrum-dropdown-quiet-popover-offset-x) + var(--spectrum-popover-border-size)));
+  margin-inline-start: calc(-1 * calc(var(--spectrum-dropdown-quiet-popover-offset-x) + var(--spectrum-popover-border-size)));
 }