@carbon/ibm-products 1.25.1 → 2.0.0-rc.0

package/lib/settings.js

@@ -11,25 +11,16 @@ var _Canary = require("./components/_Canary");
 
 var _packageSettings = _interopRequireDefault(require("./global/js/package-settings"));
 
-var _carbonComponents = require("carbon-components");
-
 var _react = _interopRequireDefault(require("react"));
 
 var _themes = require("@carbon/themes");
 
 var carbon = {
-  get prefix() {
-    return _carbonComponents.settings.prefix;
-  },
-
-  set prefix(val) {
-    _carbonComponents.settings.prefix = val;
-  },
-
   get themes() {
     return _themes.themes;
-  }
+  },
 
+  prefix: 'cds'
 }; // Check that a component is enabled. This function returns a stub which checks
 // the component status on first use and then renders as the component or as
 // a Canary placeholder initialized with the name of the replaced component.

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.25.1",
+  "version": "2.0.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
+  "installConfig": {
+    "hoistingLimits": "none"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/carbon-design-system/ibm-cloud-cognitive.git",
@@ -71,7 +74,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.9",
+    "@carbon/grid": "^11.3.0",
+    "@carbon/layout": "^11.3.0",
+    "@carbon/motion": "^11.2.0",
+    "@carbon/react": "^1.9.0-rc.0",
     "@carbon/telemetry": "^0.1.0",
+    "@carbon/themes": "^11.4.0",
+    "@carbon/type": "^11.4.0",
     "immutability-helper": "^3.1.1",
     "react-dnd": "^15.1.2",
     "react-dnd-html5-backend": "^15.1.3",
@@ -80,18 +89,8 @@
     "react-window": "^1.8.7"
   },
   "peerDependencies": {
-    "@carbon/colors": "^10.37.1",
-    "@carbon/icons-react": "^10.49.0",
-    "@carbon/import-once": "^10.7.0",
-    "@carbon/layout": "^10.37.1",
-    "@carbon/motion": "^10.29.0",
-    "@carbon/themes": "^10.54.0",
-    "@carbon/type": "^10.44.0",
-    "carbon-components": "^10.57.2",
-    "carbon-components-react": "^7.57.4",
-    "carbon-icons": "^7.0.7",
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "72a6dbc4c1456c4c8dd8778cedbb532ecf0df711"
+  "gitHead": "a6d3c1295dbe9918e95c1eb75d53188b7770fb8e"
 }

package/scss/components/APIKeyModal/_api-key-modal.scss

@@ -1,63 +1,52 @@
 //
-// Copyright IBM Corp. 2021, 2021
+// Copyright IBM Corp. 2021, 2022
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
 
 // Standard imports.
-@import '../../global/styles/project-settings';
-
-// APIKeyModal uses the following Carbon components:
-// ComposedModal, ModalHeader, ModalFooter, ModalBody, TextInput,
-// InlineLoading, Form, Button
-@import 'carbon-components/scss/components/modal/modal';
-@import 'carbon-components/scss/components/text-input/text-input';
-@import 'carbon-components/scss/components/inline-loading/inline-loading';
-@import 'carbon-components/scss/components/form/form';
-@import 'carbon-components/scss/components/button/button';
-
-@mixin apikey-modal {
-  $block-class: #{$pkg-prefix}--apikey-modal;
-
-  .#{$block-class} .#{$carbon-prefix}--modal-close {
-    display: none;
-  }
-
-  .#{$block-class} .#{$carbon-prefix}--inline-loading {
-    min-height: 3rem; // increasing the height from 2 to 3 resolves an issue where the scroll bar bounces
-  }
-
-  .#{$block-class} .#{$carbon-prefix}--modal-content {
-    padding-right: $spacing-05;
-  }
-
-  .#{$block-class}__body {
-    padding-right: calc(20% - #{$spacing-05});
-    margin-bottom: $spacing-05;
-  }
-
-  .#{$block-class}__messaging {
-    display: flex;
-    padding-right: calc(20% - #{$spacing-05});
-    margin-top: $spacing-03;
-  }
-
-  .#{$block-class}__messaging-text {
-    flex: 1;
-    margin-left: $spacing-03;
-    @include carbon--type-style('label-01');
-  }
-
-  .#{$block-class}__messaging-text > * {
-    font: inherit;
-  }
-
-  .#{$block-class}__error-icon svg {
-    fill: $danger-01;
-  }
-}
-
-@include exports('apikey-modal') {
-  @include apikey-modal;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/components/button/tokens' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+@use '../../global/styles/project-settings' as c4p-settings;
+
+$block-class: #{c4p-settings.$pkg-prefix}--apikey-modal;
+
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--modal-close {
+  display: none;
+}
+
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--inline-loading {
+  min-height: 3rem; // increasing the height from 2 to 3 resolves an issue where the scroll bar bounces
+}
+
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--modal-content {
+  padding-right: $spacing-05;
+}
+
+.#{$block-class}__body {
+  padding-right: calc(20% - #{$spacing-05});
+  margin-bottom: $spacing-05;
+}
+
+.#{$block-class}__messaging {
+  display: flex;
+  padding-right: calc(20% - #{$spacing-05});
+  margin-top: $spacing-03;
+}
+
+.#{$block-class}__messaging-text {
+  flex: 1;
+  margin-left: $spacing-03;
+  @include type.type-style('label-01');
+}
+
+.#{$block-class}__messaging-text > * {
+  font: inherit;
+}
+
+.#{$block-class}__error-icon svg {
+  fill: $button-danger-primary;
 }

