Dialog

Playground

This component's contract doesn't list typed props, so the playground shows its documented example.

Documented example dialog-confirm : activate the close button or press Escape, close emitted once; the dialog stays open until open becomes false.

The render follows the page's theme switch: light, dark or high contrast. Both frameworks render the same example.

Code

The documented example. HTML is the markup the React component renders for it, which @oods/component-styles styles.

import { Button, Dialog } from '@oods/components-react';
import '@oods/component-styles/css';

export function Example() {
  return (
    <Dialog
      id="archive-workspace"
      open={true}
      modal={false}
      title="Archive workspace"
      description="Members lose access until the workspace is restored."
      size="sm"
      actions={<><Button content="Cancel" /><Button content="Archive workspace" /></>}
    >
      Invoices and subscriptions stay in the archive for 30 days.
    </Dialog>
  );
}

Props, slots and events

Contract version 1.1.0. Types are from the React declarations in @oods/components-react.

Slots

default, actions

Events

close

States

open, closed

Accessibility

Role

button

How it gets its name

aria-label on button[aria-label="Close"]

Keyboard

Obligations in the contract

• A native dialog element named by its h2 title (aria-labelledby) and described by its description (aria-describedby)
• The close control is a ghost icon button named by dismissLabel (default Close)
• Escape and the close control emit close

The consumer owns open: the close control, Escape and a browser close request emit close, and the dialog stays open until open becomes false. modal (default true) opens it in the browser with showModal(), over a backdrop with the page behind it inert and not scrolling (the page's own overflow and padding come back exactly when it closes, by any route, or unmounts), and a click on the backdrop emits close; modal false shows it in place, which a gallery or a static page uses. Server-rendered and static HTML carry the open attribute while open, and on a static page an inline runtime script makes the close control close it. size sets the largest inline size: sm 400px, md 512px or lg 640px. The default slot is the body; the actions slot (or the actions prop) is the right-aligned footer, and the HTML renderer draws a string or { label, intent } list there as buttons.

Tokens

The token roles this component reads.

• dialog.background
• dialog.border
• dialog.shadow
• dialog.backdrop
• dialog.title
• dialog.description

Readiness

The evidence recorded for this component, with its label.

react-and-vue: catalog_list gives this label when the React and Vue components have complete readiness evidence, but the sweep's generated apps don't use the component in both.

Use your own

You can replace this component with your own React or Vue component. Map it, and generated code imports yours at the exact version you name. A contract report, run in a real browser, lists what your component met, what it didn't, and what wasn't checked.

The component_map call, with the parts in angle brackets yours to fill:

{
  "action": "create",
  "apply": true,
  "externalSystem": "<your design system>",
  "externalComponent": "<YourDialog>",
  "oodsTraits": [
    "<trait names>"
  ],
  "substitution": {
    "component": "Dialog",
    "react": {
      "package": "<your-package>/react",
      "version": "<exact version>",
      "export": "<YourDialog>"
    },
    "vue": {
      "package": "<your-package>/vue",
      "version": "<exact version>",
      "export": "<YourDialog>"
    }
  }
}

How this page was made

Generated at build from the published data, each source with the hash of what was read. The page's manifest.

• Contract: @oods/component-contracts@0.10.1 componentContracts.Dialog sha256:ff9aec80242c…
• Documented example: @oods/component-contracts@0.10.1 sharedScenarios dialog-confirm sha256:6cef0ce2ebaa…
• Catalog entry (catalog_list): generated/0.10.1/system/catalog.json Dialog sha256:622be6e5138f…
• React readiness: @oods/components-react@0.10.1 readiness Dialog sha256:ba7b1cd5ff50…
• Vue readiness: @oods/components-vue@0.10.1 readiness Dialog sha256:70cdc54997c5…
• Prop types: generated/0.10.1/components/prop-types.json Dialog sha256:3f93f76916a4…