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.

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.

vf-design-tokens 3.4.0 npm git diff

• introduces neutral colours stack Design Tokens.
• adds deprecation notices to relevant Design Tokens, to be remove in next major version release.

vf-stack 2.1.0 npm git diff

• adds more options: 200,500,1200, and 1600 vertical spaces.

vf-search 2.0.0 npm git diff

• adds a div around the form content.
• makes changes to the CSS for --inline variant so it's responsive to the parent width.

Chores

vf-sass-config 2.5.0 npm git diff

• adds neutral colour tokens function neutral(Nn)

vf-card 2.5.3 npm git diff

• Corrects fix in 2.5.2 by using align-content: start;.
• https://github.com/visual-framework/vf-core/issues/1395#issuecomment-801232527

vf-card 2.5.4 npm git diff

• adds word-break: break-word; to text so the text won't exceed the box model.

vf-frctl-extensions 1.0.1 npm git diff

• Updates highlightjs syntax of codeblock tag
• https://github.com/visual-framework/vf-core/pull/1435
• https://github.com/highlightjs/highlight.js/issues/2277

vf-search-client-side 1.0.2 npm git diff

• Updates to match v2.0.0 of vf-search--inline

vf-card-container 3.1.2 npm git diff

• Updates example to use content of different lengths.