🐛 amp-story-shopping removes support for different multi-line border …

…radii (#37817)

* updated animation logic to support different multi-line border radius

* update unit test

* removed multi-line border radius code

* removed multi line border radius

* removed unused var

extensions/amp-story-shopping/0.1/amp-story-shopping-tag.css

@@ -156,7 +156,7 @@ amp-story-shopping-tag {
 .i-amphtml-amp-story-shopping-tag-pill {
   --i-amphtml-pill-icon-size: 24px !important;
   --i-amphtml-pill-padding-inline-start: 6px !important;
-  --i-amphtml-pill-transfrom-origin: calc(var(--i-amphtml-pill-padding-inline-start) + var(--i-amphtml-pill-icon-size) * .5) !important;
+  --i-amphtml-pill-transform-origin: calc(var(--i-amphtml-pill-padding-inline-start) + var(--i-amphtml-pill-icon-size) * .5) !important;
   display: flex !important;
   align-items: center !important;
   border-radius: 18px !important;
@@ -165,7 +165,7 @@ amp-story-shopping-tag {
   background-color: var(--i-amphtml-shopping-tag-bg-color) !important;
   padding-inline-start: var(--i-amphtml-pill-padding-inline-start) !important;
   padding-inline-end: 12px !important;
-  transform-origin: var(--i-amphtml-pill-transfrom-origin) !important;
+  transform-origin: var(--i-amphtml-pill-transform-origin) !important;
 }
 
 .i-amphtml-amp-story-shopping-tag-inner[active] .i-amphtml-amp-story-shopping-tag-pill {
@@ -184,7 +184,7 @@ amp-story-shopping-tag {
   --clip-path-inset-offset-supports-rtl: inset(0 0 0 calc(100% - 36px) round 30px) !important;
 
   /* Transform origin from center of icon (right side) in RTL. */
-  transform-origin: calc(100% - var(--i-amphtml-pill-transfrom-origin)) !important;
+  transform-origin: calc(100% - var(--i-amphtml-pill-transform-origin)) !important;
 }
 
 @keyframes i-amphtml-animate-in-sequence-pill {
@@ -228,12 +228,6 @@ amp-story-shopping-tag {
   }
 }
 
-.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 {
   width: var(--i-amphtml-pill-icon-size) !important;
   height: var(--i-amphtml-pill-icon-size) !important;

extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js

@@ -5,7 +5,6 @@ import {
   childElementByTag,
   closestAncestorElementBySelector,
 } from '#core/dom/query';
-import {computedStyle} from '#core/dom/style';
 
 import {Services} from '#service';
 
@@ -169,46 +168,6 @@ export class AmpStoryShoppingTag extends AMP.BaseElement {
     return layout === Layout_Enum.CONTAINER;
   }
 
-  /**
-   * This function counts the number of lines in the shopping tag
-   * and sets the styling properties dynamically based on the number of lines.
-   * @private
-   */
-  styleTagText_() {
-    const pillEl = this.element.shadowRoot?.querySelector(
-      '.amp-story-shopping-tag-pill'
-    );
-
-    const textEl = this.element.shadowRoot?.querySelector(
-      '.amp-story-shopping-tag-pill-text'
-    );
-
-    if (!pillEl || !textEl) {
-      return;
-    }
-
-    const fontSize = parseInt(
-      computedStyle(window, textEl).getPropertyValue('font-size'),
-      10
-    );
-    const ratioOfLineHeightToFontSize = 1.5;
-    const lineHeight = Math.floor(fontSize * ratioOfLineHeightToFontSize);
-
-    let numLines = 1;
-
-    this.measureElement(() => {
-      const height = textEl./*OK*/ clientHeight;
-      numLines = Math.ceil(height / lineHeight);
-    });
-
-    this.mutateElement(() => {
-      pillEl.classList.toggle(
-        'i-amphtml-amp-story-shopping-tag-pill-multi-line',
-        numLines > 1
-      );
-    });
-  }
-
   /**
    * @return {!Element}
    * @private
@@ -297,7 +256,6 @@ export class AmpStoryShoppingTag extends AMP.BaseElement {
       shoppingSharedCSS + shoppingTagCSS
     );
     this.hasAppendedInnerShoppingTagEl_ = true;
-    this.styleTagText_();
     this.initializeTagStateListeners_();
   }
 }