@atlaskit/modal-dialog
Version:
A modal dialog displays content that requires user interaction, in a layer above the page.
1,644 lines (1,042 loc) • 126 kB
Markdown
# @atlaskit/modal-dialog
## 14.3.4
### Patch Changes
- Updated dependencies
## 14.3.3
### Patch Changes
- [#193214](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/193214)
[`c661806a65543`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/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
- [#188952](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/188952)
[`1a88e6e2601ae`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1a88e6e2601ae) -
Migrated usage of renamed/deprecated icons
- Updated dependencies
## 14.3.0
### Minor Changes
- [#173162](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/173162)
[`a3b23b79f4d68`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a3b23b79f4d68) -
Adds a new `FullScreenModalDialog` component which is exposed behind the `/full-screen`
entrypoint.
### Patch Changes
- Updated dependencies
## 14.2.12
### Patch Changes
- [#186153](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/186153)
[`4389a7b035d36`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/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](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/182316)
[`3e3e11916be69`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/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
- [#164146](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/164146)
[`cb9fe0058ed87`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cb9fe0058ed87) -
Updates package.json direct dependencies to align with actual usage.
## 14.2.3
### Patch Changes
- [#160530](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/160530)
[`3d97095c489a5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3d97095c489a5) -
Internal change to align styling solutions.
- Updated dependencies
## 14.2.2
### Patch Changes
- [#155802](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/155802)
[`08019848e3eab`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/08019848e3eab) -
Refreshed "issue" terminology.
- Updated dependencies
## 14.2.1
### Patch Changes
- [#155827](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/155827)
[`f6f4f5a8a8ae8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f6f4f5a8a8ae8) -
Cleans up the `platform_design_system_motion_on_finish_fix` feature gate.
- Updated dependencies
## 14.2.0
### Minor Changes
- [#154745](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/154745)
[`7618d9837e247`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/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](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/138405)
[`7e6b125029348`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/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
- [#136563](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/136563)
[`ce6e88fc62ca9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ce6e88fc62ca9) -
Update dependencies
## 14.1.1
### Patch Changes
- Updated dependencies
## 14.1.0
### Minor Changes
- [#134997](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/134997)
[`1c7642dd77422`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/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](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/133231)
[`82b4213bf8e20`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/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](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/126072)
[`bb86d48c26f65`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/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](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/128593)
[`19d6172ffdfe9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/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](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953).
### Patch Changes
- Updated dependencies
## 13.4.0
### Minor Changes
- [#129320](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/129320)
[`1993bb92c16b6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1993bb92c16b6) -
[ux] Add legacy AUI modal to focus lock allowlist by default
## 13.3.0
### Minor Changes
- [#129312](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/129312)
[`26ac9f1e06b2e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/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](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/127054)
[`fb709895d8d5c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/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
- [#127022](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/127022)
[`6e22b57d6bf75`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6e22b57d6bf75) -
Update dependencies and remove old codemods.
- Updated dependencies
## 13.1.0
### Minor Changes
- [#126435](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/126435)
[`2d2f8bd9b056b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/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
- [#116010](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/116010)
[`1b66beb10e972`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1b66beb10e972) -
Update dependencies.
- [#118470](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/118470)
[`687094c7a76b3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/687094c7a76b3) -
Internal refactoring to reduce singleton exports.
## 13.0.1
### Patch Changes
- Updated dependencies
## 13.0.0
### Major Changes
- [#117363](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/117363)
[`10a0f7f6c2027`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/10a0f7f6c2027) -
This package's `peerDependencies` have been adjusted for `react` and/or `react-dom` to reflect the
status of only supporting React 18 going forward. No explicit breaking change to React support has
been made in this release, but this is to signify going forward, breaking changes for React 16 or
React 17 may come via non-major semver releases.
Please refer this community post for more details:
https://community.developer.atlassian.com/t/rfc-78-dropping-support-for-react-16-and-rendering-in-a-react-18-concurrent-root-in-jira-and-confluence/87026
### Patch Changes
- Updated dependencies
## 12.20.8
### Patch Changes
- [#116009](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/116009)
[`b6feda4124cd2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b6feda4124cd2) -
Remove code path for now obsolete chrome plugin.
## 12.20.7
### Patch Changes
- Updated dependencies
## 12.20.6
### Patch Changes
- Updated dependencies
## 12.20.5
### Patch Changes
- [#113871](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113871)
[`13ca102123e88`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/13ca102123e88) -
Update dependencies.
## 12.20.4
### Patch Changes
- [#113859](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113859)
[`c14cf08cfe2e9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c14cf08cfe2e9) -
Remove old codemods.
## 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
- [#109060](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/109060)
[`4660ec858a305`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4660ec858a305) -
Update `React` from v16 to v18
### Patch Changes
- Updated dependencies
## 12.19.3
### Patch Changes
- [#107054](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/107054)
[`046508790857d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/046508790857d) -
Add appearance to modal title for better AT support
## 12.19.2
### Patch Changes
- [#103999](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103999)
[`9f62ecec4d422`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9f62ecec4d422) -
Update dependencies.
## 12.19.1
### Patch Changes
- Updated dependencies
## 12.19.0
### Minor Changes
- [#100038](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100038)
[`f4fe1a42a5809`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f4fe1a42a5809) -
Move the icon in a modal title (when present) out of the H1 tag
## 12.18.5
### Patch Changes
- Updated dependencies
## 12.18.4
### Patch Changes
- [#175556](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/175556)
[`1011dce3bcb2d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/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
- [#178053](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/178053)
[`cb318c8c28c26`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cb318c8c28c26) -
Internal changes to typography.
## 12.18.2
### Patch Changes
- Updated dependencies
## 12.18.1
### Patch Changes
- [#171994](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/171994)
[`be58e4bb2e387`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/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](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/170669)
[`cc302b83d5934`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/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
- [#167181](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/167181)
[`5bc9dc0796474`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5bc9dc0796474) -
Remove `react-focus-lock-next` dependency
## 12.17.12
### Patch Changes
- [#166087](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/166087)
[`3ab7d7da348ab`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/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
- [#161638](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/161638)
[`d2e5e5ce0053d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d2e5e5ce0053d) -
Use new API of layering without UNSAFE prefix
## 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
- [#146685](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/146685)
[`1cb9d5ae0361d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1cb9d5ae0361d) -
[ux] Reduce spacing between body header, body and footer content.
## 12.17.4
### Patch Changes
- Updated dependencies
## 12.17.3
### Patch Changes
- [#148281](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/148281)
[`3c4de48168ffe`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/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](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/144047)
[`de70c65e3e5ff`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/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](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/141279)
[`a38f3af4bfc79`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/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
- [#140090](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/140090)
[`2f4fd6db3e451`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2f4fd6db3e451) -
Removes unused devDep react-beautiful-dnd
## 12.15.6
### Patch Changes
- [#138585](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/138585)
[`b72c2c7f9a2fd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b72c2c7f9a2fd) -
Support to close all layers when clicking outside under feature flag
## 12.15.5
### Patch Changes
- [#137443](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137443)
[`467a08d727c07`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/467a08d727c07) -
Updated dependencies
## 12.15.4
### Patch Changes
- [#136611](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/136611)
[`9755fb019113f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9755fb019113f) -
Clean up emotion Globals usage
## 12.15.3
### Patch Changes
- [#134135](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/134135)
[`6597900cdd5be`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/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
- [#130061](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/130061)
[`b2c47a625a6bb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b2c47a625a6bb) -
Fixed bug where component could cause infinite re-render
## 12.15.1
### Patch Changes
- Updated dependencies
## 12.15.0
### Minor Changes
- [#127511](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/127511)
[`db30e29344013`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/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.3` as well as to have a consistent peer
dependency range for `react` and `react-dom` for `/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
- [#123484](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/123484)
[`e241c04ab92d5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e241c04ab92d5) -
Remove abandoned feature flag usage
## 12.14.7
### Patch Changes
- [#122722](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/122722)
[`512798d699bd1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/512798d699bd1) -
GA layering in modal-dialog to support multiple layers
## 12.14.6
### Patch Changes
- [#122769](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/122769)
[`e5aebb55bcafc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/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
- [#114764](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/114764)
[`ae20dac6e31c4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ae20dac6e31c4) -
Bump packages to use react-beautiful-dnd@12.2.0
## 12.14.1
### Patch Changes
- Updated dependencies
## 12.14.0
### Minor Changes
- [#110670](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110670)
[`c733254a2dd6e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/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](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/99952)
[`1e7e09d75d5c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1e7e09d75d5c) -
Support to close popup corrrectly when clicking iframe using layering under feature flag
- Updated dependencies
## 12.13.3
### Patch Changes
- [#100067](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100067)
[`0601616da694`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/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
- [#93686](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/93686)
[`acf6d58fc241`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/acf6d58fc241) -
Add support for React 18 in non-strict mode.
### Patch Changes
- Updated dependencies
## 12.12.0
### Minor Changes
- [#89943](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/89943)
[`9e8e7fd1a601`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9e8e7fd1a601) -
[ux] Internal changes to typography, small visual change to modal title.
## 12.11.1
### Patch Changes
- [#94316](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94316)
[`35fd5ed8e1d7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/35fd5ed8e1d7) -
Upgrading internal dependency `bind-event-listener` to `@^3.0.0`
## 12.11.0
### Minor Changes
- [#82087](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/82087)
[`aa45bc0045bb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/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
- [#83116](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83116)
[`8d4e99057fe0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8d4e99057fe0) -
Upgrade Typescript from `4.9.5` to `5.4.2`
## 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](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/72130)
[`b037e5451037`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/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](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/68278)
[`291b54998410`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/291b54998410) -
Reset iframe to have auto pointer-events in modal under feature flag
## 12.10.3
### Patch Changes
- [#60920](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/60920)
[`a77a99360fa2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a77a99360fa2) -
Revert previous modal gutter change.
## 12.10.2
### Patch Changes
- [#60029](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/60029)
[`b9826ea49c47`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b9826ea49c47) -
Update dependencies that were impacted by HOT-106483 to latest.
## 12.10.1
### Patch Changes
- [#58698](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58698)
[`222c15fb9a38`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/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](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/57627)
[`bef9748d9db2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/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
- [#43918](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43918)
[`d100ca42f46`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d100ca42f46) - Push
model consumption configuration done for these packages
## 12.9.0
### Minor Changes
- [#43674](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43674)
[`4061f5b29f8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/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
- [#41628](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41628)
[`b05664f7aba`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b05664f7aba) - Use
feature flag to toggle if we enable UNSAFE_LAYERING
## 12.8.2
### Patch Changes
- [#40650](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40650)
[`07aa588c8a4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/07aa588c8a4) - Reverts
the fix to text descender cut-off, due to incompatibilities with Firefox and Safari.
## 12.8.1
### Patch Changes
- [#40647](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40647)
[`0de92f17021`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0de92f17021) - Bump
react-focus-lock to latest version
## 12.8.0
### Minor Changes
- [#39425](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/39425)
[`f0df9a3b6e7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/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
- [#39749](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/39749)
[`e6b69f455c3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e6b69f455c3) - Connect
yarn changeset to packages, upgrade adf-schema
## 12.7.0
### Minor Changes
- [#39726](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/39726)
[`f355884a4aa`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f355884a4aa) - [ux]
Support to press escape key and only close the top layer
### Patch Changes
- Updated dependencies
## 12.6.10
### Patch Changes
- [#39787](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/39787)
[`6900f89eb0e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6900f89eb0e) - Internal
changes to use space tokens. There is no expected visual or behaviour change.
## 12.6.9
### Patch Changes
- [#38948](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38948)
[`c8d28bd7519`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c8d28bd7519) - Adds
role of region to modal dialog body when scrollable
## 12.6.8
### Patch Changes
- [#37789](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/37789)
[`d6f63fa1abc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/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
- [#39169](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/39169)
[`d2b6377be3d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d2b6377be3d) - Add some
basic JSDoc for internal components, add tokens.
## 12.6.6
### Patch Changes
- [#38209](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38209)
[`56b444b56a8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56b444b56a8) - Fix a
bug where text descenders were cut off at high zoom levels on Windows
## 12.6.5
### Patch Changes
- [#36744](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/36744)
[`c2484be748e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c2484be748e) - [ux]
DSP-11269: hard coded the warning icon to improve color contrast
## 12.6.4
### Patch Changes
- [#37066](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/37066)
[`c673c7246cf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c673c7246cf) - Internal
change to improve how media queries are applied. There is no expected behaviour change.
## 12.6.3
### Patch Changes
- [#36754](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/36754)
[`4ae083a7e66`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ae083a7e66) - Use
`@af/accessibility-testing` for default jest-axe config and jest-axe import in accessibility
testing.
## 12.6.2
### Patch Changes
- [#34811](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/34811)
[`abf69e9a4f6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/abf69e9a4f6) - Removes
usage of deprecated theme mixins in favor of static token / color usage.
## 12.6.1
### Patch Changes
- [#35074](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/35074)
[`b6b02e57520`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b6b02e57520) - Restore
support for foreground modal
## 12.6.0
### Minor Changes
- [#34353](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/34353)
[`26388cfdd23`](https://bitbucket.org/atlassian/atlassian-frontend/commits/26388cfdd23) - Adds
`label` prop for users of assistive technology to receive more context when using the modal.
## 12.5.7
### Patch Changes
- [#34427](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/34427)
[`7e018144c35`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7e018144c35) - [ux] Add
aria-label to scrollable ModalBody to communicate to AT users why ModalBody is focused.
## 12.5.6
### Patch Changes
- [#34297](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/34297)
[`fd5c7f6ca6a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fd5c7f6ca6a) - Fixes an
issue where the focus moved inappropriately when closing a modal with multiple modals open.
## 12.5.5
### Patch Changes
- [#34160](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/34160)
[`ba48a3a0fec`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ba48a3a0fec) - Remove
redundant language from default icon labels for ModalTitle.
## 12.5.4
### Patch Changes
- [#34170](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/34170)
[`e3eff9117fe`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e3eff9117fe) - Update
examples to use CTAs with sufficient contrast.
## 12.5.3
### Patch Changes
- [#34051](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/34051)
[`49b08bfdf5f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/49b08bfdf5f) - Migrated
use of `gridSize` to space tokens where possible. There is no expected visual or behaviour change.
## 12.5.2
### Patch Changes
- [#33793](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33793)
[`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure
legacy types are published for TS 4.5-4.8
## 12.5.1
### Patch Changes
- [#33649](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33649)
[`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade
Typescript from `4.5.5` to `4.9.5`
## 12.5.0
### Minor Changes
- [#33258](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33258)
[`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip
minor dependency bump
### Patch Changes
- Updated dependencies
## 12.4.13
### Patch Changes
- [#32734](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/32734)
[`7f53352e047`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7f53352e047) - Updates
the `@types/react-beautiful-dnd` devDependency
## 12.4.12
### Patch Changes
- [#32211](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/32211)
[`4ba10567310`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ba10567310) - Internal
changes.
## 12.4.11
### Patch Changes
- [#30125](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/30125)
[`7f5f23dcb68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7f5f23dcb68) -
Introduce shape tokens to some packages.
## 12.4.10
### Patch Changes
- Updated dependencies
## 12.4.9
### Patch Changes
- [#29725](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/29725)
[`63c2f0b3f96`](https://bitbucket.org/atlassian/atlassian-frontend/commits/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](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/29390)
[`18aeca8c199`](https://bitbucket.org/atlassian/atlassian-frontend/commits/18aeca8c199) - Internal
change to update token references. There is no expected behaviour or visual change.
## 12.4.6
### Patch Changes
- [#29227](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/29227)
[`4ee60bafc6d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/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](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/28064)
[`b0f6dd0bc35`](https://bitbucket.org/atlassian/atlassian-frontend/commits/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](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/26408)
[`9de88fa1e1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9de88fa1e1e) - Internal
changes to include spacing tokens in component implementations.
## 12.4.0
### Minor Changes
- [#24710](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24710)
[`f3ffcf1a783`](https://bitbucket.org/atlassian/atlassian-frontend/commits/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
- [#24874](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24874)
[`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade
Typescript from `4.3.5` to `4.5.5`
## 12.3.0
### Minor Changes
- [#24004](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24004)
[`c44f3f5f973`](https://bitbucket.org/atlassian/atlassian-frontend/commits/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
- [#24492](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24492)
[`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade
Typescript from `4.2.4` to `4.3.5`.
## 12.2.14
### Patch Changes
- [#23381](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/23381)
[`454ec1bbf07`](https://bitbucket.org/atlassian/atlassian-frontend/commits/454ec1bbf07) - Internal
code change turning on new linting rules.
- Updated dependencies
## 12.2.13
### Patch Changes
- [#22775](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/22775)
[`1c3948738f9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/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](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/22758)
[`b72e12b97ac`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b72e12b97ac) - [ux]
Fixed a regression which prevented clicks on the blanket from closing modal dialogs with
`shouldScrollInViewport`.
## 12.2.11
### Patch Changes
- [#22614](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/22614)
[`8a5bdb3c844`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8a5bdb3c844) -
Upgrading internal dependency (bind-event-listener) for improved internal types
## 12.2.10
### Patch Changes
- [#22029](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/22029)
[`e4b612d1c48`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e4b612d1c48) - Internal
migration to bind-event-listener for safer DOM Event cleanup
- [`347fd703ce0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/347fd703ce0) -
Internally shifting to using bind-event-listener for events added in effects
- [`07ab2748b62`](https://bitbucket.org/atlassian/atlassian-frontend/commits/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](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/20721)
[`0d1c80fe00d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0d1c80fe00d) - [ux] The
width of the modal dialog now respect the custom value of the `width` prop.
## 12.2.7
### Patch Changes
- [#20650](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/20650)
[`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade
to TypeScript 4.2.4
## 12.2.6
### Patch Changes
- Updated dependencies
## 12.2.5
### Patch Changes
- [#19618](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/19618)
[`dcd92130cc4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/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](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/16752)
[`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/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`](https://bitbucket.org/atlassian/atlassian-frontend/commits/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`](https://bitbucket.org/atlassian/atlassian-frontend/commits/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](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/15998)
[`2d60dd3116d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/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`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3fced6aa641) - Bumped
`react-focus-lock` to version `^2.2.1`.
- [`a8c55e479e8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a8c55e479e8) - Removes
unused dependency on emotion-styled
- [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/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](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/16335)
[`2b2290121eb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2b2290121eb) - Raised
the minimum version carat range of focus ring to latest.
## 12.1.0
### Minor Changes
- [#14777](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/14777)
[`993eb469fcb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/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](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/13864)
[`07ad26948a1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/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**
```bash
yarn upgrade @atlaskit/modal-dialog@^12.0.0
```
Once upgraded, use `@atlaskit/codemod-cli`:
```bash
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](https://hello.atlassian.net/wiki/spaces/AF/pages/2627171992/Codemods) 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](https://atlassian.design/components/modal-dialog/usage).
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 a