Automattic / Automattic/jetpack
Forms: Multiple Choice checkbox styles work inconsistently and aren't synced with Checkbox styles
- Dominant language
- PHP
- Stars
- 1.8k
- Forks
- 898
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 774
Description
### Impacted plugin
Jetpack
### Quick summary
Originally noted in https://github.com/Automattic/jetpack/pull/42278#issuecomment-2711244221, but it wasn't introduced in that PR.
> Changing label size in a single checkbox should affect multi-choice options but not text-field labels.
If a user adds a Multiple Choice block to a form that also has a Checkbox, it can be very challenging to style the two to look the same:
- With the Multiple Choice block selected, if the user tries changing settings like the option font size, only the Multiple Choice options are affected, the changes don't sync to the Checkbox block.
- Also note if the user tries scaling the Option font size on the Multiple Choice block, the input changes size but the text doesn't (the opposite to #42446)
- If you try changing border settings on the Multiple Choice options, that seems to have no effect unless the Button style variation is active
- When the Button Style variation is active the border style for an option can be changed, but there's no way to set border color independently of the text color
- When the button style is active, the checkbox is still visible inside the button. I'm not sure if this is by design, or if it should be more of a toggle style button.
### Steps to reproduce
1. Add a contact form
2. Add a Multiple Choice block to the contact form
3. Add a Checkbox to the contact form
4. Try changing different Option styles for the Multiple Choice block (you must have the parent Multiple Choice block selected to do this rather than the Option itself)
Expected: All the styles work correctly and option styles are synced between Multiple Choice and Checkbox
Actual: The styles work inconsistently and aren't synced:
- Font size doesn't scale the option label
- Border has no effect with the List Style Variation active
- There's no way to set Border color that doesn't also change the text color
### Site owner impact
Fewer than 20% of the total website/platform users
### Severity
Moderate
### What other impact(s) does this issue have?
_No response_
### If a workaround is available, please outline it here.
_No response_
### Platform (Simple and/or Atomic)
Self-hosted, Atomic, Simple
Contributor guide
Research direction
Start by reproducing the issue with the Multiple Choice and Checkbox blocks in a contact form, then compare their option-style controls and behavior for font size, borders, colors, and button variations. Done means the relevant styles apply consistently, option labels scale correctly, border color can be set independently, and the two block types remain visually synchronized.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, php, react, wordpress
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100