Merge pull request #51 from merative/ab/carbon-upgrade

Carbon 11 upgrade

package.json

@@ -79,16 +79,13 @@
   },
   "dependencies": {
     "@apollo/client": "^3.2.5",
-    "@carbon/grid": "^10.20.0",
-    "@carbon/icon-helpers": "^10.13.0",
-    "@carbon/icons": "^10.25.0",
-    "@carbon/icons-react": "^10.25.0",
-    "@carbon/layout": "^10.17.0",
+    "@carbon/grid": "^11.22.0",
+    "@carbon/icons": "^11.39.0",
+    "@carbon/layout": "^11.21.0",
     "@carbon/pictograms-react": "^11.2.0",
-    "@carbon/type": "^10.20.0",
-    "carbon-components": "10.44.0",
-    "carbon-components-react": "7.41.0",
-    "carbon-icons": "^7.0.7",
+    "@carbon/react": "^1.55.0",
+    "@carbon/styles": "^1.55.0",
+    "@carbon/type": "^11.26.0",
     "classnames": "^2.2.6",
     "core-js": "*",
     "graphql": "^15.3.0",

packages/carbon-addons-devenv/src/scss/addons_samples/logo.scss

@@ -1,5 +1,5 @@
 .#{$prefix}--logo {
-  box-shadow: inset 0 0 0 2px $carbon--white-0;
+  box-shadow: inset 0 0 0 2px $layer-01;
   border-radius: $border-radius-round;
   font-weight: 500;
   overflow: hidden;

packages/carbon-addons-devenv/src/scss/addons_samples/personfolio.scss

@@ -1,33 +1,32 @@
 .#{$prefix}--personfolio {
 
-    background-color: $ui-01;
-    color: $text-01;
+    background-color: $layer-01;
+    color: $text-primary;
     border-radius: 6px;
     border-width: 1px 1px 1px 1px;
     border-style: solid !important;
     padding: $spacing-05;
     margin-top: $spacing-05;
 
     &--child {
-        border-color: $support-01;
+        border-color: $support-error;
 
     }
 
     &--youngadult {
 
-        border-color: $support-02;
+        border-color: $support-success;
 
     }
 
     &--adult {
 
-      border-color: $support-03;
+      border-color: $support-warning;
     }
 
     &--senior {
 
-        border-color: $support-04;
+        border-color: $support-info;
       }
-
-  }
-
+
+}

packages/carbon-addons-devenv/src/scss/app.scss

@@ -1,47 +0,0 @@
-
-//-------------------------
-// 🚀 Variables
-//-------------------------
-
-$feature-flags: (
-  grid-columns-16: true,
-);
-
-$css--font-face: true;
-$css--helpers: true;
-$css--body: true;
-$css--reset: true;
-$css--default-type: true;
-$css--plex: true;
-$css--use-experimental-grid: false;
-$css--use-experimental-grid-fallback: false;
-
-//-------------------------
-// 🔄 Resets
-//-------------------------
-
-// rtl directives must be imported when wrapping an imported stylesheet so 
-// that they are positioned correctly in the compiled css
-// https://github.com/MohammadYounes/rtlcss/issues/113#issuecomment-379907981
-
-@import 'carbon-components/scss/globals/scss/css--reset';
-
-
-//-------------------------
-// 🎨 Themes
-//-------------------------
-
-@import 'carbon-components/scss/globals/scss/theme';
-
-$carbon--theme: $carbon--theme--g10;
-@include carbon--theme();
-
-// overwrite box-sizing from css--reset to original Curam styling
-* {
-  box-sizing: content-box;
-}
-
-// Temporary until Carbon fix is applied for date picker opening event.
-html.spm-modal--html {
-  overflow: visible;
-}

packages/carbon-addons-devenv/src/scss/carbon-components.scss

