mirror of
https://github.com/maputnik/editor.git
synced 2026-09-06 12:27:27 +00:00
Jamal Ali
c0f76dfff8
- Fixes #1675 ## Problem In the layer list, the show/hide button's `title` tooltip named the layer's current visibility instead of what a click does. A visible layer's button read `show` while clicking it hides the layer, and a hidden layer's button read `hide` while clicking it shows the layer — exactly reversed. `LayerListItem.tsx` derived a single value from the layer state: ```ts const visibilityAction = visibility === "visible" ? "show" : "hide"; ``` and passed it to `IconAction` as `action`, which `IconAction` used for three different things: choosing the icon, building the `--show`/`--hide` CSS modifier, and rendering `title={this.props.action}`. The first two are correct as a state indicator; only the tooltip needs the opposite verb. ## Change - `IconAction` gets an optional `title` prop and falls back to `action` when it is not given, so the delete and duplicate buttons are unchanged. - `LayerListItem` keeps `visibilityAction` (icon + `maputnik-layer-list-icon-action__visibility--hide` CSS modifier, which `_layer.scss` relies on to keep the button visible for hidden layers) and adds `visibilityTitle` for the inverted tooltip. No icon, class name or click behaviour changes. ## Test New regression test in `e2e/layers-list.spec.ts`: it asserts the button is titled `hide` while the layer is visible, clicks it, and asserts it is titled `show` once the layer is hidden. Against the unpatched component the first assertion fails with `Expected: "hide"` / `Received: "show"`, reproducing the reported behaviour. `npm run lint`, `npx tsc --noEmit`, `npx vitest run` (50 tests) and `npx playwright test e2e/layers-list.spec.ts` (28 tests) all pass. ## Note The tooltips in this component (`delete`, `duplicate`, `show`, `hide`) are plain English literals and are not run through `t()` today, so this change keeps them as-is rather than introducing translation keys for one button. Also worth flagging separately: these buttons carry `aria-hidden="true"`, so the `title` never reaches assistive technology at all — out of scope here, but it means the label is a mouse-hover tooltip only.