From e292c814205f1b3f15c4601f123e5dfcae7c27a7 Mon Sep 17 00:00:00 2001 From: Dennis Kigen Date: Fri, 14 Feb 2025 10:08:51 +0300 Subject: [PATCH 1/2] (feat) Patient banner styling refinements Refines the Patient Banner layout and visual consistency with the following changes: - Sets an explicit height for the Actions menu button to ensure consistent vertical alignment (explicitly sets it to `3rem` instead of `2.5rem` from Carbon). - Adds a top border to the contact details panel, eliminating the need for consuming components to add their own. - Adds row gap to demographic elements (patient name and identifiers) to maintain consistent spacing when their content overflows. - Adds right-edge padding to the patient info section to prevent the overflow menu from touching the container edge. These changes support https://openmrs.atlassian.net/browse/O3-4114, which will refactor Patient Management repo's patient banner implementations to use shared banner components from the styleguide. --- .../src/custom-overflow-menu/custom-overflow-menu.module.scss | 4 ++++ .../patient-banner-contact-details.module.scss | 1 + .../patient-info/patient-banner-patient-info.module.scss | 4 ++-- 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/framework/esm-styleguide/src/custom-overflow-menu/custom-overflow-menu.module.scss b/packages/framework/esm-styleguide/src/custom-overflow-menu/custom-overflow-menu.module.scss index 47fe285c4..42c21abc4 100644 --- a/packages/framework/esm-styleguide/src/custom-overflow-menu/custom-overflow-menu.module.scss +++ b/packages/framework/esm-styleguide/src/custom-overflow-menu/custom-overflow-menu.module.scss @@ -4,6 +4,10 @@ .container { width: auto; height: auto; + + :global(.cds--overflow-menu__trigger) { + min-height: 3rem; + } } .menu { diff --git a/packages/framework/esm-styleguide/src/patient-banner/contact-details/patient-banner-contact-details.module.scss b/packages/framework/esm-styleguide/src/patient-banner/contact-details/patient-banner-contact-details.module.scss index 4a07c0747..ea8124003 100644 --- a/packages/framework/esm-styleguide/src/patient-banner/contact-details/patient-banner-contact-details.module.scss +++ b/packages/framework/esm-styleguide/src/patient-banner/contact-details/patient-banner-contact-details.module.scss @@ -7,6 +7,7 @@ .deceased { color: $text-02; width: 100%; + border-top: 1px solid $ui-03; } .heading { diff --git a/packages/framework/esm-styleguide/src/patient-banner/patient-info/patient-banner-patient-info.module.scss b/packages/framework/esm-styleguide/src/patient-banner/patient-info/patient-banner-patient-info.module.scss index 3464a57a0..53cb65ab2 100644 --- a/packages/framework/esm-styleguide/src/patient-banner/patient-info/patient-banner-patient-info.module.scss +++ b/packages/framework/esm-styleguide/src/patient-banner/patient-info/patient-banner-patient-info.module.scss @@ -41,7 +41,7 @@ .patientInfo { display: flex; flex-direction: column; - padding: layout.$spacing-05 0 layout.$spacing-05 0; + padding: layout.$spacing-05 layout.$spacing-03 layout.$spacing-05 0; width: 100%; } @@ -50,7 +50,7 @@ color: $text-02; display: flex; align-items: center; - column-gap: layout.$spacing-02; + gap: layout.$spacing-02; margin-top: layout.$spacing-02; flex-wrap: wrap; } From d5c31a5c9b3316ff253ee219f5931f961ba397d0 Mon Sep 17 00:00:00 2001 From: Dennis Kigen Date: Fri, 14 Feb 2025 11:03:30 +0300 Subject: [PATCH 2/2] Update styling token --- .../src/custom-overflow-menu/custom-overflow-menu.module.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/framework/esm-styleguide/src/custom-overflow-menu/custom-overflow-menu.module.scss b/packages/framework/esm-styleguide/src/custom-overflow-menu/custom-overflow-menu.module.scss index 42c21abc4..862131392 100644 --- a/packages/framework/esm-styleguide/src/custom-overflow-menu/custom-overflow-menu.module.scss +++ b/packages/framework/esm-styleguide/src/custom-overflow-menu/custom-overflow-menu.module.scss @@ -1,4 +1,5 @@ @use '@carbon/colors'; +@use '@carbon/layout'; @import '@openmrs/esm-styleguide/src/vars'; .container { @@ -6,7 +7,7 @@ height: auto; :global(.cds--overflow-menu__trigger) { - min-height: 3rem; + min-height: layout.$spacing-09; } }