Rename component -title/-subtitle classes to -heading/-subheading (#668) - #1136
Draft
stephaniehobson wants to merge 1 commit into
Draft
stephaniehobson wants to merge 1 commit into
stephaniehobson wants to merge 1 commit into
Conversation
Finishes the component-class half of the title -> heading rename that #1107 deferred ("component HTML/CSS classes will follow in a separate PR") -- the branch that originally held this work no longer exists, so this redoes it against current main. Mixins, utility classes, and CSS vars were already renamed in #1107; this covers the remaining 12 component-level BEM classes across Article, Billboard, Callout, Card, Form, Menu, Menu Item, Menu List, Newsletter, Sidebar Menu, and Sticky Promo: mzp-c-menu-title -> mzp-c-menu-heading mzp-c-form-title -> mzp-c-form-heading mzp-c-form-subtitle -> mzp-c-form-subheading mzp-c-card-title -> mzp-c-card-heading mzp-c-menu-item-title -> mzp-c-menu-item-heading mzp-c-callout-title -> mzp-c-callout-heading mzp-c-sticky-promo-title -> mzp-c-sticky-promo-heading mzp-c-newsletter-title -> mzp-c-newsletter-heading mzp-c-menu-list-title -> mzp-c-menu-list-heading mzp-c-sidemenu-title -> mzp-c-sidemenu-heading mzp-c-billboard-title -> mzp-c-billboard-heading mzp-c-article-title -> mzp-c-article-heading Clean break, no aliases, per the naming issue's own note that this is a breaking rename (#668). Also: - Renamed the two already-heading-only-content files that still had the stale filename: base/elements/_titles.scss and base/utilities/_titles.scss -> _headings.scss (updated their @use sites and kept the alphabetical @use ordering in _elements.scss and protocol.scss) - Renamed the forms/07-titles component directory and titles.html to 07-headings/headings.html; reworded its readme, which still said "titles (aka headings)" - Updated the 8 .mzp-c-menu-title selectors in assets/js/protocol/menu.js - Fixed tests/unit/menu.js's fixture markup, which still built a .mzp-c-menu-title element -- missed by a first pass that only searched assets/ and components/ - Extended docs/02-usage/migration.md with find/replace recipes for this rename, matching the existing style docs/03-contributing/02-naming.md's example already used -heading/-desc and needed no change here. Verified: npm run lint, npm test (47 specs, Firefox + Chrome), npm run build-docs (523 items, no errors -- confirmed the renamed forms/headings component renders with the new classes), and npm run build-package all pass.
There was a problem hiding this comment.
🟡 Changes recommended
A few updated files still contain inconsistencies with established repo conventions (e.g., Sass declaration ordering and outdated “title” terminology in nearby comments/identifiers) that should be corrected before merging.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
This PR completes the “component class” portion of the -title → -heading rename across Protocol’s component templates, component Sass, and the menu JS behavior, plus adds migration guidance for consumers.
Changes:
- Renamed component CSS classes from
*-title/*-subtitleto*-heading/*-subheadingacross relevant Nunjucks templates and Sass component styles. - Updated
assets/js/protocol/menu.jsand its unit tests to use the new.mzp-c-menu-headingselector. - Added migration doc “find/replace” recipes and updated Sass base imports to use
headingsinstead oftitles.
File summaries
| File | Description |
|---|---|
| tests/unit/menu.js | Updates fixture markup and selectors to .mzp-c-menu-heading for menu behavior tests. |
| docs/02-usage/migration.md | Adds consumer-facing find/replace recipes for component class renames. |
| components/sticky-promo/sticky-promo.html | Renames sticky promo title class to heading in template markup. |
| components/sidebar-menu/sidebar-menu.html | Renames sidemenu title class to heading in template markup. |
| components/newsletter/newsletter.html | Renames newsletter title class to heading in template markup. |
| components/newsletter/newsletter--success.html | Renames newsletter title class to heading in success variant markup. |
| components/newsletter/newsletter--errors.html | Renames newsletter title class to heading in error variant markup. |
| components/navigation/03-menu-item/menu-item.html | Renames menu-item title class to heading in component markup. |
| components/navigation/02-menu/menu.html | Renames menu title class to heading in menu markup examples. |
| components/menu-list/menu-list.html | Renames menu-list title class to heading and updates MzpDetails.init() selector. |
| components/forms/example-form/example-form.html | Updates form header and legend classes to heading/subheading. |
| components/forms/12-form-header/form-header.html | Updates form header title class to heading. |
| components/forms/07-titles/titles.html | Removes the old “titles” example markup. |
| components/forms/07-titles/readme.md | Removes the old “titles” documentation. |
| components/forms/07-headings/readme.md | Adds replacement documentation for form headings/subheadings. |
| components/forms/07-headings/headings.html | Adds replacement example markup for form headings/subheadings. |
| components/card/card.html | Renames card title class to heading in template markup. |
| components/callout/callout.html | Renames callout title class to heading in template markup. |
| components/callout/callout--example.html | Renames callout title class to heading in example markup. |
| components/billboard/billboard.html | Renames billboard title class to heading in template markup. |
| components/article/article.html | Renames article title class to heading in template markup. |
| assets/sass/protocol/protocol.scss | Switches base utilities import from titles to headings. |
| assets/sass/protocol/components/forms/_form.scss | Renames form title/subtitle selectors to heading/subheading. |
| assets/sass/protocol/components/_sticky-promo.scss | Renames sticky promo title selectors to heading in component styles. |
| assets/sass/protocol/components/_sidebar-menu.scss | Renames sidemenu title selector to heading in component styles. |
| assets/sass/protocol/components/_newsletter-form.scss | Renames newsletter title selector to heading in component styles. |
| assets/sass/protocol/components/_menu.scss | Renames menu title selectors to heading in component styles. |
| assets/sass/protocol/components/_menu-list.scss | Renames menu-list title selectors to heading in component styles. |
| assets/sass/protocol/components/_menu-item.scss | Renames menu-item title selectors to heading in component styles. |
| assets/sass/protocol/components/_card.scss | Renames card title selectors to heading in component styles. |
| assets/sass/protocol/components/_callout.scss | Renames callout title selectors to heading in component styles. |
| assets/sass/protocol/components/_billboard.scss | Renames billboard title selectors to heading in component styles. |
| assets/sass/protocol/components/_article.scss | Renames article title selector to heading in component styles. |
| assets/sass/protocol/base/utilities/_headings.scss | Updates base utility file naming/commenting for heading utilities. |
| assets/sass/protocol/base/elements/_headings.scss | Adds/renames base element styling for h1–h6 under headings. |
| assets/sass/protocol/base/_elements.scss | Switches base element import from titles to headings. |
| assets/js/protocol/menu.js | Updates menu behavior selectors from .mzp-c-menu-title to .mzp-c-menu-heading. |
Review details
- Files reviewed: 36/37 changed files
- Comments generated: 6
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| @@ -157,7 +157,7 @@ | |||
| // Card with larger title | |||
| } | ||
|
|
||
| .mzp-c-card-title { | ||
| .mzp-c-card-heading { |
| @@ -55,8 +55,8 @@ | |||
| } | |||
|
|
|||
| // Title | |||
| @@ -71,15 +71,15 @@ legend.mzp-c-form-title { | |||
| } | |||
|
|
|||
| // Subtitle | |||
Comment on lines
103
to
105
| const item = document.querySelector('.mzp-c-menu-category.mzp-has-drop-down'); | ||
| const title = document.querySelector('.mzp-c-menu-category.mzp-has-drop-down .mzp-c-menu-title'); | ||
| const title = document.querySelector('.mzp-c-menu-category.mzp-has-drop-down .mzp-c-menu-heading'); | ||
|
|
Comment on lines
162
to
165
| it('should expand and collapse on click', function() { | ||
| const item = document.querySelector('.mzp-c-menu-category.mzp-has-drop-down'); | ||
| const title = document.querySelector('.mzp-c-menu-category.mzp-has-drop-down .mzp-c-menu-title'); | ||
| const title = document.querySelector('.mzp-c-menu-category.mzp-has-drop-down .mzp-c-menu-heading'); | ||
|
|
stephaniehobson
added this pull request to stack #1151
September 11, 2026 21:44
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Finishes the component-class half of the title -> heading rename that #1107 deferred.
Issue
#668
Testing
CHANGELOG.md.