SurfacesDmduskmoonimplemented6 demos

DmDrawer

DmDrawer opens a side panel with configurable footer and submit controls.

Import@duskmoon-dev/components/dm-drawer

1API sections

11documented props

4behavior scenarios

Key API

closeIconfooterfooterTextsubmitTextsubmitPropssubmitLoading

Usage

When to use

Use it in DuskMoon application screens that need a packaged, opinionated workflow component.
Reach for the lower-level standard component when the screen needs custom composition.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

DuskMoon workflow wrapper

Wraps lower-level primitives into a higher-level DuskMoon-prefixed workflow API.

Application defaults

Examples show the defaults and composition points expected by internal DuskMoon app screens.

Primary API surface

DmDrawer is most often configured through `closeIcon`, `footer`, `footerText`, `submitText`.

Covered behavior

Wraps Drawer with Dm class names and right placement defaults

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Basic usage

authored

Import the component stylesheet and DmDrawer from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { DmDrawer } from "@duskmoon-dev/components/dm-drawer";

export function Example() {
  return (<DmDrawer>DuskMoon Dm Drawer</DmDrawer>);
}

Preview

Wraps Drawer with Dm class names and right placement defaults

test-backed

DmDrawer scenario from the component test coverage: wraps drawer with dm class names and right placement defaults.

Source

import "@duskmoon-dev/components/styles.css";
import { DmDrawer } from "@duskmoon-dev/components/dm-drawer";

export function DmDrawerWrapsDrawerWithDmDemo() {
  return (<DmDrawer>DuskMoon Dm Drawer</DmDrawer>);
}

Preview

Renders submit footer from footerText and calls onSubmit

test-backed

DmDrawer scenario from the component test coverage: renders submit footer from footertext and calls onsubmit.

Source

import "@duskmoon-dev/components/styles.css";
import { DmDrawer } from "@duskmoon-dev/components/dm-drawer";

export function DmDrawerRendersSubmitFooterFromDemo() {
  return (<DmDrawer>DuskMoon Dm Drawer</DmDrawer>);
}

Preview

Prefers custom footer over submit footer

test-backed

DmDrawer scenario from the component test coverage: prefers custom footer over submit footer.

Source

import "@duskmoon-dev/components/styles.css";
import { DmDrawer } from "@duskmoon-dev/components/dm-drawer";

export function DmDrawerPrefersCustomFooterOverDemo() {
  return (<DmDrawer>DuskMoon Dm Drawer</DmDrawer>);
}

Preview

Keeps close behavior and supports submit disabled state

test-backed

DmDrawer scenario from the component test coverage: keeps close behavior and supports submit disabled state.

Source

import "@duskmoon-dev/components/styles.css";
import { DmDrawer } from "@duskmoon-dev/components/dm-drawer";

export function DmDrawerKeepsCloseBehaviorAndDemo() {
  return (<DmDrawer>DuskMoon Dm Drawer</DmDrawer>);
}

Preview

Sunshine Theme

Moonlight Theme

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <DmDrawer>DuskMoon Dm Drawer</DmDrawer>
</div>

<div data-theme="moonlight">
  <DmDrawer>DuskMoon Dm Drawer</DmDrawer>
</div>

API

The API reference below lists every parsed exported type or interface for DmDrawer. Start with `closeIcon`, `footer`, `footerText`, `submitText` for common usage.

Types: packages/components/src/components/dm-drawer/DmDrawer.types.tsScenarios: packages/components/src/components/dm-drawer/DmDrawer.test.tsx

DmDrawerPropsinterface extends Omit< DrawerProps, "className" | "closeIcon" | "footer" | "onClose" >

Prop	Type	Required	Description
`className`	`string`	No	className configures DmDrawer.
`closeIcon`	`ReactNode`	No	closeIcon configures DmDrawer.
`footer`	`ReactNode`	No	footer configures DmDrawer.
`footerText`	`ReactNode`	No	footerText configures DmDrawer.
`submitText`	`ReactNode`	No	submitText configures DmDrawer.
`submitProps`	`Omit<ButtonProps, "children" \| "onClick">`	No	submitProps configures DmDrawer.
`submitLoading`	`boolean`	No	submitLoading configures DmDrawer.
`submitDisabled`	`boolean`	No	submitDisabled configures DmDrawer.
`footerAlign`	`"left" \| "center" \| "right"`	No	footerAlign configures DmDrawer.
`onSubmit`	`() => void`	No	onSubmit configures DmDrawer.
`onClose`	`(event: MouseEvent<HTMLButtonElement>) => void`	No	onClose configures DmDrawer.