releases.yml

- version: 4.10.0
  features:
    - component: Navigation / Themes
      url: /docs/patterns/navigation
      status: Updated
      notes: We've updated the navigation to support new theming.
    - component: Equal height row
      url: /docs/patterns/equal-height-row
      status: New
      notes: We've introduced new equal height row component (<code>.p-equal-height-row</code>) to better align content across columns.
- version: 4.9.0
  features:
    - component: Images
      url: /docs/patterns/images#media-element-with-spacing
      status: New
      notes: We've introduced a way to add spacing above a media element.
    - component: Buttons / Themes
      url: /docs/patterns/buttons#theming
      status: Updated
      notes: Buttons have been updated to support new theming.
    - component: Buttons / Brand
      url: /docs/patterns/buttons#brand
      status: Deprecated
      notes: We've deprecated the brand buttons. Use other button styles instead.
- version: 4.8.0
  features:
    - component: Themes
      url: /docs/settings/color-settings#color-theming
      status: Updated
      notes: We're updating colour themes to use CSS custom properties. This affects the way theme is handled by the components.
    - component: Themes / Default theme setting
      url: /docs/settings/color-settings#color-theming
      status: Deprecated
      notes: We're deprecating the SCSS variables used to set the default theme. Theme can be set by using a class name on an element.
    - component: Icons / Themes
      url: /docs/patterns/icons#dark-theme
      status: Updated
      notes: Standard Vanilla icons have been updated to support new theming via <code>is-dark</code> class.
    - component: Icons / Themes
      url: /docs/patterns/icons#dark-theme
      status: Deprecated
      notes: We're deprecating the <code>is-light</code> class for icons. Use <code>is-dark</code> instead.
    - component: Strip / Themes
      url: /docs/patterns/strip#themes
      status: Updated
      notes: We've updated the strip component to support new theming via <code>is-dark</code> class.
    - component: Strip / Highlighted
      url: /docs/patterns/strip#highlighted-strip
      status: New
      notes: We've introduced a new highlighted strip component for more consistent use of alternative background colours across the themes.
    - component: Strip / Deprecations
      url: /docs/patterns/strip#deprecated
      status: Deprecated
      notes: We are deprecating a variety of legacy strip variants in favour of the new themed and highlighted strip.
    - component: Section / Hero
      url: /docs/patterns/section#hero-sections
      status: New
      notes: We've introduced a new hero variant to the section component using <code>p-section--hero</code>.
    - component: Suru
      url: /docs/patterns/suru
      status: Updated
      notes: We've updated the Suru component to work as a hero section container, added new backgrounds for 25/75 and 50/50 splits, corner fan and pyramid surus, and updated the theme support.
    - component: Links / Themes
      url: /docs/patterns/links
      status: Updated
      notes: We've updated the links to support new theming.
    - component: Links / Inverted
      url: /docs/patterns/links#inverted
      status: Deprecated
      notes: We're deprecating the inverted links. Use the new theme support instead.
- version: 4.7.0
  features:
    - component: Navigation / 25/75 split
      url: /docs/patterns/navigation
      status: Updated
      notes: We've introduced a new variant of top navigation that aligns with 25/75 grid split using <code>p-navigation__row--25-75</code>.
- version: 4.6.0
  features:
    - component: Grid / Responsive
      url: /docs/patterns/grid#responsive-5050-and-2575
      status: New
      notes: We've introduced new responsive variants for 50/50 and 25/75 grid components to allow targeting specific screen sizes with different layouts.
    - component: Grid / 25/75 split
      url: /docs/patterns/grid#responsive-5050-and-2575
      status: Removed
      notes: We are removing the <code>is-split-on-medium</code> class name as same behaviour is now implemented in `row--25-75` with introduction of the responsive variants <code>row--25-75-on-medium</code> and <code>row--25-75-on-large</code>.
    - component: Headings
      url: /docs/base/typography
      status: Updated
      notes: We've adjusted the spacing between headings of the same size when they follow one another.
- version: 4.5.0
  features:
    - component: Documentation layout / Sticky container
      url: /docs/layouts/documentation
      status: New
      notes: We improved the support for sticky and scrollable table of contents in documentation layout.
