Flagsmith / Flagsmith/flagsmith
Make FieldLabel own its typography
- Dominant language
- Python
- Stars
- 6.6k
- Forks
- 567
- Avg merge
- 1d 13h
- Merged PRs (30d)
- 121
Description
Part of #5746. Follow-up from #7762 (Input TS migration).
`FieldLabel` renders ``, but `.control-label` only sets `display: block` + svg alignment. Its colour, font-weight and font-size all come from the global `label {}` element selector in `web/styles/project/_forms.scss` — so the DS component isn't self-contained; it leans on a global rule.
## Do
- Move `color` / `font-weight` / `font-size` into `.control-label` so `FieldLabel` styles itself.
- Then narrow or drop the global `label {}` rule.
## Watch out
Every non-`FieldLabel` `` in the app (Checkbox, ad-hoc forms) currently relies on that global rule, so audit/migrate those before removing it. That app-wide blast radius is why it was left out of #7762.
Contributor guide
Research direction
Start with web/styles/project/_forms.scss and inspect the existing .control-label and global label rules. Audit FieldLabel, Checkbox, and the ad-hoc form labels that currently depend on the global rule; done means FieldLabel owns its typography and the other labels retain their intended styling after the global rule is narrowed or removed.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, react
- Domain
- design, frontend
- Issue type
- Refactor
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100