From 3e168935d1e265b57495bedd75aaaa453f9e4083 Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Sun, 6 Aug 2017 22:00:30 -0400
Subject: [PATCH] Swap increment/decrement spin buttons when RTL

---
 css/80_app.css             |  6 +++---
 modules/ui/fields/input.js | 16 +++++++++-------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index 73f8652b0..7a576702b 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -1465,12 +1465,12 @@ input[type=number] {
 .spin-control button.decrement {
     border-bottom-right-radius: 3px;
 }
-[dir='rtl'] .spin-control button.decrement{
+[dir='rtl'] .spin-control button.decrement {
     border-bottom-right-radius: 0;
-    right: 0;
 }
-[dir='rtl'] .spin-control button.increment{
+[dir='rtl'] .spin-control button.increment {
     border-bottom-left-radius: 3px;
+    right: 0;
 }
 
 .spin-control button.decrement::after,
diff --git a/modules/ui/fields/input.js b/modules/ui/fields/input.js
index 4cbed223a..c60f9361e 100644
--- a/modules/ui/fields/input.js
+++ b/modules/ui/fields/input.js
@@ -1,7 +1,7 @@
 import * as d3 from 'd3';
-import { t } from '../../util/locale';
-import { dataPhoneFormats } from '../../../data/index';
-import { services } from '../../services/index';
+import { t, textDirection } from '../../util/locale';
+import { dataPhoneFormats } from '../../../data';
+import { services } from '../../services';
 import {
     utilGetSetValue,
     utilNoAuto,
@@ -52,6 +52,8 @@ export function uiFieldText(field, context) {
             });
 
         } else if (field.type === 'number') {
+            var rtl = (textDirection === 'rtl');
+
             input.attr('type', 'text');
 
             var spinControl = selection.selectAll('.spin-control')
@@ -63,14 +65,14 @@ export function uiFieldText(field, context) {
 
             enter
                 .append('button')
-                .datum(-1)
-                .attr('class', 'decrement')
+                .datum(rtl ? 1 : -1)
+                .attr('class', rtl ? 'increment' : 'decrement')
                 .attr('tabindex', -1);
 
             enter
                 .append('button')
-                .datum(1)
-                .attr('class', 'increment')
+                .datum(rtl ? -1 : 1)
+                .attr('class', rtl ? 'decrement' : 'increment')
                 .attr('tabindex', -1);
 
             spinControl = spinControl