MWPW-193465 Divider Color Select

codecov.yml

@@ -42,3 +42,5 @@ ignore:
     - '**/node_modules/**/*'
     - '**/dist/**/*'
     - 'build/**/*'
+    # Mostly CSS-in-template-string; patch coverage does not reflect runtime risk.
+    - 'web-components/src/global.css.js'

nala/docs/minicompare/minicompare.page.js

@@ -10,4 +10,8 @@ export default class MasMinicompare {
     getGalleryFooterCtas() {
         return this.page.locator('.three-merch-cards merch-card div[slot="footer"] :is(a, button)');
     }
+
+    getMnemonicRow(id, index = 0) {
+        return this.getCard(id).locator('merch-whats-included merch-mnemonic-list').nth(index);
+    }
 }

nala/docs/minicompare/minicomparedocs.spec.js

@@ -26,4 +26,15 @@ export const features = [
         data: {},
         tags: '@mas-docs @mas-minicompare @commerce @smoke @regression @milo',
     },
+    {
+        tcid: '2',
+        name: '@MAS-Minicompare-Divider-CSSVar',
+        path: DOCS_GALLERY_PATH.MINICOMPARE,
+        data: {
+            id: '8c404496-6d60-42d0-975c-a4ec0b0314e1',
+            defaultDividerColor: 'rgb(233, 233, 233)',
+            overrideDividerColor: 'rgb(247, 181, 0)',
+        },
+        tags: '@mas-docs @mas-minicompare @commerce @regression @milo',
+    },
 ];

nala/docs/minicompare/minicomparedocs.test.js

@@ -82,4 +82,42 @@ test.describe('Minicompare gallery feature test suite', () => {
             }
         });
     });
+
+    test(`${features[2].name},${features[2].tags}`, async () => {
+        const { data } = features[2];
+        const page = workerSetup.getPage('US');
+        galleryPage = new MasMinicompare(page);
+
+        await test.step('step-1: Go to Minicompare gallery page', async () => {
+            await workerSetup.verifyPageURL('US', DOCS_GALLERY_PATH.MINICOMPARE, expect);
+        });
+
+        await test.step('step-2: Default divider color matches the variant fallback (no regression)', async () => {
+            const card = galleryPage.getCard(data.id);
+            await expect(card).toBeVisible();
+            const row = galleryPage.getMnemonicRow(data.id, 0);
+            await expect(row).toBeVisible();
+            const defaultColor = await row.evaluate((el) => window.getComputedStyle(el).borderTopColor);
+            expect(defaultColor).toBe(data.defaultDividerColor);
+        });
+
+        await test.step('step-3: Setting --merch-whats-included-divider-color on <merch-card> recolors the divider', async () => {
+            const card = galleryPage.getCard(data.id);
+            await card.evaluate(
+                (el, color) => el.style.setProperty('--merch-whats-included-divider-color', color),
+                data.overrideDividerColor,
+            );
+            const row = galleryPage.getMnemonicRow(data.id, 0);
+            const overriddenColor = await row.evaluate((el) => window.getComputedStyle(el).borderTopColor);
+            expect(overriddenColor).toBe(data.overrideDividerColor);
+        });
+
+        await test.step('step-4: Removing the override restores the default color', async () => {
+            const card = galleryPage.getCard(data.id);
+            await card.evaluate((el) => el.style.removeProperty('--merch-whats-included-divider-color'));
+            const row = galleryPage.getMnemonicRow(data.id, 0);
+            const restoredColor = await row.evaluate((el) => window.getComputedStyle(el).borderTopColor);
+            expect(restoredColor).toBe(data.defaultDividerColor);
+        });
+    });
 });

studio/src/editors/merch-card-editor.js

@@ -99,6 +99,7 @@ class MerchCardEditor extends LitElement {
     availableColors = [];
     availableBorderColors = [];
     availableBadgeColors = [];
+    availableWhatsIncludedDividerColors = [];
     availableBackgroundColors = [];
     quantitySelectorValues = '';
     lastMnemonicState = null;
@@ -1330,6 +1331,15 @@ class MerchCardEditor extends LitElement {
                 </sp-field-group>
                 <sp-field-group class="toggle" id="whatsIncludedIconPicker">
                     <div class="section-title">What's included</div>
+                    <div class="two-column-grid">
+                        ${this.#renderColorPicker(
+                            'whatsIncludedDividerColor',
+                            'Divider Color',
+                            this.availableWhatsIncludedDividerColors,
+                            form.whatsIncludedDividerColor?.values[0],
+                            'whatsIncludedDividerColor',
+                        )}
+                    </div>
                     <mas-multifield
                         button-label="Add application"
                         data-field-state="${this.getFieldState('whatsIncluded')}"
@@ -1980,6 +1990,7 @@ class MerchCardEditor extends LitElement {
             this.availableBorderColors = [];
             this.availableBadgeColors = [];
         }
+        this.availableWhatsIncludedDividerColors = variant.allowedWhatsIncludedDividerColors || [];
         this.#displayBadgeColorFields(this.badgeText);
         this.#displayTrialBadgeColorFields(this.trialBadgeText);
     }
@@ -2390,6 +2401,7 @@ class MerchCardEditor extends LitElement {
         const isBorder = dataField === 'borderColor';
         const isBadgeColor = dataField === 'badgeColor' || dataField === 'trialBadgeColor';
         const isBadgeBorderColor = dataField === 'badgeBorderColor' || dataField === 'trialBadgeBorderColor';
+        const isWhatsIncludedDividerColor = dataField === 'whatsIncludedDividerColor';
 
         let colorArray = Array.isArray(colors) ? colors : Object.keys(colors || {});
 
@@ -2416,7 +2428,7 @@ class MerchCardEditor extends LitElement {
         const hasNoExplicitColor = !selectedValue || selectedValue === '';
         const isTransparent = selectedValue === 'transparent';
 
-        if (hasNoExplicitColor && (isBadgeColor || isBadgeBorderColor || isBorder)) {
+        if (hasNoExplicitColor && (isBadgeColor || isBadgeBorderColor || isBorder || isWhatsIncludedDividerColor)) {
             displaySelectedValue = 'Default';
         } else if (isTransparent) {
             displaySelectedValue = 'Transparent';
@@ -2448,7 +2460,7 @@ class MerchCardEditor extends LitElement {
                     } else if (dataField === 'trialBadgeBorderColor') {
                         this.#updateTrialBadge(this.trialBadge.text, this.trialBadge.bgColor, '');
                     }
-                } else if (isBorder) {
+                } else if (isBorder || isWhatsIncludedDividerColor) {
                     const fragment = this.fragmentStore.get();
                     fragment.updateField(dataField, ['Default']);
                     this.fragmentStore.set(fragment);
@@ -2470,7 +2482,7 @@ class MerchCardEditor extends LitElement {
                     } else if (dataField === 'trialBadgeBorderColor') {
                         this.#updateTrialBadge(this.trialBadge.text, this.trialBadge.bgColor, 'transparent');
                     }
-                } else if (isBorder) {
+                } else if (isBorder || isWhatsIncludedDividerColor) {
                     const fragment = this.fragmentStore.get();
                     fragment.updateField(dataField, ['transparent']);
                     this.fragmentStore.set(fragment);
@@ -2509,8 +2521,16 @@ class MerchCardEditor extends LitElement {
                     data-field="${dataField}"
                     data-field-state="${this.#getColorPickerFieldState(dataField, isBadgeColor, isBadgeBorderColor)}"
                     value="${displaySelectedValue ||
-                    (isBackground || isBadgeColor || isBadgeBorderColor || isBorder ? 'Default' : '')}"
-                    data-default-value="${isBackground || isBadgeColor || isBadgeBorderColor || isBorder ? 'Default' : ''}"
+                    (isBackground || isBadgeColor || isBadgeBorderColor || isBorder || isWhatsIncludedDividerColor
+                        ? 'Default'
+                        : '')}"
+                    data-default-value="${isBackground ||
+                    isBadgeColor ||
+                    isBadgeBorderColor ||
+                    isBorder ||
+                    isWhatsIncludedDividerColor
+                        ? 'Default'
+                        : ''}"
                     @change="${handleChange}"
                 >
                     ${options.map(