- version: 4.4.0
  features:
    - component: Documentation layout
      url: /docs/layouts/documentation
      status: New
      notes: We've implemented a new full-width documentation layout.
    - component: Full-width layout
      url: /docs/layouts/full-width
      status: Deprecated
      notes: We've deprecated the full-width layout in favour of the new documentation layout.
    - component: Side navigation / Paper
      url: /docs/patterns/navigation#paper
      status: Updated
      notes: We've added a support for paper background for the side navigation (via <code>is-paper</code> class on body element).
    - component: Table of contents
      url: /docs/patterns/table-of-contents
      status: Updated
      notes: We've refreshed the style of the table of contents and improved the consistency of HTML markup.
- version: 4.3.0
  features:
    - component: Logo section
      url: /docs/patterns/logo-section#fallback-for-misaligned-logos
      status: Updated
      notes: We've introduced new fallback variant for logo sections with misaligned images.
- version: 4.2.0
  features:
    - component: Forms / Dark
      url: /docs/base/forms#dark-theme
      status: New
      notes: We've added a new dark version for the forms inputs.
    - component: Logo section
      url: /docs/patterns/logo-section
      status: Updated
      notes: We've updated the logo section to support variable-width logos and line breaks.
    - component: Logo section / Title
      url: /docs/patterns/logo-section#deprecated-title-element
      status: Deprecated
      notes: The title element <code>p-logo-section__title</code> in the logo section is now deprecated and should not be used on any new pages. Use a heading instead.
- version: 4.1.0
  features:
    - component: Tabs
      url: /docs/patterns/tabs#theming
      status: New
      notes: We've added a new dark version for the tabs as well as updating the hover and active states.
    - component: Display headings
      url: /docs/base/typography#display-headings
      status: New
      notes: We've added a new display heading component.
    - component: Responsive 27/75 grid
      url: /docs/patterns/grid#2575-responsive
      status: New
      notes: We've added a new responsive variant to 27/75 grid component.
    - component: Suru
      url: /docs/patterns/suru
      status: New
      notes: We've added a new Suru component.
    - component: Suru strips
      url: /docs/patterns/strip#suru-strip
      status: Deprecated
      notes: Strips with old style of the Suru are now deprecated and should not be used on any new pages. Use a blank strip or new Suru component instead.
    - component: Brochure site / Section examples
      url: /docs/layouts/brochure#section-examples
      status: New
      notes: We've added examples of some brochure site hero sections.
- version: 4.0.0
  features:
    - component: Migration guide
      url: /docs/migration-guide-to-v4
      status: New
      notes: We've added a migration guide to help you upgrade to Vanilla 4.0.
    - component: Section
      url: /docs/patterns/section
      status: Updated
      notes: We've updated the section component with new shallow and deep options.
    - component: Block
      url: /docs/patterns/section#shallow-sections
      status: Deprecated
      notes: The block component should is deprecated, use shallow section instead.
    - component: Border radius setting
      url: /docs/settings/placeholder-settings
      status: Deprecated
      notes: We removed rounder corners from all Vanilla components and deprecated the use of <code>$border-radius</code> variable.
    - component: Old-style numerals
      url: /docs/base/typography#old-style-numerals
      status: New
      notes: We've added a new utility class <code>.u-oldstyle-nums</code> to use old-style numerals.
    - component: Links dark theme
      url: /docs/patterns/links#dark
      status: New
      notes: We've added a new class <code>.is-dark</code> to use the links on dark backgrounds.
    - component: Rules dark theme
      url: /docs/patterns/rule#dark-theme
      status: New
      notes: We've added a new class <code>.is-dark</code> to use the rules on dark backgrounds.
    - component: Colours
      url: /docs/settings/color-settings
      status: Updated
      notes: We've updated our brand colour to Ubuntu orange and added a teal accent colour.
    - component: Accented headings
      url: /docs/base/typography#accented-headings
      status: New
      notes: We've added a new class <code>.is-accent</code> to highlight headings with the accent colour.
    - component: Accented rules
      url: /docs/patterns/rule#highlighted
      status: New
      notes: We've added a new class <code>.is-accent</code> to highlight rules with the accent colour.
    - component: Paper background
      url: /docs/base/paper
      status: New
      notes: We've added new paper background colour that can be added to the body element using <code>is-paper</code> class name. Components designed for white backgrounds (like inputs) can use <code>on-paper</code> class to adjust for the new background.
    - component: White strip
      url: /docs/patterns/strip#white-strip
      status: New
      notes: We've added a new white strip component to highlight the content on new paper background.
    - component: Text max width utility
      url: /docs/utilities/text-max-width
      status: New
      notes: We've added a new utility class <code>.u-text-max-width</code> to limit the width of text lists.
    - component: New grey error icon
      url: /docs/patterns/icons#additional
      status: New
      notes: We've added new grey error icon.
    - component: New grey status icons in lists
      url: /docs/patterns/lists#status
      status: Updated
      notes: We've updated the status icons used in ticked lists to use grey outline instead of coloured background.
