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.
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.
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.
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.