mirror of
https://github.com/Unleash/unleash.git
synced 2026-09-09 21:55:55 +00:00
Kamala
678d37df10
After having migrated our frontend to top label controls (behind feature flag: if it's disabled then they have the old floating labels), I'd like to prevent us from accidentally adding more floating labels. So this adds a [GritQL](https://biomejs.dev/reference/gritql/) Biome plugin (oss/floating-label.grit) that warns when a raw MUI control renders a floating label: a `label` attribute on a `TextField` (or `Autocomplete` via its `renderInput`), or an `InputLabel`. Wires it into biome.json scoped to frontend/src, whitelisting the top-label wrappers and the components that still keep a floating-label fallback behind the `topLabelInputs` flag. <img width="1073" height="353" alt="Screenshot 2026-07-24 at 12 15 38" src="https://github.com/user-attachments/assets/452951cc-270d-4b20-86b6-512f238f7a02" /> Also migrates leftover floating-label call sites to the top-label wrappers so the rule starts from a clean slate: - `MultipleRoleSelect` renders through `AutocompleteField`; its call site in ProjectAccessAssign drops the now-redundant outer `FormField` (amends my previous changes) - `ExploreCounterFilter` and `SelectCounterLabel` use `SelectField` - The config-button dropdown search (`StyledDropdownSearch`) uses `Input` - Deletes unused `AccessOverviewSelect`. From /custom-metrics (I think this is an experimental page and we can probably get rid of it, keeping it for now) <img width="399" height="330" alt="Screenshot 2026-07-24 at 12 49 34" src="https://github.com/user-attachments/assets/6b8ac461-c3f7-4486-ad9b-e5f8304bacb5" /> <img width="811" height="443" alt="Screenshot 2026-07-24 at 11 55 58" src="https://github.com/user-attachments/assets/f166a87e-6a8f-4cbd-8ce9-47b43895d24b" />
20 lines
1.0 KiB
Plaintext
20 lines
1.0 KiB
Plaintext
language js
|
|
|
|
// Flag raw MUI floating labels: a `label` attribute on a TextField/Autocomplete,
|
|
// or an `InputLabel` (the floating label for a Select). Use the top-label wrappers
|
|
// instead: TextField -> Input, Select+InputLabel -> GeneralSelect/SelectField,
|
|
// Autocomplete -> AutocompleteField. Wrappers and flag-off fallbacks are exempted
|
|
// via `overrides` in biome.json.
|
|
or {
|
|
`<TextField $props />` where {
|
|
$props <: contains jsx_attribute(name=`label`)
|
|
},
|
|
`<TextField $props>$_</TextField>` where {
|
|
$props <: contains jsx_attribute(name=`label`)
|
|
},
|
|
`<InputLabel $props />`,
|
|
`<InputLabel $props>$_</InputLabel>`
|
|
} as $match where {
|
|
register_diagnostic(span=$match, message="Floating label on a raw MUI control. Use a top-label wrapper instead: Autocomplete -> component/common/AutocompleteField/AutocompleteField | Select + InputLabel -> component/common/SelectField (or component/common/GeneralSelect/GeneralSelect) | TextField -> component/common/Input/Input", severity="warn")
|
|
}
|