Add close button to experimentation overlay
- Dominant language
- JavaScript
- Stars
- 8
- Forks
- 38
- Avg merge
- 1d 11h
- Merged PRs (30d)
- 44
Description
**Description:**
The experimentation overlay (`#aem-sidekick-exp`) has no way to dismiss it once opened other than clicking the experimentation button in the sidekick toolbar. This can get cumbersome if several sidekick plugins are enabled (see screenshot).
**Changes:**
Added a close button (✕) to the `` component header that dismisses the overlay by sending a `{ close: true }` message via the MessageChannel port to the parent page, which removes the `is-visible` class from the palette.
- **`nx/blocks/exp/exp.js`** — Added `handleClose()` method that posts `{ close: true }` via the port, and a close button in the `render()` header
- **`nx/blocks/exp/exp.css`** — Added `.nx-exp-close` styles (dark circular button, positioned in the header grid)
- **`nx/public/plugins/exp/exp.js`** — Added `close` handler in `port1.onmessage` to remove `is-visible` from the palette; exported `remove()` function for sidekick integration
**Details:**
- The close button sits in the header row alongside the drag handle, title, and profile avatar (see screenshot)
- Styled as a small dark circular button (`28px`, `#2c2c2c` background, white text)
- Uses the existing MessageChannel port communication between the iframe and parent page
- The `remove()` export allows consuming sidekick integrations to toggle the overlay via `mod.remove()`
Contributor guide
Assessment
This issue has not been assessed yet.