(feat) Order basket UI tweaks

This PR applies the following UI tweaks to the order basket: - Adjusts the fill color property of svg icons in buttons to match the `currentColor` value of the parent element. - Tweaks the search results pages of the order basket to display a "Return to order basket" button per the [designs](https://zpl.io/MdQEOXK). - Adds some top margin to the test type name in the lab order form. - Tweaks the skeleton loader of the lab order search page to match the medication order search page. - Tweaks to the medication order form including amending the field sizes for both tablet and desktop views.
openmrs · Oct 3, 2024 · e540f84 · e540f84
1 parent d4f6f05
commit e540f84
Show file tree

Hide file tree

Showing 16 changed files with 238 additions and 127 deletions.
diff --git a/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/add-lab-order.scss b/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/add-lab-order.scss
@@ -34,6 +34,7 @@
       order: 1;
       margin-right: layout.$spacing-03;
       margin-left: 0 !important;
+      fill: currentColor !important;
     }
 
     span {

diff --git a/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/lab-order-form.component.tsx b/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/lab-order-form.component.tsx
@@ -174,7 +174,7 @@ export function LabOrderForm({
             <Column lg={16} md={8} sm={4}>
               <InputWrapper>
                 <label className={styles.testTypeLabel}>{t('testType', 'Test type')}</label>
-                <p className={styles.bodyShort02}>{initialOrder?.testType?.label}</p>
+                <p className={styles.testType}>{initialOrder?.testType?.label}</p>
               </InputWrapper>
             </Column>
           </Grid>

diff --git a/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/lab-order-form.scss b/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/lab-order-form.scss
@@ -83,6 +83,7 @@
   }
 }
 
-.bodyShort02 {
+.testType {
   @include type.type-style('body-compact-02');
+  margin-top: layout.$spacing-03;
 }
diff --git a/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/test-type-search.component.tsx b/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/test-type-search.component.tsx
@@ -88,6 +88,13 @@ function TestTypeSearchResults({ searchTerm, openOrderForm, focusAndClearSearchI
     }
   }, [searchTerm, testTypes]);
 
+  const cancelOrder = useCallback(() => {
+    closeWorkspace('add-lab-order', {
+      ignoreChanges: true,
+      onWorkspaceClose: () => launchPatientWorkspace('order-basket'),
+    });
+  }, []);
+
   if (isLoading) {
     return <TestTypeSearchSkeleton />;
   }
@@ -138,7 +145,12 @@ function TestTypeSearchResults({ searchTerm, openOrderForm, focusAndClearSearchI
           </div>
         </div>
 
-        <hr className={classNames(styles.divider, isTablet ? styles.tabletDivider : styles.desktopDivider)} />
+        <div className={styles.separatorContainer}>
+          <p className={styles.separator}>{t('or', 'or')}</p>
+          <Button iconDescription="Return to order basket" kind="ghost" onClick={cancelOrder}>
+            {t('returnToOrderBasket', 'Return to order basket')}
+          </Button>
+        </div>
       </>
     );
   }
@@ -244,7 +256,6 @@ const TestTypeSearchSkeleton = () => {
     [styles.skeletonTile]: true,
   });
   const buttonSize = isTablet ? 'md' : 'sm';
-  const dividerClassName = classNames(styles.divider, isTablet ? styles.tabletDivider : styles.desktopDivider);
 
   return (
     <div className={styles.searchResultSkeletonWrapper}>
@@ -257,7 +268,6 @@ const TestTypeSearchSkeleton = () => {
           <SkeletonText />
         </Tile>
       ))}
-      <hr className={dividerClassName} />
     </div>
   );
 };
diff --git a/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/test-type-search.scss b/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/test-type-search.scss
@@ -5,21 +5,44 @@
 
 /** For TestTypeSearchResults */
 .container {
-  margin: layout.$spacing-03 layout.$spacing-05;
+  margin: layout.$spacing-03 layout.$spacing-05 0;
 }
 
