Dependency dialog

import { DependencyDialog } from "@/ui";

DependencyDialog matches the Figma Dependency Dialog component. Use it when someone tries to disable or delete a thing that other things still use, such as a column used by Definitions. It is a Small Dialog with no icon, a collapsible table of dependents and one line on what happens next.

Modes

mode sets the rail. In error mode the action button is red.

<DependencyDialog
  title="Disable Region"
  description="This column is used in the Definitions listed below. To disable it, first delete those Definitions. Once they are deleted, you can disable the column."
  items={[{ name: "Pipeline by region", owner: "John Diego" }, …]}
  footnote="You can't disable this column while these Definitions use it."
  mode="normal"
  onConfirm={goToDefinitions}
  onCancel={close}
  onClose={close}
/>

`mode`	Rail	Action
`normal`	Primary 500	`primary`
`warning`	#FBBF24	`primary`
`error`	Red	`red`

Collapsed

The toggle shows or hides the table. The blue count stays visible either way, so people know how many items depend on it before they open the list. Pass defaultExpanded={false} to start closed.

Over the page

Like Dialog, it is the panel only. Wrap it in a backdrop with role="dialog". See Opening a dialog.

Anatomy

Part	Spec
Panel	Small Dialog, 460px, no icon
Body	12px text, 0 12px 16px padding, 10px gaps
Toggle	12px caret and label, then the count: Primary 500, white 12px text, 6px radius
Table	1px Grey 100 border, 8px radius. Header on Grey 50 in 12px medium secondary text. Rows in 12px primary text, 60% for the name, scrolling after 95px (about four rows)
Footnote	14px medium

Figma sets the count at 10px. Code uses 12px, because 12px is the smallest text in the product.

Props

Prop	Type	Default	Notes
`title`	`string`		Name the action and the thing: "Disable Region".
`description`	`ReactNode`		What is blocked and how to unblock it.
`items`	`{ name, owner }[]`	`[]`	The dependents.
`itemLabel`	`string`	`"Definition Details"`	Follows "Show" or "Hide" on the toggle.
`columns`	`[string, string]`	`["Definition Name", "Owner"]`	Table headings.
`footnote`	`ReactNode`		One line on the consequence.
`mode`	`"normal" \| "warning" \| "error"`	`"normal"`
`defaultExpanded`	`boolean`	`true`
`confirmLabel`	`string`	`"Go to Definitions"`	Take people to where they can fix it.
`onConfirm`, `onCancel`, `onClose`	`function`

Do and don't

Do make the action take people to the dependents, so they can fix the blocker.
Do name the owners, so people know who to ask.
Don't offer to delete the dependents from this dialog.

ModesCopy Anchor Link

CollapsedCopy Anchor Link

Over the pageCopy Anchor Link

AnatomyCopy Anchor Link

PropsCopy Anchor Link