Bug Fixes 🐛

• Image | JS | Fix images in tabs appearing fuzzy #1509 ([email protected] @danielamorse)
• Tabs | JS | Close dropdown menu after selecting tab item #1506 ([email protected] @danielamorse)

🏠 Internal

• Bolt v2.9.1 Release #1508 ([email protected] @sghoweri)

Misc 🔧

• [skip travis] chore(release): release v2.9.1 (@sghoweri)
• [skip travis] chore: update auto-release script (@sghoweri)
• [skip travis] chore: version bump PHP-related dependencies to v2.9.1 (@sghoweri)
• [skip travis] fix: revert PHP dependency version bump (@sghoweri)
• [skip travis] chore: update .incache file ([email protected])
• [skip travis] chore: version bump PHP-related dependencies to vnull ([email protected])

Authors: 4

• Daniel Morse ([email protected])
• Dan Morse (@danielamorse)
• Salem Ghoweri (@sghoweri)
• bolt-bot ([email protected])

Features & Enhancements ✨

• Feature: Add Support for Displaying Advanced (Hidden) Schema Props #1289 (@sghoweri @remydenton)
• Feature: Consolidate Travis Jobs #1498 (@sghoweri)
• Component Generator | Update | Use latest component conventions #1479 ([email protected] @remydenton)
• Epic - Typeahead: SVG Icon Pre-rendering #1381 (@sghoweri)
• Accordion | Test | Add e2e accordion test for inactive prop #1449 ([email protected] @remydenton)
• List | FE | Spacing consistency and code clean up #1338 (@mikemai2awesome @sghoweri)
• Next Bolt Release (v2.9.x?) #1423 (@adamszalapski @mikemai2awesome @remydenton @sghoweri [email protected] @nex3 @joekarasek)
• refactor(icon): change schema format Yaml => JSON #1318 (@remydenton @sghoweri)
• Tabs | Docs | Tabbed Band demo #1429 (@mikemai2awesome [email protected])
• Tabs | Test | Add Jest and e2e tests #1451 ([email protected] @remydenton)
• Make Schema Data Displayed in Pattern Lab Dynamic(ish) #1315 (@sghoweri)
• NPM | DEV | 'npm run start' creates huge CPU load #1397 (@adamszalapski @sghoweri)

Bug Fixes 🐛

