New New Components / Major New Features

• New Carousel Component 🎉 #1164 and #1165
• New Modal component: New bolt-modal component added to display dialogs for custom content. 🎉 #1139
• New Accordion component Accordion component added with demos, docs and tests. 🎉 #1159
• New Stack component: Created the bolt-stack component to handle vertical spacing. #1161
• Table component: Converted the existing <bolt-table> component to now be a full blown web component! 🎉 #1138

Component Updates & Enhancements

• Form component: added a new showerrors event listener to allow form inputs to auto-display input errors by emitting a showerrors custom Javascript event. #1177
• Tooltip component: Converted the original preact version of <bolt-tooltip> component to lit-html to fix disappearing first tooltip icon issue on IE/Edge. #1133
• List component: Added testing for the List component. #1100
• Action Blocks component: Code cleanup which includes refactoring props to follow Bolt's coding conventions. See component prop deprecations below: #1133
• Breadcrumb component added Jest tests + manual TESTING.md testing steps via #1206 - thanks @joekarasek!
• Video component: Hide volume and duration video controls when video player is very small.

Bolt Core Updates

• Move getModifiedSchema() to bolt-base renderer, remove from image and blockquote components.
• Updated @bolt/core styles to add a few missing !default flags to allow Sass config options to be more easily updated and extended. #1148

Docs

• Image component: Removed two image demos from the docs-site #1211:
  • "Srcset only that won't be found in bolt.data.images and not lazy loaded"
  • "Srcset only that won't be found in bolt.data.images and lazy loaded"

Fixes

• Bolt Link: fixed an issue with a small amount of extra whitespace being visible on the left side of the Bolt Link component in certain situations #1220
• BoltConnect Module: updated the BoltConnect Drupal module to restore missing Twig namespaces that were previously displaying on the bolt_connect info page in Drupal #1199
• Figure component: fixed a rendering issue with the Figure component when used inside the carousel component and loop is set to true. #1219
• Modal Component: adjusted how the new modal component's open / close animation is handled so the animation no longer skips to being open + the close animation fades the entire container correctly. #1218
• Updated the package.json to several components / published packages to not use devDependencies or peerDependencies. Addresses install and build issues flagged when testing the Drupal Lab example with the team and encountered these unexpected issues. #1189
• Fixed a bug with attributes that had been occurring when list (list, ol, and ul) components contained empty elements #1188
• Video component: reworked some of the video component’s JavaScript to prevent sporadic bugs that can result from videos being initialized by Brightcove multiple times #1180
• Table component and List component: fixed an issue related to HTML encoding and "UTF-8" when passing in arrays of content #1179
• Inline List component: fixed an issue with the inline list with inset spacing poking out of its container #1100
• List component: updated the <bolt-list>'s web component so the flex option is styled and behaves the same way as the Twig-template version. #1111

DevOps Updates #1182

