mirror of
https://github.com/lrnselfreliance/wrolpi.git
synced 2026-10-26 19:01:39 -04:00
1f890668b2
The file browser's footer is eight buttons, six of them disabled until something is selected, so the toolbar a user meets on arriving at /files was an undifferentiated grey row: Delete, Rename, Move, Ignore and Tag rendered as five identical pixels. Colour is how those are told apart at a glance. Mantine repaints a disabled button flat grey -- background, text and border all replaced with `--mantine-color-disabled`. Semantic kept the colour and dropped the whole control to `opacity: 0.45`; measured on the QA Pi, a disabled Delete is still red at 0.45, Rename still yellow, Tag still violet. That is the better signal: it says "not available" without also saying "no longer the delete button". Mantine leaves the variables alone and overrides only the painted properties, so the colour the call site asked for is still sitting in `--button-bg` and can simply be reinstated. Applies to every disabled Button and ActionIcon, not only the file browser's -- it is one convention, and having two would be worse than either. A pre-existing test earned its keep here: the IconStack corner disc was pinned to `--mantine-color-disabled` so it would follow a disabled button's grey, and it reddened the moment the button stopped being grey. That override is gone; `--button-bg` is now correct in both states, so the general rule covers them. Ten new cases. Fill equality is checked against each button's own enabled twin in all four themes, and separately across the five colours at once -- comparing each against its twin would still pass if every pair were grey, which is the actual bug. Opacity is asserted from both sides, because keeping the colour must not cost the affordance. Removing the rule reddens eleven. 1128 jest / 63 suites, 209 in ui-layout.cy.js, clean npm run build. |
||
|---|---|---|
| .. | ||
| Button.tsx | ||
| DataTable.tsx | ||
| Feedback.tsx | ||
| Icon.tsx | ||
| index.ts | ||
| Inputs.tsx | ||
| modal-stack.cy.js | ||
| Navigation.tsx | ||
| Overlays.tsx | ||
| SearchBox.tsx | ||
| Surfaces.tsx | ||
| ThemePicker.tsx | ||
| toast.test.js | ||
| toast.ts | ||
| ui-layout.cy.js | ||
| ui.css | ||
| ui.test.js | ||