From 7027f10ddad271f853f11b7e7549b595280ec064 Mon Sep 17 00:00:00 2001 From: Jan Brasna <1784648+janbrasna@users.noreply.github.com> Date: Tue, 18 Mar 2025 17:08:45 +0100 Subject: [PATCH 1/9] Fix notification-bar link spacing --- assets/sass/protocol/components/_notification-bar.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/assets/sass/protocol/components/_notification-bar.scss b/assets/sass/protocol/components/_notification-bar.scss index 6e8ab45bc..bd9e8858d 100644 --- a/assets/sass/protocol/components/_notification-bar.scss +++ b/assets/sass/protocol/components/_notification-bar.scss @@ -35,7 +35,6 @@ display: inline-block; font-size: inherit; font-weight: 700; - margin: 0 $spacing-sm; &:hover, &:active, From 49917bbcd827ecacc5569d171716911b509c3f9f Mon Sep 17 00:00:00 2001 From: Jan Brasna <1784648+janbrasna@users.noreply.github.com> Date: Tue, 18 Mar 2025 17:21:19 +0100 Subject: [PATCH 2/9] Update CHANGELOG --- CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 141050ad8..884c42df0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,8 +4,9 @@ ## Bug Fixes +* **css:** Notification bar padding of links only works for complete sentences (#1000) * **assets:** Update @mozilla-protocol/assets to 5.4.0 - + ## Migration Tips * See notes for [Protocol Assets 5.4.0](https://github.com/mozilla/protocol-assets/blob/main/CHANGELOG.md#540) From 22f2419a14884f69ddc7057f90180537e0edbed1 Mon Sep 17 00:00:00 2001 From: Jan Brasna <1784648+janbrasna@users.noreply.github.com> Date: Tue, 18 Mar 2025 17:24:07 +0100 Subject: [PATCH 3/9] Whitespace --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 884c42df0..30564da41 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,7 +6,7 @@ * **css:** Notification bar padding of links only works for complete sentences (#1000) * **assets:** Update @mozilla-protocol/assets to 5.4.0 - + ## Migration Tips * See notes for [Protocol Assets 5.4.0](https://github.com/mozilla/protocol-assets/blob/main/CHANGELOG.md#540) From 54c24e45c680b6d0eb1cc8747b904fce0a90dec3 Mon Sep 17 00:00:00 2001 From: Jan Brasna <1784648+janbrasna@users.noreply.github.com> Date: Tue, 18 Mar 2025 18:26:23 +0100 Subject: [PATCH 4/9] Move MzpNotification cta to the paragraph with title --- assets/js/protocol/notification-bar.js | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/assets/js/protocol/notification-bar.js b/assets/js/protocol/notification-bar.js index 9f77b0d33..32703754d 100644 --- a/assets/js/protocol/notification-bar.js +++ b/assets/js/protocol/notification-bar.js @@ -36,20 +36,17 @@ MzpNotification.init = (origin, opts) => { const className = (options && options.className) ? options.className : ''; const closeText = (options && options.closeText) ? options.closeText : ''; const isSticky = (options && options.isSticky) ? 'mzp-is-sticky' : ''; - const ctaOptions = options && options.cta ? options.cta : {}; + const ctaOptions = (options && options.cta) ? options.cta : {}; const notification = document.createElement('aside'); notification.className = 'mzp-c-notification-bar ' + className + ' ' + isSticky; - // Notification Title - - if (options && options.title){ + const notificationContent = document.createElement('p'); + notification.appendChild(notificationContent); - const notificationTitle = document.createElement('p'); - notificationTitle.appendChild(title); - - // add title to notification - notification.appendChild(notificationTitle); + // Notification Title + if (options && options.title) { + notificationContent.appendChild(title); } // Notification CTA link @@ -67,7 +64,7 @@ MzpNotification.init = (origin, opts) => { for (key in ctaAttrs){ ctaAnchor.setAttribute(key, ctaAttrs[key]); } - notification.appendChild(ctaAnchor); + notificationContent.appendChild(ctaAnchor); } // Notification Fragment From 151033aaffe6b733f7195acb8f2bf934e06bb4c7 Mon Sep 17 00:00:00 2001 From: Jan Brasna <1784648+janbrasna@users.noreply.github.com> Date: Tue, 18 Mar 2025 19:56:10 +0100 Subject: [PATCH 5/9] Add space after title --- assets/js/protocol/notification-bar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/js/protocol/notification-bar.js b/assets/js/protocol/notification-bar.js index 32703754d..85ade0536 100644 --- a/assets/js/protocol/notification-bar.js +++ b/assets/js/protocol/notification-bar.js @@ -32,7 +32,7 @@ MzpNotification.init = (origin, opts) => { } // Create new notification - const title = document.createTextNode(options.title); + const title = document.createTextNode(options.title + ' '); const className = (options && options.className) ? options.className : ''; const closeText = (options && options.closeText) ? options.closeText : ''; const isSticky = (options && options.isSticky) ? 'mzp-is-sticky' : ''; From 2290a102aecd880fb0381840cf7c7a9cdf8a93f3 Mon Sep 17 00:00:00 2001 From: Jan Brasna <1784648+janbrasna@users.noreply.github.com> Date: Tue, 18 Mar 2025 22:44:47 +0100 Subject: [PATCH 6/9] Add inline link to mzp-t-warning example --- components/notification-bar/notification-bar.config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/notification-bar/notification-bar.config.yml b/components/notification-bar/notification-bar.config.yml index 279dc6f51..b24d31dc7 100644 --- a/components/notification-bar/notification-bar.config.yml +++ b/components/notification-bar/notification-bar.config.yml @@ -19,7 +19,7 @@ variants: context: class: mzp-t-warning close_button: True - content: Warning! It's dangerous to go alone. + content: Warning! It’s dangerous to go alone. - name: Error notes: Use the class `mzp-t-error` for a negative notification, to indicate an unsuccessful action. This example also features an action link. From 89d487180b4dd53e8985ee3e5bd4592b5b99bbc3 Mon Sep 17 00:00:00 2001 From: Jan Brasna <1784648+janbrasna@users.noreply.github.com> Date: Tue, 18 Mar 2025 23:21:36 +0100 Subject: [PATCH 7/9] Add explicit mzp-c-notification-bar-cta --- assets/sass/protocol/components/_notification-bar.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/assets/sass/protocol/components/_notification-bar.scss b/assets/sass/protocol/components/_notification-bar.scss index bd9e8858d..209618168 100644 --- a/assets/sass/protocol/components/_notification-bar.scss +++ b/assets/sass/protocol/components/_notification-bar.scss @@ -42,6 +42,10 @@ color: inherit; text-decoration: none; } + + &.mzp-c-notification-bar-cta { + margin: 0 $spacing-sm; + } } &.mzp-is-sticky { From 2f3c4f8c18ad785bfa4088e25b36e4091940d684 Mon Sep 17 00:00:00 2001 From: Jan Brasna <1784648+janbrasna@users.noreply.github.com> Date: Tue, 18 Mar 2025 23:30:12 +0100 Subject: [PATCH 8/9] Remove extra whitespace with cta styles taking place --- assets/js/protocol/notification-bar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/js/protocol/notification-bar.js b/assets/js/protocol/notification-bar.js index 85ade0536..32703754d 100644 --- a/assets/js/protocol/notification-bar.js +++ b/assets/js/protocol/notification-bar.js @@ -32,7 +32,7 @@ MzpNotification.init = (origin, opts) => { } // Create new notification - const title = document.createTextNode(options.title + ' '); + const title = document.createTextNode(options.title); const className = (options && options.className) ? options.className : ''; const closeText = (options && options.closeText) ? options.closeText : ''; const isSticky = (options && options.isSticky) ? 'mzp-is-sticky' : ''; From ff9c4ae32b937806989b72e79409691de8df93b3 Mon Sep 17 00:00:00 2001 From: Jan Brasna <1784648+janbrasna@users.noreply.github.com> Date: Tue, 18 Mar 2025 23:45:45 +0100 Subject: [PATCH 9/9] Update CHANGELOG --- CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 30564da41..0c4a5058c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,7 +4,8 @@ ## Bug Fixes -* **css:** Notification bar padding of links only works for complete sentences (#1000) +* **css:** Notification bar padding of links only working for complete sentences (#1000) +* **css:** Missing `mzp-c-notification-bar-cta` explicit distinguishing (#1041) * **assets:** Update @mozilla-protocol/assets to 5.4.0 ## Migration Tips