GCDS: Label and legend (Checkboxes + radios) - Githubissues

cds-snc / platform-forms-client

NextJS application that serves the public-facing website for Forms

https://forms-staging.cdssandbox.xyz/

MIT License

35 stars 13 forks source link

GCDS: Label and legend (Checkboxes + radios) #4325

Open samsadasivan opened 2 months ago

samsadasivan commented 2 months ago

Use red required notation (!! Double checking this, we have been back and forth on this one from policy)
Still using focus-within to style label on focus
Typography doesn't match

DESKTOP

Forms Label text: Font size = 20px, Line-height = 28px (140%)
GCDS Label text: Font size = 20px, Line-height = 24px (120%)
Forms Hint text: Font size = 16px, Line-height = 22px (137.5%)
GCDS Hint text: Font size = 20px, Line-height = 24px (120%)

MOBILE

Forms Label text: Font size = 20px, Line-height = 28px (140%)
GCDS Label text: Font size = 16px, Line-height = 24px (150%)
Forms Hint text: Font size = 12px, Line-height = 16px (133.33333%)
GCDS Hint text: Font size = 16px, Line-height = 24px (150%)

Current state

Desired state

samsadasivan commented 2 months ago

IMPORTANT the Required label is what is being set here. We may get support tickets on this depending on what comms folks see as a mandatory style for the "Required" label cc: @Abi-Nada @hegazynourhan @srtalbot