-.divider {
-  border: 0;
-  border-top: 1px solid $color-gray-30;
-  width: 66%;
-}
+.separator {
+  @include type.type-style('body-01');
+  color: colors.$gray-90;
+  width: 12rem;
+  margin: layout.$spacing-05 auto layout.$spacing-03;
+  overflow: hidden;
+  text-align: center;
 
-.desktopDivider {
-  margin: layout.$spacing-07 auto layout.$spacing-05;
-}
+  &::before,
+  &::after {
+    background-color: colors.$gray-40;
+    content: '';
+    display: inline-block;
+    height: 1px;
+    position: relative;
+    vertical-align: middle;
+    width: 50%;
+  }
 
-.tabletDivider {
-  margin: layout.$spacing-08 auto layout.$spacing-06;
+  &::before {
+    right: layout.$spacing-05;
+    margin-left: -50%;
+  }
+
+  &::after {
+    left: layout.$spacing-05;
+    margin-right: -50%;
+  }
+}
+.separatorContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-top: layout.$spacing-05;
 }
 
 .searchResultsCount {
@@ -35,7 +58,6 @@
 }
 
 /** For TestTypeSearchResultItem */
-
 .searchResultTile {
   padding: 0;
   display: flex;
@@ -48,8 +70,9 @@
 }
 
 .tabletSearchResultTile {
-  margin-top: 5px;
-  background-color: $ui-02;
+  &:not(:last-of-type) {
+    margin-bottom: layout.$spacing-04;
+  }
 }
 
 .searchResultTileContent {
@@ -61,6 +84,10 @@
   padding: 0 layout.$spacing-05;
   display: flex;
   justify-content: flex-end;
+
+  svg {
+    fill: currentColor !important;
+  }
 }
 
 .searchResultSkeletonWrapper {

diff --git a/...tient-labs-app/src/lab-orders/lab-order-basket-panel/lab-order-basket-panel.extension.tsx b/...tient-labs-app/src/lab-orders/lab-order-basket-panel/lab-order-basket-panel.extension.tsx
@@ -96,6 +96,7 @@ export default function LabOrderBasketPanelExtension() {
         </div>
         <div className={styles.buttonContainer}>
           <Button
+            className={styles.addButton}
             kind="ghost"
             renderIcon={(props: ComponentProps<typeof AddIcon>) => <AddIcon size={16} {...props} />}
             iconDescription="Add lab order"

diff --git a/...es/esm-patient-labs-app/src/lab-orders/lab-order-basket-panel/lab-order-basket-panel.scss b/...es/esm-patient-labs-app/src/lab-orders/lab-order-basket-panel/lab-order-basket-panel.scss
@@ -68,6 +68,12 @@
   align-items: center;
 }
 
+.addButton {
+  svg {
+    fill: currentColor !important;
+  }
+}
+
 .chevron {
   svg {
     fill: black;

diff --git a/packages/esm-patient-labs-app/translations/en.json b/packages/esm-patient-labs-app/translations/en.json
@@ -36,6 +36,7 @@
   "noTestResultsWithinSpecifiedRange": "No test results found within the specified range",
   "observationsDisplayText": "observations",
   "onDate": "on",
+  "or": "or",
   "orderActionDiscontinue": "Discontinue",
   "orderActionIncomplete": "Incomplete",
   "orderActionNew": "New",
@@ -63,6 +64,7 @@
   "results": "Results",
   "Results Viewer": "Results Viewer",
   "resultsText": "results",
+  "returnToOrderBasket": "Return to order basket",
   "returnToTimeline": "Return to timeline",
   "saveOrder": "Save order",
   "search": "Search",

diff --git a/packages/esm-patient-medications-app/src/add-drug-order/add-drug-order.scss b/packages/esm-patient-medications-app/src/add-drug-order/add-drug-order.scss
@@ -11,6 +11,7 @@
       order: 1;
       margin-right: layout.$spacing-03;
       margin-left: 0 !important;
+      fill: currentColor !important;
     }
 
     span {