Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@atlaskit/modal-dialog

atlassian164.1kApache-2.014.3.4TypeScript support: included

A modal dialog displays content that requires user interaction, in a layer above the page.

atlaskit, react, ui

readme

Modal dialog

A modal dialog displays content that requires user interaction, in a layer above the page.

Installation

yarn add @atlaskit/modal-dialog

Usage

Detailed docs and example usage can be found here.

changelog

@atlaskit/modal-dialog

14.3.4

Patch Changes

  • Updated dependencies

14.3.3

Patch Changes

  • #193214 c661806a65543 - Internal changes to how border radius and border width values are applied. No visual change.
  • Updated dependencies

14.3.2

Patch Changes

  • Updated dependencies

14.3.1

Patch Changes

14.3.0

Minor Changes

  • #173162 a3b23b79f4d68 - Adds a new FullScreenModalDialog component which is exposed behind the /full-screen entrypoint.

Patch Changes

  • Updated dependencies

14.2.12

Patch Changes

  • #186153 4389a7b035d36 - Add testid for modal-dialog to confirm a TTVC blindspot is caused by modal dialog

14.2.11

Patch Changes

  • Updated dependencies

14.2.10

Patch Changes

  • #182316 3e3e11916be69 - Migrated the internal usage of @atlaskit/focus-ring which uses Emotion for styling, to the new version built with Compiled CSS-in-JS.
  • Updated dependencies

14.2.9

Patch Changes

  • Updated dependencies

14.2.8

Patch Changes

  • Updated dependencies

14.2.7

Patch Changes

  • Updated dependencies

14.2.6

Patch Changes

  • Updated dependencies

14.2.5

Patch Changes

  • Updated dependencies

14.2.4

Patch Changes

14.2.3

Patch Changes

14.2.2

Patch Changes

14.2.1

Patch Changes

  • #155827 f6f4f5a8a8ae8 - Cleans up the platform_design_system_motion_on_finish_fix feature gate.
  • Updated dependencies

14.2.0

Minor Changes

  • #154745 7618d9837e247 - Tidy up design-system-closed-all-when-click-outside and sibling-dropdown-close-issue to provide better keyboard navigation.

14.1.4

Patch Changes

  • Updated dependencies

14.1.3

Patch Changes

  • #138405 7e6b125029348 - Increased the specificity of the height CSS property in desktop view to prevent modal dialogs from incorrectly stretching to full height.

14.1.2

Patch Changes

14.1.1

Patch Changes

  • Updated dependencies

14.1.0

Minor Changes

  • #134997 1c7642dd77422 - Increased the specificity of the width CSS property in desktop view to prevent full-width modal dialogs. This was caused by an odd CSS ordering issue in Compiled.

Patch Changes

  • Updated dependencies

14.0.4

Patch Changes

  • #133231 82b4213bf8e20 - Update the DOM order of the modal header when using the hasCloseButton prop to give maximal information to users of assistive technology.

14.0.3

Patch Changes

  • #126072 bb86d48c26f65 - Checks for undefined children in ModalTransition to prevent potential runtime errors with React 17
  • Updated dependencies

14.0.2

Patch Changes

  • Updated dependencies

14.0.1

Patch Changes

  • Updated dependencies

14.0.0

Major Changes

  • #128593 19d6172ffdfe9 - Migrated from @emotion/react to @compiled/react in order to improve performance, align with the rest of the Atlaskit techstack, and support React 18 Streaming SSR. Please note, in order to use this version of @atlaskit/modal-dialog, you will need to ensure that your bundler is configured to handle .css imports correctly.

    Most bundlers come with built-in support for .css imports, so you may not need to do anything. If you are using a different bundler, please refer to the documentation for that bundler to understandhow to handle .css imports. For more information on the migration, please refer to RFC-73 Migrating our components to Compiled CSS-in-JS.

Patch Changes

  • Updated dependencies

13.4.0

Minor Changes

13.3.0

Minor Changes

  • #129312 26ac9f1e06b2e - Modal body now explicitly sets the font style to use typography tokens, instead of relying on the CSS reset to be present. This change is behind the feature flag platform_ads_explicit_font_styles.

13.2.0

Minor Changes

  • #127054 fb709895d8d5c - [ux] Adds a new hasCloseButton prop to ModalHeader to add a close button. This uses the exported CloseButton internally.

    This is done to improve the accessibility of all modal dialogs and ensure that users of assistive technology get full context of the modal and so that pointer users have a more clear way to close the modal.

13.1.1

Patch Changes

13.1.0

Minor Changes

  • #126435 2d2f8bd9b056b - Release dedicated close button export. This can be used to add a close button to your modal header.

13.0.4

Patch Changes

  • Updated dependencies

13.0.3

Patch Changes

  • Updated dependencies

13.0.2

Patch Changes

13.0.1

Patch Changes

  • Updated dependencies

13.0.0

Major Changes

Patch Changes

  • Updated dependencies

12.20.8

Patch Changes

12.20.7

Patch Changes

  • Updated dependencies

12.20.6

Patch Changes

  • Updated dependencies

12.20.5

Patch Changes

12.20.4

Patch Changes

12.20.3

Patch Changes

  • Updated dependencies

12.20.2

Patch Changes

  • Updated dependencies

12.20.1

Patch Changes

  • Updated dependencies

12.20.0

Minor Changes

Patch Changes

  • Updated dependencies

12.19.3

Patch Changes

12.19.2

Patch Changes

12.19.1

Patch Changes

  • Updated dependencies

12.19.0

Minor Changes

12.18.5

Patch Changes

  • Updated dependencies

12.18.4

Patch Changes

  • #175556 1011dce3bcb2d - [ux] This change allowlists the AUI dialog for @atlaskit/modal-dialog's focus management and is implemented behind a feature flag. If successful, it will be available in later releases.

12.18.3

Patch Changes

12.18.2

Patch Changes

  • Updated dependencies

12.18.1

Patch Changes

  • #171994 be58e4bb2e387 - Migrating usages of UNSAFE types and entrypoints that have been renamed in @atlaskit/icon and @atlaskit/icon-lab.
  • Updated dependencies

12.18.0

Minor Changes

  • #170669 cc302b83d5934 - Fixes the top and bottom borders which indicate scrollability for modal content on React 18 by rewriting internal hooks.

12.17.14

Patch Changes

  • Updated dependencies

12.17.13

Patch Changes

12.17.12

Patch Changes

  • #166087 3ab7d7da348ab - Adds side-effect config to support Compiled css extraction in third-party apps

12.17.11

Patch Changes

  • Updated dependencies

12.17.10

Patch Changes

12.17.9

Patch Changes

  • Updated dependencies

12.17.8

Patch Changes

  • Updated dependencies

12.17.7

Patch Changes

  • Updated dependencies

