Style revisions for Experimental Navigation Component

[joelclimbsthings]

Fixes #26336

The design for the navigation component has been updated to require a few minor CSS updates; including:

• The individual items should have a height of 32px
• Consecutive groups should have a 24px spacing
• Cancelling native margin styles present in wp-admin environment

Description

Only some minor CSS additions in navigation-styles.scss that only impact the experimental navigation component. Also added new Story to better illustrate changes.

How has this been tested?

• Viewing the usage of the navigation component within the wc-admin environment
• Viewing the component within Storybook (added new Groups Story)
• Running linting/tests

Screenshots

Before:

After:

Types of changes

Bug fix, updating to align with newer designs for experimental navigation components

Test Instructions:

• npm run storybook:dev
• Go to the Navigation component.
• Look for spacing between groups in Groups story, and shorter items
• To further test the changes in wc-admin, use npm link to bring in updated @wordpress/components
• Observe changes

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[joshuatf]

Changes here look great, Joel! Tested in Storybook and npm link'd to test this in WooCommerce Admin where this is being consumed and things look good.

One other small change we can probably add here- looks like the item title has a font-size of 13px in the designs. Pre-approving pending that extra addition.

[psealock]

Thanks @joelclimbsthings ! This is all looking good to me, but I'm pausing on the height overwrite despite the design saying otherwise because I'm pretty sure we want to use the components as they come as a general rule. @jameskoster to confirm.

[psealock]

Thanks for weighing in @jameskoster. With that, this LGMT

[psealock]

cc @Copons to look this over because it changes button heights for everyone.

[Copons]

LGTM!
@joelclimbsthings thanks for looking into this!

There's currently a conflict with a recent change introducing RTL support to the component.
I think the ItemTitleUI should become something like this:

export const ItemTitleUI = styled( Text )`
	${ ( props ) => ( props.isRTL ? 'margin-left: auto;' : 'margin-right: auto;' ) }
	font-size: 13px;
`;

(I don't think we need the text-align at all 🤔 )

[joelclimbsthings]

There's currently a conflict with a recent change introducing RTL support to the component.
I think the ItemTitleUI should become something like this:

export const ItemTitleUI = styled( Text )`
	${ ( props ) => ( props.isRTL ? 'margin-left: auto;' : 'margin-right: auto;' ) }
	font-size: 13px;
`;

Thanks much @Copons .
I was actually just looking at that! And wholeheartedly concur. Resolved.

[Copons]

LGTM! ✨

Nice job adding the new story, and updating the styles!

[github-actions]

Congratulations on your first merged pull request, @joelclimbsthings! We'd like to credit you for your contribution in the post announcing the next WordPress release, but we can't find a WordPress.org profile associated with your GitHub account. When you have a moment, visit the following URL and click "link your GitHub account" under "GitHub Username" to link your accounts:

https://profiles.wordpress.org/me/profile/edit/

And if you don't have a WordPress.org account, you can create one on this page:

https://login.wordpress.org/register

Kudos!