Solvedcarbon 2021 Release Proposals

This planning issue is currently a WIP. Everything listed here is subject to change

This umbrella issue is going to be organized into multiple topics. Each topic refers to a proposed change to our ecosystem of packages that will be shipped in our Q2 2021 release. Topics can relate to several packages, or just one, and should have an accompanying discussion linked at the bottom of the section.


Topic Status Discussion Planning
Convert warning usage to console.warn N/A #8017
Combing spacing + layout tokens N/A #5602
CSS Grid Support In Progress N/A #8141
Color token updates In Progress #7743 #8148
Transition to Sass Modules In Progress #7539 #8138
Rename the size field prop in components In Progress N/A #8370
Icon modules with size Prop In Progress N/A #8139
Refactoring test suite In Progress N/A #8143
Bringing in IBM Plex In Progress #7531 #8710
Component Accessibility Primitives In Progress N/A #8293
Tooltip Refactor In Progress TODO TODO
Notification Refactor In Progress TODO #8406
Theming the UI Shell In Progress TODO #8409
Inline theming In Progress TODO #8408
Package renames and dependency updates In Progress TODO TODO
Officially deprecate carbon-icons Accepted N/A #8137
useNotification hook Accepted TODO #8405
Package bundle performance Accepted TODO #8407
Not listed Accepted TODO TODO
Remove deprecated code Accepted TODO #8410
Focus style updates Not pursuing N/A N/A
23 Answers

✔️Accepted Answer

Bringing in IBM Plex

Status: Proposal

Currently, we offer support for a handful of font faces (Sans, Mono, Serif) and a handful of weights (light, normal, semibold). We also offer a way for these fonts to be loaded easily through Google Fonts by default.

However, it seems like the usage for IBM Plex has grown broadly to include the following use-cases:

  • Able to include different fonts from: for internationalization
  • Able to leverage the Variable Font as opposed to Sans plus a variety of weights
  • Able to bring in multiple weights as opposed to our limited set

Discussion Link: #7531
Planning Issue: TODO

Packages impacted

  • carbon-components
  • @carbon/type
  • @carbon/elements

Links & Resources

Other Answers:

Color tokens update

Updates to the component color tokens with two main objectives:

  1. Make token names more user-friendly by applying usage specific names in order to help users more easily understand what the token is used for and when/where to apply it without having to frequently reference the usage guide.
  2. Better account for the background layering modal. At the moment we only account for two layers and it needs to account for at least three. Third layer stacking currently breaks in the dark themes. See discussion post for more details
    • There are two possible solutions to solve this: creating a nested solution with each theme (proposal 1) or implementing inline theming (proposal 2)

Links and resources:

Packages impacted:

  • carbon-components
  • carbon-elements

Discussion Link: #7743
Planning Issue: #8148

Rename the size props in components

Currently size in component code are:

But should be:

  • Small: 32px
  • Medium/default: 40px
  • Large: 48px

With potential to add:

  • XS: 24px
  • XL: 64px

Packages impacted:

  • carbon-components
  • carbon-components-react

Combine spacing + layout token scales

There is little value in having two distinct spacing and layout scales. It could easily all be one scale. Need to look at adding a few larger scale steps as well.

Packages impacted:

  • carbon-components
  • carbon-elements

CSS Grid Support

Our grid implementation uses flexbox as the underlying layout mechanism for teams to achieve 12/16 column layouts. As we look towards dropping support for IE11 in our next release, it would make sense for us to provide first-class support for CSS Grid.

Packages impacted:

  • carbon-components
  • carbon-components-react

Planning Issue: TODO

Related Issues:

carbon 2021 Release Proposals
Bringing in IBM Plex Status: Proposal Currently we offer support for a handful of font faces (Sans M...
theme ui Syntax error: pragma and pragmaFrag cannot be set when runtime is automatic.
Just adding here in case anyone sees this error message after upgrading a project to create-react-ap...
docz v1.0.0-rc.* Compiled with errors: Module parse failed: Unexpected token
Also instead of installing webpack@4.28.2 you can specify it in resolutions in package.json ...
docz Uncaught TypeError: Cannot read property 'close' of undefined
I've noticed that the problem appears when using docz with react-scripts and the reason is a differe...
docz The above error occurred in the <StoreStateProvider> component
Thanks! It works! But it seems I have to use yarn At first I use npm install and the same problem oc...
theme ui integrating theme-ui with storybook in a gatsby project
I managed to fix this with the below main.js storybook config As @hasparus says you can force storyb...
docz Docz dosent find custom paths
Is there current a way that docz can handle aliases afforded by the paths option in a given tsconfig...
docz MDXTag Error: "components is not defined"
Same error with the latest version of docz (0.12.12) Bug Report Describe the bug When visiting my lo...
docz It doesnt start
Babel 6 support now is possible by using docz-plugin-babel6 release in v0.2.6 Hi can you help me? Do...
grommet React Router and Anchor do not work together
I'm using typescript and customize the Anchor this way: Usage: And it works! -- UPDATE: Omit colorPr...
polaris react Tabs Documentation
Hi @AdityaAnand1 Like @lemonmade said above this isn't automatic and the state needs to be managed f...
grommet Using Anchor with Link from react-router
I'm just trying/learning Grommet and quickly ran into this issue as well with React Router v4 ...
docz Props components not working since 1.0.0-rc.8
I'm having the same issue with props not displaying I'm running on docz 1.0.4 The interesting thing ...
rebass Using rebass with storybook in a full project.
Hey @GStaroz You need to add a storybook decorator to load the Rebass theme Here's a copy of my conf...
docz I can't get the theme config logo config to work
Got a solution 🎉 Thanks to this comment I learnt that Docz supports a public folder ...
docz Component not render correctly using only emotion CSS props
I had the same problem and @mitchellhamilton one of the maintainer of Emotion helped me ...
axios Axios catch error returns javascript error not server response
I have exactly the same environment Try this: Modify from console.log(error) to console.log(
scrapy ' error: command 'x86_64-linux-gnu-gcc' failed with exit status 1 '
@euler16 for scrapy with Python 3 you'll need with Python 2 you'll need I wanted to install scrapy i...
laradock Mysql. The server requested authentication method unknown to the client [caching_sha2_password]
alter user 'username'@'localhost' identified with mysql_native_password by 'password'; would fix it....
react navigation screenIsActive prop / componentDidFocus event for TabNavigator items
It probably makes sense to add lifecycle hooks to screens In one of my Tabs i need to load Data from...
meteor [] Error: ENFILE: file table overflow
I was getting the same after an upgrade to macOS Sierra Turns out macOS have a harsh limit on number...
ipython Last jedi release (0.18.0) is incompatible with ipython (7.19 and 7.18 tested); reason - column arg was deprecated, and now removed
As a temporary fix for anyone just trying to get things working again: It would be really nice if yo...
material ui Module not found: Can't resolve 'material-ui-icons/Menu' Martial Next
For anyone else experiencing this issue: npm install @material-ui/icons
laravel dompdf (1/1) ErrorException Non-static method Barryvdh\DomPDF\PDF::loadView() should not be called statically
This happens because you are namespacing the wrong PDF class You are namespacing Barryvdh\DomPDF\PDF...
webpacker localIdentName option moved in css-loader configuration
I faced same issue after upading css-loader but I solved it If you check css-loader readme ...
react navigation Send data back from child screen?
@itswaze You can do something along these lines to pass back from the child screen ...
react navigation How to goBack from nested StackNavigator?
@dhruvparmar372 According to the NOTE in the doc a navigator's navigation prop may not have the help...
axios POST request works in Browser but not on Node
This might be considered a duplicate of #789 I was able to use the form-data package with Axios in n...
react navigation Best pattern for a 'Save' button in the header
Try setting your component instance's handleSave function as a navigation state parameter after the ...
DefinitelyTyped [@types/react] RefObject.current should no longer be readonly
It's not It'a intentionally left readonly to ensure correct usage even if it's not frozen ...
react native navigation [V3][Android] FATAL EXCEPTION: create_react_context
OK after a good night of sleep I've found why I was having this issue In the I ...
ts node Custom typings not working with ts-node 8.0.2
When using with ts-node you have to add --files flag After updating to ts-node version 8.0.2 the cus...
ohmyzsh compinit:503: no such file or directory: /usr/local/share/zsh/site-functions/_brew
Per #9602 (comment) brew cleanup fixed it for me I am using Apple M1 When I added this line: export ...
laradock SQLSTATE[HY000] [2054] The server requested authentication method unknown to the client
+1 I'm having the same problem here. Info: Docker version ($ docker --version): Docker version 17.12...
vagrant vagrant box update - Fails with 404 Not Found error
A workarround to add in your Vagrantfile: Vagrant version Host operating system Ubuntu 16.04.3 LTS G...
vagrant vagrant --help displays a rubygems error
To fix this error: Vagrant version Host operating system Expected behavior vagrant and vagrant --hel...
date fns Can't resolve 'date-fns/_lib/format/longFormatters'
You probably forgot to install date-fns or Code: import DateFnsUtils from '@date-io/date-fns'; ...
virtualenv Error creating virtualenv with python3.6
The original poster's problem is due to not having the 'python3.6-venv' package installed ...
provider A Product was used after being disposed. flutter: Once you have called dispose() on a Product, it can no longer be used.
Oh I see what you're doing Don't: DO: i have a ChangeNotifireProvider that such that i do pushReplac...
react navigation Reset to nested route, "There is no route defined for..."
A quick workaround (not heavily tested): set the key property to null on your action. ...
axios Adding headers to method
Edit: I had to add Authorization to allowed headers in my CORS filter @jffernandez I'm having the sa...
axios Adding Retry Parameter
@mericsson I am too in need of exponential backoff when retrying I've put together the following whi...
homebrew openjdk Cask adoptopenjdk8 exists in multiple taps
I think AdoptOpenJDK8 should be removed from the homebrew-cask-versions repo Somone(TM) should proba...
nativescript cli TNS doctor doesn't recognize Xcode (High Sierra)
HI @philipfeldmann Can yhou please run xcodebuild -version and paste the output? May be Xcode is ins...
axios BaseURL not being used
Please IGNORE THIS ISSUE Found the problem: I was setting baseUrl but it should be baseURL. ...
axios How to ignore SSL issues
You can configure axios to use a custom agent and set rejectUnauthorized to false for that agent: Ho...
ipython NameError: name 'sys' is not defined
Ok that was easy The Jedi release on 12/25 version 0.18.0 is breaking tab completion pip install --u...
axios How to send Raw http for Instagram Authentication?
Yes StringClient uses the application/x-www-form-urlencoded format by default while axios uses appli...
vuetify [Bug Report] Could not find a declaration file for module 'vuetify/lib'
@KaelWD Thank you for the link More specifically this comment helped me out to properly update my ts...