From cd118b03f59cf10b6c15de50fe3f22f864023011 Mon Sep 17 00:00:00 2001 From: Elan Bartholomew Date: Mon, 12 Aug 2024 10:31:26 -0600 Subject: [PATCH 1/9] various adjustments based on design review --- libs/blocks/notification/notification.css | 49 +++++++++++++++-------- libs/blocks/notification/notification.js | 39 ++++++++++++++---- libs/utils/decorate.js | 3 +- 3 files changed, 65 insertions(+), 26 deletions(-) diff --git a/libs/blocks/notification/notification.css b/libs/blocks/notification/notification.css index fa108ab42f..ccdd780281 100644 --- a/libs/blocks/notification/notification.css +++ b/libs/blocks/notification/notification.css @@ -11,9 +11,10 @@ --border-block-size: 10px; --close-size: 20px; --icon-size: 56px; - --icon-size-s: 40px; + --icon-size-m: 40px; + --icon-size-s: 32px; --icon-size-xs: 24px; - --icon-size-l: 64px; + --icon-size-xl: 64px; --pill-radius: 16px; display: flex; @@ -48,8 +49,7 @@ font-weight: unset; } -.notification [class*="heading-"] + p, -.notification.pill p { +.notification .text p:not(.icon-area, .action-area) { margin-block-end: var(--spacing-s); } @@ -189,7 +189,19 @@ max-block-size: var(--icon-size); } -.notification:is(.ribbon.s-icon, .pill) .icon-area img { +.notification .icon-area.lockup-area img { + max-block-size: unset; +} + +.notification .lockup-area { + flex-wrap: nowrap; +} + +.notification:is(.ribbon.m-icon, .pill) .icon-area img { + max-block-size: var(--icon-size-m); +} + +.notification.s-icon:is(.ribbon, .pill) .icon-area img { max-block-size: var(--icon-size-s); } @@ -197,8 +209,8 @@ max-block-size: var(--icon-size-xs); } -.notification.ribbon.l-icon .icon-area img { - max-block-size: var(--icon-size-l); +.notification.ribbon.xl-icon .icon-area img { + max-block-size: var(--icon-size-xl); } .notification .text [class*="heading-"] + .action-area { @@ -215,6 +227,9 @@ margin-block-end: var(--spacing-xs); flex-shrink: 0; display: flex; +} + +.notification .foreground.container .icon-area:not(.lockup-area) { gap: var(--spacing-xs); } @@ -364,10 +379,6 @@ inline-size: auto; } - .notification.ribbon .foreground.container .icon-area { - flex-shrink: 1; - } - .notification.ribbon .copy-wrap { margin-inline-end: var(--spacing-s); } @@ -470,6 +481,10 @@ margin-inline-end: var(--spacing-s); } + .notification .foreground.container .lockup-area { + max-inline-size: none; + } + .notification.ribbon .foreground.container .icon-area { flex-shrink: 0; } @@ -498,8 +513,12 @@ margin-inline: auto; } - .notification.pill [class*="heading-"], .notification.pill p { + inline-size: auto; + } + + .notification.pill .text [class*="heading-"], + .notification.pill .text p { flex-shrink: 0; margin-block-end: 0; } @@ -509,10 +528,6 @@ margin-block-end: 0; } - .notification.pill p { - inline-size: auto; - } - .notification.pill .close { inset-inline: auto var(--spacing-s); inset-block: 0; @@ -538,7 +553,7 @@ } .notification.pill .icon-area img { - max-block-size: var(--icon-size-s); + max-block-size: var(--icon-size-m); } .notification.pill .foreground.container .action-area { diff --git a/libs/blocks/notification/notification.js b/libs/blocks/notification/notification.js index 42e383076f..5eddd45065 100644 --- a/libs/blocks/notification/notification.js +++ b/libs/blocks/notification/notification.js @@ -11,12 +11,14 @@ */ /* -* Notification - v1.0 +* Notification - v1.1 */ import { decorateBlockText, decorateBlockBg, decorateTextOverrides } from '../../utils/decorate.js'; -import { createTag } from '../../utils/utils.js'; +import { createTag, getConfig, loadStyle } from '../../utils/utils.js'; +const { miloLibs, codeRoot } = getConfig(); +const base = miloLibs || codeRoot; const variants = ['banner', 'ribbon', 'pill']; const sizes = ['small', 'medium', 'large']; const [banner, ribbon, pill] = variants; @@ -26,7 +28,7 @@ const defaultVariant = banner; const blockConfig = { [banner]: { [small]: ['s', 's', 's', 'm'], - [medium]: ['m', 'm', 'm', 'm'], + [medium]: ['m', 'm', 'm', 'l'], [large]: ['l', 'l', 'l', 'l'], }, [ribbon]: { @@ -65,7 +67,8 @@ function getBlockData(el) { const variant = variants.find((varClass) => el.classList.contains(varClass)) || defaultVariant; const size = sizes.find((sizeClass) => el.classList.contains(sizeClass)) || defaultSize; const fontSizes = [...blockConfig[variant][size]]; - if (el.classList.contains('s-button')) fontSizes.splice(3, 1, 'm'); + const buttonSize = el.className.match(/([xsml])+-button/); + if (buttonSize) fontSizes.splice(3, 1, buttonSize[1]); return { fontSizes, options: { ...getOpts(el) } }; } @@ -99,7 +102,24 @@ function decorateFlexible(el) { el.appendChild(inner); } -function decorateLayout(el) { +async function loadIconography() { + await new Promise((resolve) => { loadStyle(`${base}/styles/iconography.css`, resolve); }); +} + +async function decorateLockup(lockupArea, el) { + await loadIconography(); + const icon = lockupArea.querySelector('picture'); + const content = icon.nextElementSibling || icon.nextSibling; + const label = createTag('span', { class: 'lockup-label' }, content.nodeValue || content); + if (content.nodeType === 3) lockupArea.replaceChild(label, content); + else lockupArea.appendChild(label); + lockupArea.classList.add('lockup-area'); + const pre = el.className.match(/([xsml]+)-(lockup|icon)/); + if (!pre) el.classList.add(`${el.matches('.pill') ? 'm' : 'l'}-lockup`); + if (pre && pre[2] === 'icon') el.classList.replace(pre[0], `${pre[1]}-lockup`); +} + +async function decorateLayout(el) { const [background, ...rest] = el.querySelectorAll(':scope > div'); const foreground = rest.pop(); if (background) decorateBlockBg(el, background); @@ -108,6 +128,7 @@ function decorateLayout(el) { text?.classList.add('text'); const iconArea = text?.querySelector('p picture')?.closest('p'); iconArea?.classList.add('icon-area'); + if (iconArea?.textContent.trim()) await decorateLockup(iconArea, el); const fgMedia = foreground?.querySelector(':scope > div:not(.text) :is(img, video, a[href*=".mp4"])')?.closest('div'); const bgMedia = el.querySelector(':scope > div:not(.foreground) :is(img, video, a[href*=".mp4"])')?.closest('div'); const media = fgMedia ?? bgMedia; @@ -118,10 +139,10 @@ function decorateLayout(el) { return foreground; } -export default function init(el) { +const init = async (el) => { el.classList.add('con-block'); const { fontSizes, options } = getBlockData(el); - const blockText = decorateLayout(el); + const blockText = await decorateLayout(el); decorateBlockText(blockText, fontSizes); if (options.borderBottom) { el.append(createTag('div', { style: `background: ${options.borderBottom};`, class: 'border' })); @@ -129,4 +150,6 @@ export default function init(el) { decorateTextOverrides(el); el.querySelectorAll('a:not([class])').forEach((staticLink) => staticLink.classList.add('static')); if (el.matches(`:is(.${ribbon}, .${pill})`)) wrapCopy(blockText); -} +}; + +export default init; diff --git a/libs/utils/decorate.js b/libs/utils/decorate.js index 19f3845ec0..04d0bc618f 100644 --- a/libs/utils/decorate.js +++ b/libs/utils/decorate.js @@ -56,7 +56,8 @@ export function decorateBlockText(el, config = ['m', 's', 'm'], type = null) { if (headings) { headings.forEach((h) => h.classList.add(`heading-${config[0]}`)); if (config[2]) { - headings[0]?.previousElementSibling?.classList.add(`detail-${config[2]}`); + const prevSib = headings[0]?.previousElementSibling; + prevSib?.classList.toggle(`detail-${config[2]}`, !prevSib.querySelector('picture')); decorateIconArea(el); } } From 2ed1392553e3a4a02fccab341a485832b1fa8aff Mon Sep 17 00:00:00 2001 From: Elan Bartholomew Date: Mon, 12 Aug 2024 10:37:14 -0600 Subject: [PATCH 2/9] accounting for ribbon edge case --- libs/blocks/notification/notification.css | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/libs/blocks/notification/notification.css b/libs/blocks/notification/notification.css index ccdd780281..73380e28ea 100644 --- a/libs/blocks/notification/notification.css +++ b/libs/blocks/notification/notification.css @@ -453,12 +453,17 @@ gap: var(--spacing-m); } - .notification:is(.full-width, .ribbon) .foreground.container { + .notification:is(.full-width, .max-width-10-desktop) .foreground.container { + inline-size: unset; + } + + .notification.full-width .foreground.container { gap: var(--spacing-xl); + margin-inline: var(--grid-margins-width); } - .notification:is(.full-width, .max-width-10-desktop) .foreground.container { - inline-size: unset; + .notification.ribbon .foreground.container { + gap: var(--spacing-s); } .notification.max-width-10-desktop .foreground.container { @@ -467,10 +472,6 @@ max-inline-size: calc(var(--grid-column-width) * 10); } - .notification.full-width .foreground.container { - margin-inline: var(--grid-margins-width); - } - .notification .foreground.container > div { object-fit: cover; padding-inline-start: 0; From 34779dc22f2df19a15ccff7a3e276792e441ab4b Mon Sep 17 00:00:00 2001 From: Elan Bartholomew Date: Mon, 12 Aug 2024 11:07:43 -0600 Subject: [PATCH 3/9] update tests to an async context --- test/blocks/notification/notification.test.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/test/blocks/notification/notification.test.js b/test/blocks/notification/notification.test.js index 030e392001..77c4a9fa29 100644 --- a/test/blocks/notification/notification.test.js +++ b/test/blocks/notification/notification.test.js @@ -9,12 +9,14 @@ setConfig(conf); const mockBody = await readFile({ path: './mocks/body.html' }); const { default: init } = await import('../../../libs/blocks/notification/notification.js'); -describe('notification', () => { +describe('notification', async () => { let notifs; - beforeEach(() => { + beforeEach(async () => { document.body.innerHTML = mockBody; notifs = document.querySelectorAll('.notification'); - notifs.forEach((notif) => init(notif)); + notifs.forEach(async (notif) => { + await init(notif); + }); }); afterEach(() => { From 0422b75242a0b32a453921b38c09fcf0c05011e3 Mon Sep 17 00:00:00 2001 From: Elan Bartholomew Date: Mon, 12 Aug 2024 11:18:43 -0600 Subject: [PATCH 4/9] add lockup to test mock --- test/blocks/notification/mocks/body.html | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/test/blocks/notification/mocks/body.html b/test/blocks/notification/mocks/body.html index 8c3d47d61f..3685fe810f 100644 --- a/test/blocks/notification/mocks/body.html +++ b/test/blocks/notification/mocks/body.html @@ -380,4 +380,27 @@

Heading M 24/30

+
+
+
+ + + mock + +
+
+
+
+

+ + + mock + Photoshop +

+

Default heading M 24/30

+

Default body M 18/27. Default product icon L. Default button size L. See terms.

+

Action Action

+
+
+
From e32b877e7631d61220ef351b28aef7f4be6ff1ab Mon Sep 17 00:00:00 2001 From: Elan Bartholomew Date: Mon, 12 Aug 2024 11:34:42 -0600 Subject: [PATCH 5/9] improve test coverage --- test/blocks/notification/mocks/body.html | 46 ++++++++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/test/blocks/notification/mocks/body.html b/test/blocks/notification/mocks/body.html index 3685fe810f..8dedf20078 100644 --- a/test/blocks/notification/mocks/body.html +++ b/test/blocks/notification/mocks/body.html @@ -403,4 +403,50 @@

Default heading M 24/30

+
+
+
+ + + mock + +
+
+
+
+

+ + + mock + Photoshop +

+

Default heading M 24/30

+

Default body M 18/27. Default product icon L. Default button size L. See terms.

+

Action Action

+
+
+
+
+
+
+ + + mock + +
+
+
+
+

+ + + mock + Photoshop +

+

Default heading M 24/30

+

Default body M 18/27. Default product icon L. Default button size L. See terms.

+

Action Action

+
+
+
From 38e330d70c9dcf657d59f609c958946b41dc49cb Mon Sep 17 00:00:00 2001 From: Elan Bartholomew Date: Mon, 12 Aug 2024 14:57:29 -0600 Subject: [PATCH 6/9] improve logic readability --- libs/blocks/notification/notification.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/libs/blocks/notification/notification.js b/libs/blocks/notification/notification.js index 5eddd45065..50bca7e9a1 100644 --- a/libs/blocks/notification/notification.js +++ b/libs/blocks/notification/notification.js @@ -111,8 +111,11 @@ async function decorateLockup(lockupArea, el) { const icon = lockupArea.querySelector('picture'); const content = icon.nextElementSibling || icon.nextSibling; const label = createTag('span', { class: 'lockup-label' }, content.nodeValue || content); - if (content.nodeType === 3) lockupArea.replaceChild(label, content); - else lockupArea.appendChild(label); + if (content.nodeType === 3) { + lockupArea.replaceChild(label, content); + } else { + lockupArea.appendChild(label); + } lockupArea.classList.add('lockup-area'); const pre = el.className.match(/([xsml]+)-(lockup|icon)/); if (!pre) el.classList.add(`${el.matches('.pill') ? 'm' : 'l'}-lockup`); From 09b87e0acc01b89617fd2917b1bf5822963664c9 Mon Sep 17 00:00:00 2001 From: Elan Bartholomew Date: Tue, 13 Aug 2024 09:29:41 -0600 Subject: [PATCH 7/9] updates based on PR feedback --- libs/blocks/notification/notification.css | 6 +++--- libs/blocks/notification/notification.js | 8 +++----- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/libs/blocks/notification/notification.css b/libs/blocks/notification/notification.css index 73380e28ea..823d9fe1ea 100644 --- a/libs/blocks/notification/notification.css +++ b/libs/blocks/notification/notification.css @@ -10,10 +10,10 @@ --inline-size-pill: 85%; --border-block-size: 10px; --close-size: 20px; - --icon-size: 56px; - --icon-size-m: 40px; - --icon-size-s: 32px; --icon-size-xs: 24px; + --icon-size-s: 32px; + --icon-size-m: 40px; + --icon-size: 56px; --icon-size-xl: 64px; --pill-radius: 16px; diff --git a/libs/blocks/notification/notification.js b/libs/blocks/notification/notification.js index 50bca7e9a1..52787c2521 100644 --- a/libs/blocks/notification/notification.js +++ b/libs/blocks/notification/notification.js @@ -67,7 +67,7 @@ function getBlockData(el) { const variant = variants.find((varClass) => el.classList.contains(varClass)) || defaultVariant; const size = sizes.find((sizeClass) => el.classList.contains(sizeClass)) || defaultSize; const fontSizes = [...blockConfig[variant][size]]; - const buttonSize = el.className.match(/([xsml])+-button/); + const buttonSize = el.className.match(/([xsml]+)-button/); if (buttonSize) fontSizes.splice(3, 1, buttonSize[1]); return { fontSizes, options: { ...getOpts(el) } }; } @@ -142,7 +142,7 @@ async function decorateLayout(el) { return foreground; } -const init = async (el) => { +export default async function init(el) { el.classList.add('con-block'); const { fontSizes, options } = getBlockData(el); const blockText = await decorateLayout(el); @@ -153,6 +153,4 @@ const init = async (el) => { decorateTextOverrides(el); el.querySelectorAll('a:not([class])').forEach((staticLink) => staticLink.classList.add('static')); if (el.matches(`:is(.${ribbon}, .${pill})`)) wrapCopy(blockText); -}; - -export default init; +} From 3687d84f8f9e0ee283e0d789669fa08dd6fcbfaa Mon Sep 17 00:00:00 2001 From: Elan Bartholomew Date: Tue, 13 Aug 2024 16:42:45 -0600 Subject: [PATCH 8/9] remove .container selector --- libs/blocks/notification/notification.css | 138 +++++++++++----------- 1 file changed, 69 insertions(+), 69 deletions(-) diff --git a/libs/blocks/notification/notification.css b/libs/blocks/notification/notification.css index 823d9fe1ea..8916956107 100644 --- a/libs/blocks/notification/notification.css +++ b/libs/blocks/notification/notification.css @@ -57,7 +57,7 @@ margin-block-end: 0; } -.notification .foreground.container { +.notification .foreground { display: flex; position: relative; align-items: flex-start; @@ -68,32 +68,32 @@ justify-content: flex-start; } -.notification.ribbon .foreground.container { +.notification.ribbon .foreground { inline-size: 100%; margin-inline: var(--margin-inline-ribbon); margin-block: 0; padding-block: var(--spacing-s); } -.notification .foreground.container [data-align=center], -.notification.center .foreground.container, -.notification.center .foreground.container > * { +.notification .foreground [data-align=center], +.notification.center .foreground, +.notification.center .foreground > * { text-align: center; justify-content: center; } -.notification.pill .foreground.container { +.notification.pill .foreground { padding-inline: var(--spacing-xs) var(--spacing-xxs); padding-block: var(--spacing-xs) var(--spacing-xxs); margin: 0; inline-size: 100%; } -.notification.ribbon.xxs-padding .foreground.container { +.notification.ribbon.xxs-padding .foreground { padding-block: var(--spacing-xxs); } -.notification.ribbon.xs-padding .foreground.container { +.notification.ribbon.xs-padding .foreground { padding-block: var(--spacing-xs); } @@ -136,7 +136,7 @@ min-block-size: unset; } -.notification .foreground.container .text { +.notification .foreground .text { display: flex; flex-wrap: wrap; max-inline-size: none; @@ -144,23 +144,23 @@ padding-block-end: 0; } -.notification.pill .foreground.container .text { +.notification.pill .foreground .text { flex-direction: column; align-items: flex-start; text-align: start; inline-size: 100%; } -.notification.ribbon.space-between .foreground.container .text { +.notification.ribbon.space-between .foreground .text { flex-wrap: nowrap; inline-size: 100%; } -.notification.ribbon.space-between .foreground.container .copy-wrap { +.notification.ribbon.space-between .foreground .copy-wrap { margin-inline-end: var(--spacing-s); } -.notification .foreground.container .image { +.notification .foreground .image { position: relative; display: flex; inline-size: var(--inline-size-image); @@ -169,13 +169,13 @@ order: -1; } -.notification .foreground.container > div { +.notification .foreground > div { flex-grow: 1; flex-basis: 100%; min-inline-size: 0; } -.notification .foreground.container .text a { +.notification .foreground .text a { white-space: nowrap; } @@ -217,11 +217,11 @@ margin-block-start: var(--spacing-xs); } -.notification.center .foreground.container .action-area { +.notification.center .foreground .action-area { justify-content: center; } -.notification .foreground.container .icon-area { +.notification .foreground .icon-area { block-size: auto; max-inline-size: none; margin-block-end: var(--spacing-xs); @@ -229,48 +229,48 @@ display: flex; } -.notification .foreground.container .icon-area:not(.lockup-area) { +.notification .foreground .icon-area:not(.lockup-area) { gap: var(--spacing-xs); } -.notification.center .foreground.container .icon-area { +.notification.center .foreground .icon-area { justify-content: center; } -.notification.pill .foreground.container .icon-area { +.notification.pill .foreground .icon-area { margin-inline-end: 0; margin-block-end: var(--spacing-xs); inline-size: auto; } -.notification.ribbon.space-between .foreground.container .icon-area { +.notification.ribbon.space-between .foreground .icon-area { align-items: center; inline-size: auto; margin-inline-end: var(--spacing-xs); margin-block-end: 0; } -.notification .foreground.container .image :is(picture, video), -.notification .foreground.container .image picture img { +.notification .foreground .image :is(picture, video), +.notification .foreground .image picture img { inline-size: 100%; display: flex; } -.notification .foreground.container .text a:not(.con-button) { +.notification .foreground .text a:not(.con-button) { inline-size: auto; font-weight: normal; } -.notification .foreground.container .text .action-area > a { +.notification .foreground .text .action-area > a { margin-inline-end: 0; } -.notification .foreground.container .text .heading-l { +.notification .foreground .text .heading-l { margin-block-end: var(--spacing-xxs); } -.notification .foreground.container:not(.no-image) .text .body-s.action-area, -.notification .foreground.container:not(.no-image) .text .body-m.action-area { +.notification .foreground:not(.no-image) .text .body-s.action-area, +.notification .foreground:not(.no-image) .text .body-m.action-area { margin-block-end: 0; } @@ -285,12 +285,12 @@ margin-inline: auto; } -.notification.pill .foreground.container .action-area { +.notification.pill .foreground .action-area { justify-content: flex-end; flex-wrap: wrap; } -.notification.ribbon.space-between .foreground.container .action-area { +.notification.ribbon.space-between .foreground .action-area { flex-wrap: wrap; align-self: center; justify-content: flex-end; @@ -300,7 +300,7 @@ inline-size: 100%; } -.notification.pill .foreground.container .text > :not(.action-area) { +.notification.pill .foreground .text > :not(.action-area) { padding-inline-end: var(--spacing-xxs); inline-size: calc(100% - var(--spacing-xxs)); } @@ -315,11 +315,11 @@ --padding-inline-flexible: 80px; } - .notification:not(.pill, .ribbon) .foreground.container { + .notification:not(.pill, .ribbon) .foreground { max-inline-size: var(--max-inline-size-banner); } - .notification .foreground.container { + .notification .foreground { align-items: center; flex-direction: row; margin-block: 0; @@ -329,18 +329,18 @@ gap: var(--spacing-s); } - .notification:is(.full-width, .ribbon) .foreground.container { + .notification:is(.full-width, .ribbon) .foreground { max-inline-size: var(--full-width); margin-inline: var(--grid-margins-width); } - .notification .foreground.container .image { + .notification .foreground .image { margin: 0; padding: 0; order: unset; } - .notification .foreground.container .text.image { + .notification .foreground .text.image { justify-content: flex-start; } @@ -350,16 +350,16 @@ inset: 0; } - .notification .foreground.container .text { + .notification .foreground .text { margin-block-end: 0; padding-inline-end: 0; } - .notification .foreground.container .text + .image { + .notification .foreground .text + .image { margin-inline-end: 0; } - .notification .foreground.container .icon-area { + .notification .foreground .icon-area { inline-size: auto; margin-inline-end: var(--spacing-xs); margin-block-end: 0; @@ -370,7 +370,7 @@ inset-block: 0; } - .notification.ribbon .foreground.container .text { + .notification.ribbon .foreground .text { flex-flow: row nowrap; align-items: center; } @@ -395,24 +395,24 @@ text-align: start; } - .notification.pill .foreground.container { + .notification.pill .foreground { padding: var(--spacing-s); } - .notification.pill:not(.flexible) .foreground.container { - inline-size: var(--grid-container-width); + .notification.pill:not(.flexible) .foreground { + inline-size: var(--grid-width); } - .notification.pill .foreground.container .text { + .notification.pill .foreground .text { align-items: center; text-align: center; } - .notification.pill .foreground.container .action-area { + .notification.pill .foreground .action-area { justify-content: center; } - .notification.ribbon.space-between .foreground.container .action-area { + .notification.ribbon.space-between .foreground .action-area { flex-wrap: unset; } @@ -431,7 +431,7 @@ border-radius: var(--pill-radius); } - .notification.pill .foreground.container .text > :not(.action-area) { + .notification.pill .foreground .text > :not(.action-area) { padding-inline-end: unset; inline-size: unset; } @@ -447,64 +447,64 @@ --pill-radius: 36px; } - .notification:not(.pill, .ribbon) .foreground.container { - inline-size: calc(var(--grid-container-width) * (8 / 12)); + .notification:not(.pill, .ribbon) .foreground { + inline-size: calc(var(--grid-width) * (8 / 12)); margin-inline: var(--grid-margins-width-8); gap: var(--spacing-m); } - .notification:is(.full-width, .max-width-10-desktop) .foreground.container { + .notification:is(.full-width, .max-width-10-desktop) .foreground { inline-size: unset; } - .notification.full-width .foreground.container { + .notification.full-width .foreground { gap: var(--spacing-xl); margin-inline: var(--grid-margins-width); } - .notification.ribbon .foreground.container { + .notification.ribbon .foreground { gap: var(--spacing-s); } - .notification.max-width-10-desktop .foreground.container { + .notification.max-width-10-desktop .foreground { margin-inline: var(--grid-margins-width-10); gap: var(--spacing-l); max-inline-size: calc(var(--grid-column-width) * 10); } - .notification .foreground.container > div { + .notification .foreground > div { object-fit: cover; padding-inline-start: 0; } - .notification .foreground.container .icon-area { + .notification .foreground .icon-area { max-inline-size: var(--max-inline-size-icon); margin-inline-end: var(--spacing-s); } - .notification .foreground.container .lockup-area { + .notification .foreground .lockup-area { max-inline-size: none; } - .notification.ribbon .foreground.container .icon-area { + .notification.ribbon .foreground .icon-area { flex-shrink: 0; } - .notification .foreground.container .image { + .notification .foreground .image { inline-size: var(--inline-size-image); } - .notification.max-width-10-desktop .foreground.container .image { + .notification.max-width-10-desktop .foreground .image { inline-size: var(--inline-size-image); max-inline-size: var(--max-inline-size-image-10); } - .notification.full-width .foreground.container .image { + .notification.full-width .foreground .image { inline-size: var(--inline-size-image-full); max-inline-size: var(--max-inline-size-image-full); } - .notification .foreground.container .text + .image { + .notification .foreground .text + .image { margin-inline-end: 0; } @@ -524,7 +524,7 @@ margin-block-end: 0; } - .notification.pill .foreground.container .text [class*="heading-"] { + .notification.pill .foreground .text [class*="heading-"] { margin-inline-end: var(--spacing-xxs); margin-block-end: 0; } @@ -534,21 +534,21 @@ inset-block: 0; } - .notification.pill .foreground.container { + .notification.pill .foreground { padding-block: var(--spacing-xs); padding-inline: var(--spacing-m); margin: 0; } - .notification.pill:not(.flexible) .foreground.container { + .notification.pill:not(.flexible) .foreground { inline-size: calc(100% - var(--margin-inline-pill-desktop) * 2); } - .notification.pill.flexible .foreground.container { + .notification.pill.flexible .foreground { padding-inline: 0; } - .notification.pill .foreground.container .icon-area { + .notification.pill .foreground .icon-area { margin-inline-end: var(--spacing-xs); margin-block-end: 0; } @@ -557,11 +557,11 @@ max-block-size: var(--icon-size-m); } - .notification.pill .foreground.container .action-area { + .notification.pill .foreground .action-area { margin-inline-start: var(--spacing-s); } - .notification.pill .foreground.container .text { + .notification.pill .foreground .text { flex-flow: row nowrap; align-items: center; justify-content: center; @@ -582,7 +582,7 @@ max-inline-size: 100%; } - .notification.ribbon.space-between .foreground.container .icon-area { + .notification.ribbon.space-between .foreground .icon-area { margin-inline-end: var(--spacing-s); } } From a2920f4a3622e59907f335601de8b37050ee39b0 Mon Sep 17 00:00:00 2001 From: Elan Bartholomew Date: Tue, 13 Aug 2024 16:58:43 -0600 Subject: [PATCH 9/9] change full-width to max-width-12-desktop --- libs/blocks/notification/notification.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/libs/blocks/notification/notification.css b/libs/blocks/notification/notification.css index 8916956107..0dff835631 100644 --- a/libs/blocks/notification/notification.css +++ b/libs/blocks/notification/notification.css @@ -329,7 +329,7 @@ gap: var(--spacing-s); } - .notification:is(.full-width, .ribbon) .foreground { + .notification:is(.max-width-12-desktop, .ribbon) .foreground { max-inline-size: var(--full-width); margin-inline: var(--grid-margins-width); } @@ -453,11 +453,11 @@ gap: var(--spacing-m); } - .notification:is(.full-width, .max-width-10-desktop) .foreground { + .notification:is(.max-width-12-desktop, .max-width-10-desktop) .foreground { inline-size: unset; } - .notification.full-width .foreground { + .notification.max-width-12-desktop .foreground { gap: var(--spacing-xl); margin-inline: var(--grid-margins-width); } @@ -499,7 +499,7 @@ max-inline-size: var(--max-inline-size-image-10); } - .notification.full-width .foreground .image { + .notification.max-width-12-desktop .foreground .image { inline-size: var(--inline-size-image-full); max-inline-size: var(--max-inline-size-image-full); }