@sghoweri sghoweri released this Jan 30, 2019 · 659 commits to master since this release

Enhancements

Components

  • Bolt Icons: Added the solid-star icon to the Bolt icon library. #1002
  • Bolt List:
    • Added the ability to set the display prop to flex -- allows the list component to now
      have horizontal and vertical dividers on the nested list-items #986
    • Converted the relatively new <bolt-list> component to now be a fully baked web component #965 (see deprecation notes below to upgrade)
  • Bolt Link:
    • Converted the existing <bolt-link> component to now be fully client-side renderable as a standalone web component #963
    • Add docs for <bolt-link> web component usage. #982
  • Bolt Video
    • Added testing checklist docs for the current <bolt-video> component #955
    • Updated the <bolt-video> component to now allow for the "Share This Video" text be translated via a new optional config property #971
    • Updated the component to support displaying embedded calls to action (Cue Points) while a video is supported by a particular player and video playing. #997
    • Updated to add support for the new plugin system to allow plugins to get automatically added / removed from a particular video player instance automatically via the custom element. #997
  • Bolt Button
    • Added an initial set of <bolt-button> component testing checklist items for both automated and manual testing #952
    • Cleanup up and documented button CSS class sorting logic #968
  • Bolt Ratio: Migrated / promoted the existing Bolt Ratio object to being a standalone, individually installable Bolt component (without introducing any major breaking changes in the process) #939
  • Bolt Image and Bolt Video: Added Jest snapshot component rendering testing for the <bolt-image> and <bolt-video> components to verify the <bolt-ratio> dependency specified is getting pulled in and compiled as expected #939
  • Bolt Button and Bolt Link: Refactored and simplified to use the new BoltAction base class #1000
  • Bolt Ordered and Unordered List: Convert the original Ordered and Unordered List components to web components; includes better support for multi-level and nested lists #978
  • Bolt Figure: Convert <bolt-figure> to a fully client-side renderable web component; Twig figure template now accepts table and video content, in addition to image and icon #989
  • Added the new @bolt/components-critical-css package for handling cross browser support for async CSS loading (via the <link rel="preload"> tag). #1039

Docs, Demos, & Integrations

  • API and Deployments: Replaced static site hosting with an Express server and a Docker deployment and wiring up the Bolt API! #990
  • Blog: Added new high fidelity prototypes of the upcoming Blog work based on approved designs #910
  • CKEditor Integration:
    • Added the CKEditor 5 Demo to Bolt for prototyping out and demoing deep integration work #975
    • Set up proof-of-concept CK Editor integration with Bolt components #981
  • Schemas: Added the ability to hide or show a prop in the schema table on the Pattern Lab site #995
  • Reference Prototypes
    • Cleaned up outdated mockup pages in Pattern Lab #958
    • Use json data to streamline and remove redundant markup in demo pages #969
  • Component Explorer / Performance:

Tools, Infrastructure, & Standards

  • Build Tools / Travis CI: Refactored and updated our build and continuous integration process to speed up Travis CI builds by around 300% (from ~20 minutes down to around 6 or 7 minutes), in part by combining the two separate docs and Pattern Lab sites into one single Bolt-powered docs-site. #1008
  • Build Tools
    • Updated @bolt/build-tools to automatically add Bolt component dependencies that are missing from the consumer’s .boltrc config file #939
    • Added the ability to compile Typescript .ts, and .tsx files in Bolt's local Webpack Build #964
  • Coding Standards Update component-level Sass formatting based on updates to Bolt's Stylelint coding standards #947
  • Animation & Rendering: Added 3 new demos to Bolt to highlight major rendering performance differences + a potential new technique to help address issues with scale -- particularly necessary with upcoming animation work. #964
  • Bolt Action Base Class: Added a new base class that contains the shared functionality and behavior of links and buttons, and extend that when adding new "actionable" components (ex. chips, navlinks, etc), rather than extending the link or button components themselves. #1000
  • Bolt Core:
    • Updated the @bolt/core click event handler util to allow toggling JavaScript methods that are on the window (vs only allowing methods that are on an element itself)
    • Updated the @bolt/core base component to no longer immediately trigger a component without any props to render (via the updated() method call) -- fixes a minor issue discovered with the new Context API additions in #961 that can cause components using the new withContext functionality to have undefined values initially until the component finishes rendering #964