12.17.6

Patch Changes

  • Updated dependencies

12.17.5

Patch Changes

12.17.4

Patch Changes

  • Updated dependencies

12.17.3

Patch Changes

  • #148281 3c4de48168ffe - Update the import path of useId* from @atlaskit/ds-lib
  • Updated dependencies

12.17.2

Patch Changes

  • Updated dependencies

12.17.1

Patch Changes

  • Updated dependencies

12.17.0

Minor Changes

  • #144047 de70c65e3e5ff - The Chrome bug workaround shipped in 12.16.0 behind a feature flag is now turned on for everyone and is no longer behind a feature flag.

12.16.0

Minor Changes

  • #141279 a38f3af4bfc79 - [ux] Adding a workaround for a Chrome bug where drag and drop cannot occur in an element positioned on top of an <iframe> on a different origin. The workaround is being added behind a feature flag.

12.15.7

Patch Changes

12.15.6

Patch Changes

12.15.5

Patch Changes

12.15.4

Patch Changes

12.15.3

Patch Changes

  • #134135 6597900cdd5be - We are testing an internal change to use an ID generator compatible with both React 16 and React 18. If these changes are successful, it will be rolled out in a later release.

12.15.2

Patch Changes

12.15.1

Patch Changes

  • Updated dependencies

12.15.0

Minor Changes

  • #127511 db30e29344013 - Widening range of react and react-dom peer dependencies from ^16.8.0 || ^17.0.0 || ~18.2.0 to the wider range of ^16.8.0 || ^17.0.0 || ^18.0.0` (where applicable).

    This change has been done to enable usage of `react@18.3as well as to have a consistent peer dependency range forreactandreact-domfor/platform` packages.

Patch Changes

  • Updated dependencies

12.14.10

Patch Changes

  • Updated dependencies

12.14.9

Patch Changes

  • Updated dependencies

12.14.8

Patch Changes

12.14.7

Patch Changes

12.14.6

Patch Changes

  • #122769 e5aebb55bcafc - [ux] This version removes platform.design-system-team.multiple-modal-inappropriate-focus_z5u4j feature flag. Now focus returns back to trigger elements upon closing nested modals.

12.14.5

Patch Changes

  • Updated dependencies

12.14.4

Patch Changes

  • Updated dependencies

12.14.3

Patch Changes

  • Updated dependencies

12.14.2

Patch Changes

12.14.1

Patch Changes

  • Updated dependencies

12.14.0

Minor Changes

  • #110670 c733254a2dd6e - Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime is implicitly set to automatic.

Patch Changes

  • Updated dependencies

12.13.5

Patch Changes

  • Updated dependencies

12.13.4

Patch Changes

  • #99952 1e7e09d75d5c - Support to close popup corrrectly when clicking iframe using layering under feature flag
  • Updated dependencies

12.13.3

Patch Changes

  • #100067 0601616da694 - Internal changes to resolve an issue where global style overrides could break alignment between the icon and title.

12.13.2

Patch Changes

  • Updated dependencies

12.13.1

Patch Changes

  • Updated dependencies

12.13.0

Minor Changes

Patch Changes

  • Updated dependencies

12.12.0

Minor Changes

  • #89943 9e8e7fd1a601 - [ux] Internal changes to typography, small visual change to modal title.

12.11.1

Patch Changes

12.11.0

Minor Changes

  • #82087 aa45bc0045bb - [ux] This change introduces focusLockAllowlist prop. It allows to pass callback function to specify nodes which focus lock should ignore.

12.10.10

Patch Changes

12.10.9

Patch Changes

  • Updated dependencies

12.10.8

Patch Changes

  • Updated dependencies

12.10.7

Patch Changes

  • Updated dependencies

12.10.6

Patch Changes

  • #72130 b037e5451037 - Update new button text color fallback for default theme (non-token) to match that of old button current text color

12.10.5

Patch Changes

  • Updated dependencies

12.10.4

Patch Changes

  • #68278 291b54998410 - Reset iframe to have auto pointer-events in modal under feature flag

12.10.3

Patch Changes

12.10.2

Patch Changes

12.10.1

Patch Changes

  • #58698 222c15fb9a38 - Modal gutter is now 64px instead of 60px. This means the modal now displays slightly lower than before and will be slightly more inset when at max width/height.

12.10.0

Minor Changes

  • #57627 bef9748d9db2 - [ux] We are testing default return focus on modal close behind a feature flag. This change returns focus to the element which triggered the modal to open. If this fix is successful, it will be available in a later release.

12.9.1

Patch Changes

12.9.0

Minor Changes

  • #43674 4061f5b29f8 - [ux] shouldReturnFocus now can accept ref as a value to return focus to a specified element on modal close.

12.8.5

Patch Changes

  • Updated dependencies

12.8.4

Patch Changes

  • Updated dependencies

12.8.3

Patch Changes

12.8.2

Patch Changes

  • #40650 07aa588c8a4 - Reverts the fix to text descender cut-off, due to incompatibilities with Firefox and Safari.

12.8.1

Patch Changes

12.8.0

Minor Changes

  • #39425 f0df9a3b6e7 - [ED-19408] Add new prop to modal shouldReturnFocus - shouldReturnFocus is used to control what happens when the user exits focus lock mode. If true, focus will be returned to the element that had focus before focus lock was activated. If false, focus remains where it was when the FocusLock was deactivated

12.7.1

Patch Changes

12.7.0

Minor Changes

Patch Changes

  • Updated dependencies

12.6.10

Patch Changes

  • #39787 6900f89eb0e - Internal changes to use space tokens. There is no expected visual or behaviour change.

12.6.9

Patch Changes

12.6.8

Patch Changes

  • #37789 d6f63fa1abc - Adds support for surface detection when using design tokens. Enabling children to be styled with the Modal’s surface color when using the utility.elevation.surface.current design token.
  • Updated dependencies

12.6.7

Patch Changes

12.6.6

Patch Changes

  • #38209 56b444b56a8 - Fix a bug where text descenders were cut off at high zoom levels on Windows

12.6.5

Patch Changes

  • #36744 c2484be748e - [ux] DSP-11269: hard coded the warning icon to improve color contrast

12.6.4

Patch Changes

  • #37066 c673c7246cf - Internal change to improve how media queries are applied. There is no expected behaviour change.

12.6.3

Patch Changes

  • #36754 4ae083a7e66 - Use @af/accessibility-testing for default jest-axe config and jest-axe import in accessibility testing.

12.6.2

Patch Changes

  • #34811 abf69e9a4f6 - Removes usage of deprecated theme mixins in favor of static token / color usage.

12.6.1

Patch Changes

12.6.0

Minor Changes

  • #34353 26388cfdd23 - Adds label prop for users of assistive technology to receive more context when using the modal.

