2021 Release Proposals #7538

joshblack · 2021-01-12T17:57:47Z

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.

Overview

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

The text was updated successfully, but these errors were encountered:

joshblack · 2021-01-12T17:58:34Z

Transition to Sass Modules

Status: Proposal

Towards the end of 2020, there was an announcement that LibSass, and the corresponding ecosystem, was officially deprecated. As a result, it seemed important that we take a look at leveraging Dart Sass as opposed to Node Sass in our upcoming release. In addition, we have several existing problems that we'd like to see addressed in our upcoming release:

Projects that include Carbon's Sass in their build tool (webpack, parcel) experience long cold-start and recompilation times, upwards of a minute
It is unclear what parts of the project are public or private, in other words what parts do we intend for developers to leverage and what parts do we intend to keep internal
It is confusing for developers to know how to properly configure Carbon using our global flags
Our default stylesheets for several components are large and/or contain high amounts of specificity that we'd like to lower

Discussion Link: #7539
Planning Issue: TODO

Packages impacted

carbon-components
carbon-components-angular
@carbon/vue

LInks & Resources

joshblack · 2021-01-12T17:58:41Z

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: http://github.com/ibm/plex 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

joshblack · 2021-01-12T20:25:11Z

Convert `warning` usage to `console.warn`

Status: Proposal

We currently use the warning module to emit warnings to developers when a code path they have encountered is deprecated. However, the warning module uses console.error under the hood, instead of console.warn, which has caused some issues that both our team and those in the React ecosystem has faced in terms of confusion.

Instead, it would be great if we could transition to console.warn usage instead of console.error, most likely through our own implementation of warning that we could then use in the codebase.

Packages impacted

carbon-components-react

Discussion Link: TODO
Planning Issue: TODO

joshblack · 2021-01-12T21:08:26Z

Icon Modules with `size` Prop

Status: Proposal

We currently have ~1,250 icons in our icon packages. Since our system supports 4 sizes, this ends up with ~5,000 modules (1250 icons * 4 sizes each). Add in a default entry point for each icon and its size, and that becomes ~6250 files that get shipped in a package.

Historically, we've had to invest some time to fix infrastructure issues that have come from trying to satisfy packages that can grow to this size. In addition, it is easy for these packages to deopt and cause consumers to ship megabytes more code than they intend to when using this module.

It would be great if we could explore going from our "component per icon/size" strategy to a "icon with size prop" approach. While this could increase the size of individual icons that support multiple sizes, this would decrease the overall file size of each package and would allow better code re-use for icons that are downsized from 32x32 (which are the majority)

Packages impacted

@carbon/icons
@carbon/icons-react
@carbon/icons-angular
@carbon/icons-vue

Discussion Link: TODO
Planning Issue: TODO

joshblack · 2021-01-21T17:18:11Z

Theming the UI Shell

Currently our UI Shell is offered in one variant with custom tokens and is unable to be themed by those using the UI Shell. In the past, we explored sharing variants of UI Shell here and for our next release we would like to find a way to ship the deliverable in that issue.

Packages impacted:

carbon-components

Discussion LInk: N/A
Planning Issue: #4839

joshblack · 2021-01-22T20:43:03Z

Component Accessibility Primitives

Our team and those who use Carbon often run into accessibility problems when using the following set of components:

Combobo
MultiSelect
Dropdown
Modal
Tooltip
Overflow Menu

As we've investigated these issues, it seems like certain use-cases are inaccessible when used with these components because of either improper implementation on the component side or teams using a component for a different purpose than which it was intended.

The most notable example of this is with tooltips and overflow menus. Often, teams will use these components for their visual style but not their underlying semantics (text-only tooltips, role="menu" respectively). As a result, we would like to revisit these modules and come up with a core set of accessible component primitives that can be used to implement the above components accessibly, along with being exposed to teams to build more accessible product features.

These component primitives include:

Popovers (the visual style of tooltips)
Disclosure (for interactive content in a "tooltip")
Dialog (for both modal and nonmodal dialogs)
Menu
Listbox
Combobox

Packages impacted:

carbon-components
carbon-components-react

Discussion Link: TODO
Planning Issue: TODO

joshblack · 2021-01-25T16:01:33Z

`useNotification` hook

We offer a variety of notification styles but unfortunately leave much of the animation and logical round display notifications to the end-user. We would like to codify this behavior/logic into a single hook, useNotification, that would encapsulate this behavior and make it easier for product teams to display/render notifications in their UI. This may look like:

function MyComponent() {
  const send = useNotification();

  function sendNotification() {
    send({ title: 'This is the notification title' });
  }

  return <button type="button" onClick={sendNotification}>Send test notification</button>;
}

Packages impacted

carbon-components-react

Discussion Link: TODO
Planning Issue: TODO

joshblack · 2021-01-25T22:18:21Z

Tooltip Refactor

Currently, our tooltps are a combination of well-intentioned (but inaccessible) ARIA techniques that we need to fix in either an upcoming minor release or in the upcoming major release.

