diff --git a/.yarn/cache/bluebird-npm-3.1.5-c044543786-532596038c.zip b/.yarn/cache/bluebird-npm-3.1.5-c044543786-532596038c.zip deleted file mode 100644 index 361fcc8804dd..000000000000 Binary files a/.yarn/cache/bluebird-npm-3.1.5-c044543786-532596038c.zip and /dev/null differ diff --git a/config/eslint-config-carbon/package.json b/config/eslint-config-carbon/package.json index 819fddbbf967..8b2fa05c05c8 100644 --- a/config/eslint-config-carbon/package.json +++ b/config/eslint-config-carbon/package.json @@ -1,7 +1,7 @@ { "name": "eslint-config-carbon", "description": "ESLint configuration for Carbon", - "version": "2.9.0", + "version": "2.10.0-rc.0", "license": "Apache-2.0", "main": "index.js", "repository": { diff --git a/config/jest-config-carbon/package.json b/config/jest-config-carbon/package.json index 8b519e9d6257..c28d512de2af 100644 --- a/config/jest-config-carbon/package.json +++ b/config/jest-config-carbon/package.json @@ -2,7 +2,7 @@ "name": "jest-config-carbon", "private": true, "description": "Jest configuration and preset for Carbon", - "version": "0.11.0", + "version": "0.12.0-rc.0", "license": "Apache-2.0", "main": "index.js", "repository": { 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 index 7e09089099b4..3597b0d56392 100644 --- a/docs/migration/11.x-color.md +++ b/docs/migration/11.x-color.md @@ -15,118 +15,118 @@ 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. +- **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 | +| V10 token name | V11 token name | V11 Contextual token | Status | +| ------------------ | ------------------------- | ---------------------- | ---------- | +| active-danger | button-danger-active | — | Updated | +| active-light-ui | layer-active-02 | layer-active | Updated | +| active-primary | button-primary-active | — | Updated | +| active-secondary | button-secondary-active | — | Updated | +| active-tertiary | button-tertiary-active | — | Updated | +| active-ui | layer-active-01 | layer-active | Split | +| active-ui | background-active | — | Split | +| active-ui | layer-accent-active-01 | layer-accent-active | Split | +| active-ui | border-subtle-selected-01 | border-sublte-selected | Split | +| button-separator | button-separator | — | No change | +| danger | button-danger-primary | — | Deprecated | +| danger-01 | button-danger-primary | — | Updated | +| danger-02 | button-danger-secondary | — | Updated | +| decorative-01 | border-subtle-02 | border-subtle | Updated | +| disabled-01 | — | — | Deprecated | +| disabled-02 | text-disabled | — | Split | +| disabled-02 | icon-disabled | — | Split | +| disabled-02 | button-disabled | — | Split | +| disabled-02 | border-disabled | border-disabled | Split | +| disabled-03 | icon-on-color-disabled | — | Split | +| disabled-03 | layer-selected-disabled | — | Split | +| disabled-03 | text-on-color-disabled | — | Split | +| field-01 | field-01 | field | No change | +| field-02 | field-02 | field | No change | +| focus | focus | — | No change | +| highlight | highlight | — | No change | +| hover-danger | button-danger-hover | — | Updated | +| hover-light-ui | layer-hover-02 | — | Updated | +| hover-primary | button-primary-hover | — | Updated | +| hover-primary-text | link-primary-hover | — | Updated | +| hover-secondary | button-secondary-hover | — | Updated | +| hover-selected-ui | background-selected-hover | — | Split | +| hover-selected-ui | layer-accent-hover-01 | layer-accent-hover | Split | +| hover-selected-ui | layer-selected-hover-01 | layer-selected-hover | Split | +| hover-tertiary | button-tertiary-hover | — | 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 | +| icon-01 | icon-primary | — | Updated | +| icon-02 | icon-secondary | — | Updated | +| icon-03 | icon-on-color | — | Updated | +| interactive-01 | button-primary | — | Updated | +| interactive-01 | background-brand | — | Updated | +| interactive-02 | button-secondary | — | Updated | +| interactive-03 | button-tertiary | — | Updated | +| interactive-04 | border-interactive | — | Split | +| interactive-04 | interactive | — | Split | +| inverse-01 | icon-inverse | — | Split | +| inverse-01 | focus-inset | — | Split | +| inverse-01 | text-inverse | — | Split | +| inverse-02 | "background-inverse " | — | Updated | +| inverse-focus-ui | focus-inverse | — | Updated | +| inverse-hover-ui | background-inverse-hover | — | Updated | +| inverse-link | link-inverse | — | Updated | +| inverse-support-01 | support-error-inverse | — | Updated | +| inverse-support-02 | support-success-inverse | — | Updated | +| inverse-support-03 | support-warning-inverse | — | Updated | +| inverse-support-04 | support-info-inverse | — | Updated | +| link-01 | link-primary | — | Updated | +| link-02 | link-secondary | — | Updated | +| overlay-01 | overlay | — | Updated | +| selected-light-ui | layer-selected-02 | — | Updated | +| selected-ui | layer-selected-01 | layer-selected | Split | +| selected-ui | background-selected | — | Split | +| skeleton-01 | skeleton-background | — | Updated | +| skeleton-02 | skeleton-element | — | Updated | +| support-01 | support-error | — | Updated | +| support-02 | support-success | — | Updated | +| support-03 | support-warning | — | Updated | +| support-04 | support-info | — | Updated | +| text-01 | text-primary | — | Updated | +| text-02 | text-secondary | — | Updated | +| text-03 | text-placeholder | — | Updated | +| text-04 | text-on-color | — | Updated | +| text-05 | text-helper | — | Updated | +| text-error | text-error | — | Updated | +| hover-row | layer-hover-01 | layer-hover | Deprecated | +| ui-01 | layer-01 | layer | Updated | +| ui-02 | layer-02 | layer | Updated | +| ui-03 | layer-accent-01 | layer-accent | Split | +| ui-03 | border-subtle-01 | border-subtle | Split | +| ui-04 | toggle-off | — | Split | +| ui-04 | border-strong-01 | border-strong | Split | +| ui-05 | border-inverse | — | Updated | +| ui-05 | layer-selected-inverse | — | Updated | +| ui-background | background | — | Updated | +| visited-link | link-visited | — | Updated | +| brand-01 | — | — | Deprecated | +| brand-02 | — | — | Deprecated | +| brand-03 | — | — | Deprecated | +| — | border-strong-02 | border-strong | New | +| — | border-strong-03 | border-strong | New | +| — | border-subtle-00 | border-subtle | New | +| — | border-subtle-03 | border-subtle | New | +| — | border-subtle-selected-02 | border-subtle-selected | New | +| — | border-subtle-selected-03 | border-subtle-selected | New | +| — | field-03 | field | New | +| — | field-hover-03 | field-hover | New | +| — | layer-03 | layer | New | +| — | layer-active-03 | layer-active | New | +| — | layer-hover-03 | layer-hover | New | +| — | layer-selected-03 | layer-selected | New | +| — | layer-selected-hover-02 | layer-selected-hover | New | +| — | layer-selected-hover-03 | layer-selected-hover | New | +| — | layer-accent-02 | layer-accent | New | +| — | layer-accent-03 | layer-accent | New | +| — | layer-accent-active-02 | layer-accent-active | New | +| — | layer-accent-active-03 | layer-accent-active | New | +| — | layer-accent-hover-02 | layer-accent-hover | New | +| — | layer-accent-hover-03 | layer-accent-hover | 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/carbon-react/package.json b/packages/carbon-react/package.json index 385c7d0b037b..3a32a5bf1647 100644 --- a/packages/carbon-react/package.json +++ b/packages/carbon-react/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/react", "description": "React components for the Carbon Design System", - "version": "0.12.0", + "version": "0.13.0-rc.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -44,10 +44,10 @@ "dependencies": { "@carbon/feature-flags": "^0.7.0", "@carbon/icons-react": "^10.45.0", - "@carbon/styles": "^0.12.0", + "@carbon/styles": "^0.13.0-rc.0", "@carbon/telemetry": "0.0.0-alpha.6", - "carbon-components": "^10.51.0", - "carbon-components-react": "^7.51.0", + "carbon-components": "^10.52.0-rc.0", + "carbon-components-react": "^7.52.0-rc.0", "carbon-icons": "^7.0.7" }, "devDependencies": { 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/components/package.json b/packages/components/package.json index 472c6f147ba0..2bf613bbc52d 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,7 +1,7 @@ { "name": "carbon-components", "description": "The Carbon Design System is IBM’s open-source design system for products and experiences.", - "version": "10.51.0", + "version": "10.52.0-rc.0", "license": "Apache-2.0", "main": "umd/index.js", "module": "es/index.js", @@ -94,7 +94,7 @@ "babel-plugin-dev-expression": "^0.2.3", "babel-plugin-istanbul": "^6.1.1", "babel-plugin-rewire": "^1.2.0", - "bluebird": "~3.1.1", + "bluebird": "~3.7.0", "browser-sync": "^2.26.3", "browserslist-config-carbon": "^10.6.1", "carbon-components": "^9.0.0", diff --git a/packages/components/src/components/date-picker/_flatpickr.scss b/packages/components/src/components/date-picker/_flatpickr.scss index 8904d3a50fb1..0edd044f0a6d 100644 --- a/packages/components/src/components/date-picker/_flatpickr.scss +++ b/packages/components/src/components/date-picker/_flatpickr.scss @@ -211,6 +211,7 @@ cursor: pointer; transition: background-color $duration--fast-01 motion(standard, productive); fill: $icon-01; + user-select: none; &:hover { background-color: $hover-ui; 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 | diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index a1025e61ab83..c6ffd16a8873 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -3,9 +3,6 @@ exports[`Public API should only change with a semver change 1`] = ` Map { "Accordion" => Object { - "defaultProps": Object { - "align": "end", - }, "propTypes": Object { "align": Object { "args": Array [ diff --git a/packages/react/package.json b/packages/react/package.json index 0b64cedbbef8..6d79aed69369 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,7 +1,7 @@ { "name": "carbon-components-react", "description": "The Carbon Design System is IBM’s open-source design system for products and experiences.", - "version": "7.51.0", + "version": "7.52.0-rc.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -107,7 +107,7 @@ "babel-plugin-react-docgen": "^4.2.1", "babel-plugin-transform-inline-environment-variables": "^0.4.3", "browserslist-config-carbon": "^10.6.1", - "carbon-components": "^10.51.0", + "carbon-components": "^10.52.0-rc.0", "carbon-icons": "^7.0.5", "chalk": "^4.1.1", "cli-table": "^0.3.0", diff --git a/packages/react/src/components/Accordion/Accordion.js b/packages/react/src/components/Accordion/Accordion.js index 18c173e71ffa..fb8a712e97dc 100644 --- a/packages/react/src/components/Accordion/Accordion.js +++ b/packages/react/src/components/Accordion/Accordion.js @@ -9,13 +9,14 @@ import cx from 'classnames'; import { usePrefix } from '../../internal/usePrefix'; import PropTypes from 'prop-types'; import React from 'react'; +import * as FeatureFlags from '@carbon/feature-flags'; function Accordion({ - align, + align = 'end', children, className: customClassName, - disabled, - size, + disabled = false, + size = 'md', ...rest }) { const prefix = usePrefix(); @@ -34,10 +35,6 @@ function Accordion({ ); } -Accordion.defaultProps = { - align: 'end', -}; - Accordion.propTypes = { /** * Specify the alignment of the accordion heading title and chevron. @@ -60,10 +57,11 @@ Accordion.propTypes = { disabled: PropTypes.bool, /** - * Specify the size of the Accordion. Currently supports either `sm`, 'md' (default) or 'lg` as an option. - * TODO V11: remove `xl` (replaced with lg) + * Specify the size of the Accordion. Currently supports the following: */ - size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']), + size: FeatureFlags.enabled('enable-v11-release') + ? PropTypes.oneOf(['sm', 'md', 'lg']) + : PropTypes.oneOf(['sm', 'md', 'lg', 'xl']), }; export default Accordion; diff --git a/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap b/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap index 36df88277a96..42a24a17dde6 100644 --- a/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap +++ b/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap @@ -3,7 +3,7 @@ exports[`Accordion should render 1`] = `
  • ( + + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. +

    +     + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. +

    +     + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. +

    +     + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. +

    +     +     +); + +AccordionStory.storyName = 'Accordion'; + +export const Skeleton = () => ; + +Skeleton.decorators = [ + (story) =>
    {story()}
    , +]; + +const props = { + onClick: action('onClick'), + onHeadingClick: action('onHeadingClick'), +}; + +const sizes = { + 'Small (sm)': 'sm', + 'Medium (md) - default': undefined, + 'Large (lg)': 'lg', +}; + +export const Playground = () => ( + + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. +

    +     + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. +

    +     + + + + + Section 4 title (the title can be a node) + + } + {...props}> +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. +

    +     +     +); + +export const SkeletonPlayground = () => ( +
    + +
    +); 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; + }} + />
); } diff --git a/packages/react/src/components/Toggletip/__tests__/Toggletip-test.js b/packages/react/src/components/Toggletip/__tests__/Toggletip-test.js new file mode 100644 index 000000000000..e6af109c5a9e --- /dev/null +++ b/packages/react/src/components/Toggletip/__tests__/Toggletip-test.js @@ -0,0 +1,26 @@ +/** + * Copyright IBM Corp. 2016, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +describe('Toggletip', () => { + describe('accessibility', () => { + test.todo('accessibility-checker'); + test.todo('axe'); + }); + + // Usage + it.todo('should toggle visibility on click'); + it.todo('should toggle visibility on Enter and Space'); + it.todo('should close on Escape'); + it.todo('should close if an element outside of the toggletip is clicked'); + + describe('Component API', () => { + it.todo('should support custom elements with the `as` prop'); + it.todo('should support a custom class name with the `className` prop'); + it.todo('should support different alignments with the `align` prop'); + it.todo('should initially be open if `defaultOpen` is set to true'); + }); +}); diff --git a/packages/react/src/components/Toggletip/__tests__/ToggletipActions-test.js b/packages/react/src/components/Toggletip/__tests__/ToggletipActions-test.js new file mode 100644 index 000000000000..315a60eb64b4 --- /dev/null +++ b/packages/react/src/components/Toggletip/__tests__/ToggletipActions-test.js @@ -0,0 +1,12 @@ +/** + * Copyright IBM Corp. 2016, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +describe('ToggletipActions', () => { + describe('Component API', () => { + it.todo('should support a custom class name with the `className` prop'); + }); +}); diff --git a/packages/react/src/components/Toggletip/__tests__/ToggletipButton.js b/packages/react/src/components/Toggletip/__tests__/ToggletipButton.js new file mode 100644 index 000000000000..275805de040a --- /dev/null +++ b/packages/react/src/components/Toggletip/__tests__/ToggletipButton.js @@ -0,0 +1,13 @@ +/** + * Copyright IBM Corp. 2016, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +describe('ToggletipButton', () => { + describe('Component API', () => { + it.todo('should support a custom class name with the `className` prop'); + it.todo('should use the `label` prop as the label for the + ); +} + +ToggletipButton.propTypes = { + /** + * Custom children to be rendered as the content of the label + */ + children: PropTypes.node, + + /** + * Provide a custom class name to be added to the outermost node in the + * component + */ + className: PropTypes.string, + + /** + * Provide an accessible label for this button + */ + label: PropTypes.string, +}; + +/** + * `ToggletipContent` is a wrapper around `PopoverContent`. It places the + * `children` passed in as a prop inside of `PopoverContent` so that they will + * be rendered inside of the popover for this component. + */ +function ToggletipContent({ children, className: customClassName }) { + const toggletip = useToggletip(); + const prefix = usePrefix(); + return ( + +
{children}
+ + ); +} + +ToggletipContent.propTypes = { + /** + * Custom children to be rendered as the content of the label + */ + children: PropTypes.node, + + /** + * Provide a custom class name to be added to the outermost node in the + * component + */ + className: PropTypes.string, +}; + +/** + * `ToggletipActions` is a container for one or two actions present at the base + * of a toggletip. It is used for layout of these items. + */ +function ToggletipActions({ children, className: customClassName }) { + const prefix = usePrefix(); + const className = cx(`${prefix}--toggletip-actions`, customClassName); + return
{children}
; +} + +ToggletipActions.propTypes = { + /** + * Custom children to be rendered as the content of the label + */ + children: PropTypes.node, + + /** + * Provide a custom class name to be added to the outermost node in the + * component + */ + className: PropTypes.string, +}; + +export { + ToggletipLabel, + Toggletip, + ToggletipButton, + ToggletipContent, + ToggletipActions, +}; diff --git a/packages/react/src/components/Toggletip/next/Toggletip.mdx b/packages/react/src/components/Toggletip/next/Toggletip.mdx new file mode 100644 index 000000000000..2f12ca8115a3 --- /dev/null +++ b/packages/react/src/components/Toggletip/next/Toggletip.mdx @@ -0,0 +1,29 @@ +import { Preview, Props, Story } from '@storybook/addon-docs/blocks'; + +# Toggletip + +[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Toggletip) + + + + +## Table of Contents + +- [Overview](#overview) +- [Component API](#component-api) +- [Feedback](#feedback) + + + +## Overview + +## Component API + + + +## Feedback + +Help us improve this component by providing feedback, asking questions on Slack, +or updating this file on +[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/Toggletip/next/Toggletip.mdx). + diff --git a/packages/react/src/components/Toggletip/next/Toggletip.stories.js b/packages/react/src/components/Toggletip/next/Toggletip.stories.js new file mode 100644 index 000000000000..1a5f7bdc90da --- /dev/null +++ b/packages/react/src/components/Toggletip/next/Toggletip.stories.js @@ -0,0 +1,123 @@ +/** + * Copyright IBM Corp. 2016, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Information16 } from '@carbon/icons-react'; +import React from 'react'; +import { default as Button } from '../../Button'; +import { default as Link } from '../../Link'; +import { + ToggletipLabel, + Toggletip, + ToggletipButton, + ToggletipContent, + ToggletipActions, +} from '../../Toggletip'; +import mdx from './Toggletip.mdx'; + +export default { + title: 'Components/Toggletip', + component: Toggletip, + subcomponents: { + ToggletipLabel, + ToggletipButton, + ToggletipContent, + ToggletipActions, + }, + argTypes: { + as: { + table: { + disable: true, + }, + }, + children: { + table: { disable: true }, + }, + className: { + table: { + disable: true, + }, + }, + }, + parameters: { + docs: { + page: mdx, + }, + }, +}; + +export const Default = () => { + return ( +
+ Toggletip label + + + + + +

