v9: Each component should have classname?

[layershifter]

Currently each component & slot in Fluent N* has own classname.

• v8 follows ms-Text
• v0 follows ui-text

Do we want to have the same in v9?

Should be covered with conformance test (similar to N*).

Motivation

• allows to build selectors for component parts (:hover)
• simplifies understanding of DOM tree

Components to review post decision

• react-card - react-card - CardPreview top padding fix #20030

[theerebuss]

Given that this is still pending discussion, I went with fluentui-react-<component> for react-card.(#20030).
Linking the PR here and changing the description for tracking purposes once we come to a consensus.
#20030

[layershifter]

We had an offline sync about this issue. We agreed:

• implement conformance test to ensure that it's consistent, i.e. have such classes on every component
• use fui- prefix instead of ms- or ui- to avoid collisions with v0/v8
  • do not include version into prefix

Opened questions:

• Should we have the same thing for slots? I.e. each slot will have fui-Component-slot class

[JustSlone]

Didn't realize this during the discussion, but I think we should include "r" (for react) in the prefix as well to avoid collision with other fluent UI libraries such as web components.

fur- or fuir- or fr- would all be fine. Probably should avoid fuReact- 😄

On the slots question, I think this is reasonable, though I wonder if this is something we could add later when we have a more explicit need. I guess we couldn't do this for the root slot right since it would be fur-Button-root instead of fur-Button.

btw fur is nice as I'm pretty sure Fluent UI React Native's shorthand is furn

[layershifter]

Didn't realize this during the discussion, but I think we should include "r" (for react) in the prefix as well to avoid collision with other fluent UI libraries such as web components.

As I know the single other web flavor is web-components, but there classes are non-sense as HTML is rendered inside shadow DOM:

This looks to me like a premature change... 🙄 Fabric/v8 stays with ms- which is even more specific 😀