Fix: Update tabs to remain the same size between unselected and selected states

[GeoffCoxMSFT]

Fix

Currently tab size is based on the content within. When a tab is selected, a bold font is used. This causes tabs to be different sizes between unselected and selected states creating a visual movement of tabs.

This updates TabList and Tab to reserve space in unselected tabs to the content is the same size for both states. This eliminates the visual movements of tabs.

Changes

• Added reserveSelectedTabSpace to TabList context
• Added contentReservedSpaceClassName to TabState
• Updated useTab to set contentReservedSpaceClassName based on context reserveSelectedTabSpace
• Updated useTabStyles to set contentReservedSpaceClassName style to match selected tab content style
• Updated renderTab to render content slot again with with selected tab content style and visibility:hidden
• Updates test snapshots

Issues

Fixes #23947

Open issues

Need to measure perf impact of rendering content twice in every tab.

Screenshots

Before

See associated issue.

After

PixelPerfectTabList.mov

[size-auditor]

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 169e9b94b0cf741102596f106ed726d9402145cc (build)

[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.

Latest deployment of this branch, based on commit 0683030:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

[fabricteam]

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-components react-components: Button, FluentProvider & webLightTheme	62.941 kB 17.678 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	189.907 kB 52.983 kB
react-components react-components: FluentProvider & webLightTheme	33.446 kB 11.033 kB
react-portal-compat PortalCompatProvider	5.857 kB 1.978 kB

_{🤖 This report was generated against 169e9b94b0cf741102596f106ed726d9402145cc}

[fabricteam]

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	1289	1269	5000
Button	mount	930	922	5000
FluentProvider	mount	1493	1502	5000
FluentProviderWithTheme	mount	576	584	10
FluentProviderWithTheme	virtual-rerender	546	534	10
FluentProviderWithTheme	virtual-rerender-with-unmount	569	578	10
MakeStyles	mount	1970	1946	50000
SpinButton	mount	2322	2333	5000