Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Component Change Request] Improve layout around form inputs #887

Open
stevejalim opened this issue Jul 11, 2023 · 1 comment
Open

[Component Change Request] Improve layout around form inputs #887

stevejalim opened this issue Jul 11, 2023 · 1 comment

Comments

@stevejalim
Copy link

The default CSS for form elements could do with a couple of tweaks around error state handling, showing and hiding of form fields when using the newsletter JS from Bedrock and the multi-checkbox layout.

These have been done as part of mozmeao/birdbox, but worth backporting:

https://github.com/mozmeao/birdbox/blob/main/src/css/birdbox-protocol-overrides.scss

Before the tweaks

ad-hoc-form

After the tweaks

Screenshot 2023-07-10 at 16-12-57 Protocol Components Test Page - Local dev test site

@janbrasna
Copy link
Contributor

To recap, if I get it right:

  1. the errors should be closer to the actual inputs,
  2. checkbox/radio groups should be better separated from the following flow,
  3. there is going to be some JS basket logic upstreamed to Protocol, at which point the hide toggle logic must be made compatible? (what's the current status of this one?)

@stevejalim Would you happen to have a live form sample page somewhere? (I'd be interested in the date-time bells and whistles you've added, and also how you group the checkboxes wrt labels × legends or if you use label-sized headings of sorts…)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants