A collection of components which let you compose an application's page layout.
yarn add @atlaskit/page-layout#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 v184b581a9ac4abd -
Testing behind an internal feature gate, a React 18 concurrent safe way to initialize the
LeftSidebar to avoid animation on hydration or initial client-side rendering.57f451bda8919 -
Adds side-effect config to support Compiled css extraction in third-party appsb7d4624ddbaf4 -
adding data-ssr-placeholder attributes to page-layout component for VC exclusion#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.
8b8090800a35d -
Bump peer dependency for react-dom to include version 17 and 18.91e9255bd7c93 -
Remove deprecated UNSAFE_useSetLeftSidebarStatec38c1e4f2659d -
Code reverted for Fix zindex for content container in page-layout behind FFb49735b1f1e69 -
Fix zindex for content container in page-layout behind FF
'ally-jira-team.issue-sideview.inaccurate-reading-order_yna0p'. If successful will remove flag in
a cleanup PR.797e07674ed7c -
Remove it has been rolled out platform.remove-newline-in-style-tag-in-platform-page-layout_7gts14709c6e8fcd8a -
Bump version to remove extra html comment in style tag in React SSRa8bd419fd70b9 -
Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
is implicitly set to automatic.72f8eeb956b68 -
Reverts a change in previous release 3.3.1 that caused duplicate content in page skip links
navigation.35fd5ed8e1d7 -
Upgrading internal dependency bind-event-listener to @^3.0.0c5634a5ddf4f -
Fix a11y failure in ResizeButton by replacing empty div with span element.70c8a51f46c6 -
[ux] Fix grabber overlapping with add table row button for Confluence6b1707c169e0 -
The internal composition of this component has changed. There is no expected change in behaviour.5ce631eec537 -
Added UNSAFE_useSetLeftSidebarState to support an internal redesign.
UNSAFE_useSetLeftSidebarState returns noop and will be removed in the next major release.#80897
8ce3bb563079 -
[ux] If you view a product in a small window or at higher zoom levels, the sidebar now changes
sizes to keep all controls in view. In these smaller windows, the sidebar no longer opens on hover
to avoid accidental opening.
The sidebar is unchanged in views wider than 768 pixels.
When viewing a product in a window narrower than 768px or zoomed in at 200%, you'll notice that hovering your cursor over the sidebar no longer expands the sidebar.
To open the sidebar, select the expand sidebar button ( > icon). Select the button again to collapse the sidebar. You can also select the edge of the sidebar itself to expand and collapse it.
664ecae2338b -
Add PFF to reduce height of side bar grab area when collapsed in order to give the resize button
more room and prevent accidental hovers causing the side bar to fly out9e7a86f76af4 -
Resizing the Sidebar can now only be triggered via left-click (main button click). This prevents
situations where right-clicking the resize button unexpectedly starts resizing the Sidebar.162c25fea4d3 - Remove
onExpand and onCollapse props on LeftSidebar component. These props were non-functional. Use
onLeftSidebarExpand and onLeftSidebarCollapse props on PageLayout component instead.2edeebd136a - Ensure
the responsive-page-layout-left-sidebar_p8r7g feature flag is idempotent and does not break
devloops where this may change at runtime or even between renders.fb049fdd01b - [ux]
DSP-12583 and DSP-12584 update examples to include missing resize/expandable labels fixed
separator to use the valid slider role6900f89eb0e - Internal
changes to use space tokens. There is no expected visual or behaviour change.edb659b9f7b - Reverts
changes that added aria-hidden to key interactive navigational elements6263a07010c - Still
behind a feature flag, reduces the breakpoint at which the new mobile functionality for our left
sidebar "flyout mode" in mobile is applied (reduced from ~1024px to ~768px).6a33c4fd6b6 - Removes
unnecessary aria attribute from grab area in left sidebar.599bfe90ee3 - Internal
change to use shape tokens. There is no expected visual change.37131e3a8ea - Uses the
Alpha release of our responsive media helpers via either the public media export or the internal
UNSAFE_media export.009e6a78811 - Fixed
dependency resolution issue with @atlaskit/primitives.#35270
7be6f82bb0d - [ux]
Behind tested behind a feature flag, we're testing new mobile functionality to keep our left
sidebar in a "flyout" mode in mobile so navigation or content sits ontop of the main page content
rather than crushing it.
This is designed to be SSR-compatible as it's primarily CSS-based with some user-event driven logic around mobile breakpoints that should not be inmpacted by SSR rendering (and should return the default desktop experience if such a state is achieved).
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.b1bdec7cce2 - Internal
change to enforce token usage for spacing properties. There is no expected visual or behaviour
change.#34408
4bbc131de00 - ####
Fix: Resizing pages with <iframe>s
Pages that contain <iframe> elements will now have a smoother resizing experience. <iframe>
elements consume user events (eg mousemove) when the user is over the top of them. This is
problematic for resizing as we need to have the latest user pointer movements to resize the
sidebar. Now, while a resize is happening, pointer-events are blocked on <iframe> elements to
prevent the <iframe> consuming user events.
While resizing the users cursor will now always be ew-resize. Previously the cursor could change
depending on what element the users pointer was over
A user can select parts of a page (eg select a paragraph of text). Previously, in some cases, a user's selection could change due to a resizing operation. This has been fixed so that a resizing operation will no longer change a user's selection
onResizeEndonResizeEnd will no longer incorrectly get an empty object {} if the user resized into the
collapsed state
56507598609 - Skip
minor dependency bump#32575
2a9f6f800ef -
Fixes
onLeftSidebarExpand is no longer called when the sidebar is already open.
onLeftSidebarExpand oculd previously be incorrectly called if a user resized an expanded
sidebar to slightly smaller than the default sidebar width, or when the user cancelled a sidebar
resizing operation with the "Escape" keyonLeftSidebarCollapse and onLeftSidebarExpand functions are now called
when collapsing / expanding respectively. Previously, only the initial onLeftSidebarCollapse
and onLeftSidebarExpand were called (due to a stale closure)onLeftSidebarCollapse and onLeftSidebarExpand are now called with the latest state values.
Previously there were only ever called with the initial left sidebar state value (due to a stale
closure)Improvements
onLeftSidebarExpandonLeftSidebarCollapse"transitionend" when the sidebar is expanding or
collapsing."transitionend" event listener when <LeftSidebar /> is unmounted<LeftSidebar /> is unmounted while
collapsing / expanding.#32516
955ee3ea8fe - [ux]
fix: if a "mousedown", "click", "resize" or "visibilitychange" event occurs while the
sidebar is being resized, then the resizing operation will end
[ux] new: if a user presses the "Escape" key while the sidebar is being resized, then the
resizing operation will end
261420360ec - Upgrades
component types to support React 18.4ee60bafc6d -
ED-16603: Remove tooltips from VR tests and make them opt in. To opt-in, add allowedSideEffects
when loading the page.7f3ff7f0081 - [ux]
Enhance accessibility of header for skip links component9827dcb82b8 - No-op
change to introduce spacing tokens to design system components.522a27e6119 - Remove
isOpen prop from @atlaskit/banner, it is now open by default.3de296cfd19 - Updates
@emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.26b3e978512 - Internal
code change turning on new linting rules.8a5bdb3c844 -
Upgrading internal dependency (bind-event-listener) for improved internal typese4b612d1c48 - Internal
migration to bind-event-listener for safer DOM Event cleanupef9ecf15b36 - Calling
collapseLeftSidebar while the sidebar is already collapsed no longer modifies the sidebar state.
This prevents an invalid state that could occur if collapseLeftSidebar was called while the
sidebar was in flyout.21534d3647e - [ux]
Update theme colours and remove shadow from resize barac9343c3ed4 - Replaces
usage of deprecated design tokens. No visual or functional changesad0e912661a - Styles
have been rewritten to be static, in preparation for compiled adoption.8940901481d - [ux] The
width of right sidebars with fixed positioning (<RightSidebar isFixed />) has been fixed.
Previously they had automatic sizing, which led to inconsistencies in appearance between static
and fixed positioning.62edf20ab1e - Migrates
all usage of brand tokens to either selected or information tokens. This change is purely for
semantic reasons, there are no visual or behavioural changes.567a96da90e - [ux]
Instrumented page-layout 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.19d72473dfb - Bump
raf-schd to latest (4.0.3), including better TS typings.192d35cfdbd - Defaults
native button usage to type="button" to prevent unintended submittig of forms.f9cb2bcf689 - SkipLink
order is now stable after remounting slots.0eb13e8b2d8 - Fix
"Cannot update a component from inside the function body of a different component" warnings
related to skip links.d6f7ff383cf - Updates
to development dependency storybook-addon-performance7d0905b4e81 - Fix bug
where right sidebar styles were being calculated with the wrong variable.7727f723965 - Internal
change to the release model from continous to scheduled release. There are NO API CHANGES in
this release.13d7f548f14 - The
usePageLayoutResize hook no longer exposes the internal setLeftSidebarState method.ddff790f9fd - [ux]
Added a new hook (useLeftSidebarFlyoutLock) which allows locking the sidebar in a flyout state.6ae23940b27 - Remove
css-vars-ponyfill from page layout to drop IE10/11 support and reduce the bundle size952019cfd39 - Removed
extraneous/unnecessary dependencies for design system components.e6c982bb8f -
Performance improvement. Simplifies a layout calculation to update less frequently.abfb2146c6 - [ux]
Earlier left sidebar was not expanding on resize button click, Now this issue has been fixed.1757dec0ee - [ux] Fixed
bug where skip link menu was moving on scroll. Skip link menu is now using fixed positioning
instead of absolute5f58283e1f - 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.d540cd1042 - [ux]
Moving cursor away from current browser was causing side nav expand unexpectedly. This issue has
been fixed now and the flyout will close as mouse will leave browser.2c735227f9 - Fix resize
callback events from being called more than once on mountb4fd71e4a2 - Fixes the
visiblity of left sidebar contents when rendered in SSR mode#4765
4cf354b500 - Adds the
ability to register custom skip links to be displayed in the PageLayout skip link menu. Now if
you have an element that isn't a slot of the PageLayout component, you can still provide a
helpful and accessible way to jump straight to it!
Import the new useCustomSkipLink hook and pass in the taget id and a skipLinkTitle and it
will add a new link to the element with a matching id, no matter where it is in the document.
You can also choose what position the link will show up in the menu by using the optional
listIndex prop.
ec3df667ed - Pass left
sidebar state to onResizeStart, onResizeEnd, onLeftSidebarExpand nd onLeftSidebarCollapse9db4bdaa00 -
BREAKING Changes the way css variables were previously exported. They are now exported with
proper fallback values. Refer to the CSS variables docs to see
how to use them.#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.
14d289a7ee - Fix
LeftSidebar flyout not closing sometimes when not in hover state8fb2f0ac0e -
BREAKING - The width prop now controls the width when LeftSidebar is mounted and overrides
leftSidebarWidth value in localStorage. Also added collapsedState prop to control
expanded/collapsed state when LeftSidebar is mounted.859d71f610 - Replaces
internal usage of Global component from emotion with a style tag3305a0494b - Added
resizing state in left-sidebar - can be used to stop keyboard resize temporarily4d74245d2b - The left
sidebar now has a minimium width of 240px when being resized.404a32df15 - The left
sidebar now has a minimium width of 240px when being resized.0c532edf6e - Use the
'lodash' package instead of single-function 'lodash.*' packagesa05fe35b29 - Side
navigation now supports being able to resize the sidebar with your keyboard! Simply focus onto the
grab area and then use your arrow keys to resize. Use the resizeGrabAreaLabel prop to describe
what happens when interacting with it.87f4720f27 - 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/3953445b6bc10a8 - Renames
i18n prop to skipLinksLabel which is now a string. This prop is used as the title of the skip
links container.be2323a168 - Prevents
clearing localStorage on unmount9fed259adc - Adds a
default value for dimension (height or width) props in Page Layout content slots.80fb46068b - Move all
grid state into the ResizeSidebarControl. BREAKING onExpand and onCollapse callbacks have been
removed. They are now called onLeftSidebarExpand and onLeftSidebarCollapse and are passed to
the PageLayout component.54a9514fcf - Build and
supporting files will no longer be published to npmc38dd3c0dc - Fixes a
bug where LeftSidebar would go into an inconsistent state when toggled quickly.6ab2c4b227 - Make
flyout behaviour more predictable7d0af990e1 - Removes
overflow auto so that position sticky in Main can workbd8f1ab8b6 - Changes
the behaviour of flyout. It now expands to the preferred width of the user25bf379774 - Removes
overflow auto so that position sticky in Main can work649f69b6d7 - Patch all
packages that are used by confluence that have a broken es2019 dist89a5c1ded9 - Fix issue
with usePageLayoutResize hook not affecting sidebarf5226d360b - Add
onFlyoutExpand and onFlyoutCollapse events. Internal refactor of flyout behaviour.-
#2089
42e3b34fae - Breaking
change Hides contents of LeftSidebar when collapsed7fb3059a20 - -
Breaking Makes LeftSidebar resizeable by default, does not export ResizeControl anymore.
[minor]278f466be0:
Split page layout to allow tree shaking, allow resize button to have an override and add the required resizeButtonLabel prop to ResizeControl
[patch]214c76d2b8:
Change imports to comply with Atlassian conventions- Updated dependencies 3940bd71f1:
Updated dependencies 6b8e60827e:
Updated dependencies 449ef134b3:
Updated dependencies 167a55fd7a:
Updated dependencies 57c0487a02:
Updated dependencies e5eb921e97:
[minor]9015d5614a:
BREAKING
ResizeControl composable. If it's not passed as a child to LeftSidebar, it will not be
resizable.NON-BREAKING
Main couldn't handle wide content without breaking the layout.[patch]4955ff3d36:
Minor package.json config compliance updates- Updated dependencies 8c9e4f1ec6:
[patch]8e76dbf8bc:
Add resize control to left sidebar- [patch]b015403f20:
Adds the ability to resize and collapse left sidebar. Adds the ability to hydrate grid state from local storage. Adds unit and VR tests.
Flyout behaviour in the LeftSidebar has a bug when isFixed prop is passed as false. It will be
fixed in a future release. Tracked here
[patch]81275873e9:
Initial release for page layout. Exports a top level Grid component and a number of slot components which fit into a preconfigured grid layout- Updated dependencies 66dcced7a0:
Updated dependencies eea5e9bd8c: