(feat) Update patient registration page to the new design #754

Jexsie · 2023-07-08T17:55:52Z

Requirements

This PR has a title that briefly describes the work done including the ticket number. If there is a ticket, make sure your PR title includes a conventional commit label. See existing PR titles for inspiration.
My work conforms to the OpenMRS 3.0 Styleguide and design documentation.
I checked for feature overlap with existing widgets.

Summary

Update the patient registration page to the new design
Update the scrollIntoView block to start
Add the active link state
Updates the avatar width and height when editing

Screencasts

Before

Screencast.from.2023-07-24.01-15-01.webm

After

Screencast.from.2023-07-24.01-11-37.webm

None.

Related Issue

None.

Other

Relate to Update capture photo widget to the new design

gracepotma · 2023-07-11T07:45:49Z

Thanks Jessie, when you're able, please add the screenshots showing the software UI before vs after :)

Jexsie · 2023-07-13T07:25:13Z

packages/esm-patient-registration-app/src/widgets/display-photo.component.tsx

-      size={size === 'small' ? '48' : '80'}
-      textSizeRatio={size === 'small' ? 1 : 2}
+      size={editing ? '120' : size === 'small' ? '48' : '80'}
+      textSizeRatio={editing ? 3.75 : size === 'small' ? 1 : 2}


size / textSizeRatio DOC

what do you say about this @vasharma05?

...-patient-registration-app/src/patient-registration/field/address/address-field.component.tsx

+              id={attributes.name}
+              setSelectedValue={setSelectedValue}
+              selected={selected}
+              maxLength={attributes.maxCount}


...ges/esm-patient-registration-app/src/patient-registration/patient-registration.component.tsx

Jexsie · 2023-08-10T09:33:56Z

packages/esm-patient-registration-app/src/patient-registration/field/field.scss

+      left: 10.5rem;
+    }
+  }
+}


overriding styles for the date input

Why are we having the overrides?

I wanted to make the date input quite small as the max-characters it can support. Also to align it with the small size of the inputs. If you compare with the identifier inputs below

Jexsie · 2023-08-10T09:43:25Z

packages/esm-patient-registration-app/src/patient-registration/field/field.scss

@@ -125,3 +137,7 @@
  line-height: 1.34;
  margin: 0.25rem 0 0;
 }
+
+.numberInput {
+  width: 13.125rem;


giving the number inputs a small size

For now, let it be either 50% of the form width or full width

This update is majorly to reduce the width of the inputs not to be taking up 100% of the width like the design says. The full input width (300px) looks as below on desktop.

On dev3

packages/esm-patient-registration-app/src/patient-registration/field/dob/dob.component.tsx

...nt-registration-app/src/patient-registration/input/dummy-data/dummy-data-input.component.tsx

Jexsie · 2023-08-10T09:46:47Z

packages/esm-patient-registration-app/src/patient-registration/input/input.scss

@@ -116,3 +118,7 @@
  margin: 0;
  padding-left: 1rem;
 }
+
+.Input {
+  max-width: 300px;


giving all the inputs a large size

I remember we already have the max-width placed somewhere, can you please find that first?
Thanks!

I see we were setting the max-width for the whole form here in the infoGrid class, neglecting the sticky column. Here am trying to set the max-width for the inputs

vasharma05 · 2023-08-10T11:59:25Z

packages/esm-patient-registration-app/src/patient-registration/field/dob/dob.component.tsx

+              <TextInput
+                id="yearsEstimated"
+                type="number"
+                className={styles.numberInput}
+                name={yearsEstimated.name}
+                light
+                onChange={onEstimatedYearsChange}
+                labelText={t('estimatedAgeInYearsLabelText', 'Estimated age in years')}
+                invalid={!!(yearsEstimateMeta.touched && yearsEstimateMeta.error)}
+                invalidText={yearsEstimateMeta.error && t(yearsEstimateMeta.error)}
+                value={yearsEstimated.value}
+                min={0}
+                required
+                {...yearsEstimated}
+                onBlur={updateBirthdate}
+              />


Why did you remove the Layer HOC?
Actually the light prop is deprecated in the new versions and Layer helps in the same.

You can also pass the level prop as well to tweak the theme of the child element. I usually play between 0 and 1 only.

https://react.carbondesignsystem.com/?path=/story/components-layer--custom-level

I saw they had a parent layer that is actually responsible for the lighting. Just missed out on that light prop.

packages/esm-patient-registration-app/src/patient-registration/field/dob/dob.component.tsx

vasharma05 · 2023-08-10T12:00:43Z

packages/esm-patient-registration-app/src/patient-registration/field/field.scss

+  display: flex;
+  flex-direction: column;


If it's a column and no justify-content or align-items, I believe we can totally remove it.

vasharma05 · 2023-08-10T12:01:25Z

packages/esm-patient-registration-app/src/patient-registration/field/field.scss

-  column-gap: spacing.$spacing-05;
+  display: flex;
+  flex-direction: column;
+  gap: spacing.$spacing-05;


gap doesn't work in flex, try using the margins for the child elements

vasharma05 · 2023-08-10T12:04:28Z

packages/esm-patient-registration-app/src/patient-registration/field/field.scss

+      left: 10.5rem;
+    }
+  }
+}


Why are we having the overrides?

vasharma05 · 2023-08-10T12:21:26Z

packages/esm-patient-registration-app/src/patient-registration/input/input.scss