12.5.7

Patch Changes

  • #34427 7e018144c35 - [ux] Add aria-label to scrollable ModalBody to communicate to AT users why ModalBody is focused.

12.5.6

Patch Changes

  • #34297 fd5c7f6ca6a - Fixes an issue where the focus moved inappropriately when closing a modal with multiple modals open.

12.5.5

Patch Changes

  • #34160 ba48a3a0fec - Remove redundant language from default icon labels for ModalTitle.

12.5.4

Patch Changes

12.5.3

Patch Changes

  • #34051 49b08bfdf5f - Migrated use of gridSize to space tokens where possible. There is no expected visual or behaviour change.

12.5.2

Patch Changes

12.5.1

Patch Changes

12.5.0

Minor Changes

Patch Changes

  • Updated dependencies

12.4.13

Patch Changes

12.4.12

Patch Changes

12.4.11

Patch Changes

12.4.10

Patch Changes

  • Updated dependencies

12.4.9

Patch Changes

  • #29725 63c2f0b3f96 - Internal changes to use spacing tokens. There is no expected behaviour or visual change.

12.4.8

Patch Changes

  • Updated dependencies

12.4.7

Patch Changes

  • #29390 18aeca8c199 - Internal change to update token references. There is no expected behaviour or visual change.

12.4.6

Patch Changes

  • #29227 4ee60bafc6d - ED-16603: Remove tooltips from VR tests and make them opt in. To opt-in, add allowedSideEffects when loading the page.

12.4.5

Patch Changes

  • #28064 b0f6dd0bc35 - Updated to use typography tokens. There is no expected behaviour or visual change.

12.4.4

Patch Changes

  • Updated dependencies

12.4.3

Patch Changes

  • Updated dependencies

12.4.2

Patch Changes

  • Updated dependencies

12.4.1

Patch Changes

  • #26408 9de88fa1e1e - Internal changes to include spacing tokens in component implementations.

12.4.0

Minor Changes

  • #24710 f3ffcf1a783 - Updates @emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.

Patch Changes

  • Updated dependencies

12.3.1

Patch Changes

12.3.0

Minor Changes

  • #24004 c44f3f5f973 - Modal Dialog’s focus lock now allows focus to reach elements outside the modal if they contain the data-atlas-extension attribute, such as a browser extension that renders in-browser.

Patch Changes

  • Updated dependencies

12.2.15

Patch Changes

12.2.14

Patch Changes

  • #23381 454ec1bbf07 - Internal code change turning on new linting rules.
  • Updated dependencies

12.2.13

Patch Changes

  • #22775 1c3948738f9 - Adjust the styles for an internal positioning element to constrain the height for ModalBody and restore support for custom scrolling regions"

12.2.12

Patch Changes

  • #22758 b72e12b97ac - [ux] Fixed a regression which prevented clicks on the blanket from closing modal dialogs with shouldScrollInViewport.

12.2.11

Patch Changes

  • #22614 8a5bdb3c844 - Upgrading internal dependency (bind-event-listener) for improved internal types

12.2.10

Patch Changes

  • #22029 e4b612d1c48 - Internal migration to bind-event-listener for safer DOM Event cleanup
  • 347fd703ce0 - Internally shifting to using bind-event-listener for events added in effects
  • 07ab2748b62 - [ux] - Changes the position of icon in ModalTitle having an appearance prop to be top aligned instead of center. This only affects titles that where the title wraps into multiple lines.
  • Updated dependencies

12.2.9

Patch Changes

  • Updated dependencies

12.2.8

Patch Changes

  • #20721 0d1c80fe00d - [ux] The width of the modal dialog now respect the custom value of the width prop.

12.2.7

Patch Changes

12.2.6

Patch Changes

  • Updated dependencies

12.2.5

Patch Changes

  • #19618 dcd92130cc4 - Migrate deleted background accent tokens to replacements
  • Updated dependencies

12.2.4

Patch Changes

  • Updated dependencies

12.2.3

Patch Changes

  • Updated dependencies

12.2.2

Patch Changes

  • #16752 19d72473dfb - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
  • 19d72473dfb - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
  • 19d72473dfb - Bump raf-schd to latest (4.0.3), including better TS typings.
  • Updated dependencies

12.2.1

Patch Changes

  • Updated dependencies

12.2.0

Minor Changes

  • #15998 2d60dd3116d - [ux] Modal dialogs which contain no focusable children will now lock focus to the modal container. The container will have a focus ring, so some VR tests may need to be regenerated.

Patch Changes

  • 3fced6aa641 - Bumped react-focus-lock to version ^2.2.1.
  • a8c55e479e8 - Removes unused dependency on emotion-styled
  • f460cc7c411 - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
  • Updated dependencies

12.1.1

Patch Changes

  • #16335 2b2290121eb - Raised the minimum version carat range of focus ring to latest.

12.1.0

Minor Changes

  • #14777 993eb469fcb - Instrumented @atlaskit/modal-dialog with the new theming package, @atlaskit/tokens. Tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.

Patch Changes

  • Updated dependencies

12.0.3

Patch Changes

  • Updated dependencies

12.0.2

Patch Changes

  • Updated dependencies

12.0.1

Patch Changes

  • Updated dependencies

12.0.0

Major Changes

  • #13864 07ad26948a1 - In this version we made modal dialog dramatically faster and lighter with a new composable API. This is a large change and we have provided a codemod to help you upgrade. Once you have run the codemod there may be manual change required so read below for all the changes in this release.

    Running the codemod cli

    To run the codemod: You first need to have the latest version installed

    yarn upgrade @atlaskit/modal-dialog@^12.0.0

    Once upgraded, use @atlaskit/codemod-cli:

    npx @atlaskit/codemod-cli --parser {tsx|babylon} --extensions ts,tsx,js [relativePath]

    The CLI will show a list of components and versions so select @atlaskit/modal-dialog@^12.0.0 and you will automatically be upgraded. If your usage of @atlaskit/modal-dialog cannot be upgraded a comment will be left that a manual change is required.

    Run npx @atlaskit/codemod-cli -h for more details on usage. For Atlassians, refer to the documentation for more details on the codemod CLI.

    Visual changes

    The primary button in the footer is now on the right. This has changed from being on the left to match the design documentation.

    The codemod will automatically reverse the order of your actions for this to happen. You could previously achieve this behaviour by adding an appearance key to your actions. The codemod will detect this and not reverse the array in this case.

    Composable API

    The old version of modal dialog had three props that mapped into components.

    • heading was the text for the header.
    • children was the React node that ended up in the modal body.
    • actions was an array of objects that mapped into buttons in the footer.

    The new composable API exposes these components so that you can use them directly as a child of modal dialog. This creates a clear parallel between what is given as children and what the modal dialog renders. It also allows you to use any valid React node as a child of modal dialog.

    // Before
