[Feature]: Position handling for active tab indicator on vertical TabList

[mgostisha]

Area

React Components (@fluentui/react-components)

Describe the feature that you would like added

Currently, the active tab indicator on Tablist with vertical: true is hard-coded to be on the left side of the tab. We're creating an experience with the vertical TabList on the right edge of the of UI, and it would be nice to be able to switch the active indicator to be on the right of the tabs.

Additional context

No response

Have you discussed this feature with our team

Geoff Cox

Validations

• Check that there isn't already an issue that requests the same feature to avoid creating a duplicate.

Priority

Low

[dmytrokirpa]

Hello @mgostisha, thanks for bringing this to our attention.

Are you asking if we can support a feature similar to what's demonstrated in this example https://stackblitz.com/edit/umxkp3?file=src%2Fexample.tsx, directly through a property?

Currently, this functionality isn't included in the Fluent UI TabList specs. I will check with our Design Team to see if there has been any interest in adding this feature and if they're open to include it into the spec. In the meantime, you may need to rely on custom styling as a workaround.

[mgostisha]

@dmytrokirpa yup! that's exactly how I've implemented it in our app for the time being as well. I'm fine with it, the only worry would be the internal implementation of the tab indicator changing and breaking the style overrides. If it's not supported officially that's okay, but wanted to submit a request for consideration.