[Bug]: TabsList jumps pixels when you change tabs.... :(

[dzearing]

Library

React Components / v9 (@fluentui/react-components)

System Info

chrome, windows

Are you reporting Accessibility issue?

No response

Reproduction

https://stackblitz.com/edit/react-ts-rtwqb7

Bug Description

Actual Behavior

Change tabs, bold text changes cause pixel jumps around in the tab

Expected Behavior

Change tabs, bold tabs doesn't add pixel width to a tab

This used to be a major eye sore in the Fabric Pivot and was later fixed (by always rendered "selected" text and hiding it so that bold widths would take layout space.)

Now it jumps around when you click around. Feels very unpolished.

Also of minor note is that the grey "hover underline" shows momentarily when you select a tab, while the brand colored underline gracefully glides on top of it. Recommend not showing the hover underline when something becomes selected... would make it much more polished.

Logs

n/a

Requested priority

Normal

Products/sites affected

any using tabs

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[GeoffCoxMSFT]

@dzearing - Both of these are by design according to the figma. I brought up these visual issues with Yvonne during TabList development. She considered them and decided to stick with the current design as it matches closely to Windows.

[dzearing]

This can't be by design - as mentioned in chat, I'm not asking to remove bold text. It should be there. I am asking that unrelated tabs don't jump around. Designers may have specified to use bold text, but they need to account for state changes causing width differences. That's an oversight, not a design.

If the tab widths are a function of the content, the content width must be controlled and not arbitrarily based on state changes.

So some options would be:

1. Measure "selected" width vs "unselected" width and fix the tab width to the larger size. IMO this is expensive.
2. Render both "selected" and "unselected" content and hide the smaller in the right state.

And in either case, if arbitrary content can render within a tab, then at least provide a way to abstract the measuring behavior so that developers don't stomp on their own toes creating inconsistent or janky user experiences.

For example, you can expose a TabHeader component which has specific selected/default content and abstracts either option:

<Tabs>
   <TabHeader>
   { ({selected}) => selected ? (
      <>
       <FilledThingIcon />
       <bold>Header text</bold>
      </>
   ) : (
      <>
       <UnfilledThingIcon />
       <span>Header text</span>
      </>
   ) }
   </TabHeader>
</Tabs>