(feat) Patient banner styling refinements #1284
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.
|
Size Change: -87.9 kB (-1.4%) Total Size: 6.2 MB
ℹ️ View Unchanged
|
NethmiRodrigo
approved these changes
Feb 14, 2025
denniskigen
added a commit
to openmrs/openmrs-esm-patient-chart
that referenced
this pull request
Feb 14, 2025
This is a follow up fix necessitated by openmrs/openmrs-esm-core#1284, which introduced a new top border to the contact details panel. The rationale behind that change was to ensure that the contact details panel always has a top border, and that the border should be added by the [PatientBannerContactDetails](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/patient-banner/contact-details/patient-banner-contact-details.component.tsx#L183) component in the styleguide. Consumers of the reusable banner components from the styleguide should not need to define the top border in their styles. That should be the responsibility of the styleguide. To that end, this PR removes the additional top border from the PatientBanner component.
ibacher
pushed a commit
to openmrs/openmrs-esm-patient-chart
that referenced
this pull request
Feb 14, 2025
This is a follow up fix necessitated by openmrs/openmrs-esm-core#1284, which introduced a new top border to the contact details panel. The rationale behind that change was to ensure that the contact details panel always has a top border, and that the border should be added by the [PatientBannerContactDetails](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/patient-banner/contact-details/patient-banner-contact-details.component.tsx#L183) component in the styleguide. Consumers of the reusable banner components from the styleguide should not need to define the top border in their styles. That should be the responsibility of the styleguide. To that end, this PR removes the additional top border from the PatientBanner component.
3 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Requirements
feat,fix, orchore, among others). See existing PR titles for inspiration.For changes to apps
If applicable
Summary
Refines the Patient Banner layout and visual consistency with the following changes:
3reminstead of2.5remfrom Carbon).Screenshots
Contact details panel missing its own top border
Actions overflow menu trigger button has the wrong size (tablet)
Likewise on desktop
Cramped overflowing content in the demographics section
Related Issue
Other
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.