Hi folks
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
to16px
on all items. -
padding-block
remainsspace.100
(8px) - The technical implementation of the gap between content has also changed from
margin
toflex-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 tospace.200
(16px) from (20px) -
padding-block
remainsspace.100
(8px) - height remains
40px
compact
-
padding-inline
set tospace.150
(12px) -
padding-block
set tospace.50
(4px) - height of element becomes
32px
Thanks!