Features

• assets: Update @mozilla-protocol/assets to 6.1.1
• css: Footer changes: spacing, colour, font size. (#1063)

Bug Fixes

• css: Button link focus styling doesn't override inherited visited link styling (#842)

Migration Tips

• Un-customized implementations of the footer will not break. If you have made customizations review it at all breakpoints.

Features

• assets: (breaking) Update @mozilla-protocol/assets to 6.0.1
• css: Update navigation and footer with Mozilla logo lockup.

Bug Fixes

• css: Notification bar padding of links only working for complete sentences (#1000)
• css: Missing explicit mzp-c-notification-bar-cta distinction (#1041)
• css: Fix logo size in navigation in Firefox variant on large screen

Migration Tips

• The new Mozilla wordmark files are the same height but longer. If you are explicitly declaring a width for them, you should update it (Tip: check your CSS background images too.)
• The flat logo files are no longer square, so check their dimensions too (social files remain square)

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)
• css: Apply hover cursor from Details component to Details element (#948)
• 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, 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

Features

• js: Migrate tests from Karma to Jasmine browser runner (#899)

Bug Fixes

• css: Form select elements don't match styling when disabled (#885)
• css: Modal close button pointer overridden by defaults (#955)

Features

• component: Add Firefox Klar wordmark for the Wordmark component (#932)
• js: Migrate ESLint to use flat config file (#906)

Features

• component: Remove the format option from Newsletter component (#926)
• component: Allow an optional icon in buttons (#893)

Features

• component: Remove deprecated Picto Card component.
• component: Remove deprecated Hero component. (#912)
• component: Refactor and rename the Callout component (previously Call-out) (#787)
• component: Remove Compact Call-out as a separate component. It's now just a variant of the updated Callout.
• js: Update newsletter component to include JS to post directly to Basket (#839).
• css: Add CSS utility class for centered text and document existing title utility classes (#897).

Bug Fixes

• css: Fix incorrect value for text-body-lg in Firefox theme.
• js: Fix typo at lang-switcher.js comment
• css: Center-align button text (#826)

Migration Tips

• Rename instances of mzp-c-call-out to mzp-c-callout (note the removed dash).
• Replace instances of Compact Call-out with the compact variant of Callout (class="mzp-c-callout mzp-l-compact").
• Update references to the call-out SCSS file to callout in any @import or @use rules.
  ** e.g. @use 'components/call-out'; should change to @use 'components/callout';
• The rebuilt Callout doesn't feature integrated brand logos. Use Logo and Wordmark components instead.
• The rebuilt Compact Callout lacks an integrated logo, so it no longer positions the logo at one end of the component. A Logo or Wordmark component should appear in the body instead.
• Convert any instances of the Hero component to either Split or Callout.
• Convert any instances of the Picto Card component to Picto.

What's Changed

• css: Replace get-theme, type-scale functions and theme and type-scale maps with CSS Custom Properties. Sass variables added for legacy support
• css: Migrates the sass @import with @use and @forward (#755).

Migration Tips

• This version updates how we internally import SCSS files, from the @import syntax to @use and @forward
• When importing lib at the head of your project you will use the with keyword instead of
  stating variables explicitly, like this:

@use '/assets/sass/protocol/includes/lib' with ($font-path: '/protocol/fonts');

• To use the global namespace for protocol variables you will need to use the as keyword and assign to *:

@use '../includes/lib' as *;

• if you don't use as you would access variables and mixins from the file using the filename as a namespace:

@use '../includes/lib';

.mzp-c-item {
    @include lib.text-title-md;
    color: lib.$color-ink-80;
    margin: lib.$spacing-lg 0;
}

• For more information on the @use and @forward you can visit the offical SCSS documentation or the usage page on the Protocol documentation website

• This version also moves from using the get-theme function to using css custom properties. A future version of protocol will depreciate both the get-theme and type-scale functions.

• To migrate from get-theme or type-scale to CSS custom properties, follow this pattern:

• From this:

.mzp-t-dark {
  background-color: get-theme('background-color-inverse');
  color: get-theme('body-text-color-inverse');
  line-height: type-scale('body-line-height');
}

• to this:
• (Note: if you need to support legacy browsers, place the CSS custom properties in a @supports flag and use sass variables as a fall back. Legacy browsers will always be served the default theme.)

.mzp-t-dark {
  background-color: $background-color-inverse;
  color: $body-text-color-inverse;
  line-height: $body-line-height;

  @supports (--css: variables) {
    background-color: var(--background-color-inverse);
    color: var(--body-text-color-inverse);
    line-height: var(--body-line-height);
  }
}

• For more information on CSS custom properties you can visit MDN's documentation or the framework page Protocol's documentation website.

Bug Fixes

• js: MzpDetails component should be explicitly initialized (Fixes #879)

Breaking changes ⚠️

• Protocol JS components are now published in UMD format for easier consumption. They can now be imported directly using common build tools such as Webpack (see the docs), but are still available as a global variable for sites that need it. There's no longer a global window.Mzp.* name space however, so in your code window.Mzp.Notification should now become window.MzpNotification (as an example).
• We no longer publish pre-minified CSS and JS files in the NPM package. If you want minified assets, then it is now your responsibility to take care of that in your site's build process.

Bug Fixes

• js: Moves the aria-expanded attribute to the mzp-c-navigation-menu-button (#860).
• css: Remove default mobile padding on nospace split component (#875).
• css: Removed min-width on the .mzp-c-split-container class on the split component (#843).

Features

• js: Protocol JS components are now written using modern JS and published as ES5/UMD format (#255).
• js: Removed pre-minified JS files from the published package (#255).
• css: Removed pre-minified CSS files from the published package (#255).