2.3.0 Component updates

20 Oct 2020

Components with breaking changes

vf-design-tokens 2.0.0 git diff

This release updates all spacing variables to use numbers for sizing. You can learn more about change in this post.

The following components have also been updated and now require vf-design-tokens 2.0.0.

• vf-banner 1.6.0
• vf-box 2.1.0
• vf-button 1.2.0
• vf-code-example 1.1.0
• vf-content 1.3.0
• vf-details 1.1.0
• vf-form__fieldset 1.1.0
• vf-form__label 1.2.0
• vf-form__legend 1.1.0
• vf-link-list 1.2.0
• vf-logo 1.4.0
• vf-masthead 1.2.0
• vf-page-header 1.1.0
• vf-sass-config 2.1.0
• vf-section-header 1.3.0

vf-utility-classes 2.0.0 git diff

• all utility classes that make use of spacing tokens now use numerical naming.
• updates documentation pages, as needed.
• requires v2.0.0 of the vf-design-tokens package or newer.

vf-divider 2.0.0 git diff

• removes the grid-column: 1 / -1; rule
• moves the margin into the @mixin available in vf-sass-config.
• adds --vf-divider--margin-block-end custom property to allow the overriding the block end margin as needed.

vf-sass-config 2.0.0 git diff

• removes the inline margin from the component.
• adds the block end margin an creates a Sass variable for $margin--block-end.
• adds width: 100%; as it was defaulting to width: auto;.

New components

vf-cluster 0.0.1 git diff

• Initital launch of the component. It is useable but the documentation needs refining.

Major new features

vf-stack 1.2.0 git diff

• now uses Nunjucks 'blocks' so we can use this layout more programatically.
• hides the defauly Nunjcuks file as it renders what looks like a blank page (because it's waiting for the block content).
• creates separate Nunjucks files to display variants in Fractal.
• updates naming conventions of variables available.
  • introduces stack__spacing__custom which will replace custom_spacing_property in the 2.0.0 component release.

vf-analytics-google 1.0.0-rc.6 git diff

• Track form element interactions
  • https://github.com/visual-framework/vf-core/issues/1161
• Explicit labels can be provided with data attributes: data-vf-analytics-label="A special label"
• Code linting
• Avoid logging clicks on non-interactive elements (white space, standard text)
• Reduce likelihood of logging multiple events
• vfGaIndicateLoaded() now accepts the options object vfGaTrackOptions
• with property vfGaTrackPageLoad. vfGaTrackOptions.vfGaTrackPageLoad defaults to true. If you set to false, the function will not track the initial page view. Useful if you track the initial page view with JavaScript in your HTML.
  • https://github.com/visual-framework/vf-core/issues/1116
• Track the users network: vfGaTrackOptions.vfGaTrackNetwork. As of February 2020 Google Analytics no longer tracks the network name of visitors. A 3rd party tool enables this, follow the setup guide at https://ipmeta.io/instructions (note there is no need to load https://ipmeta.io/plugin.js, this component includes it for you)
  • https://github.com/visual-framework/vf-core/issues/968
• analyticsTrackInteraction() is now namespaced

vf-core 2.2.7 git diff

• adds ESLint task and config
  • https://github.com/visual-framework/vf-core/issues/1143
• adds buildTimeStamp to componentInfo component sass map
  • https://github.com/visual-framework/vf-core/issues/974

vf-hero 1.7.0 git diff

• makes the padding on --intense standardised to our spacing units
• reduces height of all other variants
• currently this is the 'maximum space' the component will get to allow it's content to be readable.

Bug fixes

vf-component-initialization 1.0.1 git diff

• Pin dependencies to avoid issue with Fractal bootstrap
  • https://github.com/visual-framework/vf-core/pull/1170

vf-banner 1.5.1 git diff

• removes leftover console.log

Minor updates

vf-grid 1.3.0 git diff

• makes the layout something that can now use 'extends' within nunjucks

embl-grid 2.1.0 git diff

• makes the layout something that can now use 'extends' within nunjucks

vf-sass-compilation 1.0.2 git diff

• adds ESLint task and config
  • https://github.com/visual-framework/vf-core/issues/1143

vf-componenet-rollup 1.2.1 git diff

• adds buildTimeStamp from componentInfo to Sass template
  • https://github.com/visual-framework/vf-core/issues/974

vf-componenet-generator 1.0.3 git diff

• adds buildTimeStamp from componentInfo to Sass template
  • https://github.com/visual-framework/vf-core/issues/974

vf-u-fullbleed 1.2.0 git diff

• adds a CSS custom property for when a component with vf-u-fullbleed needs inline margins.