import Modal, { ModalTransition } from '@atlaskit/modal-dialog';

...

<ModalTransition>
  {isOpen && (
    <Modal
      onClose={close}
      heading="Modal Title"
      actions={[
        { text: 'Secondary Action', onClick: secondaryAction },
        { text: 'Close', onClick: close },
      ]}
    >
      <Lorem count={2} />
    </Modal>
  )}
</ModalTransition>

// After
import Modal, {
  ModalBody,
  ModalFooter,
  ModalHeader,
  ModalTitle,
  ModalTransition,
} from '@atlaskit/modal-dialog';
import Button from '@atlaskit/button/standard-button';

...

<ModalTransition>
  {isOpen && (
    <Modal onClose={close}>
      <ModalHeader>
        <ModalTitle>Modal Title</ModalTitle>
      </ModalHeader>
      <ModalBody>
        <Lorem count={2} />
      </ModalBody>
      <ModalFooter>
        <Button appearance="subtle" onClick={secondaryAction}>
          Secondary Action
        </Button>
        <Button appearance="primary" autoFocus onClick={close}>
          Close
        </Button>
      </ModalFooter>
    </Modal>
  )}
</ModalTransition>

    Children

    The original children need to be wrapped in a ModalBody.

    // Before
<Modal>
  <Lorem count={2} />
</Modal>

// After
<Modal>
  <ModalBody>
    <Lorem count={2} />
  </ModalBody>
</Modal>

    Heading

    The heading prop turns into a ModalHeader and ModalTitle.

    // Before
<Modal heading="Modal Title">
  <Lorem count={2} />
</Modal>

// After
<Modal>
  <ModalHeader>
    <ModalTitle>Modal Title</ModalTitle>
  </ModalHeader>
  <ModalBody>
    <Lorem count={2} />
  </ModalBody>
</Modal>

    Actions

    The actions prop turns into Button's in a ModalFooter.

    // Before
<Modal
  actions={[
    { text: 'Secondary Action', onClick: secondaryAction },
    { text: 'Close', onClick: close },
  ]}
  heading="Modal Title"
>
  <Lorem count={2} />
</Modal>

// After
<Modal>
  <ModalHeader>
    <ModalTitle>Modal Title</ModalTitle>
  </ModalHeader>
  <ModalBody>
    <Lorem count={2} />
  </ModalBody>
  <ModalFooter>
    <Button appearance="subtle" onClick={secondaryAction}>
      Secondary Action
    </Button>
    <Button appearance="primary" autoFocus onClick={close}>
      Close
    </Button>
  </ModalFooter>
</Modal>

    Previously in the examples the primary button was on the left, we’ve updated the documentation to match our design documentation so that the primary button is on the right. You could previously achieve this behaviour by adding an appearance key to your actions. The codemod will reverse the order of your actions if you have not set the appearance in the actions.

    Components prop

    The components prop has been entirely replaced with the composable API. The philosophy of creating a custom component that receive modal's props has been replaced with custom components where the user can define their own props.

    Container

    To replace using the Container prop you can wrap Modal's children in the container component. Note that unless you are using a form you will need to add the style all: inherit; to ensure scrolling works.

    // Before
<Modal
  components={{
    Container: (props) => (
      <form {...props} onSubmit={onSubmit}>
        {props.children}
      </form>
    ),
  }}
>
  {children}
</Modal>

// After
<Modal>
  <form onSubmit={onSubmit}>
    {children}
  </form>
</Modal>

    To replace using the Header prop you can use your custom header as the first child.

    // Before
<Modal
  components={{
    Header: CustomHeader,
  }}
>
  {children}
</Modal>

// After
<Modal>
  <CustomHeader />
  {children}
</Modal>

    If you are creating a custom header you should call the new hook useModal to get the title id so the content and the title can be linked. You can also access the onClose function this way.

    import { useModal } from '@atlaskit/modal-dialog';

const CustomHeader = () => {
  const { onClose, titleId } = useModal();
  return (
    <div css={headerStyles}>
      <h1 css={headingStyles} id={titleId}>
        Custom modal header
      </h1>
      <Button onClick={onClose}>
        Close
      </Button>
    </div>
  );
};

    If you are doing something simple like adding a button you can continue to use ModalHeader.

    <ModalHeader>
  <ModalTitle>Custom modal header</ModalTitle>
  <Button appearance="link" onClick={closeModal}>
    Close
  </Button>
</ModalHeader>

    Footer and body

    Similar to Header, if you were using the Footer or Body prop, you can replace ModalFooter and ModalBody with any valid React node. ModalFooter and ModalBody also accept any valid React node as children. useModal works in any of Modal's children if you wish to use it.

    Scroll behaviour

    The scrollBehavior prop has changed from strings 'inside', 'inside-wide' and 'outside' to a boolean shouldScrollInViewport. 'inside' and 'inside-wide' have consolidated to be shouldScrollInViewport={false} and 'outside' is shouldScrollInViewport={true}.

    Appearance

    The appearance prop has been removed from Modal and is now set on ModalTitle and the primary Button.

    // Before
<ModalTransition>
  {isOpen && (
    <Modal
      appearance="danger"
      onClose={close}
      heading="Modal Title"
      actions={[
        { text: 'Secondary Action', onClick: secondaryAction },
        { text: 'Close', onClick: close },
      ]}
    >
      <Lorem count={2} />
    </Modal>
  )}
</ModalTransition>

// After
<ModalTransition>
  {isOpen && (
    <Modal onClose={close}>
      <ModalHeader>
        <ModalTitle appearance="danger">Modal Title</ModalTitle>
      </ModalHeader>
      <ModalBody>
        <Lorem count={2} />
      </ModalBody>
      <ModalFooter>
        <Button appearance="subtle" onClick={secondaryAction}>
          Secondary Action
        </Button>
        <Button appearance="danger" autoFocus onClick={close}>
          Close
        </Button>
      </ModalFooter>
    </Modal>
  )}
</ModalTransition>;

    isChromeless

    The isChromeless is no longer supported as you can any valid React node in Modal and choose not to use ModalHeader, ModalBody and ModalFooter. The only change to this behaviour is that there is no way to turn off the box shadow and border radius, which used to happen when isChromeless={true}. You only need to change your usage if Modal's children set their own background and don’t have a border radius of 3 px. In this case set the border radius to 3px.

    Test IDs

    The mapping for test IDs have changed.

    Modal: {testId} -> {testId}

    Modal content: {testId}-dialog-content -> DOM node removed

    Modal header: {testId}-dialog-content--header -> {testId}--header

    Modal title: {testId}-dialog-content--heading -> {testId}--title

    Modal body: {testId}-dialog-content--body -> {testId}--body

    Modal footer: {testId}-dialog-content--footer -> {testId}--footer

    Scrollable body content: {testId}-dialog-content--scrollable -> {testId}--scrollable

    Blanket: {testId}--blanket -> {testId}--blanket

    Modal actions: {testId}-dialog-content--action-{index} -> Removed, can set on Button

    Miscallaneous changes

    • ModalFooter now uses flex-end instead of space-between to justify its contents.
    • Inner components ModalFooter, ModalHeader and ModalBody no longer accepts style prop. If you wish to modify the styles, you have to build your own component.
    • ContainerComponentProps and ScrollBehavior types are now removed with no replacements.
    • (Header|Body|Footer|Title)ComponentProps types are now aliased to Modal(Header|Body|Footer|Title)Props, however most props are not used anymore as state is shared via the useModal hook.

