v4.18.5

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

🐛 Bug Fixes

• Conditionally render the shallow padded block for subtitle_text by @muhammad-ali-pk (#5439)

📝 Documentation

• chore: contribution guidelines/issue creation updates by @jmuzina (#5435)
• docs: Update tiered list jinja template docs to use semantic structure by @petesfrench (#5429)
• Added content guidelines page by @advl (#5425)

🔨 Maintenance

• chore(deps): update dependency canonicalwebteam.image-template to v1.4.1 by @renovate (#5438)
• chore: silence import and global builtin deprecation warnings in sass build by @jmuzina (#5436)
• Bump nanoid from 3.3.7 to 3.3.8 by @dependabot (#5434)
• chore(deps): update dependency @canonical/cookie-policy to v3.6.5 by @renovate (#5430)

New Contributors

• @muhammad-ali-pk made their first contribution in #5439

Full Changelog: v4.18.4...v4.18.5

v4.18.4

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

🐛 Bug Fixes

• fix: quote wrapper's title_text is now a semantic h2. by @jmuzina (#5427)

📝 Documentation

• fix: Update link to accessibility report tool by @Dinika (#5428)

Full Changelog: v4.18.3...v4.18.4

v4.18.3

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

• fix: removed the extra spacing between the chips in search and filter from vanilla example by @Nisarg-18 (#5414)
• Bump cross-spawn from 7.0.3 to 7.0.6 by @dependabot (#5412)

🐛 Bug Fixes

• fix: make quote wrapper quote separator always use .p-rule--muted by @jmuzina (#5424)

📝 Documentation

• Corrected documentation for importing quote macro by @immortalcodes (#5422)
• Fix typo in breakpoint class name used in documentation by @Dinika (#5415)

🔨 Maintenance

• chore(deps): update all non-major dependencies by @renovate (#5418)
• chore(deps): update ubuntu docker tag to v22 by @renovate (#5408)
• chore(deps): update node.js to v22 by @renovate (#5407)
• chore(deps): update all non-major dependencies by @renovate (#5404)
• Changed UI kit references to Figma community by @dgtlntv (#5409)

New Contributors

• @Dinika made their first contribution in #5415
• @immortalcodes made their first contribution in #5422
• @Nisarg-18 made their first contribution in #5414

Full Changelog: v4.18.2...v4.18.3

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