v11 Beta 1 Release

[joshblack]

Theme
The one with the styles

Target Date
July 22nd July 29th

Scope

This release will target delivering the following updates to the styles of the Carbon Design System:

• Changes to design tokens
• Updates to theming in Sass and React
• An update to our Sass architecture to use Sass Modules
• Shipping these updates in two new packages: @carbon/react and @carbon/styles

Checklist

• Finish tasks according to acceptance criteria
• Communications
  • Slack
  • Discord
  • Medium (blog post?)
  • Update website

What's coming next

• Looking back at grid
  • What makes grid hard to use right now?
  • Is there anything we can do to fix it?
  • Update grid implementation page and/or guidance, where appropriate
• React components
  • Component API changes
    • Consistency
    • Replaced by new features (light prop)
  • Accessibility improvements
    • Popover
    • Disclosure
    • Tooltip
    • And more
• Migration
  • Documentation
  • Tooling
  • Examples (tutorial, website)
• Packages
  • carbon-icons
  • Vanilla version of carbon-components moved to community maintained
• Website
  • Automating theme / colors page with new token info

[mattrosno]

@joshblack closing this issue in favor of tracking this release through a GitHub Milestone.

https://github.com/carbon-design-system/carbon/milestone/56

[mattrosno]

@joshblack reopening this per your recommendation. I added to the v11 beta milestone, and added "planning" in the issue title.

[joshblack]

Features

Ecosystem Changes

• A team must be able to install @carbon/react@beta
• A team must be able to install @carbon/styles@beta
• A team must be able to use a React component from @carbon/react
• A team must be able to use styles from a scss entrypoint, either from @carbon/styles and @carbon/react
• A team must be able to view the storybook documentation for @carbon/react
• A team must be able to view migration docs for carbon-components-react to @carbon/react
• A team must be able to view migration docs for carbon-components to @carbon/styles

Sass Modules

• A team must be able to @use a module from @carbon/styles or @carbon/react
  • A team must be able to bring in all styles
  • A team must be able to bring in specific component styles
  • A team must be able to configure the theme
  • A team must be able to use the design tokens from the package

Note: make sure it's obvious where the tests for this should live

Design Tokens

• A team must be able to use a token from @carbon/styles or @carbon/react
• A team should be able to use their existing tokens without their Sass build breaking
• A team should be able to determine what tokens they should switch to
• A team should be able to use contextual tokens
• A designer or developer must be able to reference a token on the website

Note: when do we add in codemods for token switching?

Theming

• A team must be able to specify their theme with a Theme component
• A team must be able to specify a layer with a Layer component
• A team should be able to know what theme a component is rendered in with a useTheme hook
• A team should be able to zone/pin a theme to a specific section of a page with the Theme component
• A developer should be able to find code usage docs from the color guidelines page on the site

CSS Grid

• A team must have the CSS Grid, 16 column variant turned on by default
• A team must be able to use the Grid and Column components from React to build grids with CSS Grid
• A team should be able to know how to switch from Flexbox grid to CSS Grid
• A developer should be able to find code usage docs from the grid guidelines page on the site
  • TODO: implementation page, look for any misalignments
  • Prefer minimal that is 100% correct than maximal with some mistakes

TODO: when do codemods come into play?

E&A

Carbon Tutorial

• A team must be able to see how to apply beta changes to a sample project (tutorial)
  • A team must be able to see how to use the new packages
  • A team must be able to see how to use the new tokens

Migration page on the website

• A team must be able to find all migration information about the beta release on a page on our website
  • A team must know how to install the new packages
  • A team must be able to find migration information for impacted packages