Bolt v2.6.0-beta.2

[sghoweri]

v2.6.0-beta.2 Updates

Fixes

Build Tools Hotfix (Port of #1362)

• Fixes errors in the Build Tools caused by a recent upstream dependency change
• Adjusts the CLI logic for toggling internationalization on / off

v2.6.0-beta.1 Fast Follow Updates #1333

• Added missing yeoman-doctor dependency needed for Bolt's Yeoman component generator
• Updated @bolt/build tools Jest snapshots to reflect minor CSS changes
• Updated the monorepo install process to properly install and pre-build the new @bolt/critical-path-polyfills package
• Updated JS-converted SVG icons based on upstream SVGO / compression updates

Deprecations

• Deprecate isBackgroundVideo prop Video | FE | Deprecate isBackgroundVideo prop #1326

Documentation

• Added guidelines for when (and when not) to patch npm packages on the consumer/Drupal side Document guidelines for npm patch-package usage #1301
• Add comment about autoplay behavior on iOS Video | Docs | Add comment about autoplay on iOS #1347

Updates released in v2.6.0-beta.1

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. Image + Ratio Component Fixes / Improvements #1240

Modal Component

• Added a new toggle Javascript method. Modal | JS | Add toggle 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. Modal | JS | Add page scrolling option #1304

Button / Trigger Component

• Add disabled attribute to bolt-button and bolt-trigger inner elements when prop is set. Button | HTML | Add missing 'disabled' attribute to button and trigger #1260
• Updated bolt-button and bolt-link to remove double-outline from on focus. Button/Link | Bug | Double focus styles on button and link #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. Button | Twig | Add missing 'target' attribute #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! Build Tools | Dev | Update Browsersync Config To Allow Customizable Proxy Url #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() Video | FE | Add 'env' to global JS, wrap 'env' and 'lang' in JSON.stringify #1241
• Added docs on configuring language-specific builds using the @bolt/build-tools docs: add quick writeup on configuring language-specific builds in Bolt #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. Feature: Improve Navbar Spacing #1290

Code Snippet Component

• Updated the <bolt-code-snippet> component's Twig template to work better when Javascript is disabled / hasn't finished loading Code-snippet | Bug | Fix for code-snippet component to correct work without JS  #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. Action Blocks | Testing | Update include path and add tests #1233

Carousel Component

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

Developer Docs

• Added developer docs on manually cutting a Bolt release. Docs | Manually Cutting a Bolt Release #1283

Testing & Documentation Improvements

• Added Jest snapshot tests + TESTING.md manual testing steps to the Block List component Block-list | Docs | Testing and documentation for block-list component #1222
• Added Jest snapshot tests + TESTING.md manual testing steps to the Placeholder component Placeholder | Docs | Testing and Documentation for Placeholder component #1215
• Added Jest snapshot tests + TESTING.md manual testing steps to the Button Group component Button-group | Docs | Testing and documentation for button-group component #1217
• Added component testing + updated component docs and demos for the Table component Table | Docs | Component testing and documentation  #1216
• Added Jest Snapshot tests + manual testing guidelines for the Headline component Headline | Docs | Testing and Documentation for Headline Component #1210
• Added component testing + updated component docs and demos for the Band component Band | Docs | Testing and documentation for band component #1195
• Added Jest snapshot tests, Nighwatch functional testing, and TESTING.md manual testing steps to the Sticky component Sticky | Docs | Testing and documentation for sticky components #1251
• Added basic Jest snapshot testing + TESTING.md manual testing steps for the Device Viewer component Device-viewer | Docs | Testing and Documentation for device-viewer component  #1238
• Added Jest snapshot testing, E2E functional testing, and TESTING.md manual testing steps to the Copy To Clipboard component Copy-to-clipboard | Docs | Testing and documentation on copy-to-clipboard feature #1242

---

Bug Fixes

• Modal Component: Fixed the color of the modal's close button in IE11. Fix: correct close button color 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. Analytics | Bug | Fix Autotrack and Autolink JS Errors When GA Config / GA Script Missing #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. Navlink | Bug | Prevent JS errors in Navlink When Clicking on "Non Scroll-to" Links #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. Hotfix | IE11 | "Access Denied" in getOwnPropertyNames #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. Fix: typo in image modal's caption markup #1225
• Changed sticky z-index to not cover up mega nav Fix: change 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. Bolt start command on external projects #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 fix: 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! Turn SSR Server from CLI to HTTP2 Service #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!) 🎉 Speed Up 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. Feat: Improve Test Consistency + Better Handle VRT Failures #1272
  

• Added a new suite of testing utilities (including a powerful new way to walk through Twig-based dependencies) + quicker Jest tests via Add dependency mapper and quicker Jest tests #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. DevOps: Temporarily Switch Deploys to Static HTML-only; Upgrade to Now.sh v2 #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). Example integrations auto dependencies update #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! Improve UIKit Rendering Performance + Speed Up CI Installs #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. Chore: Rename Yeoman Component Generator's Package.json Name #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. Fix: add trigger as dependency for modal #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. Hotfix: Remove Device Viewer Logic Overriding The Image Component's Sizes Prop #1257
• Fix build tools --config-file option to restore multiple language-specific builds Next Bolt Release: v2.6.0 #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. Fix bolt-text component spacing in IE #1231
• Fixed Internet Explorer 11 bug which caused the edges of background videos to be hidden. Video | QA | Fix background video bug in IE #1248

Details

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