From bd73bc27f7ff32a3dfdfc6cbb8796938392b8589 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Mon, 24 Jan 2022 14:14:50 -0600 Subject: [PATCH 1/2] docs(migration): add v11 guide (#10477) * docs(migration): add v11 guide * chore(docs): formatting * docs(migration): update v11 migration guide * chore(docs): formatting * docs(migration): add notification migration content * docs(migration): add carbon colors docs * docs: check-in more docs updates * docs(migration): check-in changes * docs(migration): add content for icons Co-authored-by: Taylor Jones Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- .../migration/11.x-carbon-components-react.md | 237 --- docs/migration/11.x-carbon-components.md | 641 ------- docs/migration/11.x-carbon-icons-react.md | 152 -- docs/migration/11.x-color.md | 132 -- docs/migration/11.x-grid.md | 178 -- docs/migration/11.x-layout.md | 38 - docs/migration/11.x-motion.md | 17 - docs/migration/11.x-pictograms.md | 123 -- docs/migration/11.x-themes.md | 21 - docs/migration/11.x-type.md | 24 - docs/migration/v11.md | 1657 +++++++++++++++++ docs/migration/v11.x.md | 94 - packages/colors/docs/sass.md | 289 +++ packages/motion/docs/sass.md | 38 + 14 files changed, 1984 insertions(+), 1657 deletions(-) delete mode 100644 docs/migration/11.x-carbon-components-react.md delete mode 100644 docs/migration/11.x-carbon-components.md delete mode 100644 docs/migration/11.x-carbon-icons-react.md delete mode 100644 docs/migration/11.x-color.md delete mode 100644 docs/migration/11.x-grid.md delete mode 100644 docs/migration/11.x-layout.md delete mode 100644 docs/migration/11.x-motion.md delete mode 100644 docs/migration/11.x-pictograms.md delete mode 100644 docs/migration/11.x-themes.md delete mode 100644 docs/migration/11.x-type.md create mode 100644 docs/migration/v11.md delete mode 100644 docs/migration/v11.x.md create mode 100644 packages/colors/docs/sass.md create mode 100644 packages/motion/docs/sass.md diff --git a/docs/migration/11.x-carbon-components-react.md b/docs/migration/11.x-carbon-components-react.md deleted file mode 100644 index b5c11b9cc3e6..000000000000 --- a/docs/migration/11.x-carbon-components-react.md +++ /dev/null @@ -1,237 +0,0 @@ -# `carbon-components-react` - -**Note: everything in this file is a work-in-progress and will be changed.** - - - - -## Table of Contents - -- [Overview](#overview) -- [Components](#components) - - [Grid](#grid) - - [Notifications](#notifications) - - [Tabs](#tabs) - - [Tooltips](#tooltips) -- [FAQ](#faq) - - - - -## Overview - -The `carbon-components-react` package has been replaced by the `@carbon/react` -package in v11. While you can still use `carbon-components-react` along with -v11, it has been deprecated and will stop receiving updates when v12 is -released. To learn more about this change, checkout WIP LINK. - -In addition, this release contains updates to React components in the package. -These updates include: - -- Changing components from class components to functional components -- Creating consistent prop names and types across components -- Updates to make components more accessible - -For a full overview of changes to components, checkout our -[components](#components) section below. - -## Components - -| Component | Changes | -| :-------------------------- | :-------------------------------------------------------------- | -| `Accordion` | | -| `AccordionItem` | | -| `AccordionSkeleton` | | -| `ActionableNotification` | View changes [here](#notifications) | -| `AspectRatio` | | -| `Breadcrumb` | | -| `BreadcrumbItem` | | -| `BreadcrumbSkeleton` | | -| `Button` | | -| `ButtonSet` | | -| `ButtonSkeleton` | | -| `Checkbox` | | -| `CheckboxSkeleton` | | -| `ClickableTile` | Updated from a class to functional component | -| `CodeSnippet` | | -| `CodeSnippetSkeleton` | | -| `Column` | View changes [here](#grid) | -| `ComboBox` | | -| `ComposedModal` | Updated from a class to functional component | -| `Content` | | -| `ContentSwitcher` | | -| `ControlledPasswordInput` | | -| `Copy` | | -| `CopyButton` | | -| `DangerButton` | | -| `DataTable` | | -| `DataTableSkeleton` | | -| `DatePicker` | | -| `DatePickerInput` | | -| `DatePickerSkeleton` | | -| `Dropdown` | | -| `DropdownSkeleton` | | -| `ErrorBoundary` | | -| `ErrorBoundaryContext` | | -| `ExpandableSearch` | | -| `ExpandableTile` | Updated from a class to functional component | -| `FileUploader` | | -| `FileUploaderButton` | | -| `FileUploaderDropContainer` | | -| `FileUploaderItem` | | -| `FileUploaderSkeleton` | | -| `Filename` | | -| `FilterableMultiSelect` | Updated from a class to functional component | -| `FluidForm` | | -| `Form` | | -| `FormGroup` | | -| `FormItem` | | -| `FormLabel` | | -| `Grid` | View changes [here](#grid) | -| `Header` | | -| `HeaderContainer` | | -| `HeaderGlobalAction` | | -| `HeaderGlobalBar` | | -| `HeaderMenu` | | -| `HeaderMenuButton` | | -| `HeaderMenuItem` | | -| `HeaderName` | | -| `HeaderNavigation` | Updated from a class to functional component. No other changes. | -| `HeaderPanel` | | -| `HeaderSideNavItems` | | -| `Icon` | Removed | -| `IconSkeleton` | | -| `InlineLoading` | | -| `InlineNotification` | View changes [here](#notifications) | -| `Link` | | -| `ListItem` | | -| `Loading` | | -| `Modal` | Updated from a class to functional component | -| `ModalBody` | | -| `ModalFooter` | Updated from a class to functional component | -| `ModalHeader` | Updated from a class to functional component | -| `ModalWrapper` | Removed | -| `MultiSelect` | | -| `NotificationActionButton` | View changes [here](#notifications) | -| `NotificationButton` | View changes [here](#notifications) | -| `NotificationTextDetails` | View changes [here](#notifications) | -| `NumberInput` | Updated from a class to functional component | -| `NumberInputSkeleton` | | -| `OrderedList` | | -| `OverflowMenu` | | -| `OverflowMenuItem` | | -| `Pagination` | Updated from a class to functional component | -| `PaginationNav` | | -| `PaginationSkeleton` | | -| `PasswordInput` | | -| `PrimaryButton` | | -| `ProgressIndicator` | | -| `ProgressIndicatorSkeleton` | | -| `ProgressStep` | | -| `RadioButton` | Updated from a class to functional component | -| `RadioButtonGroup` | Updated from a class to functional component | -| `RadioButtonSkeleton` | | -| `RadioTile` | | -| `Row` | View changes [here](#grid) | -| `Search` | Updated from a class to functional component | -| `SearchFilterButton` | | -| `SearchLayoutButton` | Removed | -| `SearchSkeleton` | | -| `SecondaryButton` | | -| `Select` | | -| `SelectItem` | | -| `SelectItemGroup` | | -| `SelectSkeleton` | | -| `SelectableTile` | | -| `SideNav` | | -| `SideNavDetails` | | -| `SideNavDivider` | | -| `SideNavFooter` | | -| `SideNavHeader` | | -| `SideNavIcon` | | -| `SideNavItem` | | -| `SideNavItems` | | -| `SideNavLink` | | -| `SideNavLinkText` | | -| `SideNavMenu` | Updated from a class to functional component. No other changes. | -| `SideNavMenuItem` | | -| `SideNavSwitcher` | | -| `SkeletonPlaceholder` | | -| `SkeletonText` | | -| `SkipToContent` | | -| `Slider` | | -| `SliderSkeleton` | | -| `StructuredListBody` | | -| `StructuredListCell` | | -| `StructuredListHead` | | -| `StructuredListInput` | | -| `StructuredListRow` | | -| `StructuredListSkeleton` | | -| `StructuredListWrapper` | | -| `Switch` | | -| `Switcher` | | -| `SwitcherDivider` | | -| `SwitcherItem` | | -| `Table` | | -| `TableActionList` | | -| `TableBatchAction` | | -| `TableBatchActions` | | -| `TableBody` | | -| `TableCell` | | -| `TableContainer` | | -| `TableExpandHeader` | | -| `TableExpandRow` | | -| `TableExpandedRow` | | -| `TableHead` | | -| `TableHeader` | | -| `TableRow` | | -| `TableSelectAll` | | -| `TableSelectRow` | | -| `TableToolbar` | | -| `TableToolbarAction` | | -| `TableToolbarContent` | | -| `TableToolbarMenu` | | -| `TableToolbarSearch` | | -| `Tabs` | View changes [here](#tabs) | -| `Tab` | View changes [here](#tabs) | -| `TabContent` | View changes [here](#tabs) | -| `TabsSkeleton` | View changes [here](#tabs) | -| `Tag` | | -| `TagSkeleton` | | -| `TextArea` | | -| `TextAreaSkeleton` | | -| `TextInput` | | -| `TextInputSkeleton` | | -| `Tile` | Updated from a class to functional component | -| `TileAboveTheFoldContent` | Updated from a class to functional component | -| `TileBelowTheFoldContent` | Updated from a class to functional component | -| `TileGroup` | | -| `TimePicker` | Updated from a class to functional component | -| `TimePickerSelect` | Updated from a class to functional component | -| `ToastNotification` | View changes [here](#notifications) | -| `Toggle` | Updated from a class to functional component | -| `ToggleSkeleton` | Removed | -| `ToggleSmall` | Removed | -| `ToggleSmallSkeleton` | Removed | -| `Toolbar` | Removed | -| `ToolbarDivider` | Removed | -| `ToolbarItem` | Removed | -| `ToolbarOption` | Removed | -| `ToolbarSearch` | Removed | -| `ToolbarTitle` | Removed | -| `Tooltip` | View changes [here](#tooltips) | -| `TooltipDefinition` | View changes [here](#tooltips) | -| `TooltipIcon` | View changes [here](#tooltips) | -| `UnorderedList` | | - -### Grid - -### Notifications - -### Tabs - -### Tooltips - -## Changes to props - -## FAQ diff --git a/docs/migration/11.x-carbon-components.md b/docs/migration/11.x-carbon-components.md deleted file mode 100644 index d98244dfd367..000000000000 --- a/docs/migration/11.x-carbon-components.md +++ /dev/null @@ -1,641 +0,0 @@ -# `carbon-components` - -**Note: everything in this file is a work-in-progress and will be changed.** - - - - -## Table of Contents - -- [Overview](#overview) -- [`scss/globals/scss`](#scssglobalsscss) -- [`scss/components/`](#scsscomponents) -- [Configuration](#configuration) - - - - -## Overview - -The `carbon-components` package has moved to the `@carbon/styles` package -starting in v11. You can still access the latest v11 styles in -`carbon-components`, but it will be a re-export from `@carbon/styles`. This -package will be officially archived in v12. - -Along with this change, the styles of Carbon have been completely updated to use -[Sass Modules](https://css-tricks.com/introducing-sass-modules/). This change -requires that teams use the [Dart Sass](https://npmjs.com/package/sass) package. -Support for `node-sass` has been dropped starting in v11. - -This decision was made after seeing the -[deprecation notice](https://sass-lang.com/blog/libsass-is-deprecated) of -LibSass in late 2020. - -With this change to Sass Modules, you'll find that many of the ways that you are -using Carbon today have been updated and streamlined. In general, most paths -have changed from the long form `scss/globals/scss/path/to/file` to simply -`scss/path/to/file`. - -For example, to access the `theme` entrypoint you would have needed to import -`scss/globals/scss/theme`. Now, this entrypoint lives at `scss/theme`. - -Alongside the updates to filepaths, you will find that helper mixins, functions, -and variables have been updated to no longer have a `carbon--` prefix. With Sass -Modules, the module name now serves as an appropriate prefix and provides -correct scoping. - -For an overview of the changes corresponding to a file that you're currently -importing, checkout the [files](#files) table below. To learn more about how to -use `@carbon/styles` and the new Sass Module system, we recommend checking out -the project [`README.md`](../../packages/styles/README.md). - -There are two major areas of changes in the package, namely: - -- [`scss/globals/scss`](#scssglobalsscss) -- [`scss/components/`](#scsscomponents) - -## `scss/globals/scss` - -The majority of the files currently available under `/scss/globals/scss` are now -available under `/scss` directory, or through our new utilities folder in -`/scss/utilties`. - -Below, you'll find an overview of files that are a part of our Public API and -where they have moved to in v11. Each row also contains a link to a section -below that goes over any API changes for the file. - -| File | v11 | -| ------------------------------------------------------------------------------- | ----------------------------------------- | -| [`scss/globals/scss/styles.scss`](#scssglobalsscssstylesscss) | Moved to `index.scss` in `@carbon/styles` | -| [`scss/globals/grid/_grid.scss`](#scssglobalsgrid_gridscss) | Moved to `scss/_grid.scss` | -| [`scss/globals/scss/_colors.scss`](#scssglobalsscss_colorsscss) | Moved to `scss/_colors.scss` | -| [`scss/globals/scss/_css--body.scss`](#scssglobalsscss_css--bodyscss) | TODO | -| [`scss/globals/scss/_css--font-face.scss`](#scssglobalsscss_css--font-facescss) | Moved to `scss/_font-face.scss` | -| [`scss/globals/scss/_css--helpers.scss`](#scssglobalsscss_css--helpersscss) | Moved to `scss/utilities/` | -| [`scss/globals/scss/_css--reset.scss`](#scssglobalsscss_css--resetscss) | Moved to `scss/_reset.scss` | -| [`scss/globals/scss/_helper-classes.scss`](#scssglobalsscss_helper-classesscss) | Moved to `scss/utilities/` | -| [`scss/globals/scss/_helper-mixins.scss`](#scssglobalsscss_helper-mixinsscss) | Moved to `scss/utilities/` | -| `scss/globals/scss/_import-once.scss` | Removed | -| `scss/globals/scss/_layer.scss` | Removed | -| [`scss/globals/scss/_layout.scss`](#scssglobalsscss_layoutscss) | Moved to `scss/_layout.scss` TODO | -| [`scss/globals/scss/_mixins.scss`](#scssglobalsscss_mixinsscss) | Removed | -| [`scss/globals/scss/_motion.scss`](#scssglobalsscss_motionscss) | Moved to `scss/_motion.scss` | -| [`scss/globals/scss/_spacing.scss`](#scssglobalsscss_spacingscss) | Moved to `scss/_spacing.scss` | -| [`scss/globals/scss/_theme-tokens.scss`](#scssglobalsscss_theme-tokensscss) | Moved to `scss/_themes.scss` | -| [`scss/globals/scss/_theme.scss`](#scssglobalsscss_themescss) | Moved to `scss/_theme.scss` | -| [`scss/globals/scss/_typography.scss`](#scssglobalsscss_typographyscss) | Moved to `scss/_type.scss` | -| [`scss/globals/scss/_vars.scss`](#scssglobalsscss_varsscss) | Removed | -| `scss/globals/scss/vendor/` | Removed | - -### `scss/globals/scss/styles.scss` - -| v10 | v11 | -| :----------------------------------------------------------- | :----------------------- | -| `@import 'carbon-components/scss/globals/scss/styles.scss';` | `@use '@carbon/styles';` | - -The `styles.scss` entrypoint was provided as a way to bring in all of the styles -for the Carbon Design System. In v11, this is available through -`@carbon/styles/index.scss` which can be directly imported with `@use` by -writing out: - -```scss -@use '@carbon/styles'; -``` - -If you are overriding different settings of the project, like `$prefix`, you -will need to pass those into the `with` block in the import: - -```scss -@use '@carbon/styles' with ( - $prefix: 'cds', -); -``` - -For a full overview of changes to how you configure Carbon, checkout our -[configuration](#configuration) section below. - -### `scss/globals/scss/_colors.scss` - -| v10 | v11 | -| :------------------------------------------------------ | :----------------------------------- | -| `@import 'carbon-components/scss/globals/scss/colors';` | `@use '@carbon/styles/scss/colors';` | - -The `scss/globals/scss/_colors.scss` entrypoint provided a re-export of the -`@carbon/colors` package. This entrypoint now lives at `scss/_colors.scss` in -`@carbon/styles` and can be included by writing: - -```scss -@use '@carbon/styles/scss/colors'; - -.example { - color: colors.$blue-50; -} -``` - -The following is a list of API changes in v11 for `@carbon/colors` that are -present in `@carbon/styles/scss/colors`: - -| v10 | v11 | -| :---------------------- | :----------------------------- | -| `$ibm-*` variables | Removed | -| `$carbon-*` variables | Removed | -| `$ibm-color-map` | Removed | -| `$carbon--colors` | Removed, replaced by `$colors` | -| `@mixin ibm--colors` | Removed | -| `@mixin carbon--colors` | Removed | - -### `scss/globals/scss/_css--body.scss` - -TODO - -### `scss/globals/scss/_css--font-face.scss` - -Beginning in V11, the `@ibm/plex` package will be included as a dependency of -`@carbon/styles`. Because of this, we will no longer be serving the files via -Google Fonts. You will get the fonts by default by importing from the main -entrypoint (`@use '@carbon/styles'`), or by referencing the font face file -directly (`@use '@carbon/styles/scss/font-face'`). If you are already hosting -the font files, and do not want the font files to be emitted, you can set the -`$css--font-face` variable to `false`. - -### `scss/globals/scss/_css--helpers.scss` - -The `scss/globals/scss/_css--helpers` entrypoint provides class-based helpers -when the `$css--helpers` flag is set to true, specifically: - -- `bx--assistive-text` and `bx--visually-hidden` -- `bx--body` - -In v11, the assistive text and visually hidden classes are now available under: -`scss/utilities/_visually-hidden`. - -TODO `bx--body` - -### `scss/globals/scss/_css--reset.scss` - -| v10 | v11 | -| :---------------------------------------------------------- | :---------------------------------- | -| `@import 'carbon-components/scss/globals/scss/css--reset';` | `@use '@carbon/styles/scss/reset';` | - -The `scss/globals/scss/css--reset` entrypoint is used for including a CSS reset -in a project using Carbon. It is configurable using the `$css--reset` global -flag. - -In v11, this entrypoint is now available at `scss/reset` and is still -configurable with the `$css--reset` configuration option. By default, -`$css--reset` is set to `true`. - -```scss -@use '@carbon/styles/scss/config' with ( - $css--reset: true, -); -@use '`@carbon/styles/scss/reset'; -``` - -### `scss/globals/scss/_helper-classes.scss` - -The `scss/globals/scss/_helper-classes.scss` entrypoint was used to emit CSS -classes for text truncation, specifically: - -- `bx--text-truncate--end` -- `bx--text-truncate--front` - -TODO - -### `scss/globals/scss/_helper-mixins.scss` - -The `scss/globals/scss/_helper-mixins.scss` entrypoint exported a number of -helper mixins that could be used when building components. In v11, these helpers -have been moved to utilities located under `scss/utilities/`. Below is a table -that details to which files a particular helper has been moved. - -| v10 | v11 | -| :-------------------------- | :---------------------------------------- | -| `@mixin text-overflow` | `scss/utilities/_text-overflow.scss` | -| `@mixin placeholder-colors` | `scss/utilities/_placeholder-colors.scss` | -| `@mixin box-shadow` | `scss/utilities/_box-shadow.scss` | -| `@mixin focus-outline` | `scss/utilities/_focus-outline.scss` | -| `@mixin rotate` | `scss/utilities/_rotate.scss` | -| `@mixin hidden` | TODO | -| `@mixin button-reset` | `scss/utilities/_button-reset.scss` | -| `@mixin skeleton` | `scss/utilities/_skeleton.scss` | -| `@keyframes skeleton` | `scss/utilities/_keyframes.scss` TODO | -| `@mixin high-contrast-mode` | `scss/utilities/_high-contrast-mode.scss` | - -### `scss/globals/scss/_layout.scss` - -TODO - -### `scss/globals/scss/_mixins.scss` - -The `scss/globals/scss/_mixins.scss` entrypoint re-exported mixins from the -following files: - -- `scss/globals/scss/helper-mixins` -- `scss/components/button/mixins`; -- `scss/components/loading/mixins`; -- `scss/components/notification/mixins`; -- `scss/components/tag/mixins`; -- `scss/components/structured-list/mixins`; - -In v11, this entrypoint has been removed. If you are using a mixin from this -entrypoint, find the appropriate mixin from the migration guidance for one of -the files above. - -TODO: anything else we can offer for guidance here? - -### `scss/globals/scss/_motion.scss` - -| v10 | v11 | -| :------------------------------------------------------ | :----------------------------------- | -| `@import 'carbon-components/scss/globals/scss/motion';` | `@use '@carbon/styles/scss/motion';` | - -The `scss/globals/scss/_motion.scss` entrypoint re-exported exports from the -`@carbon/motion` package along with providing a number of helpers and variables -for duration and easing curves. - -| v10 | v11 | -| :------------------------- | :---------------------- | -| `$carbon--ease-in` | Removed | -| `$carbon--ease-out` | Removed | -| `$carbon--standard-easing` | Removed | -| `$transition--base` | Removed | -| `$transition--expansion` | Removed | -| `$duration--fast-01` | `$duration-fast-01` | -| `$duration--fast-02` | `$duartion-fast-02` | -| `$duration--moderate-01` | `$duration-moderate-01` | -| `$duration--moderate-02` | `$duration-moderate-01` | -| `$duration--slow-01` | `$duration-slow-01` | -| `$duration--slow-02` | `$duration-slow-02` | -| `@function motion` | No changes | -| `@mixin motion` | No changes | - -TODO what to use instead of removed items? - -For a full overview of what is available in this entrypoint, check out the -[API documentation](../../packages/motion/docs/sass.md#todo) for the -`@carbon/motion` package. - -### `scss/globals/scss/_spacing.scss` - -| v10 | v11 | -| :------------------------------------------------------- | :------------------------------------ | -| `@import 'carbon-components/scss/globals/scss/spacing';` | `@use '@carbon/styles/scss/spacing';` | - -The `scss/globals/scss/_spacing.scss` entrypoint provided a number of variables -for spacing and include re-exports from the `@carbon/layout` package for -`mini-unit` support as well as the spacing scale. - -In v11, this entrypoint has been moved to `scss/_spacing.scss` and a number of -exports have been changed. - -| v10 | v11 | -| :----------------------------- | :----------------------------------- | -| `$spacing-01` | No changes | -| `$spacing-02` | No changes | -| `$spacing-03` | No changes | -| `$spacing-04` | No changes | -| `$spacing-05` | No changes | -| `$spacing-06` | No changes | -| `$spacing-07` | No changes | -| `$spacing-08` | No changes | -| `$spacing-09` | No changes | -| `$spacing-10` | No changes | -| `$spacing-11` | No changes | -| `$spacing-12` | No changes | -| `$spacing-13` | No changes | -| `$carbon--spacing` | Renamed to `$spacing` | -| `$carbon--spacing-01` | Removed, replaced with `$spacing-01` | -| `$carbon--spacing-02` | Removed, replaced with `$spacing-02` | -| `$carbon--spacing-03` | Removed, replaced with `$spacing-03` | -| `$carbon--spacing-04` | Removed, replaced with `$spacing-04` | -| `$carbon--spacing-05` | Removed, replaced with `$spacing-05` | -| `$carbon--spacing-06` | Removed, replaced with `$spacing-06` | -| `$carbon--spacing-07` | Removed, replaced with `$spacing-07` | -| `$carbon--spacing-08` | Removed, replaced with `$spacing-08` | -| `$carbon--spacing-09` | Removed, replaced with `$spacing-09` | -| `$carbon--spacing-10` | Removed, replaced with `$spacing-10` | -| `$carbon--spacing-11` | Removed, replaced with `$spacing-11` | -| `$carbon--spacing-12` | Removed, replaced with `$spacing-12` | -| `$carbon--spacing-13` | Removed, replaced with `$spacing-13` | -| `$spacing-baseline` | Removed | -| `$spacing-4xs` | Removed | -| `$spacing-3xs` | Removed | -| `$spacing-2xs` | Removed | -| `$spacing-xs` | Removed | -| `$spacing-sm` | Removed | -| `$spacing-md` | Removed | -| `$spacing-lg` | Removed | -| `$spacing-xl` | Removed | -| `$spacing-2xl` | Removed | -| `$spacing-3xl` | Removed | -| `$carbon--layout-01` | Removed, replaced by `$spacing-05` | -| `$carbon--layout-02` | Removed, replaced by `$spacing-06` | -| `$carbon--layout-03` | Removed, replaced by `$spacing-07` | -| `$carbon--layout-04` | Removed, replaced by `$spacing-09` | -| `$carbon--layout-05` | Removed, replaced by `$spacing-10` | -| `$carbon--layout-06` | Removed, replaced by `$spacing-12` | -| `$carbon--layout-07` | Removed, replaced by `$spacing-13` | -| `$layout-01` | Removed, replaced by `$spacing-05` | -| `$layout-02` | Removed, replaced by `$spacing-06` | -| `$layout-03` | Removed, replaced by `$spacing-07` | -| `$layout-04` | Removed, replaced by `$spacing-09` | -| `$layout-05` | Removed, replaced by `$spacing-10` | -| `$layout-06` | Removed, replaced by `$spacing-12` | -| `$layout-07` | Removed, replaced by `$spacing-13` | -| `$layout-2xs` | Removed | -| `$layout-xs` | Removed | -| `$layout-sm` | Removed | -| `$layout-md` | Removed | -| `$layout-lg` | Removed | -| `$layout-xl` | Removed | -| `$layout-2xl` | Removed | -| `$carbon--layout` | Removed | -| `$carbon--mini-unit-size` | Removed | -| `@function carbon--mini-units` | Removed | - -For a full overview of what is available in this entrypoint, check out the -[API documentation](../../packages/layout/docs/sass.md#todo) for the -`@carbon/layout` package. - -### `scss/globals/scss/_theme-tokens.scss` - -The `scss/globals/scss/_theme-tokens.scss` entrypoint provides several component -tokens along with re-exports from `@carbon/themes` package. - -| v10 | v11 | -| :--------------------------------------- | :-------------------------------------------- | -| Design tokens | Available in `scss/_theme.scss` | -| `$disabled` | TODO | -| `$disabled-background-color` | TODO | -| `$focus` | Available directly in the theme | -| `$inverse-focus-ui` | Available directly in the theme | -| `$accordion-flex-direction` | Moved to `scss/components/accordion` | -| `$accordion-justify-content` | Moved to `scss/components/accordion` | -| `$accordion-arrow-margin` | Moved to `scss/components/accordion` | -| `$accordion-title-margin` | Moved to `scss/components/accordion` | -| `$accordion-content-padding` | Moved to `scss/components/accordion` | -| `$button-font-weight` | Moved to `scss/components/button` | -| `$button-font-size` | Moved to `scss/components/button` | -| `$button-border-radius` | Moved to `scss/components/button` | -| `$button-height` | Moved to `scss/components/button` | -| `$button-padding` | Moved to `scss/components/button` | -| `$button-padding-field` | Moved to `scss/components/button` | -| `$button-padding-sm` | Moved to `scss/components/button` | -| `$button-padding-lg` | Moved to `scss/components/button` | -| `$button-padding-ghost` | Moved to `scss/components/button` | -| `$button-padding-ghost-field` | Moved to `scss/components/button` | -| `$button-padding-ghost-sm` | Moved to `scss/components/button` | -| `$button-border-width` | Moved to `scss/components/button` | -| `$button-outline-width` | Moved to `scss/components/button` | -| `$button-outline-offset` | Moved to `scss/components/button` | -| `$button-outline` | Moved to `scss/components/button` | -| `$copy-active` | TODO | -| `$copy-btn-feedback` | TODO | -| `$checkbox-border-width` | Moved to `scss/components/checkbox` | -| `$content-switcher-border-radius` | Moved to `scss/components/content-switcher` | -| `$content-switcher-option-border` | Moved to `scss/components/content-switcher` | -| `$content-switcher-divider` | Moved to `scss/components/content-switcher` | -| `$data-table-heading-transform` | Moved to `scss/components/data-table` | -| `$data-table-heading-border-bottom` | Moved to `scss/components/data-table` | -| `$data-table-row-height` | Moved to `scss/components/data-table` | -| `$data-table-zebra-color` | Moved to `scss/components/data-table` | -| `$data-table-column-hover` | Moved to `scss/components/data-table` | -| `$date-picker-in-range-background-color` | Moved to `scss/components/data-table` | -| `$input-border` | TODO | -| `$input-label-weight` | TODO | -| `$link-visited` | Moved to `scss/components/link` | -| `$link-inverse-color` | Moved to `scss/components/link` | -| `$modal-border-top` | Moved to `scss/components/modal` | -| `$modal-footer-background-color` | Moved to `scss/components/modal` | -| `$notification-info-background-color` | Moved to `scss/components/notification` | -| `$notification-error-background-color` | Moved to `scss/components/notification` | -| `$notification-warning-background-color` | Moved to `scss/components/notification` | -| `$notification-success-background-color` | Moved to `scss/components/notification` | -| `$progress-indicator-bar-width` | Moved to `scss/components/progress-indicator` | -| `$progress-indicator-stroke-width` | Moved to `scss/components/progress-indicator` | -| `$progress-indicator-line-offset` | Moved to `scss/components/progress-indicator` | -| `$snippet-background-color` | Moved to `scss/components/code-snippet` | -| `$snippet-border-color` | Moved to `scss/components/code-snippet` | -| `$radio-border-width` | Moved to `scss/components/radio-button` | -| `$structured-list-padding` | Moved to `scss/components/structured-list` | -| `$structured-list-text-transform` | Moved to `scss/components/structured-list` | -| `$tab-underline-color` | Moved to `scss/components/tabs` | -| `$tab-underline-color-hover` | Moved to `scss/components/tabs` | -| `$tab-text-disabled` | Moved to `scss/components/tabs` | -| `$tab-underline-disabled` | Moved to `scss/components/tabs` | -| `$tooltip-background-color` | Moved to `scss/components/tooltip` | -| `$skeleton` | Removed, available as a token in the theme | - -TODO make sure component tokens live in component files - -### `scss/globals/scss/_theme.scss` - -| v10 | v11 | -| :----------------------------------------------------- | :---------------------------------- | -| `@import 'carbon-components/scss/globals/scss/theme';` | `@use '@carbon/styles/scss/theme';` | - -The `scss/globals/scss/_theme.scss` entrypoint re-exported tokens from the -`_theme-tokens.scss` entrypoint. In v11, you can import this file directly and -reference the current theme, tokens defined in the theme, as well as dynamically -retrieve the current value of a token. - -```scss -@use '@carbon/styles/scss/theme'; - -.example { - background: theme.$background; - color: theme.$text-primary; -} -``` - -For a full overview of what is available in this entrypoint, check out our -[API documentation](../../packages/styles/docs/sass.md#todo). - -### `scss/globals/scss/_typography.scss` - -| v10 | v11 | -| :---------------------------------------------------------- | :--------------------------------- | -| `@import 'carbon-components/scss/globals/scss/typography';` | `@use '@carbon/styles/scss/type';` | - -The `scss/globals/scss/_typography.scss` entrypoint provides access to a number -of variables and helpers for working with dimensions. It also re-exports several -exports from `@carbon/type`. - -In v11, this entrypoint has been moved to `scss/_type.scss` and several of its -exports have changed or removed. - -| v10 | v11 | -| :------------------------------ | :-------------------------------------- | -| `$base-font-size` | TODO | -| `@function rem` | Moved to `scss/utilities/_convert.scss` | -| `@function em` | Moved to `scss/utilities/_convert.scss` | -| `@mixin type-style` | No changes | -| `$carbon--font-families` | Renamed to `$font-families` | -| `@function carbon--font-family` | Renamed to `@function font-family` | -| `@mixin carbon--font-family` | Renamed to `@mixin font-family` | -| `$carbon--font-weights` | Renamed to `$font-weights` | -| `@function carbon--font-weight` | Renamed to `@function font-weight` | -| `@mixin carbon--font-weight` | Renamed to `@mixin font-weight` | -| `$caption-01` | No changes | -| `$caption-02` | No changes | -| `$label-01` | No changes | -| `$label-02` | No changes | -| `$helper-text-01` | No changes | -| `$helper-text-02` | No changes | -| `$body-short-01` | No changes | -| `$body-long-01` | No changes | -| `$body-short-02` | No changes | -| `$body-long-02` | No changes | -| `$code-01` | No changes | -| `$code-02` | No changes | -| `$heading-01` | No changes | -| `$productive-heading-01` | No changes | -| `$heading-02` | No changes | -| `$productive-heading-02` | No changes | -| `$productive-heading-03` | No changes | -| `$productive-heading-04` | No changes | -| `$productive-heading-05` | No changes | -| `$productive-heading-06` | No changes | -| `$productive-heading-07` | No changes | -| `$expressive-heading-01` | No changes | -| `$expressive-heading-02` | No changes | -| `$expressive-heading-03` | No changes | -| `$expressive-heading-04` | No changes | -| `$expressive-heading-05` | No changes | -| `$expressive-heading-06` | No changes | -| `$expressive-paragraph-01` | No changes | -| `$quotation-01` | No changes | -| `$quotation-02` | No changes | -| `$display-01` | No changes | -| `$display-02` | No changes | -| `$display-03` | No changes | -| `$display-04` | No changes | -| `$tokens` | No changes | - -For a full overview of what is available in this entrypoint, check out the -[API documentation](../../packages/type/docs/sass.md#todo) for `@carbon/type`. - -### `scss/globals/scss/_vars.scss` - -The `scss/globals/scss/_vars.scss` entrypoint was used to access most of the -public variables from the Carbon Design System. It also specified the `$prefix` -used for CSS.examples in the codebase. - -In v11, this file has been removed. To get access to variables that you -previously were using `_vars.scss` for, you will need to find the correct direct -import. For changing the `$prefix` used in the project, you can configure this -through the `scss/_config.scss` entrypoint. - -For more information about configuring the project, check out the -[configuration](#configuration) section below. - -### `scss/globals/grid/_grid.scss` - -| v10 | v11 | -| :---------------------------------------------------- | :--------------------------------- | -| `@import 'carbon-components/scss/globals/grid/grid';` | `@use '@carbon/styles/scss/grid';` | - -The `scss/globals/grid/_grid.scss` entrypoint provides access to the flexbox -based grid from the `@carbon/grid` package. - -In v11, this entrypoint has been moved to `scss/_grid.scss` and continues to -re-export from the `@carbon/grid` package. In addition, the default grid has -been changed from the 12 column variant to the 16 column grid. - -_Note: if you're using `$feature-flags` to set `grid-columns-16` you can remove -this flag in v11_ - -Finally, our default grid implementation no longer uses flexbox. Instead, it -uses CSS Grid. For more information about these changes, checkout [todo](#todo). - -| v10 | v11 | -| :-------------------------- | :-- | -| `@mixin grid` | | -| `@mixin carbon--grid` | | -| `$carbon--12-column-grid` | | -| `$carbon--grid-breakpoints` | | - -## `scss/components` - -The components located under `scss/components` are available under -`scss/components//_.scss`. For example, to import an -accordion: - -```scss -@import 'carbon-components/scss/components/accordion/accordion'; -``` - -In v11, these files now live at `scss/components//_index.scss` and -can be shortened to `scss/components/` since Dart Sass resolves -`_index.scss` files automatically. for example: - -```scss -@use '@carbon/styles/scss/components/accordion'; -``` - -## Configuration - -In v10, you could configure various aspects of Carbon using global flags that -were set before including Carbon. For example, you could change the prefix used -or disable the CSS reset that the project used by doing the following: - -```scss -$prefix: 'cds'; -$css--reset: false; - -@import 'path/to/carbon'; -``` - -Similarly, you could enable or disable `$feature-flags` for the project with a -similar approach. - -This approach no longer works with the project's switch to Sass Modules. -Instead, you will need to configure Carbon through the `scss/_config.scss` -entrypoint using `with`. This file is re-exported in various entrypoints, so you -can configure Carbon on the main entrypoint: - -```scss -@use '@carbon/styles' with ( - $prefix: 'cds', -); -``` - -Or you can configure the `scss/_config.scss` directly: - -```scss -@use '@carbon/styles/config' with ( - $prefix: 'cds', -); -``` - -_Note: Sass modules can only ever be configured once. Bringing in this module -and configuring it should be one of the first things you do in your project._ - -The following is a table of configuration options and their status in v11. Ones -that are available you can configure through the `scss/_config.scss` entrypoint, -ones that are removed are no longer available. - -| v10 | v11 | -| :---------------- | :----------- | -| `$css--font-face` | | -| `$css--helpers` | Removed | -| `$css--body` | | -| `$css--use-layer` | Removed TODO | -| `$css--reset` | | -| `$prefix` | | -| `$feature-flags` | | - -## Internal - -The following files are considered internal files and have been omitted from -this migration document. If you are currently using these files, please reach -out for support on -[GitHub Discussions](https://github.com/carbon-design-system/carbon/discussions) -and we can help you migrate from the following list of files: - -- `scss/globals/scss/_functions.scss` -- `scss/globals/scss/_feature-flags.scss` -- `scss/globals/scss/_deprecate.scss` -- `scss/globals/scss/_keyframes.scss` -- `scss/globals/scss/_tooltip.scss` diff --git a/docs/migration/11.x-carbon-icons-react.md b/docs/migration/11.x-carbon-icons-react.md deleted file mode 100644 index 4763ba3287e8..000000000000 --- a/docs/migration/11.x-carbon-icons-react.md +++ /dev/null @@ -1,152 +0,0 @@ -# `@carbon/icons-react` - -**Note: everything in this file is a work-in-progress and will be changed.** - - - - - -## Table of Contents - -- [`@carbon/icons-react`](#carbonicons-react) - - [Overview](#overview) - - [Migration](#migration) - - [Manual migration](#manual-migration) - - [Component definition is missing display name](#component-definition-is-missing-display-name) - - - - -## Overview - -The `@carbon/icons-react` package has been updated to minimize the number of -exports from the package to help reduce build and compile times. - -This update includes a change to the API of the icon components that come from -this package. Previously, we would export icons that included the size of the -asset. This update allows you to bring the icon directly and specify the size -using the `size` prop. - -**Before** - -```jsx -import { Add32, Add24, Add20, Add16 } from '@carbon/icons-react'; - -function MyComponent() { - return ( - <> - - - - - - ); -} -``` - -**After** - -```jsx -import { Add } from '@carbon/icons-react'; - -function MyComponent() { - return ( - <> - - - - - - ); -} -``` - -_Note: by default, the `size` prop will point to the 16x16px version of the SVG -asset_ - -### Migration - -Most use-cases of the icons from the `@carbon/icons-react` package will be -covered by an automated codemod. To run this codemod, follow the instructions -here: . - -However, in certain situations, we will be unable to infer what the correct -update should be for a certain usage of the icon component. We have written the -codemod to work for most situations, but you will see console warnings for files -that will require you to manually review them to make sure the transforms were -applied correctly. - -The most common manual update that teams will need to make is if a `prop` where -the icon is passed to places a `ref` on the icon. For example, - -```jsx -function MyComponent({ renderIcon: Icon }) { - const ref = useRef(null); - return ; -} - -// Before - - -// After the codemod - } /> -``` - -In this situation, you will need to update your code to use `React.forwardRef`: - -```jsx - ( - - ))} -/>; - -// Or, alternatively: -const Search16 = React.forwardRef((props, ref) => { - return ; -}); - -; -``` - -### Manual migration - -In addition to the automated codemods above, there are several patterns in your -codebase that you will need to update manually: - -- If you use the name `ForwardRef(IconName16)` in a test you will need to - manually change this. Prefer to use the component directly if using enzyme -- If you use snapshot tests, the structure will change and include a `size` - prop. Make sure that the `size` prop value matches what your icon name used to - be. For example, `` should become `` - -#### Component definition is missing display name - -If you use `eslint` you may run into the error message above. This comes from -the `react/display-rule` rule. It comes as a result of the transform changing -the following code: - -```jsx -// Input -const iconTypes = { - add: Add32, -}; - -// Output -const iconTypes = { - add: (props) => , -}; -``` - -The transform will create an inline arrow function expression and as a result it -does not have a `displayName` like if you created this function using a variable -or function declaration. - -To address this issue, you can manually create the component: - -```jsx -const Add32 = (props) => ; -const iconTypes = { - add: Add32, -}; -``` diff --git a/docs/migration/11.x-color.md b/docs/migration/11.x-color.md deleted file mode 100644 index 7e09089099b4..000000000000 --- a/docs/migration/11.x-color.md +++ /dev/null @@ -1,132 +0,0 @@ -# Color - -> **Note:** The Carbon v11 release is currently in beta release. Be on the -> lookout for the public preview release available in the coming months. - -## Color tokens - -**Status key:** - -- **No change:** Token name has no change between versions. -- **Updated:** From v10 to V11 the number suffix has been replaced with an - adjective that reflects it's usage. This is just a name change, the role - remains the same between v10 and v11. -- **Split:** V10 token has been split into multiple new v11 tokens for more - specific usage. -- **New:** A net new color token to the system in v11. It has no v10 - counterpart. -- **Depreciated:** v10 token was removed in v11. - -| **V10 token name** | **V11 token name** | **V11 contextual token** | **Status** | -| ------------------ | ------------------------- | ------------------------ | ---------- | -| visited-link | link-visited | -- | Updated | -| ui-background | background | -- | Updated | -| ui-05 | layer-selected-inverse | -- | Split | -| ui-05 | border-inverse | -- | Split | -| ui-04 | border-strong-01 | border-strong | Split | -| ui-04 | toggle-off | -- | Split | -| ui-03 | layer-accent-01 | layer-accent | Split | -| ui-03 | border-subtle-01 | border-sublte | Split | -| ui-02 | layer-02 | layer | Updated | -| ui-01 | layer-01 | layer | Updated | -| text-error | text-error | -- | Updated | -| text-05 | text-helper | -- | Updated | -| text-04 | text-on-color | -- | Updated | -| text-03 | text-placeholder | -- | Updated | -| text-02 | text-secondary | -- | Updated | -| text-01 | text-primary | -- | Updated | -| support-04 | support-info | -- | Updated | -| support-03 | support-warning | -- | Updated | -| support-02 | support-success | -- | Updated | -| support-01 | support-error | -- | Updated | -| skeleton-02 | skeleton-element | -- | Updated | -| skeleton-01 | skeleton-background | -- | Updated | -| selected-ui | background-selected | -- | Split | -| selected-ui | layer-selected-01 | layer-selected | Split | -| selected-light-ui | layer-selected-02 | layer-selected | Updated | -| overlay-01 | overlay | -- | Updated | -| link-02 | link-secondary | -- | Updated | -| link-01 | link-primary | -- | Updated | -| inverse-support-04 | support-info-inverse | -- | Updated | -| inverse-support-03 | support-warning-inverse | -- | Updated | -| inverse-support-02 | support-success-inverse | -- | Updated | -| inverse-support-01 | support-error-inverse | -- | Updated | -| inverse-link | link-inverse | -- | Updated | -| inverse-hover-ui | background-inverse-hover | -- | Updated | -| inverse-focus-ui | focus-inverse | -- | Updated | -| inverse-02 | background-inverse | -- | Updated | -| inverse-01 | text-inverse | -- | Split | -| inverse-01 | icon-inverse | -- | Split | -| inverse-01 | focus-inset | -- | Split | -| interactive-04 | interactive | -- | Updated | -| interactive-04 | border-interactive | -- | Updated | -| interactive-03 | button-tertiary | -- | Updated | -| interactive-02 | button-secondary | -- | Updated | -| interactive-01 | background-brand | -- | Updated | -| interactive-01 | button-primary | -- | Updated | -| icon-03 | icon-on-color | -- | Updated | -| icon-02 | icon-secondary | -- | Updated | -| icon-01 | icon-primary | -- | Updated | -| hover-ui | background-hover | -- | Updated | -| hover-ui | layer-hover-01 | layer-hover | Split | -| hover-ui | field-hover-01 | field-hover | Split | -| hover-ui | field-hover-02 | field-hover | Split | -| hover-tertiary | button-tertiary-hover | -- | Updated | -| hover-selected-ui | background-selected-hover | -- | Split | -| hover-selected-ui | layer-selected-hover-01 | layer-selected-hover | Split | -| hover-selected-ui | layer-accent-hover-01 | layer-accent-hover | Split | -| hover-secondary | button-secondary-hover | -- | Updated | -| hover-row | background-hover | -- | Split | -| hover-row | layer-hover-01 | -- | Split | -| hover-primary-text | link-primary-hover | -- | Updated | -| hover-primary | button-primary-hover | -- | Updated | -| hover-light-ui | layer-hover-02 | layer-hover | Updated | -| hover-danger | button-danger-hover | -- | Updated | -| highlight | highlight | -- | No change | -| focus | focus | -- | No change | -| field-02 | field-02 | field | No change | -| field-01 | field-01 | field | No change | -| disabled-03 | layer-selected-disabled | -- | Split | -| disabled-03 | text-on-color-disabled | -- | Split | -| disabled-03 | icon-on-color-disabled | -- | Split | -| disabled-02 | text-disabled | -- | Split | -| disabled-02 | icon-disabled | -- | Split | -| disabled-02 | button-disabled | -- | Split | -| disabled-01 | layer-disabled-01 | -- | Split | -| disabled-01 | field-disabled-01 | -- | Split | -| disabled-01 | border-disabled-01 | -- | Split | -| disabled-01 | field-disabled-02 | -- | Split | -| disabled-01 | border-disabled-03 | -- | Split | -| decorative-01 | border-subtle-02 | border-subtle | Updated | -| danger-02 | button-danger-secondary | -- | Updated | -| danger / danger-01 | button-danger-primary | -- | Updated | -| button-separator | button-separator | -- | No change | -| active-ui | background-active | -- | Split | -| active-ui | layer-active-01 | layer-active | Split | -| active-ui | layer-accent-active-01 | layer-accent-active | Split | -| active-ui | border-subtle-selected-01 | border-subtle-selected | Split | -| active-tertiary | button-tertiary-active | -- | Updated | -| active-secondary | button-secondary-active | -- | Updated | -| active-primary | button-primary-active | -- | Updated | -| active-light-ui | layer-active-02 | layer-active | Updated | -| active-danger | button-danger-active | -- | Updated | -| -- | border-subtle-00 | border-subtle | New | -| -- | layer-selected-hover-02 | layer-selected-hover | New | -| -- | layer-accent-02 | layer-accent | New | -| -- | layer-accent-hover-02 | layer-accent-hover | New | -| -- | layer-accent-active-02 | layer-accent-active | New | -| -- | border-strong-02 | border-strong | New | -| -- | border-subtle-selected-02 | border-subtle-selected | New | -| -- | layer-03 | layer | New | -| -- | layer-hover-03 | layer-hover | New | -| -- | layer-active-03 | layer-active | New | -| -- | layer-selected-03 | layer-selected | New | -| -- | layer-selected-hover-03 | layer-selected-hover | New | -| -- | layer-accent-03 | layer-accent | New | -| -- | layer-accent-hover-03 | layer-accent-hover | New | -| -- | layer-accent-active-03 | layer-accent-active | New | -| -- | field-03 | field | New | -| -- | field-hover-03 | field-hover | New | -| -- | border-strong-03 | border-strong | New | -| -- | border-subtle-03 | border-subtle | New | -| -- | border-subtle-selected-03 | border-subtle-selected | New | diff --git a/docs/migration/11.x-grid.md b/docs/migration/11.x-grid.md deleted file mode 100644 index 1d47319288df..000000000000 --- a/docs/migration/11.x-grid.md +++ /dev/null @@ -1,178 +0,0 @@ -# Grid - - - - -## Table of Contents - -- [Overview](#overview) -- [Changes](#changes) - - [Configuration](#configuration) - - [Grid](#grid) - - [Row](#row) - - [Column](#column) - - [Breakpoints](#breakpoints) - - [Offset](#offset) - - - -**Note: everything in this file is a work-in-progress and will be changed.** - -## Overview - -The `@carbon/grid` package has been modified to use a CSS Grid based -implementation, rather than the previous flexbox implementation. - -The grid continues to be integrated into `carbon-components` as well as the new -`@carbon/styles` package. There is no need to install additional packages if you -are using `carbon-components` or `@carbon/styles` already. - -## Changes - -| Filename | v10 | v11 | -| ------------------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | -| `scss/12.scss` | | Removed | -| `scss/_mixins.scss` | | | -| `scss/_mixins.scss` | `$carbon--aspect-ratios` | Removed, use styles package instead | -| `scss/_mixins.scss` | `@mixin carbon--grid` | Removed, used mixin from `_css-grid.scss` instead | -| `scss/_prefix.scss` | | Removed, use `scss/_config.scss` instead | -| `scss/grid.scss` | | Renamed to `_css-grid.scss` | -| | | `mixin css-grid` | -| | | `mixin subgrid` | -| | `.#{$prefix}--grid` | `.#{$prefix}--css-grid` | -| | `.#{$prefix}--grid--narrow` | `.#{$prefix}--css-grid--narrow` | -| | `.#{$prefix}--grid--condensed` | `.#{$prefix}--css-grid--condensed` | -| | `.#{$prefix}--row` | Removed, columns should be direct children of grid containers | -| | `.#{$prefix}--col` | `.#{$prefix}--col-span-1` (1-16 available) | -| | `.#{$prefix}--col-#{$breakpoint}-#{$columns}` (e.g. `bx--col-sm-2`) | `.#{$prefix}--#{$breakpoint}:col-span#{$columns}` (e.g. `bx--sm:col-span-2`) | -| | `.#{$prefix}--no-gutter` | `.#{$prefix}--css-grid--no-gutter` | -| | `.#{$prefix}--grid--full-width` | `.#{$prefix}--css-grid--full-width` | -| | `.#{$prefix}--offset-#{$breakpoint}-#{$columns}` (e.g. `bx--offset-sm-3`) | `.#{$prefix}--#{$breakpoint}:col-(start/end)-#{$columns}` (e.g. `bx--sm:col-start-4 bx--sm:col-end-5` and `bx--sm:col-start-4 bx--sm:col-end-5`) | -| | | `.#{$prefix}--hang` | -| | | `.#{$prefix}--gutter` | -| | `.#{$prefix}--hang--left` | `.#{$prefix}--gutter-start` | -| | `.#{$prefix}--hang--right` | `.#{$prefix}--gutter-end` | -| | `.#{$prefix}--hang--start` | `.#{$prefix}--gutter-start` | -| | `.#{$prefix}--hang--end` | `.#{$prefix}--gutter-end` | -| | | `.#{$prefix}--justify-items-start` | -| | | `.#{$prefix}--justify-items-end` | -| | | `.#{$prefix}--justify-items-center` | -| | | `.#{$prefix}--align-items-start` | -| | | `.#{$prefix}--align-items-end` | -| | | `.#{$prefix}--align-items-center` | -| `scss/index.scss` | | | - -### Configuration - -Configuring Sass Modules is now done through a `_config.scss` file (for things -like `$prefix`) - -### Grid - -The base grid definition now includes 16 columns by default. The new -`.#{$prefix}--css-grid` class should be used. - -```diff --
-+
-
-
-
-
-
-
-
-``` - -### Row - -Rows are no longer needed and have been removed. Columns can be placed as direct -children of a grid container. - -```diff -
--
-
-
-
-
--
-
-``` - -### Column - -The auto-column functionality has changed. In v10 columns would automatically -expand to fill the available space inside the grid container. A grid with only -two columns, each would span 50% width or 6 columns. - -In v11, each column by default spans one single column as defined by the parent -grid's parameters. - -The default track sizing functions of the grid columns are defined by the -inherited `grid-template-columns` css custom property. This declares that there -should be `--cds-grid-columns` number of columns, and each column should by -default span a `minmax()` of `0` columns minimum, or a maximum of -`--cds-grid-column-size` (`1fr`). - -The values of these custom properties can be changed to modify the default -behavior of columns. - -If you relied on this auto-column behavior, you will now instead need to -explicitly define your column sizing via the `.#{$prefix}--col-span-*` classes. -When migrating, remember the base grid definition now includes 16 columns by -default instead of 12. - -```diff -
--
--
--
--
-+
-+
-+
-+
-
-``` - -### Breakpoints - -The ability to specify different column widths at different breakpoints is still -available. The class names have changed slightly. - -```diff -
--
-+
-

Small: Span 2 of 4

-

Medium: Span 4 of 8

-

Large: Span 6 of 16

-
-
-``` - -> Note: Breakpoints are now defined in `@carbon/grid` - -### Offset - -Offset columns are now explicitly defined via a starting and ending column, -instead of the column size and offset amount. These classes map directly to the -`grid-column-start` and `grid-column-end` properties and their values in regard -to the grid column definition/template. - -```diff -
--
-+
- --
-+
- --
-+
- --
-+
-
-``` diff --git a/docs/migration/11.x-layout.md b/docs/migration/11.x-layout.md deleted file mode 100644 index 63598cfa031a..000000000000 --- a/docs/migration/11.x-layout.md +++ /dev/null @@ -1,38 +0,0 @@ -# Layout - -**Note: everything in this file is a work-in-progress and will be changed.** - -## Changes - -| v10 | v11 | -| --------------------------------- | ------------------------- | -| `$carbon--base-font-size` | `$base-font-size` | -| `carbon--rem` | `rem` | -| `carbon--em` | `em` | -| `$carbon--grid-gutter` | `$grid-gutter` | -| `$carbon--grid-gutter--condensed` | `$grid-gutter--condensed` | -| `$carbon--grid-breakpoints` | `$grid-breakpoints` | -| `carbon--breakpoint-next` | `breakpoint-next` | -| `carbon--breakpoint-prev` | `breakpoint-prev` | -| `carbon--is-smallest-breakpoint` | `is-smallest-breakpoint` | -| `carbon--largest-breakpoint-name` | `largest-breakpoint-name` | -| `carbon--breakpoint-infix` | `breakpoint-infix` | -| `carbon--breakpoint-up` | `breakpoint-up` | -| `carbon--breakpoint-down` | `breakpoint-down` | -| `carbon--breakpoint-between` | `breakpoint-between` | -| `carbon--largest-breakpoint` | `largest-breakpoint` | -| `carbon--breakpoint` | `breakpoint` | -| `$carbon--layout-01` | `$spacing-05` | -| `$carbon--layout-02` | `$spacing-06` | -| `$carbon--layout-03` | `$spacing-07` | -| `$carbon--layout-04` | `$spacing-09` | -| `$carbon--layout-05` | `$spacing-10` | -| `$carbon--layout-06` | `$spacing-12` | -| `$carbon--layout-07` | `$spacing-13` | -| `$layout-01` | `$spacing-05` | -| `$layout-02` | `$spacing-06` | -| `$layout-03` | `$spacing-07` | -| `$layout-04` | `$spacing-09` | -| `$layout-05` | `$spacing-10` | -| `$layout-06` | `$spacing-12` | -| `$layout-07` | `$spacing-13` | diff --git a/docs/migration/11.x-motion.md b/docs/migration/11.x-motion.md deleted file mode 100644 index e63cc535afdb..000000000000 --- a/docs/migration/11.x-motion.md +++ /dev/null @@ -1,17 +0,0 @@ -# Motion - -**Note: everything in this file is a work-in-progress and will be changed.** - -## Changes - -| v10 | v11 | -| -------------------------- | ----------------------- | -| `$carbon--easings` | `$easings` | -| `@function carbon--motion` | `@function motion` | -| `@mixin carbon--motion` | `@mixin motion` | -| | `$duration-fast-01` | -| | `$duration-fast-02` | -| | `$duration-moderate-01` | -| | `$duration-moderate-02` | -| | `$duration-slow-01` | -| | `$duration-slow-02` | diff --git a/docs/migration/11.x-pictograms.md b/docs/migration/11.x-pictograms.md deleted file mode 100644 index 883bd1c33012..000000000000 --- a/docs/migration/11.x-pictograms.md +++ /dev/null @@ -1,123 +0,0 @@ -# Pictograms - - - - -## Table of Contents - -- [Changes](#changes) - - - - -## Changes: - -| Pictograms | v11 | -| -------------------------------------------- | ------------------------------------------------ | -| advanced--fraud--protection | new | -| advanced--threats | new | -| alchemy--language--alphabet--a--expanded | removed | -| anonymous--users | new | -| application--security | new | -| assets | new | -| barcelona | new | -| berlin--brandenburg | removed | -| berlin--brandenburg--gate | replaced by `berlin--brandenburg-gate` | -| boston--zakim-bridge | new | -| bug--virus--malware | new | -| build--leadership--and--culture | new | -| cairo--giza-plateau | new | -| chicago | new | -| collaboration | new | -| continuous--security | new | -| data--security | new | -| design--and--development--01 | replaced by `design-and-development--01` | -| design--and--development--02 | replaced by `design-and-development--02` | -| detect--and--stop--advancing--threats | new | -| digital--id | new | -| digital--trust | new | -| do--not | replaced by `do-not` | -| download | replaced by `download--01` | -| download--alt | replaced by `download--02` | -| dubai--palm--islands | replaced by `dubai--palm-islands` | -| endpoint--security | new | -| enterprise--design--thinking | replaced by `enterprise--design--thinking--01` | -| enterprise--design--thinking--alt | replaced by `enterprise--design--thinking--02` | -| europe-africa | replaced by `europe--africa` | -| export | replaced by `export--01` | -| export--alt | replaced by `export--02` | -| farm | removed | -| feedback | replaced by `feedback--01` | -| get--ahead--of--risk--and--compliance  | new | -| govern--users--and--identities | new | -| hamburg--philharmone | new | -| heart | replaced by `love` | -| heat--map | replaced by `heat--map--01` | -| heat-map--02 | replaced by `heat--map--02` | -| high--risk--users | new | -| ibm--watson | replaced by `watson--logo` | -| identity--trust--assessment | new | -| language | replaced by `language--01` | -| language--01 | replaced by `language--02` | -| language--02 | replaced by `language--03` | -| language--03 | replaced by `language--04` | -| language--04 | replaced by `language--05` | -| language--translation--alphabet--a--expanded | removed | -| lock | replaced by `lock--01` | -| lock--alt | replaced by `lock--02` | -| locked--network | replaced by `locked--network--01` | -| locked--network--alt | replaced by `locked--network--02` | -| london--big--ben | replaced by `london--big-ben` | -| london--expanded--base | removed | -| master--threat--hunting | new | -| math-curve | replaced by `match--curve` | -| mexico-city--angel--of--independence | replaced by `mexico-city--angel-of-independence` | -| mexico-city--museo--soumaya | replaced by `mexico-city--museo-soumaya` | -| milan--duomo--di--milano | replaced by `milan--duomo-di-milano` | -| mortar--and--pestle | replaced by `mortar-and-pestle` | -| network--protection | new | -| nyc--manhattan | replaced by `nyc--manhattan--01` | -| nyc--manhattan--alt | replaced by `nyc--manhattan--02` | -| paris--arc-de-triomphe | new | -| paris--louvre | new | -| paris--notre-dame | new | -| paris--pompidou-center | new | -| population-diagram | replaced by `population--diagram` | -| prague--charles-bridge-tower | new | -| private--network | replaced by `private--network--01` | -| private--network--01 | updated to `private--network--02` | -| private--network--alt | replaced by `private--network--03` | -| private--network--alt--01 | replaced by `private--network--04` | -| protect--critical--assets | new | -| raleigh-nc | new | -| relationship-diagram | replaced by `relationship--diagram` | -| sao-paulo--expanded--base | removed | -| scatter-matrix | replaced by `scatter--matrix` | -| secure--hybrid--cloud | new | -| security--as--a--service | new | -| security--hygiene | new | -| security--intelligence | new | -| speech--alphabet--a--expanded | removed | -| stockholm | new | -| strategy--and--risk | new | -| tel--aviv | replaced by `tel-aviv` | -| threat--management | new | -| tokyo--cherry--blossom | replaced by `tokyo--cherry-blossom` | -| tool--overload | new | -| transform | replaced by `transform--01` | -| transform--02 | new | -| trusted--user | new | -| unauthorized--user--access | new | -| under--utilized--security | new | -| unify--endpoint--management | new | -| unlock | replaced by `unlock--01` | -| unlock--alt | replaced by `unlock--02` | -| upload | replaced by `upload--01` | -| upload--alt | replaced by `upload--02` | -| video | replaced by `video--01` | -| video--alt | replaced by `video--02` | -| warning | replaced by `warning--01` | -| warning--alt | replaced by `warning--02` | -| watson--avatar | replaced by `watson--logo` | -| word-cloud | replaced by `word--cloud` | -| world--community--grid | new | diff --git a/docs/migration/11.x-themes.md b/docs/migration/11.x-themes.md deleted file mode 100644 index cf93d72d7eda..000000000000 --- a/docs/migration/11.x-themes.md +++ /dev/null @@ -1,21 +0,0 @@ -# Motion - -**Note: everything in this file is a work-in-progress and will be changed.** - -## Changes - -| Filename | v10 | v11 | -| ------------------ | ----------------------- | ------------------------------------------ | -| `_tokens.scss` | | Deprecated, use Custom Properties directly | -| `_theme-maps.scss` | | Removed, use `_themes.scss` instead | -| `_theme-maps.scss` | `$carbon--theme--white` | `$white` | -| | `$carbon--theme--g10` | `$g10` | -| | `$carbon--theme--g90` | `$g90` | -| | `$carbon--theme--g100` | `$g100` | -| `_mixins.scss` | | Removed, use `_theme.scss` instead | -| `_mixins.scss` | `carbon--theme` | `theme` | - -- Theme maps are now available in `scss/_themes.scss` and no longer require a - namespace -- Theme mixin has been simplified, it now emits the given theme as Custom - Properties for the parent selector diff --git a/docs/migration/11.x-type.md b/docs/migration/11.x-type.md deleted file mode 100644 index f489bdeb7dec..000000000000 --- a/docs/migration/11.x-type.md +++ /dev/null @@ -1,24 +0,0 @@ -# @carbon/type - -**Note: everything in this file is a work-in-progress and will be changed.** - -## Changes - -| Filename | v10 | v11 | -| ------------------------ | --------------------------------- | --------------------------------- | -| `scss/_scale.scss` | `@function carbon--get-type-size` | Removed, use `type-scale` instead | -| | `$carbon--type-scale` | `$type-scale` | -| | `@function carbon--type-scale` | `@function type-scale` | -| | `@mixin carbon--type-scale` | `@mixin type-scale` | -| | `@mixin carbon--font-size` | `@mixin font-size` | -| `scss/_font-family.scss` | `$carbon--font-families` | `$font-families` | -| | `@function carbon--font-family` | `font-family` | -| | `@mixin carbon--font-family` | `font-family` | -| | `$carbon--font-weights` | `$font-weights` | -| | `@function carbon--font-weight` | `font-weight` | -| | `@mixin carbon--font-weight` | `font-weight` | -| `scss/_prefix.scss` | | No Changes | -| `scss/_styles.scss` | `@mixin carbon--type-style` | `@mixin type-style` | -| `scss/_reset.scss` | `@mixin carbon--default-type` | `@mixin default-type` | -| | `@mixin carbon--type-reset` | `@mixin type-reset` | -| `scss/_classes.scss` | `@mixin carbon--type-classes` | `@mixin type-classes` | diff --git a/docs/migration/v11.md b/docs/migration/v11.md new file mode 100644 index 000000000000..2d9aeeb27fd1 --- /dev/null +++ b/docs/migration/v11.md @@ -0,0 +1,1657 @@ +# v11 + +**Note: everything in this file is a work-in-progress and can be changed.** + + + + +## Table of Contents + +- [Upgrade paths](#upgrade-paths) +- [carbon-components](#carbon-components) +- [carbon-components-react](#carbon-components-react) +- [carbon-icons](#carbon-icons) +- [@carbon/icons](#carbonicons) +- [@carbon/icons-react](#carbonicons-react) +- [@carbon/colors](#carboncolors) +- [@carbon/elements](#carbonelements) +- [@carbon/grid](#carbongrid) +- [@carbon/layout](#carbonlayout) +- [@carbon/motion](#carbonmotion) +- [@carbon/pictograms](#carbonpictograms) +- [@carbon/pictograms-react](#carbonpictograms-react) +- [@carbon/themes](#carbonthemes) +- [@carbon/type](#carbontype) +- [FAQ](#faq) + + + +This document outlines all of the changes to the Carbon Design System from v10 +to v11. If you're just getting started, it may be helpful to checkout our +[migration site](#todo). + +You can also follow one of our upgrade paths for common migration use-cases. +Checkout one of the guides below if they apply to you: + +- Your project only uses `carbon-components` + - [Link](#carbon-components) +- Your project uses `carbon-components`, `carbon-components-react`, and + `carbon-icons` + - [Link](#carbon-components-carbon-components-react-carbon-icons) +- Your project uses `carbon-components`, `carbon-components-react`, + `carbon-icons`, and `@carbon/icons-react` + - [Link](#carbon-components-carbon-components-react-carbon-icons-carbonicons-react) + +If you're looking for migration steps for a specific package, checkout the list +of packages below. + +- [carbon-components](#carbon-components) +- [carbon-components-react](#carbon-components-react) +- [carbon-icons](#carbon-icons) +- [@carbon/icons](#carbonicons) +- [@carbon/icons-react](#carbonicons-react) +- [@carbon/colors](#carboncolors) +- [@carbon/elements](#carbonelements) +- [@carbon/grid](#carbongrid) +- [@carbon/layout](#carbonlayout) +- [@carbon/motion](#carbonmotion) +- [@carbon/pictograms](#carbonpictograms) +- [@carbon/pictograms-react](#carbonpictograms-react) +- [@carbon/themes](#carbonthemes) +- [@carbon/type](#carbontype) + +## Upgrade paths + +### carbon-components + +This upgrade is common for teams that may be using only the styles from Carbon. +It may also be for teams who use the Vanilla JavaScript version of components. + +Note: parts of this upgrade can be automated by running the following command in +your project: + +```bash +npx @carbon/upgrade +``` + +- [Automated] Remove `carbon-components` +- [Automated] Add `@carbon/styles` +- Update to Dart Sass +- Update imports + - `@use` + - `@import` + - Changes to `vendor` +- Changes to Design Tokens + - Compatability theme + +### carbon-components, carbon-components-react, carbon-icons + +This upgrade is one of the most common upgrade paths for Carbon. This path +assumes that you are bringing in the styles from `carbon-components` and are +using the React components from `carbon-components-react`. + +Note: parts of this upgrade can be automated by running the following command in +your project: + +```bash +npx @carbon/upgrade +``` + +- [Automated] Remove `carbon-components` +- [Automated] Remove `carbon-components-react` +- [Automated] Remove `carbon-icons` +- [Automated] Add `@carbon/react` + - [Automated] Update all React imports to `@carbon/react` + - Update to Dart Sass + - Update all scss imports to `@carbon/react/scss/*` + +### carbon-components, carbon-components-react, carbon-icons, @carbon/icons-react + +This upgrade is one of the most common upgrade paths for Carbon. This path +assumes that you are bringing in the styles from `carbon-components`, using the +React components from `carbon-components-react`, and you bring in icons using +`@carbon/icons-react`. + +Note: parts of this upgrade can be automated by running the following command in +your project: + +```bash +npx @carbon/upgrade +``` + +- [Automated] Remove `carbon-components` +- [Automated] Remove `carbon-components-react` +- [Automated] Remove `carbon-icons` +- [Automated] Remove `@carbon/icons-react` +- [Automated] Add `@carbon/react` + - [Automated] Update all React imports to `@carbon/react` + - Update to Dart Sass + - Update all scss imports to `@carbon/react/scss/*` + - Update all icon imports to `@carbon/react/icons` + +## carbon-components + +In v10, the `carbon-componnets` package ships Sass styles and Vanilla JavaScript +for components in our Design System. Starting in v11, we will split out our +styles into a dedicated package: `@carbon/styles`. In addition, we will no +longer support the Vanilla JavaScript for our components. + +_Note: if you interested in continuing support for the Vanilla JavaScript +components in `carbon-components`, reach out in our discussion [here](#todo)._ + +### Changing from `node-sass` to `sass` + +Along with this change, the styles of Carbon have been completely updated to use +[Sass Modules](https://css-tricks.com/introducing-sass-modules/). This change +requires that teams use the [Dart Sass](https://npmjs.com/package/sass) package. +Support for `node-sass` has been dropped starting in v11. + +This decision was made after seeing the +[deprecation notice](https://sass-lang.com/blog/libsass-is-deprecated) of +LibSass in late 2020. + +### Changing import paths from `scss/globals/scss` to `scss` + +With this change to Sass Modules, you'll find that many of the ways that you are +using Carbon today have been updated and streamlined. In general, most paths +have changed from the long form `scss/globals/scss/path/to/file` to simply +`scss/path/to/file`. + +For example, to access the `theme` entrypoint you would have needed to import +`scss/globals/scss/theme`. Now, this entrypoint lives at `scss/theme`. + +Alongside the updates to filepaths, you will find that helper mixins, functions, +and variables have been updated to no longer have a `carbon--` prefix. With Sass +Modules, the module name now serves as an appropriate prefix and provides +correct scoping. + +There are two major areas of changes in the package, namely: + +- [`scss/globals/scss`](#scssglobalsscss) +- [`scss/components/`](#scsscomponents) + +### scss/globals/scss + +The majority of the files currently available under `/scss/globals/scss` are now +available directly under the `scss` directory, or through our new utilities +folder in `scss/utilties`. + +Below, you'll find an overview of files that are a part of our Public API and +where they have moved to in v11. Each row also contains a link to a section +below that goes over any API changes for the file. + +| File | v11 | +| ------------------------------------------------------------------------------- | ----------------------------------------- | +| [`scss/globals/scss/styles.scss`](#scssglobalsscssstylesscss) | Moved to `index.scss` in `@carbon/styles` | +| [`scss/globals/grid/_grid.scss`](#scssglobalsgrid_gridscss) | Moved to `scss/_grid.scss` | +| [`scss/globals/scss/_colors.scss`](#scssglobalsscss_colorsscss) | Moved to `scss/_colors.scss` | +| [`scss/globals/scss/_css--body.scss`](#scssglobalsscss_css--bodyscss) | TODO | +| [`scss/globals/scss/_css--font-face.scss`](#scssglobalsscss_css--font-facescss) | Moved to `scss/_font-face.scss` | +| [`scss/globals/scss/_css--helpers.scss`](#scssglobalsscss_css--helpersscss) | Moved to `scss/utilities/` | +| [`scss/globals/scss/_css--reset.scss`](#scssglobalsscss_css--resetscss) | Moved to `scss/_reset.scss` | +| [`scss/globals/scss/_helper-classes.scss`](#scssglobalsscss_helper-classesscss) | Moved to `scss/utilities/` | +| [`scss/globals/scss/_helper-mixins.scss`](#scssglobalsscss_helper-mixinsscss) | Moved to `scss/utilities/` | +| `scss/globals/scss/_import-once.scss` | Removed | +| `scss/globals/scss/_layer.scss` | Removed | +| [`scss/globals/scss/_layout.scss`](#scssglobalsscss_layoutscss) | Moved to `scss/_layout.scss` TODO | +| [`scss/globals/scss/_mixins.scss`](#scssglobalsscss_mixinsscss) | Removed | +| [`scss/globals/scss/_motion.scss`](#scssglobalsscss_motionscss) | Moved to `scss/_motion.scss` | +| [`scss/globals/scss/_spacing.scss`](#scssglobalsscss_spacingscss) | Moved to `scss/_spacing.scss` | +| [`scss/globals/scss/_theme-tokens.scss`](#scssglobalsscss_theme-tokensscss) | Moved to `scss/_themes.scss` | +| [`scss/globals/scss/_theme.scss`](#scssglobalsscss_themescss) | Moved to `scss/_theme.scss` | +| [`scss/globals/scss/_typography.scss`](#scssglobalsscss_typographyscss) | Moved to `scss/_type.scss` | +| [`scss/globals/scss/_vars.scss`](#scssglobalsscss_varsscss) | Removed | + +#### `scss/globals/scss/styles.scss` + +| v10 | v11 | +| :----------------------------------------------------------- | :----------------------- | +| `@import 'carbon-components/scss/globals/scss/styles.scss';` | `@use '@carbon/styles';` | +| (alias) | `@use '@carbon/react';` | + +The `styles.scss` entrypoint was provided as a way to bring in all of the styles +for the Carbon Design System. In v11, this is available through +`@carbon/styles/index.scss` which can be directly imported with `@use` by +writing out: + +```scss +@use '@carbon/styles'; +``` + +If you are overriding different settings of the project, like `$prefix`, you +will need to pass those into the `with` block in the import: + +```scss +@use '@carbon/styles' with ( + $prefix: 'cds', +); +``` + +For a full overview of changes to how you configure Carbon, checkout our +[configuration](#configuration) section below. + +#### `scss/globals/scss/_colors.scss` + +| v10 | v11 | +| :------------------------------------------------------ | :----------------------------------- | +| `@import 'carbon-components/scss/globals/scss/colors';` | `@use '@carbon/styles/scss/colors';` | +| | `@use '@carbon/react/scss/colors';` | + +The `scss/globals/scss/_colors.scss` entrypoint provided a re-export of the +`@carbon/colors` package. This entrypoint now lives at `scss/_colors.scss` in +`@carbon/styles` and can be included by writing: + +```scss +@use '@carbon/styles/scss/colors'; + +.example { + color: colors.$blue-50; +} +``` + +The following is a list of API changes in v11 for `@carbon/colors` that are +present in `@carbon/styles/scss/colors`: + +| v10 | v11 | +| :---------------------- | :----------------------------- | +| `$ibm-*` variables | Removed | +| `$carbon-*` variables | Removed | +| `$ibm-color-map` | Removed | +| `$carbon--colors` | Removed, replaced by `$colors` | +| `@mixin ibm--colors` | Removed | +| `@mixin carbon--colors` | Removed | + +#### `scss/globals/scss/_css--body.scss` + +TODO + +#### `scss/globals/scss/_css--font-face.scss` + +Beginning in V11, the `@ibm/plex` package will be included as a dependency of +`@carbon/styles`. Because of this, we will no longer be serving the files via +Google Fonts. You will get the fonts by default by importing from the main +entrypoint (`@use '@carbon/styles'`), or by referencing the font face file +directly (`@use '@carbon/styles/scss/font-face'`). If you are already hosting +the font files, and do not want the font files to be emitted, you can set the +`$css--font-face` variable to `false`. + +#### `scss/globals/scss/_css--helpers.scss` + +The `scss/globals/scss/_css--helpers` entrypoint provides class-based helpers +when the `$css--helpers` flag is set to true, specifically: + +- `bx--assistive-text` and `bx--visually-hidden` +- `bx--body` + +In v11, the assistive text and visually hidden classes are now available under: +`scss/utilities/_visually-hidden`. + +TODO `bx--body` + +#### `scss/globals/scss/_css--reset.scss` + +| v10 | v11 | +| :---------------------------------------------------------- | :---------------------------------- | +| `@import 'carbon-components/scss/globals/scss/css--reset';` | `@use '@carbon/styles/scss/reset';` | + +The `scss/globals/scss/css--reset` entrypoint is used for including a CSS reset +in a project using Carbon. It is configurable using the `$css--reset` global +flag. + +In v11, this entrypoint is now available at `scss/reset` and is still +configurable with the `$css--reset` configuration option. By default, +`$css--reset` is set to `true`. + +```scss +@use '@carbon/styles/scss/config' with ( + $css--reset: true, +); +@use '`@carbon/styles/scss/reset'; +``` + +#### `scss/globals/scss/_helper-classes.scss` + +The `scss/globals/scss/_helper-classes.scss` entrypoint was used to emit CSS +classes for text truncation, specifically: + +- `bx--text-truncate--end` +- `bx--text-truncate--front` + +TODO + +#### `scss/globals/scss/_helper-mixins.scss` + +The `scss/globals/scss/_helper-mixins.scss` entrypoint exported a number of +helper mixins that could be used when building components. In v11, these helpers +have been moved to utilities located under `scss/utilities/`. Below is a table +that details to which files a particular helper has been moved. + +| v10 | v11 | +| :-------------------------- | :---------------------------------------- | +| `@mixin text-overflow` | `scss/utilities/_text-overflow.scss` | +| `@mixin placeholder-colors` | `scss/utilities/_placeholder-colors.scss` | +| `@mixin box-shadow` | `scss/utilities/_box-shadow.scss` | +| `@mixin focus-outline` | `scss/utilities/_focus-outline.scss` | +| `@mixin rotate` | `scss/utilities/_rotate.scss` | +| `@mixin hidden` | TODO | +| `@mixin button-reset` | `scss/utilities/_button-reset.scss` | +| `@mixin skeleton` | `scss/utilities/_skeleton.scss` | +| `@keyframes skeleton` | `scss/utilities/_keyframes.scss` TODO | +| `@mixin high-contrast-mode` | `scss/utilities/_high-contrast-mode.scss` | + +#### `scss/globals/scss/_layout.scss` + +TODO + +#### `scss/globals/scss/_mixins.scss` + +The `scss/globals/scss/_mixins.scss` entrypoint re-exported mixins from the +following files: + +- `scss/globals/scss/helper-mixins` +- `scss/components/button/mixins`; +- `scss/components/loading/mixins`; +- `scss/components/notification/mixins`; +- `scss/components/tag/mixins`; +- `scss/components/structured-list/mixins`; + +In v11, this entrypoint has been removed. If you are using a mixin from this +entrypoint, find the appropriate mixin from the migration guidance for one of +the files above. + +TODO: anything else we can offer for guidance here? + +#### `scss/globals/scss/_motion.scss` + +| v10 | v11 | +| :------------------------------------------------------ | :----------------------------------- | +| `@import 'carbon-components/scss/globals/scss/motion';` | `@use '@carbon/styles/scss/motion';` | + +The `scss/globals/scss/_motion.scss` entrypoint re-exported exports from the +`@carbon/motion` package along with providing a number of helpers and variables +for duration and easing curves. + +| v10 | v11 | +| :------------------------- | :---------------------- | +| `$carbon--ease-in` | Removed | +| `$carbon--ease-out` | Removed | +| `$carbon--standard-easing` | Removed | +| `$transition--base` | Removed | +| `$transition--expansion` | Removed | +| `$duration--fast-01` | `$duration-fast-01` | +| `$duration--fast-02` | `$duartion-fast-02` | +| `$duration--moderate-01` | `$duration-moderate-01` | +| `$duration--moderate-02` | `$duration-moderate-01` | +| `$duration--slow-01` | `$duration-slow-01` | +| `$duration--slow-02` | `$duration-slow-02` | +| `@function motion` | No changes | +| `@mixin motion` | No changes | + +TODO what to use instead of removed items? + +For a full overview of what is available in this entrypoint, check out the +[API documentation](../../packages/motion/docs/sass.md#todo) for the +`@carbon/motion` package. + +#### `scss/globals/scss/_spacing.scss` + +| v10 | v11 | +| :------------------------------------------------------- | :------------------------------------ | +| `@import 'carbon-components/scss/globals/scss/spacing';` | `@use '@carbon/styles/scss/spacing';` | + +The `scss/globals/scss/_spacing.scss` entrypoint provided a number of variables +for spacing and include re-exports from the `@carbon/layout` package for +`mini-unit` support as well as the spacing scale. + +In v11, this entrypoint has been moved to `scss/_spacing.scss` and a number of +exports have been changed. + +| v10 | v11 | +| :----------------------------- | :----------------------------------- | +| `$spacing-01` | No changes | +| `$spacing-02` | No changes | +| `$spacing-03` | No changes | +| `$spacing-04` | No changes | +| `$spacing-05` | No changes | +| `$spacing-06` | No changes | +| `$spacing-07` | No changes | +| `$spacing-08` | No changes | +| `$spacing-09` | No changes | +| `$spacing-10` | No changes | +| `$spacing-11` | No changes | +| `$spacing-12` | No changes | +| `$spacing-13` | No changes | +| `$carbon--spacing` | Renamed to `$spacing` | +| `$carbon--spacing-01` | Removed, replaced with `$spacing-01` | +| `$carbon--spacing-02` | Removed, replaced with `$spacing-02` | +| `$carbon--spacing-03` | Removed, replaced with `$spacing-03` | +| `$carbon--spacing-04` | Removed, replaced with `$spacing-04` | +| `$carbon--spacing-05` | Removed, replaced with `$spacing-05` | +| `$carbon--spacing-06` | Removed, replaced with `$spacing-06` | +| `$carbon--spacing-07` | Removed, replaced with `$spacing-07` | +| `$carbon--spacing-08` | Removed, replaced with `$spacing-08` | +| `$carbon--spacing-09` | Removed, replaced with `$spacing-09` | +| `$carbon--spacing-10` | Removed, replaced with `$spacing-10` | +| `$carbon--spacing-11` | Removed, replaced with `$spacing-11` | +| `$carbon--spacing-12` | Removed, replaced with `$spacing-12` | +| `$carbon--spacing-13` | Removed, replaced with `$spacing-13` | +| `$spacing-baseline` | Removed | +| `$spacing-4xs` | Removed | +| `$spacing-3xs` | Removed | +| `$spacing-2xs` | Removed | +| `$spacing-xs` | Removed | +| `$spacing-sm` | Removed | +| `$spacing-md` | Removed | +| `$spacing-lg` | Removed | +| `$spacing-xl` | Removed | +| `$spacing-2xl` | Removed | +| `$spacing-3xl` | Removed | +| `$carbon--layout-01` | Removed, replaced by `$spacing-05` | +| `$carbon--layout-02` | Removed, replaced by `$spacing-06` | +| `$carbon--layout-03` | Removed, replaced by `$spacing-07` | +| `$carbon--layout-04` | Removed, replaced by `$spacing-09` | +| `$carbon--layout-05` | Removed, replaced by `$spacing-10` | +| `$carbon--layout-06` | Removed, replaced by `$spacing-12` | +| `$carbon--layout-07` | Removed, replaced by `$spacing-13` | +| `$layout-01` | Removed, replaced by `$spacing-05` | +| `$layout-02` | Removed, replaced by `$spacing-06` | +| `$layout-03` | Removed, replaced by `$spacing-07` | +| `$layout-04` | Removed, replaced by `$spacing-09` | +| `$layout-05` | Removed, replaced by `$spacing-10` | +| `$layout-06` | Removed, replaced by `$spacing-12` | +| `$layout-07` | Removed, replaced by `$spacing-13` | +| `$layout-2xs` | Removed | +| `$layout-xs` | Removed | +| `$layout-sm` | Removed | +| `$layout-md` | Removed | +| `$layout-lg` | Removed | +| `$layout-xl` | Removed | +| `$layout-2xl` | Removed | +| `$carbon--layout` | Removed | +| `$carbon--mini-unit-size` | Removed | +| `@function carbon--mini-units` | Removed | + +For a full overview of what is available in this entrypoint, check out the +[API documentation](../../packages/layout/docs/sass.md#todo) for the +`@carbon/layout` package. + +#### `scss/globals/scss/_theme-tokens.scss` + +The `scss/globals/scss/_theme-tokens.scss` entrypoint provides several component +tokens along with re-exports from `@carbon/themes` package. + +| v10 | v11 | +| :--------------------------------------- | :-------------------------------------------- | +| Design tokens | Available in `scss/_theme.scss` | +| `$disabled` | TODO | +| `$disabled-background-color` | TODO | +| `$focus` | Available directly in the theme | +| `$inverse-focus-ui` | Available directly in the theme | +| `$accordion-flex-direction` | Moved to `scss/components/accordion` | +| `$accordion-justify-content` | Moved to `scss/components/accordion` | +| `$accordion-arrow-margin` | Moved to `scss/components/accordion` | +| `$accordion-title-margin` | Moved to `scss/components/accordion` | +| `$accordion-content-padding` | Moved to `scss/components/accordion` | +| `$button-font-weight` | Moved to `scss/components/button` | +| `$button-font-size` | Moved to `scss/components/button` | +| `$button-border-radius` | Moved to `scss/components/button` | +| `$button-height` | Moved to `scss/components/button` | +| `$button-padding` | Moved to `scss/components/button` | +| `$button-padding-field` | Moved to `scss/components/button` | +| `$button-padding-sm` | Moved to `scss/components/button` | +| `$button-padding-lg` | Moved to `scss/components/button` | +| `$button-padding-ghost` | Moved to `scss/components/button` | +| `$button-padding-ghost-field` | Moved to `scss/components/button` | +| `$button-padding-ghost-sm` | Moved to `scss/components/button` | +| `$button-border-width` | Moved to `scss/components/button` | +| `$button-outline-width` | Moved to `scss/components/button` | +| `$button-outline-offset` | Moved to `scss/components/button` | +| `$button-outline` | Moved to `scss/components/button` | +| `$copy-active` | TODO | +| `$copy-btn-feedback` | TODO | +| `$checkbox-border-width` | Moved to `scss/components/checkbox` | +| `$content-switcher-border-radius` | Moved to `scss/components/content-switcher` | +| `$content-switcher-option-border` | Moved to `scss/components/content-switcher` | +| `$content-switcher-divider` | Moved to `scss/components/content-switcher` | +| `$data-table-heading-transform` | Moved to `scss/components/data-table` | +| `$data-table-heading-border-bottom` | Moved to `scss/components/data-table` | +| `$data-table-row-height` | Moved to `scss/components/data-table` | +| `$data-table-zebra-color` | Moved to `scss/components/data-table` | +| `$data-table-column-hover` | Moved to `scss/components/data-table` | +| `$date-picker-in-range-background-color` | Moved to `scss/components/data-table` | +| `$input-border` | TODO | +| `$input-label-weight` | TODO | +| `$link-visited` | Moved to `scss/components/link` | +| `$link-inverse-color` | Moved to `scss/components/link` | +| `$modal-border-top` | Moved to `scss/components/modal` | +| `$modal-footer-background-color` | Moved to `scss/components/modal` | +| `$notification-info-background-color` | Moved to `scss/components/notification` | +| `$notification-error-background-color` | Moved to `scss/components/notification` | +| `$notification-warning-background-color` | Moved to `scss/components/notification` | +| `$notification-success-background-color` | Moved to `scss/components/notification` | +| `$progress-indicator-bar-width` | Moved to `scss/components/progress-indicator` | +| `$progress-indicator-stroke-width` | Moved to `scss/components/progress-indicator` | +| `$progress-indicator-line-offset` | Moved to `scss/components/progress-indicator` | +| `$snippet-background-color` | Moved to `scss/components/code-snippet` | +| `$snippet-border-color` | Moved to `scss/components/code-snippet` | +| `$radio-border-width` | Moved to `scss/components/radio-button` | +| `$structured-list-padding` | Moved to `scss/components/structured-list` | +| `$structured-list-text-transform` | Moved to `scss/components/structured-list` | +| `$tab-underline-color` | Moved to `scss/components/tabs` | +| `$tab-underline-color-hover` | Moved to `scss/components/tabs` | +| `$tab-text-disabled` | Moved to `scss/components/tabs` | +| `$tab-underline-disabled` | Moved to `scss/components/tabs` | +| `$tooltip-background-color` | Moved to `scss/components/tooltip` | +| `$skeleton` | Removed, available as a token in the theme | + +TODO make sure component tokens live in component files + +#### `scss/globals/scss/_theme.scss` + +| v10 | v11 | +| :----------------------------------------------------- | :---------------------------------- | +| `@import 'carbon-components/scss/globals/scss/theme';` | `@use '@carbon/styles/scss/theme';` | + +The `scss/globals/scss/_theme.scss` entrypoint re-exported tokens from the +`_theme-tokens.scss` entrypoint. In v11, you can import this file directly and +reference the current theme, tokens defined in the theme, as well as dynamically +retrieve the current value of a token. + +```scss +@use '@carbon/styles/scss/theme'; + +.example { + background: theme.$background; + color: theme.$text-primary; +} +``` + +For a full overview of what is available in this entrypoint, check out our +[API documentation](../../packages/styles/docs/sass.md#todo). + +#### `scss/globals/scss/_typography.scss` + +| v10 | v11 | +| :---------------------------------------------------------- | :--------------------------------- | +| `@import 'carbon-components/scss/globals/scss/typography';` | `@use '@carbon/styles/scss/type';` | + +The `scss/globals/scss/_typography.scss` entrypoint provides access to a number +of variables and helpers for working with dimensions. It also re-exports several +exports from `@carbon/type`. + +In v11, this entrypoint has been moved to `scss/_type.scss` and several of its +exports have changed or removed. + +| v10 | v11 | +| :------------------------------ | :-------------------------------------- | +| `$base-font-size` | TODO | +| `@function rem` | Moved to `scss/utilities/_convert.scss` | +| `@function em` | Moved to `scss/utilities/_convert.scss` | +| `@mixin type-style` | No changes | +| `$carbon--font-families` | Renamed to `$font-families` | +| `@function carbon--font-family` | Renamed to `@function font-family` | +| `@mixin carbon--font-family` | Renamed to `@mixin font-family` | +| `$carbon--font-weights` | Renamed to `$font-weights` | +| `@function carbon--font-weight` | Renamed to `@function font-weight` | +| `@mixin carbon--font-weight` | Renamed to `@mixin font-weight` | +| `$caption-01` | No changes | +| `$caption-02` | No changes | +| `$label-01` | No changes | +| `$label-02` | No changes | +| `$helper-text-01` | No changes | +| `$helper-text-02` | No changes | +| `$body-short-01` | No changes | +| `$body-long-01` | No changes | +| `$body-short-02` | No changes | +| `$body-long-02` | No changes | +| `$code-01` | No changes | +| `$code-02` | No changes | +| `$heading-01` | No changes | +| `$productive-heading-01` | No changes | +| `$heading-02` | No changes | +| `$productive-heading-02` | No changes | +| `$productive-heading-03` | No changes | +| `$productive-heading-04` | No changes | +| `$productive-heading-05` | No changes | +| `$productive-heading-06` | No changes | +| `$productive-heading-07` | No changes | +| `$expressive-heading-01` | No changes | +| `$expressive-heading-02` | No changes | +| `$expressive-heading-03` | No changes | +| `$expressive-heading-04` | No changes | +| `$expressive-heading-05` | No changes | +| `$expressive-heading-06` | No changes | +| `$expressive-paragraph-01` | No changes | +| `$quotation-01` | No changes | +| `$quotation-02` | No changes | +| `$display-01` | No changes | +| `$display-02` | No changes | +| `$display-03` | No changes | +| `$display-04` | No changes | +| `$tokens` | No changes | + +For a full overview of what is available in this entrypoint, check out the +[API documentation](../../packages/type/docs/sass.md#todo) for `@carbon/type`. + +#### `scss/globals/scss/_vars.scss` + +The `scss/globals/scss/_vars.scss` entrypoint was used to access most of the +public variables from the Carbon Design System. It also specified the `$prefix` +used for CSS.examples in the codebase. + +In v11, this file has been removed. To get access to variables that you +previously were using `_vars.scss` for, you will need to find the correct direct +import. For changing the `$prefix` used in the project, you can configure this +through the `scss/_config.scss` entrypoint. + +For more information about configuring the project, check out the +[configuration](#configuration) section below. + +#### `scss/globals/grid/_grid.scss` + +| v10 | v11 | +| :---------------------------------------------------- | :--------------------------------- | +| `@import 'carbon-components/scss/globals/grid/grid';` | `@use '@carbon/styles/scss/grid';` | + +The `scss/globals/grid/_grid.scss` entrypoint provides access to the flexbox +based grid from the `@carbon/grid` package. + +In v11, this entrypoint has been moved to `scss/_grid.scss` and continues to +re-export from the `@carbon/grid` package. In addition, the default grid has +been changed from the 12 column variant to the 16 column grid. + +_Note: if you're using `$feature-flags` to set `grid-columns-16` you can remove +this flag in v11_ + +Finally, our default grid implementation no longer uses flexbox. Instead, it +uses CSS Grid. For more information about these changes, checkout [todo](#todo). + +| v10 | v11 | +| :-------------------------- | :-- | +| `@mixin grid` | | +| `@mixin carbon--grid` | | +| `$carbon--12-column-grid` | | +| `$carbon--grid-breakpoints` | | + +### scss/components + +The components located under `scss/components` are available under +`scss/components//_.scss`. For example, to import an +accordion: + +```scss +@import 'carbon-components/scss/components/accordion/accordion'; +``` + +In v11, these files now live at `scss/components//_index.scss` and +can be shortened to `scss/components/` since Dart Sass resolves +`_index.scss` files automatically. for example: + +```scss +@use '@carbon/styles/scss/components/accordion'; +``` + +### Configuration + +In v10, you could configure various aspects of Carbon using global flags that +were set before including Carbon. For example, you could change the prefix used +or disable the CSS reset that the project used by doing the following: + +```scss +$prefix: 'cds'; +$css--reset: false; + +@import 'path/to/carbon'; +``` + +Similarly, you could enable or disable `$feature-flags` for the project with a +similar approach. + +This approach no longer works with the project's switch to Sass Modules. +Instead, you will need to configure Carbon through the `scss/_config.scss` +entrypoint using `with`. This file is re-exported in various entrypoints, so you +can configure Carbon on the main entrypoint: + +```scss +@use '@carbon/styles' with ( + $prefix: 'cds', +); +``` + +Or you can configure the `scss/_config.scss` directly: + +```scss +@use '@carbon/styles/config' with ( + $prefix: 'cds', +); +``` + +_Note: Sass modules can only ever be configured once. Bringing in this module +and configuring it should be one of the first things you do in your project._ + +The following is a table of configuration options and their status in v11. Ones +that are available you can configure through the `scss/_config.scss` entrypoint, +ones that are removed are no longer available. + +| v10 | v11 | +| :---------------- | :----------- | +| `$css--font-face` | | +| `$css--helpers` | Removed | +| `$css--body` | | +| `$css--use-layer` | Removed TODO | +| `$css--reset` | | +| `$prefix` | | +| `$feature-flags` | | + +### Internal + +The following files are considered internal files and have been omitted from +this migration document. If you are currently using these files, please reach +out for support on +[GitHub Discussions](https://github.com/carbon-design-system/carbon/discussions) +and we can help you migrate from the following list of files: + +- `scss/globals/scss/_functions.scss` +- `scss/globals/scss/_feature-flags.scss` +- `scss/globals/scss/_deprecate.scss` +- `scss/globals/scss/_keyframes.scss` +- `scss/globals/scss/_tooltip.scss` +- `scss/globals/scss/vendor/*` + +## carbon-components-react + +The `carbon-components-react` package has been replaced by the `@carbon/react` +package in v11. While you can still use `carbon-components-react` along with +v11, it has been deprecated and will stop receiving updates when v12 is +released. + +In addition, this release contains updates to React components in the package. +These updates include: + +- Changing components from class components to functional components +- Creating consistent prop names and types across components +- Updates to make components more accessible + +For a full overview of changes to components, checkout our components section +below. + +| Component | Changes | +| :-------------------------- | :-------------------------------------------------------------- | +| `Accordion` | | +| `AccordionItem` | | +| `AccordionSkeleton` | | +| `ActionableNotification` | View changes [here](#notifications) | +| `AspectRatio` | | +| `Breadcrumb` | | +| `BreadcrumbItem` | | +| `BreadcrumbSkeleton` | | +| `Button` | | +| `ButtonSet` | | +| `ButtonSkeleton` | | +| `Checkbox` | | +| `CheckboxSkeleton` | | +| `ClickableTile` | Updated from a class to functional component | +| `CodeSnippet` | | +| `CodeSnippetSkeleton` | | +| `Column` | View changes [here](#grid) | +| `ComboBox` | | +| `ComposedModal` | Updated from a class to functional component | +| `Content` | | +| `ContentSwitcher` | | +| `ControlledPasswordInput` | | +| `Copy` | | +| `CopyButton` | | +| `DangerButton` | | +| `DataTable` | | +| `DataTableSkeleton` | | +| `DatePicker` | | +| `DatePickerInput` | | +| `DatePickerSkeleton` | | +| `Dropdown` | | +| `DropdownSkeleton` | | +| `ErrorBoundary` | | +| `ErrorBoundaryContext` | | +| `ExpandableSearch` | | +| `ExpandableTile` | Updated from a class to functional component | +| `FileUploader` | | +| `FileUploaderButton` | | +| `FileUploaderDropContainer` | | +| `FileUploaderItem` | | +| `FileUploaderSkeleton` | | +| `Filename` | | +| `FilterableMultiSelect` | Updated from a class to functional component | +| `FluidForm` | | +| `Form` | | +| `FormGroup` | | +| `FormItem` | | +| `FormLabel` | | +| `Grid` | View changes [here](#grid) | +| `Header` | | +| `HeaderContainer` | | +| `HeaderGlobalAction` | | +| `HeaderGlobalBar` | | +| `HeaderMenu` | | +| `HeaderMenuButton` | | +| `HeaderMenuItem` | | +| `HeaderName` | | +| `HeaderNavigation` | Updated from a class to functional component. No other changes. | +| `HeaderPanel` | | +| `HeaderSideNavItems` | | +| `Icon` | Removed | +| `IconSkeleton` | | +| `InlineLoading` | | +| `InlineNotification` | View changes [here](#notifications) | +| `Link` | | +| `ListItem` | | +| `Loading` | | +| `Modal` | Updated from a class to functional component | +| `ModalBody` | | +| `ModalFooter` | Updated from a class to functional component | +| `ModalHeader` | Updated from a class to functional component | +| `ModalWrapper` | Removed | +| `MultiSelect` | | +| `NotificationActionButton` | View changes [here](#notifications) | +| `NotificationButton` | View changes [here](#notifications) | +| `NotificationTextDetails` | View changes [here](#notifications) | +| `NumberInput` | Updated from a class to functional component | +| `NumberInputSkeleton` | | +| `OrderedList` | | +| `OverflowMenu` | | +| `OverflowMenuItem` | | +| `Pagination` | Updated from a class to functional component | +| `PaginationNav` | | +| `PaginationSkeleton` | | +| `PasswordInput` | | +| `PrimaryButton` | | +| `ProgressIndicator` | | +| `ProgressIndicatorSkeleton` | | +| `ProgressStep` | | +| `RadioButton` | Updated from a class to functional component | +| `RadioButtonGroup` | Updated from a class to functional component | +| `RadioButtonSkeleton` | | +| `RadioTile` | | +| `Row` | View changes [here](#grid) | +| `Search` | Updated from a class to functional component | +| `SearchFilterButton` | | +| `SearchLayoutButton` | Removed | +| `SearchSkeleton` | | +| `SecondaryButton` | | +| `Select` | | +| `SelectItem` | | +| `SelectItemGroup` | | +| `SelectSkeleton` | | +| `SelectableTile` | | +| `SideNav` | | +| `SideNavDetails` | | +| `SideNavDivider` | | +| `SideNavFooter` | | +| `SideNavHeader` | | +| `SideNavIcon` | | +| `SideNavItem` | | +| `SideNavItems` | | +| `SideNavLink` | | +| `SideNavLinkText` | | +| `SideNavMenu` | Updated from a class to functional component. No other changes. | +| `SideNavMenuItem` | | +| `SideNavSwitcher` | | +| `SkeletonPlaceholder` | | +| `SkeletonText` | | +| `SkipToContent` | | +| `Slider` | | +| `SliderSkeleton` | | +| `StructuredListBody` | | +| `StructuredListCell` | | +| `StructuredListHead` | | +| `StructuredListInput` | | +| `StructuredListRow` | | +| `StructuredListSkeleton` | | +| `StructuredListWrapper` | | +| `Switch` | | +| `Switcher` | | +| `SwitcherDivider` | | +| `SwitcherItem` | | +| `Table` | | +| `TableActionList` | | +| `TableBatchAction` | | +| `TableBatchActions` | | +| `TableBody` | | +| `TableCell` | | +| `TableContainer` | | +| `TableExpandHeader` | | +| `TableExpandRow` | | +| `TableExpandedRow` | | +| `TableHead` | | +| `TableHeader` | | +| `TableRow` | | +| `TableSelectAll` | | +| `TableSelectRow` | | +| `TableToolbar` | | +| `TableToolbarAction` | | +| `TableToolbarContent` | | +| `TableToolbarMenu` | | +| `TableToolbarSearch` | | +| `Tabs` | View changes [here](#tabs) | +| `Tab` | View changes [here](#tabs) | +| `TabContent` | View changes [here](#tabs) | +| `TabsSkeleton` | View changes [here](#tabs) | +| `Tag` | | +| `TagSkeleton` | | +| `TextArea` | | +| `TextAreaSkeleton` | | +| `TextInput` | | +| `TextInputSkeleton` | | +| `Tile` | Updated from a class to functional component | +| `TileAboveTheFoldContent` | Updated from a class to functional component | +| `TileBelowTheFoldContent` | Updated from a class to functional component | +| `TileGroup` | | +| `TimePicker` | Updated from a class to functional component | +| `TimePickerSelect` | Updated from a class to functional component | +| `ToastNotification` | View changes [here](#notifications) | +| `Toggle` | Updated from a class to functional component | +| `ToggleSkeleton` | Removed | +| `ToggleSmall` | Removed | +| `ToggleSmallSkeleton` | Removed | +| `Toolbar` | Removed | +| `ToolbarDivider` | Removed | +| `ToolbarItem` | Removed | +| `ToolbarOption` | Removed | +| `ToolbarSearch` | Removed | +| `ToolbarTitle` | Removed | +| `Tooltip` | View changes [here](#tooltips) | +| `TooltipDefinition` | View changes [here](#tooltips) | +| `TooltipIcon` | View changes [here](#tooltips) | +| `UnorderedList` | | + +### Grid + +- Update to use CSS Grid +- Old grid behavior is available through `FlexGrid` + +### Notifications + +The notification components have been updated to be more accessible out of the +box. `ToastNotification` and `InlineNotification` now have `role="status"` by +default with additional `role` options of `log` and `alert`. These components do +not receive focus and should be used for information-only use cases. These +components no longer accept actions or interactive children. + +For notifications requiring an action, a new `ActionableNotifiation` component +is available. It has a `role="alertdialog"` and recieves focus by default. +Automatic placement of focus can be turned off via the new `hasFocus` prop. + +All notifications have a new optional `closeOnEscape` prop, it enables +notifications to closed by pressing the `escape` key. For more details, see the +[notification components accessibility page](https://v11.carbondesignsystem.com/components/notification/accessibility). + +ToastNotification` updates: + +- The `title`, `subtitle` and `caption` props have been removed. Compose + notification contents using `children` instead. +- `children` can no longer contain interactive elements. A `ToastNotification` + containing an action or interactive children should be replaced with + `ActionableNotification`. +- The `notificationType` prop is no longer needed and can be removed. +- The default `role` is now `status`. `log` and `alert` can also be used. +- The `closeOnEscape` prop toggles the closing of notifications via the `escape` + key. + +`InlineNotification` updates: + +- The `title`, `subtitle` props have been removed. Compose notification contents + using `children` instead. +- The `actions` prop has been removed. An `InlineNotification` containing an + action or interactive children should be replaced with + `ActionableNotification` configured with the `inline` prop. +- `children` can no longer contain interactive elements. +- The `notificationType` prop is no longer needed and can be removed. +- The default `role` is now `status`. `log` and `alert` can also be used. +- The `closeOnEscape` prop toggles the closing of notifications via the `escape` + key. + +`ActionableNotification` config options: + +- The `inline` prop enables a styling variation resulting in a similar visual + design to `InlineNotification`. +- The `actionButtonLabel` prop configures the action button text. +- The `hasFocus` prop toggles the automatic placement of focus. +- The `closeOnEscape` prop toggles the closing of notifications via the `escape` + key. + +### Tabs + +### Tooltips + +## carbon-icons + +The `carbon-icons` package has been deprecated and is no longer supported. To +use icons from the Carbon Design System, you should install the appropriate +library to use with your framework: + +| Package | Framework | Link | +| :---------------------- | :----------------- | :------------------------------------------------------ | +| `@carbon/icons-react` | React | [Link](https://npmjs.com/package/@carbon/icons-react) | +| `@carbon/icons-angular` | Angular | [Link](https://npmjs.com/package/@carbon/icons-angular) | +| `@carbon/icons-vue` | Vue | [Link](https://npmjs.com/package/@carbon/icons-vue) | +| `carbon-icons-svelte` | Svelte | [Link](https://npmjs.com/package/carbon-icons-svelte) | +| `@carbon/icons` | Vanilla JavaScript | [Link](https://npmjs.com/package/@carbon/icons) | + +## @carbon/icons + +**Changes** + +- The `scss` directory which provided styles is no longer provided through this + package + +## @carbon/icons-react + +The `@carbon/icons-react` package has been updated to minimize the number of +exports from the package to help reduce build and compile times. + +This update includes a change to the API of the icon components that come from +this package. Previously, we would export icons that included the size of the +asset. This update allows you to bring the icon directly and specify the size +using the `size` prop. + +**Before** + +```jsx +import { Add32, Add24, Add20, Add16 } from '@carbon/icons-react'; + +function MyComponent() { + return ( + <> + + + + + + ); +} +``` + +**After** + +```jsx +import { Add } from '@carbon/icons-react'; + +function MyComponent() { + return ( + <> + + + + + + ); +} +``` + +_Note: by default, the `size` prop will point to the 16x16px version of the SVG +asset_ + +### Migration + +Most use-cases of the icons from the `@carbon/icons-react` package will be +covered by an automated codemod. To run this codemod, follow the instructions +here: . + +However, in certain situations, we will be unable to infer what the correct +update should be for a certain usage of the icon component. We have written the +codemod to work for most situations, but you will see console warnings for files +that will require you to manually review them to make sure the transforms were +applied correctly. + +The most common manual update that teams will need to make is if a `prop` where +the icon is passed to places a `ref` on the icon. For example, + +```jsx +function MyComponent({ renderIcon: Icon }) { + const ref = useRef(null); + return ; +} + +// Before + + +// After the codemod +// TODO: This may be a bad transformation performance-wise + } /> +``` + +In this situation, you will need to update your code to use `React.forwardRef`: + +```jsx + ( + + ))} +/>; + +// Or, alternatively: +const Search16 = React.forwardRef((props, ref) => { + return ; +}); + +; +``` + +### Manual migration + +In addition to the automated codemods above, there are several patterns in your +codebase that you will need to update manually: + +- If you use the name `ForwardRef(IconName16)` in a test you will need to + manually change this. Prefer to use the component directly if using enzyme +- If you use snapshot tests, the structure will change and include a `size` + prop. Make sure that the `size` prop value matches what your icon name used to + be. For example, `` should become `` + +#### Component definition is missing display name + +If you use `eslint` you may run into the error message above. This comes from +the `react/display-rule` rule. It comes as a result of the transform changing +the following code: + +```jsx +// Input +const iconTypes = { + add: Add32, +}; + +// Output +const iconTypes = { + add: (props) => , +}; +``` + +The transform will create an inline arrow function expression and as a result it +does not have a `displayName` like if you created this function using a variable +or function declaration. + +To address this issue, you can manually create the component: + +```jsx +const Add32 = (props) => ; +const iconTypes = { + add: Add32, +}; +``` + +## @carbon/colors + +| v10 | v11 | +| :-------------------------------------- | :----------------------------------- | +| `@import '@carbon/colors/scss/index';` | `@use '@carbon/colors';` | +| `@import '@carbon/colors/scss/colors';` | `@use '@carbon/colors';` | +| (alias) | `@use '@carbon/styles/scss/colors';` | +| (alias) | `@use '@carbon/react/scss/colors';` | + +**Changes** + +- This package now requires Dart Sass and uses Sass Modules +- The `scss` folder is no longer needed, you can import `@carbon/colors` + directly in Sass +- Variables and mixins with the `ibm--` prefix have been removed +- Variables and mixins with the `carbon--` prefix have been removed + +| v10 | v11 | +| :------------------------------------------------------ | :---------------------------------------- | +| `$-`, for example `$blue-50` | No changes | +| `$--hover`, for example `$blue-50-hover` | No changes | +| `$ibm-color__-` | Removed, use `$-` directly | +| `$ibm-color-map` | Removed, replaced by `$colors` | +| `@mixin ibm--colors` | Removed | +| `$carbon---` | Removed, use `$-` directly | +| `$carbon--colors` | Removed, replaced by `$colors` | +| `@mixin carbon--colors` | Removed | + +For full Sass API documentation, visit the +[Sass Documentation](../../packages/colors/docs/sass.md) for the package. + +## @carbon/elements + +## @carbon/grid + +| v10 | v11 | +| :---------------------------------- | :--------------------------------- | +| `@import '@carbon/grid/scss/grid';` | `@use '@carbon/grid';` | +| (alias) | `@use '@carbon/styles/scss/grid';` | +| (alias) | `@use '@carbon/react/scss/grid';` | + +**Changes** + +- This package now requires Dart Sass and uses Sass Modules +- The default number of columns has been changed to 16 +- The grid package has been updated to include a CSS Grid-based implementation +- Variables, mixins, and functions with the `carbon--` prefix have been renamed + +| Filename | v10 | v11 | +| --------------------- | --- | ------------------------------------------------------------------------- | +| `scss/grid.scss` | | Moved to `index.scss` | +| `scss/index.scss` | | Moved to `index.scss` | +| `scss/_css-grid.scss` | | New | +| `scss/_flexbox.scss` | | New | +| `scss/_mixins.scss` | | Moved to `scss/_flexbox.scss` | +| `scss/_prefix.scss` | | Moved to `scss/_config.scss` | +| `scss/12.scss` | | This file has been removed, to configure the grid use `scss/_config.scss` | + +## @carbon/layout + +| v10 | v11 | +| :-------------------------------------- | :------------------------------------ | +| `@import '@carbon/layout/scss/layout';` | `@use '@carbon/layout';` | +| `@import '@carbon/layout/scss/index';` | `@use '@carbon/layout';` | +| (alias) | `@use '@carbon/styles/scss/spacing';` | +| (alias) | `@use '@carbon/react/scss/spacing';` | + +**Changes** + +| Filename | v10 | v11 | +| :---------------------- | :------------------------------------------ | :--------------------------------- | +| `scss/_breakpoint.scss` | `$carbon--grid-gutter` | | +| | `$carbon--grid-gutter--condensed` | | +| | `$carbon--grid-breakpoints` | | +| | `@function carbon--breakpoint-next` | | +| | `@function carbon--breakpoint-prev` | | +| | `@function carbon--is-smallest-breakpoint` | | +| | `@function carbon--largest-breakpoint-name` | | +| | `@function carbon--breakpoint-infix` | | +| | `@function carbon--breakpoint-up` | | +| | `@function carbon--breakpoint-down` | | +| | `@function carbon--breakpoint-between` | | +| | `@function carbon--largest-breakpoint` | | +| | `@function carbon--breakpoint` | | +| `scss/_convert.scss` | `$carbon--base-font-size` | | +| | `carbon--rem` | | +| | `carbon--em` | | +| `scss/_key-height.scss` | `@function carbon--get-column-width` | | +| | `$carbon--key-height-scales` | | +| | `@function carbon--key-height` | | +| `scss/_mini-unit.scss` | `$carbon--mini-unit-size` | | +| | `@function carbon--mini-units` | | +| `scss/_spacing.scss` | `$carbon--spacing-01` | | +| | `$carbon--spacing-02` | | +| | `$carbon--spacing-03` | | +| | `$carbon--spacing-04` | | +| | `$carbon--spacing-05` | | +| | `$carbon--spacing-06` | | +| | `$carbon--spacing-07` | | +| | `$carbon--spacing-08` | | +| | `$carbon--spacing-09` | | +| | `$carbon--spacing-10` | | +| | `$carbon--spacing-11` | | +| | `$carbon--spacing-12` | | +| | `$carbon--spacing-13` | | +| | `$carbon--spacing` | | +| | `$spacing-01` | | +| | `$spacing-02` | | +| | `$spacing-03` | | +| | `$spacing-04` | | +| | `$spacing-05` | | +| | `$spacing-06` | | +| | `$spacing-07` | | +| | `$spacing-08` | | +| | `$spacing-09` | | +| | `$spacing-10` | | +| | `$spacing-11` | | +| | `$spacing-12` | | +| | `$spacing-13` | | +| | `$carbon--layout-01` | Removed, use `$spacing-05` instead | +| | `$carbon--layout-02` | Removed, use `$spacing-06` instead | +| | `$carbon--layout-03` | Removed, use `$spacing-07` instead | +| | `$carbon--layout-04` | Removed, use `$spacing-09` instead | +| | `$carbon--layout-05` | Removed, use `$spacing-10` instead | +| | `$carbon--layout-06` | Removed, use `$spacing-12` instead | +| | `$carbon--layout-07` | Removed, use `$spacing-13` instead | +| | `$carbon--layout` | Removed | +| | `$layout-01` | Removed, use `$spacing-05` instead | +| | `$layout-02` | Removed, use `$spacing-06` instead | +| | `$layout-03` | Removed, use `$spacing-07` instead | +| | `$layout-04` | Removed, use `$spacing-09` instead | +| | `$layout-05` | Removed, use `$spacing-10` instead | +| | `$layout-06` | Removed, use `$spacing-12` instead | +| | `$layout-07` | Removed, use `$spacing-13` instead | +| | `$carbon--fluid-spacing-01` | | +| | `$carbon--fluid-spacing-02` | | +| | `$carbon--fluid-spacing-03` | | +| | `$carbon--fluid-spacing-04` | | +| | `$carbon--fluid-spacing` | | +| | `$fluid-spacing-01` | | +| | `$fluid-spacing-02` | | +| | `$fluid-spacing-03` | | +| | `$fluid-spacing-04` | | + +## @carbon/motion + +| v10 | v11 | +| :-------------------------------------- | :----------------------------------- | +| `@import '@carbon/motion/scss/motion';` | `@use '@carbon/motion';` | +| `@import '@carbon/motion/scss/index';` | `@use '@carbon/motion';` | +| (alias) | `@use '@carbon/styles/scss/motion';` | +| (alias) | `@use '@carbon/react/scss/motion';` | + +**Changes** + +- This package now requires Dart Sass and uses Sass Modules + +| v10 | v11 | +| -------------------------- | ---------------------------------- | +| `$fast-01` | Renamed to `$duration-fast-01` | +| `$fast-02` | Renamed to `$duration-fast-02` | +| `$moderate-01` | Renamed to `$duration-moderate-01` | +| `$moderate-02` | Renamed to `$duration-moderate-02` | +| `$slow-01` | Renamed to `$duration-slow-01` | +| `$slow-02` | Renamed to `$duration-slow-02` | +| `$carbon--easings` | Renamed to `$easings` | +| `@function carbon--motion` | Renamed to `@function motion` | +| `@mixin carbon--motion` | Renamed to `@mixin motion` | + +For full documentation, visit the +[Sass Documentation](../../packages/motion/docs/sass.md) for the package. + +## @carbon/pictograms + +| Pictogram | v11 | +| -------------------------------------------- | ------------------------------------------------ | +| advanced--fraud--protection | new | +| advanced--threats | new | +| alchemy--language--alphabet--a--expanded | removed | +| anonymous--users | new | +| application--security | new | +| assets | new | +| barcelona | new | +| berlin--brandenburg | removed | +| berlin--brandenburg--gate | replaced by `berlin--brandenburg-gate` | +| boston--zakim-bridge | new | +| bug--virus--malware | new | +| build--leadership--and--culture | new | +| cairo--giza-plateau | new | +| chicago | new | +| collaboration | new | +| continuous--security | new | +| data--security | new | +| design--and--development--01 | replaced by `design-and-development--01` | +| design--and--development--02 | replaced by `design-and-development--02` | +| detect--and--stop--advancing--threats | new | +| digital--id | new | +| digital--trust | new | +| do--not | replaced by `do-not` | +| download | replaced by `download--01` | +| download--alt | replaced by `download--02` | +| dubai--palm--islands | replaced by `dubai--palm-islands` | +| endpoint--security | new | +| enterprise--design--thinking | replaced by `enterprise--design--thinking--01` | +| enterprise--design--thinking--alt | replaced by `enterprise--design--thinking--02` | +| europe-africa | replaced by `europe--africa` | +| export | replaced by `export--01` | +| export--alt | replaced by `export--02` | +| farm | removed | +| feedback | replaced by `feedback--01` | +| get--ahead--of--risk--and--compliance  | new | +| govern--users--and--identities | new | +| hamburg--philharmone | new | +| heart | replaced by `love` | +| heat--map | replaced by `heat--map--01` | +| heat-map--02 | replaced by `heat--map--02` | +| high--risk--users | new | +| ibm--watson | replaced by `watson--logo` | +| identity--trust--assessment | new | +| language | replaced by `language--01` | +| language--01 | replaced by `language--02` | +| language--02 | replaced by `language--03` | +| language--03 | replaced by `language--04` | +| language--04 | replaced by `language--05` | +| language--translation--alphabet--a--expanded | removed | +| lock | replaced by `lock--01` | +| lock--alt | replaced by `lock--02` | +| locked--network | replaced by `locked--network--01` | +| locked--network--alt | replaced by `locked--network--02` | +| london--big--ben | replaced by `london--big-ben` | +| london--expanded--base | removed | +| master--threat--hunting | new | +| math-curve | replaced by `match--curve` | +| mexico-city--angel--of--independence | replaced by `mexico-city--angel-of-independence` | +| mexico-city--museo--soumaya | replaced by `mexico-city--museo-soumaya` | +| milan--duomo--di--milano | replaced by `milan--duomo-di-milano` | +| mortar--and--pestle | replaced by `mortar-and-pestle` | +| network--protection | new | +| nyc--manhattan | replaced by `nyc--manhattan--01` | +| nyc--manhattan--alt | replaced by `nyc--manhattan--02` | +| paris--arc-de-triomphe | new | +| paris--louvre | new | +| paris--notre-dame | new | +| paris--pompidou-center | new | +| population-diagram | replaced by `population--diagram` | +| prague--charles-bridge-tower | new | +| private--network | replaced by `private--network--01` | +| private--network--01 | updated to `private--network--02` | +| private--network--alt | replaced by `private--network--03` | +| private--network--alt--01 | replaced by `private--network--04` | +| protect--critical--assets | new | +| raleigh-nc | new | +| relationship-diagram | replaced by `relationship--diagram` | +| sao-paulo--expanded--base | removed | +| scatter-matrix | replaced by `scatter--matrix` | +| secure--hybrid--cloud | new | +| security--as--a--service | new | +| security--hygiene | new | +| security--intelligence | new | +| speech--alphabet--a--expanded | removed | +| stockholm | new | +| strategy--and--risk | new | +| tel--aviv | replaced by `tel-aviv` | +| threat--management | new | +| tokyo--cherry--blossom | replaced by `tokyo--cherry-blossom` | +| tool--overload | new | +| transform | replaced by `transform--01` | +| transform--02 | new | +| trusted--user | new | +| unauthorized--user--access | new | +| under--utilized--security | new | +| unify--endpoint--management | new | +| unlock | replaced by `unlock--01` | +| unlock--alt | replaced by `unlock--02` | +| upload | replaced by `upload--01` | +| upload--alt | replaced by `upload--02` | +| video | replaced by `video--01` | +| video--alt | replaced by `video--02` | +| warning | replaced by `warning--01` | +| warning--alt | replaced by `warning--02` | +| watson--avatar | replaced by `watson--logo` | +| word-cloud | replaced by `word--cloud` | +| world--community--grid | new | + +## @carbon/pictograms-react + +## @carbon/themes + +| v10 | v11 | +| :------------------------------------- | :---------------------------------- | +| `@import '@carbon/theme/scss/themes';` | `@use '@carbon/themes';` | +| `@import '@carbon/theme/scss/index';` | `@use '@carbon/themes';` | +| (alias) | `@use '@carbon/styles/scss/theme';` | +| (alias) | `@use '@carbon/react/scss/theme';` | + +**Changes** + +- This package now requires Dart Sass and uses Sass Modules +- Variables, mixins, and functions with the `carbon--` prefix have been renamed + +| Filename | v10 | v11 | +| ----------------------- | ----------------------- | -------------------------------------------------------------------------------------------------- | +| `scss/_mixins.scss` | | Removed, use `_theme.scss` instead | +| | `@mixin carbon--theme` | Renamed to `@mixin theme` | +| `scss/_theme-maps.scss` | | Removed, use `scss/_themes.scss` instead | +| | `$carbon--theme--white` | `$white` | +| | `$carbon--theme--g10` | `$g10` | +| | `$carbon--theme--g90` | `$g90` | +| | `$carbon--theme--g100` | `$g100` | +| `scss/_tokens.scss` | | Tokens have been changed, use the compatability theme or switch to the [new tokens](#designtokens) | +| `scss/_config.scss` | | New | +| `scss/_theme.scss` | | New | +| `scss/_themes.scss` | | New | +| `scss/themes.scss` | | Moved to `index.scss` | +| `scss/index.scss` | | Moved to `index.scss` | + +### Design Tokens + +**Status key:** + +- **No change:** Token name has no change between versions. +- **Updated:** From v10 to V11 the number suffix has been replaced with an + adjective that reflects it's usage. This is just a name change, the role + remains the same between v10 and v11. +- **Split:** V10 token has been split into multiple new v11 tokens for more + specific usage. +- **New:** A net new color token to the system in v11. It has no v10 + counterpart. +- **Deprecated:** v10 token was removed in v11. + +| v10 token name | v11 token name | v11 contextual token | Status | +| :----------------- | :------------------------ | :--------------------- | :-------- | +| visited-link | link-visited | | Updated | +| ui-background | background | | Updated | +| ui-05 | layer-selected-inverse | | Split | +| ui-05 | border-inverse | | Split | +| ui-04 | border-strong-01 | border-strong | Split | +| ui-04 | toggle-off | | Split | +| ui-03 | layer-accent-01 | layer-accent | Split | +| ui-03 | border-subtle-01 | border-sublte | Split | +| ui-02 | layer-02 | layer | Updated | +| ui-01 | layer-01 | layer | Updated | +| text-error | text-error | | Updated | +| text-05 | text-helper | | Updated | +| text-04 | text-on-color | | Updated | +| text-03 | text-placeholder | | Updated | +| text-02 | text-secondary | | Updated | +| text-01 | text-primary | | Updated | +| support-04 | support-info | | Updated | +| support-03 | support-warning | | Updated | +| support-02 | support-success | | Updated | +| support-01 | support-error | | Updated | +| skeleton-02 | skeleton-element | | Updated | +| skeleton-01 | skeleton-background | | Updated | +| selected-ui | background-selected | | Split | +| selected-ui | layer-selected-01 | layer-selected | Split | +| selected-light-ui | layer-selected-02 | layer-selected | Updated | +| overlay-01 | overlay | | Updated | +| link-02 | link-secondary | | Updated | +| link-01 | link-primary | | Updated | +| inverse-support-04 | support-info-inverse | | Updated | +| inverse-support-03 | support-warning-inverse | | Updated | +| inverse-support-02 | support-success-inverse | | Updated | +| inverse-support-01 | support-error-inverse | | Updated | +| inverse-link | link-inverse | | Updated | +| inverse-hover-ui | background-inverse-hover | | Updated | +| inverse-focus-ui | focus-inverse | | Updated | +| inverse-02 | background-inverse | | Updated | +| inverse-01 | text-inverse | | Split | +| inverse-01 | icon-inverse | | Split | +| inverse-01 | focus-inset | | Split | +| interactive-04 | interactive | | Updated | +| interactive-04 | border-interactive | | Updated | +| interactive-03 | button-tertiary | | Updated | +| interactive-02 | button-secondary | | Updated | +| interactive-01 | background-brand | | Updated | +| interactive-01 | button-primary | | Updated | +| icon-03 | icon-on-color | | Updated | +| icon-02 | icon-secondary | | Updated | +| icon-01 | icon-primary | | Updated | +| hover-ui | background-hover | | Updated | +| hover-ui | layer-hover-01 | layer-hover | Split | +| hover-ui | field-hover-01 | field-hover | Split | +| hover-ui | field-hover-02 | field-hover | Split | +| hover-tertiary | button-tertiary-hover | | Updated | +| hover-selected-ui | background-selected-hover | | Split | +| hover-selected-ui | layer-selected-hover-01 | layer-selected-hover | Split | +| hover-selected-ui | layer-accent-hover-01 | layer-accent-hover | Split | +| hover-secondary | button-secondary-hover | | Updated | +| hover-row | background-hover | | Split | +| hover-row | layer-hover-01 | | Split | +| hover-primary-text | link-primary-hover | | Updated | +| hover-primary | button-primary-hover | | Updated | +| hover-light-ui | layer-hover-02 | layer-hover | Updated | +| hover-danger | button-danger-hover | | Updated | +| highlight | highlight | | No change | +| focus | focus | | No change | +| field-02 | field-02 | field | No change | +| field-01 | field-01 | field | No change | +| disabled-03 | layer-selected-disabled | | Split | +| disabled-03 | text-on-color-disabled | | Split | +| disabled-03 | icon-on-color-disabled | | Split | +| disabled-02 | text-disabled | | Split | +| disabled-02 | icon-disabled | | Split | +| disabled-02 | button-disabled | | Split | +| disabled-01 | layer-disabled-01 | | Split | +| disabled-01 | field-disabled-01 | | Split | +| disabled-01 | border-disabled-01 | | Split | +| disabled-01 | field-disabled-02 | | Split | +| disabled-01 | border-disabled-03 | | Split | +| decorative-01 | border-subtle-02 | border-subtle | Updated | +| danger-02 | button-danger-secondary | | Updated | +| danger / danger-01 | button-danger-primary | | Updated | +| button-separator | button-separator | | No change | +| active-ui | background-active | | Split | +| active-ui | layer-active-01 | layer-active | Split | +| active-ui | layer-accent-active-01 | layer-accent-active | Split | +| active-ui | border-subtle-selected-01 | border-subtle-selected | Split | +| active-tertiary | button-tertiary-active | | Updated | +| active-secondary | button-secondary-active | | Updated | +| active-primary | button-primary-active | | Updated | +| active-light-ui | layer-active-02 | layer-active | Updated | +| active-danger | button-danger-active | | Updated | +| | border-subtle-00 | border-subtle | New | +| | layer-selected-hover-02 | layer-selected-hover | New | +| | layer-accent-02 | layer-accent | New | +| | layer-accent-hover-02 | layer-accent-hover | New | +| | layer-accent-active-02 | layer-accent-active | New | +| | border-strong-02 | border-strong | New | +| | border-subtle-selected-02 | border-subtle-selected | New | +| | layer-03 | layer | New | +| | layer-hover-03 | layer-hover | New | +| | layer-active-03 | layer-active | New | +| | layer-selected-03 | layer-selected | New | +| | layer-selected-hover-03 | layer-selected-hover | New | +| | layer-accent-03 | layer-accent | New | +| | layer-accent-hover-03 | layer-accent-hover | New | +| | layer-accent-active-03 | layer-accent-active | New | +| | field-03 | field | New | +| | field-hover-03 | field-hover | New | +| | border-strong-03 | border-strong | New | +| | border-subtle-03 | border-subtle | New | +| | border-subtle-selected-03 | border-subtle-selected | New | + +## @carbon/type + +| v10 | v11 | +| :------------------------------------ | :--------------------------------- | +| `@import '@carbon/type/scss/styles';` | `@use '@carbon/type';` | +| (alias) | `@use '@carbon/styles/scss/type';` | +| (alias) | `@use '@carbon/react/scss/type';` | + +**Changes** + +- This package now requires Dart Sass and uses Sass Modules +- Variables, mixins, and functions with the `carbon--` prefix have been renamed + +| Filename | v10 | v11 | +| ------------------------ | --------------------------------- | --------------------------------- | +| `index.scss` | | New | +| `scss/_scale.scss` | `@function carbon--get-type-size` | Removed, use `type-scale` instead | +| | `$carbon--type-scale` | `$type-scale` | +| | `@function carbon--type-scale` | `@function type-scale` | +| | `@mixin carbon--type-scale` | `@mixin type-scale` | +| | `@mixin carbon--font-size` | `@mixin font-size` | +| `scss/_font-family.scss` | `$carbon--font-families` | `$font-families` | +| | `@function carbon--font-family` | `font-family` | +| | `@mixin carbon--font-family` | `font-family` | +| | `$carbon--font-weights` | `$font-weights` | +| | `@function carbon--font-weight` | `font-weight` | +| | `@mixin carbon--font-weight` | `font-weight` | +| `scss/_prefix.scss` | | No Changes | +| `scss/_styles.scss` | `@mixin carbon--type-style` | `@mixin type-style` | +| `scss/_reset.scss` | `@mixin carbon--default-type` | `@mixin default-type` | +| | `@mixin carbon--type-reset` | `@mixin type-reset` | +| `scss/_classes.scss` | `@mixin carbon--type-classes` | `@mixin type-classes` | + +## FAQ diff --git a/docs/migration/v11.x.md b/docs/migration/v11.x.md deleted file mode 100644 index f1072583ed6b..000000000000 --- a/docs/migration/v11.x.md +++ /dev/null @@ -1,94 +0,0 @@ -# Carbon v11 - -**Note: everything in this file is a work-in-progress and will be changed.** - - - - -## Table of Contents - -- [Timeline](#timeline) -- [Updates](#updates) - - [Single-entrypoint packages](#single-entrypoint-packages) - - [`carbon-icons`](#carbon-icons) - - [Vanilla JS components](#vanilla-js-components) - - - - -## Timeline - -**Note: all dates are an estimate and can be changed** - -| Date | Release | Status | -| --------------------------- | ------------------- | ----------------- | -| Alpha release | April 15th, 2021 | Published | -| Beta release | July 22nd, 2021 | Under development | -| Release Candidate 0 release | ~1 month after beta | Not published | -| Stable release | ~1 month after rc.0 | Not published | - -We are breaking up our v11 release into several iterations to get feedback from -teams before our stable release. If you're interested in helping us out with -this process, please go through our -[Release Partner Program](https://github.com/carbon-design-system/carbon/wiki/Release-Partner-Program) -to learn more about how to participate. - -In general, all releases before the release candidate stage will be incomplete -or unstable. As we get closer to our stable release, we will cut release -candidates that will reflect our best approximation of v11 at the time of -publishing. - -During each release stage, we're looking to get feedback from teams in our -[Release Partner Program](https://github.com/carbon-design-system/carbon/wiki/Release-Partner-Program). - -## Updates - -### Single-entrypoint packages - -Starting in v11, we will prefix many of the packages we ship with the `@carbon` -scope. We will also try and consolidate packages where possible to get as close -to a one-package, one-install experience. - -- `carbon-components` -- `carbon-components-react` -- `carbon-icons` - -In v11, you will only need to install one package: `@carbon/react`. This package -will contain components, styles, and icons all bundled up in one package. - -This does not mean that all packages are now developed in the `@carbon/react` -package. Instead, we re-export packages like `@carbon/icons-react` or the new -`@carbon/styles` for you to use. - -For teams using the `carbon-components` package for styles, you can update to -`@carbon/styles` which is our standalone styles package for Sass. - -Both `carbon-components` and `carbon-components-react` will continue to work in -v11, however they are only re-exporting from `@carbon/styles` and -`@carbon/react` respectively. - -### `carbon-icons` - -The `carbon-icons` package has been archived and is no longer supported. To use -icons from the Carbon Design System, you should install the appropriate library -to use with your framework: - -- `@carbon/icons`: Vanilla JavaScript -- `@carbon/icons-react`: React -- `@carbon/icons-vue`: Vue -- `@carbon/icons-angular`: Angular -- `carbon-icons-svelte`: Svelte - -### Vanilla JS components - -For a long time now, the `carbon-components` package has shipped Vanilla -JavaScript version of components for teams to use. Starting in v11, these -components will be split out from the main package and into a -community-supported package. The Carbon team will no longer directly support -these components. - -You can continue to use the v10.x version of `carbon-components`, or use the -`TODO` package to access the Vanilla JS components. - -If you're interested in helping to maintain this package, we're currently -looking for maintainers! Please reach out to us over at: TODO. diff --git a/packages/colors/docs/sass.md b/packages/colors/docs/sass.md new file mode 100644 index 000000000000..8e3f76190226 --- /dev/null +++ b/packages/colors/docs/sass.md @@ -0,0 +1,289 @@ +# Sass + +> Sass documentation for `@carbon/colors` + +## Usage + +The `@carbon/colors` package enables you to access colors from the IBM Design +Language in Sass. You can access a color directly from the package by writing +the following: + +```scss +@use '@carbon/colors'; + +.selector { + background: colors.$blue-50; +} +``` + +For a full list of colors exported, refer to the [exports](#exports) section +below. + +In addition to individual colors, you can also access a `Map` of all colors from +the IBM Design Language using the `$colors` variable. + +```scss +@use '@carbon/colors'; + +@each $swatch, $grades in colors.$colors { + @each $grade in $grades { + // + } +} +``` + +Each key in the `$colors` map is the name of a swatch. The value of each entry +is a `Map` where the keys are the grade and the values are the color values for +the swatch at that grade. + +## Exports + +| Name | Type | +| :--------------------- | :---- | +| `$colors` | Map | +| `$black` | Color | +| `$white` | Color | +| `$black-100` | Color | +| `$blue-10` | Color | +| `$blue-20` | Color | +| `$blue-30` | Color | +| `$blue-40` | Color | +| `$blue-50` | Color | +| `$blue-60` | Color | +| `$blue-70` | Color | +| `$blue-80` | Color | +| `$blue-90` | Color | +| `$blue-100` | Color | +| `$cool-gray-10` | Color | +| `$cool-gray-20` | Color | +| `$cool-gray-30` | Color | +| `$cool-gray-40` | Color | +| `$cool-gray-50` | Color | +| `$cool-gray-60` | Color | +| `$cool-gray-70` | Color | +| `$cool-gray-80` | Color | +| `$cool-gray-90` | Color | +| `$cool-gray-100` | Color | +| `$cyan-10` | Color | +| `$cyan-20` | Color | +| `$cyan-30` | Color | +| `$cyan-40` | Color | +| `$cyan-50` | Color | +| `$cyan-60` | Color | +| `$cyan-70` | Color | +| `$cyan-80` | Color | +| `$cyan-90` | Color | +| `$cyan-100` | Color | +| `$gray-10` | Color | +| `$gray-20` | Color | +| `$gray-30` | Color | +| `$gray-40` | Color | +| `$gray-50` | Color | +| `$gray-60` | Color | +| `$gray-70` | Color | +| `$gray-80` | Color | +| `$gray-90` | Color | +| `$gray-100` | Color | +| `$green-10` | Color | +| `$green-20` | Color | +| `$green-30` | Color | +| `$green-40` | Color | +| `$green-50` | Color | +| `$green-60` | Color | +| `$green-70` | Color | +| `$green-80` | Color | +| `$green-90` | Color | +| `$green-100` | Color | +| `$magenta-10` | Color | +| `$magenta-20` | Color | +| `$magenta-30` | Color | +| `$magenta-40` | Color | +| `$magenta-50` | Color | +| `$magenta-60` | Color | +| `$magenta-70` | Color | +| `$magenta-80` | Color | +| `$magenta-90` | Color | +| `$magenta-100` | Color | +| `$orange-10` | Color | +| `$orange-20` | Color | +| `$orange-30` | Color | +| `$orange-40` | Color | +| `$orange-50` | Color | +| `$orange-60` | Color | +| `$orange-70` | Color | +| `$orange-80` | Color | +| `$orange-90` | Color | +| `$orange-100` | Color | +| `$purple-10` | Color | +| `$purple-20` | Color | +| `$purple-30` | Color | +| `$purple-40` | Color | +| `$purple-50` | Color | +| `$purple-60` | Color | +| `$purple-70` | Color | +| `$purple-80` | Color | +| `$purple-90` | Color | +| `$purple-100` | Color | +| `$red-10` | Color | +| `$red-20` | Color | +| `$red-30` | Color | +| `$red-40` | Color | +| `$red-50` | Color | +| `$red-60` | Color | +| `$red-70` | Color | +| `$red-80` | Color | +| `$red-90` | Color | +| `$red-100` | Color | +| `$teal-10` | Color | +| `$teal-20` | Color | +| `$teal-30` | Color | +| `$teal-40` | Color | +| `$teal-50` | Color | +| `$teal-60` | Color | +| `$teal-70` | Color | +| `$teal-80` | Color | +| `$teal-90` | Color | +| `$teal-100` | Color | +| `$warm-gray-10` | Color | +| `$warm-gray-20` | Color | +| `$warm-gray-30` | Color | +| `$warm-gray-40` | Color | +| `$warm-gray-50` | Color | +| `$warm-gray-60` | Color | +| `$warm-gray-70` | Color | +| `$warm-gray-80` | Color | +| `$warm-gray-90` | Color | +| `$warm-gray-100` | Color | +| `$white-0` | Color | +| `$yellow-10` | Color | +| `$yellow-20` | Color | +| `$yellow-30` | Color | +| `$yellow-40` | Color | +| `$yellow-50` | Color | +| `$yellow-60` | Color | +| `$yellow-70` | Color | +| `$yellow-80` | Color | +| `$yellow-90` | Color | +| `$yellow-100` | Color | +| `$white-hover` | Color | +| `$black-hover` | Color | +| `$blue-10-hover` | Color | +| `$blue-20-hover` | Color | +| `$blue-30-hover` | Color | +| `$blue-40-hover` | Color | +| `$blue-50-hover` | Color | +| `$blue-60-hover` | Color | +| `$blue-70-hover` | Color | +| `$blue-80-hover` | Color | +| `$blue-90-hover` | Color | +| `$blue-100-hover` | Color | +| `$cool-gray-10-hover` | Color | +| `$cool-gray-20-hover` | Color | +| `$cool-gray-30-hover` | Color | +| `$cool-gray-40-hover` | Color | +| `$cool-gray-50-hover` | Color | +| `$cool-gray-60-hover` | Color | +| `$cool-gray-70-hover` | Color | +| `$cool-gray-80-hover` | Color | +| `$cool-gray-90-hover` | Color | +| `$cool-gray-100-hover` | Color | +| `$cyan-10-hover` | Color | +| `$cyan-20-hover` | Color | +| `$cyan-30-hover` | Color | +| `$cyan-40-hover` | Color | +| `$cyan-50-hover` | Color | +| `$cyan-60-hover` | Color | +| `$cyan-70-hover` | Color | +| `$cyan-80-hover` | Color | +| `$cyan-90-hover` | Color | +| `$cyan-100-hover` | Color | +| `$gray-10-hover` | Color | +| `$gray-20-hover` | Color | +| `$gray-30-hover` | Color | +| `$gray-40-hover` | Color | +| `$gray-50-hover` | Color | +| `$gray-60-hover` | Color | +| `$gray-70-hover` | Color | +| `$gray-80-hover` | Color | +| `$gray-90-hover` | Color | +| `$gray-100-hover` | Color | +| `$green-10-hover` | Color | +| `$green-20-hover` | Color | +| `$green-30-hover` | Color | +| `$green-40-hover` | Color | +| `$green-50-hover` | Color | +| `$green-60-hover` | Color | +| `$green-70-hover` | Color | +| `$green-80-hover` | Color | +| `$green-90-hover` | Color | +| `$green-100-hover` | Color | +| `$magenta-10-hover` | Color | +| `$magenta-20-hover` | Color | +| `$magenta-30-hover` | Color | +| `$magenta-40-hover` | Color | +| `$magenta-50-hover` | Color | +| `$magenta-60-hover` | Color | +| `$magenta-70-hover` | Color | +| `$magenta-80-hover` | Color | +| `$magenta-90-hover` | Color | +| `$magenta-100-hover` | Color | +| `$orange-10-hover` | Color | +| `$orange-20-hover` | Color | +| `$orange-30-hover` | Color | +| `$orange-40-hover` | Color | +| `$orange-50-hover` | Color | +| `$orange-60-hover` | Color | +| `$orange-70-hover` | Color | +| `$orange-80-hover` | Color | +| `$orange-90-hover` | Color | +| `$orange-100-hover` | Color | +| `$purple-10-hover` | Color | +| `$purple-20-hover` | Color | +| `$purple-30-hover` | Color | +| `$purple-40-hover` | Color | +| `$purple-50-hover` | Color | +| `$purple-60-hover` | Color | +| `$purple-70-hover` | Color | +| `$purple-80-hover` | Color | +| `$purple-90-hover` | Color | +| `$purple-100-hover` | Color | +| `$red-10-hover` | Color | +| `$red-20-hover` | Color | +| `$red-30-hover` | Color | +| `$red-40-hover` | Color | +| `$red-50-hover` | Color | +| `$red-60-hover` | Color | +| `$red-70-hover` | Color | +| `$red-80-hover` | Color | +| `$red-90-hover` | Color | +| `$red-100-hover` | Color | +| `$teal-10-hover` | Color | +| `$teal-20-hover` | Color | +| `$teal-30-hover` | Color | +| `$teal-40-hover` | Color | +| `$teal-50-hover` | Color | +| `$teal-60-hover` | Color | +| `$teal-70-hover` | Color | +| `$teal-80-hover` | Color | +| `$teal-90-hover` | Color | +| `$teal-100-hover` | Color | +| `$warm-gray-10-hover` | Color | +| `$warm-gray-20-hover` | Color | +| `$warm-gray-30-hover` | Color | +| `$warm-gray-40-hover` | Color | +| `$warm-gray-50-hover` | Color | +| `$warm-gray-60-hover` | Color | +| `$warm-gray-70-hover` | Color | +| `$warm-gray-80-hover` | Color | +| `$warm-gray-90-hover` | Color | +| `$warm-gray-100-hover` | Color | +| `$yellow-10-hover` | Color | +| `$yellow-20-hover` | Color | +| `$yellow-30-hover` | Color | +| `$yellow-40-hover` | Color | +| `$yellow-50-hover` | Color | +| `$yellow-60-hover` | Color | +| `$yellow-70-hover` | Color | +| `$yellow-80-hover` | Color | +| `$yellow-90-hover` | Color | +| `$yellow-100-hover` | Color | diff --git a/packages/motion/docs/sass.md b/packages/motion/docs/sass.md new file mode 100644 index 000000000000..64f37f0f210a --- /dev/null +++ b/packages/motion/docs/sass.md @@ -0,0 +1,38 @@ +# Sass + +> Sass documentation for `@carbon/motion` + +## Usage + +The `@carbon/motion` package enables you to access motion curves and durations +built for the IBM Design Language in Sass. You can access these values directly +from the package by writing the following: + +```scss +@use '@carbon/motion'; + +.selector { + // Set `transition-timing-function` directly + @include motion.motion(standard, productive); + + // Alternatively + transition: opacity motion.motion(standard, productive); + + // Or use a duration + transition: opacity motion.$duration-fast-01; +} +``` + +## Exports + +| Name | Type | +| :---------------------- | :------- | +| `$duration-fast-01` | Duration | +| `$duration-fast-02` | Duration | +| `$duration-moderate-01` | Duration | +| `$duration-moderate-02` | Duration | +| `$duration-slow-01` | Duration | +| `$duration-slow-02` | Duration | +| `$easings` | Duration | +| `@mixin motion` | Mixin | +| `@function motion` | Mixin | From d02f94d16d7ce992a1a4428273877f35368bce48 Mon Sep 17 00:00:00 2001 From: Tanner Summers Date: Mon, 24 Jan 2022 15:09:50 -0600 Subject: [PATCH 2/2] fix(fileuploaderdropcontainer): moved input out of label to fix a11y bug (#10444) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- .../FileUploader/FileUploaderDropContainer.js | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/react/src/components/FileUploader/FileUploaderDropContainer.js b/packages/react/src/components/FileUploader/FileUploaderDropContainer.js index 72f858202b57..805ee8b6f38c 100644 --- a/packages/react/src/components/FileUploader/FileUploaderDropContainer.js +++ b/packages/react/src/components/FileUploader/FileUploaderDropContainer.js @@ -116,22 +116,22 @@ function FileUploaderDropContainer({
{labelText}
- { - evt.target.value = null; - }} - /> + { + evt.target.value = null; + }} + />
); }