Skip to content

Commit

Permalink
(feat) Patient banner styling refinements (#1284)
Browse files Browse the repository at this point in the history
* (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.

* Update styling token
  • Loading branch information
denniskigen authored Feb 14, 2025
1 parent 4ec0632 commit 55973fa
Show file tree
Hide file tree
Showing 3 changed files with 8 additions and 2 deletions.
Original file line number Diff line number Diff line change
@@ -1,9 +1,14 @@
@use '@carbon/colors';
@use '@carbon/layout';
@import '@openmrs/esm-styleguide/src/vars';

.container {
width: auto;
height: auto;

:global(.cds--overflow-menu__trigger) {
min-height: layout.$spacing-09;
}
}

.menu {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
.deceased {
color: $text-02;
width: 100%;
border-top: 1px solid $ui-03;
}

.heading {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
}

Expand All @@ -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;
}
Expand Down

0 comments on commit 55973fa

Please sign in to comment.