WestpacCXTeam / GUI-source

Westpac GUI source code
http://WestpacCXTeam.github.io/GUI-source
GNU General Public License v2.0
37 stars 19 forks source link

Radios, Checkboxes and Switches — block by default? #387

Closed jonnystening closed 5 years ago

jonnystening commented 7 years ago

As per Input Fields (incl. Select inputs) and Input Groups... Radios, Checkboxes and Switches should be block by default.

@justinspencer?

Bootstrap have gone with this approach. I think aligning with this would be beneficial... it'd be more familiar for devs and better suit our upcoming form layout recommendation (stacked label/input).

Since Bootstrap applies display: block and width: 100% to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.

Checkboxes and radios... https://getbootstrap.com/docs/4.1/components/forms/#checkboxes-and-radios

This would potentially be a breaking change as existing radios & checkboxes are inline-block by default, only becoming block with a .radio-block or .checkbox-block modifier. This new approach would flip this... utilising an inline class wrapper to render the (edge case) current layout.

jonnystening commented 6 years ago

This would be a great opportunity to consolidate GUI-checkboxes and GUI-radios. They are 99.9% the same module, implementation only differing by use of input type="checkbox" vs type="radio". Bootstrap's unified (.form-check) module approach makes sense https://getbootstrap.com/docs/4.1/components/forms/#checkboxes-and-radios.

We could also address the clickable whitespace issue in the current checkbox and radio in block level mode. screen shot 2018-09-07 at 4 19 38 pm

This is best handled by using a wrapping div; inline-block label and input as children. With this approach the simple label wrapping method to connect label and input is probably not worthwhile, let's just use the for attribute as bootstrap do. This is really more correct from a semantics/a11y point of view too; even though it's a little more verbose.

jonnystening commented 5 years ago

The above considerations and additionally some a11y considerations (https://github.com/WestpacCXTeam/GUI-source/issues/433) will be handled by a brand new module called GUI-form-checks. For details of this project see https://github.com/WestpacCXTeam/GUI-source/issues/436