Carbon v11 Beta 3

The final beta release for v11

We’re excited to announce the final beta release for Carbon v11 🥳 This release focuses on updates to our tokens, new components, and better integration with IBM Plex.

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! It helps us 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.

Bringing in IBM Plex

By default, Carbon provides a way to use IBM Plex out-of-the-box through Google Fonts. For a lot of teams using Carbon, this is a great way to get up and running fast. For others, this approach was limiting in a handful of ways.

In particular, this approach limited what parts of IBM Plex teams could use to IBM Plex Mono, IBM Plex Sans, and IBM Plex Serif. It also limited the font weights and styles that teams could use to only light, normal, and semibold. It also made it more challenging to self-host fonts for products that required that capability.

In v11, we are introducing a new way to include IBM Plex in your project. This approach will allow you to still use the defaults that come in Carbon today while unlocking all available fonts and weights from IBM Plex for your project. This also allows teams that self-host fonts to configure exactly where each font lives in their project.

We’re incredibly excited for teams to try this out and bring in the variety of fonts that IBM Plex provides. If you’re trying out this feature in the release, we’d love to hear from you!

Changes to our disabled tokens

We’ve made a couple of changes to our new color tokens in response to feedback from teams using disabled tokens when layering assets. First, the $disabled-text tokens were not visible on the third layer in our dark themes. As a result, instead of having a fixed color (Gray 70) for disabled text we will now use an opacity of the $text-primary token for the disabled text color. This will make it visible on any layer it is placed on along with having equal contrast across layers.

We’ve also removed the $field-disabled and $layer-disabled tokens completely. This is helpful for disabled states, where there used to be no value change between the enabled $field and $layer tokens and their disabled tokens counterparts. Eliminating the disabled tokens helps to streamline the token set as we now do not have to include disabled field and layer into the layering sets. Now there are six fewer tokens that you need to think about 🎉

Changing our layering approach in code

The layering tokens that we are adding in v11 provide a simple way for a component to work across different layer levels on a page. In our current implementation, this approach was limited to only the global theme and would fail when teams would inline themes.

In this release, we revisited our approach to implementing layer tokens to fully support both the global and inline theme use-case. With these changes, you can expect layering tokens to work as expected no matter where they live in your product.

These changes come as a direct result of feedback on our Beta 2 release and we wanted to take a moment and say thanks to everyone who helped out with this! We really appreciate it.

Updates in React

This release contains several new components and updates to existing components. It also continues our work of streamlining prop APIs and project conventions. In particular, we want to highlight changes to Tooltip and some of the new components we’re introducing for theming and layering.

Tooltip

Our set of tooltip components is going through several changes in v11. Most notably, we are updating these components to be more accessible by restricting what content can be rendered inside of a tooltip.

In the past, the flexibility we offered resulted in situations where underlying semantics of tooltip content would not be communicated to screen readers. In v11, restricting what can be placed in a tooltip addresses this issue. However, with this change, there was not a clear migration path for all situations where someone was using a tooltip.

As a result, we’re introducing several new primitives such as our Popover component along with techniques like disclosure to help teams build out interactions that have flexible content and remain accessible.

Theming and Layering

Our usage of CSS Custom Properties in v11 unlocks a way to efficiently change the global theme on a page, which is great for light and dark mode support, along with the ability to theme a particular component or part of a page. Both of these features are now available through a Theme component which allows you to change the theme or set the theme for a particular part of a page.

This component interacts with a new Layer component which ties in our layering model into the component model. This new component allows you to customize when components render on the next layer without having to worry about passing a light prop to every component in that region.

Most importantly, this layering approach and Layer component work in our g90 and g100 themes and also fully support inline themes.

Updates to component conventions

This release continues our efforts to refactor components to have consistent conventions across the design system. This release, in particular, has focused on refactoring class components to functional components. This change should have no impact on you and your usage of the component but will allow our team to use some of the newest features in React along with the custom hooks that we use throughout the library.

What’s coming next

Our next release will be the first Release Candidate for v11. It will focus on wrapping up the remaining updates that we are planning on making for v11 to the design system. You can expect this release in January 2022.

If you’d like to help us out along the way, definitely join our release partner program. Otherwise, be on the lookout for our first release candidate next month!

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.