Align legends and labels in code + design

[RavinaSamaroo]

Differences:

1. Legends: We don't have the small version of the legend in code
2. Labels: The labels for the radios don't seem to be updated to the medium font which was outlined in this change log (bullet 7).

Figma file

So we should have:

2 legends

• small legend: 20px noto sans bold for the 'titles' of checks and radios; and
• large legend: H3 style font (existing one on the website) for the fieldset 'title'.

2 labels

• 20px noto sans bold for all form component 'titles'; and
• 20px noto sans medium for the checkbox and radio options

[melaniebmn]

Solutions we are exploring:

Option 1: Add legend state Add a legend state to define which legend size should be used - the benefit of this option is that it doesn't have any impact for the user.

Option 2: Add legend size prop Add a new legend size prop that lets the user choose which legend size to use. This puts the burden on the user to choose the right option and could lead to potential misuse.

Option 3: Include fieldset + correct legend size within checkbox + radio group Another option would be to integrate the fieldset + correct legend size inside the checkbox and radio group components. This option would require a significant rewrite of the current checkbox and radio-group components. It would also introduce breaking changes.

[adorayi]

Can we get an estimate on this as well as an update on the options above which is being applied?

[daine]

This ticket requires proper grooming -- it is the development portion of the corresponding design ticket #1078.

The dev team has met to discuss the options and have decided to proceed with a detailed analysis of the options which will be in a decision record document.

Once a decision record is completed and approved

• [ ] The dev and designers will then have an opportunity to review the proposed solution for the coded component given that the figma design + use cases are ready for review as well.

• [ ] The estimate can be done once

• [ ] ➡️ The development team will update this ticket to contain a user story, acceptance criteria, and a definition of done

[daine]

Here is a link to the decision record document (currently still in progress as of today August 14th): https://docs.google.com/document/d/1D7D-MR-iz0bh63f-3x49WVqymueShV4sMpqztvfeKh0/edit#heading=h.g4t201qj3ozp

[adorayi]

Can we get an update on this @daine Should we prioritize this before we do any testing on the Holidays app?