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.

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

Deprecations

- Removed unwanted children blocks from twig templates #1036

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.

Bolt v2.4.0 Released!