Carbon v11 Beta 2
The second public beta for v11
We’re excited to announce the release of our second official beta for Carbon v11 🥳 This beta focuses on bringing together some of the biggest updates for our React components that we have planned for this release. Updates to components, props, icons, and more are now available through the @carbon/react package.
If you have the time to give us any feedback for this release, we’d love to hear from you on GitHub Discussions! Feedback is highly appreciated as it helps us to ensure the stability of the final release.
To get started, check out the first draft of our official Migration Guide. Read more about each feature or find out how to join our Release Partners program below.
Changes to components
We’re making several key changes to components in Carbon to make them easier to use and more accessible out of the box. Some of these changes are quality of life updates to props, others are changes in our approach to how we deliver a specific component. Overall, the effect of these changes will be a more consistent set of components with accessibility incorporated at every step.
Notification
Our existing notification components will no longer accept actions as a prop to more closely align with WAI-ARIA guidance out of the box. These components are intended to contain no interactive content, instead of containing informational content only with an appropriate aria-role of log, status, or alert.
This leaves a gap for experiences that require actions inside notifications. For this use case, we’re introducing a new component: Actionable Notification. Actionable Notifications can be configured to be visually styled similar to a Toast Notification or an Inline Notification. It has an aria-role=‘alertdialog’ and moves focus to the notification when it appears. All of the notification components have been updated to support being closed by pressing the escape key.
This separation of concerns aims to provide users a more clear and accessible experience out of the box without having to be familiar with the complexities of the WAI-ARIA spec regarding notifications. It also paves the way for future enhancements to notifications with and without interactive elements, allowing their nuanced implementations to differ and meet the needs of future accessibility requirements.
Changes to className
The className prop is available in almost every component that we ship today. Unfortunately, where this prop is placed in the rendered markup may have been different depending on what component you were using. In most cases, this prop was applied to the outermost element rendered by a component. In others, it may have been applied on a “special element” that was rendered, like an <input> .
In v11, we’re updating className to be consistent across the project. Now, className will only be applied to the outermost element for all components.
Changes to event handlers
Many of the components that we offer provide a prop to listen to the events or the state changes of a component. Over time, some of these props have become inconsistent with each other and you have to reference what the exact signature may be for a prop in a component.
As we go through the props in our project, we’re simplifying the signatures of these types of props so that they are consistent and uniform across the project.
Icon components are now available in @carbon/react
Starting in this beta, you’ll be able to pull in icons from the @carbon/icons-react package directly from @carbon/react. This change is a quality of life improvement to decrease the number of dependencies that you have to install when using Carbon.
With this change, you can use import an icon directly from @carbon/react/icons . For example,
import { Bee } from '@carbon/react/icons';These icons also include a change to how we interpret sizes in our icon set. By default, we would ship icons with each size that were supported by the IBM Design language. In this update, icons now have a size prop that you can use to configure the size of the icon.
Changes to styles
We’ve made several changes to @carbon/styles in this release that include bug fixes, quality of life updates, and new functionality.
Prefix change
The official prefix of our classes, custom properties, itself is finally moving from bx to cds. This release includes cds prefixes by default and also provides you with the way to customize the prefix to help out with migration in both styles and React.
Component tokens
We implemented a component token theming system to better support several of our components that have tokens that change between themes. While we are still trying out this system in our work, we would love any feedback on how this works for teams who are using custom themes with Carbon or who override the styles of components.
Compatibility theme
This release also includes a minor update to our compatibility theme. To better support teams transitioning from v10 to v11, we created a compatibility theme that you can use that has tokens from both v10 to v11. This release makes it even easier to try this out and use it in your project.
What’s coming next
Our next release will be the first Release Candidate for v11. It will release focus on wrapping up the remaining updates that we are planning on making to our packages for v11.
If you’d like to help us out along the way, definitely join our release partner program. Otherwise, be on the lookout for the next release candidate in the next couple of months!
Josh Black is a Software Engineer based out of Austin, TX working on the Carbon Design System. The above article is personal and does not necessarily represent IBM’s positions, strategies, or opinions.
Questions or comments about Carbon? Reach out at carbon@us.ibm.com or tweet us @_carbondesign.
