Inline dialog
An inline dialog is a pop-up container for small amounts of information. It can also contain controls.
Installation
yarn add @atlaskit/inline-dialogUsage
Detailed docs and example usage can be found here.
An inline dialog is a pop-up container for small amounts of information. It can also contain controls.
An inline dialog is a pop-up container for small amounts of information. It can also contain controls.
yarn add @atlaskit/inline-dialogDetailed docs and example usage can be found here.
67dd9df06af0f -
Replace instances of the a tag with Link where applicable.39e543109ec09 -
add type info to forwardRef components248faa32d4835 -
Internal changes to how borders are applied.d636af20c6304 -
This replaces react-node-resolver which uses findDOMNode under the hood with a direct ref
functionality to pass the first child of an Inline Dialog around for internal use.
There is some risk to this as while we tested this internally via a feature gate with no issues,
this could be breaking in the instance where the children you pass to <InlineDialog /> is either
inconsistent, or the first element is not the target we expected.
255837cfba315 -
Internal changes to how border radius is applied.31c57f650ba07 -
Improving tests for server side rendering and hydrationcb9fe0058ed87 -
Updates package.json direct dependencies to align with actual usage.a149a0b1559ec -
We are testing the migration to the ADS Link component behind a feature flag. If this fix is
successful it will be available in a later release.ae720e711e4d2 -
Adds fallbackPlacements prop for specifying a list of backup placements to try when the main
placement does not have enough space. This matches the API of Popup.b2d69a39e6687 -
Update @compiled/react dependency for improved type checking support.#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
b50c5d5d65ae2 -
Bump to the latest version of @compiled/react4660ec858a305 -
Update React from v16 to v1898426d09239b8 -
Update dev depedencies.9f62ecec4d422 -
Update dependencies.#174572
a6642c2335879 -
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/inline-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 understand how to handle
.css imports.
For more information on the migration, please refer to RFC-73 Migrating our components to Compiled CSS-in-JS.
b27dba8a5f3cd -
Update types to improve compatibility with React 18.962b5e77810fb -
Adds side-effect config to support Compiled css extraction in third-party appsd2e5e5ce0053d -
Use new API of layering without UNSAFE prefix3d03c4f1002ab -
Integrate layering and use CloseManager insteadf331091d24ea4 -
Bug fix for portal logic update behind ff platform_design_system_team_portal_logic_r18_fix1946e3bf8c6c9 -
Internal change only: update feature flag names.530c505c5abab -
Refactors analytics next API to remove usages of legacy react context.#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.
77504ff274f72 -
DSP-19576: Assign names to anonymous default exportsf8fef52dc49ff -
Correct the usage of handling escape onClose request8fb8ca26fb173 -
Integrate layering in inline dialogc733254a2dd6e -
Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
is implicitly set to automatic.45033e519694 -
Add layering support to fix escape keyboard issue in modalsaf5ae74f2af1 -
Add support for React 18 in non-strict mode.35fd5ed8e1d7 -
Upgrading internal dependency bind-event-listener to @^3.0.08d4e99057fe0 -
Upgrade Typescript from 4.9.5 to 5.4.2395c74147990 -
Migrate packages to use declarative entry pointsb9826ea49c47 -
Update dependencies that were impacted by HOT-106483 to latest.ec7c2a38247 - Removed
all remaining legacy theming logic from the Calendar, Form, InlineDialog, InlineEdit and
InlineMessage components.7a88114cef7 - added
type dependency for @types/react-node-resolvera4eca15aedd - Enrol
@atlaskit/inline-dialog into jira-frontend push model consumptionfd6bb9c9184 - Delete
version.json599bfe90ee3 - Internal
change to use shape tokens. There is no expected visual change.e7ea6832ad2 - Bans the
use of React.FC/React.FunctionComponent type in ADS components as part of the React 18 migration
work. The change is internal only and should not introduce any changes for the component
consumers.49b08bfdf5f - Migrated
use of gridSize to space tokens where possible. There is no expected visual or behaviour change.9d00501a414 - Ensure
legacy types are published for TS 4.5-4.841fae2c6f68 - Upgrade
Typescript from 4.5.5 to 4.9.556507598609 - Skip
minor dependency bumpc0dd48dfb67 - [ux]
Adds keyboard support of using escape to close inline dialog.261420360ec - Upgrades
component types to support React 18.18aeca8c199 - Internal
change to update token references. There is no expected behaviour or visual change.9de88fa1e1e - Internal
changes to include spacing tokens in component implementations.8cc2f888c83 - Upgrade
Typescript from 4.3.5 to 4.5.58d2ea17980d - Updates
@emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.8d4228767b0 - Upgrade
Typescript from 4.2.4 to 4.3.5.8a5bdb3c844 -
Upgrading internal dependency (bind-event-listener) for improved internal types2e7bbdfd813 -
Upgrading internal dependency 'bind-event-listener' to 2.1.0 for improved typescb2392f6d33 - Upgrade
to TypeScript 4.2.42a53f51adc6 -
Introduce the prop strategy to allow consumers to override the default positioning strategy19d72473dfb - Updates
usage of deprecated token names so they're aligned with the latest naming conventions. No UI or
visual changes2fe0d03807f - This
removes the preventDefault functionality (reverts it back to the previous version of inline dialog
where event listeners were added in the capture phase). It also refactors handleClickOutside so
that it is now triggered by a ref.f460cc7c411 - Builds
for this package now pass through a tokens babel plugin, removing runtime invocations of the
tokens() function and improving bundle size.34282240102 - Adds
explicit type to button usages components.cb79dfea5d9 - This
fixes a bug in version 13.1.2 where inline dialog's useEffect was running synchronously and
while the click event was still happening. This meant that if the open state was outside of inline
dialog, there were instances where it failed to open.b94375ecf08 - Fixes
issue where enzyme is unable to access component name in snapshot tests. There should be no UI or
UX change.0e89e593547 - Fixes a
bug where the dialog was retaining its window click event listener even after the dialog was
closed.398904f14d9 - [ux]
Fixes a bug in version 13.1.0 where InlineDialog cannot be closed after it opens a Modal. There
should be no other UI or UX changes. Note that the click event listener's capture: false has
been changed to capture: true. This may cause some issues with the opening or closing of the
inline dialog in some situations e.g. if the open state of the inline dialog is in an outer
component. You can solve this by trying to add a preventDefault to the click handler in the
outer component or changing the inline dialog's event handler to { capture: true }.5a049f800d3 -
Integrates the new tokens package to add support for our new theming solution. This change is
fully backwards compatible with our existing theming solutioncaec2cee6e0 - Removes
styled-components dependency from the package. Also uses ThemeV2 API now. There should be no
visual or UX change.378d1cef00f - Bump
@atlaskit/theme to version ^11.3.0.79c23df6340 - Use
injected package name and version for analytics instead of version.json.d3265f19be - Transpile
packages using babel rather than tsc5f58283e1f - 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.6360c46009 - Reenable
integration tests for Edge browser#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.
76165ad82f - Bump
required because of conflicts on wadmal release954cc87b62 - The readme
and package information has been updated to point to the new design system website.db053b24d8 - 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/3953454a9514fcf - Build and
supporting files will no longer be published to npm[patch]3a09573b4e:
Change imports to comply with Atlassian conventions- Updated dependencies cf8577f5d6:
Updated dependencies 6b8e60827e:
[patch]6548261c9a:
Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies 6548261c9a:
[patch]4a223473c5:
Removes babel/runtime from dependencies. Users should see a smaller bundlesize as a result- Updated dependencies 28f8f0e089:
Updated dependencies 82747f2922:
[patch]24865cfaff:
Updates react-popper dependency to a safe version.- Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
[patch]a568ade043:
Inline-dialog now correctly removes handlers when closed
[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]91b7a1415b:
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.
[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]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
[patch]f34776be97:
Type definition files are now referenced in package.json
[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]93bcf314c6:
Added missing tslib dep
[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.
[major] Inline-dialog now uses @atlaskit/popper, and as such some props are no longer required. The "position" prop now matches the "placements" from react-popper to avoid confusion. 1d9e75a
[none] Updated dependencies 1d9e75a