MF-635: Biometrics and Vitals widgets toggle buttons (#379)

* MF-635: Biometrics and Vitals widgets content switcher This PR modifies the table/chart toggle on the Biometrics and Vitals widgets to match the provided design. * Review feedback
openmrs · Sep 13, 2021 · 3d41277 · 3d41277
1 parent 4bb0762
commit 3d41277
Show file tree

Hide file tree

Showing 5 changed files with 183 additions and 54 deletions.
diff --git a/packages/esm-patient-biometrics-app/src/biometrics/biometrics-base.component.tsx b/packages/esm-patient-biometrics-app/src/biometrics/biometrics-base.component.tsx
@@ -60,31 +60,34 @@ const RenderBiometrics: React.FC<RenderBiometricsProps> = ({
       <div className={styles.biometricsWidgetContainer}>
         <div className={styles.biometricsHeaderContainer}>
           <h4 className={`${styles.productiveHeading03} ${styles.text02}`}>{headerTitle}</h4>
-          <div className={styles.toggleButtons}>
-            <Button
-              className={styles.toggle}
-              size="field"
-              hasIconOnly
-              kind={chartView ? 'ghost' : 'secondary'}
-              renderIcon={Table16}
-              iconDescription={t('tableView', 'Table View')}
-              onClick={() => setChartView(false)}
-            />
-            <Button
-              className={styles.toggle}
-              size="field"
-              kind={chartView ? 'secondary' : 'ghost'}
-              hasIconOnly
-              renderIcon={ChartLineSmooth16}
-              iconDescription={t('chartView', 'Chart View')}
-              onClick={() => setChartView(true)}
-            />
+          <div className={styles.biometricsHeaderActionItems}>
+            <div className={styles.toggleButtons}>
+              <Button
+                className={styles.toggle}
+                size="field"
+                hasIconOnly
+                kind={chartView ? 'ghost' : 'tertiary'}
+                renderIcon={Table16}
+                iconDescription={t('tableView', 'Table View')}
+                onClick={() => setChartView(false)}
+              />
+              <Button
+                className={styles.toggle}
+                size="field"
+                kind={chartView ? 'tertiary' : 'ghost'}
+                hasIconOnly
+                renderIcon={ChartLineSmooth16}
+                iconDescription={t('chartView', 'Chart View')}
+                onClick={() => setChartView(true)}
+              />
+            </div>
+            <span className={styles.divider}>|</span>
+            {showAddBiometrics && (
+              <Button kind="ghost" renderIcon={Add16} iconDescription="Add biometrics" onClick={launchBiometricsForm}>
+                {t('add', 'Add')}
+              </Button>
+            )}
           </div>
-          {showAddBiometrics && (
-            <Button kind="ghost" renderIcon={Add16} iconDescription="Add biometrics" onClick={launchBiometricsForm}>
-              {t('add', 'Add')}
-            </Button>
-          )}
         </div>
         {chartView ? (
           <BiometricsChart patientBiometrics={biometrics} conceptsUnits={conceptsUnits} />

diff --git a/packages/esm-patient-biometrics-app/src/biometrics/biometrics-overview.scss b/packages/esm-patient-biometrics-app/src/biometrics/biometrics-overview.scss
@@ -16,6 +16,20 @@
   background-color: $ui-background;
 }
 
+.biometricsHeaderActionItems {
+  align-items: center;
+  display: flex;
+  flex: 1 1 0%;
+  justify-content: end;
+}
+
+.divider {
+  width: 1px;
+  height: 1rem;
+  color: $ui-03;
+  margin: 0rem 0.5rem;
+}
+
 .biometricsHeaderContainer > h4:after {
   content: "";
   display: block;
@@ -29,10 +43,57 @@
   margin: 0 $spacing-03;
 }
 
+.toggle {
+  padding: 0.5rem;
+  color: $interactive-01;
+  min-height: 0px;
+
+  &:global(.bx--btn--tertiary) {
+    border-color: $interactive-01;
+  }
+
+  &:global(.bx--tooltip__trigger:active:not([disabled])) {
+    border-color: $interactive-01;
+  }
+
+  &:global(.bx--btn--tertiary:active) {
+    border-color: $interactive-01;
+    background-color: #edf5ff;
+    color: #edf5ff;
+  }
+
+  &:global(.bx--btn--tertiary:focus) {
+    background-color: $interactive-01;
+    color: $ui-background;
+  }
+
+  &:global(.bx--btn--tertiary:hover) {
+    color: $ui-background;
+    background-color: $interactive-01;
+  }
+
+  &:global(.bx--btn--ghost) {
+    border-color: #a6c8ff;
+  }
+
+  &:global(.bx--btn--ghost:hover) {
+    color:  #000;
+    background-color: $ui-01;
+  }
+}
+
 .toggle:first-of-type {
   border-radius: $spacing-02 0 0 $spacing-02;
+
+  &:global(.bx--btn--ghost) {
+    border-right: 0;
+  }
 }
 
 .toggle:last-of-type {
   border-radius: 0 $spacing-02 $spacing-02 0;
+
+  &:global(.bx--btn--ghost) {
+    border-left: 0rem;
+  }
 }
diff --git a/packages/esm-patient-chart-app/src/ui-components/action-menu.component.scss b/packages/esm-patient-chart-app/src/ui-components/action-menu.component.scss
@@ -22,7 +22,7 @@ $actionPanelOffset: 48px;
   border: 1px solid #a8a8a8;
 }
 
-:global(.omrs-breakpoint-lt-desktop) .actionPanel {
+.actionPanel :global(.omrs-breakpoint-lt-desktop) {
   border: 0;
   right: 0;
 }
@@ -41,7 +41,7 @@ $actionPanelOffset: 48px;
   background-color: #ffffff;
 }
 
-:global(.bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus){
+.actionBtn :global(.bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus){
   border-color: #007d79;
 }
 

diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-overview.component.tsx b/packages/esm-patient-vitals-app/src/vitals/vitals-overview.component.tsx
@@ -105,35 +105,38 @@ const VitalsOverview: React.FC<VitalsOverviewProps> = ({ patientUuid, showAddVit
             <div className={styles.vitalsWidgetContainer}>
               <div className={styles.vitalsHeaderContainer}>
                 <h4>{headerTitle}</h4>
-                <div className={styles.toggleButtons}>
-                  <Button
-                    className={styles.toggle}
-                    size="field"
-                    kind={chartView ? 'ghost' : 'secondary'}
-                    hasIconOnly
-                    renderIcon={Table16}
-                    iconDescription={t('tableView', 'Table View')}
-                    onClick={() => setChartView(false)}
-                  />
-                  <Button
-                    className={styles.toggle}
-                    size="field"
-                    kind={chartView ? 'secondary' : 'ghost'}
-                    hasIconOnly
-                    renderIcon={ChartLineSmooth16}
-                    iconDescription={t('chartView', 'Chart View')}
-                    onClick={() => setChartView(true)}
-                  />
+                <div className={styles.vitalsHeaderActionItems}>
+                  <div className={styles.toggleButtons}>
+                    <Button
+                      className={styles.toggle}
+                      size="field"
+                      kind={chartView ? 'ghost' : 'tertiary'}
+                      hasIconOnly
+                      renderIcon={Table16}
+                      iconDescription={t('tableView', 'Table View')}
+                      onClick={() => setChartView(false)}
+                    />
+                    <Button
+                      className={styles.toggle}
+                      size="field"
+                      kind={chartView ? 'tertiary' : 'ghost'}
+                      hasIconOnly
+                      renderIcon={ChartLineSmooth16}
+                      iconDescription={t('chartView', 'Chart View')}
+                      onClick={() => setChartView(true)}
+                    />
+                  </div>
+                  <span className={styles.divider}>|</span>
+                  {showAddVitals && (
+                    <Button
+                      kind="ghost"
+                      renderIcon={Add16}
+                      iconDescription="Add vitals"
+                      onClick={launchVitalsBiometricsForm}>
+                      {t('add', 'Add')}
+                    </Button>
+                  )}
                 </div>
-                {showAddVitals && (
-                  <Button
-                    kind="ghost"
-                    renderIcon={Add16}
-                    iconDescription="Add vitals"
-                    onClick={launchVitalsBiometricsForm}>
-                    {t('add', 'Add')}
-                  </Button>
-                )}
               </div>
               {chartView ? (
                 <VitalsChart patientVitals={vitals} conceptsUnits={conceptsUnits} />

diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-overview.scss b/packages/esm-patient-vitals-app/src/vitals/vitals-overview.scss
@@ -14,6 +14,13 @@
   padding: $spacing-04 0 $spacing-04 $spacing-05;
 }
 
+.divider {
+  width: 1px;
+  height: 1rem;
+  color: $ui-03;
+  margin: 0rem 0.5rem;
+}
+
 .vitalsHeaderContainer h4 {
   @include carbon--type-style('productive-heading-03');
   color: $text-02;
@@ -32,15 +39,70 @@
   margin: 0 $spacing-03;
 }
 
+.toggle {
+  padding: 0.5rem;
+  color: $interactive-01;
+  min-height: 0px;
+
+  &:global(.bx--btn--tertiary) {
+    border-color: $interactive-01;
+  }
+
+  &:global(.bx--tooltip__trigger:active:not([disabled])) {
+    border-color: $interactive-01;
+  }
+
+  &:global(.bx--btn--tertiary:active) {
+    border-color: $interactive-01;
+    background-color: #edf5ff;
+    color: #edf5ff;
+  }
+
+  &:global(.bx--btn--tertiary:focus) {
+    background-color: $interactive-01;
+    color: $ui-background;
+  }
+
+  &:global(.bx--btn--tertiary:hover) {
+    color: $ui-background;
+    background-color: $interactive-01;
+  }
+
+  &:global(.bx--btn--ghost) {
+    border-color: #a6c8ff;
+  }
+
+  &:global(.bx--btn--ghost:hover) {
+    color:  #000;
+    background-color: $ui-01;
+  }
+}
+
 .toggle:first-of-type {
   border-radius: $spacing-02 0 0 $spacing-02;
+
+  &:global(.bx--btn--ghost) {
+    border-right: 0;
+  }
 }
 
 .toggle:last-of-type {
   border-radius: 0 $spacing-02 $spacing-02 0;
+
+  &:global(.bx--btn--ghost) {
+    border-left: 0rem;
+  }
 }
 
 .vitalsWidgetContainer {
   background-color: $ui-background;
   position: relative;
 }
+
+.vitalsHeaderActionItems {
+  align-items: center;
+  display: flex;
+  flex: 1 1 0%;
+  justify-content: end;
+}
+