Jump to main content

Vanilla v3 changelog

Component Status Version Notes
Sliding navigation New 3.15.0 We've added a new sliding nested navigation component.
Common grid patterns New 3.14.0 We've added new classes: .row--50-50, .row--25-75, .row--25-25-50, .row--25-25-25-25 as an alias for common grid layouts.
Rule New 3.14.0 We've added a new horizontal bar component.
Deep strip Updated 3.14.0 We've increased desktop and mobile paddings for the deep strip to 8rem and 4rem accordingly.
Sections and blocks New 3.14.0 We've added new components: .p-block and .p-section for managing spacing between different types of elements on the page.
Divided lists Updated 3.14.0 We removed the line above the first list item in the bulleted list with horizontal divider.
Brochure site layout New 3.13.0
Icons New 3.13.0 We've added three new icons related to instance management: .p-icon--play, .p-icon--pause and .p-icon--stop.
Text with icon utility class New 3.12.1 We've introduced a new utility class that allows to place an icon next to some text with correct spacing.
Dense Logo Section Updated 3.12.1 We've introduced a new dense version of the logo section that spans a single column
Restyled divided lists Updated 3.12.1 We've restyled the divided lists and intend them to be used by default now.

We've also added a new .has-bullet class to display a bullet in front of list items.

Small caps text Updated 3.12.1 We updated the style of small caps text and introduced new class name p-text--small-caps in place of previous p-text--x-small-capitalised.
Extra small capitalised text Deprecated 3.12.1 We are deprecating p-text--x-small-capitalised. New p-text--small-caps should be used instead. At the same time usage of u-align-text--x-small-to-default utility is deprecated with both of these class names as well, as they don't need it anymore.
Full-width layout New 3.11.0 We are introducing new full-width site layout.

This is an experimental feature, currenly meant for internal use on our design system site and docs.

Icons New 3.10.0 We've added new desktop icon .p-icon--desktop.
Typography Updated 3.10.0 We've introduced the new variable Ubuntu font and updated the default font weights.
$font-use-subset-latin Deprecated 3.10.0 the $font-use-subset-latin option has been deprecated and should be removed when updating.
Forms Updated 3.9.0 We've updated the visual style of form elements, such as inputs, checkboxes and buttons.
Side navigation - Accordion Updated 3.8.0 We've added p-side-navigation--accordion, p-side-navigation__accordion-button classes that allow building side navigation with accordions.
vf-animation mixin Deprecated 3.7.0 vf-animation mixin has been deprecated. Please use vf-transition instead.
vf-transition mixin New 3.7.0 vf-transition mixin replaces deprecated vf-animation.
Badge New 3.6.0 We've added a badge component.
Side navigation - Headings 3.5.0 We've added a new p-side-navigation__heading and p-side-navigation__heading--linked classes to allow adding headings for side navigation item groups.
Pagination Deprecated 3.4.0 We've deprecated the use of the p-navigation class on lists, the class should now be used on the wrapping nav only.
Pagination Deprecated 3.4.0 We've added a new p-pagination__items class name to the list and moved the p-pagination class to the nav element.
Side Navigation Deprecated 3.3.0 We've updated the class names in the side navigation. .is-expanded and .is-collapsed are deprecated and replaced by .is-drawer-expanded and .is-drawer-expanded.
Accordion Updated 3.3.0 We updated the Accordion icon to a chevron which animates on open and close.
Segmented control New 3.3.0 The Tab buttons component has been renamed to Segmented control.
Tab buttons Deprecated 3.3.0 p-tab-buttons has been renamed to p-segmented-control.
Navigation - Search Updated 3.2.0 We added new dropdown for expanding search on small screens.
Navigation Updated 3.2.0 We added new style of the logos to main navigation.
Status labels New 3.2.0 New name for what was previously the Label component.
Labels Deprecated 3.2.0 p-label has been renamed to p-status-label.
Empty State New 3.1.0 We've added examples for empty state scenarios.
Ordered list nested counter Updated 3.1.0 We've updated lists by adding a new class name. It can be used when nested items numbers are required to be set according to their parents.
Slider and Switch Updated 3.1.0 We've updated the styling of the Switch and Slider components.
Expanding search box New 3.0.0 We've added an expandable search box, to be used in top navigation.
Labels Updated 3.0.0 We've updated the labels component by introducing new semantic class names consistend with tinted chips.
Chips Updated 3.0.0 We've added tinted chips. The tints are based on the semantic colours (positive, caution, negative) plus a dark blue one that matches the blue used in the information flavour of the notification component.
Switch Updated 3.0.0 We've updated the HTML structure of the switch component. The p-switch class should be placed on the the wrapping label element instead of on the input.

Components removed in 3.0

The table below lists all the removed components and utilities in 3.0. For more information about how migrate to Vanilla 3.0 from previous versions, see the migration guide.
Component Status Version Notes
Notifications structure Removed 3.0.0 The classes .p-notification__response, .p-notification__status.p-icon--close have been removed and replaced.
Button / Neutral Removed 3.0.0 The neutral button variant p-button--neutral has been removed, please use default p-button instead.
Navigation / Sub-navigation Removed 3.0.0 The .p-subnav class has been removed and succeeded by the .p-navigation__item--dropdown-toggle class. The children of .p-subnav have been removed and replaced.
Inline images Removed 3.0.0 The inline images component has now been removed. Please use the logo section component instead.
Tables expanding Removed 3.0.0 We renamed and removed p-table-expanding and p-table-expanding__panel. Use p-table--expanding and p-table__expanding-panel instead.
Tables sorting Removed 3.0.0 We removed p-table--sortable class name. Sorting can be enabled on any table by adding aria-sort attributes.
Accordions Removed 3.0.0 We removed the previous accordion tab patterns, .p-accordion__tab and .p-accordion__tab--with-title .p-accordion__title, in favour of a more accessible pattern. Please use .p-accordion__heading .p-accordion__tab.
Grid - "orphan" colums Removed 3.0.0 We removed the ability to use .col classes without a direct parent with a class .row.
Active button Removed 3.0.0 The is-active class was removed and given a more appropriate name: is-processing.
Code copyable Removed 3.0.0 .p-code-copyable has been removed. Please use .p-code-snippet .p-code-snippet__block--icon instead.
Code numbered Removed 3.0.0 .p-code-numbered has been removed. Please use .p-code-snippet .p-code-snippet__block--numbered instead.
Icons - Contextual Menu Removed 3.0.0 The p-icon--contextual-menu has been removed. Please use existing .p-icon--chevron-down and .p-icon--chevron-up icons instead.
Breadcrumbs Removed 3.0.0 Top level <ul> with a class .p-breadcrumbs has been removed and replaced by the breadcrumbs pattern.
Checkbox and radio buttons elements Removed 3.0.0 Base styled checkboxes and radio buttons (on <input type="checkbox"> or <input type="radio"> elements) have been removed. Please use checkbox and radio components.
Icons - Question Removed 3.0.0 The p-icon--question has been removed. Please use existing .p-icon--help icon instead.
Navigation Removed 3.0.0 Navigation classes p-navigation__links, p-navigation__link, and classless <a> have been removed. Please use new class names (p-navigation__items, p-navigation__item, p-navigation__link) instead.
Heading classes Removed 3.0.0 Heading classes with numbers as words (p-heading--one, --two, ...) have been removed. Please use class names with numbers (p-heading--1, --2, ...) instead.
Social icons Removed 3.0.0 We've removed p-icon--canonical and p-icon--ubuntu from social icon set.
To see what changed in Vanilla v2, see the changelog for v2 page.