Page MenuHomePhabricator

Handle styles for radios and checkboxes when inline or stacked
Closed, ResolvedPublic

Description

Radios and checkboxes appearing in groups can be inline, requiring a horizontal margin separating each input, or stacked, requiring a vertical margin. We should handle these basic layout options in the components, at least for now. In the future, we may consider handling them in a Field component, or with specific CheckboxGroup (to facilitate both layout and nested checkboxes) and RadioGroup components.

  • Add a boolean prop to each component that specifies one of the two layouts (inline or stacked). Note, inline it became, as stacked is the big majority and therefore default for our interfaces.
  • Add styles for both layouts in both components or in the binary input Less mixin, if possible. Binary input Less mixin it became.

Event Timeline

@Jdlrobson You mentioned adding a prop to specify that the inputs are stacked. Do you think inline or stacked inputs are more common? My instinct was that they're more commonly stacked, so it would make sense for this to be the default layout and to add a boolean prop called inline to override the stacked styles, but that's just an assumption. What do you think?

I would guess stacked is more often the case

Stacked is basically default. We tried to move away from inline checkboxes for form completion/usability reasons as default.
Good reminder that we need to make a small note in DSG.

Change 698871 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[wvui@master] Add layout styles and options for Checkbox and Radio

https://gerrit.wikimedia.org/r/698871

Change 698871 merged by jenkins-bot:

[wvui@master] [binary inputs] Add layout styles and options for Checkbox and Radio

https://gerrit.wikimedia.org/r/698871

Volker_E triaged this task as Medium priority.
Volker_E updated the task description. (Show Details)
Volker_E moved this task from Reviewing to Done on the WVUI board.

Change 715153 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/core@master] Update WVUI to v0.3.0

https://gerrit.wikimedia.org/r/715153

Change 715153 merged by jenkins-bot:

[mediawiki/core@master] Update WVUI to v0.3.0

https://gerrit.wikimedia.org/r/715153