package/scss/components/APIKeyModal/_carbon-imports.scss

@@ -0,0 +1,15 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// APIKeyModal uses the following Carbon components:
+// ComposedModal, ModalHeader, ModalFooter, ModalBody, TextInput,
+// InlineLoading, Form, Button
+@use '@carbon/react/scss/components/modal';
+@use '@carbon/react/scss/components/text-input';
+@use '@carbon/react/scss/components/inline-loading';
+@use '@carbon/react/scss/components/form';
+@use '@carbon/react/scss/components/button';

package/scss/components/APIKeyModal/_index-with-carbon.scss

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2021, 2021
+//
+// 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 './carbon-imports';
+@use './api-key-modal';

package/scss/components/APIKeyModal/_index.scss

@@ -7,4 +7,4 @@
 
 // An index file is most useful when you have multiple components
 
-@import './api-key-modal';
+@use './api-key-modal';

package/scss/components/APIKeyModal/_storybook-styles.scss

@@ -5,29 +5,31 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '../../global/styles/project-settings';
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
 
-$block-class: #{$pkg-prefix}--apikey-modal;
+$block-class: #{c4p-settings.$pkg-prefix}--apikey-modal;
 
-.#{$block-class} .#{$carbon-prefix}--radio-button-wrapper {
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--radio-button-wrapper {
   margin-bottom: $spacing-02;
 }
 
-.#{$block-class}__permissions.#{$carbon-prefix}--fieldset {
+.#{$block-class}__permissions.#{c4p-settings.$carbon-prefix}--fieldset {
   margin-top: $spacing-05;
   margin-bottom: 0;
 }
 
-.#{$block-class}__resource-toggle.#{$carbon-prefix}--fieldset {
+.#{$block-class}__resource-toggle.#{c4p-settings.$carbon-prefix}--fieldset {
   margin-top: 0;
   margin-bottom: $spacing-05;
 }
 
-.#{$block-class}__resource-name.#{$carbon-prefix}--fieldset {
+.#{$block-class}__resource-name.#{c4p-settings.$carbon-prefix}--fieldset {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.#{$block-class}__button-loading.#{$carbon-prefix}--btn--primary {
-  background: $link-02;
+.#{$block-class}__button-loading.#{c4p-settings.$carbon-prefix}--btn--primary {
+  background: $link-secondary;
 }

package/scss/components/AboutModal/_about-modal.scss

@@ -1,120 +1,128 @@
 //
-// Copyright IBM Corp. 2020, 2021
+// Copyright IBM Corp. 2020, 2022
 //
 // 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 '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/type/scss/font-family' as *;
+
 // Standard imports.
-@import '../../global/styles/project-settings';
-
-// AboutModal uses the following Carbon components:
-// ComposedModal, ModalHeader, ModalFooter, ModalBody, Tabs, Tab
-@import 'carbon-components/scss/components/modal/modal';
-@import 'carbon-components/scss/components/tabs/tabs';
-
-// Define all component styles in a mixin which is then exported using
-// the Carbon import-once mechanism.
-@mixin about-modal {
-  // The block part of our conventional BEM class names (blockClass__E--M).
-  $block-class: #{$pkg-prefix}--about-modal;
-
-  .#{$block-class} .#{$carbon-prefix}--modal-container {
-    grid-template-rows: auto auto 1fr auto;
-  }
-
-  .#{$block-class} .#{$block-class}__logo {
-    margin: $spacing-05;
-  }
-
-  .#{$block-class} .#{$block-class}__header {
-    padding: 0 20% $spacing-03 $spacing-05;
-    margin-bottom: 0;
-    grid-row: auto;
-  }
-
-  .#{$block-class} .#{$block-class}__title {
-    @include carbon--type-style('productive-heading-04');
-
-    color: $text-01;
-  }
-
-  .#{$block-class} .#{$block-class}__body {
-    @include carbon--type-style('body-short-02');
-
-    min-height: $layout-05;
-    padding: 0 20% 0 $spacing-05;
-    grid-row: auto;
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
-
-  .#{$block-class}.#{$block-class}--with-tabs .#{$block-class}__body {
-    min-height: calc(#{$layout-05} + #{$spacing-08});
-    // stylelint-disable-next-line carbon/layout-token-use
-    margin-bottom: calc(#{$spacing-09} + #{$spacing-08});
-  }
-
-  .#{$block-class}.#{$block-class}--with-tabs
-    .#{$carbon-prefix}--modal-content--overflow-indicator {
-    // stylelint-disable-next-line carbon/layout-token-use
-    bottom: calc(#{$spacing-09} + #{$spacing-08});
-  }
-
-  .#{$block-class} .#{$carbon-prefix}--modal-content--overflow-indicator {
-    background-image: linear-gradient(to bottom, #00000000, $ui-01);
-  }
-
-  .#{$block-class} .#{$block-class}__links-container {
-    margin-top: $spacing-05;
-  }
-
-  .#{$block-class} .#{$block-class}__links-container a + a {
-    padding-left: $spacing-03;
-    border-left: 1px solid $text-01;
-    margin-left: $spacing-03;
-  }
-
-  .#{$block-class} .#{$block-class}__legal-text,
-  .#{$block-class} .#{$block-class}__copyright-text {
-    margin-top: $spacing-07;
-    margin-bottom: 0;
-    color: $text-02;
-  }
-
-  .#{$block-class} .#{$block-class}__copyright-text {
-    margin-top: $spacing-05;
-  }
-
-  .#{$block-class} .#{$block-class}__footer {
-    position: relative;
-    height: rem(72px);
-    flex-direction: column;
-    justify-content: center;
-    background-color: $inverse-02;
-    color: $inverse-01;
-  }
-
-  .#{$block-class} .#{$block-class}__tab-container {
-    position: absolute;
-    bottom: 100%;
-  }
-
-  .#{$block-class} .#{$block-class}__version-label,
-  .#{$block-class} .#{$block-class}__version-number {
-    @include carbon--type-style('body-short-01');
-
-    padding-left: $spacing-05;
-    margin-top: 0;
-    margin-bottom: 0;
-    color: $inverse-01;
-  }
-
-  .#{$block-class} .#{$block-class}__version-label {
-    @include carbon--font-weight('semibold');
-  }
-}
-
-@include exports('about-modal') {
-  @include about-modal;
+@use '../../global/styles/project-settings' as c4p-settings;
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--about-modal;
+
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--modal-container {
+  grid-template-rows: auto auto 1fr auto;
+}
+
+.#{$block-class} .#{$block-class}__logo {
+  margin: $spacing-05;
+}
+
+.#{$block-class} .#{$block-class}__header {
+  padding: 0 20% $spacing-03 $spacing-05;
+  margin-bottom: 0;
+  grid-row: auto;
+}
+
+.#{$block-class} .#{$block-class}__title {
+  @include type.type-style('productive-heading-04');
+
+  color: $text-primary;
+}
+
+.#{$block-class} .#{$block-class}__body {
+  @include type.type-style('body-short-02');
+
+  min-height: $spacing-10;
+  padding: 0 20% 0 $spacing-05;
+  grid-row: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.#{$block-class}.#{$block-class}--with-tabs .#{$block-class}__body {
+  min-height: calc(#{$spacing-10} + #{$spacing-08});
+  // stylelint-disable-next-line carbon/layout-token-use
+  margin-bottom: calc(#{$spacing-09} + #{$spacing-08});
+}
+
+.#{$block-class}.#{$block-class}--with-tabs
+  .#{c4p-settings.$carbon-prefix}--modal-content--overflow-indicator {
+  bottom: calc(#{$spacing-09} +#{$spacing-08});
+}
+
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--modal-content--overflow-indicator {
+  background-image: linear-gradient(to bottom, #00000000, $layer-01);
+}
+
+.#{$block-class} .#{$block-class}__links-container {
+  margin-top: $spacing-05;
+}
+
+.#{$block-class} .#{$block-class}__links-container a + a {
+  padding-left: $spacing-03;
+  border-left: 1px solid $text-primary;
+  margin-left: $spacing-03;
+}
+
+.#{$block-class} .#{$block-class}__legal-text,
+.#{$block-class} .#{$block-class}__copyright-text {
+  margin-top: $spacing-07;
+  margin-bottom: 0;
+  color: $text-secondary;
+}
+
+.#{$block-class} .#{$block-class}__copyright-text {
+  margin-top: $spacing-05;
+}
+
+.#{$block-class} .#{$block-class}__footer {
+  position: relative;
+  height: $spacing-03 + $spacing-10;
+  flex-direction: column;
+  justify-content: center;
+  background-color: $background-inverse;
+  color: $text-inverse;
+}
+
+.#{$block-class} .#{$block-class}__tab-container {
+  position: absolute;
+  bottom: 0;
+}
+
+.#{$block-class} .#{$block-class}__version-label,
+.#{$block-class} .#{$block-class}__version-number {
+  @include type.type-style('body-short-01');
+
+  padding-left: $spacing-05;
+  margin-top: 0;
+  margin-bottom: 0;
+  color: $text-inverse;
+}
+
+.#{$block-class} .#{$block-class}__version-label {
+  @include font-weight('semibold');
+}
+
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--tabs
+  .#{c4p-settings.$carbon-prefix}--tabs__nav-link,
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--tab-content {
+  @include type.type-style('body-short-01');
+}
+
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--tab-content {
+  height: $spacing-03 + $spacing-10;
+}
+
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--tab-content:not([hidden]) {
+  display: flex;
+  align-items: center;
 }

