search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.84k stars 1.81k forks source link

[Feature]: Checkboxes improperly format as a row #11803

Open NashJames opened 2 years ago

NashJames commented 2 years ago

Found this :first-of-type property messing with out layout with a bunch of checkboxes. There's lots of cases to use them in a row, rather than column. Looks like it was built deliberately for column usage. The spacing between also is based on column, so is the :last-of-type.

https://github.com/carbon-design-system/carbon/blob/699b700b80ccdd31e6bc46a166b184e58571bbd4/packages/styles/scss/components/checkbox/_checkbox.scss#L25-L27

I would have sent a PR to delete those properties, and maybe replace space between with gap. But there's a couple ways to solve it you might prefer.

tw15egan commented 2 years ago

Hey @NashJames, do you have an example of the exact issue you're running into that we could take a look at? It would help with prescribing a solution

NashJames commented 2 years ago

This any help? image

I had to use a styled-components global style to fix it for now:

const CheckBoxStyleFix = createGlobalStyle`
  .bx--form-item.bx--checkbox-wrapper {
    margin-top: 0.1875rem
  }
`
tw15egan commented 2 years ago

@NashJames Thanks for that, I think this makes sense as an enhancement. We should add a prop that allows users to have the checkboxes display horizontally rather than stack in columns