Upgrade to 4.x

Base theme updates

Upgrade Bolt dependencies to 4.x

I found Bolt dependencies in the following files in pega_bolt_theme:

• pega_bolt_theme/packages/build-tools/bolt-compile/package.json
• pega_bolt_theme/packages/components/components-form-validation/package.json

Site-specific theme updates

Note: Before beginning the 4.x upgrade, first update linting in your sub theme.

Breaking component changes

v4.0.0 contains breaking changes to Navbar and Card Replacement. Button and Link components have been deprecated (non-breaking change).

See the release notes for more information on how to upgrade these components.

Upgrade Bolt

fin composer require pega/bolt-release:^4.0.0 (use latest 4.x.x version)

Upgrade Pega Bolt

fin composer require pega/pega_bolt:dev-8.x-4.x

Upgrade Base Theme

fin composer require pega/pega_bolt_theme:dev-8.x-4.x

Upgrade pega_sso module

fin composer require pega/pega_sso:dev-8.x-2.x

Upgrade bolt_connect, with dependencies

fin composer require bolt-design-system/bolt_connect:^4.0 --with-dependencies

Upgrade any Bolt dependencies in theme

• Search site-specific theme for @bolt/ to find Bolt dependencies still using ^3.x.x.
• Update all of these to ^4.x.x. The latest version for most packages is 4.0.0. See npm (example) for the exact version number of your package.
• A common dependency is @bolt/core-v3.x. Update that like so:

-    "@bolt/core-v3.x": "^3.1.1"
+    "@bolt/core-v3.x": "^4.0.0"

Rebuild front-end

Either use your site's makefiles or manually run the following:

• cd docroot/themes/custom/YOUR_THEME
• fin exec yarn install --force
• fin exec yarn gulp
• fin drush cr

New header

The 4.x branch of pega_bolt_theme uses the new header (now based in Bolt). Pulling in the latest version of pega_bolt_theme and the pega_sso module should handle most of this automatically, but you should check after updating to confirm that your header matches the site-specific mockup in Bolt (for example, this page for Academy, this page for Community, etc). If it does not, or you have questions, please ask Mike or Remy.

Some classes that were previously added to menu links to make visual changes via the authoring interface (e.g. c-mega-nav__wrap and c-mega-nav__blue-link) will automatically be converted to the new version of these classes (in the same examples, c-bolt-page-header__nav-list-item--full-width and c-bolt-page-header__nav-list-item--view-all, respectively-- note that both of these classes should be added to the <li> element, not the <a>). These should ideally be manually updated to the new versions as part of deployment.