Visual changes coming in `@atlaskit/menu`, `atlaskit/dropdown-menu`

Hi folks :wave:

Reaching out from the Atlassian Design System. Wanted to make you all aware of some visual changes coming in the next versions of some of components.

  • @atlaskit/dropdown-menu@11.6.0
  • @atlaskit/menu@1.5.0
  • @atlaskit/side-navigation@1.6.0

These are all related changes and designed to harmonise the spacing of our UI.

Changes to @atlaskit/menu & @atlaskit/side-navigation

Internal changes to spacing and layout. This affects all Menu item types, including SkeletonItem, ButtonItem, HeadingItem, LinkItem. Most menu changes directly affect Side Navigation except those specifically called out in the visuals below.

Menu specific changes

  • Spacing has been rescaled from padding-inline 20px to 16px on all items.
  • padding-block remains space.100 (8px)
  • The technical implementation of the gap between content has also changed from margin to flex-gap which will dictate the layout and aids alignment of items.
  • Further documentation - https://atlassian.design/components/menu/examples

Side Nav specific changes

The core noticeable change to side navigation is the gap rescaling which was previously 16px.

This is now rescaled from 16px to 12px. This is now the same between dropdown, menu, and side-navigation.

Changes to @atlaskit/dropdown-menu

In addition to the menu changes which are inherited in dropdown menu@atlaskit/dropdown-menu@11.6.0 also brings in a density prop spacing="compact | cozy" to support higher density compact use cases. The compact setting is close to what was previously being applied in @atlaskit/dropdown-menu@10.

Summary of density options / changes

cozy (default)

  • padding-inline changes to space.200 (16px) from (20px)
  • padding-block remains space.100 (8px)
  • height remains 40px

compact

  • padding-inline set to space.150 (12px)
  • padding-block set to space.50 (4px)
  • height of element becomes 32px

Thanks!