Component updates and refinements in 2.4.5

In this set of updates you'll find that vf-form has improved UX, vf-grid works better in Internet Explorer 11 and much more. Read on.

This releases 2.4.5 to the CDN

[`https://assets.emblstatic.net/vf/v2.4.5/css/styles.css`](https://assets.emblstatic.net/vf/v2.4.5/css/styles.css)
[`https://assets.emblstatic.net/vf/v2.4.5/scripts/scripts.js`](https://assets.emblstatic.net/vf/v2.4.5/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](/building).

## Legacy browser support ### [vf-grid](https://latest.visual-framework.dev/components/vf-grid/) 1.4.0 npm git diff * fixes flexbox fallback grid when there are items on two or more rows. * fixes widths on flexbox fallback grid. ## Form improvements In [PR 1228](https://github.com/visual-framework/vf-core/pull/1228/) a number of enhancements were made the vf-form user experience and visuals. While many vf-form child components update to a full 2.0.0 release, updating should be fairly straightforward — mostly involving updates to spacing using vf-stack. ### [vf-form__form__checkbox](https://latest.visual-framework.dev/components/vf-form__form__checkbox/) 2.0.0 npm git diff * Changes hover/focus interaction. * Adds inline example. ### [vf-form__core](https://latest.visual-framework.dev/components/vf-form__core/) 1.1.0 npm git diff * Updates example to use stack. * Includes example of inline radios. ### [vf-form__helper](https://latest.visual-framework.dev/components/vf-form__helper/) 2.0.0 npm git diff * Makes the font size larger. * Changes the red to use the red from the EMBL palette. ### [vf-form__input](https://latest.visual-framework.dev/components/vf-form__input/) 2.0.0 npm git diff * Changes styling of the inputs. * Changes order of form helpers, error messages, etc. * Updates example .njk to use stack. ### [vf-form__item](https://latest.visual-framework.dev/components/vf-form__item/) 2.0.0 npm git diff * Changes styling of the inputs. * Updates CSS to use vf-stack. ### [vf-form__label](https://latest.visual-framework.dev/components/vf-form__label/) 2.0.0 npm git diff * Changes required SVG fill color to red. * Makes the required SVG half the relative size of the text. ### [vf-form__radio](https://latest.visual-framework.dev/components/vf-form__radio/) 2.0.0 npm git diff * Changes hover/focus interaction. * Adds inline example. ### [vf-form__select](https://latest.visual-framework.dev/components/vf-form__select/) 2.0.0 npm git diff * Adds vf-stack in example code. * Changes some of the styling to match inputs. ### [vf-form__textarea](https://latest.visual-framework.dev/components/vf-form__textarea/) 2.0.0 npm git diff * Adds vf-stack in example code. * Changes some of the styling to match inputs. ## Bug fixes and improvements ### [vf-video-teaser](https://latest.visual-framework.dev/components/vf-video-teaser/) 2.0.0 npm git diff * Uses `vf-stack` to space component. * Adds `if` statement for the heading. * Makes it possible to have more than one teaser. * Makes the link the whole 'item' like `vf-card`. ### [vf-section-header](https://latest.visual-framework.dev/components/vf-section-header/) 1.3.2 npm git diff * Removes an extra `}` in the Nunjucks template that was corrupting the html. * Better handle whitespace. * https://github.com/visual-framework/vf-core/pull/1317 ### [ebi-header-footer](https://latest.visual-framework.dev/components/ebi-header-footer/) 2.0.0 npm git diff * Ensure black bar does not have a margin at the top due to vf-stack. ### [vf-intro](https://latest.visual-framework.dev/components/vf-intro/) 1.4.5 npm git diff * Move the example content into a default variant to stop it printing out when using `render`. ### [vf-intro](https://latest.visual-framework.dev/components/vf-intro/) 1.4.4 npm git diff * Fixes a missing vf_intro_subheading vf-intro.njk's context. * Fixes README.md invalid example syntax. * https://github.com/visual-framework/vf-core/pull/1326 ### [ebi-header-footer](https://latest.visual-framework.dev/components/ebi-header-footer/) 2.0.0 npm git diff * Adds distinct footer, header templates as the header currently has more legacy dependencies. * Uses the new 2.0 look and feel footer. * Uses contentHub to load templates. * https://github.com/visual-framework/vf-core/pull/1316