@@ -99,6 +99,8 @@
 :global(.omrs-breakpoint-lt-desktop) {
  .IDInput {
    max-width: unset;
+    display: flex;
+    gap: 0.25rem;


Is this working?

vasharma05 · 2023-08-10T12:22:02Z

packages/esm-patient-registration-app/src/patient-registration/input/input.scss

@@ -116,3 +118,7 @@
  margin: 0;
  padding-left: 1rem;
 }
+
+.Input {
+  max-width: 300px;


I remember we already have the max-width placed somewhere, can you please find that first?
Thanks!

...ges/esm-patient-registration-app/src/patient-registration/patient-registration.component.tsx

vasharma05 · 2023-08-10T12:23:56Z

packages/esm-patient-registration-app/src/patient-registration/patient-registration.scss

+
+  .linkContainer {
+    div:last-child {
+      padding-bottom: 2.3rem;


Weird

this is responsible for the lower grey line after the links and the Cancel Register buttons. Different spacing on tablet and desktop

packages/esm-patient-registration-app/src/patient-registration/patient-registration.scss

Jexsie · 2023-09-21T12:42:08Z

@vasharma05 , i think i had this settled?

Jexsie mentioned this pull request Jul 8, 2023

(feat) Update the capture photo widget to the new design openmrs/openmrs-esm-patient-chart#1267

Closed

3 tasks

Jexsie commented Jul 13, 2023

View reviewed changes

Jexsie force-pushed the photo branch 2 times, most recently from 5c93e58 to 6f3f7d6 Compare July 23, 2023 21:08

Jexsie commented Jul 23, 2023

View reviewed changes

...-patient-registration-app/src/patient-registration/field/address/address-field.component.tsx Outdated Show resolved Hide resolved

Jexsie commented Jul 23, 2023

View reviewed changes

...-patient-registration-app/src/patient-registration/field/address/address-field.component.tsx Outdated

id={attributes.name}

setSelectedValue={setSelectedValue}

selected={selected}

maxLength={attributes.maxCount}

This comment was marked as outdated.

Sign in to view

Jexsie commented Jul 23, 2023

View reviewed changes

...ges/esm-patient-registration-app/src/patient-registration/patient-registration.component.tsx Outdated Show resolved Hide resolved

Jexsie marked this pull request as ready for review July 23, 2023 21:30

Jexsie force-pushed the photo branch from 6f3f7d6 to 091ada9 Compare July 24, 2023 03:33

Jexsie force-pushed the photo branch from 091ada9 to 59f3483 Compare August 8, 2023 14:12

Jexsie commented Aug 10, 2023

View reviewed changes

packages/esm-patient-registration-app/src/patient-registration/field/dob/dob.component.tsx Show resolved Hide resolved

Jexsie commented Aug 10, 2023

View reviewed changes

...nt-registration-app/src/patient-registration/input/dummy-data/dummy-data-input.component.tsx Show resolved Hide resolved

Jexsie commented Aug 10, 2023

View reviewed changes

vasharma05 reviewed Aug 10, 2023

View reviewed changes

Jexsie force-pushed the photo branch from 59f3483 to 16ea435 Compare August 14, 2023 08:44

Jexsie added 5 commits August 15, 2023 11:41

update patient regsitration to the new design

261eb86

display avatar when editting patient

1f74477

update width for inputs

d0d13d7

fix dob

b614f5e

code review

1d93476

Jexsie force-pushed the photo branch from 16ea435 to 1d93476 Compare August 15, 2023 08:42

Merge branch 'main' into photo

d1325c7

denniskigen requested a review from vasharma05 September 24, 2023 20:20

ibacher closed this Jan 31, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

(feat) Update patient registration page to the new design #754

(feat) Update patient registration page to the new design #754

Jexsie commented Jul 8, 2023 •

edited

Loading

gracepotma commented Jul 11, 2023

Jexsie Jul 13, 2023 •

edited

Loading

Jexsie Aug 15, 2023 •

edited

Loading

This comment was marked as outdated.

Jexsie Aug 10, 2023

vasharma05 Aug 10, 2023

Jexsie Aug 15, 2023

Jexsie Aug 10, 2023

vasharma05 Aug 10, 2023

Jexsie Aug 15, 2023 •

edited

Loading

Jexsie Aug 10, 2023

vasharma05 Aug 10, 2023

Jexsie Aug 15, 2023 •

edited

Loading

vasharma05 Aug 10, 2023

Jexsie Aug 14, 2023

vasharma05 Aug 10, 2023

vasharma05 Aug 10, 2023

vasharma05 Aug 10, 2023

vasharma05 Aug 10, 2023

Jexsie Aug 15, 2023

vasharma05 Aug 10, 2023

vasharma05 Aug 10, 2023

Jexsie Aug 15, 2023

Jexsie commented Sep 21, 2023

(feat) Update patient registration page to the new design #754

(feat) Update patient registration page to the new design #754

Conversation

Jexsie commented Jul 8, 2023 • edited Loading

Requirements

Summary

Screencasts

Before

After

Related Issue

Other

gracepotma commented Jul 11, 2023

Jexsie Jul 13, 2023 • edited Loading

Choose a reason for hiding this comment

Jexsie Aug 15, 2023 • edited Loading

Choose a reason for hiding this comment

This comment was marked as outdated.

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Jexsie Aug 15, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Jexsie Aug 15, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Jexsie commented Sep 21, 2023

Jexsie commented Jul 8, 2023 •

edited

Loading

Jexsie Jul 13, 2023 •

edited

Loading

Jexsie Aug 15, 2023 •

edited

Loading

Jexsie Aug 15, 2023 •

edited

Loading

Jexsie Aug 15, 2023 •

edited

Loading