A modal dialog displays content that requires user interaction, in a layer above the page.
yarn add @atlaskit/modal-dialog1b66beb10e972 -
Update dependencies.687094c7a76b3 -
Internal refactoring to reduce singleton exports.#117363
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
4660ec858a305 -
Update React from v16 to v18f4fe1a42a5809 -
Move the icon in a modal title (when present) out of the H1 tag1011dce3bcb2d -
[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.be58e4bb2e387 -
Migrating usages of UNSAFE types and entrypoints that have been renamed in @atlaskit/icon and
@atlaskit/icon-lab.cc302b83d5934 -
Fixes the top and bottom borders which indicate scrollability for modal content on React 18 by
rewriting internal hooks.3ab7d7da348ab -
Adds side-effect config to support Compiled css extraction in third-party apps1cb9d5ae0361d -
[ux] Reduce spacing between body header, body and footer content.3c4de48168ffe -
Update the import path of useId* from @atlaskit/ds-libde70c65e3e5ff -
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.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.b72c2c7f9a2fd -
Support to close all layers when clicking outside under feature flag6597900cdd5be -
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.b2c47a625a6bb -
Fixed bug where component could cause infinite re-render#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.3 as well as to have a consistent peer
dependency range for react and react-dom for /platform packages.
512798d699bd1 -
GA layering in modal-dialog to support multiple layerse5aebb55bcafc -
[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.c733254a2dd6e -
Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
is implicitly set to automatic.1e7e09d75d5c -
Support to close popup corrrectly when clicking iframe using layering under feature flag0601616da694 -
Internal changes to resolve an issue where global style overrides could break alignment between
the icon and title.acf6d58fc241 -
Add support for React 18 in non-strict mode.9e8e7fd1a601 -
[ux] Internal changes to typography, small visual change to modal title.35fd5ed8e1d7 -
Upgrading internal dependency bind-event-listener to @^3.0.0aa45bc0045bb -
[ux] This change introduces focusLockAllowlist prop. It allows to pass callback function to
specify nodes which focus lock should ignore.b037e5451037 -
Update new button text color fallback for default theme (non-token) to match that of old button
current text color291b54998410 -
Reset iframe to have auto pointer-events in modal under feature flagb9826ea49c47 -
Update dependencies that were impacted by HOT-106483 to latest.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.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.d100ca42f46 - Push
model consumption configuration done for these packages4061f5b29f8 - [ux]
shouldReturnFocus now can accept ref as a value to return focus to a specified element on modal
close.07aa588c8a4 - Reverts
the fix to text descender cut-off, due to incompatibilities with Firefox and Safari.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 deactivatedf355884a4aa - [ux]
Support to press escape key and only close the top layer6900f89eb0e - Internal
changes to use space tokens. There is no expected visual or behaviour change.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.56b444b56a8 - Fix a
bug where text descenders were cut off at high zoom levels on Windowsc2484be748e - [ux]
DSP-11269: hard coded the warning icon to improve color contrastc673c7246cf - Internal
change to improve how media queries are applied. There is no expected behaviour change.4ae083a7e66 - Use
@af/accessibility-testing for default jest-axe config and jest-axe import in accessibility
testing.abf69e9a4f6 - Removes
usage of deprecated theme mixins in favor of static token / color usage.26388cfdd23 - Adds
label prop for users of assistive technology to receive more context when using the modal.7e018144c35 - [ux] Add
aria-label to scrollable ModalBody to communicate to AT users why ModalBody is focused.fd5c7f6ca6a - Fixes an
issue where the focus moved inappropriately when closing a modal with multiple modals open.ba48a3a0fec - Remove
redundant language from default icon labels for ModalTitle.49b08bfdf5f - Migrated
use of gridSize to space tokens where possible. There is no expected visual or behaviour change.56507598609 - Skip
minor dependency bump63c2f0b3f96 - Internal
changes to use spacing tokens. There is no expected behaviour or visual change.18aeca8c199 - Internal
change to update token references. There is no expected behaviour or visual change.4ee60bafc6d -
ED-16603: Remove tooltips from VR tests and make them opt in. To opt-in, add allowedSideEffects
when loading the page.b0f6dd0bc35 - Updated
to use typography tokens. There is no expected behaviour or visual change.9de88fa1e1e - Internal
changes to include spacing tokens in component implementations.f3ffcf1a783 - Updates
@emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.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.454ec1bbf07 - Internal
code change turning on new linting rules.1c3948738f9 - Adjust
the styles for an internal positioning element to constrain the height for ModalBody and restore
support for custom scrolling regions"b72e12b97ac - [ux]
Fixed a regression which prevented clicks on the blanket from closing modal dialogs with
shouldScrollInViewport.8a5bdb3c844 -
Upgrading internal dependency (bind-event-listener) for improved internal typese4b612d1c48 - Internal
migration to bind-event-listener for safer DOM Event cleanup347fd703ce0 -
Internally shifting to using bind-event-listener for events added in effects07ab2748b62 - [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.0d1c80fe00d - [ux] The
width of the modal dialog now respect the custom value of the width prop.dcd92130cc4 - Migrate
deleted background accent tokens to replacements19d72473dfb - 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.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.3fced6aa641 - Bumped
react-focus-lock to version ^2.2.1.a8c55e479e8 - Removes
unused dependency on emotion-styledf460cc7c411 - Builds
for this package now pass through a tokens babel plugin, removing runtime invocations of the
tokens() function and improving bundle size.2b2290121eb - Raised
the minimum version carat range of focus ring to latest.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.#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.
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.
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>
The original children need to be wrapped in a ModalBody.
// Before
<Modal>
<Lorem count={2} />
</Modal>
// After
<Modal>
<ModalBody>
<Lorem count={2} />
</ModalBody>
</Modal>
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>
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.
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.
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>
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.
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}.
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>;
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.
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
ModalFooter now uses flex-end instead of space-between to justify its contents.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.1efbaebfbf3 - Fixes a
bug in the appearance of the modal focus state which is now consistent with other elements in the
Design System.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.6679c172f59 - Trap the
virtual cursor within the modal for screen reader0f7fd3e7c0d - FIX:
content focus and keylines only applied when the target DOM node exists95f500da676 - [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.d6f7ff383cf - Updates
to development dependency storybook-addon-performancee3a6469c8e5 - [ux]
FIX: fixes a bug introduced in 11.5.0 – now modal dialog is correctly positioned when relative
sizing is used as widthe1dc82f2825 - Fix
Modal header and footer tagsc9cca93180b - [ux]
Removes unnecessary dom nodes and refactors styles in modal dialog.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.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.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.0e0b2148d48 - Modal
dialog now attaches data-testid to its header and footer.a9dc147612a -
[litemode] Internal nested modal components have been re-written as hooks.910c7744256 - Internal
restructure of files and folders.624d33651cf - Fix
content remounts in version >= 11.1.379c23df6340 - Use
injected package name and version for analytics instead of version.json.d94d90714b - Modal will
retain full-width at viewports < 320px. This makes it consistent with < 480px beahviour.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.2ac834240e - Undo
analytics-next file restructure to allow external ts definitions to continue working9d5d1ab37f - Allow for
non tinted blanket backgroundc48024293c - Fixed an
issue when using scrollBehavior="outside" would cause Firefox to not allow scrolling of modal8598d0bd13 - 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.#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.
c1b8d0e897 - You can
now scroll using a touchscreen in the body of modal-dialog content954cc87b62 - The readme
and package information has been updated to point to the new design system website.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.#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';
#3826
5b5e7b6323 - The
previous hotfix (https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3781) didn't fix
the appearance override issue.
This change will be re-introduced in a future major version, please follow this ticket for updates https://product-fabric.atlassian.net/browse/DST-660.
#3781
9796654bab - The button
sequence correction has been reverted as it was causing unintended regressions for some use cases.
Affected versions include: @atlaskit/modal-dialog@11.0.1.
This change will be re-introduced in a future major version, please follow this ticket for updates https://product-fabric.atlassian.net/browse/DST-660.
95261cf7b0 - Fixed
modal dialog focus issue3414523d6f - Rearange
buttons order to align with design guidelines30f8909177 - fixed the
layering between header, content, and footerdb053b24d8 - Update all
the theme imports to be tree-shakable87f4720f27 - Officially
dropping IE11 support, from this version onwards there are no warranties of the package working in
IE11. For more information see:
https://community.developer.atlassian.com/t/atlaskit-to-drop-support-for-internet-explorer-11-from-1st-july-2020/395345be257c6f6 - 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 contentfddc283495 - Added
aria-labelledby to dialog and point it to the real headingb2b0b94079 - Reverts
breaking test id change.54a9514fcf - Build and
supporting files will no longer be published to npm98e93d93ec -
ActionProps.text now accepts React.ReactNode instead of just string16ccd817d8 - Export
types53d09bdb5d - Reverts
scrolling fix which introduced a layering regression.[patch]9a534d6a74:
Change imports to comply with Atlassian conventions- Updated dependencies 6b8e60827e:
Updated dependencies 449ef134b3:
Updated dependencies 167a55fd7a:
Updated dependencies 3a09573b4e:
Updated dependencies 57c0487a02:
Updated dependencies 68ff159118:
Updated dependencies 6efb12e06d:
Updated dependencies 6d744d3ff1:
Updated dependencies 0059d26429:
Updated dependencies fd41d77c29:
[patch]f5b654c328:
Added a new ScrollBehavior value inside-wide to support showing modals on pages with body
wider than viewport width.-
[patch]89bf723567:
FIX: scrollBehavior: outside Firefox scroll issue- Updated dependencies
603413f530:
Updated dependencies 168b5f90e5:
Updated dependencies 0c270847cb:
Updated dependencies 109004a98e:
Updated dependencies b9903e773a:
[patch]4d3749c9e6:
Upgraded react-scrolllock package- Updated dependencies 294c05bcdf:
Updated dependencies dae900bf82:
Updated dependencies 8c9e4f1ec6:
[patch]6548261c9a:
Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies 6548261c9a:
[minor]24865cfaff:
Allowing support for using with new react-beautiful-dnd 12.x API
[patch]24865cfaff:
Form has been converted to Typescript. TypeScript consumers will now get static type safety. Flow types are no longer provided. No API changes.- Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
[patch]f86839ca4e:
@atlaskit/portal had an issue in IE11 and this is fixed in 3.1.2
[patch]35d2229b2a:
Adding missing license to packages and update to Copyright 2019 Atlassian Pty Ltd.
[patch]a2d0043716:
Updated version of analytics-next to fix potential incompatibilities with TS 3.6
[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.
[minor]c6efb2f5b6:
Prefix the legacy lifecycle methods with UNSAFE_* to avoid warning in React 16.9+
More information about the deprecation of lifecycles methods can be found here: https://reactjs.org/blog/2018/03/29/react-v-16-3.html#component-lifecycle-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
[patch]708028db86:
Change all the imports to theme in Core to use multi entry points
[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 withAnalyticsEventsAnalyticsContextWrappedComp alias has been removed, please use withAnalyticsContextBreaking 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.WithAnalyticsEventProps has been renamed to WithAnalyticsEventsProps to match source
codeCreateUIAnalyticsEventSignature has been renamed to CreateUIAnalyticsEvent to match
source codeUIAnalyticsEventHandlerSignature has been renamed to UIAnalyticsEventHandler to match
source codeAnalyticsEventsPayload has been renamed to AnalyticsEventPayloadObjectType has been removed, please use Record<string, any> or [key: string]: anyUIAnalyticsEventInterface has been removed, please use UIAnalyticsEventAnalyticsEventInterface has been removed, please use AnalyticsEventCreateAndFireEventFunction removed and should now be inferred by TypeScriptAnalyticsEventUpdater removed and should now be inferred by TypeScript[patch]688f2957ca:
Fixes various TypeScript errors which were previously failing silently
[patch]9f8ab1084b:
Consume analytics-next ts type definitions as an ambient declaration.
[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);
[patch]02f1f73671:
heading prop type changed from string to React.ReactNode. This provides more flexibility for
consumers to provide i18n components like FormattedMessage.
[patch]b0ef06c685:
[major]06c5cccf9d:
[patch]c3ab82ed42:
Updated dependencies dacfb81ca1:
[major]7c17b35107:
[patch]cc8378fcd4:
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
[patch]0f764dbd7c:
[major]76299208e6:
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.
[minor]f26a3d0235:
[patch]06713e0a0c:
[patch]a7670c1488:
Updated dependencies 27cacd44ab:
[minor]07c4cd1:
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 footerheader, body and footer props have been deprecated; such custom components should be
passed within the components prop instead.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.[patch]2686f21:
[minor]7f99dec:
[patch]abd3a39:
[patch]e151c1a:
As of component versions:
No component requires `LayerManager` to layer correctly.
You can safely remove this dependency and stop rendering `LayerManager` in your apps.
[patch]1fb2c2a:
[patch]a637f5e:
[patch]7cbd729:
[minor] Deprecates the ability to pass a function to the autoFocus prop. Changes implementation of FocusLock to use react-focus-lock. 5b1ab0b
[none] Updated dependencies 5b1ab0b
[none] Updated dependencies de9690b
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)