Patch Changes

  • 1efbaebfbf3 - Fixes a bug in the appearance of the modal focus state which is now consistent with other elements in the Design System.
  • Updated dependencies

11.7.4

Patch Changes

11.7.3

Patch Changes

  • #12837 f75544b8b57 - [ux] As a part of DSP-895, a 0px margin was applied to button to fix a regression in Safari. This has been reverted as the 0px margin will be moved to css-reset instead. As a part of that same ticket, the specificity of the footer buttons in modal dialog was updated. This has also been reverted now that the 0px margin is being moved to css-reset.
  • Updated dependencies

11.7.2

Patch Changes

11.7.1

Patch Changes

  • Updated dependencies

11.7.0

Minor Changes

Patch Changes

  • 0f7fd3e7c0d - FIX: content focus and keylines only applied when the target DOM node exists
  • Updated dependencies

11.6.3

Patch Changes

  • #12263 95f500da676 - [ux] Fixes a bug introduced in 11.4.0 – CSS property left is put back to the styles of modal dialog container so it doesn't push out floated elements in the background.

11.6.2

Patch Changes

11.6.1

Patch Changes

  • #11407 e3a6469c8e5 - [ux] FIX: fixes a bug introduced in 11.5.0 – now modal dialog is correctly positioned when relative sizing is used as width

11.6.0

Minor Changes

Patch Changes

  • Updated dependencies

11.5.0

Minor Changes

  • #10569 c9cca93180b - [ux] Removes unnecessary dom nodes and refactors styles in modal dialog.

Patch Changes

  • e48c323dd75 - [ux] Fixed outside scrolling offset positioning when multiple modals are open.
  • 78803694b8c - [ux] Fixes display of focus ring on modal dialog content – now only shown when triggered by keyboard.

11.4.1

Patch Changes

  • Updated dependencies

11.4.0

Minor Changes

  • #10230 c0dbb6425f7 - [ux] Changed ModalDialog html tag from "div" to "section", changed ModalDialog heading from "h4" to "h1"
  • 7e3e3e16b55 - Entry points are now defined using the declarative format.
  • 441b1eded91 - [ux] Modal dialog no longer attaches keylines in its header/footer – it now shows and hides keylines in its body during scroll when the content overflows.
  • 96f56104518 - Adds ability to pass a element ref to the autoFocus prop to specifically focus on an element during initial mount.
  • 6ebee3d941d - Internal refactor converting to hooks.
  • e100d801223 - [ux] Modal dialog now uses @atlaskit/motion for its entering/exiting animations.
  • 8a22ca5357b - Event handler types are now exposed in the primary and types entrypoints.

Patch Changes

  • 8db8f3a22cb - Modal dialog now uses css props for styling.
  • 022ec2307a9 - The onClose callback now correctly has its second argument types as an analytic event.
  • d7d64aac39d - Fixed onStackChange from firing on inital mount. It will now only fire after the initial mount and its stack position has changed.
  • 1195a2abbbf - Modal dialog now uses new utility from ds-lib to merge refs.
  • Updated dependencies

11.3.0

Minor Changes

  • #9756 0e0b2148d48 - Modal dialog now attaches data-testid to its header and footer.

Patch Changes

  • a9dc147612a - [litemode] Internal nested modal components have been re-written as hooks.
  • 910c7744256 - Internal restructure of files and folders.
  • Updated dependencies

11.2.9

Patch Changes

  • #9083 624d33651cf - Fix content remounts in version >= 11.1.3
  • Updated dependencies

11.2.8

Patch Changes

  • #8644 79c23df6340 - Use injected package name and version for analytics instead of version.json.
  • Updated dependencies

11.2.7

Patch Changes

11.2.6

Patch Changes

11.2.5

Patch Changes

  • #7425 d94d90714b - Modal will retain full-width at viewports < 320px. This makes it consistent with < 480px beahviour.

11.2.4

Patch Changes

11.2.3

Patch Changes

  • #5497 5f58283e1f - Export types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules compiler option. This requires version 3.8 of Typescript, read more about how we handle Typescript versions here: https://atlaskit.atlassian.com/get-started Also add typescript to devDependencies to denote version that the package was built with.

11.2.2

Patch Changes

  • Updated dependencies

11.2.1

Patch Changes

  • #5164 2ac834240e - Undo analytics-next file restructure to allow external ts definitions to continue working

11.2.0

Minor Changes

Patch Changes

  • c48024293c - Fixed an issue when using scrollBehavior="outside" would cause Firefox to not allow scrolling of modal
  • Updated dependencies

11.1.6

Patch Changes

11.1.5

Patch Changes

  • #4424 8598d0bd13 - Remove unnecessary code and tests for IE11.
  • 6ac737558f - Remove non-standard CSS property -ms-high-contrast. The -ms-high-contrast CSS media feature is a Microsoft extension that describes whether the application is being displayed in high contrast mode, and with what color variation.
  • Updated dependencies

11.1.4

Patch Changes

  • #3885 6c525a8229 - Upgraded to TypeScript 3.9.6 and tslib to 2.0.0

    Since tslib is a dependency for all our packages we recommend that products also follow this tslib upgrade to prevent duplicates of tslib being bundled.

11.1.3

Patch Changes

  • #3823 c1b8d0e897 - You can now scroll using a touchscreen in the body of modal-dialog content

11.1.2

Patch Changes

  • #3293 954cc87b62 - The readme and package information has been updated to point to the new design system website.

11.1.1

Patch Changes

  • #4191 810f11aaab - Custom body styles have been added back. They will be removed in the next major version - if you're customizing the body of the modal dialog please make sure to spread props onto your custom component.

11.1.0

Minor Changes

  • #3954 727776fa32 - Missing types for component overrides are now exposed - you can access them through the root entrypoint.

    import {
    BodyComponentProps,
    TitleComponentProps,
    ContainerComponentProps,
    FooterComponentProps,
    HeaderComponentProps,
    ScrollBehavior,
} from '@atlaskit/modal-dialog';

11.0.3

