Bump @mozilla-protocol/core from 20.0.0 to 22.0.0

[dependabot]

Bumps @mozilla-protocol/core from 20.0.0 to 22.0.0.

Release notes

Sourced from @​mozilla-protocol/core's releases.

v22.0.0

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.

v21.1.0

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

... (truncated)

Changelog

Sourced from @​mozilla-protocol/core's changelog.

22.0.0

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.

21.1.0

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)

... (truncated)

Commits

• 054482e Publish V22
• 571aa4a Update button styles to match Mozilla brand refresh (#1046) (#1094)
• 81e6c70 Pin sass at 1.91.0 until mozilla/protocol#982 (#1095)
• 8c2a9cc Update protocol tokens and assets (#1092)
• d0fd6c5 Add rich text component (Fix #1079) (#1081)
• 09b9ae0 Adjust line heights to match brand guidelines (#1080)
• 29d0081 Fix typeof check for MzpSupports in navigation (#1087)
• 111a12b Remove :hover:visited styles and decrease base link specificity (Fix #1071) (...
• d18c956 Bump the frontend group with 5 updates (#1067)
• e41da4f Update protocol assets (#1073)
• Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

---

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

• @dependabot rebase will rebase this PR
• @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
• @dependabot merge will merge this PR after your CI passes on it
• @dependabot squash and merge will squash and merge this PR after your CI passes on it
• @dependabot cancel merge will cancel a previously requested merge and block automerging
• @dependabot reopen will reopen this PR if it is closed
• @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
• @dependabot show <dependency name> ignore conditions will show all of the ignore conditions of the specified dependency
• @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)