guardian / guardian/dotcom-rendering

Refactor quiz answers to avoid overriding Source styles

Open
#12,487 0 comments 0 reactions 0 assignees View on GitHub
Pick me up Team Candidate: Articles and Publishing
Dominant language
TypeScript
Stars
274
Forks
34
Avg merge
2d 22h
Merged PRs (30d)
121

Description

Due to differences in design, quiz answers currently override a number of the Source radio button's default styles. As this relies upon the existing styling and structure of the component it is liable to break when a new version of Source is released.

Some possible options to avoid this:

- Extend the radio button component's theming support to allow more extensive customisation.
- Don't provide a label to the radio button component so it _only_ renders the button. This could then be wrapped with a `label` element which can be styled as needed.
- Don't use the radio button component at all. If the design has deviated enough from the default styles then perhaps it should be a separate component.

![Image](https://github.com/user-attachments/assets/f097d9d1-b130-4065-b5a7-cc01c1ce1434)

Contributor guide

Open the contributing guide

Research direction

Start by locating the quiz answer implementation and its use of the Source radio button component, then compare the answer styling with Source's default styles. Review the three proposed approaches and confirm the result no longer overrides Source styles while preserving the quiz answer design.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
design, frontend
Issue type
Refactor
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.