What’s around the IBM Carbon corner: October 🎃

Josefina Mancilla
Sep 6 · 5 min read

If you haven’t heard of the IBM 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.


We were busy in August. We’re bringing revamped websites, docs, icons, and design kits to you this month. It’s easier than ever to use IBM Carbon and to contribute back to the system, and there’s a lot more to be excited about coming in October.

Released in 10.6

Check out our full changelog for details on everything we released. As a recap, our August cycle focused on the following projects:

Support

We brought back an optional default type (via feature flag) for those migrating from v9. Accessibility violations in our expandable Tile, Dropdown, ComboBox, Breadcrumb, and TableToolbarSearch were fixed. Some style fixes include adding disabled styles for FileUploader and updating the Tabs color tokens to allow for theming. Lastly, thanks to some amazing contributors, our UI Shell Rails component is finally stable! 🙌

IBM Design Language site

Though it looks the same, under the hood the IBM Design Language site is entirely different. The IDL site is now up and running with the gatsby-carbon-website theme. We also closed out a whopping 80+ bugs! 🐛

Carbon website content

We realize that our design and code assets are only as useful as their documentation, which is why we’re putting a lot of effort into improving the experience for you.

This release, we focused on auditing our website content to determine what needs work, and from that audit, we developed a content strategy. We also created standardized content templates for components and patterns, and cleaned up duplicate content.

Icons

We launched an updated iconography section on our website, which supports searching by category, icon name or alias. Two new icons packages were also released: @carbon/icons-react and @carbon/pictograms-react. They both support all IBM Design Language icons!

For our Sketch fans, you will be excited to learn our Sketch icon kit was also updated to generate all icons from code. 🔶

Design kit

Radio button, text input, data table, search, and icon button all got major fixes or improvements. We also did the usual housekeeping to keep the kit up to date as it grows! Check out our changelog for full details.

Contribution model

Building Carbon Carbon would not be possible without our contributors. This month, we committed to improving the experience with better docs and an expanded experimental section.

We also rewrote our Code of Conduct and general contribution guidelines. See the Request for Comment (RFC) proposing a new contribution and add-ons process.

Patterns curriculum

If you haven’t heard, Patterns is our Early Career Professional boot camp. This release cycle, we held a first-ever “How to design with Carbon” workshop for Patterns. We’re excited to be able to equip IBM’s new designers with all things Carbon so they can take off and become Carbon ambassadors on their teams.

Workshops like these help us improve our documentation and create better tutorials, tools, and conference talks. If you haven’t seen our Developer Essentials tutorial, go check it out!

Coming in October

Check out our October Endgame plan for detailed goals on each of the following projects.

Community contribution

Carried on from the last Carbon release, our community contribution project will now focus on improving pattern contributions. Keep an eye out for our new Contributor License Agreement (CLA), and some documentation about our in-development add-on model and maintainer model.

Theming

While Carbon adheres to the IBM Design Language, sometimes there is a need for “flexibility in execution”. This is where theming comes into play. This project is an extension of RFC 3705, which prototypes theming approaches. Our goal is to determine a technical theming strategy, which could include using CSS variables, creating tokens, and more.

Accessibility

This IBM Carbon’s first full-time, accessibility-dedicated project. Another one of our dev driven efforts, this project will focus on clearing high and medium priority a11y issues in our backlog. Additionally, we aim to provide general a11y training and team advocacy throughout the project. ♿️

Brand

Gatsby theme and website enhancements include a native, client-side search, an improved table component for our site documentation, and an accessible video component.

Website

This project will focus on Carbon website improvements. We’re updating our content based on our audit and content strategy planning from last release cycle.

We’ve had a huge influx of patterns contributions, and part of our efforts for this project will also include triaging patterns contributions and surfacing them on our site. We also have some cool data visualization coming your way, as well as improved documentation for our elements packages. 📈

Tooling

The design tooling project will focus on updates to our color palette, squashing bugs in the IBM Design Language Sketch kit, and adding pictograms.

Components

We haven’t forgotten all about feature enhancements. 🎉 This project will focus on determining the priority of feature enhancements for future release cycles.

Hacktoberfest

Not quite one of our Carbon projects, but a fun event we like to participate in each October! If you didn’t know, Hacktoberfest is a month-long celebration of open source projects run by DigitalOcean and DEV. We had a huge success with this last year and are looking forward to reviewing all of your Pull Requests (PRs) this year! 🎃 🦇

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 out or open an issue on GitHub.


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.

_carbondesign

Carbon is the design system for IBM software products. It is a series of individual styles, components, and guidelines used for creating unified UI.

Thanks to Connor Leech

Josefina Mancilla

Written by

Developer on Carbon Design System by day 💻, gym rat/ triathlete/climber by night 🚲, dog mom always. 🐶

_carbondesign

Carbon is the design system for IBM software products. It is a series of individual styles, components, and guidelines used for creating unified UI.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade