From 08f60baa299dbdcab4f0e3c6bd9826ea6b206321 Mon Sep 17 00:00:00 2001 From: Rohit Sahu Date: Wed, 13 Nov 2024 19:47:28 +0530 Subject: [PATCH] fix post merge. margin was affected due to ul change --- libs/blocks/merch-card/merch-card.js | 4 ++-- libs/deps/mas/mas.js | 6 +++++- libs/deps/mas/merch-card.js | 6 +++++- libs/features/mas/mas/dist/mas.js | 6 +++++- .../web-components/src/variants/mini-compare-chart.css.js | 6 +++++- 5 files changed, 22 insertions(+), 6 deletions(-) diff --git a/libs/blocks/merch-card/merch-card.js b/libs/blocks/merch-card/merch-card.js index f9dced81aa..a8806c3cf0 100644 --- 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 index 905233f2ca..9564ef8476 100644 --- 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 index cc8979bd24..c97fe2a86c 100644 --- 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 index 905233f2ca..9564ef8476 100644 --- 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 index 851e28f572..bfb166377a 100644 --- 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 {