Component status


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.

What's new in Vanilla 2.31

Component Status Version Notes
Navigation / Dropdown
Updated
2.31.0 We introduced the .p-navigation__item--dropdown-toggle class, as a replacement for the now deprecated .p-subnav class.
Navigation / Sub-navigation
Deprecated
2.31.0 The .p-subnav class previously could theoretically be used outside of the main .p-navigation component, which was not intended. It has been deprecated, and succeeded by the .p-navigation__item--dropdown-toggle class.

Previously in Vanilla

Component Status Version Notes
Button / Link
New
2.30.0 Buttons can now assume the appearance of a standard link.
Lists / Divider
Updated
2.30.0 We added a dark theme to responsive divider lists.
Tabs / Content
Updated
2.30.0 The tab pattern can now be used either as a navigation list, or as controls for panes of content.
Fluid breakout - toolbar
New
2.29.0 We added support for a toolbar within the fluid-breakout layout.
Modal footer
New
2.28.0 We added the optional footer to the modal pattern.
Logo section
New
2.28.0 A new logo section
Inline images
Deprecated
2.28.0 The inline images component has now been deprecated. Please use the logo section component instead.
Table - empty
New
2.28.0 We added a basic styling for the table <caption> in empty tables
Tooltips - detached
New
2.28.0 We added the .is-detached utility, providing a way for tooltips to exist separately from their associated element.
GitHub icon
New
2.27.0 We added the GitHub icon .p-icon--github to our social icons set.
Code snippet - bordered
Updated
2.27.0 We added the utility class .is-bordered to the code snippet.
Search and filter
New
2.26.0 We added the new Search and filter component.
Application layout - animations
Updated
2.26.0 We added is-collapsed class that allows animating the application layout aside panel.
Tables expanding
Deprecated
2.26.0 We renamed and deprecated p-table-expanding and p-table-expanding__panel. Use p-table--expanding and p-table__expanding-panel instead.
Tables sorting
Deprecated
2.26.0 We removed p-table--sortable class name. Sorting can be enabled on any table by adding aria-sort attributes.
Forms / Checkbox indeterminate
New
2.26.0 We added indeterminate state checkboxes. If a checkbox has checkbox.indeterminate = true; set via JavaScript, the checkbox will show a state between checked and unchecked.
Sticky footer
New
2.26.0 We added a new .l-site layout, which can accommodate a sticky footer.
Accordions
Deprecated
2.26.0 We deprecated 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.
Typography / Extra small caps
New
2.25.0 We added new extra small capitalised text p-text--x-small-capitalised.
Typography / Baseline alignment
New
2.25.0 We added a couple of util classes to help aligning small text on the baseline along default text size.
Separators / Muted
New
2.25.0 We added new muted variant of horizontal rule.
Separators / Fixed width
New
2.25.0 We added new fixed width variant of horizontal rule to allow aligning it with full 12-column grid layouts.
Lists / Middot
Updated
2.25.0 We added a dark theme to middot lists.
Code snippet - Dropdowns
Updated
2.24.0 We added the ability to accommodate multiple selects within a .p-code-snippet__header, either inline, using the .is-stacked utility to class to have the dropdowns below the title.
Code inline - dark
Updated
2.24.0 We've updated inline code elements to support being nested within a .p-strip--dark element, and to support an .is-dark utility class.
Fluid breakout
New
2.24.0 We added a new l-fluid-breakout layout that can be used to break out of the constraints of a 12-column grid and allow content to bleed into the page margins on larger screens.
Grid - "orphan" columns
Deprecated
2.24.0 We deprecated the use of `.col` classes without a direct parent with a class `.row`.
Active button
Deprecated
2.23.0 The is-active class was deprecated and given a more appropriate name: is-processing.
Processing button
New
2.23.0 We renamed is-active button state class to is-processing, which can be combined with disabled when a button needs to indicate a process is occurring while also preventing user interaction.
Code snippet - Dropdowns
New
2.23.0 We add the ability to include a select within in a code snippet, allowing users to switch between related code examples.
Code snippet
Updated
2.23.0 We added a utility class for .p-code-snippet__block that allows content to wrap, rather than horizontally scroll: .is-wrapped.
Separator
New
2.22.0 The new p-separator component has been added to be used as a separator between content blocks.
Code snippet
New
2.22.0 The new .p-code-snippet component has been added, to be used to display code examples in a number of different formats.
Code copyable
Deprecated
2.22.0 .p-code-copyable has been deprecated and will be removed in the v3.0 release. Please use .p-code-snippet .p-code-snippet__block--icon instead.
Code numbered
Deprecated
2.22.0 .p-code-numbered has been deprecated and will be removed in the v3.0 release. Please use .p-code-snippet .p-code-snippet__block--numbered instead.
Icons - Contextual Menu
Deprecated
2.21.0 The p-icon--contextual-menu has been deprecated and will be removed in future release v3.0. Please use existing .p-icon--chevron-down and .p-icon--chevron-up icons instead.
Icons - Additional
New
2.21.0 We added many more icons, outside of the base icon set. These icons are not included in Vanilla by default, but can be individually included as needed.
Application layout - panels
In progress
2.21.0 We continue working on application layout panels styling. We improved the positioning of the logo, title and controls in panel headers.
Application layout - side navigation
New
2.21.0 We implemented and documented improvements for side navigation component for the application layout.
Side navigation - Sticky
New
2.21.0 Side navigation component used to be sticky by default. We now introduced new is-sticky variant that should be used to optionally make side navigation sticky.
Application layout panels
Updated
2.20.0 We updated the responsive styles of application layout panels and introduced some class names and variables for more flexible customization options.
Small buttons
New
2.20.0 We added an is-small modifier class for buttons, which can be combined with is-dense.
Active buttons
New
2.20.0 We added an is-active state class for buttons, which can be combined with disabled when a button needs to indicate a process is occurring while also preventing user interaction.
Expanding table column placeholder
Updated
2.19.2 We started using aria-hidden="true" attribute to hide the dummy table header in place of previously used u-hide utility.
Table icons
New
2.19.0 We added a p-table__cell--icon-placeholder class to properly align icons in table cells.
Breadcrumbs
Updated
2.18.0 We updated the markup of the breadcrumbs component to comply with accessibility requirements. The class .p-breadcrumbs is now moved onto a <nav> element, the unordered list has been changed to an ordered one that has a class .p-breadcrumbs__items.
Breadcrumbs
Deprecated
2.18.0 Top level <ul> with a class .p-breadcrumbs is now deprecated for the Breadcrumbs pattern.
Checkbox and radio buttons components
New
2.17.0 We introduced new .p-checkbox and .p-radio components. They replace the existing styling of base form inputs.
Checkbox and radio buttons elements
Deprecated
2.17.0 Base styled checkboxes and radio buttons (on <input type="checkbox"> or <input type="radio"> elements) are deprecated and they will be reverted to native browser inputs in future version of Vanilla. Please use on bWe added new layout styles for building responsive full-screen applications.
Application layout
New
2.16.0 We added new layout styles for building responsive full-screen applications.
Suru strip
New
2.16.0 We added new strip variants .p-strip--suru and .p-strip--suru-topped.
Chip
New
2.15.0 We added the new .p-chip component to be used to display small actionable pieces of information.
List inline stretched
New
2.14.0 We added the new .p-inline-list--stretch list variant that arranges items so they span the full width of the parent container.
Accordion
Updated
2.13.0 We updated the accordion component with a new .p-accordion__tab--with-title variant that allows using headings in accordion buttons.
Muted text
New
2.12.0 New u-text--muted utility class has been added.
Icons
Updated
2.12.0 The icons have been updated to new style.
Icons - Question
Deprecated
2.12.0 The p-icon--question has been deprecated will be removed in future release v3.0. Please use existing `.p-icon--help` icon instead.
Side navigation
Updated
2.11.0 A no-JS fallback was added for the side navigation toggle functionality on small screens.
Side navigation
Updated
2.11.0 A new raw HTML variant of the side navigation component.
Side navigation
Updated
2.10.0 Update to the responsive styling of the side navigation.
Side navigation
New
2.9.0 New side navigation component was added.
Navigation
Updated
2.8.0 New navigation classes (p-navigation__items, p-navigation__item, p-navigation__link) were added to replace existing (p-navigation__links, p-navigation__link, and classless <a>).
Navigation
Deprecated
2.8.0 Navigation classes p-navigation__links, p-navigation__link, and classless <a> are deprecated and will be removed in future release v3.0. Please use new class names (p-navigation__items, p-navigation__item, p-navigation__link) instead.
Contextual menu
Updated
2.7.0 Added dark theme to contextual menu.
Heading classes
Updated
2.7.0 New heading classes with numbers (p-heading--1, ...) were added for consistency with other class names we use.
Heading classes
Deprecated
2.7.0 Heading classes with numbers as words (p-heading--one, --two, ...) are deprecated and will be removed in future release v3.0. Please use class names with numbers (p-heading--1, --2, ...) instead.
Range input
New
2.6.0 Styling of Slider component was added to all <input type="range"> elements by default. This makes p-slider class optional for styling range inputs.
Checkbox, radio button
Updated
2.6.0 New `is-table-header` added to properly align checkboxes and radio buttons used in table headers.
Slider
Updated
2.6.0 Styling of Slider component was added to all <input type="range"> elements by default. This makes p-slider class optional for styling range inputs.
Contextual menu
New
2.5.0 Optional state indicator was added to contextual menu
Font metrics
New
2.5.0 Added u-visualise-font-metrics utility to visualise font metrics
Line length
New
2.5.0 Added $max-width--default variable and u-no-max-width utility to control line length
Table cell padding overlap
New
2.5.0 Added u-table-cell-padding-overlap utility to overlap table cell padding
Truncation
New
2.5.0 Added u-truncate utility to truncate text with ellipsis
Social icons
Updated
2.5.0 Updated style of social icons. Added new .p-icon--rss and p-icon--email icons.
Social icons
Deprecated
2.5.0 We will be removing p-icon--canonical and p-icon--ubuntu from social icon set in future release v3.0

Upgrade guide

During the development of Vanilla v2 several CSS class names or SCSS mixins and placeholders have been deprecated and will be removed in the upcoming release v3.0.

See the upgrade guide to learn about all the breaking changes that will happen when these deprecated features are removed and how to update the code for a future version of Vanilla.

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.

Validated

Proposal approved in our bi-weekly meeting . A design spec is created and development starts ready for code review.