feat:(react-nav-preview) Adds small size variant

[mltejera]

Adds small variant to Nav, and a little more pixel pushing for alignments.

Cleaned up a duplicate item in an example.

Added a new example for size.

Ladders to #26649

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[fabricteam]

📊 Bundle size report

✅ No changes found

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[smhigley]

LGTM! Just left one nit and one question

[lekoulekou]

Hi hi! Just catching some minor spacing things that seem different between the PR and Figma. Things are looking great overall!! Thanks for being so detail oriented.

Looks like the backplate is currently touching the right of the french fry, but it would be nice to have some space. It should be 4 pixels to the left of the french fry and 2 pixels to the right before the backplate starts.

For the NavCategoryItem, I decided to change the right padding a bit smaller so the space between the chevron and scrollbar seems less wonkily large. It was previously 10px (Horizontal/MNudge) but is now 8px (Horizontal/S). None of the other top/left/bottom padding got changed. The text box was previously set to Fixed and is now Fill--not sure if this impacts the code, but wanted to include that just in case it's relevant.

Chevron things:

• The chevron is looking smaller than it should be, can you check to see if it's 20px?
  
• Also noticing the chevron doesn't seem vertically aligned in the node height for both the medium and small size examples. In the example for Nav Drawer Default, the chevron alignment seems fine on the first parent node (Job Postings), but then seems to get worse on the other two (Retirement, Career Development). Not sure why that is but might be worth checking out.
  
  

Spacing between things in the nav:
Sorry!! I forgot to include in the spec that we're having a 2px space between all nav items, including things like divider. This helps us align with some other Fluent 2 components like Tree and Menu that also have this "space-between" pattern. Here's screenshots of the dev notes for that container and then how it's showing up in the Figma example if it's helpful.

[lekoulekou]

Heya Mason!~ This is looking so good. I found some more tiny pixels to push around and organize. All tiny things, we're so close!!

• Section header: It looks like with all the padding, this space is coming to 40px tall, but it should be 32px.
  
• This is probably just 1 pixel, maybe 2. But if you look at the Job Postings category, the two child items underneath look like they're indented a bit. They should be left aligned with Job Postings.
  
• The space on the right side of the backplate should be 4px. I think it's coming up as 10px right now when I inspected. Here's Preview and Figma side by side:
  
• Hamburger: Can the hamburger move up to sit in the middle of the node height? The 40px is great, but the hamburger feels low. Maybe split the 10px top padding and share with the bottom?
  
  Thank you!