(fix) O3-3187: Fix borders used to highlight abnormal vitals (#1848)

* fix: Vitals table border issues * add carbon spacing variables and child selectors
openmrs · May 31, 2024 · 8bc7faf · 8bc7faf
1 parent 6f24db9
commit 8bc7faf
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 12 deletions.
diff --git a/packages/esm-patient-vitals-app/src/vitals/paginated-vitals.component.tsx b/packages/esm-patient-vitals-app/src/vitals/paginated-vitals.component.tsx
@@ -39,15 +39,35 @@ const PaginatedVitals: React.FC<PaginatedVitalsProps> = ({
   const StyledTableCell = ({ interpretation, children }: { interpretation: string; children: React.ReactNode }) => {
     switch (interpretation) {
       case 'critically_high':
-        return <TableCell className={styles.criticallyHigh}>{children}</TableCell>;
+        return (
+          <TableCell className={styles.criticallyHigh}>
+            <span>{children}</span>
+          </TableCell>
+        );
       case 'critically_low':
-        return <TableCell className={styles.criticallyLow}>{children}</TableCell>;
+        return (
+          <TableCell className={styles.criticallyLow}>
+            <span>{children}</span>
+          </TableCell>
+        );
       case 'high':
-        return <TableCell className={styles.high}>{children}</TableCell>;
+        return (
+          <TableCell className={styles.high}>
+            <span>{children}</span>
+          </TableCell>
+        );
       case 'low':
-        return <TableCell className={styles.low}>{children}</TableCell>;
+        return (
+          <TableCell className={styles.low}>
+            <span>{children}</span>
+          </TableCell>
+        );
       default:
-        return <TableCell>{children}</TableCell>;
+        return (
+          <TableCell className={styles.normal}>
+            <span>{children}</span>
+          </TableCell>
+        );
     }
   };
 

diff --git a/packages/esm-patient-vitals-app/src/vitals/paginated-vitals.scss b/packages/esm-patient-vitals-app/src/vitals/paginated-vitals.scss
@@ -1,9 +1,16 @@
 @use '@carbon/colors';
 @use '@carbon/type';
+@use '@carbon/layout';
 
 .table {
   td {
     white-space: nowrap;
+    padding: layout.$spacing-02;
+    > span {
+      width: 100%;
+      height: 100%;
+      display: inline-block;
+    }
   }
 }
 
@@ -13,12 +20,18 @@
   }
 }
 
-.criticallyLow, .criticallyHigh {
+.criticallyHigh > span, .criticallyLow > span {
   border: 2px solid colors.$red-60 !important;
-}
+  padding: layout.$spacing-02 layout.$spacing-02 layout.$spacing-02 layout.$spacing-05;
+} 
 
-.low, .high {
+.high > span, .low > span {
   border: 1.5px solid colors.$black-100 !important;
+  padding: layout.$spacing-02 layout.$spacing-02 layout.$spacing-02 layout.$spacing-05;
+}
+
+.normal > span {
+  padding-left: layout.$spacing-05;
 }
 
 .criticallyLow {
@@ -66,18 +79,18 @@
   @include type.type-style('heading-compact-01');
 }
 
-.criticallyLow::after {
+.criticallyLow > span::after {
   content: " ↓↓";
 }
 
-.criticallyHigh::after {
+.criticallyHigh > span::after {
   content: " ↑↑";
 }
 
-.low::after {
+.low > span::after {
   content: " ↓";
 }
 
-.high::after {
+.high > span::after {
   content: " ↑";
 }