@@ -1,78 +1,9 @@
-
-  // re-apply Carbon box-boxing after overwrite above
-  * {
-    box-sizing: border-box;
-  }
-
-  //-------------------------
-  // 🌍 Globals
-  //-------------------------
-  @import 'carbon-components/scss/globals/scss/theme-tokens';
-  @import 'carbon-components/scss/globals/scss/layout';
-  @import 'carbon-components/scss/globals/scss/layer';
-  @import 'carbon-components/scss/globals/scss/typography';
-  @import 'carbon-components/scss/globals/scss/css--font-face';
-  @import 'carbon-components/scss/globals/scss/css--helpers';
-  @import 'carbon-components/scss/globals/scss/css--body';
-  @import 'carbon-components/scss/globals/grid/grid';
-
-  //-------------------------
-  // 🍕 Components
-  //-------------------------
-
-  @import 'carbon-components/scss/components/button/button';
-  @import 'carbon-components/scss/components/copy-button/copy-button';
-  @import 'carbon-components/scss/components/file-uploader/file-uploader';
-  @import 'carbon-components/scss/components/checkbox/checkbox';
-  @import 'carbon-components/scss/components/combo-box/combo-box';
-  @import 'carbon-components/scss/components/radio-button/radio-button';
-  @import 'carbon-components/scss/components/toggle/toggle';
-  @import 'carbon-components/scss/components/search/search';
-  @import 'carbon-components/scss/components/select/select';
-  @import 'carbon-components/scss/components/text-input/text-input';
-  @import 'carbon-components/scss/components/text-area/text-area';
-  @import 'carbon-components/scss/components/number-input/number-input';
-  @import 'carbon-components/scss/components/form/form';
-  @import 'carbon-components/scss/components/link/link';
-  @import 'carbon-components/scss/components/list-box/list-box';
-  @import 'carbon-components/scss/components/list/list';
-  @import 'carbon-components/scss/components/data-table/data-table';
-  @import 'carbon-components/scss/components/structured-list/structured-list';
-  @import 'carbon-components/scss/components/code-snippet/code-snippet';
-  @import 'carbon-components/scss/components/overflow-menu/overflow-menu';
-  @import 'carbon-components/scss/components/content-switcher/content-switcher';
-  @import 'carbon-components/scss/components/date-picker/date-picker';
-  @import 'carbon-components/scss/components/dropdown/dropdown';
-  @import 'carbon-components/scss/components/loading/loading';
-  @import 'carbon-components/scss/components/modal/modal';
-  @import 'carbon-components/scss/components/multi-select/multi-select';
-  @import 'carbon-components/scss/components/notification/inline-notification';
-  @import 'carbon-components/scss/components/notification/toast-notification';
-  @import 'carbon-components/scss/components/tooltip/tooltip';
-  @import 'carbon-components/scss/components/tabs/tabs';
-  @import 'carbon-components/scss/components/tag/tag';
-  @import 'carbon-components/scss/components/pagination/pagination';
-  @import 'carbon-components/scss/components/accordion/accordion';
-  @import 'carbon-components/scss/components/progress-indicator/progress-indicator';
-  @import 'carbon-components/scss/components/breadcrumb/breadcrumb';
-  @import 'carbon-components/scss/components/toolbar/toolbar';
-  @import 'carbon-components/scss/components/time-picker/time-picker';
-  @import 'carbon-components/scss/components/slider/slider';
-  @import 'carbon-components/scss/components/tile/tile';
-  @import 'carbon-components/scss/components/skeleton/skeleton';
-  @import 'carbon-components/scss/components/inline-loading/inline-loading';
-  @import 'carbon-components/scss/components/pagination-nav/pagination-nav';
-
-  // type utilities
-  @import '@carbon/type/scss/classes';
-  @include carbon--type-classes();
-
-  //-------------------------
-  // ✨ Addons
-  //-------------------------
-
-
-  @import './variables.scss';
-  @import './addons_samples/logo.scss';
-  @import './addons_samples/personfolio.scss';
-
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/react/scss/themes';
+@use '@carbon/react/scss/theme' as * with (
+  $theme: themes.$g100
+);
+@use '@carbon/react/scss/reset';
+@import './variables.scss';
+@import './addons_samples/logo.scss';
+@import './addons_samples/personfolio.scss';

packages/carbon-addons-devenv/src/scss/index.scss

@@ -1,10 +1,5 @@
-
 @import './app.scss';
 
 .spm-custom-component {
-  //-------------------------
-  // Carbon-Components
-  //-------------------------
   @import './carbon-components.scss';
-  @import './addon-samples.scss';
 }

packages/carbon-addons-devenv/src/scss/variables.scss

@@ -1,5 +1,6 @@
+$prefix: 'bx';
 $border-radius-round:  100vw !default;
 $width-logo-large: 120px; // do we need small and medium too
 $width-logo-medium: 80px;
 $width-logo-small: 36px;
-$border-base: 1px solid $ui-background; // this should be a variable
+$border-base: 1px solid $background;

webpack.config.js

@@ -25,7 +25,7 @@ module.exports = {
       },
       {
         test: /\.(js|jsx)$/,
-        exclude: /(node_modules|bower_components)/,
+        exclude: /(bower_components)/,
         loader: "babel-loader",
         options: { presets: ["@babel/env"] }
       },
@@ -37,6 +37,10 @@ module.exports = {
         test: /\.(gif|png|jpe?g|svg)$/i,
         loader: 'file-loader',
       },
+      {
+        test: /\.(png|woff|woff2|eot|ttf|svg)$/,
+        loader: 'url-loader?limit=100000'
+      },
     ]
   },
   plugins: [