fix post merge. margin was affected due to ul change

adobecom · Nov 13, 2024 · 08f60ba · 08f60ba
1 parent 4407f37
commit 08f60ba
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 6 deletions.
diff --git a/libs/blocks/merch-card/merch-card.js b/libs/blocks/merch-card/merch-card.js
@@ -423,7 +423,7 @@ const createFooterRowCell = (row, isCheckmark) => {
   const rowTextParagraph = createTag('div', { class: 'footer-row-cell-description' }, rowText);
   const footerRowCellClass = isCheckmark ? 'footer-row-cell-checkmark' : 'footer-row-cell';
   const footerRowIconClass = isCheckmark ? 'footer-row-icon-checkmark' : 'footer-row-icon';
-  const footerRowCell = createTag('ul', { class: footerRowCellClass });
+  const footerRowCell = createTag('li', { class: footerRowCellClass });
 
   if (rowIcon) {
     rowIcon.classList.add(footerRowIconClass);
@@ -460,7 +460,7 @@ const decorateFooterRows = async (merchCard, footerRows) => {
     footerRowsSlot.appendChild(hrElem);
     merchCard.classList.add('has-divider');
 
-    const checkmarkCopyContainer = createTag('div', { class: 'checkmark-copy-container' });
+    const checkmarkCopyContainer = createTag('ul', { class: 'checkmark-copy-container' });
     const firstRowTextParagraph = await createFirstRow(
       firstRow,
       isMobile,

diff --git a/libs/deps/mas/mas.js b/libs/deps/mas/mas.js
@@ -608,7 +608,7 @@ merch-card[variant="ccd-action"] .price-strikethrough {
   merch-card[variant="mini-compare-chart"] .footer-rows-title {
     font-color: var(--merch-color-grey-80);
     font-weight: 700;
-    padding-block-end: var(--consonant-merch-spacing-xxs);
+    padding-block-end: var(--consonant-merch-spacing-xxxs);
     line-height: var(--consonant-merch-card-body-xs-line-height);
     font-size: var(--consonant-merch-card-body-xs-font-size);
   }
@@ -638,6 +638,7 @@ merch-card[variant="ccd-action"] .price-strikethrough {
     gap: var(--consonant-merch-spacing-xs);
     justify-content: start;
     align-items: flex-start;
+    margin-block: var(--consonant-merch-spacing-xxxs);
   }
 
   merch-card[variant="mini-compare-chart"] .footer-row-cell-description-checkmark {
@@ -667,6 +668,9 @@ merch-card[variant="ccd-action"] .price-strikethrough {
 
   merch-card[variant="mini-compare-chart"] .checkmark-copy-container {
     display: none;
+    margin-block-start: 0px;
+    margin-block-end: 0px;
+    padding-inline-start: 0px;
   }
 
   merch-card[variant="mini-compare-chart"] .checkmark-copy-container.open {

diff --git a/libs/deps/mas/merch-card.js b/libs/deps/mas/merch-card.js
@@ -632,7 +632,7 @@ merch-card[variant="ccd-action"] .price-strikethrough {
   merch-card[variant="mini-compare-chart"] .footer-rows-title {
     font-color: var(--merch-color-grey-80);
     font-weight: 700;
-    padding-block-end: var(--consonant-merch-spacing-xxs);
+    padding-block-end: var(--consonant-merch-spacing-xxxs);
     line-height: var(--consonant-merch-card-body-xs-line-height);
     font-size: var(--consonant-merch-card-body-xs-font-size);
   }
@@ -662,6 +662,7 @@ merch-card[variant="ccd-action"] .price-strikethrough {
     gap: var(--consonant-merch-spacing-xs);
     justify-content: start;
     align-items: flex-start;
+    margin-block: var(--consonant-merch-spacing-xxxs);
   }
 
   merch-card[variant="mini-compare-chart"] .footer-row-cell-description-checkmark {
@@ -691,6 +692,9 @@ merch-card[variant="ccd-action"] .price-strikethrough {
 
   merch-card[variant="mini-compare-chart"] .checkmark-copy-container {
     display: none;
+    margin-block-start: 0px;
+    margin-block-end: 0px;
+    padding-inline-start: 0px;
   }
 
   merch-card[variant="mini-compare-chart"] .checkmark-copy-container.open {

diff --git a/libs/features/mas/mas/dist/mas.js b/libs/features/mas/mas/dist/mas.js
@@ -608,7 +608,7 @@ merch-card[variant="ccd-action"] .price-strikethrough {
   merch-card[variant="mini-compare-chart"] .footer-rows-title {
     font-color: var(--merch-color-grey-80);
     font-weight: 700;
-    padding-block-end: var(--consonant-merch-spacing-xxs);
+    padding-block-end: var(--consonant-merch-spacing-xxxs);
     line-height: var(--consonant-merch-card-body-xs-line-height);
     font-size: var(--consonant-merch-card-body-xs-font-size);
   }
@@ -638,6 +638,7 @@ merch-card[variant="ccd-action"] .price-strikethrough {
     gap: var(--consonant-merch-spacing-xs);
     justify-content: start;
     align-items: flex-start;
+    margin-block: var(--consonant-merch-spacing-xxxs);
   }
 
   merch-card[variant="mini-compare-chart"] .footer-row-cell-description-checkmark {
@@ -667,6 +668,9 @@ merch-card[variant="ccd-action"] .price-strikethrough {
 
   merch-card[variant="mini-compare-chart"] .checkmark-copy-container {
     display: none;
+    margin-block-start: 0px;
+    margin-block-end: 0px;
+    padding-inline-start: 0px;
   }
 
   merch-card[variant="mini-compare-chart"] .checkmark-copy-container.open {

diff --git a/libs/features/mas/web-components/src/variants/mini-compare-chart.css.js b/libs/features/mas/web-components/src/variants/mini-compare-chart.css.js
@@ -71,7 +71,7 @@ export const CSS = `
   merch-card[variant="mini-compare-chart"] .footer-rows-title {
     font-color: var(--merch-color-grey-80);
     font-weight: 700;
-    padding-block-end: var(--consonant-merch-spacing-xxs);
+    padding-block-end: var(--consonant-merch-spacing-xxxs);
     line-height: var(--consonant-merch-card-body-xs-line-height);
     font-size: var(--consonant-merch-card-body-xs-font-size);
   }
@@ -101,6 +101,7 @@ export const CSS = `
     gap: var(--consonant-merch-spacing-xs);
     justify-content: start;
     align-items: flex-start;
+    margin-block: var(--consonant-merch-spacing-xxxs);
   }
 
   merch-card[variant="mini-compare-chart"] .footer-row-cell-description-checkmark {
@@ -130,6 +131,9 @@ export const CSS = `
 
   merch-card[variant="mini-compare-chart"] .checkmark-copy-container {
     display: none;
+    margin-block-start: 0px;
+    margin-block-end: 0px;
+    padding-inline-start: 0px;
   }
 
   merch-card[variant="mini-compare-chart"] .checkmark-copy-container.open {