In general, our tooltips will be text-only information that can be applied to buttons, links, and inputs. They will visually be rendered using our "Popover" component. As a result, our tooltips should be updated to include the following:

Correct tooltip semantics based on this article
More flexible tooltip definitions (wrap around a component to display a tooltip)
Alternatives for those that need to render interactive contents in what visually may look like a tooltip (see: Popover, Disclosure pattern)

Links & Resources:

Packages impacted:

carbon-components
carbon-components-react

Discussion Link: TODO
Planning Issue: TODO

joshblack · 2021-01-25T22:20:32Z

Notification Refactor

Currently, our Notification components support rendering interactive content inside of the notification itself. This content includes components like links or buttons. Unfortunately, Notifications in their current implementation are unable to correct relay this information to screen readers as all semantics are stripped in the content of a notification.

This update to Notification will include some research in order to figure out the correct way to provide accessible options for both text-only notifications and notifications with action items.

Links & Resources

https://www.youtube.com/watch?v=W5YAaLLBKhQ

Packages impacted:

carbon-components
carbon-components-react

Discussion Link: TODO
Planning Issue: TODO

joshblack · 2021-01-29T20:13:17Z

Focus style updates

Currently, we provide custom focus styles that will trigger when users interact with an interactive element. By default, browsers will choose not to display focus styles but because we specify custom focus styles they will appear. This lead to a question by teams across IBM: is it possible to mirror the browser behavior with custom focus styles?

There is a proposal for this behavior, using :focus-within, along with JavaScript-based solutions that could be integrated per-framework. This refactor work would be to evaluate if we can move forward with either solution to help address this visual behavior.

Links & Resources

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible

Packages impacted:

carbon-components
carbon-components-react

Discussion Link: TODO
Planning Issue: TODO

joshblack · 2021-02-01T22:00:51Z

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

joshblack · 2021-02-03T00:29:04Z

Package bundle performance

Our packages ship more JS and CSS than they need to. As part of our next release, it'd be great to refactor away some of the dead code that is not needed for a package. We could also use this as a chance to move away from dependencies that may be larger than we want to ship, or are unintentionally included even when not used.

In terms of CSS, it'd be great to get a handle our the size of each stylesheet. Reducing selector complexity and limiting our use of nested mixins to generate CSS will go a long way to reducing the overall footprint of Carbon's styles.

Packages impacted:

carbon-components
carbon-components-react

Planning Issue: TODO

aagonzales · 2021-02-08T17:46:46Z

Color tokens update

Updates to the component color tokens with two main objectives:

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.
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:

Proposal 1 token list Color sets
Proposal 2 token list Inline theming

Packages impacted:

carbon-components
carbon-elements

Discussion Link: #7743
Planning Issue: #8148

aagonzales · 2021-02-08T17:48:47Z

Inline theming

[stub]

Is this the solution we decide for the color token layering problem?
Would also solve UI Shell theming by being able to use the component tokens in the shell.

aagonzales · 2021-02-08T17:51:48Z

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

aagonzales · 2021-02-08T17:59:03Z

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

joshblack · 2021-02-09T19:45:42Z

Package renames and dependency updates

We offer up a mix of @carbon scoped packages and non-scoped packages for teams to use. Our core entrypoints, carbon-components and carbon-components-react are both un-scoped. In order to use carbon-components-react, you also will need to install carbon-components as a peer dependency.

It would be great if we could simplify this to just one package install across the ecosystem. In other words, if you want to use React you use @carbon/react. Angular, @carbon/angular. Vue, @carbon/vue.

Under the hood, these packages could internally depend on @carbon/styles and @forward the public files using Sass modules from @carbon/styles.

Packages impacted:

carbon-components
carbon-components-react

joshblack · 2021-02-09T19:46:41Z

Officially deprecate `carbon-icons`

carbon-icons was the defacto way to access iconography in Carbon v9 and before. Now, with our elements packages, this package is no longer required. In this release cycle, we should officially deprecate carbon-icons, archive the repo, and make sure it is removed as a dependency by the core packages

Packages impacted:

carbon-icons
carbon-components
carbon-components-react

joshblack · 2021-02-09T19:51:23Z

Not listed

This is an umbrella comment for items that we talked about but maybe don't have an official "proposal" attached with them.

Fixing form component spacing
Component enhancements
Finishing Tree View
Fluid components
Cool gray theme
Component tokens
Remove Downshift dependency in form elements
Deprecate v9 theme

joshblack · 2021-02-10T00:24:06Z

`className` convention

We currently vary with respect to what location a className prop is placed. With this update, it'd be nice to stay consistent with respect to where className is placed in a component, along with what to do if you need access to an inner node on which you want to place a custom class name.

Packages impacted:

carbon-components-react

joshblack · 2021-02-10T00:26:51Z

Refactoring test suite

Currently, our test suite is a mixture of enzyme, custom test setup, and React Testing Library. As part of our push towards v11, it'd be great to consolidate on React Testing Library along with some testing guidelines for what we thing should be covered by the Public API of a component.

Packages impacted:

carbon-componens-react

joshblack · 2021-02-10T00:27:45Z

