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

Deprecations

- Remove all unwanted children blocks from twig templates #1036

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

v2.4.0-beta.0

Enhancements

Components

Tools, Infrastructure, & Standards

Fixes

Docs

Deprecations

How to convert Band Component `items` to `pinned_content`

Band Component: Deprecated `items` prop

New `pinned_content` prop

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

Release Preview

v2.4.0-beta.0

Enhancements

Components

Tools, Infrastructure, & Standards

Fixes

Docs

Deprecations

How to convert Band Component items to pinned_content

Band Component: Deprecated items prop

New pinned_content prop

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

Release Preview

How to convert Band Component `items` to `pinned_content`

Band Component: Deprecated `items` prop

New `pinned_content` prop

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