Patch Changes

11.0.2

Patch Changes

11.0.1

Patch Changes

  • #3428 95261cf7b0 - Fixed modal dialog focus issue
  • 3414523d6f - Rearange buttons order to align with design guidelines
  • 30f8909177 - fixed the layering between header, content, and footer
  • db053b24d8 - Update all the theme imports to be tree-shakable

11.0.0

Major Changes

Patch Changes

  • Updated dependencies

10.6.4

Patch Changes

  • #2763 5be257c6f6 - Fix issue with the way that tabIndex was applied to dialog content. Now the check looks at whether the container is scrollable, rather than the shouldScroll prop.
  • 057d870973 - Fix keyboard scrolling of modal dialog content

10.6.3

Patch Changes

  • #2443 fddc283495 - Added aria-labelledby to dialog and point it to the real heading
  • b2b0b94079 - Reverts breaking test id change.

10.6.2

Patch Changes

  • #2866 54a9514fcf - Build and supporting files will no longer be published to npm

10.6.1

Patch Changes

10.6.0

Minor Changes

  • #2137 98e93d93ec - ActionProps.text now accepts React.ReactNode instead of just string

Patch Changes

10.5.9

Patch Changes

  • Updated dependencies

10.5.8

Patch Changes

  • #2012 53d09bdb5d - Reverts scrolling fix which introduced a layering regression.

10.5.7

Patch Changes

10.5.6

Patch Changes

10.5.5

Patch Changes

10.5.4

Patch Changes

10.5.3

Patch Changes

10.5.2

Patch Changes

10.5.1

Patch Changes

10.5.0

Minor Changes

  • [minor]24865cfaff:

    Allowing support for using with new react-beautiful-dnd 12.x API

Patch Changes

10.4.0

Minor Changes

  • [minor]1ed27f5f85:

    Adds prop types for Header / Footer render props.

10.3.6

10.3.5

Patch Changes

  • [patch]b39742b616:

    fixed type for the actions props

10.3.4

Patch Changes

  • [patch]f86839ca4e:

    @atlaskit/portal had an issue in IE11 and this is fixed in 3.1.2

10.3.3

Patch Changes

  • [patch]35d2229b2a:

    Adding missing license to packages and update to Copyright 2019 Atlassian Pty Ltd.

10.3.2

Patch Changes

  • [patch]a2d0043716:

    Updated version of analytics-next to fix potential incompatibilities with TS 3.6

10.3.1

10.3.0

Minor Changes

  • [minor]66e147e6a1:

    Adding an optional prop testId that will set the attribute value data-testid. It will help products to write better integration and end to end tests.

10.2.1

10.2.0

Minor Changes

10.1.9

Patch Changes

  • [patch]097b696613:

    Components now depend on TS 3.6 internally, in order to fix an issue with TS resolving non-relative imports as relative imports

10.1.8

Patch Changes

  • [patch]0d7d459f1a:

    Fixes type errors which were incompatible with TS 3.6

10.1.7

Patch Changes

  • [patch]f4ba40109f:

    Refactors modal-dialog's styled component props

10.1.6

Patch Changes

10.1.5

Patch Changes

  • [patch]708028db86:

    Change all the imports to theme in Core to use multi entry points

10.1.4

Patch Changes

  • [patch]de35ce8c67:

    Updates component maintainers

10.1.3

Patch Changes

  • [patch]926b43142b:

    Analytics-next has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No behavioural changes.

    Breaking changes

    • withAnalyticsForSumTypeProps alias has been removed, please use withAnalyticsEvents
    • AnalyticsContextWrappedComp alias has been removed, please use withAnalyticsContext

    Breaking changes to TypeScript annotations

    • withAnalyticsEvents now infers proptypes automatically, consumers no longer need to provide props as a generic type.
    • withAnalyticsContext now infers proptypes automatically, consumers no longer need to provide props as a generic type.
    • Type WithAnalyticsEventProps has been renamed to WithAnalyticsEventsProps to match source code
    • Type CreateUIAnalyticsEventSignature has been renamed to CreateUIAnalyticsEvent to match source code
    • Type UIAnalyticsEventHandlerSignature has been renamed to UIAnalyticsEventHandler to match source code
    • Type AnalyticsEventsPayload has been renamed to AnalyticsEventPayload
    • Type ObjectType has been removed, please use Record<string, any> or [key: string]: any
    • Type UIAnalyticsEventInterface has been removed, please use UIAnalyticsEvent
    • Type AnalyticsEventInterface has been removed, please use AnalyticsEvent
    • Type CreateAndFireEventFunction removed and should now be inferred by TypeScript
    • Type AnalyticsEventUpdater removed and should now be inferred by TypeScript

10.1.2

10.1.1

Patch Changes

  • [patch]688f2957ca:

    Fixes various TypeScript errors which were previously failing silently

10.1.0

Minor Changes

  • [minor]eb7b748d59:

    Modal-dialog padding now matches AGD and GUI pack

10.0.14

Patch Changes

  • [patch]9f8ab1084b:

    Consume analytics-next ts type definitions as an ambient declaration.

10.0.13

Patch Changes

  • [patch]bbff8a7d87:

    Fixes bug, missing version.json file

10.0.12

Patch Changes

  • [patch]18dfac7332:

    In this PR, we are:

    • Re-introducing dist build folders
    • Adding back cjs
    • Replacing es5 by cjs and es2015 by esm
    • Creating folders at the root for entry-points
    • Removing the generation of the entry-points at the root Please see this ticket or this page for further details

10.0.11

Patch Changes

  • [patch]d0db01b410:

    TypeScript users of withAnalyticsEvents and withAnalyticsContext are now required to provide props as a generic type. This is so that TypeScript can correctly calculate the props and defaultProps of the returned component.

    Before:

    withAnalyticsEvents()(Button) as ComponentClass<Props>;

    After:

    withAnalyticsEvents<Props>()(Button);

10.0.10

10.0.9

Patch Changes

  • [patch]0342746c45:

    Closing a dialog in IE11 specific event key

10.0.8

10.0.7

10.0.6

Patch Changes

  • [patch]4615439434:

    index.ts will now be ignored when publishing to npm

10.0.5

Patch Changes

  • [patch]02f1f73671:

    heading prop type changed from string to React.ReactNode. This provides more flexibility for consumers to provide i18n components like FormattedMessage.

10.0.4

10.0.3

10.0.2

10.0.1

  • [patch]b0ef06c685:

    • This is just a safety release in case anything strange happened in in the previous one. See Pull Request #5942 for details

10.0.0

  • [major]06c5cccf9d:

    • modal-dialog has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No API or behavioural changes.

  • [patch]c3ab82ed42:

    • Bump react-focus-lock to latest 1.19.1, it will fix a bug with document.activeElement

  • Updated dependencies dacfb81ca1:

