v2.4.14

A roundup of minor work, more React support and small refinements to the component library.

https://stable.visual-framework.dev/updates/2021-05-05-component-updates/

v2.4.13

A minor release that introduces a new component, adds several fixes and new accessibility guidance.

https://stable.visual-framework.dev/updates/2021-04-20-component-updates/

v2.4.12

Hot off the heels of the 2.4.11 release, we're issuing a minor release that fixes a number of technical fixes and optimisations that will reduce the number of errors when building Sass and using the VF's JavaScript modules.

https://stable.visual-framework.dev/updates/2021-04-08-component-updates/

v2.4.11

Component Updates

vf-search-client-side

• Updates to replace v2.0.0 of vf-search--inline with vf-form--search vf-form--search--responsive

Deprecation

vf-navigation

• deprecated the --aditional variant.
• removes --main and --global Sass files, incoroprating them into the base stylesheet.
• tidies up quite a bit of CSS.
• makes use of vf-cluster for layout in the markup.
• adds some documentation.

vf-componenet-rollup

• removes navigation variants as they're now part of base Sass file.

Bugs and minor optimisations

vf-hero

• Resolves a Nunjucks bug on vf_hero_text from a yaml file under certain contexts.
• #1462
• Allows vf_hero_heading_href to be passed in yaml.
• Gobbles much of the whitespace.

vf-sass-starter

• dependency bump.

vf-banner

• adds deprecation notices around the --phase variant.

vf-design-tokens

• Adds a gulp command vf-design-tokens alias for developers who easily forget.

v2.4.5

See the release notes: https://stable.visual-framework.dev/updates/2021-01-15-component-updates/

v2.4.4

See the release notes: https://stable.visual-framework.dev/updates/2021-01-04-component-updates/

v2.4.3

See the release notes: https://stable.visual-framework.dev/updates/2020-12-21-component-updates/

v2.4.0

vf-hero 2.0.0 npm git diff

After on the left. The vf-hero has been tightened up. The syntax and behaviour have also been matured.

• introduces new naming convention for design variants
  • --inverted: that inverts the foreground and background colours
  • --flush: pulls the vf-hero__content to the bottom of the vf-hero
  • --offset: pulls the vf-hero__content below the vf-hero container
  • --centered: centres the vf-hero__content component
  • --block: makes the vf-hero__content bleed all the way ot the left of the page
  • --striped: inverts the vf-hero__text to that of what's set in vf-hero__content
  • --800, --1200, and --1600 spacing variants
• replaces vf-hero-theme-- with vf-hero-- for the primary, secondary, and tertiary variants
• removes the 'Mortal Kombat' naming convention
• reduces visible options of the new vf-hero
• older versions degrade gracefully to the default variant
• deprecates the --intense variant

Discussion and PR See the component

vf-card 2.3.0 npm git diff

After on the left. Similar to the vf-hero update, vf-card has been visually tightened up but without a breaking change. .

• adds new --bordered and --striped design variants
• added vf-stack to the vf-card__content element to determine spacing
• allows for the lack of vf-stack for older components
• started the deprecation of the 'Mortal Kombat' variants, initially by hiding them in vf-core
• introduced newTheme so the 'Mortal Kombat' variants can live side-by-side with news versions for now
  • the newTheme moves us back to the 'primary' being the embl green, the secondary the embl blue, etc
  • we now remove the -theme part of the css class moving forward as it's cleaner, easier to read, and states the same thing without it
• created theme variants of the new design variants (these are hidden, and should not be used)

Discussion and PR See the component

vf-frctl-theme deprecated git diff

We're now using the default Fractal theme for development.

When developing directly in ./tools/vf-core running gulp vf-dev will start the Fractal component library interface. Previously this was also the public-facing website for the Visual Framework, however we now use this 11ty-based website.

So the vf-frctl-theme had become an ongoing technical debt without much upside. It has now been deprecated and running gulp vf-dev will use Fractal's default Mandlebrot theme.

Discussion and PR

Minor features

vf-sass-config 2.3.0 npm git diff

• introduces a space Sass function to save the keystrokes
  • instead of typing map-get($vf-spacing-map, vf-spacing--400) you can write spacing(400) for the same result
  • #1258
• I've added this terse naming of the function for set-color and set-ui-color to be something like color(green) instead of set-color(vf-color--green). The old way still works
• fixes import order of vf-global-custom-properties.scss
  • #1263

vf-show-more 1.1.0 npm git diff

• drops dynamic css stylesheet in favour of a specific .vf-show-more__item-overflow class
• support more than one vf-show-more on a page
  • #1243

vf-design-tokens 3.1.0 npm git diff

• adds --1600 (4rem) spacing token

vf-summary 1.4.0 npm git diff

• makes the title of summary a little larger
• reduces margin a little on news
• removes the padding from events

vf-box 2.3.0 npm git diff

• updates font size for title/heading
• makes sure the text is black inside the --easy variant

Bug fixes

vf-u-fullbleed 1.2.2 npm git diff

• adds fallbacks for CSS that relied on CSS custom properties

embl-breadcrumbs-lookup 1.0.2 npm git diff

• adds aria role detection of current page

vf-breadcrumbs 2.0.1 npm git diff

• removes > from related crumbs

vf-sass-config 2.3.1 npm git diff

• fixes bug in --page-grid-gap printing Sass function in CSS

vf-hero 2.0.1 npm git diff

• adds the option to add an url to vf-hero__heading with nunjucks/yaml
  • gives the element a classname

vf-hero 2.0.2 npm git diff

• adds a width of max-content to the __content part of the component so short titles don't look silly

vf-card 2.3.1 npm git diff

• issue with margin-bottom still in place when using vf-stack with vf-card__content

v2.3.3

See the release notes: https://stable.visual-framework.dev/updates/2020-11-24-component-updates/

v2.3.3-rc.3

See the release notes: https://stable.visual-framework.dev/updates/2020-11-16-component-updates/