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.
On this page
This releases 2.4.9 to the CDN
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.
- 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
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.
- 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.
- 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.
- 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
- Adds the form options as their own set of components in the list.
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__content vf-boxsizing padding calculation for
- makes the maximum width of the
vf-hero__contentwider, but make smaller widths
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:
vf-search 2.0.0 npm git diff
- adds a div around the form content.
- makes changes to the CSS for
--inlinevariant so it's responsive to the parent width.
vf-sass-config 2.5.0 npm git diff
- adds neutral colour tokens function
vf-card 2.5.3 npm git diff
- Corrects fix in 2.5.2 by using
vf-card 2.5.4 npm git diff
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
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.