🐛 amp-story-shopping Added correct margins for RTL mode (#37568)

* 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
ampproject · Feb 10, 2022 · 37b830a · 37b830a
1 parent e77fabd
commit 37b830a
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 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
@@ -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
@@ -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