Prop Name Consistency

We currently vary with respect to prop names and how we name props in functionality added to components. This update would be a great opportunity to finally consolidate these names into a standard set along with guidelines and how we name props in components.

Packages impacted:

carbon-components-react

joshblack changed the title ~~[Umbrella] Q2 2021 Release~~ Q2 2021 Proposals Feb 2, 2021

joshblack mentioned this issue Feb 2, 2021

v11 Release #7717

Closed

tw15egan mentioned this issue Feb 17, 2021

UI Shell Left Sidenav style: How to? #7829

Closed

joshblack mentioned this issue Mar 8, 2021

Sprint 5: Naked Gun Narwhal 🐳 #7979

Closed

87 tasks

laurenmrice mentioned this issue Mar 9, 2021

[naming convention] tag and toggle sizes #8045

Closed

joshblack mentioned this issue Mar 16, 2021

Update IBM Plex package to support flexible font imports #8106

Closed

joshblack changed the title ~~Q2 2021 Proposals~~ 2021 Release Proposals Mar 22, 2021

mattrosno mentioned this issue Mar 23, 2021

UI shell option for no padding on content #3010

Closed

tw15egan mentioned this issue Apr 7, 2021

NumberInput has monospace font as opposed to sans in TextInput #8321

Closed

2 tasks

joshblack mentioned this issue Jun 14, 2021

Sass Module Refactor #8899

Closed

48 tasks

joshblack closed this as completed Aug 2, 2021

jnm2377 mentioned this issue Nov 15, 2021

[pattern] status indicator grid issues carbon-design-system/carbon-website#2435

Closed

sstrubberg mentioned this issue Jun 24, 2024

Research and determine scope of v12 #16221

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

2021 Release Proposals #7538

2021 Release Proposals #7538

joshblack commented Jan 12, 2021 •

edited

Loading

joshblack commented Jan 12, 2021 •

edited by tay1orjones

Loading

joshblack commented Jan 12, 2021

joshblack commented Jan 12, 2021

joshblack commented Jan 12, 2021

joshblack commented Jan 21, 2021

joshblack commented Jan 22, 2021

joshblack commented Jan 25, 2021

joshblack commented Jan 25, 2021

joshblack commented Jan 25, 2021

joshblack commented Jan 29, 2021

joshblack commented Feb 1, 2021

joshblack commented Feb 3, 2021

aagonzales commented Feb 8, 2021 •

edited by tw15egan

Loading

aagonzales commented Feb 8, 2021

aagonzales commented Feb 8, 2021 •

edited

Loading

aagonzales commented Feb 8, 2021

joshblack commented Feb 9, 2021

joshblack commented Feb 9, 2021

joshblack commented Feb 9, 2021 •

edited by aagonzales

Loading

joshblack commented Feb 10, 2021

joshblack commented Feb 10, 2021

joshblack commented Feb 10, 2021

2021 Release Proposals #7538

2021 Release Proposals #7538

Comments

joshblack commented Jan 12, 2021 • edited Loading

joshblack commented Jan 12, 2021 • edited by tay1orjones Loading

Transition to Sass Modules

joshblack commented Jan 12, 2021

Bringing in IBM Plex

joshblack commented Jan 12, 2021

Convert warning usage to console.warn

joshblack commented Jan 12, 2021

Icon Modules with size Prop

joshblack commented Jan 21, 2021

Theming the UI Shell

joshblack commented Jan 22, 2021

Component Accessibility Primitives

joshblack commented Jan 25, 2021

useNotification hook

joshblack commented Jan 25, 2021

Tooltip Refactor

joshblack commented Jan 25, 2021

Notification Refactor

joshblack commented Jan 29, 2021

Focus style updates

joshblack commented Feb 1, 2021

CSS Grid Support

joshblack commented Feb 3, 2021

Package bundle performance

aagonzales commented Feb 8, 2021 • edited by tw15egan Loading

Color tokens update

aagonzales commented Feb 8, 2021

Inline theming

aagonzales commented Feb 8, 2021 • edited Loading

Combine spacing + layout token scales

aagonzales commented Feb 8, 2021

Rename the size props in components

joshblack commented Feb 9, 2021

Package renames and dependency updates

joshblack commented Feb 9, 2021

Officially deprecate carbon-icons

joshblack commented Feb 9, 2021 • edited by aagonzales Loading

Not listed

joshblack commented Feb 10, 2021

className convention

joshblack commented Feb 10, 2021

Refactoring test suite

joshblack commented Feb 10, 2021

Prop Name Consistency

joshblack commented Jan 12, 2021 •

edited

Loading

joshblack commented Jan 12, 2021 •

edited by tay1orjones

Loading

Convert `warning` usage to `console.warn`

Icon Modules with `size` Prop

`useNotification` hook

aagonzales commented Feb 8, 2021 •

edited by tw15egan

Loading

aagonzales commented Feb 8, 2021 •

edited

Loading

Rename the `size` props in components

Officially deprecate `carbon-icons`

joshblack commented Feb 9, 2021 •

edited by aagonzales

Loading

`className` convention