Fixes

Components

  • Bolt Core / Polyfill Loader: Updated the Bolt Core polyfill loader test to more specifically check for IE 11 (to opt out of loading the Shady DOM polyfill) — intended to address a noticeable performance hit with Bolt v2.2.0. #999
  • Bolt Core: Fixed a styling regression that was preventing the default @bolt/core spacing scale values from being updated. This update will make the more optimized whitespace styles match the improved typography styles. #1029
  • Bolt Code Snippet
    • Updated the <bolt-code-snippet> to ensure certain special characters like &, <, > are escaped to render as expected #973
    • Updated the <bolt-code-snippet> component to apply escaping to all languages #985
  • Bolt Table: Updated the <bolt-table> component's CSS fix to address a cross-browser theming bug with it's border color when compiled for production #977
  • Bolt List
    • Fixed the <bolt-list> component's separator prop to work with dynamic display (ex. display="inline@small") #983
    • Fixed an issue with the inline list's horizontal alignment in IE11, and props not rendering in real time when using the web component. #1043
    • Fixed an issue with the inline list's horizontal alignment in IE11, and props not rendering in real time when using the web component. #1052
    • Fixed a Twig issue with the new <bolt-list> component's inset prop not rendering correctly #948
  • Bolt Link: Removed line breaks from <bolt-link> lit-html templates causing unwanted whitespace; also removed line breaks from lit-html templates in renter-lit-html's slot() method #1005
  • Bolt Button: Fixes a bug when a <bolt-button width="full"> does not appear to be full width when used inside of another web component's <slot> #994
  • Ordered and Unordered List Fixed issue with how IE and Edge render the list component's bullet and number background

Docs, Demos, & Integrations

  • Fixed broken image paths in the Bolt Card examples that test dynamically injected (personalized) behavior. #1051

  • Pattern Lab: Temporarily disabled our custom Pattern Lab PHP patch that automatically indents and removes extra white space in the HTML code preview shown in the Pattern Lab. We'll re-enable once a better PHP library is put in place that suffer from memory issues! #966

  • Vue.js Integration Added a workaround to the Vue.js example integration with Bolt -- fixes an issue with the Webpack build process not working as expected when running locally #972

  • Schemas: Fix schema syntax when multiple props are deprecated in a single component #988

  • Docs Site

    • Added a boltdesignsystem.com-specific CSS fix to prevent the Bolt version selector from overlapping the off-canvas / side-nav on medium-ish screen sizes. #1001
    • Hotfix to address a display: flex + min-height related layout issue in IE 11 and Firefox that was causing certain bands to display incorrectly on the Bolt docs site #1061
    • Updated the boltdesignsystem.com's site-specific grid + class name logic to address layout-related visual regression issues flagged #1050

Tools, Infrastructure, & Standards

  • Deployments Updated the now.sh CLI library + config used for deploying Bolt updates to latest version; addresses deployment errors encountered + applies the latest security and maintenance updates from Zeit. #967
  • Address two dependency-related items flagged with the initial Bolt v2.3.0 release candidate. #1035
  • Update to better handle situation when the aggregated data about the latest tagged versions of Bolt has expired however the user / machine doesn't have a GITHUB_TOKEN token in their env variable and/or we've already hit our Github API rate limit. #1021
  • Increased internal incache cache config’s max age + updates to skip cache behavior when deploying #1030
  • Updated @bolt/build-tools to better handle any number of different ways the lang config option can be set in a .boltrc config file. #1029

Deprecations

Utility Class Updates

The original CSS classes for 3 Bolt utility classes involving z-index and shadow have been deprecated and renamed to be consistent with the naming convention globally used for all other utility classes. #946 -

These deprecated class names have been updated with the new syntax below and will be removed in the next major Bolt release, v3.0.0.

