Announcing rollup release 2.4.9

In the month of March we've been busy with usability optimisations — particularly on major visual and functional improvements to the form elements — and other new components, fixes and improvements. Read on for more.

This releases 2.4.9 to the CDN

https://assets.emblstatic.net/vf/v2.4.9/css/styles.css
https://assets.emblstatic.net/vf/v2.4.9/scripts/scripts.js

As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, you can find a guide here.

Uncategorisable updates

Work continues on a Figma-based design kit and we consult on a standard level of accessibility (A vs AA vs AAA). More on both of these in the coming weeks.
On 12 April we'll hold our next quarterly Visual Framework consultation with our broad user base and determine priorities for the next three months. We'll do an update on the outcomes and update our roadmap.

The one that updates the forms

The vf-form components have received major version increments and new alpha releases.

Here's a visual before and after, and below you can read a detailed comparison.

Forms in 2.4.9

See the Pen vf-form 2.4.9 by Ken Hawkins (@khawkins98) on CodePen.

Forms in 2.4.8

See the Pen vf-form 2.4.8 by Ken Hawkins (@khawkins98) on CodePen.

Here's a detailed list of the changes visible above, and changes you're not seeing.

Style

We have gone through all the form elements to make sure there is consistency in colour, typography and spacing.
We have increased the hover and focus styles to inform the site visitor that they are inside a form input.
We have removed placeholder text as a default. Placeholders are usually badly used in place of a label. As all the form inputs require a label using a placeholder brings ‘noise’ that is not needed.
This is for every form input except for search. As the Search pattern is relatively well known and the button used ofter refers to the function we allow an HTML placeholder to be used to help define where in the site you are searching.
Changes the red to match the system. The agreed EMBL colour system includes tints and shades of red but before this release the form error states had a different tone of red. This update now matches the larger colour system.

Code

Split out the form elements so they all have their own folders rather than a sub-directory of vf-form__core
Removed vf-form__core as it is redundant.
Created vf-form as the standalone code for a form.
Added the vf-stack layout for the vf-form and vf-form__fieldset so labels, helper text, error messages, and inputs are nicely laid out vertically.
Added the vf-cluster for when you need to have a set of radio buttons or checkboxes inline.
Added more ‘nunjucks’ so you can create forms without needed to write out all of the HTML.
Updated the CSS for the necessary style changes.

Documentation

Added usage guidelines to each form element
Created code and visual examples of possible permutations of form elements.
Added ‘do’ and ‘do not’ use guidelines where appropriate.
Split the vf-form out so each form element has it’s own page.

Improvements to the component library

adds 'status banners' for components in the documentation page.
updates Design Tokens homepage.
adds neutral colour tokens
Updates to use 11ty 0.12.1
https://github.com/visual-framework/vf-core/pull/1435
Adds the form options as their own set of components in the list.
https://github.com/visual-framework/vf-core/pull/1390/files

New flag layout component

vf-flag 1.0.0-alpha.1 npm git diff

introduces the flag layout component.
adds all variants that match positions and spacing.g
makes use of nunjucks blocks from the start.

Enhancements and fixes

vf-hero 3.2.0 npm git diff

adds thinner vf-hero--400 variant.
fixes vf-hero__content vf-box sizing padding calculation for vf-hero--800 variant.
makes the maximum width of the vf-hero__content wider, but make smaller widths max-content.