package/scss/components/AboutModal/_carbon-imports.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2020, 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// AboutModal uses the following Carbon components:
+// ComposedModal, ModalHeader, ModalFooter, ModalBody, Tabs, Tab
+@use '@carbon/react/scss/components/modal';
+@use '@carbon/react/scss/components/tabs';

package/scss/components/AboutModal/_index-with-carbon.scss

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// 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 './carbon-imports';
+@use './about-modal';

package/scss/components/AboutModal/_index.scss

@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import './about-modal';
+@use './about-modal';

package/scss/components/AboutModal/_storybook-styles.scss

@@ -5,7 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '../../global/styles/project-settings';
+@use '../../global/styles/project-settings' as *;
+@use '@carbon/styles/scss/spacing' as *;
 
 .about-modal-stories--tech-logo {
   width: 2.25rem;

package/scss/components/ActionBar/_action-bar.scss

@@ -6,62 +6,50 @@
 //
 
 // Standard imports.
-@import '../../global/styles/project-settings';
-@import '../../global/styles/mixins';
+@use '@carbon/styles/scss/spacing' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins' as *;
 
-// ActionBar uses the following Carbon components:
-// Button, OverflowMenu, OverflowMenuItem
-@import 'carbon-components/scss/components/button/button';
-@import 'carbon-components/scss/components/overflow-menu/overflow-menu';
+$_block-class: #{c4p-settings.$pkg-prefix}--action-bar;
+$block-class-overflow-items: #{$_block-class}-overflow-items;
 
-// Define all component styles in a mixin which is then exported using
-// the Carbon import-once mechanism.
-@mixin action-bar {
-  $block-class: #{$pkg-prefix}--action-bar;
-  $block-class-overflow-items: #{$block-class}-overflow-items;
-
-  @include block-wrap($block-class) {
-    &.#{$block-class} {
-      display: block;
-    }
-
-    .#{$block-class}__displayed-items {
-      display: inline-flex;
-      width: 100%;
-      white-space: nowrap;
-    }
+@include block-wrap($block-class: $_block-class) {
+  &.#{$_block-class} {
+    display: block;
+  }
 
-    .#{$block-class}__displayed-items--right {
-      justify-content: flex-end;
-    }
+  .#{$_block-class}__displayed-items {
+    display: inline-flex;
+    width: 100%;
+    white-space: nowrap;
+  }
 
-    .#{$block-class-overflow-items} {
-      display: inline-block;
-    }
+  .#{$_block-class}__displayed-items--right {
+    justify-content: flex-end;
+  }
 
-    .#{$block-class}__hidden-sizing-items {
-      // This breadcrumb container is used to measure the width of all displayable breadcrumbs
-      @include measuring-container;
-    }
+  .#{$block-class-overflow-items} {
+    display: inline-block;
   }
 
-  @include block-wrap($block-class-overflow-items + '__options') {
-    .#{$block-class-overflow-items}__item {
-      padding: 0 $spacing-03;
-    }
+  .#{$_block-class}__hidden-sizing-items {
+    // This breadcrumb container is used to measure the width of all displayable breadcrumbs
+    @include measuring-container;
+  }
+}
 
-    .#{$block-class-overflow-items}__item-content {
-      display: flex;
-      width: 100%;
-      justify-content: space-between;
-    }
+@include block-wrap($block-class: $block-class-overflow-items + '__options') {
+  .#{$block-class-overflow-items}__item {
+    padding: 0 $spacing-03;
+  }
 
-    .#{$block-class-overflow-items}__item svg {
-      margin: 0 $spacing-02;
-    }
+  .#{$block-class-overflow-items}__item-content {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
   }
-}
 
-@include exports('action-bar') {
-  @include action-bar;
+  .#{$block-class-overflow-items}__item svg {
+    margin: 0 $spacing-02;
+  }
 }

package/scss/components/ActionBar/_carbon-imports.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// ActionBar uses the following Carbon components:
+// Button, OverflowMenu, OverflowMenuItem
+@use '@carbon/react/scss/components/button';
+@use '@carbon/react/scss/components/overflow-menu';