Replace deprecated utility class names in these formats With utility classes matching these formats
u-bolt-z-index--xx u-bolt-z-index-xx
u-bolt-shadow--xx u-bolt-shadow-xx
u-bolt-shadow--xx--hoverable u-bolt-shadow-xx-hoverable

Bolt Button Component Updates: rounded prop is now border-radius

The rounded property for buttons is now deprecated and will be removed in a future major version of Bolt (Bolt v3.0).

Please use the new border_radius property in Twig (or border-radius in vanilla HTML) with a value of full instead when needing round or pill shaped buttons. #987

Bolt Figure Component Updates: image and icon props removed, media prop added

The image and icon props have been removed and a new property media added. media is an object that can contain an image, icon, video, or table. As the list of content types was growing, it made sense to group these options within a single property, media.

There are no known instances of the figure component in the wild at the moment, so we do not expect there to be any rework required to handle this schema change.

Bolt Ordered and Unordered List Package Name + Twig Filename Updated

As part of the updates in #978, the original ordered and unordered list components have been updated and re-published to NPM under a new package name.

Because the original packages are still available on NPM at the previous v2.2.2 Bolt release, no immenent updates are mandatory, however we stongly recommend switching over to the new NPM packages to take full advantage of the major improvements now available.

To Upgrade:

  1. In your package.json file, remove any old references to @bolt/components-unordered-list & @bolt./components-ordered-list + add the new @bolt/components-ul and @bolt/components-ol dependencies
  2. Next, in your .boltrc config, remove any old references to @bolt/components-unordered-list or @bolt/components-ordered-list and add the new @bolt/components-ul and @bolt/components-ol package names
  3. Finally be sure to update any old references to the original Twig template names:
Old Twig Template Path Updated Twig Path
@bolt-components-unordered-list/unordered-list.twig @bolt-components-ul/ul.twig
@bolt-components-ordered-list/ordered-list.twig @bolt-components-ol/ol.twig
Assets 2

@sghoweri sghoweri released this Jan 8, 2019 · 674 commits to master since this release

Bolt v2.3.0 Release Candidate

Enhancements

Components

  • Bolt Icons: Added the solid-star icon to the Bolt icon library. #1002
  • Bolt List: Added the ability to set the display prop to flex -- allows the list component to now
    have horizontal and vertical dividers on the nested list-items #986
  • Bolt List: Converted the relatively new <bolt-list> component to now be a fully baked web component #965 (see deprecation notes below to upgrade)
  • Bolt Link: converted the existing <bolt-link> component to now be fully client-side renderable as a standalone web component #963
  • Bolt Video: Added testing checklist docs for the current <bolt-video> component #955
  • Bolt Video: Updated the <bolt-video> component to now allow for the "Share This Video" text be translated via a new optional config property #971
  • Bolt Video: Updated the component to support displaying embedded calls to action (Cue Points) while a video is supported by a particular player and video playing. #997
  • Bolt Video: Updated to add support for the new plugin system to allow plugins to get automatically added / removed from a particular video player instance automatically via the custom element. #997
  • Bolt Button: Added an initial set of <bolt-button> component testing checklist items for both automated and manual testing #952
  • Bolt Button: Cleanup up and documented button CSS class sorting logic #968
  • Bolt Ratio: Migrated / promoted the existing Bolt Ratio object to being a standalone, individually installable Bolt component (without introducing any major breaking changes in the process) #939
  • Bolt Image and Bolt Video: Added Jest snapshot component rendering testing for the <bolt-image> and <bolt-video> components to verify the <bolt-ratio> dependency specified is getting pulled in and compiled as expected #939
  • Bolt Button and Bolt Link: Refactored and simplified to use the new BoltAction base class #1000
  • Bolt Ordered and Unordered List: Convert the original Ordered and Unordered List components to web components; includes better support for multi-level and nested lists #978
  • Bolt Figure: Convert <bolt-figure> to a fully client-side renderable web component; Twig figure template now accepts table and video content, in addition to image and icon #989

