Carbon June(ish) preview

April=showers. May=flowers. June=design system expansion through theming, patterns, and community engagement.

If you haven’t heard of the Carbon Design System before, check us out! We’re a design system built by IBM, shipping open-source styles and components in Vanilla, React, Angular, and Vue for anyone building on the web.

Bug fixes and improvements. You know the ones. Bugs. Fixes. Improvements.

It’s the most popular and unhelpful changelog ever created. We see the value in bug fixes and improvements, and we see the value in telling you what we’re fixing, improving, not touching, and why. Here’s what’s coming in June (and early July).

TL;DR

• We’re wrapping up some component enhancements from May
• Our theming tools are getting some much needed love
• UI Shell was launched last month. It’s getting a pattern and more features
• We’re working to create a written specification for every component
• We’re bringing the full IBM Design Language icon library to Carbon users
• The IBM Design Language Website will live in our new Gatsby theme
• Contributing back will be easier than ever
• Our support is ramping up. No issue left behind!

The details

Components

Several Carbon components received enhancements in May, and we’ve been rounding off rough edges remaining from the Carbon v10 launch.

You shouldn’t expect much change to Carbon’s core components in June. We’ve listened to your feedback, and we’ll continue making our components more powerful, more stable, and more accessible.

Shell

Carbon UI shell is stable and ready for production. We introduced the shell header, left panel, and right panel last release. In June, we’re developing a navigation pattern to guide effective use of shell components. Building for a platform isn’t easy, and we’re working to make it easier.

The left panel component will expand to accommodate further product navigation, including icons and a menu. We’ll also introduce notification support and user panels to the right panel component.

Shell is also getting its own Sketch Template! It will have the shell header and panels in place along with visual guidance directly within the template. This will give designers an environment to begin bringing their product into the UI shell.

Theming

Shortly after the launch of Carbon v10, we introduced three additional color themes to Carbon. Keep an eye out for an updated theme sandbox to include Carbon v10 tokens and components in all four themes.

We are also enhancing our component previews on www.carbondesignsystem.com. You’ll be able to view the components in any of the four themes.

Component spec

As Carbon scales, each core asset needs a source of truth.

Beginning this month, we’re working to create a written document that formalizes the specification for each Carbon component. Later this year, we will automate the verification process, ensuring the functional components comply with this spec.

Icons

In our next update, we’re bringing the full breadth of the IBM Design Language iconography library to Carbon users. We’re investing in tools to bring these icons to you, through Sketch or through code, and we’re updating our website to offer a full experience for finding and using these new icon assets.

Website

The IBM Design Language website will soon use our new Gatsby theme, and the Carbon site will be hot on its heels. The Gatsby theme empowers content creators and designers to deliver consistent web experiences with little to no technical know how. The IBM.com/design ecosystem will soon be built entirely within the Gatsby theme.

Like always, we’re regularly updating Carbon documentation to make the system easier to use. This will include better guidance for creating your own documentation for your own Carbon add-on, and we’ll be shedding more light on how the system will facilitate components, patterns, and docs built by teams around the web.

Contribution

The only way Carbon gets better is through contribution. As the system has grown and evolved, so too has our contribution model. Through this next project cycle, we’ll be working to explain the hows and the whys of contributing to Carbon.

This will include documentation templates, better GitHub issue templates, better definitions, and clearer expectations. We’ll expand not just our components and patterns, but our docs and tools too.

We’re all ears on how to get better, so please don’t hesitate to bark up our tree.

Support

Support is an ongoing project, and we’re learning to be better shepherds of community contributions. If you open up an issue, if you request a feature or report a bug, we’re committed to seeing that issue through.

Whether it’s outside the scope of our current efforts, or if it’ll result in a Carbon core enhancement, no issue will be left behind.

We want (need) your feedback

Big isn’t easy. We know that, you know that. That’s why we’re building a system to make big projects feel a little more…little.

If you run into any issues, or have feedback for us, please reach or make an issue on GitHub and we’ll get back to you as soon as possible.

Check out our projects on GitHub! We’re always looking for contributors. If you have any questions or comments about the Carbon Design System, please reach out at carbon@us.ibm.com.