History

Akmal Isomadinov 332f1db9bf Client:GlobalEvents: Removed the display of password management on the keyboard when entering text		2023-10-16 15:01:46 +05:00
..
components	Client: Fixed pop-up window blocking in FF	2023-10-13 17:52:41 +05:00
handlers	Added mobileMore media query const	2023-10-09 18:02:32 +04:00
views	Client: Fixed pop-up window blocking in FF	2023-10-13 17:52:41 +05:00
index.js	Client: Fixed pop-up window blocking in FF	2023-10-13 17:52:41 +05:00
modal-dialog.stories.js	Fix media queries (replaced hugeMobile, smallTablet) by design	2023-10-06 15:11:39 +04:00
modal-dialog.test.js
README.md
styled-modal-dialog.js	Client:GlobalEvents: Removed the display of password management on the keyboard when entering text	2023-10-16 15:01:46 +05:00

README.md

ModalDialog

ModalDialog is used for displaying modal dialogs

Usage

import ModalDialog from "@docspace/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