• Fixed the internal API rendering service to properly handle API requests w/o a 'Content-Type': 'application/json' header. #1178
• Updated now.sh scaling max config to reduce total number of server instances running #1181
• Refactor and reorganization of globally shared configs; packaged up existing files related to Nightwatch and Jest testing, and misc DevOps cleanup a related to configuration, testing and the build process. #1197
• Updated a number of Bolt component and package dependencies, in addition to fixing a few bugs with the API rendering service and issues with yarn installs.
• Updated the Bolt monorepo config for Lerna to not ignore the SSR server folder (nohoist) to improve yarn install stability. Additionally, these updates added a new "warmup" function to the build tools image task as a possible workaround to the sharp SVG-related build errors that are still periodically occurring. (ex. https://github.com/bolt-design-system/bolt/issues/1176#issuecomment-493228423) #1166
• Added a new loading screen when booting up a new local dev server. 🎉

• Globally upgraded NPM package dependencies for the monorepo, docs site, build tools, shared configs, and Bolt core.
• Fixed an unexpected regression from #1178 causing components being rendered via the Component Explorer to be partially missing HTML in the response
• Updated the @bolt/build-tools to re-introduce a new and improved loading screen -- now working with webpack-dev-server!
• Monorepo Node.js version upgraded to the latest stable version (v10.15.3)
• Significantly fewer warnings when installing and running the Bolt monorepo locally
• Fixed a minor CSS layout issue causing unnecessary scrolling on the docs site homepage
• Upgrade the version / package name of the lit-element dependency getting used / tested out. Addresses #1162
• Removes all but one instance where we specify a twig/twig dependency in any of our composer.json files (now only specified in our Twig renderer package). Not only should this help make it easier to manage which version gets used in the monorepo, but this should also help decouple which version of Twig ultimately gets used downstream, hopefully helping to address issues flagged like #1175
• Updated the docs site-specific .boltrc config to automatically open a new tab when booting up a new dev server instance.

As a future update this ideally could be customized per developer's personal preference via a local config file that gets merged with these repo-specific defaults -- one that isn't version controlled

Docs Site, Integration Examples, etc

• Example Angular Integration: created a new example integration for Angular and for static HTML / other CMS systems integration. #1154
  

Deprecations

• Action Blocks
  • maxItemsPerRow has been renamed to max_items_per_row.
  • align has been updated to valign to clearly indicate vertical alignment.
  • border has been updated to borderless and its default set to false.

Bolt v2.5.1 was a fast-follow version bump to v2.5.0 due to a small NPM publishing issue that had occurred during the initial v2.5.0 release. No other functional changes were included -- just a global version bump of all related packages to ensure everything got published to NPM as expected.

Summary

This is a small hotfix release to address two integration issues identified:

1. Fixed an issue with a renamed Twig template in the @bolt/components-action-blocks package #1198
2. Fixed an issue with the recently added gcd Twig function. #1196

No API or code changes from this update should be required other than using the latest packages updated with this release.

@bolt/[email protected]
@bolt/[email protected]
@bolt/[email protected]
@bolt/[email protected]
@bolt/[email protected]

Details

1. This update temporarily re-adds a action-block.twig template to the action blocks package in order to fix a broken template path to an internally used Twig template recently renamed.

2. Refactored the recently added gcd custom Twig function to now work in PHP environments where the gmp PHP extension isn't installed. Additionally, this update also updated the BoltCore Class in the core-php package to now correctly include the new gmp Twig function that was needed.

This fix also updates the BoltExtra Class and splits the code up into two sets of custom Twig extensions:

• BoltCoreCompat which adds Drupal-specific Twig extensions and support to Bolt
• BoltExtras which adds custom Twig extensions used internally on the docs site

With this update, the Twig environment used by our Jest tests even more closely resemble Drupal to help catch issues like this from reoccurring.

Summary

This is a small hotfix release which updates the package.json files for several Bolt components / related NPM packages to no longer use devDependencies or peerDependencies. This addresses unexpected install and build issues when testing out the v2.4.2 release of Bolt in our Drupal Lab example (ie. installs from outside of the normal monorepo install / build context).

No API or code changes from this update should be required other than using the latest packages updated with this release.

Details

• Updates all published Bolt packages using devDependencies and/or peerDependencies to use dependencies instead so packages get installed correctly.
• Refactors + adds new Jest monorepo tests to check against and enforce this update moving forward
• Auto-run these monorepo tests very quickly when pushing up changes (via a new quick Jest config)
• Configures a new Docker container + small setup process to more easily allow our Drupal Lab environment to be more easily deployed and tested automatically

Note: this update should help better test for issues like this in the future (ie. installing, building, and deploying Drupal Lab)

Packages Updated

## More Commonly Installed
 - @bolt/[email protected]
 - @bolt/[email protected]
 - @bolt/[email protected]
 - @bolt/[email protected]
 - @bolt/[email protected]
 - @bolt/[email protected]
 - @bolt/[email protected]
 - @bolt/[email protected]
 - @bolt/[email protected]
 - @bolt/[email protected]

## Less Commonly Installed / Related Dependencies
 - @bolt/[email protected]
 - @bolt/[email protected]
 - @bolt/[email protected]
 - @bolt/[email protected]
 - @bolt/[email protected]
 - [email protected]
 - @bolt/[email protected]
 - @bolt/[email protected]
 - @bolt/[email protected]

Details

This is a hotfix for the latest v2.4.x-version of Bolt which updates the video component's Javascript to prevent an IE 11-specific bug from occasionally occurring that could result in the Brightcove video player initializing multiple times.

Note: these video player updates had already been part of the larger batch of component updates slated for an upcoming Bolt release -- this hotfix simply fast tracks a subset of those changes.

Note: this video update is largely identical to the updates backported and released in v2.3.3.

Implementation details

Brightcove changed their best practices for referencing a video player and for delayed player instantiation around v6.12 - v6.18. Our implementation needed to be updated to adhere to the new standards to avoid the confusing initialization issues mentioned in BC's release notes (see 6.18.3).

Since the code change on Brightcove's side, many of our videos worked fine, but we've been plagued by intermittent bugs, especially around plugins. These updates should fix that.

The key changes are:

• Don't include data-account, data-player, or data-video-id attributes on first render of the <video-js> element or videos will auto-initialize. Add them on rendered() just before calling bc(). (code)
• Check if video has already initialized before calling bc() to prevent re-initializing the video on re-render when attributes are added. (code)
• Don't use data-setup. It's a Video.js prop that will confuse Brightcove. Instead pass those configuration options to the Brightcove function itself. (code)
• Use <video-js> not <video>, new best practice from Brightcove to avoid flash of native video controls. (code)
• Reference video player with videojs.getPlayer(id) not videojs(id). The latter can cause Video.js to initialize. (code)

In addition to the video component fix, this hotfix release also included a handful of other DevOps-related fixes that didn't require publishing any other additional packages.

These updates include fixing a failing Jest test for the Navbar component + fixes to Nightwatch.js test reporting logic so the build status is correctly reported + the browser screenshots captured show up again.

DevOps Fixes

1. Reduced the overall size of the Nightwatch.js test report sent back to Github so we don't exceed the max message size allowed.

2. Also adds a slight delay before starting to collect and report back on Nightwatch test results to address occasional issues with the test result asset (image) being requested not being immediately available.

3. Fixed the Navbar component's Jest test to have Puppeteer wait until page being navigated to has finished loading before the rest continuing. Addresses occasional Navbar test failures that are still popping up from time to time.

Details

This is a hotfix for the older v2.3.x-version of Bolt (originally released in January 2019) which updates the video component's Javascript to prevent an IE 11-specific bug from occasionally occurring that could result in the Brightcove video player initializing multiple times.

Note: these video player updates had already been part of the larger batch of component updates slated for an upcoming Bolt release -- this hotfix simply fast tracks a subset of those changes.

Implementation details

Brightcove changed their best practices for referencing a video player and for delayed player instantiation around v6.12 - v6.18. Our implementation needed to be updated to adhere to the new standards to avoid the confusing initialization issues mentioned in BC's release notes (see 6.18.3).

Since the code change on Brightcove's side, many of our videos worked fine, but we've been plagued by intermittent bugs, especially around plugins. These updates should fix that.

The key changes are:

• Don't include data-account, data-player, or data-video-id attributes on first render of the <video-js> element or videos will auto-initialize. Add them on rendered() just before calling bc(). (code)
• Check if video has already initialized before calling bc() to prevent re-initializing the video on re-render when attributes are added. (code)
• Don't use data-setup. It's a Video.js prop that will confuse Brightcove. Instead pass those configuration options to the Brightcove function itself. (code)
• Use <video-js> not <video>, new best practice from Brightcove to avoid flash of native video controls. (code)
• Reference video player with videojs.getPlayer(id) not videojs(id). The latter can cause Video.js to initialize. (code)

This is a small follow-up to the v2.4.0 release that rolls back a handful of upcoming v2.5.0 updates.

With this update, the following components have been bumped to v2.4.1 (all others remain at 2.4.0):

• @bolt/components-table
• @bolt/components-action-blocks
• @bolt/components-tooltip
• @bolt/components-list

What's New in Bolt v2.4.0

New Google Analytics Autolink Helper Library

The new @bolt/analytics-autolink helper library streamlines the process of integrating any existing / future Bolt components with Google Analytics Linker to more easily track outbound URLs. Includes automated tests + docs in the README. #1125

New Web Components Added 🎉

<bolt-blockquote> via #984

<bolt-blockquote 
  author-name="Michelangelo di Lodovico Buonarroti Simoni"
  author-title="Renaissance Artist"
  author-image="/images/placeholders/500x500.jpg"
>
  <img slot="logo" src="/images/content/logos/logo-paypal.svg" alt="PayPal Logo">
  <p>The greater danger for most of us lies not in setting our aim too high and falling short...</p>
  <p>In fact, the greater danger is setting our aim too low and achieving our mark.</p>
</bolt-blockquote>

<bolt-chip> via #1078

<bolt-chip>
  Text of the chip
</bolt-chip>

<bolt-image> via #1032

<bolt-image
  src="https://boltdesignsystem.com/images/placeholders/tout-4x3-climber.jpg"
  alt="A Rock Climber"
  ratio="4/3"
  placeholder-color="#D3D3D3"
  placeholder-image="http://placehold.it/400x300"
></bolt-image>

New init Custom Twig Function

This new init custom Twig function added to core-php is part of ongoing architectual efforts to standardize how Twig / Web Components are built, taking the component's initial data, API, and defaults into consideration.

New Component Status Board

The updates from #1083 adds a new, automatically generated (always up to date) component status board to the Pattern Lab's main overview page.

New Yeoman Component Generator

With the new Yeoman Component generator added, new components can be easily spun up automatically using the same base structure and coding standards as a starting point. #1101

Docs Site Search

Added a new Algolia-powered docs site search to help moving around the Bolt Design System documentation site. #1132

400%+ More Component Tests!

Before:

After

Components with Testing Coverage Updates (Automated and/or Manual)

• Action Blocks component #1106
• Background Shapes component #1045
• Blockquote component (including visual regression testing)
• Button component (including visual regression testing) #1046
• Card component #1094
• Chip Component #1078
• Chip List component #1080
• Figure component #1074
• Icon component #1066
• Image component #1063
• Link component #1058
• Logo component (including visual regression testing) #1123
• Navbar component (including visual regression testing)
• Ordered List component #1054
• Pagination component #1105
• Ratio component (including visual regression testing) #1093
• Share component #1127
• Text component (including visual regression testing) #1137
• Unordered List component #1054

Component Testing Infrastructure

• Major upgrades to Jest to support testing web component rendering in a browser and web page instance that's generated automatically, in addition to adding the ability to run visual regression tests on these. #1082

New Component "Status Checks" (via the Github Checks API)

This sets up the GitHub Checks API for collecting information about a commit's build info. It removes the need to have Bolt Bot comment on PRs for deploy info and moves it to the "Checks" tab above and also allows more information to be shown over in that tab. #1025

Grid Improvements (Preview)

Upgraded the grid component to handle more complex layouts with versatile breakpoint options. #1047

Note: You can use this image as an reference to create some common layouts for testing.

Server-side Rendering (Preview)

Added the capability to server-side pre-render Bolt web components via JSDOM through a new experimental @bolt/ssr-server package.

While there's still some work to be done before rolling this out for mass consumption on the backend (currently disabled in the code that's live), this is a significant milestone for many future endeavors in major improvements to content authoring, component flexibility, platform interoperability, code maintainability and more! #1097

