Features

• assets: (breaking) Updated @mozilla-protocol/assets to 7.0.2
• tokens: (breaking) Updated @mozilla-protocol/tokens to 7.0.0
• css: Updated button styles to match Mozilla brand refresh (#1046)
• component: Added sizing and icon support to CTA link component (#1083)
• component: Added mzp-u-rich-text utility class to add back list and table styles (#1079)
• docs: Added a new utility class section to docs.
• component: Updated breadcrumb styles (#1036)
• css: Updated line height variables for Mozilla theme to reflect guidance published in the brand portal.
• css: Removed :hover:visited styles & decreased base link specificity (#1071)

Bug Fixes

• css: Breadcrumbs are wider than other site content (#933)
• js: MzpNavigation doesn't check for MzpSupports availability correctly (#1085)

Migration Tips

• Rich text utility
  • If you have previously created a class to add back list and table styling to rich text fields you may be able to swap it out for the new component.
  • This component currently styles h2-h4, ul, ol, dl, table, and pre. If you need more elements please create an issue.
• Breadcrumb updates do not require any changes unless you have local customizations.
• Icon updates
  • Icons used internally with Protocol components have been updated but any icons used in consumer projects will have to consider the following:
  • New and updated icons have intrinsic width of 16x16 instead of 24x24. If you were relying on SVG width and height attributes for sizing, you may need to update by CSS sizing.
  • Updated icons are still square but do not have padding around the icon. This is particularly noticeable with menu and arrows. If you were relying on the icon for spacing, you may need to update to re-add that spacing through CSS.
  • Icons formerly known as "arrow" are now known as "caret" and there are new icon designs for "arrow" name. You will need to update naming to keep the "caret" design.
  • Find and replace $url-image-arrow-down- with $url-image-caret-down-
• Mozilla brand color updates
  • consumer projects will have to update any use of deprecated Mozilla brand colors to the new palettes
• Remove :hover:visited styles & decrease base link specificity (#1071)
  • This will decrease the specificity of Protocol's link and button components, hopefully making local overrides easier, no need to change anything you already have in place.
  • Removal of :link pseudo classes in some places will mean that <a> elements which do not have a href value could now have link styles when previously they would not have. But, like, maybe don't do that?
  • Removed :visited styles for .mzp-c-button they should match unvisited styles, if you have :visited styles defined check they are still legible without the expected inherited styles.
  • Removed the text colour change from :focus styles. Rely on the focus ring for a focus indicator instead.

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)