- version: 3.15.0
  features:
    - component: Sliding navigation
      url: /docs/patterns/navigation#sliding
      status: New
      notes: We've added a new sliding nested navigation component.
- version: 3.14.0
  features:
    - component: Common grid patterns
      url: /docs/patterns/grid#common-grid-patterns
      status: New
      notes: "We've added new classes: <code>.row--50-50</code>, <code>.row--25-75</code>, <code>.row--25-25-50</code>, <code>.row--25-25-25-25</code> as an alias for common grid layouts."
    - component: Rule
      url: /docs/patterns/rule
      status: New
      notes: We've added a new horizontal bar component.
    - component: Deep strip
      url: /docs/patterns/strip#deep-strip
      status: Updated
      notes: "We've increased desktop and mobile paddings for the deep strip to <code>8rem</code> and <code>4rem</code> accordingly."
    - component: Sections and blocks
      url: /docs/patterns/section
      status: New
      notes: "We've added new components: <code>.p-block</code> and <code>.p-section</code> for managing spacing between different types of elements on the page."
    - component: Divided lists
      url: /docs/patterns/lists#bulleted-with-horizontal-divider
      status: Updated
      notes: 'We removed the line above the first list item in the bulleted list with horizontal divider.'
- version: 3.13.0
  features:
    - component: Brochure site layout
      url: /docs/layouts/brochure
      status: New
      comment: We started writing down documentation about building brochure sites with Vanilla
    - component: Icons
      url: /docs/patterns/icons
      status: New
      notes: "We've added three new icons related to instance management: <code>.p-icon--play</code>, <code>.p-icon--pause</code> and <code>.p-icon--stop</code>."
- version: 3.12.1
  features:
    - component: Text with icon utility class
      url: /docs/utilities/has-icon
      status: New
      notes: We've introduced a new utility class that allows to place an icon next to some text with correct spacing.
    - component: Dense Logo Section
      url: /docs/patterns/logo-section#dense
      status: Updated
      notes: We've introduced a new dense version of the logo section that spans a single column
    - component: Restyled divided lists
      url: /docs/patterns/lists
      status: Updated
      notes: We've restyled the divided lists and intend them to be used by default now.<p>We've also added a new <code>.has-bullet</code> class to display a bullet in front of list items.
    - component: Small caps text
      url: /docs/base/typography#small-caps-text
      status: Updated
      notes: We updated the style of small caps text and introduced new class name <code>p-text--small-caps</code> in place of previous <code>p-text--x-small-capitalised</code>.
    - component: Extra small capitalised text
      url: /docs/base/typography#small-caps-text
      status: Deprecated
      notes: We are deprecating <code>p-text--x-small-capitalised</code>. New <code>p-text--small-caps</code> should be used instead. At the same time usage of <code>u-align-text--x-small-to-default</code> utility is deprecated with both of these class names as well, as they don't need it anymore.
- version: 3.11.0
  features:
    - component: Full-width layout
      url: /docs/layouts/full-width/
      status: New
      notes: We are introducing new full-width site layout.
        <p><i class="p-icon--warning"></i> This is an experimental feature, currenly meant for internal use on our design system site and docs.</p>
- version: 3.10.0
  features:
    - component: Icons
      url: /docs/patterns/icons
      status: New
      notes: We've added new desktop icon <code>.p-icon--desktop</code>.
    - component: Typography
      url: /docs/base/typography
      status: Updated
      notes: We've introduced the new variable Ubuntu font and updated the default font weights.
    - component: <code>$font-use-subset-latin</code>
      url: /docs/base/typography#enabling-cyrillic-greek-and-latin-fonts
      status: Deprecated
      notes: the <code>$font-use-subset-latin</code> option has been deprecated and should be removed when updating.
- version: 3.9.0
  features:
    - component: Forms
      url: /docs/base/forms
      status: Updated
      notes: We've updated the visual style of form elements, such as inputs, checkboxes and buttons.
