feat(playground): confirm Share on the button and explain the rest in a dialog by javierbrea · Pull Request #643 · javierbrea/eslint-plugin-boundaries

javierbrea · 2026-11-10T19:34:42Z

Description

How Share tells its result, approved by the maintainer on a mockup (decision 25 of the playground plan). Part of #539, with no issue of its own.

What changes in the playground

A link that is copied turns Share into a check and Copied for 2 s, in the same color and at the same width. A visually hidden polite region says Link copied. The message next to Help is gone.
Every other outcome opens a dialog that stays until it is closed, with a ▲ or a ✕ before its title:
- Long link copied, with the length of the link and the 8,192 limit.
- The link could not be copied, when the browser refuses the clipboard. The link is in a read-only field, focused and selected, beside Close and Copy link, which copies again and turns into Copied as Share does. A failed retry selects the link again. For a link of more than 8,192 characters, the text adds the warning of Long link copied.
- The link could not be made, when the store of the host fails to make it.
- The project is too large for a link, with the limit it passes: 1,000 files and folders, 3,000 dependencies or 4 MiB of JSON.
- The project cannot be shared, with the reason of the reader of links in a box.
The text and the reason of the dialog are its accessible description. The field or Got it takes the focus, and closing gives it back to Share.
A share whose link comes after a newer share no longer writes that older link to the clipboard.
The playground guide lists the dialogs, in docs/ and in the 7.4.1 snapshot (decision 20).

`@boundaries/playground`

ShareOutcome is a union of objects with a kind. failed splits into not-made and not-copied, which carries the link and, for a long link, its length (long), and too-large carries the limit and its maximum. readSketch and decodeHash return the limit they passed as tooLarge (nodes, dependencies or bytes) instead of true.
useShareLink returns the confirmation (isCopied), the notice and whether its dialog is open, and copyAgain with its own confirmation.
New elements: ui-kit/molecules/CopyButton (both faces in one grid cell), share/ui/atoms/CopiedAnnouncement, share/ui/molecules/ShareDialog and share/ui/helpers/shareNotice. ShareMessage and shareMessage are removed.
VISUALLY_HIDDEN, in the theme constants, serves the status of the top bar and the new region.
getStyle of shared/testing/emittedStyle reads the rules of a media query, for the reduced-motion transitions. .agents/rules/playground-testing.md limits emittedStyle to the rules that jsdom does not apply: on hover or focus, inside a media query, on a pseudo-element, and those that win by specificity. The page objects of the share dialog, the help dialog (counters and size) and the target row of the tree now read getComputedStyle, which jsdom gets right there.

Plan

Decision 25 records the change, and section 6 of 00-shared.md describes it. The mockup is not updated.
Step 8 of 10-e2e.md expects Share to read Copied.

For the reviewer

Under React's strict mode, which the harness uses, the focus trap of MUI runs its mount effect twice and hands the focus to the paper. So the dialog gives the focus to its first control again once it has entered, on top of autoFocus.
A notice stays after its dialog closes, so the content does not change while the dialog fades out.

Checks

pnpm nx check:all playground: 150 suites, 4936 tests, 100% coverage, and the build. pnpm nx run-many -t check:spell check:types lint -p website.
Chromium through the harness at 1280×800, in light and dark: Share and Copy link are 86.48 px wide in both faces. The regions say Link copied. In the not-copied dialog, the field has the focus with the whole link selected, also after a failed retry. Escape gives the focus back to Share.

Agreement

Please check the following boxes after you have read and understood each item.

I have read the CONTRIBUTING document
I have read the CODE_OF_CONDUCT document
I have read the CONTRIBUTOR LICENSE AGREEMENT document, and I agree to the terms and declare that all my contributions are compliant with it.

🤖 Generated with Claude Code

… a dialog The result of Share was a small message next to Help, away from the button and easy to miss. A link that is copied now turns Share into a check and "Copied" for two seconds, at the same width, and a hidden live region announces it. Any other outcome opens a dialog that stays until it is closed: a long link, a link that the browser did not let the playground copy (shown selected, with Copy link to try again), a link that could not be made, and a project that is too large for a link (with the limit it passes) or that the reader of links refuses (with its reason). A share whose link comes after a newer share no longer writes it to the clipboard. The playground guide describes the new feedback. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Decision 25, the Share line of the interface in 00-shared.md, and the Share step of the e2e plan, which now expects the button to read Copied. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

devin-ai-integration

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no bugs or issues to report.

coveralls · 2026-11-10T19:42:37Z