@openmrs/esm-implementer-tools-app 6.2.1-pre.2830 → 6.2.1-pre.2836

package/src/backend-dependencies/backend-dependencies.styles.scss

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

package/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;
   }
 }

package/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;
 }

package/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;
 }

package/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;
 }

package/src/configuration/interactive-editor/layout/layout.styles.scss

@@ -1,15 +1,16 @@
+@use '@carbon/layout';
 @use '@carbon/react/scss/theme';
 
 .labelCell {
-  width: 12em;
+  width: 12rem;
 }
 
 .label {
-  scroll-margin-top: 6em;
+  scroll-margin-top: layout.$spacing-12;
 }
 
 .structuredList {
-  margin-bottom: 1em;
+  margin-bottom: layout.$spacing-05;
 }
 
 .structuredListRow {
@@ -20,5 +21,5 @@
 }
 
 .subtreeCell {
-  left: -6em;
+  left: -(layout.$spacing-12);
 }

package/src/configuration/interactive-editor/layout/tree-container.component.tsx

@@ -1,5 +1,4 @@
-import type { ReactNode } from 'react';
-import React from 'react';
+import React, { type ReactNode } from 'react';
 import { StructuredListBody, StructuredListWrapper } from '@carbon/react';
 import styles from './layout.styles.scss';
 

package/src/configuration/interactive-editor/value-editor.scss

@@ -1,9 +1,9 @@
-@use '@carbon/styles/scss/spacing';
+@use '@carbon/layout';
 @use '@carbon/styles/scss/components/button';