+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua. +

+ + Link action + + + + +
+ ); +}; + +const PlaygroundStory = (controls) => { + const { align } = controls; + return ( + <> + Toggletip label + + + + + +

+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua. +

+ + Link action + + + + + + ); +}; + +export const Playground = PlaygroundStory.bind({}); + +Playground.argTypes = { + align: { + options: ['top', 'bottom', 'left', 'right'], + control: { + type: 'select', + }, + }, +}; + +Playground.story = { + decorators: [ + (story) => ( +
+ {story()} +
+ ), + ], +}; diff --git a/packages/react/src/internal/useEvent.js b/packages/react/src/internal/useEvent.js index 05e817433271..fe876c7a73d3 100644 --- a/packages/react/src/internal/useEvent.js +++ b/packages/react/src/internal/useEvent.js @@ -7,7 +7,7 @@ import { useEffect, useRef } from 'react'; -export function useEvent(element, eventName, callback) { +export function useEvent(elementOrRef, eventName, callback) { const savedCallback = useRef(null); useEffect(() => { @@ -21,10 +21,33 @@ export function useEvent(element, eventName, callback) { } } + const element = elementOrRef.current ?? elementOrRef; element.addEventListener(eventName, handler); return () => { element.removeEventListener(eventName, handler); }; - }, [element, eventName]); + }, [elementOrRef, eventName]); +} + +export function useWindowEvent(eventName, callback) { + const savedCallback = useRef(null); + + useEffect(() => { + savedCallback.current = callback; + }); + + useEffect(() => { + function handler(event) { + if (savedCallback.current) { + savedCallback.current(event); + } + } + + window.addEventListener(eventName, handler); + + return () => { + window.removeEventListener(eventName, handler); + }; + }, [eventName]); } diff --git a/packages/styles/package.json b/packages/styles/package.json index 41c2d34eed89..ccb23e31e921 100644 --- a/packages/styles/package.json +++ b/packages/styles/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/styles", "description": "Styles for the Carbon Design System", - "version": "0.12.0", + "version": "0.13.0-rc.0", "license": "Apache-2.0", "repository": { "type": "git", diff --git a/packages/styles/scss/components/_index.scss b/packages/styles/scss/components/_index.scss index e9113da0e260..cca88e0e5936 100644 --- a/packages/styles/scss/components/_index.scss +++ b/packages/styles/scss/components/_index.scss @@ -51,6 +51,7 @@ @use 'text-input'; @use 'tile'; @use 'time-picker'; +@use 'toggletip'; @use 'toggle'; @use 'tooltip'; @use 'treeview'; diff --git a/packages/styles/scss/components/button/_mixins.scss b/packages/styles/scss/components/button/_mixins.scss index 951fbf595311..ccf7efa90f76 100644 --- a/packages/styles/scss/components/button/_mixins.scss +++ b/packages/styles/scss/components/button/_mixins.scss @@ -13,8 +13,11 @@ @use '../../type' as *; @use '../../utilities/component-reset'; @use '../../utilities/convert' as *; +@use '../../utilities/custom-property'; @use 'tokens' as *; +$button-focus-color: custom-property.get-var('button-focus-color', $focus); + @mixin button-base { @include component-reset.reset; @include type-style('body-short-01'); @@ -84,8 +87,8 @@ } &:focus { - border-color: $focus; - box-shadow: inset 0 0 0 $button-outline-width $focus, + border-color: $button-focus-color; + box-shadow: inset 0 0 0 $button-outline-width $button-focus-color, inset 0 0 0 $button-border-width $background; } diff --git a/packages/styles/scss/components/date-picker/_flatpickr.scss b/packages/styles/scss/components/date-picker/_flatpickr.scss index f351094c257e..675dd2ac9ef2 100644 --- a/packages/styles/scss/components/date-picker/_flatpickr.scss +++ b/packages/styles/scss/components/date-picker/_flatpickr.scss @@ -219,6 +219,7 @@ text-decoration: none; transform: scale(1, 1) #{'/*rtl: scale(-1,1)*/'}; transition: background-color $duration-fast-01 motion(standard, productive); + user-select: none; // Windows HCM fix @include high-contrast-mode('icon-fill'); diff --git a/packages/styles/scss/components/link/_link.scss b/packages/styles/scss/components/link/_link.scss index b953303ba209..508998d83be2 100644 --- a/packages/styles/scss/components/link/_link.scss +++ b/packages/styles/scss/components/link/_link.scss @@ -11,8 +11,19 @@ @use '../../theme' as *; @use '../../type'; @use '../../utilities/component-reset'; +@use '../../utilities/custom-property'; @use '../../utilities/focus-outline' as *; +$link-text-color: custom-property.get-var('link-text-color', $link-primary); +$link-hover-text-color: custom-property.get-var( + 'link-hover-text-color', + $link-primary-hover +); +$link-focus-text-color: custom-property.get-var( + 'link-focus-text-color', + $focus +); + /// Link styles /// @access public /// @group link @@ -22,13 +33,13 @@ @include type.type-style('body-short-01'); display: inline-flex; - color: $link-primary; + color: $link-text-color; outline: none; text-decoration: none; transition: color $duration-fast-01 motion(standard, productive); &:hover { - color: $link-primary-hover; + color: $link-hover-text-color; text-decoration: underline; } @@ -41,6 +52,8 @@ &:focus { @include focus-outline; + + outline-color: $link-focus-text-color; } &:visited { diff --git a/packages/styles/scss/components/select/_select.scss b/packages/styles/scss/components/select/_select.scss index 87ea73d3656d..3d012e41ab94 100644 --- a/packages/styles/scss/components/select/_select.scss +++ b/packages/styles/scss/components/select/_select.scss @@ -214,6 +214,11 @@ color: $text-primary; } + .#{$prefix}--select--inline .#{$prefix}--select-input:focus option, + .#{$prefix}--select--inline .#{$prefix}--select-input:focus optgroup { + background-color: $background; + } + .#{$prefix}--select--inline .#{$prefix}--select-input[disabled], .#{$prefix}--select--inline .#{$prefix}--select-input[disabled]:hover { background-color: $field-disabled; diff --git a/packages/styles/scss/components/toggletip/_index.scss b/packages/styles/scss/components/toggletip/_index.scss new file mode 100644 index 000000000000..89a085bf24b2 --- /dev/null +++ b/packages/styles/scss/components/toggletip/_index.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'toggletip'; +@use 'toggletip'; + +@include toggletip.toggletip; diff --git a/packages/styles/scss/components/toggletip/_toggletip.scss b/packages/styles/scss/components/toggletip/_toggletip.scss new file mode 100644 index 000000000000..ee31f6c0bdba --- /dev/null +++ b/packages/styles/scss/components/toggletip/_toggletip.scss @@ -0,0 +1,81 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '../../config' as *; +@use '../../spacing'; +@use '../../theme'; +@use '../../type'; +@use '../../utilities/button-reset'; +@use '../../utilities/convert'; +@use '../../utilities/custom-property'; +@use '../../utilities/focus-outline'; + +@mixin toggletip() { + .#{$prefix}--toggletip-label { + @include type.type-style('label-01'); + + margin-right: spacing.$spacing-03; + + color: theme.$text-secondary; + } + + .#{$prefix}--toggletip-button { + @include button-reset.reset(); + + display: flex; + align-items: center; + } + + .#{$prefix}--toggletip-button svg { + fill: theme.$icon-secondary; + } + + .#{$prefix}--toggletip-button:hover svg, + .#{$prefix}--toggletip--open .#{$prefix}--toggletip-button svg { + fill: theme.$icon-primary; + } + + .#{$prefix}--toggletip-button:focus { + @include focus-outline.focus-outline; + } + + .#{$prefix}--toggletip { + @include custom-property.declaration('popover-offset', convert.rem(13px)); + } + + .#{$prefix}--toggletip-content { + @include custom-property.declaration( + 'button-focus-color', + theme.$focus-inverse + ); + @include custom-property.declaration( + 'link-text-color', + theme.$link-inverse + ); + @include custom-property.declaration( + 'link-hover-text-color', + theme.$link-inverse + ); + @include custom-property.declaration( + 'link-focus-text-color', + theme.$focus-inverse + ); + @include type.type-style('body-short-01'); + + display: grid; + max-width: 18rem; + padding: spacing.$spacing-05; + row-gap: spacing.$spacing-05; + } + + .#{$prefix}--toggletip-actions { + display: flex; + align-items: center; + justify-content: space-between; + column-gap: spacing.$spacing-05; + } +} diff --git a/packages/upgrade/package.json b/packages/upgrade/package.json index db6b04497911..545d73fa5054 100644 --- a/packages/upgrade/package.json +++ b/packages/upgrade/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/upgrade", "description": "A tool for upgrading Carbon versions", - "version": "10.16.0", + "version": "10.17.0-rc.0", "license": "Apache-2.0", "bin": { "carbon-upgrade": "./bin/carbon-upgrade.js" diff --git a/www/package.json b/www/package.json index 888cd0498dd6..f3c8838b1739 100644 --- a/www/package.json +++ b/www/package.json @@ -1,7 +1,7 @@ { "name": "www", "private": true, - "version": "0.3.0", + "version": "0.4.0-rc.0", "license": "Apache-2.0", "repository": { "type": "git", @@ -22,7 +22,7 @@ "start": "next start" }, "dependencies": { - "@carbon/react": "^0.12.0", + "@carbon/react": "^0.13.0-rc.0", "@octokit/core": "^3.5.1", "@octokit/plugin-retry": "^3.0.9", "@octokit/plugin-throttling": "^3.5.2", diff --git a/yarn.lock b/yarn.lock index 23e9065b14d5..c90e5f8d9bef 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2067,7 +2067,7 @@ __metadata: languageName: unknown linkType: soft -"@carbon/react@^0.12.0, @carbon/react@workspace:packages/carbon-react": +"@carbon/react@^0.13.0-rc.0, @carbon/react@workspace:packages/carbon-react": version: 0.0.0-use.local resolution: "@carbon/react@workspace:packages/carbon-react" dependencies: @@ -2080,7 +2080,7 @@ __metadata: "@babel/preset-react": ^7.16.7 "@carbon/feature-flags": ^0.7.0 "@carbon/icons-react": ^10.45.0 - "@carbon/styles": ^0.12.0 + "@carbon/styles": ^0.13.0-rc.0 "@carbon/telemetry": 0.0.0-alpha.6 "@carbon/themes": ^10.49.0 "@rollup/plugin-babel": ^5.3.0 @@ -2100,8 +2100,8 @@ __metadata: babel-plugin-dev-expression: ^0.2.3 babel-preset-carbon: ^0.2.0 browserslist-config-carbon: ^10.6.1 - carbon-components: ^10.51.0 - carbon-components-react: ^7.51.0 + carbon-components: ^10.52.0-rc.0 + carbon-components-react: ^7.52.0-rc.0 carbon-icons: ^7.0.7 css-loader: ^6.5.1 fs-extra: ^10.0.0 @@ -2153,7 +2153,7 @@ __metadata: languageName: unknown linkType: soft -"@carbon/styles@^0.12.0, @carbon/styles@workspace:packages/styles": +"@carbon/styles@^0.13.0-rc.0, @carbon/styles@workspace:packages/styles": version: 0.0.0-use.local resolution: "@carbon/styles@workspace:packages/styles" dependencies: @@ -10670,20 +10670,13 @@ __metadata: languageName: node linkType: hard -"bluebird@npm:3.7.2, bluebird@npm:^3.0.5, bluebird@npm:^3.1.1, bluebird@npm:^3.3.0, bluebird@npm:^3.3.5, bluebird@npm:^3.4.1, bluebird@npm:^3.5.1, bluebird@npm:^3.5.2, bluebird@npm:^3.5.3, bluebird@npm:^3.5.4, bluebird@npm:^3.5.5": +"bluebird@npm:3.7.2, bluebird@npm:^3.0.5, bluebird@npm:^3.1.1, bluebird@npm:^3.3.0, bluebird@npm:^3.3.5, bluebird@npm:^3.4.1, bluebird@npm:^3.5.1, bluebird@npm:^3.5.2, bluebird@npm:^3.5.3, bluebird@npm:^3.5.4, bluebird@npm:^3.5.5, bluebird@npm:~3.7.0": version: 3.7.2 resolution: "bluebird@npm:3.7.2" checksum: 869417503c722e7dc54ca46715f70e15f4d9c602a423a02c825570862d12935be59ed9c7ba34a9b31f186c017c23cac6b54e35446f8353059c101da73eac22ef languageName: node linkType: hard -"bluebird@npm:~3.1.1": - version: 3.1.5 - resolution: "bluebird@npm:3.1.5" - checksum: 532596038c3d8802bc15e16407dd6c8c8b07951e17a84266e280b1f2ce90bec14a963fedd924f4c98b456ae48ad79acd2c6cfc7d87aae5262daf4402d78000c5 - languageName: node - linkType: hard - "bn.js@npm:^4.0.0, bn.js@npm:^4.1.0, bn.js@npm:^4.1.1, bn.js@npm:^4.4.0": version: 4.11.8 resolution: "bn.js@npm:4.11.8" @@ -11630,7 +11623,7 @@ __metadata: languageName: node linkType: hard -"carbon-components-react@^7.51.0, carbon-components-react@workspace:packages/react": +"carbon-components-react@^7.52.0-rc.0, carbon-components-react@workspace:packages/react": version: 0.0.0-use.local resolution: "carbon-components-react@workspace:packages/react" dependencies: @@ -11679,7 +11672,7 @@ __metadata: babel-plugin-react-docgen: ^4.2.1 babel-plugin-transform-inline-environment-variables: ^0.4.3 browserslist-config-carbon: ^10.6.1 - carbon-components: ^10.51.0 + carbon-components: ^10.52.0-rc.0 carbon-icons: ^7.0.5 chalk: ^4.1.1 classnames: 2.3.1 @@ -11766,7 +11759,7 @@ __metadata: languageName: node linkType: hard -"carbon-components@^10.51.0, carbon-components@workspace:packages/components": +"carbon-components@^10.52.0-rc.0, carbon-components@workspace:packages/components": version: 0.0.0-use.local resolution: "carbon-components@workspace:packages/components" dependencies: @@ -11796,7 +11789,7 @@ __metadata: babel-plugin-dev-expression: ^0.2.3 babel-plugin-istanbul: ^6.1.1 babel-plugin-rewire: ^1.2.0 - bluebird: ~3.1.1 + bluebird: ~3.7.0 browser-sync: ^2.26.3 browserslist-config-carbon: ^10.6.1 carbon-components: ^9.0.0 @@ -39499,7 +39492,7 @@ resolve@^2.0.0-next.3: version: 0.0.0-use.local resolution: "www@workspace:www" dependencies: - "@carbon/react": ^0.12.0 + "@carbon/react": ^0.13.0-rc.0 "@octokit/core": ^3.5.1 "@octokit/plugin-retry": ^3.0.9 "@octokit/plugin-throttling": ^3.5.2