A React component that displays content in a layer blocking the interaction with the page.
This component displays content in a layer that sits above the rest of the page content. Users won't be able to interact with the page until the dialog is closed.
stevenselcuk
yarn add @kalamazoo/modal-dialogDetailed docs and example usage can be found here.
[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:
[minor]1ed27f5f85:
Adds prop types for Header / Footer render props.
[patch]b39742b616:
fixed type for the actions props
[patch]f86839ca4e:
@kalamazoo/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]0d7d459f1a:
Fixes type errors which were incompatible with TS 3.6
[patch]f4ba40109f:
Refactors modal-dialog's styled component props
[patch]ecca4d1dbb:
Upgraded Typescript to 3.3.x
[patch]708028db86:
Change all the imports to theme in Core to use multi entry points
[patch]de35ce8c67:
Updates component maintainers
[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
[minor]eb7b748d59:
Modal-dialog padding now matches AGD and GUI pack
[patch]9f8ab1084b:
Consume analytics-next ts type definitions as an ambient declaration.
[patch]bbff8a7d87:
Fixes bug, missing version.json file
[patch]18dfac7332:
In this PR, we are:
[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]0342746c45:
Closing a dialog in IE11 specific event key
[patch]4615439434:
index.ts will now be ignored when publishing to npm
[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 `@kalamazoo/theme/colors`;Previously this was sort of possible for consumers by doing something like:
import colors from `@kalamazoo/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:
[patch]72bc8da:
[patch]b332c91:
[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
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)