v4.18.2

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

🐛 Bug Fixes

• Fix using the image container with lazyloaded images by @jmuzina (#5403)

Full Changelog: v4.18.1...v4.18.2

v4.18.1

Getting Vanilla Framework

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

This release will cause lazy-loaded images loaded with the canonical web template not to load. It has been fixed in 4.18.2.

New in Vanilla v4.18.1

🐛 Bug Fixes

• fix: responsive aspect ratios don't work with intermediate elements by @jmuzina (#5402)

Full Changelog: v4.18.0...v4.18.1

v4.18.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 v4.18.0

🚀 Features

• Feat: Rich vertical list pattern by @jmuzina (#5306)
• feat: Quote Wrapper Pattern by @jmuzina (#5275)
• feat: Implement content grid (.grid-row and .grid-col) by @jmuzina (#5368)

🐛 Bug Fixes

• Adjust search and filter component height to align with standard inputs by @bartaz (#5399)
• fix: Search and filter hidden search button alignment and stacking order adjustment by @jmuzina (#5339)
• Fix input padding alignment by @bartaz (#5389)
• Fix slider margin by @mcslayer (#5392)
• Fix top margin of validation messages in dense form elements by @jmuzina (#5343)
• Fix icon margin within small buttons by @mcslayer (#5387)

📝 Documentation

• Add CSS range syntax to breakpoints settings page by @mcslayer (#5395)
• Add basic themes documentation by @bartaz (#5378)
• Add links to react storybook for existing components by @mcslayer (#5381)
• Change links for react components by @mcslayer (#5380)

🔨 Maintenance

• Update layout of the homepage "downloads" section on medium screens by @mcslayer (#5400)
• Set icon alignment in paragraph to text-bottom by @advl (#5314)
• Update icon SVGs to use simplified paths and fix artifacts by @bartaz (#5385)
• Update remaining legacy components to use new theme colours. by @bartaz (#5377)
• Change the JIRA epic where new issues are synchronised by @bartaz (#5383)

New Contributors

• @advl made their first contribution in #5314

Full Changelog: v4.17.1...v4.18.0

v4.17.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 v4.17.1

This is a follow-up hotfix release for v4.17.0, where we introduced usage of Sass color functions only available in recent versions of sass. This release adds relevant version of sass a peer dependency to make it a bit easier to identify the problem when installing.

Check release notes for v4.17.0 for more details.

🔨 Maintenance

• Add sass as a peer dependency by @jmuzina (#5379)

Full Changelog: v4.17.0...v4.17.1

v4.17.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 v4.17.0

⚠️ Due to Sass deprecating older color functions we updated our SCSS code, but new Sass APIs require sass at least at version 1.79.0 or higher. So please update your sass along with Vanilla.

🚀 Features

• Add new additional icons by @bartaz (#5372)
• feat: Publish & Document Jinja Macros by @jmuzina (#5342)
• Add Color primitive/palette Design Tokens by @pastelcyborg (#5358)
• Add color, font, and opacity Design Tokens from Core Components Figma file by @pastelcyborg (#5267)

🐛 Bug Fixes

• Add support for chip links by @jmuzina (#5347)

📝 Documentation

• Add content guidance for tables by @Sophie-32 (#5376)
• Add support for adding status label component within documentation page headings by @pastelcyborg (#5353)

🔨 Maintenance

• fix(skip-link): give the skip link a more modern styling by @lorumic (#5371)
• Update contributors list by @jmuzina (#5373)
• Remove SASS warnings by using color.scale and color.channel functions by @mcslayer (#5370)
  • Note: this requires updating to sass version 1.79.0 or higher if you build with our SASS.
• Manually set baseline build commit signature by @jmuzina (#5340)
• Update all non-major dependencies by @renovate (#5360)
• Update dependency canonicalwebteam.search to v2.1.1 by @renovate (#5354)

New Contributors

• @mcslayer made their first contribution in #5370
• @Sophie-32 made their first contribution in #5376

Full Changelog: v4.16.0...v4.17.0

v4.16.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 v4.16.0

🚀 Features

• Make separator styling consistent by @bartaz (#5338)
• Equal height row component responsive updates by @pastelcyborg (#5276)
• Update vf-focus mixin to properly support theming by @pastelcyborg (#5307)
• Add additional CTA block usage examples for Tiered List pattern by @pastelcyborg (#5318)
• Responsive image aspect ratio variants by @jmuzina (#5308)
• Add form legend required symbol by @britneywwc (#5214)
• Add borderless CTA block variant by @jmuzina (#5278)

🐛 Bug Fixes

• Update utility files to use CSS range syntax by @pastelcyborg (#5311)
• Update component files to use CSS range syntax by @pastelcyborg (#5316)
• Update layout files to use CSS range syntax by @pastelcyborg (#5315)
• Fix ordering of lists/nested lists using custom counters by @pastelcyborg (#5301)
• bug: Don't close navigation on vertical resize by @petesfrench (#5302)

📝 Documentation

• Make rule component and hr element consistent in styling by @petesfrench (#5241)
• Improve Percy workflow docs by @jmuzina (#5305)
• Update all references to WCAG 2.1 to WCAG 2.2; fix broken accessibility reference links by @pastelcyborg (#5297)

🔨 Maintenance

• Bump path-to-regexp from 6.2.1 to 6.3.0 by @dependabot (#5345)
• Remove no-padding-top from hero signpost title by @jmuzina (#5341)
• Adapt tree list component for content CMS by @jmuzina (#5270)
• Add color theme support to Search & Filter component by @jmuzina (#5127)
• Add theme support to tooltip component by @jmuzina (#5326)
• Revert "Group Percy snapshots by test case name (#5299)" by @jmuzina (#5335)
• Group Percy snapshots by test case name by @jmuzina (#5299)
• Add color theming explanation comment to status label mixin by @jmuzina (#5139)
• Bump micromatch from 4.0.7 to 4.0.8 by @dependabot (#5333)
• Update all non-major dependencies by @renovate (#5334)
• Improve combined example baseline alignment by @jmuzina (#5327)
• Theme accent color by @jmuzina (#5328)
• Add button to close example toolbar by @jmuzina (#5309)
• Add advl to team members list by @jmuzina (#5310)
• Merge latest main before running Percy by @jmuzina (#5300)
• Fix responsive grid example not rendering correctly in combined view by @jmuzina (#5285)
• Add --silence-deprecation flag to mute mixed declaration Sass deprecation warnings by @pastelcyborg (#5295)
• Percy tokens prep by @jmuzina (#5291)

Full Changelog: v4.15.0...v4.16.0

v4.15.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 v4.15.0

🚀 Features

• Tiered List HOC/Pattern by @pastelcyborg (#5212)
• feat: Create Hero Pattern w/ Macros by @jmuzina (#5248)
• Full width dropdowns for Vanilla "meganav" navigation by @bartaz (#5213)
• 75/25% Grid Row (.row--75-25) by @jmuzina (#5235)
• CTA Block component by @jmuzina (#5196)

🐛 Bug Fixes

• Fix styling issues of meganav on small screens by @bartaz (#5110)
• Remove deprecated -webkit-search-cancel-button pseudo-element styles by @pastelcyborg (#5265)
• Add new theme variable for Positive Button focus state by @pastelcyborg (#5217)
• Correct labels on grid examples by @pastelcyborg (#5222)
• Correct theme usage on Side Navigation example by @pastelcyborg (#5216)
• Align logo in reduced nav with the grid by @bartaz (#5215)
• Styling updates for reduced navigation by @bartaz (#5206)

📝 Documentation

• Indent code snippets using js-beautify by @jmuzina (#5259)
• Fix theming of grid examples by @jmuzina (#5256)
• Remove excess whitespace in class reference table by @jmuzina (#5247)
• Fix incorrect href value on "Related section" link by @pastelcyborg (#5244)
• Remove bots from the contributors list by @Satishpokala124 (#5233)
• Fix duplicated suru fan examples by @jmuzina (#5232)
• Add is-cover to image container class reference by @jmuzina (#5207)

🔨 Maintenance

• Fix tagged navigation icon spacing by @jmuzina (#5258)
• Update dependency canonicalwebteam.search to v2 by @renovate (#5272)
• Update dependency canonicalwebteam.search to v1.4.0 by @renovate (#5255)
• Simplify Percy Breakpoint/Theme snapshots by @jmuzina (#5251)
• Update all non-major dependencies by @renovate (#5268)
• Adjust spacing and size of logo section and deprecate the dense variant by @pastelcyborg (#5252)
• Update styling of reduced nav on small screens by @bartaz (#5246)
• Fixes #5228 duplicate css by @sarthak-kumar-shailendra (#5263)
• Remove percy_upload status check by @jmuzina (#5249)
• Add new directional chevron mixins for use in Article Pagination by @pastelcyborg (#5253)
• Percy macros artifact fix by @jmuzina (#5257)
• Add templates/_macros to percy tests by @jmuzina (#5250)
• Remove discourse module and related routes by @bartaz (#5239)
• Change strips image example background to decrease load time by @jmuzina (#5237)
• Sync Github Issues to Jira Issues by @jmuzina (#5224)
• Fix typo in PR template by @jmuzina (#5225)
• Fix Intermittent Percy Snapshot Timeouts by @jmuzina (#5220)
• Move search into the reduced navigation by @bartaz (#5210)
• Update dependency canonicalwebteam.flask-base to v2 by @renovate (#5211)
• Update all non-major dependencies by @renovate (#5201)
• Update application layout to new theming by @pastelcyborg (#5182)

❤️ New Contributors

• @Satishpokala124 made their first contribution in #5233
• @sarthak-kumar-shailendra made their first contribution in #5263

Full Changelog: v4.14.0...v4.15.0

v4.14.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 v4.14.0

🚀 Features

• Add reduced top navigation bar by @bartaz and @petesfrench (#5107)
• Add cover option to image container component by @bartaz (#5199)
• Adds class for anchor links to have visual hover state by @petesfrench (#5120)

🐛 Bug Fixes

• Update alt background in paper theme by @bartaz (#5198)
• Fix aspect ratio in image container component on smaller screens by @jmuzina (#5179)

🔨 Maintenance

• Fix favicon not rendering properly in google search. by @jmuzina (#5183)
• Percy Error Logging Improvement by @jmuzina (#5202)
• Update Switch component with new theme color variables by @pastelcyborg (#5185)
• Combine examples for Percy by @jmuzina (#5178)
• Add new focus theme variable for improved color theme support by @pastelcyborg (#5192)
• Fix Percy tests being queued against PRs with Percy label when the ne… by @jmuzina (#5191)
• Update Media Object to support new color theme variables by @pastelcyborg (#5187)
• fix Percy workflows not running correctly in multi-label case by @jmuzina (#5188)
• chore(deps): update dependency canonicalwebteam.discourse to v5.5.0 by @renovate (#5181)
• Fix figma library alert by @dgtlntv (#5168)
• Bump ws from 8.13.0 to 8.17.1 by @dependabot (#5151)
• Percy workflow selectivity improvements by @jmuzina (#5108)

Full Changelog: v4.13.0...v4.14.0

v4.13.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 v4.13.0

🚀 Features

• Add new image container component and deprecate legacy image variants by @jmuzina (#5097)

🐛 Bug Fixes

• Fix ascending/descending icons on sortable tables by @pastelcyborg (#5135)
• Fix application layout tooltip overflow by @pastelcyborg (#5134)

📝 Documentation

• Update Pull Requests README with additional information and steps by @pastelcyborg (#5137)

🔨 Maintenance

• Update accordion pattern to use new color theme variables by @jmuzina (#5138)
• Update Matrix component with new theme color variables by @pastelcyborg (#5136)
• Notify Figma library maintainers on release by @dgtlntv (#5132)
• Update dependency @canonical/cookie-policy to v3.6.4 by @renovate (#5131)
• Update article pagination to use new theme variables by @jmuzina (#5126)
• Update lists pattern to use new color theme variables by @jmuzina (#5124)
• Update Pull Quote component with new theme color variables by @pastelcyborg (#5133)
• Update alternative background colour in dark theme by @bartaz (#5128)
• Update card pattern to support color themes by @jmuzina (#5112)
• Bump braces from 3.0.2 to 3.0.3 by @dependabot (#5121)
• Update Table of Contents to use new color theme variables by @pastelcyborg (#5113)
• Reduce padding on navigation items by @bartaz (#5116)

Full Changelog: v4.12.0...v4.13.0

v4.12.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 v4.12.0

🚀 Features

• Add left & right chevron icon variants by @jmuzina (#5093)
• Add text-wrap: pretty to _base_typography.scss by @pastelcyborg (#5090)

🐛 Bug Fixes

• Fix misleading icon import documentation by @jmuzina (#5100)
• Fix stepped list content/item padding by @jmuzina (#5099)
• Sidenav toggle button triggers on spacebar press by @jmuzina (#5084)

📝 Documentation

• Example color theme improvements by @jmuzina (#5087)
• Update skiplink example docs to match new branding by @jmuzina (#5091)

🔨 Maintenance

• Update segmented control to use new color theme variables by @jmuzina (#5111)
• Update modal component to support new theming variables by @bartaz (#5106)
• Update all non-major dependencies by @renovate (#5104)
• Percy GHA Migration - Baseline updates on push to main by @jmuzina (#5095)
• Migrate Percy from CircleCI to Github Actions by @jmuzina (#5089)
• Release drafter pulls tag number from package.json automatically by @jmuzina (#5085)

New Contributors

• @pastelcyborg made their first contribution in #5090

Full Changelog: v4.11.0...v4.12.0