feat: Add dialog component

[amanabiy]

Description

Adds an inline, non-modal Dialog component for in-context prompts, authorizations, and feedback. Dialog supports header actions, content, and footer slots, keeps the surrounding page interactive, manages initial and restored focus, and supports dismissal through the close button and Escape.

Related links, issue #, if available: 6f6tUHjL27wB - doc

How has this been tested?

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

• Changes include appropriate documentation updates.
• Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
• Changes do not include unsupported browser features, see CONTRIBUTING.md.
• Changes were manually tested for accessibility, see accessibility guidelines.

Security

• If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

• Changes are covered with new/existing unit tests?
• Changes are covered with new/existing integration tests?

---

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[codecov]

Codecov Report

❌ Patch coverage is 88.23529% with 6 lines in your changes missing coverage. Please review.
✅ Project coverage is 97.65%. Comparing base (1562d7b) to head (3d8e314).
⚠️ Report is 2 commits behind head on main.

Files with missing lines	Patch %	Lines
src/test-utils/dom/dialog/index.ts	71.42%	4 Missing ⚠️
src/dialog/internal.tsx	93.75%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #4904      +/-   ##
==========================================
- Coverage   97.66%   97.65%   -0.02%     
==========================================
  Files         959      962       +3     
  Lines       31345    31405      +60     
  Branches    11579    11597      +18     
==========================================
+ Hits        30614    30668      +54     
+ Misses        724      691      -33     
- Partials        7       46      +39     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Copilot]

🟡 Changes recommended

The updated Style API docs snapshot indicates an empty generated docs set (likely breaking snapshot tests) and the Dialog dismiss button can render without an accessible label when dismissAriaLabel is omitted.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Adds a new Dialog component to the Cloudscape React component library, including styling backed by design tokens, testing utilities, and example pages used for visual/integ validation.

Changes:

• Introduces Dialog (public component + internal implementation), styles, test classes, and unit tests.
• Extends design tokens (spacing/borders/colors/shadows + metadata + token name unions) to support the Dialog surface and layout.
• Adds test-utils DOM wrapper support for Dialog and updates snapshots/examples pages accordingly.

File summaries

File	Description
style-dictionary/visual-refresh/spacing.ts	Adds Dialog spacing tokens mapped to existing spacing primitives.
style-dictionary/visual-refresh/shadows.ts	Adds shadowDialog token.
style-dictionary/visual-refresh/metadata/spacing.ts	Adds metadata entries for new Dialog spacing tokens.
style-dictionary/visual-refresh/metadata/shadows.ts	Adds metadata for shadowDialog.
style-dictionary/visual-refresh/metadata/colors.ts	Updates Dialog color token descriptions; adds colorBorderDialogTop metadata.
style-dictionary/visual-refresh/metadata/borders.ts	Adds metadata for Dialog border radius/width and top border width.
style-dictionary/visual-refresh/colors.ts	Updates Dialog background/border mappings; adds colorBorderDialogTop.
style-dictionary/visual-refresh/borders.ts	Adds Dialog border radius/width tokens and top border width token.
style-dictionary/utils/token-names.ts	Extends token name unions for new Dialog tokens.
src/test-utils/dom/dialog/index.ts	Adds DialogWrapper for DOM test-utils.
src/dialog/test-classes/styles.scss	Adds test class hooks for Dialog sub-elements.
src/dialog/styles.scss	Implements Dialog styling using design tokens (padding, borders, separators).
src/dialog/internal.tsx	Implements Dialog behavior (focus management, Escape handling, dismiss button).
src/dialog/interfaces.ts	Defines public Dialog props and event detail types.
src/dialog/index.tsx	Exports public Dialog component wiring base-component metadata.
src/dialog/tests/dialog.test.tsx	Adds unit tests for rendering, accessibility labeling, dismiss behavior, and focus restoration.
src/tests/snapshot-tests/snapshots/test-utils-wrappers.test.tsx.snap	Updates test-utils wrappers snapshot to include Dialog wrapper APIs.
src/tests/snapshot-tests/snapshots/test-utils-selectors.test.tsx.snap	Updates test-utils selectors snapshot to include Dialog selectors.
src/tests/snapshot-tests/snapshots/style-docs.test.ts.snap	Updates Style API docs snapshot output (currently shows empty list).
src/tests/snapshot-tests/snapshots/documenter.test.ts.snap	Adds generated component docs snapshot for Dialog + wrapper docs snapshot.
src/tests/snapshot-tests/snapshots/design-tokens.test.ts.snap	Updates design token artifact snapshots reflecting new/changed Dialog tokens.
src/integ/snapshots/themes.test.ts.snap	Updates theme custom-properties snapshots to include new Dialog tokens/values.
pages/dialog/simple.page.tsx	Adds a basic in-flow Dialog demo page.
pages/dialog/permutations.page.tsx	Adds a permutations page to exercise layout combinations.
pages/dialog/inline-feedback.page.tsx	Adds an inline-feedback use-case demo for Dialog.
pages/dialog/follow-up-questions.page.tsx	Adds a follow-up questions (pagination in header actions) demo.
pages/dialog/common.tsx	Adds shared layout wrapper for Dialog demo pages.
pages/dialog/authorization.page.tsx	Adds an authorization flow demo for Dialog.
build-tools/utils/pluralize.js	Adds pluralization mapping for “Dialog” to “Dialogs”.

Review details

Suppressed comments (1)

src/tests/snapshot-tests/snapshots/style-docs.test.ts.snap:4

• This snapshot update indicates that the generated Style API docs directory contained no component docs ([]). That contradicts the test behavior, which throws when no Style API docs are present, and would also drop existing snapshots (alert/badge/button). This looks like an accidental snapshot regeneration without running the Style API docs build step; please regenerate after gulp styleDocs (and ensure the component list is non-empty) or revert this snapshot change.

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Style API docs list of components with a Style API doc matches the snapshot 1`] = `[]`;

• Files reviewed: 29/29 changed files
• Comments generated: 1
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

🟡 Changes recommended

There are blocking issues affecting API typing, i18n completeness for non-English locales (accessibility impact), and an inconsistent Style API docs snapshot update that likely breaks snapshot testing.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Review details

• Files reviewed: 33/33 changed files
• Comments generated: 3
• Review effort level: Lite