v11 Release

[joshblack]

To learn more about the v11 release, check out our announcement post on Medium. If you're interested in trying out this release early and giving us feedback, check out our Release Partner Program.

Timeline

Milestone	Date
Alpha release	April 15th, 2021
Beta 0 release	May 13th, 2021
Beta 1 release	July 29th, 2021
Beta 2 release	September 21st, 2021
Beta 3 release	December 10th, 2021
Release Candidate 0 release	January 27th, 2022
Release Candidate 1 release	March 3rd, 2022
Stable release	March 31st, 2022

[hcheung87]

Hey Josh - I am curious to know whether this functionality will be part of the next release scheduled for April (https://github.com/carbon-design-system/carbon/issues/4748)? I cannot find it in the release notes above but just wanted to confirm. If not, do you know when that will be included? Last activity was from July 15, 2020. Thanks!

[joshblack]

Hey @hcheung87! 👋 Currently, we're not tracking that issue for this upcoming release. It may be something we'll be able to tackle post v11 after we drop IE11 support but unfortunately it's not something on our radar for v11 at the moment.

[yabeow]

Hi @joshblack,

It seems that the team wouldn't be able to meet with this timeline. Do you have any updates on this plan?

[joshblack]

Hi @yabeow! 👋 The table above should be kept up-to-date. Sorry if that was not the case before!

[joshblack]

⚛️ React

🎨 Styles

🚢 Migration

🎨 Design Kit

• Update theme kits with new tokens
  • Color
  • Type

📝 Website

• Guidelines
  • Colors
  • Usage
    • Implement new token explorer
  • Code
    • Update code content to reflect API changes
  • Icons
  • Library
    • Code snippets have been updated
    • Size update
    • Name update
    • Bug with namespace icons
  • Usage
    • Update name for resource tiles (icons, icons-react)
  • Code
    • Update code content to reflect API changes
  • Pictograms
  • Usage
    • Add package links for pictograms
  • Code
    • Update code content to reflect API changes
  • Motion
  • Code
    • Update code content to reflect API changes
  • Spacing
  • Overview
    • Automate generation of spacing scale table
  • Code
    • Update code content to reflect API changes
  • Themes
  • Overview
    • Update code content to reflect API changes
  • Code
    • Update code content to reflect API changes
  • Type
  • Productive
    • Automate generation of token table
  • Expressive
    • Automate generation of token table
  • Code
    • Update code content to reflect API changes

Old notes

### Ecosystem changes - [ ] Carbon now uses Dart Sass - [ ] Teams should use the `includePaths` option to include `node_modules` - [ ] Our common prefix is now `cds` instead of `bx` - [ ] Remove `eyeglass` exports from Sass packages, it is no longer needed - Packages: - [ ] `@carbon/layout` - [ ] `@carbon/motion` - [ ] `@carbon/colors` - [ ] `@carbon/type` - [ ] `carbon-components` - [ ] `@carbon/grid` ### `@carbon/colors` - [ ] Convert module to Sass Modules - [ ] Write migration docs - [ ] Remove mixins, colors are now configured by Sass Modules - [ ] Remove `scss` folder, `index.scss` is now generated - [ ] Add missing swatches from the IDL palette ### `@carbon/grid` - [ ] Remove 12 column grid mode - [ ] Remove inline dependency setup from `@carbon/cli inline` - [ ] Move breakpoints from `@carbon/layout` into `@carbon/grid` - [ ] Move aspect ratio to styles package under utilities (?) ### `@carbon/icon-helpers` ### `@carbon/icons` - [ ] Move icon reset to styles reset - [ ] Remove scss from `@carbon/icons` ### `@carbon/icons-react` - [ ] Update components to use `size` prop instead of tying size to module name - [ ] https://github.com/carbon-design-system/carbon/issues/5170 ### `@carbon/icons-vue` ### `@carbon/import-once` - [ ] Deprecate package, it is no longer needed with Sass Modules support from Dart Sass - [ ] Remove package from monorepo ### `@carbon/layout` - [ ] Convert to Sass Module - [ ] Move conversion utilities into common base (utilities CSS package?) - [ ] Move breakpoints to grid package - [ ] Write migration docs - [ ] https://github.com/carbon-design-system/carbon/issues/5409 ### `@carbon/motion` - [ ] Convert to Sass Module - [ ] Write migration docs ### `@carbon/pictograms` ### `@carbon/pictograms-react` ### `@carbon/themes` - [ ] Convert to Sass Module - [ ] Write migration docs ### `@carbon/type` - [ ] Convert to Sass Module - [ ] Write migration docs ### `@carbon/upgrade` ### `carbon-components` - [ ] Remove placeholder text from components - [ ] Our common prefix is now `cds` instead of `bx` - [ ] Form spacing - [ ] https://github.com/carbon-design-system/carbon/issues/5022 - [ ] https://github.com/carbon-design-system/carbon/issues/2343 - [ ] https://github.com/carbon-design-system/carbon/issues/5367 - [ ] Write codemod to help with layout deprecation ([Reference](https://github.com/carbon-design-system/carbon/pull/8063)) ### `carbon-components-react` - [ ] https://github.com/carbon-design-system/carbon/issues/4572 - [ ] https://github.com/carbon-design-system/carbon/issues/5853 - [ ] https://github.com/carbon-design-system/carbon/issues/5972 - [ ] translateWithId consistently applied to all inputs https://github.com/carbon-design-system/carbon/issues/7141 - [ ] Remove the following components: - [ ] Icon - [ ] https://github.com/carbon-design-system/carbon/issues/8271 ### `carbon-icons` - [ ] Deprecate package, use `@carbon/icons` or `@carbon/icons-` instead - [ ] Archive repo

[joshblack]

WIP

⚛️ React

Changes to props

• Event handlers

Changes to components

• Notification
• Tooltip
• Modal
• Content Switcher

New components

• IconButton

Bundle

• Rollup

🎨 Styles

• [ ] Update styles to use Sass Modules
• [ ] Publish styles under a new @carbon scope: @carbon/styles
• [ ] Add usage and API docs to docs/sass.md
• [ ] Add migration docs for Public API

Packages

• [ ] @carbon/colors
  • [ ] Update to Sass Modules
  • [ ] Add usage and API docs to docs/sass.md
  • [ ] Update entrypoint to point to Sass Modules, switch over modules files
• [ ] @carbon/elements
  • [ ] Update to Sass Modules
  • [ ] Add usage and API docs to docs/sass.md
  • [ ] Update entrypoint to point to Sass Modules, switch over modules files
• [ ] @carbon/feature-flags
  • [ ] Update to Sass Modules
  • [ ] Add usage and API docs to docs/sass.md
  • [ ] Update entrypoint to point to Sass Modules, switch over modules files
• [ ] @carbon/grid
  • [ ] Update to Sass Modules
  • [ ] Add usage and API docs to docs/sass.md
  • [ ] Update entrypoint to point to Sass Modules, switch over modules files
• [ ] @carbon/import-once
  • [ ] Deprecate package, no longer needed with Sass Modules
• [ ] @carbon/layout
  • [ ] Update to Sass Modules
  • [ ] Add usage and API docs to docs/sass.md
  • [ ] Update entrypoint to point to Sass Modules, switch over modules files
• [ ] @carbon/motion
  • [ ] Update to Sass Modules
  • [ ] Add usage and API docs to docs/sass.md
  • [ ] Update entrypoint to point to Sass Modules, switch over modules files
• [ ] @carbon/icons
  • [ ] Remove Sass file and move to styles
• [ ] @carbon/type
  • [ ] Update to Sass Modules
  • [ ] Generate tokens from JavaScript
  • [ ] Add usage and API docs to docs/sass.md
  • [ ] Update entrypoint to point to Sass Modules, switch over modules files

🚢 Migration

• [ ] Moving from carbon-components to @carbon/styles
  • [ ] VanillaJS user
  • [ ] Framework implementation
• [ ] Moving from carbon-components-react to @carbon/react
  • [ ] Update style usage from carbon-components
  • [ ] Update imports for changes to carbon-components-react exports
  • [ ] Certain internals are no longer available
  • [ ] Certain components are no longer available
  • [ ] Update imports for icons
• [ ] Moving from @carbon/icons-react
• [ ] Updates to Design Tokens
• [ ] Updates to Grid

Packages

• [ ] Deprecate carbon-icons
• [ ] Move VanillaJS implementation into separate repo

📝 Website

📣 Communication

• [x] Publish alpha post
• [x] Publish beta 1 post
• [x] Publish beta 2 post
• [ ] Publish release candidate post
• [ ] Publish stable post

[alisonjoseph]

Design Kit

• [ ] Update theme kits with new tokens

Packages

• [ ] carbon-components
  • [ ] styles move to@carbon/styles
  • [x] Update to sass modules
  • [x] CSS Custom Properties
  • [x] Remove outer margin on components
  • [ ] Sass Module audits
  • [ ] Token audits
  • [x] New tokens
  • [x] Inline theming
  • [x] Contextual tokens
  • [x] Updating all of the package entrypoints
  • [x] Add in test harness for styles
  • [ ] IBM Plex integration
  • [ ] Grid integration
  • [ ] Package re-exports from @carbon/styles in v11
  • [ ] Migration guide for non-react users, which are styles-only, vanilla, or other framework
  • [ ] Move vanilla work into it's own GitHub repo
  • [ ] Migration docs
  • [ ] Usage docs
• [ ] carbon-components-react
  • [ ] Components moved to@carbon/react
  • [ ] Styles now re-exported from @carbon/react
  • [ ] Icons now re-exported from@carbon/react/icons
  • [ ] Updating storybook
  • [ ] Consolidate storybooks into one
  • [ ] update stories for components
  • [ ] migration docs
  • [ ] Breaking Changes
  • [ ] Prop changes
  • [ ] Refactor to functional components
  • [ ] New Hooks
  • [ ] useTheme
  • [ ] light prop
• [ ] @carbon/layout
  • [ ] Migration docs
  • [x] Update to Sass Modules
  • [ ] Add usage and API docs to docs/sass.md
  • [ ] new spacing scale
• [ ] @carbon/colors
  • [ ] Migration docs
  • [x] Update to flat file
  • [x] Remove old duo variables
  • [x] Update to Sass Modules
  • [ ] Add usage and API docs to docs/sass.md
• [ ] @carbon/themes
  • [x] Update to Sass Modules
  • [x] Add new Design Tokens
  • [ ] Migration docs
  • [ ] Usage docs
• [ ] @carbon/grid
  • [x] Update to Sass Modules
  • [ ] Add CSS Grid
  • [ ] Migration docs
  • [ ] Add usage and API docs to docs/sass.md
• [ ] @carbon/type
  • [ ] Migration docs
  • [x] Add new type tokens
  • [ ] Add usage and API docs to docs/sass.md
  • [x] Update to Sass Modules
  • [ ] IBM Plex workstream
• [ ] @carbon/layout
  • [ ] Migration docs
  • [x] Update to Sass Modules
  • [ ] Usage docs
  • [ ] new spacing scale
• [ ] @carbon/motion
  • [x] Update to Sass Modules
  • [ ] Migration docs
  • [ ] Usage docs
• [ ] carbon-icons
  • [ ] Deprecate after v11
• [ ] @carbon/icons-react
  • [x] size changes
  • [ ] migration docs
  • [ ] usage docs
  • [ ] Codemod
• [ ] @carbon/pictograms-react
  • [ ] Migration docs
  • [ ] usage docs
• [ ] @carbon/icons
  • [ ] Migration docs
  • [ ] Usage docs
• [ ] @carbon/pictograms
  • [ ] Migration docs
  • [ ] Usage docs

New Components

• [ ] Context Menu
• [ ] Icon Button
• [ ] Stack
• [ ] ToggleTip
• [ ] Popover
• [ ] unstable_*
• [ ] Notification
• [ ] Section, Heading
• [ ] Tabs
• [ ] View Switcher
• [ ] Layer
• [ ] Theme
• [ ] Dialog

Updated components

• [ ] Grid
• [ ] Tabs
• [ ] Tooltip
• [ ] Content Switcher
• [ ] Notification

Migration

• [ ] @carbon/upgradeCLI
• [ ] codemods
• [ ] Migration docs for each package and public export
• [ ] Sample App
• [ ] reconcile migration docs between website to repo and vice versa
• [ ] Moving from carbon-components to @carbon/styles
  • [ ] Moving from carbon-components-react to `@carbon/react
  • [ ] Moving from @carbon/icons-react
  • [ ] Updates to Design Tokens
  • [ ] Updates to Grid

Website

• [ ] Sync main brand website w/ v11
• [ ] Update style tab
• [ ] Doc page updates
• [ ] Iconography page fixes
• [ ] Token page
• [ ] Tutorial updates
• [ ] Releases page
• [ ] Roadmap page
• [ ] v11 release page
• [ ] Links to new kit?
• [ ] Remove vanilla from frameworks
• [ ] Remove vanilla references
• [ ] Update react framework page
• [ ] Developer resources
• [ ] Update guidelines pages that refer to code
• [ ] Update grid page
• [ ] Update elements packages to use new code conventions
• [ ] Update storybook links to new links
• [ ] component demos
• [ ] accessibility content
• [ ] Update component side nav
• [ ] Update storybook links
• [ ] update website (theme) to use v11

Gatsby Theme

• [ ] Update to v11
• [ ] update to new grid

Communication

• [ ] Workshops
• [ ] Blog posts
• [ ] Announcements