- 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.
## Launch Checklist
This PR increases coverage by adding unit tests to lib folde, replace
the skipped end to end placeholder with actual tests and adds more end
to end tests.
This was mostly done by AI (Claude opus 4.8) and I reviewed it and
requested changes where needed.
- [x] Briefly describe the changes in this PR.
- [x] Link to related issues.
- [x] Include before/after visuals or gifs if this PR includes visual
changes.
- [x] Write tests for all new functionality.
- [x] Add an entry to `CHANGELOG.md` under the `## main` section.
---------
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
## Launch Checklist
This PR replaces cypress with playwright.
<img width="1907" height="933" alt="image"
src="https://github.com/user-attachments/assets/b52075b3-eb3b-45dc-93dc-8c5e9cfd35dd"
/>
I hope this will make the end-to-end debugging and fixing easier due to
the async await support of playwright which is missing in cypress.
This is a pure refactoring change.
- [x] Briefly describe the changes in this PR.
- [x] Add an entry to `CHANGELOG.md` under the `## main` section.
---------
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
## Launch Checklist
Renames the e2e test and reduces changes as a preparation step from
playwright in the following PR:
- #1988
This is to keep as much history as possible.
<img width="1907" height="933" alt="image"
src="https://github.com/user-attachments/assets/b52075b3-eb3b-45dc-93dc-8c5e9cfd35dd"
/>
- [x] Briefly describe the changes in this PR.
---------
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Jamal Ali
Harel M