v3.6.0

Getting Vanilla Framework

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

New in Vanilla v3.6.0

🚀 Features

• Create badge component by @ClementChaumel (#4497)

🐛 Bug Fixes

• Updated middot list style by @ilayda21 (#4499)
• Fix the logo title to a specific font size by @ClementChaumel (#4498)

🔨 Maintenance

• Update dependency canonicalwebteam.search to v1.2.1 by @renovate (#4500)
• Update dependency @canonical/latest-news to v1.4.1 by @renovate (#4493)
• Docker: Make pip install slightly faster by @jkfran (#4492)

v3.5.0

Getting Vanilla Framework

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

New in Vanilla v3.5.0

🚀 Features

• Add heading styles for side navigation by @bartaz (#4487)

📝 Documentation

• Close side nav drawer when anchors are clicked by @bartaz (#4489)
• Update brand name in navigation example logos by @bartaz (#4468)

🔨 Maintenance

• Update dependency canonicalwebteam.search to v1.2.0 by @renovate (#4483)
• Update all non-major dependencies by @renovate (#4478)
• Update dependency canonicalwebteam.discourse to v4.0.9 by @renovate (#4480)
• Update actions/download-artifact action to v3 by @renovate (#4479)

Full Changelog: v3.4.0...v3.5.0

v3.4.0

Getting Vanilla Framework

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

New in Vanilla v3.4.0

🚀 Features

• Update classnames in Pagination component by @bethcollins92 (#4451)

🐛 Bug Fixes

• Fix button width in mobile nav by @bethcollins92 (#4455)

📝 Documentation

• Fix contribute page by @bartaz (#4462)
• Add functionality to keep tooltip open on click by @bethcollins92 (#4454)
• Read class reference data from SCSS files by @bartaz (#4349)
• Add contextual menu accessibility docs by @bethcollins92 (#4450)
• Add accessibility doc for quotes by @bethcollins92 (#4443)

🔨 Maintenance

• Update dependency canonicalwebteam.flask-base to v1.0.5 by @renovate (#4457)
• Update all non-major dependencies by @renovate (#4446)

Full Changelog: v3.3.0...v3.4.0

v3.3.0

Getting Vanilla Framework

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

New in Vanilla v3.3.0

🚀 Features

• New vanilla website by @albertkol (#4430)
• Update accordion by @andesol (#4406)
• Rename "tab buttons" to "segmented control" by @andesol (#4410)

🐛 Bug Fixes

• Ensure sidenav is only tabable when in view by @bethcollins92 (#4371)
• Fix page jumping after codepen loads by @bethcollins92 (#4432)
• Align accordion's icon with heading by @andesol (#4424)

📝 Documentation

• Update Code snippet docs by @bartaz (#4415)
• Generate id from heading by @andesol (#4434)
• Update accordion docs by @andesol (#4436)
• Fix nav active for design by @albertkol (#4435)
• Add menu to all patterns by @albertkol (#4427)
• Add component menu by @albertkol (#4414)

🔨 Maintenance

• Add authors to release notes template by @bartaz (#4442)
• Update "What's new" table by @bethcollins92 (#4441)
• Update dependency canonicalwebteam.flask-base to v1.0.4 by @renovate (#4439)
• Fix version in package.json by @bartaz (#4431)
• Deprecate label pattern by @andesol (#4416)
• Separate Tab buttons from tabs by @bethcollins92 (#4401)

Full Changelog: v3.2.0...v3.3.0

v3.2.0

Getting Vanilla Framework

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

New in Vanilla v3.2.0

💣 Potentially breaking changes

Removed vf-p-label mixin

The Label component has been renamed to "Status label". Old .p-label class names are still supported (but deprecated), but the vf-p-label mixin has been removed and renamed to vf-p-status-label.

Changes to expanding search in the navigation

We updated the HTML structure of expanding search for mobile. This may cause some small glitches if you are using expanding navigation and don't update the HTML. Please refer to our docs for more information.

🚀 Features

• Rename "p-label" to "p-status-label" by @andesol in #4400
• Top navigation updates by @bartaz in #4403

🐛 Bug Fixes

• Update aria-labels on landmarks by @bethcollins92 in #4361
• Fix broken snippet__line outside of snippet_block--numbered by @ClementChaumel in #4363
• Close contextual menu when focus leaves by @bethcollins92 in #4359

📝 Documentation

• Add accessibility docs for strip by @bethcollins92 in #4358
• Add discourse module to Vanilla docs by @bartaz in #4353

🔨 Maintenance

• Update actions/setup-node action to v3 by @renovate in #4344
• Update all non-major dependencies by @renovate in #4343
• Update internal dependencies by @renovate in #4362
• Fix search by providing search engine id by @bartaz in #4390
• Update actions/checkout action to v3 by @renovate in #4389
• Update all non-major dependencies by @renovate in #4388
• Remove design section from docs by @bethcollins92 in #4399

New Contributors

• @ClementChaumel made their first contribution in #4363

Full Changelog: v3.1.1...v3.2.0

v3.1.1

Getting Vanilla Framework

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

New in Vanilla v3.1.1

🐛 Bug Fixes

• Fix visited links in dark side navigation (#4342)

📝 Documentation

• Add new sections to Notification docs (#4333)
• Add demo of class reference to side navigation component (#4328)
• Update modal accessibility docs (#4311)

🔨 Maintenance

• Update dependency canonicalwebteam.flask-base to v1.0.1 (#4330)
• Lock MarkupSafe at version 2.0.1 (#4325)
• Update list examples to use list elements (#4302)
• Replace <cite> with <span> pull-quotes (#4300)
• Button's processing state's width and height is set to initial width and height (#4289)

Full Changelog: v3.1.0...v3.1.1

v3.1.0

Getting Vanilla Framework

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

New in Vanilla v3.1.0

🚀 Features

• Added Empty state pattern (#4279, #4276, #4274)
• Updated switch styling (#4254)
• Update slider style (#4253)
• Add nested counter to order lists (#4264)

🐛 Bug Fixes

• Improve search box accessibility (#4291)
• Added height to close button (#4267)
• Changed display property to fix raw-HTML side nav wrapping (#4266)
• Fix notifications in docs (#4248)

📝 Documentation

• Update table docs with empty state (#4297)
• Add accessibility docs for navigation (#4287)
• Added notification accessibility docs (#4288)
• Add icon accessibility docs (#4286)
• Add tab accessibility doc (#4285)
• Add heading icon accessibility docs (#4277)
• Add grid accessibility notes (#4275)
• Add switch accessibility docs (#4271)
• Add pagination accessibility docs (#4269)
• Add label accessibility doc (#4268)
• Logo section accessibility doc (#4262)
• Fix broken link in docs (#4255)
• Merge Button Accessibility sections into one (#4252)
• Add buttons accessibility notes (#4236)

🔨 Maintenance

• Update dependency canonicalwebteam.flask-base to v1 (#4278)
• Update all non-major dependencies (#4290)
• Bump nanoid from 3.1.30 to 3.2.0 (#4270)
• Remove middle state in the mobile card view (#4265)
• Removed right alignment in card example (#4261)
• Add role=switch to switch component (#4260)
• Update dependency @canonical/cookie-policy to v3.4.0 (#4247)
• Improve accessibility in the pagination component (#4258)

New Contributors

• @ilayda21 made their first contribution in #4253
• @mtruj013 made their first contribution in #4254

Full Changelog: v3.0.1...v3.1.0

v3.0.1

New in Vanilla v3.0.1

This is a small bug-fix release to solve an issue with misaligned chips in search and filter component introduced in 3.0.0.

But we also started writing some accessibility docs for our components in the meantime.

🐛 Bug Fixes

• Fix spacing issues with chips in search and filter (#4246)

📝 Documentation

• Add tooltip accessibility doc (#4241)
• Add accessibility card text (#4237)
• Add search box accessibility doc (#4239)
• Add link accessibility doc (#4235)
• Add lists accessibility doc (#4234)
• Add accessibility accordion notes (#4233)

Getting Vanilla Framework

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

v3.0.0

New in Vanilla v3.0.0

We’ve just released Vanilla v3.0 - a new major update to our CSS framework. It includes a few significant updates and improvements around spacing variables, responsive breakpoints, a new expanding search box and various updates to existing components. Important aspects of the release include dropping a noticeable chunk of deprecated styles and components and removing IE support.

🚀 Features

Media query breakpoint updates

• Update default value of navigation breakpoint (#4111)
• Clean up media query breakpoints in components (#4107)
• Remove medium breakpoint (#4105)
• Clean-up breakpoints in utilities (#4096)
• Update 12 col breakpoint from medium to large (#4078)

Colored chips and labels

• Chips (#4124)
• Add interactive chips (#4169)
• Add theming for chips (#4168)
• Make dismiss in chips round (#4191)
• Inline labels (#4110)
• Update the docs and examples for chips (#4188)
• Bring back labels component (#4184)
• Remove label component (#4154)

New expanding search

• Update navigation search (#4003)
• Update search in navigation to expanding search (#4228)

Use sass builder

• Fix sass deprecation warning (#4208)
• Switch to dart-sass (#3919)
• Add index file to allow importing from package directly (#4093)

Spacing variables refactor

• Spacing refactor rebased on the 3.0 feature branch (#3971)
• Variable mappings (#4106)
• Improve consistency of variable map keys (#4116)
• Refactor margin/gutter scss maps (#4176)

Removed components and styles

• Update switch component to use more reliable HTML (#4117)
• Remove remaining deprecated docs (#4101)
• Remove deprecated inline image pattern (#4099)
• Remove 100% width from buttons on small screens (#4097)
• Remove unused pagination link (#4094)
• Remove $color-navigation-background (#4086)
• Remove checkbox & radio base styles (#4072)
• Remove p-link--external (#4069)
• Remove IE fallback grid (#4030)
• Fix rebase problems, remove old variables (#4005)
• Remove IE support (#4004)
• Remove deprecated icon styles (#3960)
• Remove deprecated typography styles (#3956)
• Remove deprecated navigation styles (#3947)
• Remove deprecated styles for headings, buttons and grid (#3943)
• Remove some of the deprecated patterns (#3934)

🐛 Bug Fixes

• Wrap font-face definitions in @at-root (#4190)
• Fix misused aria-label on mobile card table (#4179)
• Remove unnecessary margin reset (#4177)

📝 Documentation

Migration guide

• Reorder migration guide (#4218)
• Upgrade warnings (#4215)
• Make the naming of tables and class names more consistent (#4210)
• Improve clarity of variables section of upgrade guide (#4209)
• Change order of variable names (#4204)
• Add breadcrumbs to upgrade guide (#4203)
• Add search box description to upgrade guide (#4201)
• Add new Accordion section to upgrade guide (#4199)
• Add code pattern changes to upgrade guide (#4198)
• Add p-notification__action class info to upgrade guide (#4200)
• Add contextual menu icon update to upgrade guide (#4196)
• Reword text-max-width section of upgrade guide (#4197)
• Initial improvements to upgrade guide (#4119)
• Upgrade guide (#4113)

Other docs and website updates

• Improve the docs around breakpoints (#4207)
• Add updated labels to side navigation (#4221)
• Update README on vanilla website (#4223)
• Update what's new page (#4219)
• Update homepage (#4216)
• Update current team members (#4120)
• Add aria-describedby to fields with help or validation messages (#4135)
• Add forms input a11y docs (#4125)
• Document vertical spacing utilities (#4092)

🔨 Maintenance

• Bump version to 3.0.0 (#4231)
• Add missing import sections (#4185)
• Update run script to use essential build (#4149)
• Update watch:scss:skip-standalone (#3986)

Dependencies

• Update dependency canonicalwebteam.flask-base to v0.9.3 (#4230)
• Update all non-major dependencies (#4224)
• Add image module and update images (#4212)
• Remove specific node versions from package.json (#4202)
• Update dependency @canonical/latest-news to v1.3.0 (#4180)
• Update dependency postcss-cli to v9 (#4024)
• Attempt to force node LTS version in renovate (#4181)
• Update internal dependencies at any time (#4178)
• Update all non-major dependencies (#4165)
• Prevent renovate from upgrading python in CircleCi image (#4173)
• Pin dependencies (#4164)
• Update stylelint to v14 (#4142)
• Use official image for CircleCi with Python and node (#4143)

Getting Vanilla Framework

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

v3.0.0-rc.1

New in Vanilla v3.0.0-rc.1

This is a Release Candidate 1 for Vanilla 3.0. It contains updates to chips and label components along some other small bugfixes and dependency updates.

🚀 Features

• Add interactive chips (#4169)
• Add theming for chips (#4168)
• Make dismiss in chips round (#4191)
• Update the docs and examples for chips (#4188)
• Bring back labels component (#4184)
• Remove label component (#4154)

🐛 Bug Fixes

• Wrap font-face definitions in @at-root (#4190)
• Fix misused aria-label on mobile card table (#4179)
• Remove unnecessary margin reset (#4177)

🔨 Maintenance

• Bump version to 3.0 release candidate (#4192)
• Add missing import sections (#4185)
• Update dependency @canonical/latest-news to v1.3.0 (#4180)
• Update dependency postcss-cli to v9 (#4024)
• Attempt to force node LTS version in renovate (#4181)
• Update internal dependencies at any time (#4178)
• Refactor margin/gutter scss maps (#4176)
• Update all non-major dependencies (#4165)
• Prevent renovate from upgrading python in CircleCi image (#4173)
• Pin dependencies (#4164)
• Update run script to use essential build (#4149)
• Update stylelint to v14 (#4142)
• Use official image for CircleCi with Python and node (#4143)