From e8c888ee02809ea378bf216710fa29a2926c76ba Mon Sep 17 00:00:00 2001
From: chrisgarrity <chrisg@media.mit.edu>
Date: Wed, 1 Aug 2018 13:08:21 -0400
Subject: [PATCH] Sprite info and Sprite selector RTL

Changed left/right to first/last. Added direction aware styles.
---
 src/components/sprite-info/sprite-info.css    | 26 ++++++++++++++++---
 src/components/sprite-info/sprite-info.jsx    |  4 +--
 .../sprite-selector-item.css                  | 18 +++++++++++--
 3 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/src/components/sprite-info/sprite-info.css b/src/components/sprite-info/sprite-info.css
index c83584399..179b13965 100644
--- a/src/components/sprite-info/sprite-info.css
+++ b/src/components/sprite-info/sprite-info.css
@@ -59,27 +59,45 @@
     cursor: default;
 }
 
-.radio-left {
+.radio-first {
     border: 1px solid $ui-black-transparent;
+}
+
+[dir="ltr"] .radio-first {
     border-top-left-radius: $form-radius;
     border-bottom-left-radius: $form-radius;
 }
 
-.radio-left:focus {
+[dir="rtl"] .radio-first {
+    border-top-right-radius: $form-radius;
+    border-bottom-right-radius: $form-radius;
+}
+
+.radio-first:focus {
     border-color: $motion-primary;
     box-shadow: inset 0 0 0 -2px $ui-black-transparent;
 }
 
-.radio-right {
+.radio-last {
     border-bottom: 1px solid $ui-black-transparent;
     border-top: 1px solid $ui-black-transparent;
+}
+
+[dir="ltr"] .radio-last {
     border-right: 1px solid $ui-black-transparent;
     border-left: 1px solid $ui-black-transparent;
     border-top-right-radius: $form-radius;
     border-bottom-right-radius: $form-radius;
 }
 
-.radio-right:focus {
+[dir="rtl"] .radio-last {
+    border-left: 1px solid $ui-black-transparent;
+    border-right: 1px solid $ui-black-transparent;
+    border-top-left-radius: $form-radius;
+    border-bottom-left-radius: $form-radius;
+}
+
+.radio-last:focus {
     border-color: $motion-primary;
     box-shadow: inset 0 0 0 -2px $ui-black-transparent;
 }
diff --git a/src/components/sprite-info/sprite-info.jsx b/src/components/sprite-info/sprite-info.jsx
index 37e18735a..738c080cc 100644
--- a/src/components/sprite-info/sprite-info.jsx
+++ b/src/components/sprite-info/sprite-info.jsx
@@ -180,7 +180,7 @@ class SpriteInfo extends React.Component {
                             <div
                                 className={classNames(
                                     styles.radio,
-                                    styles.radioLeft,
+                                    styles.radioFirst,
                                     styles.iconWrapper,
                                     {
                                         [styles.isActive]: this.props.visible && !this.props.disabled,
@@ -199,7 +199,7 @@ class SpriteInfo extends React.Component {
                             <div
                                 className={classNames(
                                     styles.radio,
-                                    styles.radioRight,
+                                    styles.radioLast,
                                     styles.iconWrapper,
                                     {
                                         [styles.isActive]: !this.props.visible && !this.props.disabled,
diff --git a/src/components/sprite-selector-item/sprite-selector-item.css b/src/components/sprite-selector-item/sprite-selector-item.css
index 24bf17395..d29d15c82 100644
--- a/src/components/sprite-selector-item/sprite-selector-item.css
+++ b/src/components/sprite-selector-item/sprite-selector-item.css
@@ -80,15 +80,29 @@
 .delete-button {
     position: absolute;
     top: 0.125rem;
-    right: 0.125rem;
     z-index: 1;
 }
 
+[dir="ltr"] .delete-button {
+    right: 0.125rem;
+}
+
+[dir="rtl"] .delete-button {
+    left: 0.125rem;
+}
+
 .number {
     position: absolute;
     top: 0.15rem;
-    left: 0.15rem;
     font-size: 0.625rem;
     font-weight: bold;
     z-index: 2;
 }
+
+[dir="ltr"] .number {
+    left: 0.15rem;
+}
+
+[dir="rtl"] .number {
+    right: 0.15rem;
+}