History

gopienkonikita 4586cb45d9 Web: Components: fixed CloseButton styles		2021-11-29 11:58:54 +03:00
..
index.js	Web: Fixed styles according layouts, renaming.	2021-11-22 10:15:24 +03:00
modal-dialog.stories.js	Web: Components: added stories (ModalDialog, MainButton, Loader, Link, LinkWithDropDown, Label, IconButton),fix HelpButton, Heading stories	2021-03-08 23:18:45 +03:00
modal-dialog.test.js
README.md	Web: Files: fixed styles after Cherry picking.	2021-11-19 16:58:31 +03:00
styled-modal-dialog.js	Web: Components: fixed CloseButton styles	2021-11-29 11:58:54 +03:00

README.md

ModalDialog

ModalDialog is used for displaying modal dialogs

Usage

import ModalDialog from "@appserver/components/modal-dialog";

<ModalDialog visible={false} scale={false} displayType="auto" zIndex={310}>
  <ModalDialog.Header>"Change password"</ModalDialog.Header>
  <ModalDialog.Body>
    <div>
      Send the password change instruction to the{" "}
      <a href="mailto:asc@story.book">asc@story.book</a> email address
    </div>
  </ModalDialog.Body>
  <ModalDialog.Footer>
    <Button
      label="Send"
      size="big"
      primary={true}
      onClick={() => alert("It's works!")}
    />
  </ModalDialog.Footer>
</ModalDialog>

Properties

Props	Type	Required	Values	Default	Description
`visible`	`bool`	-	-	-	Display dialog or not
`displayType`	`oneOf`	-	`auto`, `modal`, `aside`	`auto`	Display type
`scale`	`bool`	-	-	-	Indicates the side panel has scale
`onClose`	`func`	-	-	-	Will be triggered when a close button is clicked
`zIndex`	`number`	-	-	`310`	CSS z-index
`modalBodyPadding`	`string`	-	-	`16px 0`	CSS padding props for modal body section
`asideBodyPadding`	`string`	-	-	`16px 0`	CSS padding props for aside body section