Component updates in v16

Introduction

Version 16.0.0 introduces major breaking changes, including redesigned components, API updates, and the removal of deprecated elements. This guide details the main differences and how to migrate components from 15.x.x to 16.0.0.

Usage of components

In our component props, instead of passing hardcoded values such as 2rem, we should always use an alias token whenever possible. Only if no suitable alias token exists, a core token or a hardcoded value may be used.

Previous version:

() => {
  return (
    <DxcInset space="2rem">
      <DxcFlex gap="2rem">
        <DxcContainer
          width="100%"
          height="40px"
          background={{color: "#DDC9F3"}}
         />
        <DxcContainer
          width="100%"
          height="40px"
          background={{color: "#6F4B97"}}
         />
        <DxcContainer
          width="100%"
          height="40px"
          background={{color: "#DDC9F3"}}
         />
      </DxcFlex>
    </DxcInset>
  );
}

() => {
  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcFlex gap="var(--spacing-gap-xl)">
        <DxcContainer 
          width="100%"
          height="var(--height-xxl)"
          background={{color: "var(--color-bg-primary-medium)"}}
        />
        <DxcContainer
          width="100%"
          height="var(--height-xxl)"
          background={{color: "var(--color-bg-primary-strong)"}}
        />
        <DxcContainer
          width="100%"
          height="var(--height-xxl)"
          background={{color: "var(--color-bg-primary-medium)"}}
        />
      </DxcFlex>
    </DxcInset>
  );
}

For more information about tokens refer to its documentation

Added components

The following component is now available to be used in your applications:

Component	Features
Avatar	Visual element used to identify users, teams, or entities across the interface. It helps create a recognizable and consistent user experience by visually representing people or objects through images, icons, or initials.

For more information about its usage and features, refer to its documentation

Modified components

Several components were redesigned and now have a different API or behavior. See below for details.

ApplicationLayout

The ApplicationLayout component and its compound components have been redesigned. The new API focuses on improved flexibility, better responsiveness, and easier customization. The header prop is no longer required, however it is highly encouraged to have either a Sidenav or a Header in your application. The following sections will explain the changes in more depth.

The Header component has been redesigned. The new API provides a simpler and more flexible approach:

Version	Description
v15 (old)	The header was configured using props like `underlined`,`content`, and `responsiveContent`. Dropdowns were rendered using `DxcHeader.Dropdown`.
v16	The new header uses `logo` and `appTitle` for the branding, `navItems` for navigation links (with optional nested groups), `sideContent` for side elements, and `responsiveBottomContent` for mobile-specific content.

When migrating, move your old content and dropdowns into the new logo, appTitle and navItems props. Replace responsiveContent with responsiveBottomContent and sideContent based on the desired positioning. sideContent can receive a flag parameter that depends on responsiveness.

For further information regarding the new API, please refer to updated documentation

ApplicationLayout.Sidenav

The Sidenav component has also changed from a compound component structure to a declarative navItems prop. This new API also features changes that improve the responsiveness and flexibility of the component.

Version Description

v15 (old) DxcSidenav.Section,DxcSidenav.Group, and DxcSidenav.Link defined the structure and links.

Version	Description
v15 (old)	`DxcSidenav.Section`,`DxcSidenav.Group`, and `DxcSidenav.Link` defined the structure and links.
v16	The `navItems` prop accepts an array of `Item` and`GroupItem` objects. Each `GroupItem` has the following structure: `{ badge?: ReactElement; icon?: string \| SVG; label: string; items: (Item)[]; }` Each `Item` has the following structure: `{ badge?: ReactElement; icon?: string \| SVG; label: string; onSelect?: () => void; selected?: boolean; }`

v16

The navItems prop accepts an array of Item andGroupItem objects. Each GroupItem has the following structure:

{
  badge?: ReactElement;
  icon?: string | SVG;
  label: string;
  items: (Item)[];
}

Each Item has the following structure:

{
  badge?: ReactElement;
  icon?: string | SVG;
  label: string;
  onSelect?: () => void;
  selected?: boolean;
}

These are the main changes but there are some new additional props that have been added in this version.

When migrating:

Flatten your old Title, Section, Group, andLink structure into a single items array following the new typing.
Move your old logo/app title into the new logo and appTitle props.
Include topContent and bottomContent as needed for further interaction and handle the expanded state for responsive layouts with defaultExpanded for uncontrolled behavior or expanded and onExpandedChange for controlled behavior

The Footer component no longer accepts children. It now provides two different props, leftContent and rightContent, for placing custom elements in their respective areas. In reduced mode, the footer will no longer display custom content on the right side, instead it will display the copyright statement. A new logo prop has also been added to be able to support custom branding.

Badge

Due to the recent token updates, we have aligned the color prop with a semantic color approach. The available values are now 'primary', 'secondary', 'tertiary','success', 'info', 'neutral', 'warning', and'error', replacing the previous functional options ('grey', 'blue', 'green', 'orange', 'red','yellow', 'purple').

DataGrid

This component has exited the experimental phase and is now fully supported, featuring new functionalities like on-demand loading (thanks to the childrenTrigger prop), possibility to have rows expanded by default and the possibility to render any page by default. To know more about these new features, please refer to the updated documentation.

Heading

The weight options have been refactored, from 'light' | 'normal' | 'bold' to 'default' | 'regular' | 'light'. Additionally, a heading level 6 is now supported.

Slider

tabIndex prop has been removed. The prop was not working as we intended, so in the meantime we decided to remove it. We believe that, at some point, the component will need to set this prop.

Tabs

The Tabs component no longer supports the legacy API. A more flexible approach using a Compound Component Pattern is now used instead to maintain a higher consistency with our existing NavTabs and make the API much simpler. Additionally, a few improvements have been made to enhance responsiveness and controlled behavior. Please refer to theupdated documentation for more details.

ToggleGroup

The ToggleGroup component API has been updated, including the possibility to have a custom orientation (horizontal or vertical) and a redesign of the way options are structured. Please refer to theupdated documentation for more details.

Removed components

The following components are no longer available and must be replaced or removed from your application:

Component	Action
Tag	Removed completely. Replace with `Badge`, a `Chip` or `StatusLight` based on the context.

The following table describes which component to use depending on the use case:

Replacement	Recommended use case
`Badge`	Use when you need to display a compact piece of information such as a count, short label, or status indicator inside or near another component (e.g., notification count, "New", "Beta").
`Chip`	Use for interactive labels or items representing filters, selections, or categories that users can select, deselect, or remove.
`StatusLight`	Use for simple, non-interactive visual indicators of state or system status (e.g., success, warning, error, inactive).

Overview

Guidelines

Foundations

Migration

Utilities

Components