9.0.0

  • [major]7c17b35107:

    • Updates react and react-dom peer dependencies to react@^16.8.0 and react-dom@^16.8.0. To use this package, please ensure you use at least this version of react and react-dom.

8.0.9

8.0.8

8.0.7

8.0.6

8.0.5

  • [patch]cc8378fcd4:

    • Modal-dialog has been migrated from styled-components to Emotion (v10)
    • styled-components is no longer a peer-dependency
    • Render props Body, Header, Footer and Container continue to get styles applied via className
    • Fixes an issue with modal contents that re-rendered on resize
    • Fixes an issue with forms losing state
    • SSR now works out of the box

    Warning

    Emotion 10 does not provide support for Enzyme shallow rendering. This is due to the fact that uses it's own JSX pragma to support the CSS prop. The pragma internally wraps components and attaches a sibling style tag. Consequently, these implementation details may now be visible as conflicts in your snapshot tests and may be the cause of test failures for cases that reach into modal-dialog.

    If you are using Enzyme to test components dependent on Modal-Dialog, you may need to replace calls to shallow() with a call to mount() instead.

    For more information please see: Migrating to Emotion 10

8.0.4

8.0.3

8.0.2

8.0.1

  • [patch]0f764dbd7c:

    • Modal-dialog no longer shows unnecessary scrollbars in modern browsers

8.0.0

  • [major]76299208e6:

    • Drop ES5 from all the flow modules

    Dropping CJS support in all @atlaskit packages

    As a breaking change, all @atlaskit packages will be dropping cjs distributions and will only distribute esm. This means all distributed code will be transpiled, but will still contain import and export declarations.

    The major reason for doing this is to allow us to support multiple entry points in packages, e.g:

    import colors from `@atlaskit/theme/colors`;

    Previously this was sort of possible for consumers by doing something like:

    import colors from `@atlaskit/theme/dist/esm/colors`;

    This has a couple of issues. 1, it treats the file system as API making internal refactors harder, we have to worry about how consumers might be using things that aren't actually supposed to be used. 2. We are unable to do this internally in @atlaskit packages. This leads to lots of packages bundling all of theme, just to use a single color, especially in situations where tree shaking fails.

    To support being able to use multiple entrypoints internally, we unfortunately cannot have multiple distributions as they would need to have very different imports from of their own internal dependencies.

    ES Modules are widely supported by all modern bundlers and can be worked around in node environments.

    We may choose to revisit this solution in the future if we find any unintended condequences, but we see this as a pretty sane path forward which should lead to some major bundle size decreases, saner API's and simpler package architecture.

    Please reach out to #fabric-build (if in Atlassian) or create an issue in Design System Support (for external) if you have any questions or queries about this.

7.3.0

  • [minor]f26a3d0235:

    • Added media queries to make Modal Dialogs Responsive

7.2.4

7.2.3

  • [patch]06713e0a0c:

    • popup select "target" is now a function that must resolve to a node

7.2.2

  • [patch]a7670c1488:

    • Enabling handling focus in model-dialog by rendering component in model-dialog only after portal in model-dialog is attached to DOM.

  • Updated dependencies 27cacd44ab:

7.2.1

7.2.0

  • [minor]07c4cd1:

    • Feature: components prop now has an optional container entry that is wrapped around the header, body and footer. This provides compatibility for forms with fields in the body, and submit buttons in the footer
    • API changes:
      • The header, body and footer props have been deprecated; such custom components should be passed within the components prop instead.
      • Custom Body components passed in using the new method must contain a ref element; this can be done using forwardRef, as seen in the custom example.
    • Documentation: Examples have been updated to demonstrate the new container prop, as well as utilise the new composition method for custom header/body/footers.

7.1.2

  • [patch]2686f21:

    • Removed example demonstrating deprecated reference behaviour

7.1.1

7.1.0

  • [minor]7f99dec:

    • Fix usage of PopupSelect inside ModalDialog

7.0.14

7.0.13

7.0.12

7.0.11

  • [patch]abd3a39:

    • Bump react-beautiful-dnd dependency to v10.0.2

7.0.10

7.0.9

  • [patch]1fb2c2a:

    • Fixed issue where tooltips and modals would initially render in the wrong location

7.0.8

7.0.7

  • [patch]a637f5e:

    • Refine and fix some flow type errors found by fixing @atlaskit/analytics-next HOCs to allow flow to type check properly

7.0.6

  • [patch]7cbd729:

    • Fixes visual bug where header and footer keylines appeared below textboxes and other components

7.0.5

  • [patch]72bc8da:

    • Removes reference to window in initial state to properly support ssr

  • [patch]b332c91:

    • upgrades verison of react-scrolllock to SSR safe version

7.0.4

7.0.3

  • [patch] Adds missing implicit @babel/runtime dependency b71751b

7.0.2

7.0.1

7.0.0

  • [patch] Updates dependency on portal b46385f
  • [major] Changes the pattern for using dialogs. Adds ModalTransition component to @atlaskit/modal-dialog. See the migration guide for more information. d5a043a

6.0.12

  • [patch] Bump react-focus-lock to fix issues with selecting text in Safari. 62dc9fc

6.0.11

  • [patch] Adds sideEffects: false to allow proper tree shaking b5d6d04

6.0.9

6.0.8

6.0.7

  • [patch] Bumping react-beautiful-dnd to version 9. Making use of use onBeforeDragStart for dynamic table 9cbd494
  • [none] Updated dependencies 9cbd494

6.0.6

6.0.5

6.0.4

6.0.3

  • [patch] Upgrading react-beautiful-dnd to 8.0.1 87cd977
  • [patch] Upgrading react-beautiful-dnd to 8.0.0 22efc08
  • [none] Updated dependencies 87cd977
  • [none] Updated dependencies 22efc08

6.0.2

  • [patch] Upgrading react-beautiful-dnd to 8.0.5 6052132
  • [none] Updated dependencies 6052132

6.0.1

6.0.0

5.2.8

5.2.7

5.2.6

5.2.5

5.2.4

5.2.3

  • [patch] Upgrading react-beautiful-dnd dependency to ^7.1.3 024b7fb
  • [patch] Updated dependencies 024b7fb

5.2.2

5.2.1

  • [patch] Removes tabbable and focusin dependencies 274e773
  • [none] Updated dependencies 274e773

5.2.0

5.1.1

5.1.0

5.0.1

5.0.0

4.0.5

4.0.2

  • [patch] AK-4416 changes meaning of autofocus prop values c831a3d

4.0.1

  • [patch] Add possibility to display heading in modal in one line (with ellipsis if content is wider than modal) 30883b4

4.0.0

  • [major] Bump to React 16.3. 4251858

3.5.1

  • [patch] Re-releasing due to potentially broken babel release 9ed0bba

