Jump to main content

What's new in Vanilla 3.4


When we add, make significant updates, or deprecate a component we update their status so that it’s clear what’s available to use. Check back here anytime to see current status information.

Component Status Version Notes
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 Updated 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.

Previously in Vanilla v3

Component Status Version Notes
Side navigation Updated 3.3.0 We've made some changes to the side navigation, improving accessibility and renaming some classes.
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" columns 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.

Status key

New

Newly released components, utilities or settings that are safe to use in projects.

Deprecated

These components, utilities or settings are in the process of being removed and should no longer be used in projects.

In progress

Design spec and code implementation are not yet finished.

Updated

These are existing components, utilities or settings that have been updated either through design or code.

Removed

These components, variants or utilities have been removed from Vanilla. They should be removed from projects or updated to their new recommended versions.