• Updated the Bolt Build Tools configuration + PHP logic to automatically enable server-side rendering in prod mode, disable in local dev mode, and provide a new enableSSR config option to allow SSR to be manually be enabled / disabled (overriding the default auto behavior). #1131

New Documentation Added

• Added a new docs page on the different types of Bolt releases #1119
• Also added a new dev guide to setting up xdebug to help with PHP debugging when building Pattern Lab #1060
• New docs page added to help get developers started writing automated tests using Jest. #1040
• Updated developer docs to include support for using PHP 7.3 #1028

Component Enhancements

Navbar Component

• Updated the Navbar component (Priority Nav) to fix support for translatability / customization of the "More" button text displayed. #1053

Image Component

• Automated tests added to check for lazy loading / image zoom functionality #1077
• Added cover prop, used when an image needs to fill its container, i.e. object-fit (commit). #1032
• added no_lazy (commit), placeholder_color, placeholder_image, and ratio props (commit) for Web Component use only.

Note: While lazyloading still works, further lazyload-related improvements are in the works. Also, keep an eye on BDS-1132 for updates on adding support for handling inline-block images in a future Bolt release.

Background Component

• Update background component to pass cover prop, fix lazyload logic (commit).
• Added documentation for usage of full-bleed background images. #1113
• Added the max-width spec added to the component docs #1136

Band Component

• Simplified pinned content feature in the band component for easier implementation. #1088
• Updated demos and docs to match the Band component refactor updates / schema changes. #1090, #1091
• Grid component usage has been removed from the band component
• Band twig template is refactored to be simpler
• Deprecated grid props inside band
• Fully revamped demo pages and documentation
• Added new props to pass content into the band: content and pinned_content (see deprecation notes below)

Link Component

• Added display prop to handle inline and flex links. Links are inline by default. Also added valign prop for flex links.

Bolt Icons Component

• Added automated tests to confirm the build process works as expected. Also tests for the ability to add custom icons./ #1102

Background Video Demo

• Added an example prototype of constructing a background video component using mostly off the shelf Bolt Components (initially used on the new Careers landing page) #1056

Additional Enhancements

Webpack Config in @bolt/build-tools Now Extendable

The updates in #1128 add a new configureWebpack advanced config option to the Bolt Build Tools .boltrc config to allow extending the default Webpack config generated with additional plugins, module configs, etc via weback-merge.

Custom SVG Icons

• Added developer documentation on how to add custom SVG icons to a specific site using Bolt #1135
• Decoupled the original SVG Icon build script from the icons themselves and moved to new home in @bolt/build-tools. Added the ability to update the icon component’s schema when icon assets are added / removed automatically + export list of available icons to a separate JSON file for better CMS integrations. #1020

New Sass Functions / Mixins

• Added the bolt-border-radius() Sass function and mixin + new corresponding utility classes for better scalability and consistency. #1110
• Added a SCSS mixin named bolt-ie11-only for writing CSS that only applies to IE11. #1055

Core PHP Updates

• Updated the core-php phpunit dependency to move it to being a devDep to address an install error in Drupal #1141
• Add persistent caching to twig namespace path discovery in Drupal #1086

Pattern Lab & Docs Site Improvements

• Misc updates and enhancements to the Bolt docs site + Pattern Lab UI. #1145
• Implemented a number of improvements and bug fixes related to the docs site and Pattern Lab UI, version selector #1050

DevOps Improvements

• Upgraded + streamlined the automated release process #1014
• Upgrade Nightwatch.js testing setup to allow developers to run Nightwatch tests locally #1077
• Nightwatch test reporting + major improvements to Continuous Integration via the Github Checks API #1026
• Major speed improvements to the build and deploy process (8 minutes faster!) + misc fixes and optimizations. #1038
  

Drupal Lab Updated

• Updated Bolt's example integrations with Drupal Lab + with Vue to use the latest Bolt / NPM dependencies + fix minor issues. Should also fix the error reported in #1092. #1095

Misc

• Ungrouped list-like component folder organization per team feedback #1134
• Setup multiple kinds of GitHub PR templates: bug, feature, release #1033

Fixes

Component & Bolt Core Fixes

