What's new in Vanilla 3.13
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 |
|---|---|---|---|
| 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. |
Previously in Vanilla v3
| Component | Status | Version | Notes |
|---|---|---|---|
| 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 |
| 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. |
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.