Unify success-feedback UX: useTransientLabel hook + ActionConfirmationCard cleanup (ERMAIN-435)#805
Draft
bdart wants to merge 6 commits into
Draft
Unify success-feedback UX: useTransientLabel hook + ActionConfirmationCard cleanup (ERMAIN-435)#805bdart wants to merge 6 commits into
bdart wants to merge 6 commits into
Conversation
…dback Extracts the recurring ad-hoc pattern (useState + setTimeout(2000)) into a single, reusable hook. The hook: - resets isActive to false after delay ms (default 2000) - clears the timer on unmount — no leaks - restarts the timer if trigger is called while already active - optionally provides an srAnnouncement string for a role=status live region so icon-only swaps are announced to screen readers (ERMAIN-435 A11y point) Co-authored-by: Daniel <bdart@users.noreply.github.com>
…Label machinery The status / resolvedLabel / ActionConfirmationStatus type had zero consumers after ERMAIN-387 (add-in confirm cards now close on resolution instead of rendering a persistent resolved row). Removed: - ActionConfirmationStatus type and status/resolvedLabel props - isPending conditional rendering (card is always the pending form) - useLayoutEffect that moved focus on pending→resolved transition - resolvedRowLabel / resolvedTitle computed strings for resolved state - announcement live region update on resolution - conditional className / role / aria-label for resolved variant Kept: - mount-time focus grab (focusIfUnclaimed) - scrollIntoViewOnMount - polite sr-only announcement on mount for SR users who may not have focus on the card when it appears (simplified to fire once on mount) Co-authored-by: Daniel <bdart@users.noreply.github.com>
Replaces six independent ad-hoc implementations of the ~2s state+setTimeout copy-feedback pattern with the shared useTransientLabel hook. Sites migrated: - MessageContent.tsx (code-block copy button) — adds srAnnouncement live region - EratoEmailSuggestion.tsx (email copy button) - DefaultMessageControls.tsx (icon-only copy; removes useEffect+clearTimeout) - ChatShareDialog.tsx (share-URL copy; removes manual setIsCopied(false) on toggle-off) - ChatMessage.tsx (error-report copy button) - customer/examples/MessageControls.example.tsx (example override) No behaviour changes beyond eliminating timer leaks on unmount and standardising the 2000 ms reset across all sites. Co-authored-by: Daniel <bdart@users.noreply.github.com>
Establishes and documents the three-tier success/confirmation UX: - Transient ~2s label swap (useTransientLabel) for micro-actions - Toasts reserved for auth/permission and session/decision flows - Errors use sticky toast or inline Alert Resolves ERMAIN-435 item 4 (document the convention). Co-authored-by: Daniel <bdart@users.noreply.github.com>
- Add new 'Copied to clipboard' message (from MessageContent.tsx srAnnouncement) - Mark removed actionConfirmation.confirmed and actionConfirmation.dismissed messages as obsolete (ActionConfirmationCard resolved-row cleanup) Co-authored-by: Daniel <bdart@users.noreply.github.com>
Co-authored-by: Daniel <bdart@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Resolves ERMAIN-435 — unifies all web success/confirmation feedback onto the shared ~2 s label-swap pattern.
Changes
1.
useTransientLabelshared hook (frontend/src/hooks/ui/useTransientLabel.ts)New hook that encapsulates the recurring
useState(false) + setTimeout(2000)pattern:isActivebecomestruewhentrigger()is called, auto-resets afterdelayms (default 2000)trigger()while already active restarts the timer (debounce-safe)announcementparam →srAnnouncementstring for arole="status"sr-only live region (answers the A11y question from the issue: yes, the helper includes aria-live support, which callers opt in to)2.
ActionConfirmationCardcleanupRemoves the now-zero-consumer resolved-row machinery introduced before ERMAIN-387:
ActionConfirmationStatustype removed (also removed fromlibrary/index.ts)statusandresolvedLabelprops removeduseLayoutEffectfor pending→resolved focus removedannouncementlive region simplified: now fires once on mount only (still useful for SR users who don't have focus on the card when it appears)Tests updated: removed 5 tests covering the now-deleted resolved-state behaviour; kept and simplified the mount-announcement test.
3. Web call-site migrations
All six ad-hoc implementations replaced with
useTransientLabel:MessageContent.tsxReact.useState+ inlinesetTimeoutsrAnnouncementlive regionEratoEmailSuggestion.tsxuseState+ inlinesetTimeoutDefaultMessageControls.tsxuseState+useEffect/clearTimeoutuseEffectentirelyChatShareDialog.tsxuseState+window.setTimeoutsetIsCopied(false)on link-disableChatMessage.tsxuseState+window.setTimeoutcustomer/examples/MessageControls.example.tsxuseState+useEffect/clearTimeout4. Convention documentation (
frontend/src/components/README.md)Documents the three-tier feedback convention:
useTransientLabel) for micro-action success<Alert type="error">Out of scope
The Outlook add-in (done on ERMAIN-387 branch, PR #804).
Test results
pnpm typecheck)pnpm lint:strict)pnpm test run)Linear Issue: ERMAIN-435