diff --git a/.changeset/tender-kings-approve.md b/.changeset/tender-kings-approve.md new file mode 100644 index 00000000000..4597a502e75 --- /dev/null +++ b/.changeset/tender-kings-approve.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +Updated badge spacing to right align with secondary action icons diff --git a/polaris-react/src/components/Navigation/Navigation.scss b/polaris-react/src/components/Navigation/Navigation.scss index dc1b134f1a8..fdbe9e10ea7 100644 --- a/polaris-react/src/components/Navigation/Navigation.scss +++ b/polaris-react/src/components/Navigation/Navigation.scss @@ -159,12 +159,17 @@ $disabled-fade: 0.6; margin-left: var(--p-space-2); display: inline-flex; margin-top: var(--p-space-2); + margin-right: var(--p-space-2); @media #{$p-breakpoints-md-up} { margin-top: var(--p-space-1); } } +.ListItem-hasAction .Badge { + margin-right: 0; +} + .Icon { @include nav-item-icon-attributes; } diff --git a/polaris-react/src/components/Navigation/Navigation.stories.tsx b/polaris-react/src/components/Navigation/Navigation.stories.tsx index 68ff665c8b3..b5bbfbadb15 100644 --- a/polaris-react/src/components/Navigation/Navigation.stories.tsx +++ b/polaris-react/src/components/Navigation/Navigation.stories.tsx @@ -606,3 +606,95 @@ export function UsingMajorIcons() { ); } + +export function WithBadgeAndSecondaryAction() { + return ( + + + + + + ); +}