Skip to content

Releases: canonical/vanilla-framework

v4.11.0

07 May 16:35
e6d414d
Compare
Choose a tag to compare

Getting Vanilla Framework

Install with NPM: https://www.npmjs.com/package/vanilla-framework
Visit the documentation at https://vanillaframework.io/docs

New in Vanilla v4.11.0

💣 Potentially breaking change

In #5081 we renamed the class names that add dividers to equal heights row component. If you've been using those already, rename them accordingly: has-1st-divider to has-divider-1, etc…

🚀 Features

🐛 Bug Fixes

📝 Documentation

🔨 Maintenance

New Contributors

Full Changelog: v4.10.0...v4.11.0

v4.10.0

11 Apr 13:23
Compare
Choose a tag to compare

Getting Vanilla Framework

Install with NPM: https://www.npmjs.com/package/vanilla-framework
Visit the documentation at https://vanillaframework.io/docs

New in Vanilla v4.10.0

💣 Breaking changes

Setting default theme via SCSS variables is now deprecated. For example, using $theme-default-nav with value dark will not work anymore. Use is-dark or is-light class names in HTML instead.

🚀 Features

🐛 Bug Fixes

📝 Documentation

🔨 Maintenance

  • Use new theme colours in base styles by @bartaz (#5054)
  • Deprecate old theme variables and remove them from code and docs by @bartaz (#5052)
  • Remove get-site-urls dependency by @bartaz (#5049)
  • Fix Percy on CircleCI performance issues by @bartaz (#5048)
  • Fix access to localhost server on CircleCI by @bartaz (#5045)
  • Update dependency @canonical/cookie-policy to v3.6.0 by @renovate (#5038)
  • Update release-drafter/release-drafter action to v6 by @renovate (#5041)
  • Update all non-major dependencies by @renovate (#5040)

New Contributors

Full Changelog: v4.9.1...v4.10.0

v4.9.1

29 Mar 14:40
Compare
Choose a tag to compare

Getting Vanilla Framework

Install with NPM: https://www.npmjs.com/package/vanilla-framework
Visit the documentation at https://vanillaframework.io/docs

New in Vanilla v4.9.1

🐛 Bug Fixes

🔨 Maintenance

  • Move active/hover button opacity variables to settings by @bartaz (#5029)

Full Changelog: v4.9.0...v4.9.1

v4.9.0

14 Mar 13:04
2443401
Compare
Choose a tag to compare

Getting Vanilla Framework

Install with NPM: https://www.npmjs.com/package/vanilla-framework
Visit the documentation at https://vanillaframework.io/docs

New in Vanilla v4.9.0

🚀 Features

🐛 Bug Fixes

  • Fix regression that caused wrong success icon being used in lists by @bartaz (#5028)
  • Fix nested list counter by @codeEmpress1 (#5011)
  • Fix width of bold linked heading on hover in side-navigation by @codeEmpress1 (#5009)
  • Fix bug where u-fixed-width wasn't having its padding reset when inside the new row classes by @petesfrench (#5008)
  • Adjust columns on mobile view for step-list--detailed by @petesfrench (#5007)

📝 Documentation

🔨 Maintenance

New Contributors

Full Changelog: v4.8.0...v4.9.0

v4.8.0

16 Feb 16:46
Compare
Choose a tag to compare

New in Vanilla v4.8.0

💅 New theming

This version introduces new theming system to Vanilla. Previous system was based on theme styling being applied on SCSS level on per-component basis. Newly introduced system utilises CSS custom properties to provide colour variables that are inherited through the whole document.

We currently support a light theme (default or via is-light class name) that features white background, paper theme (via is-paper class) that uses new "paper" grey background that is used on most of our new designs, and dark theme (via is-dark class) that is being used more often in recent designs to highlight some significant pages.

🚧 Work in progress

Current release of Vanilla 4.8.0 contains the foundation work of this new theming and includes migration of most commonly used themed components. The work is not complete yet, there are still components that use the old theming system and many components not themed at all. We will continue to migrate remaining parts in upcoming versions.

We tried to make sure to keep this change backwards compatible, so hopefully it should not affect styling of existing components in any significant and unexpected way.

🎨 Default icon colour

As part of the theming we improved consistency of colours we use across themes. As a result of that the default colour of most of Vanilla icons (in default light theme) was changed to be the same as text colour (black #000) instead of previous value of $color-mid-dark (#666). If you are using any custom icons this may cause inconsistencies.

For consistency with Vanilla use built-in icons, or update your icons to use $colors--light-theme--icon (or $colors--dark-theme--icon), depending on the theme.

🏗️ New and deprecated components

Alongside the theming work, we are also providing components to help build page sections in the new branding style, and deprecating some old components to avoid confusion.

New components include the hero section and new Suru sections, that should simplify building of the hero sections on the pages.

We also deprecated a variety of legacy strip variants, reducing the options and updating the strip component to utilise new theming.

For more details check the changelog in our documentation.

💣 Breaking changes

The (now deprecated) inverted link component was updated to support new theming. This may cause an issue that inverted link turns black when used in default "light" theme. Please add is-dark class name for any element that changes background to dark, so that the child components would correctly inherit the theme.

🙋 Guest devs

Vanilla team was joined for a Pulse by wonderful guest developers: @britneywwc @chillkang. This release would not be possible without their contributions. Thanks!

📋 Changelog

🚀 Features

🐛 Bug Fixes

  • Fix overlap issues with sticky app layout panel headers by @bartaz (#4991)
  • Update Twitter/X icon and add support for dark theme to GitHub icon by @bartaz (#4978)

🔨 Maintenance

Getting Vanilla Framework

Install with NPM: https://www.npmjs.com/package/vanilla-framework
Visit the documentation at https://vanillaframework.io/docs

New Contributors

Full Changelog: v4.7.0...v4.8.0

v4.7.0

02 Feb 09:23
Compare
Choose a tag to compare

Getting Vanilla Framework

Install with NPM: https://www.npmjs.com/package/vanilla-framework
Visit the documentation at https://vanillaframework.io/docs

New in Vanilla v4.7.0

🚀 Features

  • Add 25/75 grid split support to top navigation by @bartaz (#4960)
  • Align top navigation items padding with grid margin by @bartaz (#4948)

💣 Potentially breaking changes

Updates to top navigation (increased padding and new 25/75 layout variant) may cause top navigation items not fit on smaller screens. If your project adjusts $breakpoint-navigation-threshold you may need to update its value, so that navigation switches to mobile view when items don't fit anymore.

🐛 Bug Fixes

🔨 Maintenance

Full Changelog: v4.6.0...v4.7.0

v4.6.0

16 Jan 09:22
Compare
Choose a tag to compare

Getting Vanilla Framework

Install with NPM: https://www.npmjs.com/package/vanilla-framework
Visit the documentation at https://vanillaframework.io/docs

New in Vanilla v4.6.0

🚀 Features

💣 Potentially breaking changes

With the introduction of new responsive grid patterns (row--25-75-on-medium, etc), the default responsive behaviour of row--25-75 has changed. Previously on medium screens it did not split the layout, but used a stacked mobile layout. With Vanilla 4.6.0 the row--25-75 will split into 2+4 columns layout on medium screens by default. This also means that is-split-on-medium modifier class is no longer needed, as its behaviour is now default for row--25-75.

If you are using row--25-75 without is-split-on-medium make sure that the layout doesn't break on medium screen sizes.
If you are using row--25-75 with is-split-on-medium no change is needed, but is-split-on-medium is redundant and can be safely removed from code.

For more information refer to the Vanilla grid documentation.

🐛 Bug Fixes

🔨 Maintenance

Full Changelog: v4.5.1...v4.6.0

v4.5.1

28 Nov 12:14
1e47444
Compare
Choose a tag to compare

Getting Vanilla Framework

Install with NPM: https://www.npmjs.com/package/vanilla-framework
Visit the documentation at https://vanillaframework.io/docs

New in Vanilla v4.5.1

🐛 Bug Fixes

📝 Documentation

🔨 Maintenance

New Contributors

Full Changelog: v4.5.0...v4.5.1

v4.5.0

16 Oct 12:21
Compare
Choose a tag to compare

Getting Vanilla Framework

Install with NPM: https://www.npmjs.com/package/vanilla-framework
Visit the documentation at https://vanillaframework.io/docs

New in Vanilla v4.5.0

🚀 Features

📝 Documentation

New Contributors

Full Changelog: v4.4.0...v4.5.0

v4.4.0

11 Oct 15:57
Compare
Choose a tag to compare

Getting Vanilla Framework

Install with NPM: https://www.npmjs.com/package/vanilla-framework
Visit the documentation at https://vanillaframework.io/docs

New in Vanilla v4.4.0

🚀 Features

🐛 Bug Fixes

🔨 Maintenance

Full Changelog: v4.3.0...v4.4.0