Docs, Demos, & Integrations

  • API and Deployments: Replaced static site hosting with an Express server and a Docker deployment and wiring up the Bolt API! #990
  • Blog: Added new high fidelity prototypes of the upcoming Blog work based on approved designs #910
  • CKEditor Integration: Added the CKEditor 5 Demo to Bolt for prototyping out and demoing deep integration work #975
  • CKEditor Integration: Set up proof-of-concept CK Editor integration with Bolt components #981
  • Schemas: Added the ability to hide or show a prop in the schema table on the Pattern Lab site #995
  • Reference Prototypes Cleaned up outdated mockup pages in Pattern Lab #958
  • Reference Prototypes: Use json data to streamline and remove redundant markup in demo pages #969
  • Bolt Link: Add docs for <bolt-link> web component usage. #982
  • Component Explorer / Performance: The new component explorer on https://boltdesignsystem.com now renders nearly twice as fast! #1013

Tools, Infrastructure, & Standards

  • Build Tools / Travis CI: Refactored and updated our build and continuous integration process to speed up Travis CI builds by around 300% (from ~20 minutes down to around 6 or 7 minutes), in part by combining the two separate docs and Pattern Lab sites into one single Bolt-powered docs-site. #1008
  • Build Tools Updated @bolt/build-tools to automatically add Bolt component dependencies that are missing from the consumer’s .boltrc config file #939
  • Coding Standards Update component-level Sass formatting based on updates to Bolt's Stylelint coding standards #947
  • Animation & Rendering: Added 3 new demos to Bolt to highlight major rendering performance differences + a potential new technique to help address issues with scale -- particularly necessary with upcoming animation work. #964
  • Build Tools: Added the ability to compile Typescript .ts, and .tsx files in Bolt's local Webpack Build #964
  • Bolt Action Base Class: Added a new base class that contains the shared functionality and behavior of links and buttons, and extend that when adding new "actionable" components (ex. chips, navlinks, etc), rather than extending the link or button components themselves. #1000
  • Bolt Core: Updated the @bolt/core click event handler util to allow toggling JavaScript methods that are on the window (vs only allowing methods that are on an element itself)
  • Bolt Core: Updated the @bolt/core base component to no longer immediately trigger a component without any props to render (via the updated() method call) -- fixes a minor issue discovered with the new Context API additions in #961 that can cause components using the new withContext functionality to have undefined values initially until the component finishes rendering #964

Fixes

Components

  • Bolt Core / Polyfill Loader: Updated the Bolt Core polyfill loader test to more specifically check for IE 11 (to opt out of loading the Shady DOM polyfill) — intended to address a noticeable performance hit with Bolt v2.2.0. #999
  • Bolt List: Fixed a Twig issue with the new <bolt-list> component's inset prop not rendering correctly #948
  • Bolt Code Snippet: Updated the <bolt-code-snippet> to ensure certain special characters like &, <, > are escaped to render as expected #973
  • Bolt Code Snippet: Updated the <bolt-code-snippet> component to apply escaping to all languages #985
  • Bolt Table: Updated the <bolt-table> component's CSS fix to address a cross-browser theming bug with it's border color when compiled for production #977
  • Bolt List Fixed the <bolt-list> component's separator prop to work with dynamic display (ex. display="inline@small") #983
  • Bolt Link: Removed line breaks from <bolt-link> lit-html templates causing unwanted whitespace; also removed line breaks from lit-html templates in renter-lit-html's slot() method #1005
  • Bolt Button: Fixes a bug when a <bolt-button width="full"> does not appear to be full width when used inside of another web component's <slot> #994

Docs, Demos, & Integrations

  • Pattern Lab: Temporarily disabled our custom Pattern Lab PHP patch that automatically indents and removes extra white space in the HTML code preview shown in the Pattern Lab. We'll re-enable once a better PHP library is put in place that suffer from memory issues! #966
  • Vue.js Integration Added a workaround to the Vue.js example integration with Bolt -- fixes an issue with the Webpack build process not working as expected when running locally #972
  • Schemas: Fix schema syntax when multiple props are deprecated in a single component #988
  • Docs Site Added a boltdesignsystem.com-specific CSS fix to prevent the Bolt version selector from overlapping the off-canvas / side-nav on medium-ish screen sizes. #1001

