A list of options to help users navigate, or perform actions.
yarn add @atlaskit/menufe3551cf3dd67 -
We are testing improvements behind a feature flag. Menu items will support icons regardless of
their spacing. If this fix is successful it will be available in a later release.#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 v183aef43e98843a -
Internal change to how styles are applied. There is no expected visual change.5eb2a70adb262 -
Remove react-router-dom from devDependencies as it is incompatible with React 18.3ab7d7da348ab -
Adds side-effect config to support Compiled css extraction in third-party apps2518d31182356 -
Removed feature flag platform.design-system-team.section-1px-seperator-borders, changing the
border for menu sections from 2px to 1px.fcf151627c8de -
Added interactionName to components in menu and dropdownmenu778c15c1d279a -
[ux] Removed feature flag platform.design-system-team.menu-tokenised-typography-styles resulting
in minor changes to typography and spacing.a88a2fe454eb9 -
Updated LinkItem to not render a router link when the href is empty (e.g. href="" or
href={undefined}).#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.0fd1aa0fa64aa -
Clean up stale feature gate, no functional changes.89fdaa528833e -
Added an UNSAFE_isDraggable prop to LinkItem and menu item that disable drag overrides within the
components68ee7be8867d0 -
Remove remnants of extract-react-types from tsconfig file.cb28fa67e9a16 -
Update Atlaskit docs so that they point to current ADS site. Remove remnants of
extract-react-types.89377ac3c7f25 -
Removed internal props from link item and custom item that prevent drag and drop functionality
from being applieda3a6ca91979d4 -
Adds a new optional UNSAFE_shouldDisableRouterLink prop, which when set to true, will opt out
of using a router link and instead use a regular anchor element.cd506a937e44f -
Internal change to how typography is applied. There should be no visual change.78d9ff4de5251 -
Updated LinkItem to conditionally render a router link if a link component is set in the app
provider and the provided href prop is not an external link or a non-HTTP-based link (e.g. emails,
phone numbers, hash links etc.). These changes are behind a feature flag and will be available in
a later release if successful.c733254a2dd6e -
Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
is implicitly set to automatic.1e40876a2c40 -
Accessibility improvements. Adds a new titleId prop to Section.77772d4d1a22 -
[ux] We are testing a visual change behind a feature flag. The capitalisation of menu heading
remains active for tokenised styles. If this change is successful it will be available in a later
release.364a95234076 -
[ux] We are testing a visual change behind a feature flag. The line height of menu item title
changes. If this change is successful it will be available in a later release.35fd5ed8e1d7 -
Upgrading internal dependency bind-event-listener to @^3.0.0d92770eae702 -
Adding internal eslint opt outs for a new rule
@atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop.b037e5451037 -
Update new button text color fallback for default theme (non-token) to match that of old button
current text color36796c121e2a -
[ux] This change includes heading role for HeadingItem and new prop headingLevel to specify the
level of heading to be defined by assistive technologies.d7400cb1aa2 - Adds a
platform feature flag to adjust Menu Section seperator border widths from 2px to 1px.997b0489687 - Add
codemod to convert link item components with invalid href attributes to button items. The href
attribute will be required for link items in a later major upgrade. Using this will ease the
transition.07aa588c8a4 - Reverts
the fix to text descender cut-off, due to incompatibilities with Firefox and Safari.#41355
cd1c813da18 - Menu
items now have a secondary selected state (border or notch), this was previously feature flagged
for Atlassian experiences and is now available for everyone.
This change makes all menu items are now relatively positioned, if you had any child elements that leaned on this behaviour your experiences will now be broken!
For example the below code code previously the div would be positioned relatively to the menu
group element. Now, it is positioned relatively to the button item element.
<MenuGroup>
<ButtonItem>
<div style={{ position: 'absolute', top: '100%' }} />
</ButtonItem>
</MenuGroup>
As a path forward you should not be leaning on this behaviour. If you need a popup experience use
@atlaskit/dropdown-menu or @atlaskit/popup.
518532660de - Add
default for environment variable to fix typechecking under local consumption5545e5a6ab2 - [ux]
Adds isLoading prop to menu group for better context for assistive technology users.a962b1b24eb - The
internal composition of this component has changed. There is no expected change in behavior.6bb299616f3 - Adds a
killswitch to turn off unsafe style overrides via a feature flag.56b444b56a8 - Fix a
bug where text descenders were cut off at high zoom levels on Windows4ae083a7e66 - Use
@af/accessibility-testing for default jest-axe config and jest-axe import in accessibility
testing.599bfe90ee3 - Internal
change to use shape tokens. There is no expected visual change.0af122e7d0f - [ux]
Prop isList in Section component allows to add <ul> and <li> elements around the items to
better semantic markup if it is a list of itemsb53207f89ef - The
internal menu context now can have no border or notch for the selected state. This is being tested
under a feature flag and if successful will be available in a later release.4b76c41be8e - Added
prop deprecation warnings for cssFn and overrides props. These warnings are displayed in the
console in development environments only.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.d518f0e34b9 - [ux] We
are testing a selected indicator change to menu, dropdown-menu, and side-navigation packages
behind an internal feature flag. If successful this will be released in a later minor release.56507598609 - Skip
minor dependency bump2e01c9c74b5 - DUMMY
remove before merging to master; dupe adf-schema via adf-utilsa8debc96871 - Internal
update to menu primitive so it renders a span instead of a div as child of button.3ca97be0c06 - Internal
change only. Replace usages of Inline/Stack with stable version from @atlaskit/primitives.261420360ec - Upgrades
component types to support React 18.#30362
93d761786d6 - [ux]
Default spacing for all menu items has been changed from 20px inline padding to 16px.
Adds a new spacing prop to on MenuGroup. The prop can be used to control the content density of
the component and its children.
Adds a new internal export SpacingContext. This should not be used directly.
63c2f0b3f96 - 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.f96f3ebd861 - [ux] Use
color.background.neutral.subtle token to represent transparent background.981faeea2ff -
Application of spacing tokens for some internal styles of MenuPrimitive.bcbd0c5b5bf - Fix text
color styling of disabled descriptions in menu and link items3acf8a89149 - Updates
@emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.9de88fa1e1e - Internal
changes to include spacing tokens in component implementations.8f2153a45a7 - Convert
Menu Group to use primitives.b196f69e76b - Menu
items no longer intercept mouse down events to force focus or blur behavior depending on the last
focused element.8a5bdb3c844 -
Upgrading internal dependency (bind-event-listener) for improved internal typesc8145459eb5 - [ux]
Updating skeleton token in @atlakist/menu, @atlaskit/theme59e2178901f - The
isShimmering prop for skeleton items has been fixed, resolving a regression in version 1.2.0.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.77c46ec96a7 - Adds a
prop for role to the MenuGroup component that acts as you'd expect the HTML attribute to act.
You are now able to override the accessibility role for the element.58884c2f6c1 - Internal
code change turning on a new linting rule.27467f65f68 - [ux]
Update headingStyle to color that passes WCAG AA color contrast2066efabc65 - A fix
for the StatelessCSSFn type so that it now correctly accetps a void argument.96cfc6c1c7f -
Deprecates the cssFn and overrides APIs in '@atlaskit/menu'. These APIs are not performant and
allow unbounded customisation of the Menu components. These APIs will be removed in a future
release.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 - The
no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when
auto-fixing by correctly formatting token ids.f460cc7c411 - Builds
for this package now pass through a tokens babel plugin, removing runtime invocations of the
tokens() function and improving bundle size.2eeb5c46710 - Menu
items can take data-testid directly again however we recommend to still use the officially
supported testId prop instead. The data-testid prop was unintentionally removed in a previous
version however will be removed as a breaking change in a later major version and remains not
officially typed.2b2290121eb - Raised
the minimum version carat range of focus ring to latest.#14777
213bfd77e61 - The DOM
structure of menu item components has been flattened. If you used CSS hacks (via className or
cssFn) that targetted specific DOM nodes you may be broken.
Previously the structure looked like:
<button>
<div> // <-- this intermediate div has been removed
<span>
<span />
</span>
</div>
</button>
Now it looks like:
<button>
<span>
<span />
</span>
</button>
63888b03b49 - Internal
refactor to align style declarations to common techstack.
192d35cfdbd - Defaults
native button usage to type="button" to prevent unintended submittig of forms.#13864
224028babd3 - Menu now
uses the design system and emotion styling techstacks.
506282a89f2 - [ux]
Menu items now have their text color set using currentColor instead of using colors directly off
the palette.
58832848c98 -
Instrumented menu 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.
f5a527024d4 - Suppress
@atlaskit/design-system/ensure-design-token-usage token fallback errors.d6f7ff383cf - Updates
to development dependency storybook-addon-performance7727f723965 - Internal
change to the release model from continous to scheduled release. There are NO API CHANGES in
this release.9ea5f8887cd - Internal
change to menu styling to allow for the separator color to be customisable in side-navigation21713b1335a - [ux]
adding shouldTitleWrap and shouldDescriptionWrap prop to menu items for wrap long text in title
and descriptiona1def13c6fb -
Restructure the package to align with lite mode convention, and introduce entry points to each
item type451f220a771 - Set
disabled/aria-disabled for menu item HTML elements, and prevent mouse events when the item is
disabled981c9be6b32 - Fix
generics for custom item to work with typed components from external libs11fea0f7e4b - Memoise
menu item variants79a40dec30 -
Breaking Adjusts the API of the cssFn prop used in both menu and side-navigation. The prop now
no longer exposes the currentStyles to the user in the callback and instead only provides the
current state. Users no longer need to spread the currentStyles into their components when
overriding. This change also resolves a bug where cssFn overrides did not always take precedence
correctly over the default component styles.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.
63625ea30c - Add
aria-current="page" attribute to anchor tag when isSelected prop is true for LinkItem
component.a70b60d9f1 - The line
height of menu items has been slightly increased to accomodate descender spacing viewed on
non-retina displays.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/39534952087be5b - Item
components now blur themselves during the mouse down event.54a9514fcf - Build and
supporting files will no longer be published to npmd674e203b3 - Previously
Menu items controlled their own margin spacing which caused issues when trying to use them outside
of Menu. Now we have moved Menu item margin styles into the Section component so now the Section
dictates the spacing around child items. We had to update Side Navigation to control its child
item margins as well.649f69b6d7 - Patch all
packages that are used by confluence that have a broken es2019 disteb2ed36f5a - Fix
characters with descenders (eg. 'g', 'j', 'p') in Menu Items from being clipped by increasing the
line-height.0b64c87548 - FIX:
Global a:visited styles should not override LinkItem :visited styles[patch]1e7e54c20e:
Change imports to comply with Atlassian conventions- Updated dependencies 6b8e60827e:
Updated dependencies 449ef134b3:
Updated dependencies 167a55fd7a:
Updated dependencies 57c0487a02:
[minor]7e408e4037:
BREAKING - renames elemBefore and elemAfter props to iconBefore and iconAfter on all
item components.-
[minor]41760ea4a6:
BREAKING: modifies custom item component to take only valid HTML attributes. This means
wrapperClass is now known as className.-
[minor]fb3ca3a3b2:
BREAKING - removes cssFn from section component, introduces overrides on section component
to override heading css.
[patch]6453c8de48:
Exposes typescript types alongside components.- [patch]e4dde0ad13:
Fixes custom item not passing selected and disabled props to the customized component.- [patch]971e294b1e:
Corrects background color for disabled item to transparent.- [patch]684ee794d6:
Improves type safety with custom item by using TypeScript generics to pass on the custom component types to the parent.- [patch]286770886d:
Fixes item skeleton icon size to be slightly smaller than the real icon.- [patch]2c1b78027c:
Fixes skeleton heading and item ui.- Updated dependencies 168b5f90e5:
Updated dependencies 0c270847cb:
Updated dependencies 109004a98e:
Updated dependencies b9903e773a:
Updated dependencies aff1210e19:
[patch]ed8d8dea65:
Clean-up import statements- [patch]db2f869556:
Corrects separator color.- [patch]81ea791176:
Adds overrides for title component.- [patch]e57c4aa96d:
Fixes vertical alignment for menu items in IE11.- [patch]89d35b919a:
Adds css function to skeleton components.- [patch]083cfbaeb4:
Improvement: Section now contains an optional title prop, which will be passed into an
internal HeadingItem if provided. See the Section documentation for more details-
[patch]46d95777ef:
Fixes width override in item skeleton component not being applied correctly.- [patch]9b264df34d:
Fixes users being able to select text and drag both the link and custom item components.- Updated dependencies 8c9e4f1ec6:
[minor]7a6e5f6e3d:
Support forward ref on ButtonItem and LinkItem
[patch]1f9c4f974a:
Updates to @atlaskit/menu to support better custom components
description prop on items has been updated to take either string or JSX.Element
allowing custom components such as links to be rendered<HeadingItem />)- Updated dependencies
0603860c07:[patch]6548261c9a:
Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies 6548261c9a:
[patch]77ffd08ea0:
Adds onClick prop to menu group component.-
[patch]0ae6ce5d46:
Forwards ref of the button item component.
[patch]4ed951b8d8:
Fixes on click being fired when items were disabled.- [patch]e0e91e02a6:
Adds support for a cssFn prop that allows consumers to override the styles of ButtonItem and
LinkItem.- Updated dependencies
c0102a3ea2:
Updated dependencies b9dc265bc9:
[patch]ab0e00f203:
Fixes width being 100% on link and custom item. Adds export types to the main package.
[patch]911d58c568:
MenuGroup to control min/max width and height.PopupMenuGroup component which is variant of MenuGroup with sensible
defaults.[patch]4a223473c5:
Removes babel/runtime from dependencies. Users should see a smaller bundlesize as a result- Updated dependencies 28f8f0e089:
Updated dependencies 82747f2922:
Updated dependencies 4a223473c5:
[minor]795a9503da:
Menu has had few styling fixes:
Item components when there is no description defined now equals
40px.SkeletonHeadingItem & SkeletonItem now match the real components dimensions,
this means they will no longer move things around when swapping them in & out.SkeletonHeadingItem has had its width slightly increased.Skeleton items now have a shimmer effect that you can opt into with the isShimmering prop.HeadingItem now has the correct font-weight.Item components description now has the correct font-size.[patch]b7b0ead295:
Adds testId to all components - useful when wanting to do any automated tests that want to
target these specific elements.- Updated dependencies
429925f854:
[patch]ac6ba9b837:
Fix bug where Skeleton width wasn't being picked up. Allow skeleton heading width to be configurable to make API consistent with skeleton item
[patch]eaca633b3d:
Style ItemSkeletons and ItemHeadings. Add the ability to add icon or avatar and configure skeleton width.