Carbon v10.3.0 (May 2019)

Josh Black
_carbondesign
Published in
5 min readJun 6, 2019

--

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.

Here’s a detailed changelog for 10.3.0 if you’re into that sort of thing.

It’s June. That means May is over, which means we shipped Carbon 10.3, which is also known as the Carbon May release. There’s a lot to share, so we’ll get right to it.

10.3.0 includes additions and fixes to our components, a new focus on enablement through Carbon Developer Essentials, a new Gatsby theme for our core website, and a whole lot more.

This is the beginning of our push to make Carbon the easiest design system to use on the web. That begins with you.

Community

Learn to build with Carbon

In May, we kicked off our Carbon Developer Essentials series. As of this writing, 378 users have forked the project. That means nearly 400 are learning to build with Carbon, straight from the team building Carbon.

If you want to be number 400, you can join us live on YouTube. We’ll see you (or rather, you’ll see us) Tuesday mornings at 10:00am CDT. If you want to get caught up, head to the Carbon site.

Components

We’re continually receiving feedback from our users, and we’re always listening. What works? What doesn’t? Who needs what and why?

With 10.3, we shipped several major updates to our core components. Our components are more powerful, more adaptable, and more accessible than ever. Button, Data table, Modal, Notifications, and Tooltip were all upgraded.

We also introduced three brand new components, all part of the Carbon UI shell. This includes a universal header, right panel, and left panel for any platform and product building with Carbon.

Patterns

As part of the Carbon team’s community-building effort, we’ve dramatically ramped up our facilitation of community contributions. Do you have a pattern for something, anything, that you think is really good? We want to see it.

We recently brought in the first community-created pattern. Currently living in the Carbon site’s experimental section, this pattern is one of several in our review pipeline. If you see something you like, let us know!

Architecture

Carbon Design System

As part of 10.3, Carbon’s repository architecture was completely reworked. Carbon is now a monorepo, where each part of our core system is now in the same project.

This allows the Carbon team to develop faster, with all packages in the same place. Monorepo also makes it easier to coordinate our releases (like this one), and helps improves our goal of stability across releases.

As we look to the future, Carbon will grow through community-created add-ons and components. Delivering each component as its own package allows teams to work with core Carbon tools as well as those built by the hundreds of team developing with Carbon.

Design kit

As Carbon scales, so does our tooling. During 10.3, we restructured our Sketch kit. Teams can now download one theme library, or all four. It’s free to use for anybody, anywhere, served straight from Sketch cloud.

Our kit now includes all component enhancements: Symbols for the new UI shell components, 40px buttons, icon buttons, and character count for text area.

Elements

Carbon’s underlying elements packages evolve through feedback from product teams. This update includes 1:2 aspect ratio classes in our grid package, and an extension to our theming system to support skeleton tokens.

Website

Our website will forever be a work in progress. We receive continued feedback on our docs, and as a result they’re forever improving. The Carbon site isn’t versioned for this very reason — we want our content to reflect the current state of the system.

This past month, we also launched our first Gatsby theme. This allows anybody on the web to launch a documentation site with no technical knowledge. Want to try it out? Two commands and you’re off.

What’s next

You can expect a lot of the same for 10.4, and we’re excited about that. We’ll make it even easier to contribute, our docs will improve, our tooling will expand, and our commitment to accessibility will drive it all.

We also hope to launch inline theming, improve our icon library, and surface more robust component and pattern specifications. Our system grows through feedback. If we’re not working on what you need, please reach out.

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.

--

--

Josh Black
_carbondesign

Building a design system for GitHub. Previously working on Carbon. Thoughts are my own.