Tools, Infrastructure, & Standards

  • Deployments Updated the now.sh CLI library + config used for deploying Bolt updates to latest version; addresses deployment errors encountered + applies the latest security and maintenance updates from Zeit. #967

Deprecations

Utility Class Updates

The original CSS classes for 3 Bolt utility classes involving z-index and shadow have been deprecated and renamed to be consistent with the naming convention globally used for all other utility classes. #946 -

These deprecated class names have been updated with the new syntax below and will be removed in the next major Bolt release, v3.0.0.

Replace deprecated utility class names in these formats With utility classes matching these formats
u-bolt-z-index--xx u-bolt-z-index-xx
u-bolt-shadow--xx u-bolt-shadow-xx
u-bolt-shadow--xx--hoverable u-bolt-shadow-xx-hoverable

Bolt Button Component Updates: rounded prop is now border-radius

The rounded property for buttons is now deprecated and will be removed in a future major version of Bolt (Bolt v3.0).

Please use the new border_radius property in Twig (or border-radius in vanilla HTML) with a value of full instead when needing round or pill shaped buttons. #987

Bolt Figure Component Updates: image and icon props removed, media prop added

The image and icon props have been removed and a new property media added. media is an object that can contain an image, icon, video, or table. As the list of content types was growing, it made sense to group these options within a single property, media.

There are no known instances of the figure component in the wild at the moment, so we do not expect there to be any rework required to handle this schema change.

Bolt Ordered and Unordered List Package Name + Twig Filename Updated

As part of the updates in #978, the original ordered and unordered list components have been updated and re-published to NPM under a new package name.

Because the original packages are still available on NPM at the previous v2.2.2 Bolt release, no immenent updates are mandatory, however we stongly recommend switching over to the new NPM packages to take full advantage of the major improvements now available.

To Upgrade:

  1. In your package.json file, remove any old references to @bolt/components-unordered-list & @bolt./components-ordered-list + add the new @bolt/components-ul and @bolt/components-ol dependencies
  2. Next, in your .boltrc config, remove any old references to @bolt/components-unordered-list or @bolt/components-ordered-list and add the new @bolt/components-ul and @bolt/components-ol package names
  3. Finally be sure to update any old references to the original Twig template names:
Old Twig Template Path Updated Twig Path
@bolt-components-unordered-list/unordered-list.twig @bolt-components-ul/ul.twig
@bolt-components-ordered-list/ordered-list.twig @bolt-components-ol/ol.twig
Assets 2

@sghoweri sghoweri released this Jan 8, 2019 · 1192 commits to master since this release

This is a small hotfix release which updates the Bolt Core polyfill loader test to more specifically check for IE 11 in order to prevent the Shady DOM polyfill from loading unintentionally.

This addresses a performance hit in IE 11 with the initial Bolt v2.2.0 release.

Assets 2

@remydenton remydenton released this Dec 20, 2018 · 1196 commits to master since this release

This is a hotfix release. It includes one high priority fix:

  • Bolt core Javascript updates related to more consistent cross-browser rendering when dealing with dynamically injected content rendering as expected #993
Assets 2

@sghoweri sghoweri released this Nov 18, 2018 · 1207 commits to master since this release

