(fix) O3 2804: Reuse the ResponsiveWrapper component from esm-framewo…

…rk (openmrs#1673) * (feat) Reuse ResponsiveWrapper component from esm-framework * feat: Added Layer in visit-notes-form * Fix styleguide imports by bumping both openmrs tooling and framework * Misc fixes --------- Co-authored-by: Dennis Kigen <[email protected]>
usamaidrsk · Mar 11, 2024 · 543c7d4 · 543c7d4
1 parent 8bc9cf0
commit 543c7d4
Show file tree

Hide file tree

Showing 101 changed files with 220 additions and 272 deletions.
diff --git a/packages/esm-generic-patient-widgets-app/src/obs-graph/obs-graph.scss b/packages/esm-generic-patient-widgets-app/src/obs-graph/obs-graph.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .label01 {
   @include type.type-style("label-01");
@@ -30,7 +30,7 @@
   :global(.cds--cc--layout-row) {
     height: 0;
   }
-  
+
   :global(.layout-child) {
     margin-top: spacing.$spacing-03;
   }
@@ -45,15 +45,15 @@
 .verticalTabs {
   margin: 1rem 0;
   scroll-behavior: smooth;
-  
+
   > ul {
     flex-direction: column !important;
   }
-  
+
   :global(.cds--tabs--scrollable .cds--tabs--scrollable__nav-item+.cds--tabs--scrollable__nav-item) {
     margin-left: 0rem;
   }
-  
+
   :global(.cds--tabs--scrollable .cds--tabs--scrollable__nav-link) {
     border-bottom: 0 !important;
     border-left: 2px solid $color-gray-30;
@@ -88,7 +88,7 @@
     max-height: fit-content;
     overflow-x: visible;
   }
-  
+
   > button :global(.cds--tabs .cds--tabs__nav-link) {
     border-bottom: none;
   }

diff --git a/packages/esm-generic-patient-widgets-app/src/obs-switchable/obs-switchable.scss b/packages/esm-generic-patient-widgets-app/src/obs-switchable/obs-switchable.scss
@@ -1,5 +1,5 @@
 @use '@carbon/styles/scss/spacing';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .widgetContainer {
   background-color: $ui-background;

diff --git a/packages/esm-patient-allergies-app/src/allergies/allergies-detailed-summary.scss b/packages/esm-patient-allergies-app/src/allergies/allergies-detailed-summary.scss
@@ -1,14 +1,14 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .widgetCard {
   border: 1px solid $ui-03;
 }
 
 .allergyCriticality {
   display: flex;
-  align-items: center; 
+  align-items: center;
   text-transform: uppercase;
 }
 

diff --git a/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.component.tsx b/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.component.tsx
@@ -10,7 +10,6 @@ import {
   FormGroup,
   InlineLoading,
   InlineNotification,
-  Layer,
   RadioButton,
   RadioButtonGroup,
   Row,
@@ -28,6 +27,7 @@ import {
   showToast,
   useConfig,
   useLayoutType,
+  ResponsiveWrapper,
 } from '@openmrs/esm-framework';
 import { type DefaultWorkspaceProps } from '@openmrs/esm-patient-common-lib';
 import {
@@ -211,7 +211,7 @@ function AllergyForm(props: DefaultWorkspaceProps) {
               )}
             />
           )}
-          <ResponsiveWrapper isTablet={isTablet}>
+          <ResponsiveWrapper>
             <FormGroup legendText={t('allergen', 'Allergen')} data-testid="allergens-container">
               <Controller
                 name="allergen"
@@ -233,7 +233,7 @@ function AllergyForm(props: DefaultWorkspaceProps) {
             </FormGroup>
           </ResponsiveWrapper>
           {selectedAllergen?.uuid === otherConceptUuid && (
-            <ResponsiveWrapper isTablet={isTablet}>
+            <ResponsiveWrapper>
               <Controller
                 name="nonCodedAllergen"
                 control={control}
@@ -265,7 +265,7 @@ function AllergyForm(props: DefaultWorkspaceProps) {
             </div>
             {selectedAllergicReactions?.includes(otherConceptUuid) ? (
               <div className={styles.input}>
-                <ResponsiveWrapper isTablet={isTablet}>
+                <ResponsiveWrapper>
                   <Controller
                     name="nonCodedAllergicReaction"
                     control={control}
@@ -322,7 +322,7 @@ function AllergyForm(props: DefaultWorkspaceProps) {
             </FormGroup>
           </div>
           <div>
-            <ResponsiveWrapper isTablet={isTablet}>
+            <ResponsiveWrapper>
               <Controller
                 name="comment"
                 control={control}
@@ -366,10 +366,6 @@ function AllergyForm(props: DefaultWorkspaceProps) {
   );
 }
 
-function ResponsiveWrapper({ children, isTablet }: { children: React.ReactNode; isTablet: boolean }) {
-  return isTablet ? <Layer>{children} </Layer> : <>{children}</>;
-}
-
 function AllergicReactionsField({
   allergicReactions,
   methods: { control, setValue },

diff --git a/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.scss b/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 @import '../../root.scss';
 
 .header {

diff --git a/packages/esm-patient-allergies-app/src/allergies/allergies-overview.scss b/packages/esm-patient-allergies-app/src/allergies/allergies-overview.scss
@@ -1,4 +1,4 @@
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .widgetCard {
   border: 1px solid $ui-03;

diff --git a/packages/esm-patient-allergies-app/src/allergies/allergies-tile.scss b/packages/esm-patient-allergies-app/src/allergies/allergies-tile.scss
@@ -1,5 +1,5 @@
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .label {
   @include type.type-style('label-01');
@@ -14,4 +14,4 @@
 
 .value {
   @include type.type-style('body-compact-01');
-}
+}
diff --git a/packages/esm-patient-allergies-app/src/root.scss b/packages/esm-patient-allergies-app/src/root.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars'; 
+@import '@openmrs/esm-styleguide/src/vars';
 
 .productiveHeading01 {
   @include type.type-style("heading-compact-01");

diff --git a/packages/esm-patient-appointments-app/src/appointments/appointments-base.scss b/packages/esm-patient-appointments-app/src/appointments/appointments-base.scss
@@ -1,7 +1,7 @@
 @use '@carbon/colors';
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 // TO DO Move this styles to style - guide
 // https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-styleguide/src/_vars.scss

diff --git a/packages/esm-patient-appointments-app/src/appointments/upcoming-appointments-card.scss b/packages/esm-patient-appointments-app/src/appointments/upcoming-appointments-card.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .container {
   margin: spacing.$spacing-05;
@@ -20,16 +20,16 @@
       margin: 0rem 0rem;
     }
   }
-  
+
   .input {
     margin: 0rem 1rem 1rem;
   }
- 
+
   .headerLabel {
     @include type.type-style('label-01');
     color: $text-02;
   }
-  
+
   .checkboxContainer {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -44,4 +44,4 @@
     width: 100%;
     max-width: unset;
     padding: '0rem';
-  }
+  }
diff --git a/packages/esm-patient-attachments-app/src/camera-media-uploader/camera-media-uploader.scss b/packages/esm-patient-attachments-app/src/camera-media-uploader/camera-media-uploader.scss
@@ -1,5 +1,5 @@
 @use '@carbon/styles/scss/spacing';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 @import '../root.scss';
 
 .cameraSection {

diff --git a/packages/esm-patient-attachments-app/src/root.scss b/packages/esm-patient-attachments-app/src/root.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .productiveHeading02 {
   @include type.type-style("heading-compact-02");

diff --git a/packages/esm-patient-banner-app/src/banner/patient-banner.scss b/packages/esm-patient-banner-app/src/banner/patient-banner.scss
@@ -1,6 +1,6 @@
 @use '@carbon/colors';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .container {
   border-top: 0.063rem solid $ui-03;
@@ -18,11 +18,11 @@
   .patientName {
     color: $ui-01;
   }
-  
+
   .demographics, .row, .identifierTag, .identifier, .contactDetails .heading {
     color: $ui-02;
   }
-  
+
   .toggleContactDetailsButton, .toggleContactDetailsButton > svg, .actionsButtonText {
     color: colors.$blue-40;
   }

diff --git a/packages/esm-patient-banner-app/src/contact-details/contact-details.scss b/packages/esm-patient-banner-app/src/contact-details/contact-details.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 @mixin container{
   color: $text-02;

diff --git a/packages/esm-patient-banner-app/src/ui-components/overflow-menu.scss b/packages/esm-patient-banner-app/src/ui-components/overflow-menu.scss
@@ -1,5 +1,5 @@
 @use '@carbon/colors';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .container {
   margin-top: -1.25rem;
@@ -36,4 +36,4 @@
 
 .deceased {
   color: colors.$blue-40;
-}
+}
diff --git a/packages/esm-patient-chart-app/src/deceased/base-concept-answer.component.tsx b/packages/esm-patient-chart-app/src/deceased/base-concept-answer.component.tsx
@@ -3,9 +3,9 @@ import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
 import debounce from 'lodash-es/debounce';
 import isEmpty from 'lodash-es/isEmpty';
-import { Layer, RadioButton, RadioButtonGroup, Search } from '@carbon/react';
+import { RadioButton, RadioButtonGroup, Search } from '@carbon/react';
 import { EmptyState, PatientChartPagination } from '@openmrs/esm-patient-common-lib';
-import { useLayoutType, usePagination } from '@openmrs/esm-framework';
+import { useLayoutType, usePagination, ResponsiveWrapper } from '@openmrs/esm-framework';
 import type { ConceptAnswer } from './deceased.resource';
 import styles from './deceased-form.scss';
 
@@ -41,7 +41,7 @@ const BaseConceptAnswer: React.FC<BaseConceptAnswerProps> = ({ onChange, isPatie
         isTablet ? styles.conceptAnswerOverviewWrapperTablet : styles.conceptAnswerOverviewWrapperDesktop,
       )}
     >
-      <ResponsiveWrapper isTablet={isTablet}>
+      <ResponsiveWrapper>
         <Search
           onChange={(event) => handleSearch(event.target.value)}
           placeholder={t('searchForCauseOfDeath', 'Search for a cause of death')}
@@ -83,8 +83,4 @@ const BaseConceptAnswer: React.FC<BaseConceptAnswerProps> = ({ onChange, isPatie
   );
 };
 
-function ResponsiveWrapper({ children, isTablet }: { children: React.ReactNode; isTablet: boolean }) {
-  return isTablet ? <Layer>{children} </Layer> : <>{children}</>;
-}
-
 export default BaseConceptAnswer;
diff --git a/packages/esm-patient-chart-app/src/deceased/deceased-form.component.tsx b/packages/esm-patient-chart-app/src/deceased/deceased-form.component.tsx
@@ -7,14 +7,13 @@ import {
   DatePicker,
   DatePickerInput,
   Form,
-  Layer,
   Row,
   DatePickerSkeleton,
   DataTableSkeleton,
 } from '@carbon/react';
 import { WarningFilled } from '@carbon/react/icons';
 import { type DefaultWorkspaceProps } from '@openmrs/esm-patient-common-lib';
-import { ExtensionSlot, useLayoutType, showSnackbar, showModal } from '@openmrs/esm-framework';
+import { ExtensionSlot, useLayoutType, showSnackbar, showModal, ResponsiveWrapper } from '@openmrs/esm-framework';
 import { markPatientDeceased, usePatientDeathConcepts, usePatientDeceased } from './deceased.resource';
 import BaseConceptAnswer from './base-concept-answer.component';
 
@@ -85,7 +84,7 @@ const MarkPatientDeceasedForm: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
             {!conceptAnswers ? (
               <DatePickerSkeleton />
             ) : (
-              <ResponsiveWrapper isTablet={isTablet}>
+              <ResponsiveWrapper>
                 <DatePicker
                   dateFormat="d/m/Y"
                   datePickerType="single"
@@ -141,8 +140,4 @@ const MarkPatientDeceasedForm: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
   );
 };
 
-function ResponsiveWrapper({ children, isTablet }: { children: React.ReactNode; isTablet: boolean }) {
-  return isTablet ? <Layer>{children} </Layer> : <>{children}</>;
-}
-
 export default MarkPatientDeceasedForm;
diff --git a/packages/esm-patient-chart-app/src/loader/loader.scss b/packages/esm-patient-chart-app/src/loader/loader.scss
@@ -1,5 +1,5 @@
 @use '@carbon/styles/scss/spacing';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .loading {
   display: flex;

diff --git a/packages/esm-patient-chart-app/src/patient-chart/action-menu/action-menu.scss b/packages/esm-patient-chart-app/src/patient-chart/action-menu/action-menu.scss
@@ -1,5 +1,5 @@
 @use '@carbon/styles/scss/spacing';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 $icon-button-size: 2.5rem;
 $actionPanelOffset: 3rem;

diff --git a/packages/esm-patient-chart-app/src/patient-chart/chart-review/dashboard-view.scss b/packages/esm-patient-chart-app/src/patient-chart/chart-review/dashboard-view.scss
@@ -1,5 +1,5 @@
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 @import "../../root.scss";
 
 .dashboardTitle {

diff --git a/packages/esm-patient-chart-app/src/patient-chart/patient-chart.scss b/packages/esm-patient-chart-app/src/patient-chart/patient-chart.scss
@@ -1,5 +1,5 @@
 @use '@carbon/styles/scss/spacing';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 $actionNavOffset: 45px;
 $actionPanelOffset: 256px;

diff --git a/packages/esm-patient-chart-app/src/patient-details-tile/patient-details-tile.scss b/packages/esm-patient-chart-app/src/patient-details-tile/patient-details-tile.scss
@@ -1,5 +1,5 @@
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .container:after {
 	content: '';
@@ -20,5 +20,5 @@
 
 .name {
 	@include type.type-style('body-compact-02');
-	
+
 }
diff --git a/packages/esm-patient-chart-app/src/root.scss b/packages/esm-patient-chart-app/src/root.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 :root {
   --bottom-nav-height: 4rem;

diff --git a/packages/esm-patient-chart-app/src/visit-header/close-button.scss b/packages/esm-patient-chart-app/src/visit-header/close-button.scss
@@ -1,5 +1,5 @@
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .headerGlobalBarCloseButton {
   @include brand-02(background-color);
-}
+}