feat: wip with carbon 11

.storybook/styles.scss

@@ -17,7 +17,7 @@
 @use '@carbon/react/scss/components/notification/tokens' as notification;
 @use '@carbon/react/scss/components/tag/tokens' as tag;
 @use '@carbon/react/scss/components';
-@use '../src/styles/index' with ($use-theme-boomerang: false);
+@use '../src/styles/index' with ($use-theme-boomerang: true);
 
 [data-carbon-theme="boomerang"] {
   @include theme.add-component-tokens(map.merge(button.$button-tokens, button.$button-tokens));

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boomerang-io/carbon-addons-boomerang-react",
-  "version": "3.0.0-beta.3",
+  "version": "3.0.0-beta.7",
   "license": "Apache-2",
   "repository": {
     "type": "git",
@@ -57,7 +57,7 @@
     "window-or-global": "1.0.1"
   },
   "peerDependencies": {
-    "@carbon/react": "1.7.0",
+    "@carbon/react": "^1.8.0",
     "axios": ">=0.26.0",
     "formik": "^2.1.5",
     "prop-types": "^15.8.1",

src/components/Error403/ForbiddenErrorBackground.jsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 
 function ForbiddenErrorBackground(props) {
   return (

src/components/Error404/NotFoundErrorBackground.jsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 
 function NotFoundErrorBackground(props) {
   return (

src/components/ErrorBoundary/ErrorBoundary.jsx

@@ -4,8 +4,6 @@ import { prefix } from "../../internal/settings";
 
 import ErrorMessage from "../ErrorMessage";
 
-
-
 /**
  * todo: convert this to hooks in the future.
  * As of now getDerivedStateFromError not available via hooks
@@ -41,10 +39,10 @@ class ErrorBoundary extends Component {
   }
 
   render() {
-    const ErrorComponent = this.props.errorComponent;
+    const { errorComponent: ErrorComponent, className, style, errorProps, ...rest } = this.props;
     if (this.state.hasError) {
       return (
-        <div className={this.props.className} style={this.props.style} {...this.props}>
+        <div className={className} style={style} {...rest}>
           <ErrorComponent {...this.props.errorProps} />
         </div>
       );

src/components/ErrorBoundary/_errorBoundary.scss

@@ -7,8 +7,8 @@
     right: 0;
     bottom: 0;
     left: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    // display: flex;
+    // justify-content: center;
+    // align-items: center;
   }
 

src/components/ErrorDragon/assets/ErrorGraphic.jsx

@@ -1,3 +1,4 @@
+import React from "react";
 const SvgErrorGraphic = (props) => (
   <svg width={1244} height={386} {...props}>
     <defs>

src/components/FeatureHeader/FeatureHeader.stories.jsx

@@ -57,10 +57,10 @@ const DataList = () => {
 
 const Actions = () => (
   <div style={{ display: "flex", alignItems: "flex-end", marginBottom: "1rem" }}>
-    <Button kind="ghost" renderIcon={View} style={{ marginRight: "1rem", width: "10rem" }} size="medium">
+    <Button kind="ghost" renderIcon={View} style={{ marginRight: "1rem" }} size="medium">
       View component
     </Button>
-    <Button renderIcon={Save} style={{ width: "10rem" }} size="medium">
+    <Button renderIcon={Save} size="medium">
       Save
     </Button>
   </div>

src/components/FeatureNavTab/_featureNavTab.scss

@@ -1,6 +1,7 @@
 @use "../../styles/config" as *;
-@use '@carbon/themes/scss/tokens' as theme;
+@use "../../styles/themes/shell-tokens" as shell;
 @use "@carbon/react/scss/motion";
+@use '@carbon/themes/scss/tokens' as theme;
 
   .#{$prefix}--bmrg-feature-nav-tab {
     border-bottom: 0.125rem solid #b9bfc7;
@@ -19,12 +20,12 @@
   }
 
   .#{$prefix}--bmrg-feature-nav-tab--active {
-    border-bottom: 0.125rem solid theme.$support-success;
+    border-bottom: 0.125rem solid shell.$bmrg-active-color;
     color: theme.$text-primary;
     font-weight: 600;
 
     &:hover {
-      border-bottom: 0.125rem solid theme.$support-success;
+      border-bottom: 0.125rem solid shell.$bmrg-active-color;
     }
   }
 

src/components/FeatureSideNavLink/_featureSideNavLink.scss

@@ -1,4 +1,5 @@
 @use "../../styles/config" as *;
+@use "../../styles/themes/shell-tokens" as shell;
 @use '@carbon/themes/scss/tokens' as theme;
 
   .#{$prefix}--bmrg-feature-sidenav-link {
@@ -13,11 +14,11 @@
     width: 100%;
     &:focus {
       outline-offset: -0.125rem !important;
-      outline: 0.125rem solid theme.$support-success !important;
+      outline: 0.125rem solid shell.$bmrg-active-color !important;
     }
     &.#{$prefix}--bmrg-feature-sidenav-active-link {
       background-color: theme.$background-selected;
-      border-left-color: theme.$support-success;
+      border-left-color: shell.$bmrg-active-color;
       color: theme.$text-primary;
       svg {
         fill: initial;

src/components/GdprRedirectModal/GdprRedirectModal.jsx

@@ -5,7 +5,7 @@ import { ModalHeader, ModalBody, ModalFooter } from "@carbon/react";
 import { prefix } from "../../internal/settings";
 import { USER_STATUS } from "./constants";
 import CastleDrawBridge from "./assets/CastleDrawBridge";
-import CastleNoDoor from "./assets/castle_nodoor";
+import CastleNoDoor from "./assets/CastleNoDoor";
 
 
 

src/components/LoadingAnimation/assets/Loading.jsx

@@ -1,4 +1,4 @@
-
+import React from "react";
 
 const SvgLoading = (props) => (
   <svg

src/styles/themes/_boomerang.scss

@@ -179,6 +179,7 @@ $shell-tokens: (
   bmrg-header-button-text-color: #272727,
   bmrg-header-attachment-background-color: #50565b,
   bmrg-sidenav-active-background-color: #343a3f,
+  bmrg-active-color: #009d9a
 );
 
 $theme: map.merge($v11-tokens, $v10-tokens);

src/styles/themes/_shell-tokens.scss

@@ -22,3 +22,4 @@ $bmrg-header-modal-background-color: var(--cds-bmrg-header-modal-background-colo
 $bmrg-header-button-text-color: theme.$text-inverse;
 $bmrg-header-attachment-background-color: var(--cds-bmrg-header-attachment-background-color);
 $bmrg-sidenav-active-background-color: var(--cds-bmrg-sidenav-active-background-color);
+$bmrg-active-color: var(--cds-bmrg-active-color, theme.$background-brand);

src/styles/utils/_mixins.scss

@@ -54,7 +54,7 @@ $breakpoints: (
   @each $name, $variable in $token-map {
     // Only create properties for non-map objects. Some theme tokens are maps in the default themes that we merge with
     @if type-of($variable) != map {
-      #{$prefix}-#{$name}: $variable;
+      #{$prefix}-#{$name}: #{$variable};
     }
   }
 }

styles/scss/components/ErrorBoundary/_errorBoundary.scss

@@ -7,8 +7,8 @@
     right: 0;
     bottom: 0;
     left: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    // display: flex;
+    // justify-content: center;
+    // align-items: center;
   }
 

styles/scss/components/FeatureNavTab/_featureNavTab.scss

@@ -1,6 +1,7 @@
 @use "../../styles/config" as *;
-@use '@carbon/themes/scss/tokens' as theme;
+@use "../../styles/themes/shell-tokens" as shell;
 @use "@carbon/react/scss/motion";
+@use '@carbon/themes/scss/tokens' as theme;
 
   .#{$prefix}--bmrg-feature-nav-tab {
     border-bottom: 0.125rem solid #b9bfc7;
@@ -19,12 +20,12 @@
   }
 
   .#{$prefix}--bmrg-feature-nav-tab--active {
-    border-bottom: 0.125rem solid theme.$support-success;
+    border-bottom: 0.125rem solid shell.$bmrg-active-color;
     color: theme.$text-primary;
     font-weight: 600;
 
     &:hover {
-      border-bottom: 0.125rem solid theme.$support-success;
+      border-bottom: 0.125rem solid shell.$bmrg-active-color;
     }
   }
 

styles/scss/components/FeatureSideNavLink/_featureSideNavLink.scss

@@ -1,4 +1,5 @@
 @use "../../styles/config" as *;
+@use "../../styles/themes/shell-tokens" as shell;
 @use '@carbon/themes/scss/tokens' as theme;
 
   .#{$prefix}--bmrg-feature-sidenav-link {
@@ -13,11 +14,11 @@
     width: 100%;
     &:focus {
       outline-offset: -0.125rem !important;
-      outline: 0.125rem solid theme.$support-success !important;
+      outline: 0.125rem solid shell.$bmrg-active-color !important;
     }
     &.#{$prefix}--bmrg-feature-sidenav-active-link {
       background-color: theme.$background-selected;
-      border-left-color: theme.$support-success;
+      border-left-color: shell.$bmrg-active-color;
       color: theme.$text-primary;
       svg {
         fill: initial;

styles/scss/styles/themes/_boomerang.scss

@@ -179,6 +179,7 @@ $shell-tokens: (
   bmrg-header-button-text-color: #272727,
   bmrg-header-attachment-background-color: #50565b,
   bmrg-sidenav-active-background-color: #343a3f,
+  bmrg-active-color: #009d9a
 );
 
 $theme: map.merge($v11-tokens, $v10-tokens);

styles/scss/styles/themes/_shell-tokens.scss

@@ -22,3 +22,4 @@ $bmrg-header-modal-background-color: var(--cds-bmrg-header-modal-background-colo
 $bmrg-header-button-text-color: theme.$text-inverse;
 $bmrg-header-attachment-background-color: var(--cds-bmrg-header-attachment-background-color);
 $bmrg-sidenav-active-background-color: var(--cds-bmrg-sidenav-active-background-color);
+$bmrg-active-color: var(--cds-bmrg-active-color, theme.$background-brand);

styles/scss/styles/utils/_mixins.scss

@@ -54,7 +54,7 @@ $breakpoints: (
   @each $name, $variable in $token-map {
     // Only create properties for non-map objects. Some theme tokens are maps in the default themes that we merge with
     @if type-of($variable) != map {
-      #{$prefix}-#{$name}: $variable;
+      #{$prefix}-#{$name}: #{$variable};
     }
   }
 }