3.5.0

  • [minor] Updated website to use iframe to load examples. Example loader now in a separate react app. Webpack config refactored to compile separate example loader, chunking refactored to be more performant with the new website changes. Updated modal-dialog to use new component structure to optionally specify a Body wrapping component. e1fdfd8

3.4.0

  • [minor] Update styled-components dependency to support versions 1.4.6 - 3 ceccf30

3.3.15

3.3.14

  • [patch] Fix react-beautiful-dnd position issues when used inside a modal dialog cfda546

3.3.12

  • [patch] Remove babel-plugin-react-flow-props-to-prop-types 06c1f08

3.3.11

  • [patch] Packages Flow types for elements components 3111e74

3.3.9

  • [patch] Updated inline-dialog to include boundaries element prop, updated Layer to have dynamic boolean escapeWithReference property, updated modal-dialog Content component with overflow-x:hidden' cb72752

3.3.8

  • [patch] Prevent window from being scrolled programmatically 3e3085c

3.3.5

  • [patch] Migrate Navigation from Ak repo to ak mk 2 repo, Fixed flow typing inconsistencies in ak mk 2 bdeef5b

3.3.4

  • [patch] Fix modal appearing behind navigation's drawer blanket when layer manager is not used a6c6e5e

3.3.3

  • [patch] Resolved low hanging flow errors in field-base field-text comment icon item and website, $ 007de27

3.3.2

  • [patch] Fix modal height being clipped by destination parent c30e7b0

3.3.1

  • [patch] Migration of Blanket to mk2 repo 1c55d97

3.3.0

  • [minor] Add React 16 support. 12ea6e4

3.2.5

  • [patch] Migrate modal-dialog to ak mk 2 update deps and add flow types a91cefe

3.2.4 (2017-11-30)

  • bug fix; fix modal dialog not shrinking to viewport height in IE11 (issues closed: ak-3879) (d3bb5cd)

3.2.3 (2017-11-30)

  • bug fix; release stories with fixed console errors (3321c2b)

3.2.2 (2017-11-17)

  • bug fix; bumping internal dependencies to latest major version (3aefbce)

3.2.1 (2017-11-13)

  • bug fix; remove chrome from the wrapping dialog (issues closed: #67) (21f3a0e)

3.2.0 (2017-10-26)

  • bug fix; add deprecation warning to spotlight package (3ea2312)
  • feature; cleanup layer-manager and modal-dialog in preparation for onboarding (02a516b)

3.1.3 (2017-10-26)

  • bug fix; fix to rebuild stories (793b2a7)

3.1.2 (2017-10-22)

  • bug fix; update styled-components dep and react peerDep (6a67bf8)

3.1.1 (2017-10-12)

  • bug fix; bumps version of Page (issues closed: ak-3680) (8713649)

3.1.0 (2017-10-11)

  • feature; add chromeless option to modal to support Connect JSAPI (5ca6a65)

3.0.2 (2017-10-05)

  • bug fix; resolve error in modal dialog (issues closed: ak-3623) (2052679)

3.0.1 (2017-09-26)

  • bug fix; update webpack raw path (issues closed: ak-3589) (0aa9737)

3.0.0 (2017-09-13)

  • breaking; onDialogDismissed = onClose, isOpen prop removed, just render the modal to display it (3819bac)
  • breaking; major overhaul to modal implementation and behaviour (issues closed: ak-2972, ak-3343) (3819bac)

2.6.0 (2017-08-07)

  • feature; Added support for custom modal heights, with the new ModalDialog.height prop. It accepts a number (converted to px) or string (not converted to px, so you can use any unit you like such as %, vh, etc). (issues closed: ak-1723) (3c1f537)

2.5.2 (2017-07-27)

  • fix; rename jsnext:main to jsnext:experimental:main temporarily (c7508e0)

2.5.1 (2017-07-25)

  • fix; use class transform in loose mode in babel to improve load performance in apps (fde719a)

2.2.0 (2017-07-17)

  • fix; rerelease, failed prepublish scripts (5fd82f8)

2.2.0 (2017-07-17)

  • feature; added ES module builds to dist and add jsnext:main to most ADG packages (ea76507)

2.1.2 (2017-06-15)

  • fix; avoid unwanted re-render of modal children when state/props change (7ae6324)

2.1.1 (2017-05-26)

  • fix; add prop-types as a dependency to avoid React 15.x warnings (92598eb)
  • fix; pin react-lorem-component version to avoid newly released broken version (6f3d9c6)

2.1.0 (2017-05-06)

  • feature; animated entry/exit of modal dialog (e721aaa)

2.0.0 (2017-05-05)

  • switch modal styling to styled-components (f9510b4)
  • breaking; Modal dialog now has a peerDependency on the styled-components package.
  • ISSUES CLOSED: AK-2290

1.3.3 (2017-05-03)

  • fix; Fix child position:fixed elements being clipped (fc0a894)

1.3.2 (2017-04-27)

  • fix; update legal copy to be more clear. Not all modules include ADG license. (f3a945e)

1.3.1 (2017-04-26)

  • fix; update legal copy and fix broken links for component README on npm. New contribution and (0b3e454)

1.3.0 (2017-04-20)

  • feature; removed explicit style! imports, set style-loader in webpack config (891fc3c)

1.2.15 (2017-03-31)

  • fix; update modal story to use latest navigation devDep (5ed9946)
  • fix; update modal story to use latest navigation devDep (c074080)

1.2.14 (2017-03-29)

  • fix; only show scrolling keylines when header or footer shown (fd1c68a)

1.2.13 (2017-03-29)

  • fix; fire onDialogDismissed when clicking on blanket directly below modal (1c9efb0)

1.2.10 (2017-03-21)

  • fix; render rounded corners correctly when header/footer omitted (724480d)
  • fix; maintainers for all the packages were added (261d00a)

1.2.9 (2017-02-28)

  • fix; dummy commit to release stories (3df5d9f)

1.2.7 (2017-02-28)

  • fix; dummy commit to fix broken stories and missing registry pages (a31e92a)

1.2.7 (2017-02-28)

  • fix; dummy commit to release stories for components (a105c02)

1.2.6 (2017-02-28)

  • fix; removes jsdoc annotations and moves content to usage.md (14f941a)

1.2.5 (2017-02-27)

  • empty commit to make components release themselves (5511fbe)

1.2.4 (2017-02-13)

  • Fix types for modal-dialog typescript declaration file (533adea)

1.2.3 (2017-02-08)

  • fix; trigger modal close handler on esc key in older browsers (a692683)

1.2.2 (2017-02-07)

  • fix; render dropdown in modal above footer (2b76812)

1.2.1 (2017-02-06)

  • fix; layer navigation at correct level so it works with modal (5bef9db)