From f4c9c5970f24746cd31d14c64ffda359f77c946b Mon Sep 17 00:00:00 2001
From: Larry Davis <lawdavis@adobe.com>
Date: Thu, 13 Feb 2020 11:33:27 -0800
Subject: [PATCH] feat: make Coach Mark support RTL

---
 components/coachmark/index.css              | 47 +++++++++++----------
 components/coachmark/metadata/coachmark.yml |  4 +-
 2 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/components/coachmark/index.css b/components/coachmark/index.css
index af9a3950988..077021ea6c7 100644
--- a/components/coachmark/index.css
+++ b/components/coachmark/index.css
@@ -16,8 +16,8 @@ governing permissions and limitations under the License.
 .spectrum-CoachMarkPopover {
   position: relative;
 
-  min-width: var(--spectrum-coachmark-min-width);
-  max-width: var(--spectrum-coachmark-max-width);
+  min-inline-size: var(--spectrum-coachmark-min-width);
+  max-inline-size: var(--spectrum-coachmark-max-width);
 
   border-radius: var(--spectrum-coachmark-border-radius);
   border-width: var(--spectrum-coachmark-border-size);
@@ -27,35 +27,36 @@ governing permissions and limitations under the License.
 .spectrum-CoachMarkPopover-image {
   border-radius: var(--spectrum-coachmark-border-radius) var(--spectrum-coachmark-border-radius) 0 0;
 
-  width: 100%;
+  inline-size: 100%;
 }
 
 .spectrum-CoachMarkPopover-header,
 .spectrum-CoachMarkPopover-content,
 .spectrum-CoachMarkPopover-footer {
-  padding: 0 var(--spectrum-coachmark-padding-x);
+  padding-block: 0;
+  padding-inline: var(--spectrum-coachmark-padding-x);
 }
 
 .spectrum-CoachMarkPopover-header {
-  padding-top: var(--spectrum-coachmark-padding-y);
+  padding-block-start: var(--spectrum-coachmark-padding-y);
 }
 
 .spectrum-CoachMarkPopover-footer {
-  padding-bottom: var(--spectrum-coachmark-padding-y);
+  padding-block-end: var(--spectrum-coachmark-padding-y);
 }
 
 .spectrum-CoachMarkPopover-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
-  margin-bottom: var(--spectrum-coachmark-title-margin-bottom);
+  margin-block-end: var(--spectrum-coachmark-title-margin-bottom);
 }
 
 .spectrum-CoachMarkPopover-title {
   font-size: var(--spectrum-coachmark-title-text-size);
   font-weight: var(--spectrum-coachmark-title-text-font-weight);
   line-height: var(--spectrum-coachmark-title-text-line-height);
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 
 .spectrum-CoachMarkPopover-step {
@@ -68,12 +69,12 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-CoachMarkPopover-content {
-  margin-bottom: var(--spectrum-coachmark-content-margin-bottom);
+  margin-block-end: var(--spectrum-coachmark-content-margin-bottom);
 }
 
 .spectrum-CoachMarkPopover-footer {
-  margin-top: 0;
-  text-align: right;
+  margin-block-start: 0;
+  text-align: end;
 }
 
 .spectrum-CoachMarkIndicator {
@@ -100,16 +101,16 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-CoachMarkIndicator {
-  min-width: calc(var(--spectrum-coachmark-indicator-ring-diameter) * 3);
-  min-height: calc(var(--spectrum-coachmark-indicator-ring-diameter) * 3);
+  min-inline-size: calc(var(--spectrum-coachmark-indicator-ring-diameter) * 3);
+  min-block-size: calc(var(--spectrum-coachmark-indicator-ring-diameter) * 3);
 }
 
 .spectrum-CoachMarkIndicator-ring {
-  top: calc(var(--spectrum-coachmark-indicator-ring-diameter) * 0.75);
-  left: calc(var(--spectrum-coachmark-indicator-ring-diameter) * 0.75);
+  inset-block-start: calc(var(--spectrum-coachmark-indicator-ring-diameter) * 0.75);
+  inset-inline-start: calc(var(--spectrum-coachmark-indicator-ring-diameter) * 0.75);
 
-  width: var(--spectrum-coachmark-indicator-ring-diameter);
-  height: var(--spectrum-coachmark-indicator-ring-diameter);
+  inline-size: var(--spectrum-coachmark-indicator-ring-diameter);
+  block-size: var(--spectrum-coachmark-indicator-ring-diameter);
   animation: pulse var(--spectrum-coachmark-animation-indicator-ring-duration) linear infinite;
 
   &:nth-child(1) {
@@ -118,15 +119,15 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-CoachMarkIndicator--quiet {
-  min-width: calc(var(--spectrum-coachmark-quiet-indicator-ring-diameter) * 2.75);
-  min-height: calc(var(--spectrum-coachmark-quiet-indicator-ring-diameter) * 2.75);
+  min-inline-size: calc(var(--spectrum-coachmark-quiet-indicator-ring-diameter) * 2.75);
+  min-block-size: calc(var(--spectrum-coachmark-quiet-indicator-ring-diameter) * 2.75);
 
   .spectrum-CoachMarkIndicator-ring {
-    top: calc(var(--spectrum-coachmark-quiet-indicator-ring-diameter) * 0.75);
-    left: calc(var(--spectrum-coachmark-quiet-indicator-ring-diameter) * 0.75);
+    inset-block-start: calc(var(--spectrum-coachmark-quiet-indicator-ring-diameter) * 0.75);
+    inset-inline-start: calc(var(--spectrum-coachmark-quiet-indicator-ring-diameter) * 0.75);
 
-    width: var(--spectrum-coachmark-quiet-indicator-ring-diameter);
-    height: var(--spectrum-coachmark-quiet-indicator-ring-diameter);
+    inline-size: var(--spectrum-coachmark-quiet-indicator-ring-diameter);
+    block-size: var(--spectrum-coachmark-quiet-indicator-ring-diameter);
     animation: pulse--quiet var(--spectrum-coachmark-animation-indicator-ring-duration) linear infinite;
 
     &:nth-child(1) {
diff --git a/components/coachmark/metadata/coachmark.yml b/components/coachmark/metadata/coachmark.yml
index e9dd40e45b3..28aafb4f3ce 100644
--- a/components/coachmark/metadata/coachmark.yml
+++ b/components/coachmark/metadata/coachmark.yml
@@ -105,7 +105,7 @@ examples:
         <div class="spectrum-CoachMarkPopover">
           <div class="spectrum-CoachMarkPopover-header">
             <div class="spectrum-CoachMarkPopover-title">Zoom in</div>
-            <div class="spectrum-CoachMarkPopover-step">2 of 8</div>
+            <div class="spectrum-CoachMarkPopover-step"><bdo dir="ltr">2 of 8</bdo></div>
           </div>
           <div class="spectrum-CoachMarkPopover-content">
             Switch to the zoom tool then click and drag in the canvas to move your camera forward and backward.
@@ -129,7 +129,7 @@ examples:
 
           <div class="spectrum-CoachMarkPopover-header">
             <div class="spectrum-CoachMarkPopover-title">Zoom in</div>
-            <div class="spectrum-CoachMarkPopover-step">2 of 8</div>
+            <div class="spectrum-CoachMarkPopover-step"><bdo dir="ltr">2 of 8</bdo></div>
           </div>
           <div class="spectrum-CoachMarkPopover-content">
             Switch to the zoom tool then click and drag in the canvas to move your camera forward and backward.