Form design system, Design system: Forms issue #987

[tiagofsanchez]

Design system: Forms #987

Implementing the new Form design system

[netlify]

This is a preview version of the site.

Built with commit f59ae79

https://deploy-preview-1047--upbeat-lovelace-3e9fff.netlify.app

[calibre-analytics]

Comparing Form design system, Design system: Forms issue #987 Snapshot #4 to median since last deploy of The COVID Tracking Project.

	Performance	FCP?	TTI?
Overall Median across all pages and test profiles	78  from 79	1s  from 658ms	4.32s  from 4.95s
Chrome Desktop Chrome • Cable	80  from 83	820ms  from 414ms	2.38s  from 2s
MotoG4, 3G connection Motorola Moto G4 • Regular 3G	78  from 76	1.03s  from 1.08s	7.02s  from 7.83s

2 pages tested

 Home

Browser previews

Chrome Desktop	MotoG4, 3G connection

Most significant changes

	Value	Budget
Total JSON size in bytes Chrome Desktop	144 Bytes  from 97.4 KB
Total JSON size in bytes MotoG4, 3G connection	144 Bytes  from 51.9 KB

 Data page

Browser previews

Chrome Desktop	MotoG4, 3G connection

Most significant changes

	Value	Budget
Speed Index Chrome Desktop	1.15s  from 421ms
First Contentful Paint Chrome Desktop	1.12s  from 411ms
First Meaningful Paint Chrome Desktop	1.12s  from 411ms
Largest Contentful Paint Chrome Desktop	1.12s  from 411ms
Total JSON size in bytes Chrome Desktop	52 KB  from 98.5 KB

_{Calibre: Site dashboard | View this PR | Edit settings}

[kevee]

Hi, @tiagofsanchez! I merged in master and updated the SCSS a bit to use our new spacers and type size mixins.

[tiagofsanchez]

Will check this out @kevee and will update the rest

[calibre-analytics]

Comparing Form design system, Design system: Forms issue #987 Snapshot #15 to median since last deploy of The COVID Tracking Project.

	Performance	FCP?	TTI?
Overall Median across all pages and test profiles	64  from 76	1.07s  from 682ms	5.44s  from 4.54s
Chrome Desktop Chrome • Cable	64  from 80	1.07s  from 420ms	3.38s  from 2.31s
MotoG4, 3G connection Motorola Moto G4 • Regular 3G	71  from 76	1.2s  from 1.01s	7.94s  from 7.35s

2 pages tested

 Home

Browser previews

Chrome Desktop	MotoG4, 3G connection

Most significant changes

	Value	Budget
First Contentful Paint Chrome Desktop	1.09s  from 308ms
Speed Index Chrome Desktop	1.37s  from 486ms
First Meaningful Paint Chrome Desktop	1.49s  from 555ms
Largest Contentful Paint Chrome Desktop	1.49s  from 555ms
Total Blocking Time Chrome Desktop	739ms  from 291ms

_{5 other significant changes: Time to Interactive on Chrome Desktop, First CPU Idle on Chrome Desktop, Total JSON size in bytes on MotoG4, 3G connection, Total JSON size in bytes on Chrome Desktop, Lighthouse Performance Score on Chrome Desktop}

 Data page

Browser previews

Chrome Desktop	MotoG4, 3G connection

Most significant changes

	Value	Budget
First Meaningful Paint MotoG4, 3G connection	3.12s  from 1.47s
Largest Contentful Paint MotoG4, 3G connection	3.12s  from 1.47s
Total JSON size in bytes Chrome Desktop	55.6 KB  from 80.5 KB

_{Calibre: Site dashboard | View this PR | Edit settings}

[tiagofsanchez]

@kevee, I reckon you have adjusted almost everything. I did minor things. Whenever you have time you can review. After I can document on storybook

[kevee]

Looks good! Let's get that storybook implemented then I think we are GTG!

[kevee]

Thanks, @tiagofsanchez! Only issue I'm seeing is the react recaptcha component is throwing an error when you:

1. Click on contact
2. Click on volunteer form, or really any page
3. Hit the back button

I think it's probably due to this issue, but it's weird that this isn't already happening on the live site. I'll have time later today to try and debug it as well.

[tiagofsanchez]

@kevee, yes this is strange. I have done a couple of debugging but still don't get the problem:

• in dev mode works well
• in chrome on my phone i have no issues, only on desktop chrome
• without the recaptcha it works well, so that is def the issue
• implemented the render='explicit' and onloadCallback props and not fixed yet
  Will try latter tonight again

[kevee]

I broke some of these form elements into separate components and reverted search since it's a distinct form element that can be inconsistent with the others.