(fix) Standardize modal header close button styles (#1420)

Standardizes the positioning and styling of modal close buttons across the application by: - Adding consistent modal header styles across all modals - Positioning close buttons absolutely in the top-right corner - Adding hover state styling for close buttons - Fixing popover positioning for left-aligned modals This change affects modals in: - Appointments app - Bed management app - Patient registration app - Service queues app This resolves an issue that we think is caused by Carbon version mismatches. The hope is that this [pull request](openmrs/openmrs-esm-core#1215) in Core will fix the issue more permanently.
openmrs · Dec 18, 2024 · 255c56a · 255c56a
1 parent 1fc1d37
commit 255c56a
Show file tree

Hide file tree

Showing 24 changed files with 355 additions and 14 deletions.
diff --git a/packages/esm-appointments-app/src/patient-appointments/patient-appointments-cancel.modal.tsx b/packages/esm-appointments-app/src/patient-appointments/patient-appointments-cancel.modal.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
 import { showSnackbar } from '@openmrs/esm-framework';
 import { changeAppointmentStatus, usePatientAppointments } from './patient-appointments.resource';
+import styles from './patient-appointments-cancel.scss';
 
 interface PatientCancelAppointmentModalProps {
   closeCancelModal: () => void;
@@ -47,7 +48,11 @@ const PatientCancelAppointmentModal: React.FC<PatientCancelAppointmentModalProps
 
   return (
     <div>
-      <ModalHeader closeModal={closeCancelModal} title={t('cancelAppointment', 'Cancel appointment')} />
+      <ModalHeader
+        className={styles.modalHeader}
+        closeModal={closeCancelModal}
+        title={t('cancelAppointment', 'Cancel appointment')}
+      />
       <ModalBody>
         <p>{t('cancelAppointmentModalConfirmationText', 'Are you sure you want to cancel this appointment?')}</p>
       </ModalBody>

diff --git a/packages/esm-appointments-app/src/patient-appointments/patient-appointments-cancel.scss b/packages/esm-appointments-app/src/patient-appointments/patient-appointments-cancel.scss
@@ -0,0 +1,29 @@
+@use '@carbon/layout';
+
+.modalHeader {
+  :global {
+    .cds--modal-close-button {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      margin: 0;
+      margin-top: calc(-1 * #{layout.$spacing-05});
+    }
+
+    .cds--modal-close {
+      background-color: rgba(0, 0, 0, 0);
+
+      &:hover {
+        background-color: var(--cds-layer-hover);
+      }
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-content {
+      transform: translate(-4rem, 0.85rem);
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-caret {
+      transform: translate(-3.75rem, 1.25rem);
+    }
+  }
+}
diff --git a/packages/esm-bed-management-app/src/bed-administration/bed-administration-form.component.tsx b/packages/esm-bed-management-app/src/bed-administration/bed-administration-form.component.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useState } from 'react';
 import capitalize from 'lodash-es/capitalize';
 import { z } from 'zod';
 import { useForm, Controller } from 'react-hook-form';
@@ -24,6 +24,7 @@ import { useTranslation } from 'react-i18next';
 import { getCoreTranslation, type Location } from '@openmrs/esm-framework';
 import { type BedAdministrationData } from './bed-administration-types';
 import { type BedType, type BedFormData } from '../types';
+import styles from '../modals.scss';
 
 interface BedAdministrationFormProps {
   allLocations: Location[];
@@ -115,7 +116,7 @@ const BedAdministrationForm: React.FC<BedAdministrationFormProps> = ({
   return (
     // TODO: Port this over to the modal system or create individual modals for each form
     <ComposedModal open={showModal} onClose={() => onModalChange(false)} preventCloseOnClickOutside>
-      <ModalHeader title={headerTitle} />
+      <ModalHeader className={styles.modalHeader} title={headerTitle} />
       <ModalBody hasScrollingContent>
         <Form>
           <Stack gap={3}>

diff --git a/packages/esm-bed-management-app/src/bed-tag/bed-tags-admin-form.component.tsx b/packages/esm-bed-management-app/src/bed-tag/bed-tags-admin-form.component.tsx
@@ -17,6 +17,7 @@ import {
 import { useTranslation } from 'react-i18next';
 import { getCoreTranslation, type Location } from '@openmrs/esm-framework';
 import type { BedTagData } from '../types';
+import styles from '../modals.scss';
 
 const BedTagAdministrationSchema = z.object({
   name: z.string().max(255),
@@ -76,7 +77,7 @@ const BedTagsAdministrationForm: React.FC<BedTagAdministrationFormProps> = ({
 
   return (
     <ComposedModal open={showModal} onClose={() => onModalChange(false)} preventCloseOnClickOutside>
-      <ModalHeader title={headerTitle} />
+      <ModalHeader className={styles.modalHeader} title={headerTitle} />
       <ModalBody hasScrollingContent>
         <Form>
           <Stack gap={3}>

diff --git a/packages/esm-bed-management-app/src/bed-type/bed-type-admin-form.component.tsx b/packages/esm-bed-management-app/src/bed-type/bed-type-admin-form.component.tsx
@@ -18,6 +18,7 @@ import {
 import { useTranslation } from 'react-i18next';
 import { getCoreTranslation, type Location } from '@openmrs/esm-framework';
 import type { BedType, BedTypeData } from '../types';
+import styles from '../modals.scss';
 
 const BedTypeAdministrationSchema = z.object({
   name: z.string().max(255),
@@ -80,7 +81,7 @@ const BedTypeAdministrationForm: React.FC<BedAdministrationFormProps> = ({
 
   return (
     <ComposedModal open={showModal} onClose={() => onModalChange(false)} preventCloseOnClickOutside>
-      <ModalHeader title={headerTitle} />
+      <ModalHeader className={styles.modalHeader} title={headerTitle} />
       <ModalBody hasScrollingContent>
         <Form>
           <Stack gap={3}>

diff --git a/packages/esm-bed-management-app/src/modals.scss b/packages/esm-bed-management-app/src/modals.scss
@@ -0,0 +1,29 @@
+@use '@carbon/layout';
+
+.modalHeader {
+  :global {
+    .cds--modal-close-button {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      margin: 0;
+      margin-top: calc(-1 * #{layout.$spacing-05});
+    }
+
+    .cds--modal-close {
+      background-color: rgba(0, 0, 0, 0);
+
+      &:hover {
+        background-color: var(--cds-layer-hover);
+      }
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-content {
+      transform: translate(-4rem, 0.85rem);
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-caret {
+      transform: translate(-3.75rem, 1.25rem);
+    }
+  }
+}
diff --git a/packages/esm-patient-registration-app/src/widgets/cancel-patient-edit.modal.tsx b/packages/esm-patient-registration-app/src/widgets/cancel-patient-edit.modal.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import styles from './cancel-patient-edit.scss';
 
 interface CancelPatientEditPropsModal {
   close(): void;
@@ -12,6 +13,7 @@ const CancelPatientEditModal: React.FC<CancelPatientEditPropsModal> = ({ close,
   return (
     <>
       <ModalHeader
+        className={styles.modalHeader}
         closeModal={close}
         title={t('confirmDiscardChangesTitle', 'Are you sure you want to discard these changes?')}
       />

diff --git a/packages/esm-patient-registration-app/src/widgets/cancel-patient-edit.scss b/packages/esm-patient-registration-app/src/widgets/cancel-patient-edit.scss
@@ -0,0 +1,29 @@
+@use '@carbon/layout';
+
+.modalHeader {
+  :global {
+    .cds--modal-close-button {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      margin: 0;
+      margin-top: calc(-1 * #{layout.$spacing-05});
+    }
+
+    .cds--modal-close {
+      background-color: rgba(0, 0, 0, 0);
+
+      &:hover {
+        background-color: var(--cds-layer-hover);
+      }
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-content {
+      transform: translate(-4rem, 0.85rem);
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-caret {
+      transform: translate(-3.75rem, 1.25rem);
+    }
+  }
+}
diff --git a/packages/esm-patient-registration-app/src/widgets/delete-identifier-confirmation.modal.tsx b/packages/esm-patient-registration-app/src/widgets/delete-identifier-confirmation.modal.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, ModalBody, ModalHeader, ModalFooter } from '@carbon/react';
+import styles from './delete-identifier-confirmation.scss';
 
 interface DeleteIdentifierConfirmationModalProps {
   closeModal: () => void;
@@ -20,6 +21,7 @@ const DeleteIdentifierConfirmationModal: React.FC<DeleteIdentifierConfirmationMo
   return (
     <>
       <ModalHeader
+        className={styles.modalHeader}
         closeModal={closeModal}
         title={t('deleteIdentifierModalHeading', 'Delete identifier?')}></ModalHeader>
       <ModalBody>

diff --git a/packages/esm-patient-registration-app/src/widgets/delete-identifier-confirmation.scss b/packages/esm-patient-registration-app/src/widgets/delete-identifier-confirmation.scss
@@ -0,0 +1,29 @@
+@use '@carbon/layout';
+
+.modalHeader {
+  :global {
+    .cds--modal-close-button {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      margin: 0;
+      margin-top: calc(-1 * #{layout.$spacing-05});
+    }
+
+    .cds--modal-close {
+      background-color: rgba(0, 0, 0, 0);
+
+      &:hover {
+        background-color: var(--cds-layer-hover);
+      }
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-content {
+      transform: translate(-4rem, 0.85rem);
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-caret {
+      transform: translate(-3.75rem, 1.25rem);
+    }
+  }
+}
diff --git a/packages/esm-service-queues-app/src/active-visits/change-status-dialog.component.tsx b/packages/esm-service-queues-app/src/active-visits/change-status-dialog.component.tsx
@@ -106,14 +106,21 @@ const ChangeStatus: React.FC<ChangeStatusDialogProps> = ({ queueEntry, closeModa
   const onError = (errors) => console.error(errors);
 
   if (Object.keys(queueEntry)?.length === 0) {
-    return <ModalHeader closeModal={closeModal} title={t('patientNotInQueue', 'The patient is not in the queue')} />;
+    return (
+      <ModalHeader
+        className={styles.modalHeader}
+        closeModal={closeModal}
+        title={t('patientNotInQueue', 'The patient is not in the queue')}
+      />
+    );
   }
 
   if (Object.keys(queueEntry)?.length > 0) {
     return (
       <div>
         <Form onSubmit={handleSubmit(onSubmit, onError)}>
           <ModalHeader
+            className={styles.modalHeader}
             closeModal={closeModal}
             title={t('movePatientToNextService', 'Move patient to the next service?')}
           />

diff --git a/packages/esm-service-queues-app/src/active-visits/change-status-dialog.scss b/packages/esm-service-queues-app/src/active-visits/change-status-dialog.scss
@@ -1,6 +1,6 @@
+@use '@carbon/colors';
 @use '@carbon/layout';
 @use '@carbon/type';
-@use '@carbon/colors';
 
 .radioButtonGroup {
   display: flex;
@@ -45,3 +45,31 @@ section {
   color: colors.$red-60;
   @include type.type-style('label-01');
 }
+
+.modalHeader {
+  :global {
+    .cds--modal-close-button {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      margin: 0;
+      margin-top: calc(-1 * #{layout.$spacing-05});
+    }
+
+    .cds--modal-close {
+      background-color: rgba(0, 0, 0, 0);
+
+      &:hover {
+        background-color: var(--cds-layer-hover);
+      }
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-content {
+      transform: translate(-4rem, 0.85rem);
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-caret {
+      transform: translate(-3.75rem, 1.25rem);
+    }
+  }
+}
diff --git a/.../esm-service-queues-app/src/add-provider-queue-room/add-provider-queue-room.component.tsx b/.../esm-service-queues-app/src/add-provider-queue-room/add-provider-queue-room.component.tsx
@@ -140,7 +140,11 @@ const AddProviderQueueRoom: React.FC<AddProviderQueueRoomProps> = ({ closeModal,
 
   return (
     <div>
-      <ModalHeader closeModal={closeModal} title={t('addAProviderQueueRoom', 'Add a provider queue room?')} />
+      <ModalHeader
+        className={styles.modalHeader}
+        closeModal={closeModal}
+        title={t('addAProviderQueueRoom', 'Add a provider queue room?')}
+      />
       <ModalBody>
         <Form onSubmit={onSubmit}>
           <section className={styles.section}>

diff --git a/packages/esm-service-queues-app/src/add-provider-queue-room/add-provider-queue-room.scss b/packages/esm-service-queues-app/src/add-provider-queue-room/add-provider-queue-room.scss
@@ -2,6 +2,34 @@
 @use '@carbon/type';
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
+.modalHeader {
+  :global {
+    .cds--modal-close-button {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      margin: 0;
+      margin-top: calc(-1 * #{layout.$spacing-05});
+    }
+
+    .cds--modal-close {
+      background-color: rgba(0, 0, 0, 0);
+
+      &:hover {
+        background-color: var(--cds-layer-hover);
+      }
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-content {
+      transform: translate(-4rem, 0.85rem);
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-caret {
+      transform: translate(-3.75rem, 1.25rem);
+    }
+  }
+}
+
 .section {
   margin: layout.$spacing-03;
 }

diff --git a/...ervice-queues-app/src/clear-queue-entries-dialog/clear-queue-entries-dialog.component.tsx b/...ervice-queues-app/src/clear-queue-entries-dialog/clear-queue-entries-dialog.component.tsx
@@ -45,6 +45,7 @@ const ClearQueueEntriesDialog: React.FC<ClearQueueEntriesDialogProps> = ({ queue
   return (
     <div>
       <ModalHeader
+        className={styles.modalHeader}
         closeModal={closeModal}
         label={t('serviceQueue', 'Service queue')}
         title={t('clearAllQueueEntries', 'Clear all queue entries?')}

diff --git a/...ges/esm-service-queues-app/src/clear-queue-entries-dialog/clear-queue-entries-dialog.scss b/...ges/esm-service-queues-app/src/clear-queue-entries-dialog/clear-queue-entries-dialog.scss
@@ -1,7 +1,36 @@
+@use '@carbon/layout';
 @use '@carbon/type';
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
 #subHeading {
   @include type.type-style('heading-compact-01');
   color: $ui-05;
 }
+
+.modalHeader {
+  :global {
+    .cds--modal-close-button {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      margin: 0;
+      margin-top: calc(-1 * #{layout.$spacing-05});
+    }
+
+    .cds--modal-close {
+      background-color: rgba(0, 0, 0, 0);
+
+      &:hover {
+        background-color: var(--cds-layer-hover);
+      }
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-content {
+      transform: translate(-4rem, 0.85rem);
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-caret {
+      transform: translate(-3.75rem, 1.25rem);
+    }
+  }
+}