Summary of recent component updates, release of 2.4.1 CSS, JS rollup

This releases prebuilt CSS and JS, and minor features and initial React support. Read on for more.

9 Dec 2020



This releases 2.4.1 to the CDN

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

## Initial React support While full React and Angular support remain goals with an unspecified date on the [VF roadmap](/about/roadmap), we're [trialing](https://github.com/visual-framework/vf-core/pull/1278) an initial approach to support React by wrapping the precompiled Angular templates. You can see it in use in the example [vf-react project](https://github.com/visual-framework/vf-react). We've added support for vf-button and vf-card for testing and [feedback](https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ). ### [vf-extensions-react](https://github.com/visual-framework/vf-core/tree/develop/tools/vf-extensions-react/#readme) 0.0.1 npm git diff * Initial release ### [vf-button](https://latest.visual-framework.dev/components/vf-button/) 1.3.0 npm git diff * adds react support * https://github.com/visual-framework/vf-core/pull/1278 ### [vf-card](https://latest.visual-framework.dev/components/vf-card/) 2.3.2 npm git diff * adds prototype react template * https://github.com/visual-framework/vf-core/pull/1278 ### [vf-component-generator](https://github.com/visual-framework/vf-core/tree/develop/tools/vf-component-generator/#readme) 1.1.0 npm git diff * adds _component.react.js template * https://github.com/visual-framework/vf-core/pull/1278 * updates _component.js to prepoulate vfComponentName() camel case syntax ## Minor refinements and enhancements ### [vf-search](https://latest.visual-framework.dev/components/vf-search/) 1.2.0 npm git diff * don't allow inline search box to get too large * add field for search description ### [vf-banner](https://latest.visual-framework.dev/components/vf-banner/) 1.7.0 npm git diff * Banner dismiss button now defaults to `vf-button--primary` (if a specific button variant has been requested by `vfJsBannerButtonTheme`, it will still be used) ## vf-hero fixes and tweaks Following the [2.0.0 release of vf-hero](/updates/2020-11-27-component-updates/), we have made several follow on fixes and refinements. ### [vf-hero](https://latest.visual-framework.dev/components/vf-hero/) 2.0.5 npm git diff * adds a `flex` property to the SVG so that it's always visible and doesn't get cut off. ### [vf-hero](https://latest.visual-framework.dev/components/vf-hero/) 2.0.4 npm git diff * fixes missing context rule for `hero__text` and `hero__heading--additional`. ### [vf-hero](https://latest.visual-framework.dev/components/vf-hero/) 2.0.3 npm git diff * adds the context options so the component can be used in 11ty with content separation. * changes `max-content` to `fit-content` so the `__content` element adapts to smaller viewports. * removes left padding from `--block` variant as it 'looked weird'.

Find an issue on this page? Propose a change or discuss it.