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.