Bolt v2.3.3 Hotfix Released

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)

Bolt v2.3.2 Released

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!

Bolt v2.4.0 Released!

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.

More about the new init function

With these updates in #1089, a significant amount of the boilerplate code will no longer be required with every new / refactored Bolt Component.

Key Features

• Automatically configures the default component data based on what gets passed along + any defaults specified in the component schema
• Sets up Twig template-specific variables based on the default data + allowed values
• Converts the names of the Twig-friendly prop names from the schema into web component-friendly HTML attributes
• Automatically omits any default prop options from getting output to the web component HTML (this logic is handled internally by our web components so this isn't needed)

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.

More on the new component status board:

• The updates in #1126 improve how the collection of components listed out get linked to the cooresponding demnos in Pattern Lab, automatically.
• 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

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.

Grid Details

• Built on top of the new grid pre-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.

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 expec...

Bolt v2.3.1 Released

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!

v2.4.0-beta.0

Release Details:

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. Ad...

Bolt v2.3.0 Released!

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 ...

Bolt v2.3.0 Release Candidate

Bolt v2.3.0 Release Candidate

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.

Replace deprecated utility class names in these formats	With utility classes matching these formats
u-bolt-z-index--xx	u-bolt-z-index-xx
u-bolt-shadow--xx	u-bolt-shadow-xx
u-bolt-shadow--xx--hoverable	u-bolt-shadow-xx-hoverable

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:...

Bolt v2.2.2 Released

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.

Bolt v2.2.1

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

Bolt v2.2.0 Released!

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

Deprecated utility classes	Suggested replacement
.u-bolt-opacity-75	.u-bolt-opacity-80
.u-bolt-opacity-50	.u-bolt-opacity-60
.u-bolt-opacity-25	.u-bolt-opacity-20