[Feature]: Add additional context variable to <FluentProvider> to allow for v9 / v8 interop

[anenger]

Library

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

Describe the feature that you would like added

We have a project that is currently migrating from Fluent v8 to Fluent v9, and some downstream hosts do not support Fluent v9 as of yet. Therefore, we need an easy way to check if there is a Fluent v9 <FluentProvider> so that themes, styles, etc will render properly. Attempting to use useThemeClassName() !== "" does not work.

Exposing the theme context, like { theme } = useFluent() would work for this scenario.

I believe react-components/react-shared-contexts/src/ThemeContext/ThemeContext.ts has the context that we need to support this.

Have you discussed this feature with our team

No response

Additional context

No response

Validations

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

Priority

Normal

[micahgodbolt]

i had success testing for v8 vs v9 themes using these context values:

https://codesandbox.io/p/sandbox/testing-for-v8-and-v9-themes-oclepm?file=%2Fsrc%2FApp.tsx%3A21%2C1-21%2C91

[anenger]

@micahgodbolt I couldn't get this to work in our repo - I think unfortunately the babel plugin requirement is a blocker for us. Is it possible to detect the v9 theme without that?

[anenger]

Codesandbox solution will work for our needs - the issue is on our side.