search

ONSdigital / design-system

ONS Design System
https://service-manual.ons.gov.uk/design-system
MIT License
32 stars 21 forks source link

Investigate and adjust the alignment of radio indent line with radios #3388

Open rmccar opened 1 month ago

rmccar commented 1 month ago

As a user, I want the checkbox indent line to be centrally aligned with the radios, so that the layout remains visually consistent and organised.

IS IT CHECKBOX OR RADIO???

Acceptance Criteria:

  1. Investigate the current alignment of the checkbox indent line with the radios after the changes to the grid.
  2. Identify the cause of the misalignment.
  3. Explore solutions to centrally align the checkbox indent line with the radios, considering the need to add to the left margin.
  4. Ensure that any adjustments made take into the consideration the sizing scale.
  5. Verify that the changes are consistent across different screen sizes and devices.
  6. Ensure that the visual appearance of the checkbox indent line and radios is improved and aligns with the overall design guidelines.

Visualisation

Screenshot 2024-10-08 at 16 22 20

Link to the issue on Figma https://www.figma.com/design/Wr9b6pK35euFoA6xq3G9Ld/Grid-review?node-id=0-1&node-type=canvas&m=dev

rmccar commented 1 month ago

This example is a radio but is something that will affect checkboxes too. Adi has also spotted that the label text "choose a prefered time of day" in this example also doesnt align with the start of the radio label. This is also something we should try to cover in this card