diff --git a/CHANGELOG.md b/CHANGELOG.md index cd8ed03ec..274d8a43f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,14 @@ +# HEAD + +## Bug Fixes + +* **css:** Notification bar padding of links only working for complete sentences (#1000) +* **css:** Missing explicit `mzp-c-notification-bar-cta` distinction (#1041) + # 20.0.0 ## Features + * **fonts:** (breaking) Adds rebrand fonts, Mozilla Headline and Mozilla Text. Removes outdated Mozilla Brand font, Zilla Slab. New fonts will only support `woff2` format to simplify maintenance. * **fonts:** Upgrade Inter font to version 4.1, drop WOFF 1.0 format (#1026) * **css:** Add `text-wrap: balance` to all headings (#910) @@ -8,6 +16,7 @@ * **assets:** Update @mozilla-protocol/assets to 5.4.0 ## Migration Tips + * **fonts:** Any use of `font-mozilla` mixin should be replaced with `font-mozilla-headline`. NOTE: we recommend `font-mozilla-headline` only for text over 24px (below should be `font-mozilla-text`) * Headings are now [balanced](https://developer.mozilla.org/docs/Web/CSS/text-wrap-style#balanced_text), which can impact other wrapping rules. Make sure any changes to `h1`–`h6` rendering end up styled as expected, especially if you apply any `white-space`, `word-break` or `hyphens` customizations. * See notes for [Protocol Assets 5.4.0](https://github.com/mozilla/protocol-assets/blob/main/CHANGELOG.md#540) 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 diff --git a/assets/sass/protocol/components/_notification-bar.scss b/assets/sass/protocol/components/_notification-bar.scss index 6e8ab45bc..209618168 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, @@ -43,6 +42,10 @@ color: inherit; text-decoration: none; } + + &.mzp-c-notification-bar-cta { + margin: 0 $spacing-sm; + } } &.mzp-is-sticky { 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.