Bolt v2.6.0-beta.1 Released!

Enhancements & Updates

New @bolt/critical-path-polyfills Package Added

• Published a new Bolt package containing a handful of Javascript polyfills that get inlined on the page. This should help assist with smoothing over some cross browser compatibility behavior with some 3rd party libraries! Check out the docs for more information!

Image Component: Performance Improvements

• Image-related bug fixes and performance improvements. #1240

Modal Component

• Added a new toggle Javascript method. #1327
• Turned off the noBodyScroll feature. This now allows the page to scroll behind the modal by default as a temporary workaround to prevent the page's content from shifting. #1304

Button / Trigger Component

• Add disabled attribute to bolt-button and bolt-trigger inner elements when prop is set. #1260
• Updated bolt-button and bolt-link to remove double-outline from on focus. #1276
• Improved Twig's server-side rendering of the Button component's target prop when target is defined via Drupal's {{ attributes }} object instead of the default target prop. #1266

Build Tool Improvements

• Updated the @bolt/build-tools to allow for customizing the full URL that gets proxied by Browsersync. This allows for non-Bolt provided servers (like Drupal) to benefit from live reloading when CSS and Javascript changes while doing local development! #1237
• Update @bolt/build-tools to add 'env' to the global data exposed to all JavaScript files (via Webpack) + wrap 'env' and 'lang' in JSON.stringify() #1241
• Added docs on configuring language-specific builds using the @bolt/build-tools #1267
• Updated the openServerAtStart config option to now try and reuse an existing browser tab previously opened. This should be a super helpful update for devs ever needing to restart the build tools while doing local development!

Core Sass Style Updates

• Added bolt-repeat-rule mixin to repeat a block of styles as a separate rule-set for each selector provided, helps keep :host rulesets DRY.

Navbar Component

• Tweaked the Navbar component's CSS rules to better handle the space between extra items added to the Navbar Title section + extra items added to the main content section of the Navbar. #1290

Code Snippet Component

• Updated the <bolt-code-snippet> component's Twig template to work better when Javascript is disabled / hasn't finished loading #1224

Action Blocks Component

• Updated include path in action-block.twig adaptor file from _action-block.twig to _action-block-item.twig. Added tests for adaptor file and deprecated props. #1233

Carousel Component

• Fixed a sub-pixel rendering issue with chevron icon used on carousel nav buttons. #1230

Developer Docs

• Added developer docs on manually cutting a Bolt release. #1283

Testing & Documentation Improvements

• Added Jest snapshot tests + TESTING.md manual testing steps to the Block List component #1222
• Added Jest snapshot tests + TESTING.md manual testing steps to the Placeholder component #1215
• Added Jest snapshot tests + TESTING.md manual testing steps to the Button Group component #1217
• Added component testing + updated component docs and demos for the Table component #1216
• Added Jest Snapshot tests + manual testing guidelines for the Headline component #1210
• Added component testing + updated component docs and demos for the Band component #1195
• Added Jest snapshot tests, Nighwatch functional testing, and TESTING.md manual testing steps to the Sticky component #1251
• Added basic Jest snapshot testing + TESTING.md manual testing steps for the Device Viewer component #1238
• Added Jest snapshot testing, E2E functional testing, and TESTING.md manual testing steps to the Copy To Clipboard component #1242

---

Bug Fixes

• Modal Component: Fixed the color of the modal's close button in IE11. #1306
• Autolink / Autotrack Components: Updated the Javascript to the @bolt/analytics-autolink and @bolt/analytics-autotrack packages to no longer throw a Javascript error if Google Analytics's Javascript never loads OR if a config for tracking external-bound links is undefined. #1321
• Navlink Component: Updated the Javascript to fix an error getting thrown if a link that gets clicked on isn't a link that would get scrolled to. #1322
• Added a JavaScript patch to @bolt/core’s standard suite of cross browser polyfills (specifically patching getOwnPropertyNames) to help address a downstream "Access Denied" error in IE 11. #1317
• Fixed a typo in the Pattern Lab demo showing how to use the Modal component to display an image with caption text. This fix addresses a typo in the markup that had been causing the caption's markup to not display correctly. #1225
• Changed sticky z-index to not cover up mega nav #1291
• Fixed an issue with the @bolt/build-tools browserSync config trying to watch files for changes in node_modules and vendor directories which had been causing issues when trying to run bolt start in certain project configurations. #1323

