From 37b830a030b935fcd922e108d5afe28be61d68c7 Mon Sep 17 00:00:00 2001
From: Jonathan <jshamble@users.noreply.github.com>
Date: Thu, 10 Feb 2022 09:46:39 -0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20amp-story-shopping=20Added=20cor?=
 =?UTF-8?q?rect=20margins=20for=20RTL=20mode=20(#37568)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Added correct margins for RTl mode

* fixed shopping rtl ordering code

* added margin inline start

* optimized margin

* added fix

* fixed tag flip of rtl order

* fixed rtl tap flip

* fixed rtl tap flip
---
 .../0.1/amp-story-shopping-tag.css            | 19 ++++++++++---------
 .../0.1/amp-story-shopping-tag.js             |  9 ---------
 2 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.css b/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.css
index 227c514e8998..00aa1846107b 100644
--- a/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.css
+++ b/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.css
@@ -21,13 +21,13 @@ amp-story-shopping-tag {
   line-height: 15.4px !important;
 }
 
-/* Maintains the dot position in RTL mode */
+/* Maintains the correct image and text order inside the tag in RTL mode */
 [dir=rtl].i-amphtml-amp-story-shopping-tag-inner {
   flex-flow: row-reverse !important;
 }
 
-[dir=rtl] .i-amphtml-amp-story-shopping-tag-dot {
-  margin-inline-start: 4px !important;
+[dir=rtl].i-amphtml-amp-story-shopping-tag-inner-flipped {
+  flex-direction: row !important;
 }
 
 .i-amphtml-amp-story-shopping-tag-inner {
@@ -50,10 +50,6 @@ amp-story-shopping-tag {
   margin-inline-start: 4px !important;
 }
 
-.i-amphtml-amp-story-shopping-tag-dot-flipped {
-  margin-inline-start: 4px !important;
-}
-
 .i-amphtml-amp-story-shopping-tag-dot {
   width: 16px !important;
   height: 16px !important;
@@ -85,11 +81,14 @@ amp-story-shopping-tag {
   height: 100% !important;
   background-color: var(--i-amphtml-shopping-tag-bg-color) !important;
   backdrop-filter: var(--i-amphtml-shopping-tag-backdrop-filter) !important;
-  padding: 4px 12px 4px 4px !important;
+  padding: 4px 0px !important;
+  margin-inline-end: 4px !important;
 }
 
 .i-amphtml-story-shopping-tag-pill-multi-line {
   border-radius: 10px !important;
+  margin-inline-start: 9px !important;
+  margin-inline-end: 4px !important;
 }
 
 .i-amphtml-amp-story-shopping-tag-pill-image {
@@ -105,7 +104,8 @@ amp-story-shopping-tag {
   background-repeat: no-repeat !important;
   background-position: center !important;
   flex-shrink: 0 !important;
-  margin: 2px 4px 2px 2px !important;
+  margin-inline-start: 9px !important;
+  margin-inline-end: 4px !important;
 }
 
 .i-amphtml-amp-story-shopping-tag-pill-text {
@@ -117,4 +117,5 @@ amp-story-shopping-tag {
   -webkit-box-orient: vertical !important;
   -webkit-line-clamp: 2 !important;
   max-height: 32px !important;
+  margin-inline-end: 12px !important;
 }
diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js b/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js
index e1cdd273f7ad..895b5df3c408 100644
--- a/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js
+++ b/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js
@@ -108,15 +108,6 @@ export class AmpStoryShoppingTag extends AMP.BaseElement {
           shouldFlip
         );
 
-        const dotEl = this.shoppingTagEl_.querySelector(
-          '.i-amphtml-amp-story-shopping-tag-dot'
-        );
-
-        dotEl.classList.toggle(
-          'i-amphtml-amp-story-shopping-tag-dot-flipped',
-          shouldFlip
-        );
-
         this.shoppingTagEl_.classList.toggle(
           'i-amphtml-amp-story-shopping-tag-visible',
           true