(chore) Bump carbon/react to v1.71.0 in esm-core

e2e/specs/login.spec.ts

@@ -18,7 +18,7 @@ test('Login as Admin user', async ({ page }) => {
   });
 
   await test.step('And I enter my password', async () => {
-    await page.getByLabel(/password/i).fill(`${process.env.E2E_USER_ADMIN_PASSWORD}`);
+    await page.getByLabel(/^password$/i).fill(`${process.env.E2E_USER_ADMIN_PASSWORD}`);
   });
 
   await test.step('And I click the `Log in` button', async () => {

packages/apps/esm-devtools-app/package.json

@@ -53,7 +53,7 @@
     "webpack": "^5.88.0"
   },
   "dependencies": {
-    "@carbon/react": "1.37.0",
+    "@carbon/react": "^1.71.0",
     "fuzzy": "^0.1.3"
   }
 }

packages/apps/esm-devtools-app/src/devtools/devtools-popup.styles.scss

@@ -1,4 +1,5 @@
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .popup {
   position: fixed;
@@ -19,20 +20,20 @@
 
 .tabList {
   position: fixed;
-  height: 4rem;
+  height: layout.$spacing-10;
   width: 100%;
   z-index: 1000;
   background-color: black;
 }
 
 .tabPanels {
-  padding: 1.5rem;
+  padding: layout.$spacing-06;
 }
 
 .farRight {
   position: absolute;
-  right: 24px;
-  top: 16px;
+  right: layout.$spacing-06;
+  top: layout.$spacing-05;
   display: flex;
   z-index: 1000;
 }

packages/apps/esm-devtools-app/src/devtools/devtools.component.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { type AppProps } from 'single-spa';
 import { importMapOverridden } from './import-map.component';
 import DevToolsPopup from './devtools-popup.component';
-import styles from './devtools.styles.css';
+import styles from './devtools.styles.scss';
 
 export default function Root(props: AppProps) {
   return window.spaEnv === 'development' || Boolean(localStorage.getItem('openmrs:devtools')) ? (

packages/apps/esm-devtools-app/src/devtools/devtools.styles.scss

@@ -0,0 +1,20 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+
+.devtoolsTriggerButton {
+  z-index: 7900;
+  background-color: colors.$gray-30;
+  height: layout.$spacing-08 !important;
+  width: layout.$spacing-08 !important;
+  bottom: layout.$spacing-11;
+  right: layout.$spacing-02;
+  position: fixed;
+  border-radius: layout.$spacing-02;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.overridden {
+  background-color: colors.$red-60;
+}

packages/apps/esm-devtools-app/src/devtools/import-map-list/import-map.scss

@@ -1,3 +1,5 @@
+@use '@carbon/layout';
+
 .spacer {
-  margin: 0.5rem 0;
+  margin: layout.$spacing-03 0;
 }

packages/apps/esm-devtools-app/src/devtools/import-map-list/list.scss

@@ -1,9 +1,9 @@
-@use '@carbon/styles/scss/colors';
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
 
 .imoListContainer {
-  margin: 0 spacing.$spacing-04 0 spacing.$spacing-04;
+  margin: 0 layout.$spacing-04 0 layout.$spacing-04;
   height: 50vh;
 }
 
@@ -13,28 +13,28 @@
   justify-content: left;
 
   > * + * {
-    margin: 0 spacing.$spacing-03;
+    margin: 0 layout.$spacing-03;
   }
 }
 
 .imoSearchBox {
   width: auto;
   min-width: 12rem;
-  margin-right: spacing.$spacing-03;
+  margin-right: layout.$spacing-03;
 }
 
 .imoTable {
   // 50vh is the container size - size of the header
-  max-height: calc(50vh - spacing.$spacing-09 - 12px);
+  max-height: calc(50vh - layout.$spacing-09 - layout.$spacing-04);
 }
 
 .imoStatus {
-  height: spacing.$spacing-04;
-  width: spacing.$spacing-04;
-  border-radius: spacing.$spacing-03;
+  height: layout.$spacing-04;
+  width: layout.$spacing-04;
+  border-radius: layout.$spacing-03;
   border: 1px solid colors.$gray-100;
-  margin-top: spacing.$spacing-02;
-  margin-right: spacing.$spacing-03;
+  margin-top: layout.$spacing-02;
+  margin-right: layout.$spacing-03;
 }
 
 .imoNextOverride {

packages/apps/esm-help-menu-app/package.json

@@ -53,7 +53,7 @@
     "webpack": "^5.88.0"
   },
   "dependencies": {
-    "@carbon/react": "1.37.0",
+    "@carbon/react": "^1.71.0",
     "fuzzy": "^0.1.3"
   }
 }

packages/apps/esm-help-menu-app/src/help-menu/components/styles.scss

@@ -1,6 +1,6 @@
 @use '@carbon/layout';
 @use '@carbon/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .helpButton {
   display: flex;

packages/apps/esm-help-menu-app/src/help-menu/help-popup.styles.scss

@@ -1,31 +1,31 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .popup {
   position: fixed;
   flex: auto;
-  bottom: 2rem;
-  right: 3rem;
+  bottom: layout.$spacing-07;
+  right: layout.$spacing-09;
   width: 11rem;
   z-index: 8000;
   background-color: $ui-02;
-  gap: spacing.$spacing-05;
-  padding: spacing.$spacing-02;
-  margin: spacing.$spacing-02;
-  box-shadow: 0 12px 24px 0 $ui-03;
+  gap: layout.$spacing-05;
+  padding: layout.$spacing-02;
+  margin: layout.$spacing-02;
+  box-shadow: 0 layout.$spacing-04 layout.$spacing-06 0 $ui-03;
 }
 
 .popup {
   @include type.type-style('body-01');
 }
 
 .helpextension {
-  margin: spacing.$spacing-04;
-  padding: spacing.$spacing-01;
+  margin: layout.$spacing-04;
+  padding: layout.$spacing-01;
   cursor: pointer;
   text-align: left;
   display: flex;
   flex-direction: column;
-  gap: spacing.$spacing-05;
+  gap: layout.$spacing-05;
 }

packages/apps/esm-help-menu-app/src/help-menu/help.styles.scss

@@ -4,14 +4,14 @@
 .helpMenuButton {
   z-index: 7900;
   background-color: white;
-  height: 2.5rem !important;
-  width: 2.5rem !important;
+  height: layout.$spacing-08 !important;
+  width: layout.$spacing-08 !important;
   bottom: layout.$spacing-05;
   position: fixed;
   display: flex;
   justify-content: center;
   align-items: center;
-  right: 0.25rem;
+  right: layout.$spacing-02;
   border: none;
   box-shadow:
     0 1px 3px rgba(0, 0, 0, 0.1),

packages/apps/esm-implementer-tools-app/package.json

@@ -38,7 +38,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@carbon/react": "~1.37.0",
+    "@carbon/react": "^1.71.0",
     "lodash-es": "^4.17.21"
   },
   "peerDependencies": {

packages/apps/esm-implementer-tools-app/src/backend-dependencies/backend-dependencies.styles.scss

@@ -1,4 +1,4 @@
-@use '@carbon/styles/scss/type';
+@use '@carbon/type';
 
 .container {
   height: 50vh;

packages/apps/esm-implementer-tools-app/src/configuration/configuration.styles.scss

@@ -1,8 +1,7 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@use '@carbon/react/scss/theme';
-@import '~@openmrs/esm-styleguide/src/vars';
-@import '../implementer-tools.styles.scss';
+@use '@carbon/layout';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .tools {
   width: 100%;
@@ -15,7 +14,7 @@
 }
 
 .toolbar {
-  padding: spacing.$spacing-05 spacing.$spacing-05 0;
+  padding: layout.$spacing-05 layout.$spacing-05 0;
   display: flex;
   justify-content: space-around;
   align-items: center;
@@ -24,14 +23,14 @@
 .row {
   display: flex;
   flex-flow: row wrap;
-  margin: 0 -1rem;
+  margin: 0 (-(layout.$spacing-05));
 
   :global(.cds--col) {
     max-width: 100%;
     flex-basis: 0;
     flex-grow: 1;
     width: 100%;
-    padding: 0 1rem;
+    padding: 0 layout.$spacing-05;
   }
 }
 
@@ -77,21 +76,21 @@
   width: 35%;
   background-color: theme.$background;
   color: theme.$text-secondary;
-  padding: spacing.$spacing-05 2em;
+  padding: layout.$spacing-05 layout.$spacing-07;
   font-size: 12pt;
   overflow-wrap: break-word;
   overflow-y: auto;
 }
 
 .configTreePane :global(.cds--text-input-wrapper) {
-  min-width: 8em;
+  min-width: 8rem;
 }
 
 .toggleToolbarButton {
   width: 100%;
   display: flex;
   justify-content: flex-end;
-  padding: 0.25rem;
+  padding: layout.$spacing-02;
 }
 
 .toggleButtons {
@@ -106,6 +105,6 @@
   justify-content: flex-end;
 
   > button {
-    margin: 0 1rem;
+    margin: 0 layout.$spacing-05;
   }
 }

packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/description.styles.scss

@@ -1,26 +1,29 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
-@import '../../implementer-tools.styles.scss';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.productiveHeading01 {
+  @include type.type-style('heading-compact-01');
+}
 
 .path {
   @include type.type-style('heading-02');
-  margin-bottom: spacing.$spacing-03;
+  margin-bottom: layout.$spacing-03;
 }
 
 .description {
   @include type.type-style('body-compact-01');
-  margin-bottom: spacing.$spacing-05;
+  margin-bottom: layout.$spacing-05;
 }
 
 .source {
   @include type.type-style('body-compact-01');
   font-style: italic;
-  margin-bottom: spacing.$spacing-03;
+  margin-bottom: layout.$spacing-03;
 }
 
 .value {
   font-family: monospace;
-  margin-top: spacing.$spacing-03;
-  margin-left: spacing.$spacing-03;
+  margin-top: layout.$spacing-03;
+  margin-left: layout.$spacing-03;
 }

packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/display-value.scss

@@ -1,6 +1,6 @@
-@use '@carbon/styles/scss/spacing';
-@import '../../implementer-tools.styles.scss';
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .smallListCell {
-  padding: spacing.$spacing-03;
+  padding: layout.$spacing-03;
 }

packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/editable-value.styles.scss

@@ -1,5 +1,6 @@
-@use '@carbon/styles/scss/spacing';
-@import '../../implementer-tools.styles.scss';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .secretButton {
   background: none;
@@ -10,7 +11,7 @@
 }
 
 .error {
-  margin-left: 1em;
+  margin-left: layout.$spacing-05;
   color: orange;
   font-size: 11pt;
 }
@@ -25,5 +26,5 @@
 }
 
 .editValueButton {
-  margin-left: spacing.$spacing-05;
+  margin-left: layout.$spacing-05;
 }