This should fully restore the ability to run npm start in Drupal and utilize Webpack Dev Server and live reloading!

• Sass hotfix to address a few of the auto-generated utility classes for padding / spacing being different for Japanese-specific lang builds.

This PR also updates our existing Drupal Lab tests to check that a temporary workaround fixes the issue in Drupal (immediate workaround using the most recent release of Bolt) + adds a new suite of tests for the latest upcoming release of our build tools. #1265

---

DevOps Updates

• Update nightwatch config to fix chrome driver issues #1328
• Major updates to Bolt’s Web Component Server Side Rendering Server thanks in huge part to @christophersmith262! #1309

The SSR server is now running as a persistent HTTP2 server (vs CLI previously), speeding up server-side rendering to be around 128x faster (~0.01s response)!! 🎉

• Decreased time to run Jest tests by ~70% (4 minutes faster!) 🎉 #1282

Before vs After Jest Test Speedup ⬆️

• Incorporated several different updates to fix and improve overall testing consistency in Bolt (ex. more predictable results when running Jest tests locally vs on Travis) in addition to better handling the results from successful / failing visual regression tests. #1272
  

• Added a new suite of testing utilities (including a powerful new way to walk through Twig-based dependencies) + quicker Jest tests via #1226

• Added global type checking (not compiling) of Javascript files in the Bolt monorepo using TypeScript via yarn test:types.

Note: Currently there are a lot of errors coming in and fine tuning the includes and excludes properties in tsconfig.json would be a good start to narrow the focus would be a good idea. The big advantage from this update is much better editor auto-completion. #1234

• Migrated all Bolt code deployments to use static site hosting on Now.sh v2 + stop using Docker containers for deployments. #1249

This update will significantly reduce our infrastructure costs with Now.sh by temporarily having all of our deployments be a static HTML deployments (ie. no PHP services and no Docker containers). The only main drawback with this update is that our Twig Rendering Service / Component Explorer needs to be temporarily disabled until we've finished working on getting this to work on Now.sh's new serverless architecture (lots of progress has been made on this thankfully!).

For the time being, a Component Explorer placeholder + message has been aded on all component docs pages this particular feature had been getting used -- namely on the Button, Navbar, and Carousel component sections in Pattern Lab.

• Added a new monorepo helper script to automatically update NPM dependencies in packages not managed by directly by Lerna (ex. the example integration demos using Vue, Angular, Drupal Lab, etc). #1205

  • Note: this eventually might get added and released as part of a standalone NPM package. TBD!

• DevOps related updates to upgrade Bolt’s Puppeteer instances to now use Puppeteer Core + launch using an instance of Chrome already installed; significantly speeding up / slimming down local dev installs + shaving nearly a minute off of our Travis CI build! #1255

Also includes a handful of UIKit visual improvements + a ton of IE-specific bug fixes that popped up when testing out these updates.

Before:

After:

---

Deprecations

• Renamed Bolt's Yeoman component generator package, generator-bolt to @bolt/generator-bolt to avoid publishing issues due to NPM namespace permissions. #1305

The old NPM package now points people to use the renamed package (including when installing the old NPM package via the command line).

Pre-Released in v2.5.3/4

• Added @bolt/components-trigger as an NPM dependency of @bolt/components-modal so this sub-component gets automatically NPM installed if it isn't manually listed out in a package.json. #1229
• Fixed a web performance-related issue in the Device Viewer's Twig template that had been causing the sizes prop in nested images to be overwritten with a less optimized config. #1257
• Fix build tools --config-file option to restore multiple language-specific builds #1232
• Updated the <bolt-text> component CSS to address a minor Sass-related regression in IE that had been causing the outer container to not display the correct display or margin styles. #1231
• Fixed Internet Explorer 11 bug which caused the edges of background videos to be hidden. #1248

Details

The slot="footer" was accidentally being used on the figcaption's container, which was a carryover from an older prototype.