adobe / adobe/da-nx

Add close button to experimentation overlay

Open
#245 0 comments 0 reactions 1 assignee Claimed by @varunmitra View on GitHub
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).

Image

**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()`

Image

Image

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.