Checkbox: Checkbox item spacing

[Spark450]

Info

The added margin bottom to the checkbox items (which does not exist on other inputs) is causing the error and helper text to be pushed down away from the input.

Issue was reported by Binoy Kanchanwala on August 14th 2024

Design specifications

Reference the following Figma designs

To Reproduce

Issue is viewable on the design system website sandbox

return (
  <GoAFormItem
    label="Basic"
    labelSize="regular"
    helpText=<>Some helper</>
    error=<>Some error</>
  >
    <GoACheckbox
      name="item"
      text="Item"
      value=""
      onChange={onChange}
      checked={true}
    ></GoACheckbox>
  </GoAFormItem>
);

Additional context

Some screenshots provided by the reporting team:

Acceptance Criteria

1. Reduce line-height on Checkbox

[bdfranck]

The extra space is coming from two sources:

1. A default bottom margin
2. Line height

First, the checkbox has a bottom margin.

You can remove it by adding mb="none" to the checkbox.

<goa-checkbox name="item" text="Item" mb="none" />

But the checkbox still has an extra 5px of vertical space compared to the Figma component. This is coming from an inherited line height of line-height-3.

When I add the below CSS to the checkbox component, the component height is the same as in Figma: 28px.

:host { line-height: 100%; }

[bdfranck]

Do teams use the checkbox more often without a bottom margin? 🤔 If so, we could change the default bottom margin on the checkbox to none.

[Spark450]

Consider fixing this by working on #2267

[twjeffery]

As Benji mentioned, currently this can be worked around with margin: none on the last checkbox in a group. Additional spacing adjusted in this PR: https://github.com/GovAlta/ui-components/pull/2296

It would be nice to have it automatically in it's own component as in https://github.com/GovAlta/ui-components/issues/2267, which is also a need for the public form to work properly.

[BumbleB2na]

This issue gets resolved by: https://github.com/GovAlta/ui-components/pull/2296

Could not link this issue to that PR because it's exceeded max of 10 linked issues.

[dustin-nielsen-goa]

Closing as this has been done