Form Dialog

Description

Form dialogs are controlled components used to render a form or something that requires user input. They are very similar to Confirmation dialogs but semantically they fulfill a different role.

Usage

<FormDialog
  title="Lorem ipsus"
  isOpen={isOpen}
  onClose={handleClose}
  onSecondaryButtonClick={handleCancel}
  onPrimaryButtonClick={handleSubmit}
>
  <Spacings.Stack scale="m">
    <Text.Body>{'Lorem ipsus ...'}</Text.Body>
    <Text.Body>{'Lorem ipsus ...'}</Text.Body>
  </Spacings.Stack>
</FormDialog>

Properties

Props	Type	Required	Values	Default	Description
`title`	`string`	✅	-	-	The title of the Form Dialog.
`isOpen`	`boolean`	✅	-	-	Indicates whether the dialog is open or closed. The parent component needs to manage this state.
`onClose`	`function`	-	-	-	Called when the dialog closes: click on overlay, click on close button, press ESC. If the function is not provided, the modal cannot be closed by any of the listed options.
`children`	`node`	✅	-	-	Content rendered within the dialog. If the content is long in height (depending on the screen size) a scrollbar will appear.
`size`	`string`		`m`, `l`, `scale`	`l`	Horizontal width limit of the dialog card.
`zIndex`	`number`		-	`1000`	The `z-index` value to be applied to the overlay container. It is useful if you have stacking modals.
`labelSecondary`	`string` \| `Intl message`	✅	-	`Cancel`	The label for the secondary button as a string, or as an Intl message (`{ id, defaultMessage }`). See Static properties.
`labelPrimary`	`string` \| `Intl message`	✅	-	`Confirm`	The label for the primary button as a string, or as an Intl message (`{ id, defaultMessage }`). See Static properties.
`onSecondaryButtonClick`	`function`	✅	-	-	Called when the secondary button is clicked.
`onPrimaryButtonClick`	`function`	✅	-	-	Called when the primary button is clicked.
`isPrimaryButtonDisabled`	`boolean`	-	-	false	Indicates whether the primary button is disabled or not.
`dataAttributesSecondaryButton`	`object`	-	-	-	Use this prop to pass `data-` attributes to the secondary button.
`dataAttributesPrimaryButton`	`object`	-	-	-	Use this prop to pass `data-` attributes to the primary button.
`getParentSelector`	`function`	-	-	-	The function should return an HTML element that will be used as the parent container to hold the modal DOM tree. If no function is provided, it's expected that an HTML element with the `id="parent-container"` is present in the DOM. In the `NODE_ENV=test` environment, the default HTML element is `body`.

Static properties

`FormDialog.Intl`

This is a convenience proxy export to expose pre-defined Intl messages defined in the @commercetools-frontend/i18n package. The Intl messages can be used for button labels.

<FormDialog
  // other props...
  labelSecondary={FormDialog.Intl.revert}
/>