• Fix a Blockquote IE bug where content disappears after JS loads + adds Jest and Nightwatch tests (via #1168) to help prevent this bug from reoccurring. #1167 and #1168
• Fixed a small logic issue with the Band component to ensure the old fullBleed prop continues to work as expected #1120
• Fixed a Ratio component bug that sometimes miscalculated aspect ratio #1123
• Improved the vertical alignment of text and icon inside the Button component. #1096
• Fixed an issue with the figure component (nested inside a flag component) not rendering <bolt-icon> as expected. #1064
• Fixed a bug where the List component had unwanted extra spacing on the bottom #1057
• Fixed a small regression with the Link component's text and icon spacing. #1062
• Fixed a Sass syntax error in introduced as part of the button radius updates in #987. #1004
• Fixed an IE-only visual regression bug where content disappears when a Teaser component contains a link. #1079
• Overwrote Brightcove video player styles that hide volume and other video controls in devices smaller than 400px. #1140
• Fixed an issue in the Ratio component to prevent some images from overflowing their container when JS is turned off. #1156

DevOps Fixes

• Fixes a typo with the Github Checks API name used to report back on which Travis CI steps are pending, in-progress, and pass / fail. #1149
• Ported over Travis CI updates from #1109 that appear to help improve the reliability / consistency of the visual regression tests being run by Jest. #1129
• Updated the logic for our now.sh deploy URL aliases to ensure the alias name (based off of the name of the Git branch) doesn't exceed 63 characters long and cause the now.sh deployment to fail as seen on #1120 and https://github.com/bolt-design-system/bolt/pull/1120/checks?check_run_id=80710490 #1122
• Updates how the original Travis + Github Checks API integration was handling our Linting and Jest unit tests. This update should help ensure any errors encountered during the Travis build clearly fail (vs silently failing unless looking at the Github Checks API status). #1103
• Implemented several housekeeping updates, improvements and fixes to our DevOps CI / CD process to continue to improve how smooth we ship Bolt releases. #1068
• Removed extra status call to Github Checks API #1071
• Fixes to Nightwatch.js testing infrastructure to improve reliability of testing results #1065

Docs Site Fixes

• Misc fixes to UIKit's page navigation, dependency update to the @bolt/build-tools package + updates to the Drupal Lab build config to address issues when watching the filesystem for changes. #1146
• Fixed duplicated button doc pages, updated related Nightwatch tests, and addressed two minor docs site related issues involving the docs site specific grid + code blocks being unable to scroll vertically. #1121
• Workaround for an async loading issue in Pattern Lab occasionally observed that throws a JS error if the global Pattern Data doesn’t exist when a component expects it. #1065

Band Component: Deprecated items prop

How to convert Band Component items to pinned_content?

{% include "@bolt-components-band/band.twig" with {
  content: content,
  items: [
    {
      position: {
        align: "end",
        valign: "center",
        row_start: 1,
        column_start: 1,
        column_end: 12,
      },
      content: pinned_share,
    },
  ]
} only %}

New pinned_content prop

{% include "@bolt-components-band/band.twig" with {
  content: content,
  pinned_content: {
    upper: [
      {
        content: pinned_share,
        align: "end",
      },
    ],
  }
} only %}

Bolt Image: Deprecated the imageAttributes, useAspectRatio, width, and height props

• imageAttributes is now no longer required. Previously this had only been used internally inside the background image component.
• useAspectRatio: use the new ratio prop instead
• height and width props: the new ratio prop now takes care of the previous need for these two props.

This is a hotfix release that patches two issues with the original v2.3.x release:

1. Fixed a regression where the flag component went missing. #1170
2. Fixed an issue where the icon inside an inline link gets pushed to its own line. #1169

Big shoutout to @mikemai2awesome and @remydenton for their help getting these fixes in with a super quick turnaround!

This is a hotfix release that patches two high priority bugs with with the original v2.3.0 release:

• Removed the yarn reference in an NPM script that gets automatically run when installing the older version of the @bolt/components-icons package (fix now switches the command to npm for compatibility) #1107
• Updated the @bolt/components-image Twig template to fix an issue related to auto-escaping #1108

Extra shoutout to @remydenton for his help getting the ball rolling on both of these fixes!

Enhancements

Components

• Google Analytics Autolink Helper: added a brand new helper package, @bolt/analytics-autolink to make it easy wiring up Bolt components with Google Analytics Linker plugin. This makes it much easier to track the analytics for components with external domain URLs. #1125
• Add max-width spec to Background component readme #1136
• Bolt Image now supports being used as vanilla web component! #1032 🎉
  • Added no_lazy (commit), placeholder_color, placeholder_image, and ratio props (commit) for Web Component use only.

Note:

• While lazyloading still works, but we need a better implementation in the future. Currently, on web components, lazy images are revealed right after render. Say we wanted to load only in-view images, this implementation would not suffice.

• We'll be adding the option for inline-block images in a follow-up update. This will be handled in BDS-1132.

• Background Image #1032

  • Added cover prop, used when an image needs to fill its container, i.e. object-fit (commit).
  • Update background component to pass cover prop, fix lazyload logic (commit).

• Added automated testing and updated docs for the Action Blocks component #1106

• Added tests for the logo component as part of the bug fix addressed in #1123

• Added basic testing coverage + updated docs for the Pagination component. #1105

• Added documentation for usage of full-bleed background images. #1113

• Bolt Icons: Added Jest tests to confirm the Icon build process + ability to add custom icons to Bolt is working as expected #1102

• Background Shapes: Added automated jest testing + manual testing steps #1045

• Bolt Link: Added display prop to handle inline and flex links. Links are inline by default. Also added valign prop for flex links.

• Bolt Band

  • Cleaned up Bolt Band demos #1090

• Bolt Blockquote: Extended and revamped the existing bolt-blockquote component so that blockquotes can now be rendered using Twig templates and web components. #984

• Bolt Button

  • Adds manual testing steps for bolt-button on PatternLab in an approximation of Gherkin format #1046

• Add JEST test and documentation for testing to bolt-ol and bolt-ul components. #1054

• Bolt Link

  • Added developer and QA testing instructions for the Bolt Link component. #1058

• Bolt Icon

  • Added testing and documentation update for bolt-icon #1066

• Bolt Image

  • Added developer and QA testing instructions for the Bolt Image component. #1063
  • Add tests to check for lazy loading / image zoom functionality #1077

• Bolt Figure

  • Added developer and QA testing instructions for the Bolt Figure component. #1074

• Bolt Chip

  • Added component-level documentation and basic testing coverage #1078
  • Converted Bolt Chip to now be a full renderable web component #1078

• Background Video Demo

  • Added an example prototype of constructing a background video component using mostly off the shelf Bolt Components (initially used on the new Careers landing page) #1056

• Bolt Chip List

  • Added testing & component documentation for Chip List component + refactor to internally use the <bolt-list> component. #1080

• Bolt Card: Added documentation and tests for the bolt-card component #1094

• Bolt Ratio: Refreshes the ratio component's internals + adds testing coverage support via Jest (including visual regression testing) #1093

• Bolt Band: Simplified pinned content feature in the band component for easier implementation. #1088

  • Updated demos and docs to match the Band component refactor updates / schema changes. #1091
  • Grid component usage has been removed from the band component
  • Band twig template is refactored to be simpler
  • Deprecated grid props inside band
  • Fully revamped demo pages and documentation
  • Added new props to pass content into the band: content and pinned_content (see deprecation notes below)

• Bolt Text: Added tests and docs for the now public bolt-text web component.

• Bolt Share: Added automated tests and manual testing steps for share component. #1127

• Drupal Lab: Updated Bolt's example integrations with Drupal Lab + with Vue to use the latest Bolt / NPM dependencies + fix minor issues. Should also fix the error reported in #1092. #1095

• Bolt Icons: added developer documentation on how to add custom SVG icons to a specific site using Bolt #1135

Tools, Infrastructure, & Standards

• Misc updates and enhancements to the Bolt docs site + Pattern Lab UI. #1145

• Adds search to the Bolt documentation site, powered by Algolia. #1132
  

• Updated the core-php phpunit dependency to move it to being a devDep to address an install error in Drupal #1141

• Updated the Bolt Build Tools configuration + PHP logic to automatically enable server-side rendering in prod mode, disable in local dev mode, and provide a new enableSSR config option to allow SSR to be manually be enabled / disabled (overriding the default auto behavior). #1131

• Ungrouped list-like component folder organization per team feedback #1134

• Adds a new configureWebpack advanced config option to the Bolt Build Tools .boltrc config to allow extending the default Webpack config generated with additional plugins, module configs, etc via weback-merge. #1128

• 

  • Yeoman component generator for easily and consistently spinning up new Bolt components with the same base structure! #1101

• New architectural pattern + init custom Twig function to standardize on the different considerations when building out a component's data structure and API. With these updates in #1089 , a significant amount of code will no longer be written every time a new Bolt component is created / refactored:

  • Setting up the resulting data based on the data passed along + any defaults specified in the schema
  • Setting up Twig template logic based on the default data + allowed values
  • Converting the names of the Twig-friendly prop names from the schema into web component-friendly HTMl attributes
  • By default not outputting any default prop options on the web component as HTML attributes (as this logic is handled internally by the web component)

• Added the bolt-border-radius() Sass function and mixin + new corresponding utility classes for better scalability and consistency. #1110

• Updated the component status board logic to support using a new (optional) pattern-alias config when automatically matching up a component with the component's main viewall page in Pattern Lab. #1126

• Added developer docs on the different types of Bolt releases #1119

• Web Component Server Side Rendering (SSR): Added the capability to server-side pre-render Bolt web components via JSDOM through a new experimental @bolt/ssr-server package. While there's still some work to be done before rolling this out for mass consumption on the backend, this is a significant milestone for many future endeavors in major improvements to content authoring, component flexibility, platform interoperability, code maintainability and more! #1097

• Component Status Board #1083
  

  • Adds an automatically generated (always up to date) component status board to Pattern Lab's main overview page.

• Renamed several existing component folders in Pattern Lab in order to automatically match up with the names of the package names (what things are called once they are published to NPM) #1084

• Upgrade Nightwatch.js testing setup to allow developers to run Nightwatch tests locally #1077

• Major upgrades to Jest to support testing web component rendering in a browser and web page instance that's generated automatically, in addition to adding the ability to run visual regression tests on these. #1082

• Added documentation for setting up Xdebug to debug the PHP used when building Pattern Lab #1060

• Docs Add new docs about how to get started with automated testing using Jest. #1040

• Implemented several housekeeping updates, improvements and fixes to our DevOps CI / CD process to continue to improve how smooth we ship Bolt releases. #1068

• Major speed improvements to the build and deploy process (8 minutes faster!) + misc fixes and optimizations. #1038
  

• Implemented a number of improvements and bug fixes related to the docs site and Pattern Lab UI #1050

• Added a SCSS mixin named bolt-ie11-only for writing CSS that only applies to IE11. #1055

• Nightwatch test reporting + major improvements to Continuous Integration via the Github Checks API #1026

• Setup multiple kinds of GitHub PR templates: bug, feature, release #1033

• Upgrade + Streamline Release Process #1014

• Decoupled the original SVG Icon build script from the icons themselves and moved to new home in @bolt/build-tools. Added the ability to update the icon component’s schema when icon assets are added / removed automatically + export list of available icons to a separate JSON file for better CMS integrations. #1020

• Add persistent caching to twig namespace path discovery in Drupal #1086

• Github Checks API: This sets up the GitHub Checks API for collecting information about a commit's build info. It removes the need to have Bolt Bot comment on PRs for deploy info and moves it to the "Checks" tab above and also allows more information to be shown over in that tab. #1025

Fixes

• Fixes a typo with the Github Checks API name used to report back on which Travis CI steps are pending, in-progress, and pass / fail. #1149
• Misc fixes to UIKit's page navigation, dependency update to the @bolt/build-tools package + updates to the Drupal Lab build config to address issues when watching the filesystem for changes. #1146
• Ported over Travis CI updates from #1109 that appear to help improve the reliability / consistency of the visual regression tests being run by Jest. #1129
• Fixed a small logic issue with the Band component to ensure the old fullBleed prop continues to work as expected #1120
• Fixed the ratio bug that sometimes miscalculated aspect ratio #1123
• Fixed duplicated button doc pages, updated related Nightwatch tests, and addressed two minor docs site related issues involving the docs site specific grid + code blocks being unable to scroll vertically. #1121
• Updated the logic for our now.sh deploy URL aliases to ensure the alias name (based off of the name of the Git branch) doesn't exceed 63 characters long and cause the now.sh deployment to fail as seen on #1120 and https://github.com/bolt-design-system/bolt/pull/1120/checks?check_run_id=80710490 #1122
• Improved the vertical alignment of text and icon inside bolt-button. #1096
• Updates how the original Travis + Github Checks API integration was handling our Linting and Jest unit tests. This update should help ensure any errors encountered during the Travis build clearly fail (vs silently failing unless looking at the Github Checks API status). #1103
• Fixed an issue with the figure component (nested inside a flag component) not rendering <bolt-icon> as expected. #1064
• Updated the Navbar component (Priority Nav) to fix support for translatability / customization of the "More" button text displayed. #1053
• Removed extra status call to Github Checks API #1071
• Workaround for an async loading issue in Pattern Lab occasionally observed that throws a JS error if the global Pattern Data doesn’t exist when a component expects it. #1065
• Fixes to Nightwatch.js testing infrastructure to improve reliability of testing results #1065
• Fixed a bug where the list component having unwanted extra spacing on the bottom #1057
• Fixed a small regression with the link text and icon spacing. #1062
• Fixed a sass syntax error in introduced as part of the button radius updates in #987. #1004
• Fixed an IE-only VR bug where content disappears when a teaser contains a link. #1079
• Override Brightcove styles that hide volume and other video controls < 400px. #1140

Docs

• Updates developer docs to include support for using PHP 7.3 #1028

How to convert Band Component items to pinned_content

Band Component: Deprecated items prop

{% include "@bolt-components-band/band.twig" with {
  content: content,
  items: [
    {
      position: {
        align: "end",
        valign: "center",
        row_start: 1,
        column_start: 1,
        column_end: 12,
      },
      content: pinned_share,
    },
  ]
} only %}

New pinned_content prop

{% include "@bolt-components-band/band.twig" with {
  content: content,
  pinned_content: {
    upper: [
      {
        content: pinned_share,
        align: "end",
      },
    ],
  }
} only %}

Bolt Image: Deprecated the imageAttributes, useAspectRatio, width, and height props

• imageAttributes is now no longer required. Previously this had only been used internally inside the background image component.
• useAspectRatio: use the new ratio prop instead
• height and width props: the new ratio prop now takes care of the previous need for these two props.

Release Preview

• Bolt Grid: upgraded grid component that handles complex layouts with versatile breakpoint options. #1047
  • Built on top of the existing new grid that was not officially released.
  • Narrowed props down to column-start, column-span, row-start, row-span, and valign for each grid items.
  • The main grid container has gutter and row-gutter props to handle vertical and horizontal spacing.
  • Breakpoint specific options can allow the items to transform freely.

Note: You can use this image as an reference to create some common layouts for testing.**

• Bolt Card
• Bolt Image
• Bolt Video
• Bolt Text

Enhancements

Components

• Bolt Icons: Added the solid-star icon to the Bolt icon library. #1002
• Bolt List:
  • Added the ability to set the display prop to flex -- allows the list component to now
    have horizontal and vertical dividers on the nested list-items #986
  • Converted the relatively new <bolt-list> component to now be a fully baked web component #965 (see deprecation notes below to upgrade)
• Bolt Link:
  • Converted the existing <bolt-link> component to now be fully client-side renderable as a standalone web component #963
  • Add docs for <bolt-link> web component usage. #982
• Bolt Video
  • Added testing checklist docs for the current <bolt-video> component #955
  • Updated the <bolt-video> component to now allow for the "Share This Video" text be translated via a new optional config property #971
  • Updated the component to support displaying embedded calls to action (Cue Points) while a video is supported by a particular player and video playing. #997
  • Updated to add support for the new plugin system to allow plugins to get automatically added / removed from a particular video player instance automatically via the custom element. #997
• Bolt Button
  • Added an initial set of <bolt-button> component testing checklist items for both automated and manual testing #952
  • Cleanup up and documented button CSS class sorting logic #968
• Bolt Ratio: Migrated / promoted the existing Bolt Ratio object to being a standalone, individually installable Bolt component (without introducing any major breaking changes in the process) #939
• Bolt Image and Bolt Video: Added Jest snapshot component rendering testing for the <bolt-image> and <bolt-video> components to verify the <bolt-ratio> dependency specified is getting pulled in and compiled as expected #939
• Bolt Button and Bolt Link: Refactored and simplified to use the new BoltAction base class #1000
• Bolt Ordered and Unordered List: Convert the original Ordered and Unordered List components to web components; includes better support for multi-level and nested lists #978
• Bolt Figure: Convert <bolt-figure> to a fully client-side renderable web component; Twig figure template now accepts table and video content, in addition to image and icon #989
• Added the new @bolt/components-critical-css package for handling cross browser support for async CSS loading (via the <link rel="preload"> tag). #1039

Docs, Demos, & Integrations

• API and Deployments: Replaced static site hosting with an Express server and a Docker deployment and wiring up the Bolt API! #990
• Blog: Added new high fidelity prototypes of the upcoming Blog work based on approved designs #910
• CKEditor Integration:
  • Added the CKEditor 5 Demo to Bolt for prototyping out and demoing deep integration work #975
  • Set up proof-of-concept CK Editor integration with Bolt components #981
• Schemas: Added the ability to hide or show a prop in the schema table on the Pattern Lab site #995
• Reference Prototypes
  • Cleaned up outdated mockup pages in Pattern Lab #958
  • Use json data to streamline and remove redundant markup in demo pages #969
• Component Explorer / Performance:
  • The new component explorer on https://boltdesignsystem.com now renders nearly twice as fast! #1013
  • Speed up response times for the new in-browser component explorer. #1034

Tools, Infrastructure, & Standards

• Build Tools / Travis CI: Refactored and updated our build and continuous integration process to speed up Travis CI builds by around 300% (from ~20 minutes down to around 6 or 7 minutes), in part by combining the two separate docs and Pattern Lab sites into one single Bolt-powered docs-site. #1008
• Build Tools
  • Updated @bolt/build-tools to automatically add Bolt component dependencies that are missing from the consumer’s .boltrc config file #939
  • Added the ability to compile Typescript .ts, and .tsx files in Bolt's local Webpack Build #964
• Coding Standards Update component-level Sass formatting based on updates to Bolt's Stylelint coding standards #947
• Animation & Rendering: Added 3 new demos to Bolt to highlight major rendering performance differences + a potential new technique to help address issues with scale -- particularly necessary with upcoming animation work. #964
  • Lit-HTML
  • Preact
  • Lazy Lit Element (New)
• Bolt Action Base Class: Added a new base class that contains the shared functionality and behavior of links and buttons, and extend that when adding new "actionable" components (ex. chips, navlinks, etc), rather than extending the link or button components themselves. #1000
• Bolt Core:
  • Updated the @bolt/core click event handler util to allow toggling JavaScript methods that are on the window (vs only allowing methods that are on an element itself)
  • Updated the @bolt/core base component to no longer immediately trigger a component without any props to render (via the updated() method call) -- fixes a minor issue discovered with the new Context API additions in #961 that can cause components using the new withContext functionality to have undefined values initially until the component finishes rendering #964

Fixes

Components

• Bolt Core / Polyfill Loader: Updated the Bolt Core polyfill loader test to more specifically check for IE 11 (to opt out of loading the Shady DOM polyfill) — intended to address a noticeable performance hit with Bolt v2.2.0. #999
• Bolt Core: Fixed a styling regression that was preventing the default @bolt/core spacing scale values from being updated. This update will make the more optimized whitespace styles match the improved typography styles. #1029
• Bolt Code Snippet
  • Updated the <bolt-code-snippet> to ensure certain special characters like &, <, > are escaped to render as expected #973
  • Updated the <bolt-code-snippet> component to apply escaping to all languages #985
• Bolt Table: Updated the <bolt-table> component's CSS fix to address a cross-browser theming bug with it's border color when compiled for production #977
• Bolt List
  • Fixed the <bolt-list> component's separator prop to work with dynamic display (ex. display="inline@small") #983
  • Fixed an issue with the inline list's horizontal alignment in IE11, and props not rendering in real time when using the web component. #1043
  • Fixed an issue with the inline list's horizontal alignment in IE11, and props not rendering in real time when using the web component. #1052
  • Fixed a Twig issue with the new <bolt-list> component's inset prop not rendering correctly #948
• Bolt Link: Removed line breaks from <bolt-link> lit-html templates causing unwanted whitespace; also removed line breaks from lit-html templates in renter-lit-html's slot() method #1005
• Bolt Button: Fixes a bug when a <bolt-button width="full"> does not appear to be full width when used inside of another web component's <slot> #994
• Ordered and Unordered List Fixed issue with how IE and Edge render the list component's bullet and number background

Docs, Demos, & Integrations

• Fixed broken image paths in the Bolt Card examples that test dynamically injected (personalized) behavior. #1051

• Pattern Lab: Temporarily disabled our custom Pattern Lab PHP patch that automatically indents and removes extra white space in the HTML code preview shown in the Pattern Lab. We'll re-enable once a better PHP library is put in place that suffer from memory issues! #966

• Vue.js Integration Added a workaround to the Vue.js example integration with Bolt -- fixes an issue with the Webpack build process not working as expected when running locally #972

• Schemas: Fix schema syntax when multiple props are deprecated in a single component #988

• Docs Site

  • Added a boltdesignsystem.com-specific CSS fix to prevent the Bolt version selector from overlapping the off-canvas / side-nav on medium-ish screen sizes. #1001
  • Hotfix to address a display: flex + min-height related layout issue in IE 11 and Firefox that was causing certain bands to display incorrectly on the Bolt docs site #1061
  • Updated the boltdesignsystem.com's site-specific grid + class name logic to address layout-related visual regression issues flagged #1050

Tools, Infrastructure, & Standards

• Deployments Updated the now.sh CLI library + config used for deploying Bolt updates to latest version; addresses deployment errors encountered + applies the latest security and maintenance updates from Zeit. #967
• Address two dependency-related items flagged with the initial Bolt v2.3.0 release candidate. #1035
  • Testing Instructions
• Update to better handle situation when the aggregated data about the latest tagged versions of Bolt has expired however the user / machine doesn't have a GITHUB_TOKEN token in their env variable and/or we've already hit our Github API rate limit. #1021
• Increased internal incache cache config’s max age + updates to skip cache behavior when deploying #1030
• Updated @bolt/build-tools to better handle any number of different ways the lang config option can be set in a .boltrc config file. #1029

Deprecations

Utility Class Updates

The original CSS classes for 3 Bolt utility classes involving z-index and shadow have been deprecated and renamed to be consistent with the naming convention globally used for all other utility classes. #946 -

• Shadow and “Hoverable” Shadow Utility Class Demo
• Z-Index Utility Class Demo

These deprecated class names have been updated with the new syntax below and will be removed in the next major Bolt release, v3.0.0.

Bolt Button Component Updates: rounded prop is now border-radius

The rounded property for buttons is now deprecated and will be removed in a future major version of Bolt (Bolt v3.0).

Please use the new border_radius property in Twig (or border-radius in vanilla HTML) with a value of full instead when needing round or pill shaped buttons. #987

Bolt Figure Component Updates: image and icon props removed, media prop added

The image and icon props have been removed and a new property media added. media is an object that can contain an image, icon, video, or table. As the list of content types was growing, it made sense to group these options within a single property, media.

There are no known instances of the figure component in the wild at the moment, so we do not expect there to be any rework required to handle this schema change.

Bolt Ordered and Unordered List Package Name + Twig Filename Updated

As part of the updates in #978, the original ordered and unordered list components have been updated and re-published to NPM under a new package name.

Because the original packages are still available on NPM at the previous v2.2.2 Bolt release, no immenent updates are mandatory, however we stongly recommend switching over to the new NPM packages to take full advantage of the major improvements now available.

To Upgrade:

1. In your package.json file, remove any old references to @bolt/components-unordered-list & @bolt./components-ordered-list + add the new @bolt/components-ul and @bolt/components-ol dependencies
2. Next, in your .boltrc config, remove any old references to @bolt/components-unordered-list or @bolt/components-ordered-list and add the new @bolt/components-ul and @bolt/components-ol package names
3. Finally be sure to update any old references to the original Twig template names:

This is a small hotfix release which updates the Bolt Core polyfill loader test to more specifically check for IE 11 in order to prevent the Shady DOM polyfill from loading unintentionally.

This addresses a performance hit in IE 11 with the initial Bolt v2.2.0 release.

Enhancements

Components

• Bolt Icons: Added the solid-star icon to the Bolt icon library. #1002
• Bolt List: Added the ability to set the display prop to flex -- allows the list component to now
  have horizontal and vertical dividers on the nested list-items #986
• Bolt List: Converted the relatively new <bolt-list> component to now be a fully baked web component #965 (see deprecation notes below to upgrade)
• Bolt Link: converted the existing <bolt-link> component to now be fully client-side renderable as a standalone web component #963
• Bolt Video: Added testing checklist docs for the current <bolt-video> component #955
• Bolt Video: Updated the <bolt-video> component to now allow for the "Share This Video" text be translated via a new optional config property #971
• Bolt Video: Updated the component to support displaying embedded calls to action (Cue Points) while a video is supported by a particular player and video playing. #997
• Bolt Video: Updated to add support for the new plugin system to allow plugins to get automatically added / removed from a particular video player instance automatically via the custom element. #997
• Bolt Button: Added an initial set of <bolt-button> component testing checklist items for both automated and manual testing #952
• Bolt Button: Cleanup up and documented button CSS class sorting logic #968
• Bolt Ratio: Migrated / promoted the existing Bolt Ratio object to being a standalone, individually installable Bolt component (without introducing any major breaking changes in the process) #939
• Bolt Image and Bolt Video: Added Jest snapshot component rendering testing for the <bolt-image> and <bolt-video> components to verify the <bolt-ratio> dependency specified is getting pulled in and compiled as expected #939
• Bolt Button and Bolt Link: Refactored and simplified to use the new BoltAction base class #1000
• Bolt Ordered and Unordered List: Convert the original Ordered and Unordered List components to web components; includes better support for multi-level and nested lists #978
• Bolt Figure: Convert <bolt-figure> to a fully client-side renderable web component; Twig figure template now accepts table and video content, in addition to image and icon #989

Docs, Demos, & Integrations

• API and Deployments: Replaced static site hosting with an Express server and a Docker deployment and wiring up the Bolt API! #990
• Blog: Added new high fidelity prototypes of the upcoming Blog work based on approved designs #910
• CKEditor Integration: Added the CKEditor 5 Demo to Bolt for prototyping out and demoing deep integration work #975
• CKEditor Integration: Set up proof-of-concept CK Editor integration with Bolt components #981
• Schemas: Added the ability to hide or show a prop in the schema table on the Pattern Lab site #995
• Reference Prototypes Cleaned up outdated mockup pages in Pattern Lab #958
• Reference Prototypes: Use json data to streamline and remove redundant markup in demo pages #969
• Bolt Link: Add docs for <bolt-link> web component usage. #982
• Component Explorer / Performance: The new component explorer on https://boltdesignsystem.com now renders nearly twice as fast! #1013

Tools, Infrastructure, & Standards

• Build Tools / Travis CI: Refactored and updated our build and continuous integration process to speed up Travis CI builds by around 300% (from ~20 minutes down to around 6 or 7 minutes), in part by combining the two separate docs and Pattern Lab sites into one single Bolt-powered docs-site. #1008
• Build Tools Updated @bolt/build-tools to automatically add Bolt component dependencies that are missing from the consumer’s .boltrc config file #939
• Coding Standards Update component-level Sass formatting based on updates to Bolt's Stylelint coding standards #947
• Animation & Rendering: Added 3 new demos to Bolt to highlight major rendering performance differences + a potential new technique to help address issues with scale -- particularly necessary with upcoming animation work. #964
  • Lit-HTML
  • Preact
  • Lazy Lit Element (New)
• Build Tools: Added the ability to compile Typescript .ts, and .tsx files in Bolt's local Webpack Build #964
• Bolt Action Base Class: Added a new base class that contains the shared functionality and behavior of links and buttons, and extend that when adding new "actionable" components (ex. chips, navlinks, etc), rather than extending the link or button components themselves. #1000
• Bolt Core: Updated the @bolt/core click event handler util to allow toggling JavaScript methods that are on the window (vs only allowing methods that are on an element itself)
• Bolt Core: Updated the @bolt/core base component to no longer immediately trigger a component without any props to render (via the updated() method call) -- fixes a minor issue discovered with the new Context API additions in #961 that can cause components using the new withContext functionality to have undefined values initially until the component finishes rendering #964

Fixes

Components

• Bolt Core / Polyfill Loader: Updated the Bolt Core polyfill loader test to more specifically check for IE 11 (to opt out of loading the Shady DOM polyfill) — intended to address a noticeable performance hit with Bolt v2.2.0. #999
• Bolt List: Fixed a Twig issue with the new <bolt-list> component's inset prop not rendering correctly #948
• Bolt Code Snippet: Updated the <bolt-code-snippet> to ensure certain special characters like &, <, > are escaped to render as expected #973
• Bolt Code Snippet: Updated the <bolt-code-snippet> component to apply escaping to all languages #985
• Bolt Table: Updated the <bolt-table> component's CSS fix to address a cross-browser theming bug with it's border color when compiled for production #977
• Bolt List Fixed the <bolt-list> component's separator prop to work with dynamic display (ex. display="inline@small") #983
• Bolt Link: Removed line breaks from <bolt-link> lit-html templates causing unwanted whitespace; also removed line breaks from lit-html templates in renter-lit-html's slot() method #1005
• Bolt Button: Fixes a bug when a <bolt-button width="full"> does not appear to be full width when used inside of another web component's <slot> #994

Docs, Demos, & Integrations

• Pattern Lab: Temporarily disabled our custom Pattern Lab PHP patch that automatically indents and removes extra white space in the HTML code preview shown in the Pattern Lab. We'll re-enable once a better PHP library is put in place that suffer from memory issues! #966
• Vue.js Integration Added a workaround to the Vue.js example integration with Bolt -- fixes an issue with the Webpack build process not working as expected when running locally #972
• Schemas: Fix schema syntax when multiple props are deprecated in a single component #988
• Docs Site Added a boltdesignsystem.com-specific CSS fix to prevent the Bolt version selector from overlapping the off-canvas / side-nav on medium-ish screen sizes. #1001

Tools, Infrastructure, & Standards

• Deployments Updated the now.sh CLI library + config used for deploying Bolt updates to latest version; addresses deployment errors encountered + applies the latest security and maintenance updates from Zeit. #967

Deprecations

Utility Class Updates

The original CSS classes for 3 Bolt utility classes involving z-index and shadow have been deprecated and renamed to be consistent with the naming convention globally used for all other utility classes. #946 -

• Shadow and “Hoverable” Shadow Utility Class Demo
• Z-Index Utility Class Demo

These deprecated class names have been updated with the new syntax below and will be removed in the next major Bolt release, v3.0.0.

Bolt Button Component Updates: rounded prop is now border-radius

The rounded property for buttons is now deprecated and will be removed in a future major version of Bolt (Bolt v3.0).

Please use the new border_radius property in Twig (or border-radius in vanilla HTML) with a value of full instead when needing round or pill shaped buttons. #987

Bolt Figure Component Updates: image and icon props removed, media prop added

The image and icon props have been removed and a new property media added. media is an object that can contain an image, icon, video, or table. As the list of content types was growing, it made sense to group these options within a single property, media.

There are no known instances of the figure component in the wild at the moment, so we do not expect there to be any rework required to handle this schema change.

Bolt Ordered and Unordered List Package Name + Twig Filename Updated

As part of the updates in #978, the original ordered and unordered list components have been updated and re-published to NPM under a new package name.

Because the original packages are still available on NPM at the previous v2.2.2 Bolt release, no immenent updates are mandatory, however we stongly recommend switching over to the new NPM packages to take full advantage of the major improvements now available.

To Upgrade:

1. In your package.json file, remove any old references to @bolt/components-unordered-list & @bolt./components-ordered-list + add the new @bolt/components-ul and @bolt/components-ol dependencies
2. Next, in your .boltrc config, remove any old references to @bolt/components-unordered-list or @bolt/components-ordered-list and add the new @bolt/components-ul and @bolt/components-ol package names
3. Finally be sure to update any old references to the original Twig template names:

This is a hotfix release. It includes one high priority fix:

• Bolt core Javascript updates related to more consistent cross-browser rendering when dealing with dynamically injected content rendering as expected #993

Enhancements

• Added align prop for bolt-share. #922
• Significantly refactored and updated Bolt's build tools (900% speed increase!) #923
• Maintenance updates and improvements to our Bolt-integrated Drupal Lab instance #894
• Added brand new Bolt version selector dropdown to the Docs site header + initial implementation of the new <bolt-select> custom element. #906
• Update Lerna to latest version #932
• Break out the mutation observer logic currently used in the button component into it's own standalone JS utility library for reuse in Bolt core. #935
• Backported upstream Pattern Lab UIKit improvements #911
• Add pattern lab demos for grid component row_gutter and vinset #919
• Updated the new Bolt version selector on the docs site to optionally allow the Bolt version being selected to open in a new tab if the ⌘ (CMD) / meta key is being pressed down at the same time. #931
• Added additional logging to the Button component's 3rd party JS integration demo in Pattern Lab. #933
• Update the default sourcemap config settings used in Bolt's Webpack's devtool configuration for local dev #938
• Adds a new opacity scale setting to standardize opacities throughout the design system #944
• Update @bolt/build-tools to skip Bolt version check during non-prod builds #949
• Updated the Bolt Getting Started Guide to help improve the initial developer onboarding process #954
• @bolt/core updates to help address cross-browser rendering inconsistencies by switching over from HyperHTML to Google's Lit-HTML library + updating existing components accordingly #951
• Button component internal logic simplified to help improve cross-browser rendering + help reduce the number of moving parts #937
• Add cross browser polyfills for Template and Symbol to @bolt/core/polyfills (required for lit-html) #951

• Added two new React-inspired Javascript additions to @bolt/core: withContext and defineContext.
  • This enhancement allows parent components to define certain props that child components can now easily grab the value for + get alerted when the parent's data changes.

While not yet used by any components at the moment, these updates support several upcoming component enhancements (such as the in-progress work on the Card, Link, and List components) that involve contextual data and internal state management.

Check out this recent CSS Tricks article to learn more about the ideas behind this!

Fixes

• Fixed bolt-share's tight spacing issue in FF. #922
• Fixed a typo in the bolt-list twig file about the inset prop. #929
• Make Webpack build errors more descriptive regardless of reporting level #936
• Fix the dynamic import path to the "native shim" polyfill due to upstream changes in the main webcomponentsjs repo #934
• Fix form label theming, most notably when form labels appear in cards in IE 11 #930
• Add a variant of button for use in forms that does not invoke any Bolt javascript #940
• Add support for the grid component's row_gutter parameter in IE 11. #919
• Fix an issue with certain icons not rendering in Safari browsers #942
• Add a cache buster query string to the Bolt docs site head and footer’s main CSS and JS bundles #941
• Prevent bolt-nav-priority from rendering when no links are provided (prevents the chevron icon in navbar from appearing in Safari when there are no links to display) #945
• Addressed a Pattern Lab-specific issue with the async loaded Pattern Lab CSS (via LoadCSS) that had been causing an infinite loading loop in IE 11 -- interfering in reliably testing out JS updates #951

Deprecations

Three opacity-related utility classes are deprecated and will be removed in the next major Bolt release, v3.0.0.

Replace them with the recommended classes shown in the table below or one of the other classes documented at https://feature-opacity-scale.boltdesignsystem.com/pattern-lab/?p=styleguide-opacity

This is a hotfix release. It includes one high priority fix:

• Prevent double rendering of legacy content variable/block in bands #926

Bug Fixes

• Fixes visual bugs when the bolt-list's display prop is used in conjunction with other props such as spacing and border. #921
• Fixed a bug where bolt-button's align right was not displaying correctly. #920
• Update the video play button icon to ensure it looks consistent across all screen sizes #909
• Updated the new <bolt-list> component to ensure the list item styling doesn't trickle down to any other nested <bolt-list>s #917
• Fixed issue with Twig markup displayed in Pattern Lab being incorrectly displayed on a single line #918
• Fixed issue with the <bolt-button> component's rendered and ready events not getting emitted as expected. #924

This is a hotfix release. It includes one priority fix found during QA of the last pega.com release. That release went ahead as planned, but this unblocks a "fast follow" update.

• Fixed an issue when 2 buttons are used in a card, the button with the shorter amount of text would vertically align incorrectly #913

This is a hotfix release. It includes one high priority fix discovered during integration:

• Address extreme edge case of dynamically injected, server-side pre-rendered buttons not hydrating properly during the component's async rendering process. #916