- version: 3.8.0
  features:
    - component: Side navigation - Accordion
      url: /docs/patterns/navigation#accordion
      status: Updated
      notes: We've added <code>p-side-navigation--accordion</code>, <code>p-side-navigation__accordion-button</code> classes that allow building side navigation with accordions.
- version: 3.7.0
  features:
    - component: <code>vf-animation</code> mixin
      url: /docs/settings/animation-settings#usage
      status: Deprecated
      notes: <code>vf-animation</code> mixin has been deprecated. Please use <code>vf-transition</code> instead.
    - component: <code>vf-transition</code> mixin
      url: /docs/settings/animation-settings#usage
      status: New
      notes: <code>vf-transition</code> mixin replaces deprecated <code>vf-animation</code>.
- version: 3.6.0
  features:
    - component: Badge
      status: New
      url: /docs/patterns/badge
      notes: We've added a badge component.
- version: 3.5.0
  features:
    - component: Side navigation - Headings
      url: /docs/patterns/navigation#side-navigation
      notes: We've added a new <code>p-side-navigation__heading</code> and <code>p-side-navigation__heading--linked</code> classes to allow adding headings for side navigation item groups.
- version: 3.4.0
  features:
    - component: Pagination
      url: /docs/patterns/pagination
      status: Deprecated
      notes: We've deprecated the use of the <code>p-navigation</code> class on lists, the class should now be used on the wrapping nav only.
    - component: Pagination
      url: /docs/patterns/pagination
      status: Deprecated
      notes: We've added a new <code>p-pagination__items</code> class name to the list and moved the <code>p-pagination</code> class to the nav element.
- version: 3.3.0
  features:
    - component: Side Navigation
      url: /docs/patterns/navigation#side-navigation
      status: Deprecated
      notes: We've updated the class names in the side navigation. <code>.is-expanded</code> and <code>.is-collapsed</code> are deprecated and replaced by <code>.is-drawer-expanded</code> and <code>.is-drawer-expanded</code>.
    - component: Accordion
      url: /docs/patterns/accordion
      status: Updated
      notes: We updated the Accordion icon to a chevron which animates on open and close.
    - component: Segmented control
      url: /docs/patterns/segmented-control
      status: New
      notes: The Tab buttons component has been renamed to Segmented control.
    - component: Tab buttons
      url: /docs/patterns/segmented-control
      status: Deprecated
      notes: <code>p-tab-buttons</code> has been renamed to <code>p-segmented-control</code>.
- version: 3.2.0
  features:
    - component: Navigation - Search
      url: /docs/patterns/navigation#expanding-search-box
      status: Updated
      notes: We added new dropdown for expanding search on small screens.
    - component: Navigation
      url: /docs/patterns/navigation
      status: Updated
      notes: We added new style of the logos to main navigation.
    - component: Status labels
      url: /docs/patterns/status-labels
      status: New
      notes: New name for what was previously the Label component.
    - component: Labels
      status: Deprecated
      url: /docs/patterns/status-labels
      notes: <code>p-label</code> has been renamed to <code>p-status-label</code>.
- version: 3.1.0
  features:
    - component: Empty State
      url: /docs/patterns/empty-state
      status: New
      notes: We've added examples for empty state scenarios.
    - component: Ordered list nested counter
      url: /docs/patterns/lists#nested-count
      status: Updated
      notes: 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.
    - component: <a href="/docs/patterns/slider">Slider</a> and <a href="/docs/patterns/switch">Switch</a>
      status: Updated
      notes: We've updated the styling of the Switch and Slider components.
