search

SFDigitalServices / formio-sfds

The form.io theme for sf.gov
https://formio-sfds.herokuapp.com/
MIT License
15 stars 2 forks source link

✍️ Signature style #186

Closed shawnbot closed 3 years ago

shawnbot commented 3 years ago

This PR adds a signature component class and templates to match this Figma comp. Below is a visual comparison, and you can test it live on the review app.

Figma (as of 6/2 @ 2:30) This PR (as of f28d918)
image image

The one funky thing to note about how I implemented this is that the slate line and "Sign above" text (form.io calls it the "footer") have pointer-events: none so that mouse and touch events go directly to the canvas below. The pointer-events CSS property was originally meant only for SVG, but was eventually supported on HTML elements by most browsers.

Slack discussion for reference.

github-actions[bot] commented 3 years ago

Size Change: +1.11 kB (+1%)

Total Size: 88.3 kB

Filename Size Change
dist/formio-sfds.css 14.2 kB -109 B (-1%)
dist/formio-sfds.standalone.js 67.4 kB +240 B (0%)
dist/portal.js 6.34 kB +977 B (+18%) ⚠️
ℹ️ View Unchanged | Filename | Size | Change | | :--- | :---: | :---: | | `dist/common.css` | 297 B | 0 B |

compressed-size-action

coreyhunt commented 3 years ago

Looks good to me.

nlsfds commented 3 years ago

Looking good!