Rework HTML attribute template output, improve well styling, validate HTML snapshots

shawnbot commented 4 years ago

This is a pass over all of our templates that replaces all of the inline attribute rendering (in EJS) with a new attrs() context helper that more intelligently handles duplicate attributes (by merging them in a predictable order) and uses classnames to apply and merge class attribute tokens.

I've also introduced html-validate into the snapshot tests to validate the HTML strings that our components render. My hunch was that the bizarre issues described in #119 could be explained by invalid HTML (specifically, bad open and close tag nesting), but I'm honestly not sure if that's the case. I did discover that our templates were rendering a closing </input> tag, which I addressed here; but I need to do some more testing first to confirm that this solves the problem.

vercel[bot] commented 4 years ago

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/sfds/formio-sfds/jmz5f9lue
✅ Preview: https://formio-sfds-git-attribute-fixes.sfds.vercel.app

github-actions[bot] commented 4 years ago

Size Change: +1.01 kB (1%)

Total Size: 92.9 kB

Filename	Size	Change
`dist/formio-sfds.css`	14.1 kB	+8 B (0%)
`dist/formio-sfds.standalone.js`	69.1 kB	+1 kB (1%)

ℹ️ View Unchanged

| Filename | Size | Change | | |:--- |:---:|:---:|:---:| | `dist/common.css` | 332 B | 0 B | | | `dist/examples.js` | 3.51 kB | 0 B | | | `dist/examples/example.js` | 508 B | 0 B | | | `dist/portal.js` | 5.36 kB | 0 B | |

_{compressed-size-action}

shawnbot commented 3 years ago

This is OBE. I'm going to revisit it in the ARIA/required/valid work.

SFDigitalServices / formio-sfds

Rework HTML attribute template output, improve well styling, validate HTML snapshots #120