diff --git a/docs/migration/11.x-carbon-components.md b/docs/migration/11.x-carbon-components.md index 025367f3955a..08ec191a2796 100644 --- a/docs/migration/11.x-carbon-components.md +++ b/docs/migration/11.x-carbon-components.md @@ -2,73 +2,634 @@ **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 -- Carbon now uses [Dart Sass](https://npmjs.com/package/sass) along with Sass - Modules -- File paths have been renamed to provide shorter paths and more intuitive ways - to get access to common variables, mixins, functions, and more. -- Prefixed variables, functions, and mixins have been renamed as part of our - migration to Sass Modules - -## Files - -| Filename | v11 | -| --------------------------------------------------------------- | --------------------------------------- | -| `scss/globals` | | -| `scss/globals/fonts/*` | Removed | -| `scss/globals/grid/_grid.scss` | `scss/_grid.scss` | -| `scss/globals/scss` | `scss` | -| `scss/globals/scss/vendor/*` | Removed | -| `scss/globals/scss/_colors.scss` | `scss/_colors.scss` | -| `scss/globals/scss/_component-tokens.scss` | | -| `scss/globals/scss/_css--body.scss` | | -| `scss/globals/scss/_css--font-face.scss` | | -| `scss/globals/scss/_css--helpers.scss` | | -| `scss/globals/scss/_css--reset.scss` | | -| `scss/globals/scss/_deprecate.scss` | | -| `scss/globals/scss/_feature-flags.scss` | | -| `scss/globals/scss/_functions.scss` | | -| `scss/globals/scss/_helper-classes.scss` | | -| `scss/globals/scss/_helper-mixins.scss` | | -| `scss/globals/scss/_import-once.scss` | | -| `scss/globals/scss/_keyframes.scss` | | -| `scss/globals/scss/_layer.scss` | | -| `scss/globals/scss/_layout.scss` | | -| `scss/globals/scss/_mixins.scss` | | -| [`scss/globals/scss/_motion.scss`](#scssglobalsscss_motionscss) | `scss/_motion.scss` | -| `scss/globals/scss/_spacing.scss` | | -| `scss/globals/scss/_theme-tokens.scss` | | -| `scss/globals/scss/_theme.scss` | | -| `scss/globals/scss/_tooltip.scss` | | -| `scss/globals/scss/_typography.scss` | | -| `scss/globals/scss/_vars.scss` | | -| `scss/globals/scss/styles.scss` | `/index.scss`, require package directly | -| `scss/components` | | +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) | TODO | +| [`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` + +TODO + +### `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 | -| :------------------------- | :-- | -| `$carbon--ease-in` | | -| `$carbon--ease-out` | | -| `$carbon--standard-easing` | | -| `$transition--base` | | -| `$transition--expansion` | | -| `$duration--fast-01` | | -| `$duration--fast-02` | | -| `$duration--moderate-01` | | -| `$duration--moderate-02` | | -| `$duration--slow-01` | | -| `$duration--slow-02` | | -| `@function motion` | | -| `@mixin motion` | | - -### `src/globals/scss/_theme-tokens.scss` - -| v10 | v11 | -| :---------------------------------- | :------ | -| `$data-table-heading-transform` | Removed | -| `$data-table-heading-border-bottom` | Removed | -| `$data-table-row-height` | Removed | -| `$data-table-zebra-color` | Removed | +| 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/v11.x.md b/docs/migration/v11.x.md index 0a7962f1b431..f1072583ed6b 100644 --- a/docs/migration/v11.x.md +++ b/docs/migration/v11.x.md @@ -8,9 +8,10 @@ ## Table of Contents - [Timeline](#timeline) -- [Previewing the release](#previewing-the-release) - - [Feature flags](#feature-flags) - +- [Updates](#updates) + - [Single-entrypoint packages](#single-entrypoint-packages) + - [`carbon-icons`](#carbon-icons) + - [Vanilla JS components](#vanilla-js-components) @@ -19,12 +20,12 @@ **Note: all dates are an estimate and can be changed** -| Date | Release | Status | -| --------------------------- | ---------------- | ----------------- | -| Alpha release | April 15th, 2021 | Published | -| Beta release | May 13th, 2021 | Under development | -| Release Candidate 0 release | June 10th, 2021 | Not published | -| Stable release | July 1st, 2021 | Not published | +| 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 @@ -40,68 +41,54 @@ 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). -## Previewing the release - -There are two ways to try out the v11 release of Carbon: - -- Feature flags along with the `carbon-components` and `carbon-components-react` - packages -- Using the new packages directly, like `@carbon/react` or `@carbon/styles` - -As we near the v11 release, the preference will be to use the `@carbon/react` -package. However, for the alpha and beta release, full compatibility will not be -available, so we recommend trying out new features using feature flags. - -### Feature flags - -Our team makes use of -[feature flags](https://martinfowler.com/articles/feature-toggles.html) to ship -new code in our v10 release without breaking existing usage. - -To try out features related to the v11 release, you will use the -`enable-v11-release` flag in both Sass and JavaScript. +## Updates -To enable this flag in `carbon-components`, you will need to set -`$feature-flags` before importing `carbon-components`. For example: +### Single-entrypoint packages -```scss -$feature-flags: ( - enable-v11-release: true, -); +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. -@import 'path/to/carbon'; -``` +- `carbon-components` +- `carbon-components-react` +- `carbon-icons` -To enable this flag in `carbon-components-react`, you can either set flags -directly using the `@carbon/feature-flags` package or use the `FeatureFlags` -component. +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. -**`FeatureFlags`** +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. -```jsx -import { unstable_FeatureFlags as FeatureFlags } from 'carbon-components-react'; +For teams using the `carbon-components` package for styles, you can update to +`@carbon/styles` which is our standalone styles package for Sass. -render( - - - -); -``` +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/feature-flags`** +### `carbon-icons` -First, create a file called `feature-flags.js` and include the following: +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: -```js -import * as FeatureFlags from '@carbon/feature-flags'; +- `@carbon/icons`: Vanilla JavaScript +- `@carbon/icons-react`: React +- `@carbon/icons-vue`: Vue +- `@carbon/icons-angular`: Angular +- `carbon-icons-svelte`: Svelte -FeatureFlags.enable('enable-v11-release'); -``` +### Vanilla JS components -Next, bring in this file as the first import in your project: +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. -```js -import './feature-flags'; +You can continue to use the v10.x version of `carbon-components`, or use the +`TODO` package to access the Vanilla JS components. -// Import feature flags before any of your application code -``` +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/.storybook/styles.scss b/packages/carbon-react/.storybook/styles.scss index cb2c6a9b733c..8187462b27e5 100644 --- a/packages/carbon-react/.storybook/styles.scss +++ b/packages/carbon-react/.storybook/styles.scss @@ -9,19 +9,13 @@ $feature-flags: ( enable-v11-release: true, ); -@use "~@ibm/plex/default" as sans; -@use "~@ibm/plex/mono"; -@use "~@ibm/plex/arabic"; - -@use '../index.scss' as styles; +@use '../index.scss' as styles with ( + $css--font-face: true, + $css--plex-arabic: true, +); @use '../scss/components/button'; @use '../scss/components/tag'; -// For now, including all weights for testing -@include arabic.all; -@include sans.all; -@include mono.all; - :root { @include styles.theme(styles.$white, button.$white, tag.$white); } diff --git a/packages/carbon-react/.storybook/theme.js b/packages/carbon-react/.storybook/theme.js index 206036aaabce..90f89efc677b 100644 --- a/packages/carbon-react/.storybook/theme.js +++ b/packages/carbon-react/.storybook/theme.js @@ -33,8 +33,9 @@ export default create({ appBorderRadius: 0, // Typography - fontBase: '"IBM Plex Sans", sans-serif', - fontCode: '"IBM Plex Mono", monospace', + fontBase: "'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif", + fontCode: + "'IBM Plex Mono', Menlo, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", // Text colors textColor: text01, diff --git a/packages/carbon-react/README.md b/packages/carbon-react/README.md index d6f98ff1e3f1..8d33d6a083de 100644 --- a/packages/carbon-react/README.md +++ b/packages/carbon-react/README.md @@ -18,14 +18,30 @@ instead: yarn add @carbon/react ``` -## Usage +This package requires [Dart Sass](http://npmjs.com/package/sass) in order to +compile styles. + +If you're new to Sass, or are wondering how to configure Sass for your project, +we recommend checking out the following resources and links: + +- [Sass Basics](https://sass-lang.com/guide) +- [Webpack with Sass](https://webpack.js.org/loaders/sass-loader/) +- [Next.js with Sass](https://nextjs.org/docs/basic-features/built-in-css-support#sass-support) +- [Create React App with Sass](https://create-react-app.dev/docs/adding-a-sass-stylesheet/) +- [Parcel with Sass](https://v2.parceljs.org/languages/sass/) +- [Vite with Sass](https://vitejs.dev/guide/features.html#css-pre-processors) +- [Snowpack with Sass](https://www.snowpack.dev/guides/sass/) -**Note: this package is unstable and will change before it's 1.0 release** +Once you get Sass up and running in your project, configure Sass to include +`node_modules` in its `includePaths` option. For more information, checkout the +[configuration](../styles/docs/sass.md#configuration) section in our Sass docs. + +## Usage -You can use the `@carbon/react` to bring in components, icons, and styles from -the Carbon Design System. +The `@carbon/react` package provides components and icons for the Carbon Design +System. -To include a component, you can import it: +To use a component, you can import it directly from the package: ```jsx import { Button } from '@carbon/react'; @@ -35,8 +51,25 @@ function MyComponent() { } ``` -To include an icon, use the `@carbon/react/icons` entrypoint and import it the -same way you would import a component: +To include the styles for a specific component, you can either import all the +styles from the project or include the styles for a specific component: + +```scss +// Bring in all the styles for Carbon +@use '@carbon/react'; + +// Preferred: bring in the styles for one component +@use '@carbon/react/scss/components/button'; +``` + +For a full list of components available, checkout our +[Storybook](https://carbon-react-next.netlify.app/). + +### Icons + +The `@carbon/react` package also provides icon components that you can include +in your project. You can import these icon components from the +`@carbon/react/icons` entrypoint: ```jsx import { Add } from '@carbon/react/icons'; @@ -46,21 +79,15 @@ function MyComponent() { } ``` -For styles, you can bring them in using Sass Modules: - -```jsx -@use '@carbon/react'; -``` - -Note: you will need to configure Sass in order to correctly find modules in your -`node_modules`. Follow [this guide](./docs/sass.md#configuration) to make sure -your project is setup correctly. +For a full list of icons available, checkout our +[website](https://www.carbondesignsystem.com/guidelines/icons/library/). ## 📖 API Documentation If you're looking for `@carbon/react` API documentation, check out: -- [Sass](./docs/sass.md) +- [Storybook](https://carbon-react-next.netlify.app/) +- [Icon Library](https://www.carbondesignsystem.com/guidelines/icons/library/). ## 🙌 Contributing diff --git a/packages/carbon-react/docs/sass.md b/packages/carbon-react/docs/sass.md deleted file mode 100644 index fb3458e3d81c..000000000000 --- a/packages/carbon-react/docs/sass.md +++ /dev/null @@ -1,109 +0,0 @@ -# Sass - - - - -## Table of Contents - -- [Overview](#overview) -- [Configuration](#configuration) - - - - -## Overview - -The Carbon Design System requires [Dart Sass](http://npmjs.com/package/sass) to -compile the styles for components. If you're running into issues where the -styles from Carbon are not compiling, or you see `@use` rules in your code not -being compiled by Sass, make sure to first follow the -[configuration](#configuration) section below. - -If you're still running into issues with `@use` rules not compiling, most likely -you are using Node Sass in your project. To verify if this is the case, you can -provide options to tools like `sass-loader` in Webpack to specify the Sass -implementation that you'd like to use. - -For example, this is how you would configure `sass-loader` to use the `sass` -implementation. This normally isn't required, but can help out when running into -the issues mentioned above. - -```js -{ - loader: 'sass-loader', - options: { - implementation: require('sass'), - sassOptions: { - includePaths: ['node_modules'], - }, - }, -} -``` - -## Configuration - -You will need to configure Sass to be able to lookup packages from your -`node_modules` folder. To do this, use the `includePaths` option and set its -value to an array of locations where Sass should look to find `node_modules` -folders. - -For most teams, this configuration will look like: - -```json -{ - "includePaths": ["node_modules"] -} -``` - -For bundler specific solutions, check out the sections below for your bundler of -choice. If you can't find what you're looking for, please make an -[issue](https://github.com/carbon-design-system/carbon/issues/new/choose) and -we'll try to get instructions for it added! - -### `sass-loader` - -[Link](https://www.npmjs.com/package/sass-loader) - -Update your `webpack.config.js` that uses `sass-loader` with the following -options passed into `sassOptions`: - -```js -{ - loader: 'sass-loader', - options: { - sassOptions: { - includePaths: ['node_modules'], - }, - }, -} -``` - -### Parcel - -[Link](https://www.npmjs.com/package/parcel) - -Create a `.sassrc` file with the following configuration: - -```json -{ - "includePaths": ["node_modules"] -} -``` - -### Vite - -[Link](https://vitejs.dev/) - -Create a `vite.config.js` file with the following configuration: - -```js -export default { - css: { - preprocessorOptions: { - scss: { - includePaths: ['node_modules'], - }, - }, - }, -}; -``` diff --git a/packages/carbon-react/index.scss b/packages/carbon-react/index.scss index 377b5839ac9c..c23642ddbeb3 100644 --- a/packages/carbon-react/index.scss +++ b/packages/carbon-react/index.scss @@ -5,7 +5,4 @@ // LICENSE file in the root directory of this source tree. // -@forward '@carbon/styles' with ( - $css--font-face: false, - $css--default-type: false, -); +@forward '@carbon/styles'; diff --git a/packages/carbon-react/package.json b/packages/carbon-react/package.json index bee51e3e44f9..626b061dfeb3 100644 --- a/packages/carbon-react/package.json +++ b/packages/carbon-react/package.json @@ -1,8 +1,7 @@ { "name": "@carbon/react", - "private": true, "description": "React components for the Carbon Design System", - "version": "0.8.0", + "version": "0.1.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -28,6 +27,9 @@ "components", "react" ], + "publishConfig": { + "access": "public" + }, "scripts": { "build": "yarn clean && node tasks/build.js", "clean": "rimraf es lib", @@ -42,9 +44,8 @@ "dependencies": { "@carbon/feature-flags": "^0.5.0", "@carbon/icons-react": "^10.36.0", - "@carbon/styles": "^0.11.0", + "@carbon/styles": "^0.1.0", "@carbon/telemetry": "0.0.0-alpha.6", - "@ibm/plex": "6.0.0-next.6", "carbon-components-react": "^7.40.0" }, "devDependencies": { @@ -55,7 +56,6 @@ "@babel/plugin-transform-react-constant-elements": "^7.14.5", "@babel/preset-env": "^7.14.7", "@babel/preset-react": "^7.14.5", - "@carbon/styles": "^0.11.0-rc.0", "@carbon/themes": "^10.39.0", "@rollup/plugin-babel": "^5.3.0", "@rollup/plugin-commonjs": "^18.0.0", @@ -71,6 +71,7 @@ "babel-preset-carbon": "^0.1.0", "browserslist-config-carbon": "^10.6.1", "css-loader": "^5.2.4", + "fs-extra": "^10.0.0", "mini-css-extract-plugin": "^1.6.0", "postcss": "^8.2.14", "postcss-custom-properties": "^11.0.0", diff --git a/packages/carbon-react/scss/_breakpoint.scss b/packages/carbon-react/scss/_breakpoint.scss new file mode 100644 index 000000000000..c213c5e02609 --- /dev/null +++ b/packages/carbon-react/scss/_breakpoint.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/breakpoint'; diff --git a/packages/carbon-react/scss/_colors.scss b/packages/carbon-react/scss/_colors.scss index cab5fc5aaf12..b3c70bfe6b21 100644 --- a/packages/carbon-react/scss/_colors.scss +++ b/packages/carbon-react/scss/_colors.scss @@ -1,3 +1,4 @@ +// Code generated by @carbon/react. DO NOT EDIT. // // Copyright IBM Corp. 2018, 2018 // diff --git a/packages/carbon-react/scss/_config.scss b/packages/carbon-react/scss/_config.scss new file mode 100644 index 000000000000..ec34f7f8691e --- /dev/null +++ b/packages/carbon-react/scss/_config.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/config'; diff --git a/packages/carbon-react/scss/_feature-flags.scss b/packages/carbon-react/scss/_feature-flags.scss new file mode 100644 index 000000000000..5c6d5ca1c1d4 --- /dev/null +++ b/packages/carbon-react/scss/_feature-flags.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/feature-flags'; diff --git a/packages/carbon-react/scss/_grid.scss b/packages/carbon-react/scss/_grid.scss new file mode 100644 index 000000000000..a8bce3987100 --- /dev/null +++ b/packages/carbon-react/scss/_grid.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/grid'; diff --git a/packages/carbon-react/scss/_motion.scss b/packages/carbon-react/scss/_motion.scss new file mode 100644 index 000000000000..950632aa61f3 --- /dev/null +++ b/packages/carbon-react/scss/_motion.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/motion'; diff --git a/packages/carbon-react/scss/_reset.scss b/packages/carbon-react/scss/_reset.scss new file mode 100644 index 000000000000..a24d8984d52d --- /dev/null +++ b/packages/carbon-react/scss/_reset.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/reset'; diff --git a/packages/carbon-react/scss/_spacing.scss b/packages/carbon-react/scss/_spacing.scss new file mode 100644 index 000000000000..042bedcc0786 --- /dev/null +++ b/packages/carbon-react/scss/_spacing.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/spacing'; diff --git a/packages/carbon-react/scss/_theme.scss b/packages/carbon-react/scss/_theme.scss new file mode 100644 index 000000000000..a1b1880ebb53 --- /dev/null +++ b/packages/carbon-react/scss/_theme.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/theme'; diff --git a/packages/carbon-react/scss/_themes.scss b/packages/carbon-react/scss/_themes.scss new file mode 100644 index 000000000000..77e290f36b7d --- /dev/null +++ b/packages/carbon-react/scss/_themes.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/themes'; diff --git a/packages/carbon-react/scss/_type.scss b/packages/carbon-react/scss/_type.scss new file mode 100644 index 000000000000..be5d1dcd9dea --- /dev/null +++ b/packages/carbon-react/scss/_type.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/type'; diff --git a/packages/carbon-react/scss/_zone.scss b/packages/carbon-react/scss/_zone.scss new file mode 100644 index 000000000000..aadd90dee847 --- /dev/null +++ b/packages/carbon-react/scss/_zone.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/zone'; diff --git a/packages/carbon-react/scss/components/accordion/_index.scss b/packages/carbon-react/scss/components/accordion/_index.scss new file mode 100644 index 000000000000..c8e542c8b229 --- /dev/null +++ b/packages/carbon-react/scss/components/accordion/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/components/accordion'; diff --git a/packages/carbon-react/scss/components/breadcrumb/_index.scss b/packages/carbon-react/scss/components/breadcrumb/_index.scss new file mode 100644 index 000000000000..bfaf7cbfaefc --- /dev/null +++ b/packages/carbon-react/scss/components/breadcrumb/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/components/breadcrumb'; diff --git a/packages/carbon-react/scss/components/_button.scss b/packages/carbon-react/scss/components/button/_index.scss similarity index 82% rename from packages/carbon-react/scss/components/_button.scss rename to packages/carbon-react/scss/components/button/_index.scss index 32dc20db3573..ce0f12f72a2f 100644 --- a/packages/carbon-react/scss/components/_button.scss +++ b/packages/carbon-react/scss/components/button/_index.scss @@ -1,3 +1,4 @@ +// Code generated by @carbon/react. DO NOT EDIT. // // Copyright IBM Corp. 2018, 2018 // diff --git a/packages/carbon-react/scss/components/checkbox/_index.scss b/packages/carbon-react/scss/components/checkbox/_index.scss new file mode 100644 index 000000000000..90a7e29b4d80 --- /dev/null +++ b/packages/carbon-react/scss/components/checkbox/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/components/checkbox'; diff --git a/packages/carbon-react/scss/components/code-snippet/_index.scss b/packages/carbon-react/scss/components/code-snippet/_index.scss new file mode 100644 index 000000000000..042347845ebc --- /dev/null +++ b/packages/carbon-react/scss/components/code-snippet/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/components/code-snippet'; diff --git a/packages/carbon-react/scss/components/content-switcher/_index.scss b/packages/carbon-react/scss/components/content-switcher/_index.scss new file mode 100644 index 000000000000..a556b5a77259 --- /dev/null +++ b/packages/carbon-react/scss/components/content-switcher/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/components/content-switcher'; diff --git a/packages/carbon-react/scss/components/copy-button/_index.scss b/packages/carbon-react/scss/components/copy-button/_index.scss new file mode 100644 index 000000000000..db49d102e235 --- /dev/null +++ b/packages/carbon-react/scss/components/copy-button/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/components/copy-button'; diff --git a/packages/carbon-react/scss/components/data-table/_index.scss b/packages/carbon-react/scss/components/data-table/_index.scss new file mode 100644 index 000000000000..dbb7651ed708 --- /dev/null +++ b/packages/carbon-react/scss/components/data-table/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/components/data-table'; diff --git a/packages/carbon-react/scss/components/date-picker/_index.scss b/packages/carbon-react/scss/components/date-picker/_index.scss new file mode 100644 index 000000000000..022867b18fad --- /dev/null +++ b/packages/carbon-react/scss/components/date-picker/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/components/date-picker'; diff --git a/packages/carbon-react/scss/components/file-uploader/_index.scss b/packages/carbon-react/scss/components/file-uploader/_index.scss new file mode 100644 index 000000000000..2147e2019db4 --- /dev/null +++ b/packages/carbon-react/scss/components/file-uploader/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/components/file-uploader'; diff --git a/packages/carbon-react/scss/components/form/_index.scss b/packages/carbon-react/scss/components/form/_index.scss new file mode 100644 index 000000000000..c0c810ef5e1e --- /dev/null +++ b/packages/carbon-react/scss/components/form/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/components/form'; diff --git a/packages/carbon-react/scss/components/inline-loading/_index.scss b/packages/carbon-react/scss/components/inline-loading/_index.scss new file mode 100644 index 000000000000..98a7cf537ff5 --- /dev/null +++ b/packages/carbon-react/scss/components/inline-loading/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/components/inline-loading'; diff --git a/packages/carbon-react/scss/components/link/_index.scss b/packages/carbon-react/scss/components/link/_index.scss new file mode 100644 index 000000000000..823f21ce7867 --- /dev/null +++ b/packages/carbon-react/scss/components/link/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/components/link'; diff --git a/packages/carbon-react/scss/components/list/_index.scss b/packages/carbon-react/scss/components/list/_index.scss new file mode 100644 index 000000000000..c6cd81ee947d --- /dev/null +++ b/packages/carbon-react/scss/components/list/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/components/list'; diff --git a/packages/carbon-react/scss/components/loading/_index.scss b/packages/carbon-react/scss/components/loading/_index.scss new file mode 100644 index 000000000000..6c141da2486f --- /dev/null +++ b/packages/carbon-react/scss/components/loading/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/components/loading'; diff --git a/packages/carbon-react/scss/components/menu/_index.scss b/packages/carbon-react/scss/components/menu/_index.scss new file mode 100644 index 000000000000..1da729be03d1 --- /dev/null +++ b/packages/carbon-react/scss/components/menu/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/components/menu'; diff --git a/packages/carbon-react/scss/components/modal/_index.scss b/packages/carbon-react/scss/components/modal/_index.scss new file mode 100644 index 000000000000..6b4e38c559bc --- /dev/null +++ b/packages/carbon-react/scss/components/modal/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/components/modal'; diff --git a/packages/carbon-react/scss/components/notification/_index.scss b/packages/carbon-react/scss/components/notification/_index.scss new file mode 100644 index 000000000000..5bc05d12d838 --- /dev/null +++ b/packages/carbon-react/scss/components/notification/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/components/notification'; diff --git a/packages/carbon-react/scss/components/number-input/_index.scss b/packages/carbon-react/scss/components/number-input/_index.scss new file mode 100644 index 000000000000..c5dc36fd0baf --- /dev/null +++ b/packages/carbon-react/scss/components/number-input/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/components/number-input'; diff --git a/packages/carbon-react/scss/components/overflow-menu/_index.scss b/packages/carbon-react/scss/components/overflow-menu/_index.scss new file mode 100644 index 000000000000..a5526ea5e1e7 --- /dev/null +++ b/packages/carbon-react/scss/components/overflow-menu/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/components/overflow-menu'; diff --git a/packages/carbon-react/scss/components/pagination-nav/_index.scss b/packages/carbon-react/scss/components/pagination-nav/_index.scss new file mode 100644 index 000000000000..fdd706eefffd --- /dev/null +++ b/packages/carbon-react/scss/components/pagination-nav/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/components/pagination-nav'; diff --git a/packages/carbon-react/scss/components/pagination/_index.scss b/packages/carbon-react/scss/components/pagination/_index.scss new file mode 100644 index 000000000000..679f8cf98073 --- /dev/null +++ b/packages/carbon-react/scss/components/pagination/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/components/pagination'; diff --git a/packages/carbon-react/scss/components/progress-indicator/_index.scss b/packages/carbon-react/scss/components/progress-indicator/_index.scss new file mode 100644 index 000000000000..e433914c55aa --- /dev/null +++ b/packages/carbon-react/scss/components/progress-indicator/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/components/progress-indicator'; diff --git a/packages/carbon-react/scss/components/radio-button/_index.scss b/packages/carbon-react/scss/components/radio-button/_index.scss new file mode 100644 index 000000000000..ef9ded9cc2f2 --- /dev/null +++ b/packages/carbon-react/scss/components/radio-button/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/components/radio-button'; diff --git a/packages/carbon-react/scss/components/search/_index.scss b/packages/carbon-react/scss/components/search/_index.scss new file mode 100644 index 000000000000..995d3cc41162 --- /dev/null +++ b/packages/carbon-react/scss/components/search/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/components/search'; diff --git a/packages/carbon-react/scss/components/select/_index.scss b/packages/carbon-react/scss/components/select/_index.scss new file mode 100644 index 000000000000..c995c43d3199 --- /dev/null +++ b/packages/carbon-react/scss/components/select/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/components/select'; diff --git a/packages/carbon-react/scss/components/slider/_index.scss b/packages/carbon-react/scss/components/slider/_index.scss new file mode 100644 index 000000000000..807bb5df0e31 --- /dev/null +++ b/packages/carbon-react/scss/components/slider/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/components/slider'; diff --git a/packages/carbon-react/scss/components/structured-list/_index.scss b/packages/carbon-react/scss/components/structured-list/_index.scss new file mode 100644 index 000000000000..8a37a3291cad --- /dev/null +++ b/packages/carbon-react/scss/components/structured-list/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/components/structured-list'; diff --git a/packages/carbon-react/scss/components/tabs/_index.scss b/packages/carbon-react/scss/components/tabs/_index.scss new file mode 100644 index 000000000000..0e27f9f33f7e --- /dev/null +++ b/packages/carbon-react/scss/components/tabs/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/components/tabs'; diff --git a/packages/carbon-react/scss/components/_tag.scss b/packages/carbon-react/scss/components/tag/_index.scss similarity index 82% rename from packages/carbon-react/scss/components/_tag.scss rename to packages/carbon-react/scss/components/tag/_index.scss index eb889113ae5a..4040cbfab5b6 100644 --- a/packages/carbon-react/scss/components/_tag.scss +++ b/packages/carbon-react/scss/components/tag/_index.scss @@ -1,3 +1,4 @@ +// Code generated by @carbon/react. DO NOT EDIT. // // Copyright IBM Corp. 2018, 2018 // diff --git a/packages/carbon-react/scss/components/text-area/_index.scss b/packages/carbon-react/scss/components/text-area/_index.scss new file mode 100644 index 000000000000..78a0efd0225a --- /dev/null +++ b/packages/carbon-react/scss/components/text-area/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/components/text-area'; diff --git a/packages/carbon-react/scss/components/text-input/_index.scss b/packages/carbon-react/scss/components/text-input/_index.scss new file mode 100644 index 000000000000..8d5b65023127 --- /dev/null +++ b/packages/carbon-react/scss/components/text-input/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/components/text-input'; diff --git a/packages/carbon-react/scss/components/tile/_index.scss b/packages/carbon-react/scss/components/tile/_index.scss new file mode 100644 index 000000000000..50c044d12446 --- /dev/null +++ b/packages/carbon-react/scss/components/tile/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/components/tile'; diff --git a/packages/carbon-react/scss/components/time-picker/_index.scss b/packages/carbon-react/scss/components/time-picker/_index.scss new file mode 100644 index 000000000000..11ac9bf2861e --- /dev/null +++ b/packages/carbon-react/scss/components/time-picker/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/components/time-picker'; diff --git a/packages/carbon-react/scss/components/toggle/_index.scss b/packages/carbon-react/scss/components/toggle/_index.scss new file mode 100644 index 000000000000..860643b5dbef --- /dev/null +++ b/packages/carbon-react/scss/components/toggle/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/components/toggle'; diff --git a/packages/carbon-react/scss/components/tooltip/_index.scss b/packages/carbon-react/scss/components/tooltip/_index.scss new file mode 100644 index 000000000000..45d173aaf991 --- /dev/null +++ b/packages/carbon-react/scss/components/tooltip/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/components/tooltip'; diff --git a/packages/carbon-react/scss/components/treeview/_index.scss b/packages/carbon-react/scss/components/treeview/_index.scss new file mode 100644 index 000000000000..9a45e97d3d25 --- /dev/null +++ b/packages/carbon-react/scss/components/treeview/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/components/treeview'; diff --git a/packages/carbon-react/scss/components/ui-shell/_index.scss b/packages/carbon-react/scss/components/ui-shell/_index.scss new file mode 100644 index 000000000000..8a026592e7a9 --- /dev/null +++ b/packages/carbon-react/scss/components/ui-shell/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/scss/components/ui-shell'; diff --git a/packages/carbon-react/src/components/Grid/Grid.stories.scss b/packages/carbon-react/src/components/Grid/Grid.stories.scss index 898520b21692..bcc48e5d4756 100644 --- a/packages/carbon-react/src/components/Grid/Grid.stories.scss +++ b/packages/carbon-react/src/components/Grid/Grid.stories.scss @@ -2,12 +2,6 @@ @import '~carbon-components/scss/globals/scss/colors'; @import '~carbon-components/scss/globals/scss/typography'; -p { - @include type-style('body-short-02'); - - margin-top: $spacing-05; -} - // Grid modes .bx--css-grid { background-color: $blue-20; @@ -18,7 +12,7 @@ p { @include type-style('code-02'); } -p:first-of-type:not(.bx--progress-label) { +.bx--css-grid p:first-of-type { //messing up progress indicator stories margin-top: 0; } diff --git a/packages/carbon-react/tasks/build-styles.js b/packages/carbon-react/tasks/build-styles.js new file mode 100644 index 000000000000..1d6b54fd8331 --- /dev/null +++ b/packages/carbon-react/tasks/build-styles.js @@ -0,0 +1,514 @@ +/** + * 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. + */ + +'use strict'; + +const fs = require('fs-extra'); +const path = require('path'); + +async function build() { + const styles = { + type: 'directory', + filepath: 'scss', + files: [ + { + type: 'file', + filepath: '_breakpoint.scss', + }, + { + type: 'file', + filepath: '_colors.scss', + }, + { + type: 'file', + filepath: '_config.scss', + }, + { + type: 'file', + filepath: '_feature-flags.scss', + }, + { + type: 'file', + filepath: '_grid.scss', + }, + { + type: 'file', + filepath: '_motion.scss', + }, + { + type: 'file', + filepath: '_reset.scss', + }, + { + type: 'file', + filepath: '_spacing.scss', + }, + { + type: 'file', + filepath: '_theme.scss', + }, + { + type: 'file', + filepath: '_themes.scss', + }, + { + type: 'file', + filepath: '_type.scss', + }, + { + type: 'file', + filepath: '_zone.scss', + }, + { + type: 'directory', + filepath: 'components', + files: [ + { + type: 'directory', + filepath: 'accordion', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + { + type: 'directory', + filepath: 'breadcrumb', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + { + type: 'directory', + filepath: 'button', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + { + type: 'directory', + filepath: 'checkbox', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + { + type: 'directory', + filepath: 'code-snippet', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + { + type: 'directory', + filepath: 'content-switcher', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + { + type: 'directory', + filepath: 'copy-button', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + { + type: 'directory', + filepath: 'data-table', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + { + type: 'directory', + filepath: 'date-picker', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + { + type: 'directory', + filepath: 'file-uploader', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + { + type: 'directory', + filepath: 'form', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + { + type: 'directory', + filepath: 'inline-loading', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + { + type: 'directory', + filepath: 'link', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + { + type: 'directory', + filepath: 'list', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + { + type: 'directory', + filepath: 'loading', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + { + type: 'directory', + filepath: 'menu', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + { + type: 'directory', + filepath: 'modal', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + { + type: 'directory', + filepath: 'notification', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + { + type: 'directory', + filepath: 'number-input', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + { + type: 'directory', + filepath: 'overflow-menu', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + { + type: 'directory', + filepath: 'pagination', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + { + type: 'directory', + filepath: 'pagination-nav', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + { + type: 'directory', + filepath: 'progress-indicator', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + { + type: 'directory', + filepath: 'radio-button', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + { + type: 'directory', + filepath: 'search', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + { + type: 'directory', + filepath: 'select', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + { + type: 'directory', + filepath: 'slider', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + { + type: 'directory', + filepath: 'structured-list', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + { + type: 'directory', + filepath: 'tabs', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + { + type: 'directory', + filepath: 'tag', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + { + type: 'directory', + filepath: 'text-area', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + { + type: 'directory', + filepath: 'text-input', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + { + type: 'directory', + filepath: 'tile', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + { + type: 'directory', + filepath: 'time-picker', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + { + type: 'directory', + filepath: 'toggle', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + { + type: 'directory', + filepath: 'tooltip', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + { + type: 'directory', + filepath: 'treeview', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + { + type: 'directory', + filepath: 'ui-shell', + files: [ + { + type: 'file', + filepath: '_index.scss', + }, + ], + }, + ], + }, + ], + }; + const files = collect(styles); + + await Promise.all( + files.map(async (file) => { + const filepath = path.resolve(__dirname, '..', file.relativePath); + await fs.ensureFile(filepath); + await fs.writeFile( + filepath, + `// Code generated by @carbon/react. DO NOT EDIT. +// +// 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 '@carbon/styles/${file.importPath}'; +` + ); + }) + ); +} + +function collect(node, directory = '') { + if (node.type === 'directory') { + const context = path.join(directory, node.filepath); + return node.files.flatMap((node) => { + return collect(node, context); + }); + } + + if (node.type === 'file') { + // The location where this file will live in the `scss` folder + const relativePath = path.join(directory, node.filepath); + // The path used for the `@forward` rule in the file itself + let importPath = ''; + + // If we ahve an `_index.scss` entrypoint, we can re-export from the + // directory itself + if (node.filepath === '_index.scss') { + importPath = path.dirname(relativePath); + } else { + // Otherwise, let's drop the leading `_` and trailing `.scss` from the + // file name to get the import + const basename = node.filepath.replace(/^_/, '').replace(/\.scss$/, ''); + importPath = path.join(directory, basename); + } + + return { + relativePath, + importPath, + }; + } + + throw new Error(`Unknown node type: ${node.type}`); +} + +build().catch((error) => { + console.log(error); + process.exit(1); +}); diff --git a/packages/cli/src/commands/sync/readme.js b/packages/cli/src/commands/sync/readme.js index 1d9233f9ccc9..a3c4787a2b3e 100644 --- a/packages/cli/src/commands/sync/readme.js +++ b/packages/cli/src/commands/sync/readme.js @@ -17,6 +17,7 @@ const monorepo = require('./remark/remark-monorepo'); const packageDenyList = new Set([ 'carbon-components', 'carbon-components-react', + '@carbon/react', '@carbon/sketch', '@carbon/styles', ]); diff --git a/packages/components/src/components/data-table/_data-table-sort.scss b/packages/components/src/components/data-table/_data-table-sort.scss index c2af534cd619..58204bbb6d2a 100644 --- a/packages/components/src/components/data-table/_data-table-sort.scss +++ b/packages/components/src/components/data-table/_data-table-sort.scss @@ -40,6 +40,7 @@ color: $text-primary; font: inherit; line-height: 1; + text-align: left; transition: background-color $duration--fast-01 motion(entrance, productive), outline $duration--fast-01 motion(entrance, productive); } diff --git a/packages/grid/examples/css-grid/.yarn/install-state.gz b/packages/grid/examples/css-grid/.yarn/install-state.gz index 29d82e4aa782..bea3c38e3654 100644 Binary files a/packages/grid/examples/css-grid/.yarn/install-state.gz and b/packages/grid/examples/css-grid/.yarn/install-state.gz differ diff --git a/packages/grid/examples/css-grid/package.json b/packages/grid/examples/css-grid/package.json index bfbf08cdcd38..ad132b2cec5d 100644 --- a/packages/grid/examples/css-grid/package.json +++ b/packages/grid/examples/css-grid/package.json @@ -9,7 +9,6 @@ "@carbon/colors": "link:../../../colors", "@carbon/grid": "link:../../", "carbon-components": "link:../../../components", - "carbon-components-react": "link:../../../react", "next": "^10.0.7", "react": "^17.0.1", "react-dom": "^17.0.1", diff --git a/packages/grid/examples/css-grid/src/pages/index.js b/packages/grid/examples/css-grid/src/pages/index.js index c2fc57f6299a..38c4d4b7105a 100644 --- a/packages/grid/examples/css-grid/src/pages/index.js +++ b/packages/grid/examples/css-grid/src/pages/index.js @@ -1,172 +1,177 @@ export default function IndexPage() { return ( <> -

CSS Grid Demo

+

Experimental CSS Grid

-

CSS Grid

-
-
-
- Span 1 -
-
- Span 2 -
-
- Span 1 -
-
- Span 1 -
-
-
+

Wide

+
+
+
+
+
+
+
-

Responsive

+

Narrow

+
+
+
+
+
+
-
-
-
25%
-
25%
-
25%
-
25%
-
- Responsive -
+ +
+

Condensed

+
+
+
+
+
-
+ +
-

Offset

-
-
-
Start 8
-
Start 7
-
Start 6
-
Start 5
-
Start 4
-
Start 3
-
Start 2
-
Start 1
-
- Start 4, End 7 -
-
-
+

Full Width

+
+
+
+
+
+
+
-

Gap (condensed, narrow, no gutters)

-
-
-
- Span 1 -
-
- Span 2 -
-
- Span 1 -
-
- Span 1 -
+

Responsive

+
+
+

Small: Span 2 of 4

+

Medium: Span 4 of 8

+

Large: Span 6 of 16

-
-
-
-
- Span 1 -
-
- Span 2 -
-
- Span 1 -
-
- Span 1 -
+
+

Small: Span 2 of 4

+

Medium: Span 2 of 8

+

Large: Span 3 of 16

-
-
-
-
- Span 1 -
-
- Span 2 -
-
- Span 1 -
-
- Span 1 -
+
+

Small: Span 0 of 4

+

Medium: Span 2 of 8

+

Large: Span 3 of 16

-
-
-
-

Gutter helpers

-
-
-
- Span 1 -
-
- Span 2 -
-
- Span 1 -
-
- Span 1 -
+
+

Small: Span 0 of 4

+

Medium: Span 0 of 8

+

Large: Span 4 of 16

-
+
+

Subgrid

-
-
-
-
-
- 25% +
+
+

Small: Span 2 of 4

+

Medium: Span 4 of 8

+

Large: Span 3 of 16

+
+
+

Small: Span 2 of 4

+

Medium: Span 4 of 8

+

Large: Span 10 of 16

+
+
+

sm=1

md=1

lg=2

+
+
+

sm=1

md=1

lg=2

+
+
+

sm=0

md=1

lg=1

+
+
+

sm=0

md=1

lg=1

+
+
+

sm=0

md=0

lg=1

+
+
+

sm=0

md=0

lg=1

+
+
+

sm=0

md=0

lg=1

+
+
+

sm=0

md=0

lg=1

+
+
+

Small: Span 0 of 4

+

Medium: Span 0 of 8

+

Large: Span 3 of 16

+
+
-

Relative

-
-
-
-
100%
-
-
-
75%
-
-
-
25%
+

Mixed Grid Modes

+
+
+
+
+

narrow

+
-
-
-
50%
-
-
-
50%
+
+
+
+

condensed

+
-
-
-
25%
+
+
+
+

condensed

+
-
-
75%
+
+
+
+
+

narrow

+
+ +
+

Offset

+
+
+
+
+
+
+
+ +
+

Auto Columns

+
+
+
+
+
+
+
+
+
+
+
); } diff --git a/packages/grid/examples/css-grid/src/pages/layouts.js b/packages/grid/examples/css-grid/src/pages/layouts.js deleted file mode 100644 index a4b8219e36c9..000000000000 --- a/packages/grid/examples/css-grid/src/pages/layouts.js +++ /dev/null @@ -1,259 +0,0 @@ -import Head from 'next/head'; - -export default function LayoutsPage() { - return ( -
- - - - -

Grid Layout Examples

-

Below are some simple examples intended to be an entrypoint into using the Carbon CSS Grid

- -

Wide (default)

-
-
-
-

Title

-
-
-

Title

-
-
-

Title

-
-
-

Title

-
-
-
- -

Wide (12 column)

-
-
-
-

Some text

-
-
-

Some text

-
-
-

Some text

-
-
-
- -

Narrow

-
-
- {/* - All columns get a negative margin, a 'hang by default', placing the left edge of the container in the gutter. - Text must manually be given an additional .bx--gutter-start class applying padding-left to align text the column definition. - Container elements should have padding built in (like Tile) so that type aligns as expected. - */} -
-

Some text

-
-
-

Some text

-
-
-

Some text

-
-
-

Some text

-
-
-
- -

Condensed

-
-
-
-

Some text

-
-
-

Some text

-
-
-

Some text

-
-
-

Some text

-
-
- {/* The row-gap property provides consistent vertical guttering */} -
-
- {/* The row-gap property provides consistent vertical guttering */} -
-
-
- -

Wide parent grid, Wide & Narrow children subgrids

-
-
-
-

Wide

-
-
-
-

Narrow

-
-
-
-
- -

Wide parent grid, Wide & Condensed children subgrids

-
-
-
-

Wide

-
-
-
-

Condensed

-
-
-
-
- - -

Wide parent grid, Narrow & Condensed children subgrids

-
-
-
-
-

Narrow

-
-
-
-
-

Condensed

-
-
-
-
-

Condensed

-
-
-
-
-

Narrow

-
-
-
-
- - -

Narrow parent grid, Wide & Condensed children subgrids

-
-
-
-
-

Wide subgrid

-
-
-
-
-

Condensed subgrid

-
-
-
-
-

Condensed subgrid

-
-
-
-
-

Wide subgrid

-
-
-
-
- -

Condensed parent grid, Narrow & Wide children subgrids

-
-
-
-
-

Narrow subgrid

-
-
-
-
-

Wide subgrid

-
-
-
-
-

Wide subgrid

-
-
-
-
-

Narrow subgrid

-
-
-
-
- -

How deep can we nest?

-
-
- -
-
-

50% width subgrid configured with col-span-percent classes (This can only have 2 subgrids. grid -> subgrid -> subgrid)

-
-

50% second level subgrid

-

50% second level subgrid

-
-
-
- -
-
-

8 column subgrid, configured with col-span classes

-
-
second subgrid, 2 columns wide
-
second subgrid, 2 columns wide
-
- -
-
-

second subgrid, 8 columns wide

-
-
-

third subgrid, 4 columns wide

-
-
fourth subgrid
-
-
-
-
-
-
-
-
-
-
- Technically, infinitely -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ); -} diff --git a/packages/grid/examples/css-grid/src/scss/_reset.scss b/packages/grid/examples/css-grid/src/scss/_reset.scss index 5d3cfbdef6c5..905dcdb2dd54 100644 --- a/packages/grid/examples/css-grid/src/scss/_reset.scss +++ b/packages/grid/examples/css-grid/src/scss/_reset.scss @@ -20,5 +20,7 @@ html, body { body { margin: 0; + font-family: 'IBM Plex Mono', monospace; + padding: 1rem; } diff --git a/packages/grid/examples/css-grid/src/styles.scss b/packages/grid/examples/css-grid/src/styles.scss index 50ebde1ad956..53c3d9bc7f30 100644 --- a/packages/grid/examples/css-grid/src/styles.scss +++ b/packages/grid/examples/css-grid/src/styles.scss @@ -11,50 +11,48 @@ @import '@carbon/layout/scss/spacing'; @import '@carbon/type/scss/styles'; -.example > .bx--css-grid, -.example > .bx--css-grid--12 { - // background-color: #d0e2ff; - border: 1px dashed black; -} +@import '~carbon-components/scss/globals/scss/vars'; -.example .bx--subgrid, -.subgrid { - background-color: rgba(#ffe056, 0.25); - outline: 1px solid #ffe056; +// Grid +.bx--css-grid { + background-color: $blue-20; + outline: 1px dashed $blue-40; } -.example .content, -.column { - background-color: #edf4ff; - outline: 1px solid #a6c8ff; +.bx--css-grid.bx--css-grid--narrow { + background-color: $teal-20; + outline: 1px dashed $teal-40; } -.example .content { - min-height: 80px; +.bx--css-grid.bx--css-grid--condensed { + background-color: $purple-20; + outline: 1px dashed $purple-40; } -h2, h3, p { - $heading-spacing: $carbon--layout-01; +// Only use background for subgrid example, not other subgrids in "mixed modes" example or others +.bx--subgrid.example { + background-color: $green-20; +} - margin-top: $heading-spacing; - margin-bottom: $heading-spacing; +// Columns +.bx--css-grid > [class*='col'], +.bx--subgrid > [class*='col'] { + min-height: 80px; } -h2 { - @include carbon--type-style($name: productive-heading-03); +.bx--css-grid > [class*='col'] { + background: $blue-10; } -h3 { - @include carbon--type-style($name: productive-heading-01); +.bx--subgrid > [class*='col'] { + background: $green-10; + outline: 1px dashed $green-30; } -p { - @include carbon--type-style($name: body-short-02); +.bx--css-grid.bx--css-grid--narrow > [class*='col'] { + background: $teal-10; } -.content-focused { - display: grid; - grid-template-columns: max-content 1fr; - grid-column-gap: var(--cds-grid-gutter); - grid-row-gap: var(--cds-grid-margin); +.bx--css-grid.bx--css-grid--condensed > [class*='col'] { + background: $purple-10; } \ No newline at end of file diff --git a/packages/grid/examples/css-grid/yarn.lock b/packages/grid/examples/css-grid/yarn.lock index 76aa8aadfbf9..d85f32ae7b3c 100644 --- a/packages/grid/examples/css-grid/yarn.lock +++ b/packages/grid/examples/css-grid/yarn.lock @@ -562,12 +562,6 @@ __metadata: languageName: node linkType: hard -"carbon-components-react@link:../../../react::locator=grid-examples-css-grid%40workspace%3A.": - version: 0.0.0-use.local - resolution: "carbon-components-react@link:../../../react::locator=grid-examples-css-grid%40workspace%3A." - languageName: node - linkType: soft - "carbon-components@link:../../../components::locator=grid-examples-css-grid%40workspace%3A.": version: 0.0.0-use.local resolution: "carbon-components@link:../../../components::locator=grid-examples-css-grid%40workspace%3A." @@ -1268,7 +1262,6 @@ fsevents@~2.3.1: "@carbon/colors": "link:../../../colors" "@carbon/grid": "link:../../" carbon-components: "link:../../../components" - carbon-components-react: "link:../../../react" next: ^10.0.7 react: ^17.0.1 react-dom: ^17.0.1 diff --git a/packages/grid/examples/preview/.yarn/install-state.gz b/packages/grid/examples/preview/.yarn/install-state.gz new file mode 100644 index 000000000000..42aa909bd82b Binary files /dev/null and b/packages/grid/examples/preview/.yarn/install-state.gz differ diff --git a/packages/grid/scss/modules/_css-grid.scss b/packages/grid/scss/modules/_css-grid.scss index 88edde68578a..d6fe90aebf83 100644 --- a/packages/grid/scss/modules/_css-grid.scss +++ b/packages/grid/scss/modules/_css-grid.scss @@ -110,7 +110,7 @@ // Condensed // ----------------------------------------------------------------------------- .#{$prefix}--css-grid--condensed { - --cds-grid-gutter: 2px; + --cds-grid-gutter: 1px; column-gap: var(--cds-grid-gutter); row-gap: var(--cds-grid-gutter); diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb-story.js b/packages/react/src/components/Breadcrumb/Breadcrumb-story.js index 8e0616d83c64..2a1a1990a653 100644 --- a/packages/react/src/components/Breadcrumb/Breadcrumb-story.js +++ b/packages/react/src/components/Breadcrumb/Breadcrumb-story.js @@ -37,6 +37,7 @@ export const breadcrumb = () => ( Breadcrumb 2 Breadcrumb 3 + Breadcrumb 4 ); @@ -53,6 +54,7 @@ export const breadcrumbWithOverflowMenu = () => ( Breadcrumb 5 + Breadcrumb 6 ); @@ -74,5 +76,6 @@ export const playground = () => ( Breadcrumb 3 + Breadcrumb 4 ); diff --git a/packages/react/src/components/Breadcrumb/BreadcrumbItem.js b/packages/react/src/components/Breadcrumb/BreadcrumbItem.js index 66f728367260..74168c8e67ec 100644 --- a/packages/react/src/components/Breadcrumb/BreadcrumbItem.js +++ b/packages/react/src/components/Breadcrumb/BreadcrumbItem.js @@ -53,12 +53,16 @@ const BreadcrumbItem = React.forwardRef(function BreadcrumbItem( ); } - if (typeof children === 'string' && href) { + if (typeof children === 'string') { return (
  • - - {children} - + {href ? ( + + {children} + + ) : ( + {children} + )}
    • ); } diff --git a/packages/react/src/components/Modal/Modal.js b/packages/react/src/components/Modal/Modal.js index c76745f2ebfe..bca147bc29be 100644 --- a/packages/react/src/components/Modal/Modal.js +++ b/packages/react/src/components/Modal/Modal.js @@ -226,6 +226,7 @@ export default class Modal extends Component { }; button = React.createRef(); + secondaryButton = React.createRef(); outerModal = React.createRef(); innerModal = React.createRef(); startTrap = React.createRef(); @@ -234,13 +235,26 @@ export default class Modal extends Component { modalLabelId = `${prefix}--modal-header__label--${this.modalInstanceId}`; modalHeadingId = `${prefix}--modal-header__heading--${this.modalInstanceId}`; modalBodyId = `${prefix}--modal-body--${this.modalInstanceId}`; + modalCloseButtonClass = `${prefix}--modal-close`; + + isCloseButton = (element) => { + return ( + (!this.props.onSecondarySubmit && + element === this.secondaryButton.current) || + element.classList.contains(this.modalCloseButtonClass) + ); + }; handleKeyDown = (evt) => { if (this.props.open) { if (evt.which === 27) { this.props.onRequestClose(evt); } - if (evt.which === 13 && this.props.shouldSubmitOnEnter) { + if ( + evt.which === 13 && + this.props.shouldSubmitOnEnter && + !this.isCloseButton(evt.target) + ) { this.props.onRequestSubmit(evt); } } @@ -397,7 +411,7 @@ export default class Modal extends Component { const modalButton = ( ); @@ -449,7 +463,10 @@ export default class Modal extends Component { } if (secondaryButtonText) { return ( - ); diff --git a/packages/styles/index.scss b/packages/styles/index.scss index 7eee2218693d..05b2ded8d900 100644 --- a/packages/styles/index.scss +++ b/packages/styles/index.scss @@ -7,6 +7,7 @@ @forward 'scss/config'; @forward 'scss/colors' hide $white; +@forward 'scss/font-face'; @forward 'scss/grid'; @forward 'scss/motion'; @forward 'scss/type'; diff --git a/packages/styles/package.json b/packages/styles/package.json index 6118d1ec6104..4a154020a469 100644 --- a/packages/styles/package.json +++ b/packages/styles/package.json @@ -1,8 +1,7 @@ { "name": "@carbon/styles", - "private": true, "description": "Styles for the Carbon Design System", - "version": "0.11.0", + "version": "0.1.0", "license": "Apache-2.0", "repository": { "type": "git", @@ -17,6 +16,9 @@ "components", "react" ], + "publishConfig": { + "access": "public" + }, "dependencies": { "@carbon/colors": "^10.29.0", "@carbon/feature-flags": "^0.5.0", @@ -24,7 +26,8 @@ "@carbon/layout": "^10.28.0", "@carbon/motion": "^10.21.0", "@carbon/themes": "^10.39.0", - "@carbon/type": "^10.32.0" + "@carbon/type": "^10.32.0", + "@ibm/plex": "6.0.0-next.6" }, "devDependencies": { "@carbon/test-utils": "^10.16.0", diff --git a/packages/styles/scss/__tests__/__snapshots__/config-test.js.snap b/packages/styles/scss/__tests__/__snapshots__/config-test.js.snap index 995b166632f9..28ae508307db 100644 --- a/packages/styles/scss/__tests__/__snapshots__/config-test.js.snap +++ b/packages/styles/scss/__tests__/__snapshots__/config-test.js.snap @@ -4,6 +4,7 @@ exports[`@carbon/styles/scss/config Public API 1`] = ` Object { "css--default-type": true, "css--font-face": true, + "css--plex-arabic": false, "css--reset": true, "prefix": "bx", } diff --git a/packages/styles/scss/_config.scss b/packages/styles/scss/_config.scss index 4fdd167c7af7..6aef735107fd 100644 --- a/packages/styles/scss/_config.scss +++ b/packages/styles/scss/_config.scss @@ -29,3 +29,9 @@ $css--reset: true !default; /// @type Bool /// @group config $css--default-type: true !default; + +/// If true, include IBM Plex Arabic type +/// @access public +/// @type Bool +/// @group config +$css--plex-arabic: false !default; diff --git a/packages/styles/scss/_font-face.scss b/packages/styles/scss/_font-face.scss new file mode 100644 index 000000000000..013c3d86b193 --- /dev/null +++ b/packages/styles/scss/_font-face.scss @@ -0,0 +1,13 @@ +@use 'config'; +@use '@ibm/plex/default' as sans; +@use '@ibm/plex/mono' as mono; +@use '@ibm/plex/arabic' as arabic; + +@if config.$css--font-face == true { + @include sans.all; + @include mono.all; + + @if config.$css--plex-arabic == true { + @include arabic.all; + } +} ; diff --git a/tasks/examples.js b/tasks/examples.js index abff4eae2dd8..448d831da585 100644 --- a/tasks/examples.js +++ b/tasks/examples.js @@ -30,7 +30,6 @@ const IGNORE_EXAMPLE_DIRS = new Set([ 'vue-cli', 'storybook', 'sass-modules', - 'css-grid', ]); /** diff --git a/yarn.lock b/yarn.lock index e0847a4d9591..25a8e46cdd0f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1997,10 +1997,9 @@ __metadata: "@babel/preset-react": ^7.14.5 "@carbon/feature-flags": ^0.5.0 "@carbon/icons-react": ^10.36.0 - "@carbon/styles": ^0.11.0-rc.0 + "@carbon/styles": ^0.1.0 "@carbon/telemetry": 0.0.0-alpha.6 "@carbon/themes": ^10.39.0 - "@ibm/plex": 6.0.0-next.6 "@rollup/plugin-babel": ^5.3.0 "@rollup/plugin-commonjs": ^18.0.0 "@rollup/plugin-node-resolve": ^11.2.1 @@ -2016,6 +2015,7 @@ __metadata: browserslist-config-carbon: ^10.6.1 carbon-components-react: ^7.40.0 css-loader: ^5.2.4 + fs-extra: ^10.0.0 mini-css-extract-plugin: ^1.6.0 postcss: ^8.2.14 postcss-custom-properties: ^11.0.0 @@ -2065,7 +2065,7 @@ __metadata: languageName: unknown linkType: soft -"@carbon/styles@^0.11.0-rc.0, @carbon/styles@workspace:packages/styles": +"@carbon/styles@^0.1.0, @carbon/styles@workspace:packages/styles": version: 0.0.0-use.local resolution: "@carbon/styles@workspace:packages/styles" dependencies: @@ -2077,6 +2077,7 @@ __metadata: "@carbon/test-utils": ^10.16.0 "@carbon/themes": ^10.39.0 "@carbon/type": ^10.32.0 + "@ibm/plex": 6.0.0-next.6 css: ^3.0.0 languageName: unknown linkType: soft