• Add ms hint to bolt-animate; Remove console logs; Hide pathways image #1478 @glassdimly @joekarasek
• IE/Edge fixes for microjourneys #1491 @glassdimly @WessWillis
  • Radar has a strange background appearing in various browsers/states
  • Interactive Pathway nav active link has wrong color in dark theme
  • Animations have wrong color in light theme IE11 (css collision)
  • Automation has poor start position in IE11 (these are unanimated, static version needs to look good)
  • Triple Band connection gradient is off in edge/ie11 (don't use gradientTransform in an SVG)
  • Removed unused svg-animations twig file to avoid future confusion
• Core | JS | Fix tabs, accordion, carousel nesting bugs #1457 ([email protected] @remydenton)
• Hotfix: correct spacing for non-link navbar title #1393 (@mikemai2awesome @sghoweri)
• Fix: Update Table Component's HTML Parser To Not Break When Encountering HTML Comments #1287 (@sghoweri [email protected])
• Component Generator | FE | JS error with validateSchema #1330 (@adamszalapski @sghoweri)
• fix(build): error on yarn build:noisy; fix integer cast for verbosity… #1355 (@remydenton @sghoweri)

📝 Documentation

• Video | QA | Add Brightcove player demo page #1500 ([email protected] @remydenton)
• Fix: Backport Upstream Pattern Lab UIKit Bug Fixes #1388 (@sghoweri)
• Docs: Tips & Tricks on Building Web Components #1408 (@sghoweri @adamszalapski)
• feat(core-styles): add documentation to bolt-theme #1444 (@remydenton)

Misc 🔧

• [skip travis] chore: update .incache file ([email protected])
• chore: update Travis (@sghoweri)
• [skip travis] (@sghoweri)
• [skip travis] chore(release): update NPM script (@sghoweri)
• [skip travis] chore(release): temp updates to release script (@sghoweri)
• [skip travis] chore(release): release v2.9.0 ([email protected])
• [skip travis] chore: version bump PHP-related dependencies to v2.9.0 ([email protected])
• fix: handle untracked file changes before publishing (@sghoweri)
• fix: update release script to auto-release on release-2.x and release/2.x branch names (@sghoweri)
• [skip travis] chore: update .autorc config (@sghoweri)
• [skip travis] chore: update Auto plugin config (@sghoweri)

Authors: 9

• Salem Ghoweri (@sghoweri)
• Rémy Denton (@remydenton)
• Daniel Morse ([email protected])
• Mike Mai (@mikemai2awesome)
• Tadeusz Adam Szałapski (@adamszalapski)
• Natalie Weizenbaum (@nex3)
• Joseph Karasek (@joekarasek)
• Jeremy John @glassdimly
• Wess Willis @WessWillis

This is a small follow-up Bolt release that addresses the following items:

Bug Fixes 🐛

• Fix: Update Editor Template #1503 (@sghoweri)
• Tabs | Bug | Fix tabs inside band IE/Edge bug #1501 (@danielamorse)

Misc 🔧

• [skip travis] chore(release): publish v2.8.3 (@sghoweri)
• [skip travis] chore: update release NPM script (@sghoweri)
• [skip travis] chore: update Auto config (@sghoweri)

Authors: 2

• Salem Ghoweri (@sghoweri)
• Dan Morse (@danielamorse)

This is a small follow-up patch release to v2.8.1 to address a JavaScript merge conflict from the recent Tabs-related work.

Bug Fixes 🐛

• @bolt/components-tabs
  • fix: remove Tabs JS accidentally added when resolving merge conflict (@danielamorse)

Authors: 1

• Daniel Morse ([email protected])

This is a patch release with two primary updates:

1. Update the Tabs component to better support Tab Labels that can't fit in the space available
2. Update the Tabs, Accordion, and Video components to better handle heavily nested use cases.

Bug Fixes 🐛

• @bolt/build-tools, @bolt/components-tabs, @bolt/core
  • Feature/tabs adaptive menu #1497 ([email protected] @sghoweri)
• @bolt/components-accordion, @bolt/components-carousel, @bolt/components-tabs, @bolt/components-video
  • Fix for Video Controls Bar Bug #1496 (@sghoweri)

⚠️ Pushed to master

• @bolt/animations, @bolt/api, @bolt/build-tools, @bolt/components-accordion, @bolt/components-action-blocks, @bolt/components-animate, @bolt/components-background-shapes, @bolt/components-background, @bolt/components-band, @bolt/components-block-list, @bolt/components-blockquote, @bolt/components-breadcrumb, @bolt/components-button-group, @bolt/components-button, @bolt/components-card, @bolt/components-carousel, @bolt/components-chip-list, @bolt/components-chip, @bolt/components-code-snippet, @bolt/components-copy-to-clipboard, @bolt/components-critical-css-vars, @bolt/components-critical-css, @bolt/components-critical-fonts, @bolt/components-device-viewer, @bolt/components-dropdown, @bolt/components-figure, @bolt/components-form, @bolt/components-grid, @bolt/components-headline, @bolt/components-icon, @bolt/components-icons, @bolt/components-image, @bolt/components-li, @bolt/components-link, @bolt/components-list, @bolt/components-logo, @bolt/components-modal, @bolt/components-nav-indicator, @bolt/components-nav-priority, @bolt/components-navbar, @bolt/components-navlink, @bolt/components-ol, @bolt/components-page-header, @bolt/components-pagination, @bolt/components-placeholder, @bolt/components-ratio, @bolt/components-share, @bolt/components-site, @bolt/components-smooth-scroll, @bolt/components-stack, @bolt/components-sticky, @bolt/components-table, @bolt/components-tabs, @bolt/components-teaser, @bolt/components-text, @bolt/components-tooltip, @bolt/components-trigger, @bolt/components-typeahead, @bolt/components-ul, @bolt/components-video, @bolt/core, @bolt/components-editor, @bolt/generator-bolt, @bolt/global, @bolt/micro-journeys, @bolt/ssr-server, @bolt/testing-server, @bolt/testing-helpers, @bolt/jest-config
  • [skip travis] chore(release): publish v2.8.1 (@sghoweri)

Authors: 2

• Daniel Morse ([email protected])
• Salem Ghoweri (@sghoweri)

In addition to the updates previously released in the v2.8.0-beta.1 through v2.8.0-beta.6 releases (see below for links), this release also includes the following:

Bug Fixes 🐛

• Hotfix: Tooltip Refactor + Updates #1487 (@sghoweri)
• @bolt/components-editor
  • fix(editor): use package name for import #1480 (@glassdimly)
• fix: update intersection observer logic to kick off the animations when the With/Without UI is 50% (or more) visible on the screen (@sghoweri)
• feat(with-without): toggle outline removal on hover-capable devices #1476 (@glassdimly @charginghawk)
• @bolt/components-tooltip
• @bolt/components-animate, @bolt/components-editor, @bolt/micro-journeys
  • Feat/micro journey little fixes #1482 (@glassdimly)
• @bolt/components-animate
  • Hotfix/with without fixes #1471 (@glassdimly @charginghawk)

Authors: 3

• Jeremy John (@glassdimly)
• Salem Ghoweri (@sghoweri)
• Thomas M. Charging Hawk (@charginghawk)

Links to Past v2.8.0 Releases

• v2.8.0-beta.6
• v2.8.0-beta.5
• v2.8.0-beta.4
• v2.8.0-beta.3
• v2.8.0-beta.2
• v2.8.0-beta.1

Features & Enhancements ✨

• @bolt/micro-journeys
  • Fix/micro journey mobile styles #1463 (@WessWillis)
• @bolt/micro-journeys
  • Feature/dropdown close on select #1412 (@joekarasek @sghoweri)
• @bolt/components-animate
  • feat: speed up default exit animation to create a smoother experience #1470 (@joekarasek)
• @bolt/components-ratio, @bolt/core, @bolt/drupal-twig-extensions, @bolt/twig-renderer, @bolt/uikit-workshop
  • Self-drawing Circle and Ratio Fix + Update Dependencies #1468 (@sghoweri)
• @bolt/micro-journeys
  • Feat/dark theme context for svg animations #1461 (@WessWillis @glassdimly)
• @bolt/core, @bolt/micro-journeys
  • Upgrade withContext Solution #1472 (@sghoweri)
• @bolt/micro-journeys
  • chore(micro-journeys): remove destructured assignment to prevent trut… #1464 (@glassdimly @joekarasek)

Bug Fixes 🐛

• @bolt/micro-journeys
  • fix: multiple layout fixes for micro journeys on small-ish screen sizes #1473 (@sghoweri)
• @bolt/micro-journeys
  • fix: z-index clash between dropdown menu and status bars #1469 (@joekarasek)
• @bolt/core, @bolt/micro-journeys
  • Fix/context js error on svg animations #1467 (@glassdimly)
• @bolt/micro-journeys
  • Fix triple band SVG animation #1440 (@WessWillis)
• @bolt/micro-journeys
  • Fix/text links #1450 (@WessWillis)

⚠️ Pushed to master

• fix: update with/without to use the latest version of Bolt Core (@sghoweri)
• feat: add auto to semi-automate releases (@sghoweri)
• chore: bump utils package version (@sghoweri)
• ci: setting correct version of @bolt/testing-utils on top level ([email protected])
• feat(micro-journeys): add theme toggler to micro journeys demo (@glassdimly)
• fix(image): prevent error where initialClasses were not defined in time ([email protected])
• @bolt/core-php
  • chore: update composer.lock (@sghoweri)
• @bolt/animations, @bolt/api, @bolt/build-tools, @bolt/components-accordion, @bolt/components-action-blocks, @bolt/components-animate, @bolt/components-background-shapes, @bolt/components-background, @bolt/components-band, @bolt/components-block-list, @bolt/components-blockquote, @bolt/components-breadcrumb, @bolt/components-button-group, @bolt/components-button, @bolt/components-card, @bolt/components-carousel, @bolt/components-chip-list, @bolt/components-chip, @bolt/components-code-snippet, @bolt/components-copy-to-clipboard, @bolt/components-critical-css-vars, @bolt/components-critical-css, @bolt/components-critical-fonts, @bolt/components-device-viewer, @bolt/components-dropdown, @bolt/components-figure, @bolt/components-form, @bolt/components-grid, @bolt/components-headline, @bolt/components-icon, @bolt/components-icons, @bolt/components-image, @bolt/components-li, @bolt/components-link, @bolt/components-list, @bolt/components-logo, @bolt/components-modal, @bolt/components-nav-indicator, @bolt/components-nav-priority, @bolt/components-navbar, @bolt/components-navlink, @bolt/components-ol, @bolt/components-page-header, @bolt/components-pagination, @bolt/components-placeholder, @bolt/components-ratio, @bolt/components-share, @bolt/components-site, @bolt/components-smooth-scroll, @bolt/components-stack, @bolt/components-sticky, @bolt/components-table, @bolt/components-tabs, @bolt/components-teaser, @bolt/components-text, @bolt/components-tooltip, @bolt/components-trigger, @bolt/components-typeahead, @bolt/components-ul, @bolt/components-video, @bolt/core-php, @bolt/core, @bolt/drupal-twig-extensions, @bolt/components-editor, @bolt/generator-bolt, @bolt/global, @bolt/micro-journeys, @bolt/ssr-server, @bolt/testing-server, @bolt/testing-helpers, @bolt/jest-config, @bolt/twig-renderer, @bolt/uikit-workshop
  • v2.8.0-beta.6 (@sghoweri)
• @bolt/build-tools, @bolt/components-blockquote, @bolt/components-card, @bolt/components-critical-fonts, @bolt/components-device-viewer, @bolt/components-figure, @bolt/components-image, @bolt/components-logo, @bolt/components-teaser, @bolt/global
  • Merge branch 'release/2.x' into develop (@sghoweri)
• @bolt/core-php
  • [skip travis] chore(release): version bump PHP-related dependencies to v2.8.0-beta.6 (@sghoweri)
• @bolt/micro-journeys
  • fix: fix overflow issue on smaller screen sizes (@sghoweri)
• @bolt/micro-journeys
  • Merge branch 'fix/micro-journey-rwd-fixes' into develop (@sghoweri)
• @bolt/micro-journeys
  • fix: remove click event listener when disconnecting + remove preventDefault that was causing UI like buttons to not click as expected as a result (@sghoweri)
• @bolt/animations, @bolt/api, @bolt/build-tools, @bolt/components-accordion, @bolt/components-action-blocks, @bolt/components-animate, @bolt/components-background-shapes, @bolt/components-background, @bolt/components-band, @bolt/components-block-list, @bolt/components-blockquote, @bolt/components-breadcrumb, @bolt/components-button-group, @bolt/components-button, @bolt/components-card, @bolt/components-carousel, @bolt/components-chip-list, @bolt/components-chip, @bolt/components-code-snippet, @bolt/components-copy-to-clipboard, @bolt/components-critical-css-vars, @bolt/components-critical-css, @bolt/components-critical-fonts, @bolt/components-device-viewer, @bolt/components-dropdown, @bolt/components-figure, @bolt/components-form, @bolt/components-grid, @bolt/components-headline, @bolt/components-icon, @bolt/components-icons, @bolt/components-image, @bolt/components-li, @bolt/components-link, @bolt/components-list, @bolt/components-logo, @bolt/components-modal, @bolt/components-nav-indicator, @bolt/components-nav-priority, @bolt/components-navbar, @bolt/components-navlink, @bolt/components-ol, @bolt/components-page-header, @bolt/components-pagination, @bolt/components-placeholder, @bolt/components-ratio, @bolt/components-share, @bolt/components-site, @bolt/components-smooth-scroll, @bolt/components-stack, @bolt/components-sticky, @bolt/components-table, @bolt/components-tabs, @bolt/components-teaser, @bolt/components-text, @bolt/components-tooltip, @bolt/components-trigger, @bolt/components-typeahead, @bolt/components-ul, @bolt/components-video, @bolt/core-php, @bolt/core, @bolt/drupal-twig-extensions, @bolt/components-editor, @bolt/generator-bolt, @bolt/global, @bolt/micro-journeys, @bolt/ssr-server, @bolt/testing-server, @bolt/testing-helpers, @bolt/jest-config, @bolt/nightwatch-config, @bolt/testing-utils, @bolt/twig-renderer, @bolt/critical-css-webpack-plugin, @bolt/prerender-spa-plugin, @bolt/uikit-prerenderer, @bolt/uikit-workshop
  • Merge branch 'release/2.x' into develop (@sghoweri)

Authors: 5

• Salem Ghoweri (@sghoweri)
• Wess Willis (@WessWillis)
• Joseph Karasek (@joekarasek)
• Jeremy John (@glassdimly)
• Evan Lovely ([email protected])

This is a patch release that pulls in and releases the exact same updates in the v2.7.3 release but for the upcoming Bolt v2.8.0 release.

This release addresses an issue with the Image component's lazyloading behavior that was causing the fallback image (src attribute) to not display as expected in older browsers that don't natively support srcset.

Updated Packages:
 - @bolt/[email protected]
 - @bolt/[email protected]
 - @bolt/[email protected]
 - @bolt/[email protected]
 - @bolt/[email protected]
 - @bolt/[email protected]
 - @bolt/[email protected]
 - @bolt/[email protected]
 - @bolt/[email protected]

This is a patch release to address an issue with the Image component's lazyloading behavior that was causing the fallback image (src attribute) to not display as expected in older browsers that don't natively support srcset.

This update adjusts the <img> tag's HTML to more closely match the recommended lazysizes config + adds additional tests to help catch issues like this in the future. Also adds an extra fallback layer to try and generate a fallback src path if srcset is defined.

Updated Packages:
 - @bolt/[email protected]
 - @bolt/[email protected]
 - @bolt/[email protected]
 - @bolt/[email protected]
 - @bolt/[email protected]
 - @bolt/[email protected]
 - @bolt/[email protected]
 - @bolt/[email protected]
 - @bolt/[email protected]

This is a small patch release which adds the a missing NPM package (fuse.js) to the recently released Typeahead component.

Changes:
 - @bolt/components-page-header: 2.7.0 => 2.7.1
 - @bolt/components-typeahead: 2.7.0 => 2.7.1

Enhancements & Updates

• Renamed the @bolt/with-without package to @pegawww/with-without as prep for handing this off to the Drupal team
• Moved W/WO demos to the new Experiments section in Pattern Lab:
  • https://boltdesignsystem.com/pattern-lab/?p=viewall-experiments-with-without
• New Slide Up / Slide Down animations added to the Animate component
• New SVG icons added: https://boltdesignsystem.com/pattern-lab/?p=viewall-components-icon
  • credit-card
  • close-circled
  • face-happy
  • face-sad
  • chart-bar
  • exclamation
• Updated the Custom Events polyfill used in @bolt/core for improved Animation support in IE 11 support
• JavaScript bug fixes and cleanup in the the original W/WO code (ex. errors are no longer thrown on pages not using any of the W/WO code)
• Optimized image assets used in W/WO (shaving off almost 11MBs in total!)

Additional Updates

• Updated the Build Tools to allow for scoped NPM packages (ex. @pegawww/with-without) to be added to the Twig namespaces auto-registered.
• Fixed a Base Theme-related Build Tools issue when testing to see if Icons should get automatically compiled: https://github.com/bolt-design-system/bolt/pull/1453/files#diff-7cca2c9ae3aaa93176f56d4578c0e174
• Backported a Build Tool update slated for v2.9.0 which addresses a Build Tool issue when the verbosity config option is set to 5 (the most verbose output when compiling) #1355
• Updated the Build Tools to now handle JPG image assets being run through Webpack (ex. background images referenced in Sass files)
• Added the mousetrap and react-html-parser packages missing from the recently released Typeahead component CC @christophersmith262

Enhancements & Updates

• Added a new inactive prop to the Accordion component to allow individual Accordion items to be optionally "deactivated" in certain use cases (ex. using a collection of accordions to display an agenda and needing to account for items without any nested content).

Note: as a best practice (and out of caution), this is an opt-in option since there's no sensible way to know f this behavior always applies to 100% of all components / use cases, or if an accordion item currently (or will eventually) contain content (ex. if content gets dynamically injected...).

Closes out http://vjira2:8080/browse/WWWD-4037

• Added the experimental @bolt/animations Sass package to help support ongoing projects.

CC @charginghawk @EvanLovely @joekarasek @WessWillis @glassdimly @danielamorse @margoromo @adamszalapski @mikemai2awesome @christophersmith262

• editor: emit save event https://github.com/bolt-design-system/bolt/commit/c8821e549de90b8641d8846e4003de0bec472fcd

New Tabs web component #1337

Tabs organize multiple panels of related content, allowing users to view one panel at a time.

Tabs Resources

• Tabs docs and demos

Tabs Examples

New Typeahead web component #1401

Typeahead is an input field with dropdown-like listbox that displays suggested results that most closely match a user's given search term.

Typeahead Resources

• Typeahead docs and demos
• Link to Javascript used in demos

Typeahead Examples

Demo of linking directly to a Typeahead suggestion

Demo of linking to pre-populated search results

Example integration of Typeahead + Global Search #1401

Global Search + Typeahead Resources

• Link to demo
• Source code for reference
  • Sass updates
  • Twig updates

Enhancements & Updates

Demo of Background valign Added

• Add demo of background image valign option which gives users some control over the focal point of background images. #1339
  • Check out the Background valign demos

Bug Fixes

• Fixed a size issue with Accordion content container shadows. #1367
• Travis CI / DevOps updates to fix Puppeteer errors + temp workaround to patched packages in @bolt/core and @bolt/components-image #1407

Extra huge thanks to @danielamorse, @mikemai2awesome, @adamszalapski, @remydenton, @margoromo, and @christophersmith262 for all the help getting this out the door!!

New Web Component: <bolt-animate>

​
Incredibly flexible animation possibilities come from this new web component. Wrap it around any other component or HTML and easily set animations on them.
​

<bolt-animate in="fade-in-slide-up">
  <h2>This heading will fade in and slide up when triggered</h2>
</bolt-animate>

​

• Has 3 animation stages: in for "build in" that control how it appears on the page once triggered, once completed it goes to the idle animation stage (could be a subtle pulse), and then an out animation can be triggered for "build out" animations like "fade out slide down"
• Each of the stages can set the duration, easing, and delay
• Events emit upon the completion of these stages for easy integration into a wide variety of circumstances
• Multiple <bolt-animate>s can be used together for orchestrating complex multi-step animations by specifying the order of either the in or out animations; see example below:
  ​

<div id="my-animations">
  <bolt-animate in="fade-in" in-duration="1000" in-order="1">
    <h2>1st fade in</h2>
  </bolt-animate>
​
  <bolt-animate in="fade-in" in-duration="1000" in-order="3">
    <h2>3rd fade in</h2>
  </bolt-animate>
  
  <bolt-animate in="fade-in" in-duration="1000" in-order="2">
    <h2>2nd fade in that happens in parallel to below</h2>
  </bolt-animate>
  
  <bolt-animate in="fade-in" in-duration="1000" in-order="2">
    <h2>2nd fade in that happens in parallel to above</h2>
  </bolt-animate>
</div>

​
To trigger the animations of the above markup, use the JS below:
​

import { triggerAnimsInEl } from '@bolt/components-animate/utils';
​
const animationWrapper = document.getElementById('my-animations');
​
triggerAnimsInEl(animationWrapper).then(() => {
  console.log('All animations complete');
});
​

​

Micro Journeys web components collection

​
A collection of web components that help to explain an individuals journey to solve an issue by communicating with others. What does that mean? Well, it includes these components:
​

• A vertical tab panel that shows different steps along the way
• Characters that have different expressions and are connected to other characters
• Supporting components like dialog boxes around those characters
• Heavy usage of the <bolt-animate> component to animate these components in a way that tells a story
  ​
  Take a look at a bit of it in action to get an idea:
  ​
  ​
  ​

Editor

​
A next generation editor for authoring portions of web pages using web components brings many exciting opportunities! Once Web Components from Bolt (or other places) have been registered in the editor, it's possible to drag and drop them around, select them to alter their attributes to change appearance, update text and much more. The Micro Journeys, Editor, and Animate component have been part of a bigger goal of creating custom experiences that aren't one-offs and this is really exciting. The Editor will grow to be able to work with much more than the Micro Journeys as more of Bolt is added. Here's a quick sample:
​

Super huge thanks to @danielamorse, @EvanLovely, @mikemai2awesome, @TashaBasalt, @adamszalapski, @joekarasek, @relimck, @remydenton, @christophersmith262, and @margoromo for all of your hard work getting this latest release of the Bolt Design System out the door!! 🎉

What's New?

✨New @bolt/critical-path-polyfills Package

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

Component Updates, Enhancements & Fixes

Image

• ⚡️ Image-related web performance improvements + misc fixes #1240
• 🐛 Fixed an unreported issue with dynamically injected Images causing lazysizes to not know to lazyload the new images now on the page
• 🐛 Fixed an issue with the Image component occasionally rendering before lazysizes has finished booting up. #1368

Modal

• ✨ Added a new toggle Javascript method. #1327
• 🐛 Fixed the color of the modal's close button in IE11. #1306
• 🔨 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
• 📝 Better modal documentations and misc CSS enhancements #1319
• ✏️ Fixed a typo in the demo showing how to use the Modal component to display an image with caption text. This typo addresses an issue causing the caption's markup to not display correctly. #1225

Button

• ♿ Add the disabled HTML attribute to Button's inner elements when the disabled prop is set. #1260
• 💄 Updated Button to remove double-outline from on focus. #1276
• ♻️ Improved server-side rendering of the Button component's Twig template when a URL's target is defined via Drupal's {{ attributes }} object instead of the default target prop. #1266
• ✅ Rewrote Button's manual testing instructions so they are up to date with testing pages. #1358

Link

• 🐛 Updated the Link component to prevent duplicate IDs from getting added when passed along via the attributes object #1329
• 💄 Updated Link to remove double-outline from on focus. #1276

Action Blocks

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

Nav Indicator

• 🐛 Fixed a bug with the Nav indicator in IE11. #1310

Navlink

• ♻️ Updated the Navlink Javascript to fix an error getting thrown if a link that gets clicked on isn't a link that would get scrolled to. #1322

Video

• 📝 Add comment about autoplay behavior on iOS #1347

Trigger

• ♿ Add the disabled HTML attribute to Trigger's inner elements when the disabled prop is set. #1260

Code Snippet

• ♿ Updated the component's Twig template to work better when Javascript is disabled / hasn't finished loading #1224

Navbar

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

Carousel

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

Icons

• 👽 Updated JS-generated SVG icons due on upstream SVGO / compression updates #1333

Autolink / Autotrack

• ♻️: 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

Sticky

• 🐛 Changed sticky z-index to not cover up mega nav #1291
• ✅ Added Jest snapshot tests, Nighwatch functional testing, and TESTING.md manual testing steps to the Sticky component #1251

Basic Jest snapshot tests, manual testing docs, and some Nightwatch tests added for:

• ✅Placeholder
• ✅Blocklist
• ✅Button Group
• ✅ Table
• ✅ Headline
• ✅ Band
• ✅ Device Viewer
• ✅ Copy to Clipboard

Core & Build Tools Updates

Bolt Core

• 🐛 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 \
• 🐛 Sass hotfix to address a few of the auto-generated utility classes for padding / spacing being different for Japanese-specific lang builds. #1265
• ✨ 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.

Build Tools

• ✨ Updated the browserSync config to ignore watching files for changes in the node_modules and vendor directories. This should fully restore the ability to run npm start in Drupal and utilize Webpack Dev Server and live reloading! #1323
• ✨ 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
• ✨ 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!
• 🔧 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
• 🔧 Adjusts the CLI logic for toggling internationalization on / off #1362
• 📝 Added docs on configuring language-specific builds using the @bolt/build-tools #1267
• 👽 Fixed errors in the Build Tools caused by a recent upstream dependency change #1362
• ✅ Updated @bolt/build tools Jest snapshots to reflect minor CSS changes #1333

Infrastructure, Examples, & Docs Site Updates

Infrastructure

• ✨ 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
• ✨Added a new suite of testing utilities (including a powerful new way to walk through Twig-based dependencies) + quicker Jest tests via #1226
• ⚡️ 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
• ⚡️Decreased time to run Jest tests by ~70% (4 minutes faster!) 🎉 #1282
• 🔧 Updated the 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 -- speeds up server-side rendering by ~128x (~0.01s response)!! #1309
• 🏗 Incorporated several different updates to 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 global type checking (not compiling) of Javascript files in the Bolt monorepo using TypeScript via yarn test:types.
• ➕ Added missing yeoman-doctor dependency needed for Bolt's Yeoman component generator #1333
• ➕ Updated the monorepo install process to properly install and pre-build the new @bolt/critical-path-polyfills package #1333

Docs Site

• 🚀 Migrated all Bolt code deployments to use static site hosting on Now.sh v2 + stop using Docker containers for deployments. #1249
• 💄 Pattern Lab UIKit visual improvements #1255
• 🐛Squashed a bunch of IE-specific Pattern Lab bugs #1255
• 📝 Added developer docs on manually cutting a Bolt release. #1283
• 📝 Added guidelines for when (and when not) to patch npm packages on the consumer/Drupal side #1301

Drupal Lab

• ✅ Added new 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

Deprecations

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

By the numbers:

• ~52 new features, improvements, and maintenance updates!
• 9+ bugs squashed
• 2 code deprecations
• 10 contributors
• 451 commits (excluding merge commits)

Commits Per Person (v2.5.7...v2.6.0)

• 252 Salem Ghoweri
• 66 Daniel Morse
• 39 Evan Lovely
• 35 Mike Mai
• 23 Tasha Zuniga
• 21 Adam Szałapski
• 6 Joe Karasek
• 4 Marcin Religa
• 3 Rémy Denton
• 2 Chris Smith

• ♿ Accessibility / Usability
• 💥 Breaking changes
• ✨ New features
• 🐛 Bug fix
• ✏️ Typo
• 💄 Cosmetic improvements / UI and style updates
• ♻️ Refactoring code
• ✅ Adding / updating tests + Snapshots
• ⚡️Performance improvements
• 📝 Writing and updating docs
• 🔧 Configuration changes
• 👽 Updating code due to external API changes.
• 🏗 Architectural changes
• 🚀 Deployment-related work

Check out the full emojii guide.

New features, improvements & maintenance

• ✨ 8
• 📝 5
• ⚡️ 3
• 🔧 4
• ♿ 3
• 👽 2
• 💄 5
• ♻️ 4
• 🏗 3
• ➕ 2
• 🚀 1
• ✅ 13

Code deprecations

• 💥 2

Bug Fixes

• 🐛 9

This is a small patch release to address an issue with the Build Tools caused by a recent behavior change to an upstream dependency (Sass Loader). #1361

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

Besides the updates released in the first v2.6.0 beta, this pre-release of the Bolt Design System includes the following changes:

Bug Fixes

Image Component Lazyloading Fix

• Fixed an unreported issue with the Image component’s lazyloading functionality that had been causing dynamically injected Images to not fully lazy load the image.

Build Tools Hotfix Ported Over (#1362)

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

Fast Follow Updates after the initial v2.6.0-beta.1 release (#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 #1326

Documentation

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

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

• 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

This is a small hotfix release which addresses a few minor v2.5.x-related items.

Fixes

Modal

• Fixed quirky animation flash in IE11 when hovering over buttons inside modal. #1298
• Updated modal to prevent visible shift of content caused by scrollbar on open and close. #1296

Trigger

Added IE11 fallback for zoom-in and zoom-out options for bolt-trigger's cursor prop. #1300

Focus Trap

Fixed focus-trap IE11 JS error that caused images to be distorted. #1293

Updates

Modal

Restored regular width prop option. #1299