A drawer is a panel that slides in from the left side of the screen.
yarn add @atlaskit/drawer#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/react5033cb80b3765 -
Updates internal animation logic to leverage static animation timing names, rather than arbitrary
values.4660ec858a305 -
Update React from v16 to v18fb9f1f1a65547 -
Change how the current surface CSS variable is set to support Compiled.#100414
ead90a795d15b -
Adds the @atlaskit/drawer/compiled entry point. This entry point is a fork of the Drawer
component which uses @compiled/react instead of @emotion/react. It also features a new
compositional API. The overrides prop is not included in this API, instead safe style overrides
are now supported via the xcss prop.
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/drawer, 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.
Example of new compositional API:
import {
Drawer,
DrawerCloseButton,
DrawerContent,
DrawerSidebar,
} from '@atlaskit/drawer/compiled';
<Drawer>
<DrawerSidebar xcss={styles.sidebar}>
<DrawerCloseButton />
</DrawerSidebar>
<DrawerContent xcss={styles.content}>Drawer content</DrawerContent>
</Drawer>
57f451bda8919 -
Adds side-effect config to support Compiled css extraction in third-party appsfee9fd211df7b -
Remove deprecated prop shouldUnmountOnExit which was deprecated in version 7.1.9. This prop can
be safely removed from your code as it has been non-functional for several years.89833597971da -
Refactor of analytics handling to remove usages of legacy AnalyticsContext. Removed
WithAnalyticsEventsProps from type.787e6d015c8cd -
Internal change only: Convert from class components to function components.#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.
0086bc04e40ec -
Add support of layering in drawer to have a correct escape close flow for multiple layered
components223959ef57c80 -
Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
is implicitly set to automatic.b8b3389bb20b -
[ux] Make Drawer scrollable by keyboard when content overflows.919672b42f27 -
Update close button to use IconButton from @atlaskit/button/new. Some minor visual changes are
expected.d92a918edd9b -
shouldReturnFocus now can accept ref as a value to return focus to a specified element on drawer
close.35fd5ed8e1d7 -
Upgrading internal dependency bind-event-listener to @^3.0.058416dfd477d -
Add closeLabel prop to provide a custom label for the drawer's "Close" control.e96b5be2269 - [ux]
This release removes the feature flag behind which Drawer got improves for accessibility. Now it
is a modal dialog, preventing users to focus elements beyond it's content. Focus is set to first
element of Drawer content on opening. On closing focus is returned to triggering element.
Additionally introduced props adding/referencing accessible name.288b53175c0 - [ux] We
are testing focus trap behavior for drawer in screen reader mode behind a feature flag. Now focus
is set to first element and does not go beyond the content of the modal dialog. If this fix is
successful, it will be available in a later release.ddb06fae577 - Adds
support for surface detection when using design tokens. Enabling children to be styled with the
surface color of the drawer when using the utility.elevation.surface.current design token.779727e307a - Internal
change only. Replace all instances of Box with stable @atlaskit/primitives version.56507598609 - Skip
minor dependency bump261420360ec - Upgrades
component types to support React 18.74c1b81a476 - Replaces
use of gridSize with space tokens. There is no expected 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.021eea6cdc6 - Remove
unnecessary styles. There is no expected behaviour change for consumers.5bd499c254f - Fix
zIndex stacking of internal Blanket component during css transition3d5675d420e - [ux]
Prevents the background from being scrollable while a drawer is open.bc989043572 - Internal
changes to apply spacing tokens. This should be a no-op change.9de88fa1e1e - Internal
changes to include spacing tokens in component implementations.b975291711b - Add
zindex as prop to drawera0653d05aa0 - Add
testId prop to internal blanket component, passthrough testId from Drawer to Blanket for
testing purposes. No behaviour change.cc4fe7bdf0c - Updates
@emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.11da403db81 - Internal
change to add optional testId prop pass-through to blanket component. There should be no change
in behaviour.ac9343c3ed4 - Replaces
usage of deprecated design tokens. No visual or functional changese9210b8a098 - Updates
Drawer with deprecated status for cssFn/`overrides APIs.19d72473dfb - Bump
dependency tiny-invariant to latest"#16753
d19fa028010 -
Instrumented @atlaskit/drawer with the new theming package, @atlaskit/tokens.
New 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.
#14319
cf853e39278 - [ux]
Breaking changes:
The following components have been removed from @atlaskit/drawer:
DrawerItemThemeDrawerSkeletonHeaderDrawerSkeletonItemDrawerItemGroupDrawerItemThese components wrap the much older, now deprecated package @atlaskit/item and had little to no
usage. If you really need the functionality captured by these components; we'd encourage you to
try @atlaskit/menu which matches and extends all of the functionality of @atlaskit/item in a
more accessible and performant way.
Housekeeping:
testId property as a hook for automated testing.styled-components for stylingchromatism@atlaskit/item@atlaskit/avatar79c23df6340 - Use
injected package name and version for analytics instead of version.json.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.#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.
6262f382de - Use the
'lodash' package instead of single-function 'lodash.*' packages60dd4ecc69 - Changed
export all to export individual components in index87f4720f27 - 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 npm54d82b49f0 - Remove
unused dependenciesbaaad91b65 - Updated to
use the latest and more performant version of @atlaskit/avatar[patch]2bfc59f090:
Change imports to comply with Atlassian conventions- Updated dependencies 6b8e60827e:
Updated dependencies 449ef134b3:
Updated dependencies 167a55fd7a:
Updated dependencies 57c0487a02:
Updated dependencies 6d744d3ff1:
Updated dependencies fd41d77c29:
Updated dependencies 7a2540821c:
[patch]3b92b89113:
onEntered callback now fires when enter animation is complete- Updated dependencies 9e87af4685:
Updated dependencies 0603860c07:
[patch]6548261c9a:
Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies 6548261c9a:
[minor]99849f50b2:
Implementing the overrides API on the Drawer component
[minor]24865cfaff:
Allowing support for using with new react-beautiful-dnd 12.x API
[minor]d438b16fbc:
Added an onOpenComplete callback to the @atlaskit/drawer that is called when the drawer finishes opening.
[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
[patch]baf6c19b23:
Remove //@ts-ignore unintentionally rendered with the other content
[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]d905cbc0ac:
Adding a condition to check if the component are referenced in tests running in CI. It reduces the noise and help reading the CI log.
[patch]688f2957ca:
Fixes various TypeScript errors which were previously failing silently
[major]75c64ee36a:
@atlaskit/drawer has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No API or behavioural changes.
[patch]9f8ab1084b:
Consume analytics-next ts type definitions as an ambient declaration.
[minor]72adb807b9:
Exports DrawerItem as part of the drawer package. Exposes props to control focus lock behaviour.
[patch]20aca56bcc:
The portal rendered by a drawer no longer renders if the drawer is not open
[minor]3301793aae:
[major]7c17b35107:
[patch]371becf9e2:
[patch]42d931a2fd:
[patch]a28eb04426:
[patch]211463f820:
Updated dependencies ce4e1b4780:
[patch]37ee906cf7:
[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]9cfee26:
[minor]53bf8be:
[patch]f480bab:
[minor]aacb208:
[minor]6746a42:
[patch]a6e5197:
[minor]90f4995:
Update drawer width with 'medium' width