Enhancements

  • Added align prop for bolt-share. #922
  • Significantly refactored and updated Bolt's build tools (900% speed increase!) #923
  • Maintenance updates and improvements to our Bolt-integrated Drupal Lab instance #894
  • Added brand new Bolt version selector dropdown to the Docs site header + initial implementation of the new <bolt-select> custom element. #906
  • Update Lerna to latest version #932
  • Break out the mutation observer logic currently used in the button component into it's own standalone JS utility library for reuse in Bolt core. #935
  • Backported upstream Pattern Lab UIKit improvements #911
  • Add pattern lab demos for grid component row_gutter and vinset #919
  • Updated the new Bolt version selector on the docs site to optionally allow the Bolt version being selected to open in a new tab if the ⌘ (CMD) / meta key is being pressed down at the same time. #931
  • Added additional logging to the Button component's 3rd party JS integration demo in Pattern Lab. #933
  • Update the default sourcemap config settings used in Bolt's Webpack's devtool configuration for local dev #938
  • Adds a new opacity scale setting to standardize opacities throughout the design system #944
  • Update @bolt/build-tools to skip Bolt version check during non-prod builds #949
  • Updated the Bolt Getting Started Guide to help improve the initial developer onboarding process #954
  • @bolt/core updates to help address cross-browser rendering inconsistencies by switching over from HyperHTML to Google's Lit-HTML library + updating existing components accordingly #951
  • Button component internal logic simplified to help improve cross-browser rendering + help reduce the number of moving parts #937
  • Add cross browser polyfills for Template and Symbol to @bolt/core/polyfills (required for lit-html) #951
  • Added two new React-inspired Javascript additions to @bolt/core: withContext and defineContext.
    • This enhancement allows parent components to define certain props that child components can now easily grab the value for + get alerted when the parent's data changes.

While not yet used by any components at the moment, these updates support several upcoming component enhancements (such as the in-progress work on the Card, Link, and List components) that involve contextual data and internal state management.

Check out this recent CSS Tricks article to learn more about the ideas behind this!

Fixes

  • Fixed bolt-share's tight spacing issue in FF. #922
  • Fixed a typo in the bolt-list twig file about the inset prop. #929
  • Make Webpack build errors more descriptive regardless of reporting level #936
  • Fix the dynamic import path to the "native shim" polyfill due to upstream changes in the main webcomponentsjs repo #934
  • Fix form label theming, most notably when form labels appear in cards in IE 11 #930
  • Add a variant of button for use in forms that does not invoke any Bolt javascript #940
  • Add support for the grid component's row_gutter parameter in IE 11. #919
  • Fix an issue with certain icons not rendering in Safari browsers #942
  • Add a cache buster query string to the Bolt docs site head and footer’s main CSS and JS bundles #941
  • Prevent bolt-nav-priority from rendering when no links are provided (prevents the chevron icon in navbar from appearing in Safari when there are no links to display) #945
  • Addressed a Pattern Lab-specific issue with the async loaded Pattern Lab CSS (via LoadCSS) that had been causing an infinite loading loop in IE 11 -- interfering in reliably testing out JS updates #951

Deprecations

Three opacity-related utility classes are deprecated and will be removed in the next major Bolt release, v3.0.0.

Replace them with the recommended classes shown in the table below or one of the other classes documented at https://feature-opacity-scale.boltdesignsystem.com/pattern-lab/?p=styleguide-opacity

Deprecated utility classes Suggested replacement
.u-bolt-opacity-75 .u-bolt-opacity-80
.u-bolt-opacity-50 .u-bolt-opacity-60
.u-bolt-opacity-25 .u-bolt-opacity-20
Assets 2

@remydenton remydenton released this Oct 23, 2018 · 1344 commits to master since this release

This is a hotfix release. It includes one high priority fix:

  • Prevent double rendering of legacy content variable/block in bands #926
Assets 2

@sghoweri sghoweri released this Oct 23, 2018 · 1348 commits to master since this release

Bug Fixes

  • Fixes visual bugs when the bolt-list's display prop is used in conjunction with other props such as spacing and border. #921
  • Fixed a bug where bolt-button's align right was not displaying correctly. #920
  • Update the video play button icon to ensure it looks consistent across all screen sizes #909
  • Updated the new <bolt-list> component to ensure the list item styling doesn't trickle down to any other nested <bolt-list>s #917
  • Fixed issue with Twig markup displayed in Pattern Lab being incorrectly displayed on a single line #918
  • Fixed issue with the <bolt-button> component's rendered and ready events not getting emitted as expected. #924
Assets 2

@remydenton remydenton released this Oct 18, 2018 · 1365 commits to master since this release

This is a hotfix release. It includes one priority fix found during QA of the last pega.com release. That release went ahead as planned, but this unblocks a "fast follow" update.

  • Fixed an issue when 2 buttons are used in a card, the button with the shorter amount of text would vertically align incorrectly #913
Assets 2
Oct 18, 2018