Flagsmith / Flagsmith/flagsmith

Make FieldLabel own its typography

Open
#7,999 0 comments 0 reactions 0 assignees View on GitHub
front-end
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.