-@import '../../implementer-tools.styles.scss';
 
 .valueEditorButtons {
-  margin-top: spacing.$spacing-03;
+  margin-top: layout.$spacing-03;
+
   :global(.cds--btn--primary) {
     background-color: button.$button-primary;
     &:hover {

package/src/configuration/interactive-editor/value-editors/array-editor.styles.scss

@@ -1,11 +1,12 @@
+@use '@carbon/layout';
 @use '@carbon/styles/scss/components/button';
 
 .arrayEditor {
   :global(.cds--structured-list) {
-    margin-bottom: 0.25rem;
+    margin-bottom: layout.$spacing-02;
   }
   :global(.cds--structured-list-td) {
-    padding: 0.25rem 3rem 0.25rem 1rem;
+    padding: layout.$spacing-02 layout.$spacing-09 layout.$spacing-02 layout.$spacing-05;
   }
   :global(.cds--btn--primary) {
     background-color: button.$button-primary;

package/src/configuration/interactive-editor/value-editors/concept-search.styles.scss

@@ -1,12 +1,11 @@
-@use '@carbon/styles/scss/type';
-@use '@carbon/styles/scss/spacing';
-@import '../../implementer-tools.styles.scss';
+@use '@carbon/layout';
+@use '@carbon/type';
 
 .activeConceptUuid {
   @include type.type-style('body-compact-01');
   color: $ui-05;
-  margin-bottom: spacing.$spacing-03;
-  padding-bottom: spacing.$spacing-03;
+  margin-bottom: layout.$spacing-03;
+  padding-bottom: layout.$spacing-03;
   border-bottom: 1px solid $ui-03;
 }
 
@@ -14,7 +13,7 @@
 .autocomplete > [role='combobox'] {
   display: flex;
   position: relative;
-  width: 20em;
+  width: 20rem;
 }
 
 .autocomplete [role='listbox'] {
@@ -27,10 +26,10 @@
 }
 
 .autocomplete li {
-  line-height: 0.75rem;
-  padding: 0.5em;
+  line-height: layout.$spacing-04;
+  padding: layout.$spacing-03;
   display: block;
-  border-bottom: 0.125rem solid #718096;
+  border-bottom: layout.$spacing-01 solid #718096;
   outline: 0;
   margin: 0;
   color: #000;

package/src/configuration/interactive-editor/value-editors/object-editor.styles.scss

@@ -0,0 +1,13 @@
+@use '@carbon/layout';
+
+.objectEditor :global(.cds--structured-list-td) {
+  padding: layout.$spacing-02 layout.$spacing-07 layout.$spacing-02 layout.$spacing-05;
+}
+
+.objectEditor :global(.cds--structured-list) {
+  margin-bottom: layout.$spacing-02;
+}
+
+.buttonCell {
+  text-align: right;
+}

package/src/configuration/interactive-editor/value-editors/object-editor.tsx

@@ -4,7 +4,7 @@ import { ValueEditorField } from './value-editor-field';
 import type { ConfigValueDescriptor } from '../editable-value.component';
 import { Type } from '@openmrs/esm-framework';
 import cloneDeep from 'lodash-es/cloneDeep';
-import styles from './object-editor.styles.css';
+import styles from './object-editor.styles.scss';
 
 interface ObjectEditorProps {
   element: ConfigValueDescriptor;

package/src/configuration/interactive-editor/value-editors/patient-identifier-type-search.tsx

@@ -1,10 +1,10 @@
 import React, { useState, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Search, StructuredListCell, StructuredListRow, StructuredListWrapper } from '@carbon/react';
 import uniqueId from 'lodash-es/uniqueId';
 import type { PatientIdentifierType } from './patient-identifier-type.resource';
 import { usePatientIdentifierTypes } from './patient-identifier-type.resource';
 import styles from './uuid-search.scss';
-import { useTranslation } from 'react-i18next';
-import { Search, StructuredListCell, StructuredListRow, StructuredListWrapper } from '@carbon/react';
 
 interface PatientIdentifierTypeSearchBoxProps {
   value: string;

package/src/configuration/interactive-editor/value-editors/uuid-search.scss

@@ -1,36 +1,40 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '../../../implementer-tools.styles.scss';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.bodyShort01 {
+  @include type.type-style('body-compact-01');
+}
 
 .activeUuid {
   @include type.type-style('body-compact-01');
   color: $ui-05;
-  margin-bottom: spacing.$spacing-03;
-  padding-bottom: spacing.$spacing-03;
+  margin-bottom: layout.$spacing-03;
+  padding-bottom: layout.$spacing-03;
   border-bottom: 1px solid $ui-03;
 }
 
 .autocomplete,
 .autocomplete > [role='combobox'] {
   position: relative;
-  width: 20em;
+  width: 20rem;
 }
 
 .listbox {
-  box-shadow: 0 0 spacing.$spacing-03;
+  box-shadow: 0 0 layout.$spacing-03;
 }
 
 .smallListCell {
-  padding: spacing.$spacing-03;
+  padding: layout.$spacing-03;
 }
 
 .loader {
-  margin: 1rem;
+  margin: layout.$spacing-05;
 }
 
 .emptyResults {
   @include type.type-style('body-compact-01');
   background-color: $ui-02;
   color: $text-02;
-  min-height: 1rem;
+  min-height: layout.$spacing-05;
 }

package/src/configuration/json-editor/json-editor.scss

@@ -1,4 +1,5 @@
 @use '@carbon/colors';
+@use '@carbon/layout';
 @use '@carbon/react/scss/theme';
 @use '@carbon/styles/scss/components/button';
 
@@ -18,7 +19,7 @@
   display: flex;
   align-items: center;
   width: 100%;
-  padding-left: 2em;
+  padding-left: layout.$spacing-07;
 }
 
 .errorBackground {

package/src/feature-flags/feature-flags.scss

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

package/src/frontend-modules/frontend-modules.component.tsx

@@ -10,8 +10,8 @@ import {
   TableHeader,
   TableRow,
 } from '@carbon/react';
-import styles from './frontend-modules.scss';
 import type { FrontendModule } from '../types';
+import styles from './frontend-modules.scss';
 
 export interface FrontendModulesProps {
   frontendModules: Array<FrontendModule>;

package/src/frontend-modules/frontend-modules.scss

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

package/src/implementer-tools.component.tsx

@@ -1,10 +1,9 @@
 import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { showToast, UserHasAccess, useStore } from '@openmrs/esm-framework';
 import { implementerToolsStore, showModuleDiagnostics, togglePopup } from './store';
-
-import { useBackendDependencies } from './backend-dependencies/useBackendDependencies';
 import { hasInvalidDependencies } from './backend-dependencies/openmrs-backend-dependencies';
-import { useTranslation } from 'react-i18next';
+import { useBackendDependencies } from './backend-dependencies/useBackendDependencies';
 import { useFrontendModules } from './hooks';
 import styles from './implementer-tools.styles.scss';
 

package/src/implementer-tools.styles.scss

@@ -1,35 +1,21 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
+@use '@carbon/layout';
 @use '@carbon/react/scss/themes';
 @use '@carbon/react/scss/theme';
-@import '~@openmrs/esm-styleguide/src/vars';
-
-.productiveHeading01 {
-  @include type.type-style('heading-compact-01');
-}
-
-.productiveHeading02 {
-  @include type.type-style('heading-compact-02');
-}
-
-.bodyShort01 {
-  @include type.type-style('body-compact-01');
-}
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .toolStyles {
   background-color: transparent;
 }
 
-// Chevron button - implementer-tools component
 .chevronImplementerToolsButton {
   position: fixed;
   bottom: 0;
-  left: calc(50vw - spacing.$spacing-05);
+  left: calc(50vw - layout.$spacing-05);
   z-index: 9999;
 
   div {
     background-color: $ui-02;
-    width: spacing.$spacing-07;
+    width: layout.$spacing-07;
     display: flex;
     justify-content: center;
     cursor: pointer;
@@ -37,7 +23,7 @@
   }
 
   div:hover {
-    padding: spacing.$spacing-03 0;
+    padding: layout.$spacing-03 0;
   }
 }
 

package/src/popup/popup.styles.scss

@@ -1,5 +1,7 @@
+@use '@carbon/layout';
+@use '@carbon/react/scss/themes';
 @use '@carbon/react/scss/theme';
-@import '../implementer-tools.styles.scss';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .popup {
   position: fixed;

package/src/ui-editor/styles.scss

@@ -85,10 +85,3 @@
   right: layout.$spacing-05;
   z-index: 999999;
 }
-
-.popover {
-  z-index: 7900;
-  top: layout.$spacing-11;
-  right: layout.$spacing-09;
-  position: fixed;
-}

package/src/ui-editor/ui-editor.tsx

@@ -189,7 +189,6 @@ export function ExitButton({ t }: ExitButtonProps) {
       renderIcon={(props) => <CloseIcon {...props} size={16} />}
       size="sm"
       tooltipPosition="left"
-      wrapperClasses={styles.popover}
     />
   );
 }