- version: 3.0.0
  features:
    - component: Expanding search box
      url: /docs/patterns/navigation
      status: New
      notes: We've added an expandable search box, to be used in top navigation.
    - component: Labels
      url: /docs/patterns/labels
      status: Updated
      notes: We've updated the labels component by introducing new semantic class names consistend with tinted chips.
    - component: Chips
      url: /docs/patterns/chip
      status: Updated
      notes: 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.
    - component: Switch
      url: /docs/patterns/switch
      status: Updated
      notes: We've updated the HTML structure of the switch component. The <code>p-switch</code> class should be placed on the the wrapping label element instead of on the input.
    - component: Notifications structure
      status: Removed
      url: /docs/migration-guide-to-v3#notifications
      notes: The classes <code>.p-notification__response</code>, <code>.p-notification__status</code><code>.p-icon--close</code> have been removed and replaced.
    - component: Button / Neutral
      url: /docs/migration-guide-to-v3#buttons
      notes: The neutral button variant <code>p-button--neutral</code> has been removed, please use default <code>p-button</code> instead.
      status: Removed
    - component: Navigation / Sub-navigation
      url: /docs/migration-guide-to-v3#navigation-title
      status: Removed
      notes: The <code>.p-subnav</code> class has been removed and succeeded by the <code>.p-navigation__item--dropdown-toggle</code> class. The children of <code>.p-subnav</code> have been removed and replaced.
    - component: Inline images
      status: Removed
      notes: The inline images component has now been removed. Please use the logo section component instead.
      url: /docs/migration-guide-to-v3#inline-images
    - component: Tables expanding
      status: Removed
      notes: We renamed and removed <code>p-table-expanding</code> and <code>p-table-expanding__panel</code>. Use <code>p-table--expanding</code> and <code>p-table__expanding-panel</code> instead.
      url: /docs/migration-guide-to-v3#tables
    - component: Tables sorting
      status: Removed
      notes: We removed <code>p-table--sortable</code> class name. Sorting can be enabled on any table by adding <code>aria-sort</code> attributes.
      url: /docs/migration-guide-to-v3#tables
    - component: Accordions
      status: Removed
      notes: We removed the previous accordion tab patterns, <code>.p-accordion__tab</code> and <code>.p-accordion__tab--with-title .p-accordion__title</code>, in favour of a more accessible pattern. Please use <code>.p-accordion__heading .p-accordion__tab</code>.
      url: /docs/migration-guide-to-v3#accordion
    - component: Grid - "orphan" colums
      status: Removed
      notes: We removed the ability to use <code>.col</code> classes without a direct parent with a class <code>.row</code>.
      url: /docs/migration-guide-to-v3#grid
    - component: Active button
      status: Removed
      notes: The <code>is-active</code> class was removed and given a more appropriate name&#58; <code>is-processing</code>.
      url: /docs/migration-guide-to-v3#buttons
    - component: Code copyable
      status: Removed
      notes: <code>.p-code-copyable</code> has been removed. Please use <code>.p-code-snippet .p-code-snippet__block--icon</code> instead.
      url: /docs/migration-guide-to-v3#code
    - component: Code numbered
      status: Removed
      notes: <code>.p-code-numbered</code> has been removed. Please use <code>.p-code-snippet .p-code-snippet__block--numbered</code> instead.
      url: /docs/migration-guide-to-v3#code
    - component: Icons - Contextual Menu
      status: Removed
      notes: The <code>p-icon--contextual-menu</code> has been removed. Please use existing <code>.p-icon--chevron-down</code> and <code>.p-icon--chevron-up</code> icons instead.
      url: /docs/migration-guide-to-v3#icons
    - component: Breadcrumbs
      status: Removed
      notes: Top level <code>&lt;ul&gt;</code> with a class <code>.p-breadcrumbs</code> has been removed and replaced by the breadcrumbs pattern.
      url: /docs/migration-guide-to-v3#breadcrumbs
    - component: Checkbox and radio buttons elements
      status: Removed
      notes: Base styled checkboxes and radio buttons (on <code>&lt;input type="checkbox"&gt;</code> or <code>&lt;input type="radio"&gt;</code> elements) have been removed. Please use checkbox and radio components.
      url: /docs/migration-guide-to-v3#form-elements
    - component: Icons - Question
      status: Removed
      notes: The <code>p-icon--question</code> has been removed. Please use existing <code>.p-icon--help</code> icon instead.
      url: /docs/migration-guide-to-v3#icons
    - component: Navigation
      status: Removed
      notes: Navigation classes <code>p-navigation__links</code>, <code>p-navigation__link</code>, and classless <code>&lt;a&gt;</code> have been removed. Please use new class names (<code>p-navigation__items</code>, <code>p-navigation__item</code>, <code>p-navigation__link</code>) instead.
      url: /docs/migration-guide-to-v3#navigation-title
    - component: Heading classes
      status: Removed
      notes: Heading classes with numbers as words (<code>p-heading--one</code>, <code>--two</code>, ...) have been removed. Please use class names with numbers (<code>p-heading--1</code>, <code>--2</code>, ...) instead.
      url: /docs/migration-guide-to-v3#headings
    - component: Social icons
      status: Removed
      notes: We've removed <code>p-icon--canonical</code> and <code>p-icon--ubuntu</code> from social icon set.
      url: /docs/migration-guide-to-v3#social-icons