Skip to content

Bolt v2.4.0 Released!

Compare
Choose a tag to compare
@sghoweri sghoweri released this 15 May 17:24
· 11932 commits to master since this release

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

image
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

cleanshot 2019-03-02 at 10 07 49

Docs Site Search

Added a new Algolia-powered docs site search to help moving around the Bolt Design System documentation site. #1132

F160EA75-A490-447D-AAC6-7059C12CECC1

400%+ More Component Tests!

Before:
image

After
image

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

image

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

2019-01-10 at 2 06 pm

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

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
    image

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.