This tracks implementing the slot class names RFC:

• RFC: Conventions for static class names on slots #21206

Work required:

• Add helper type:

  export type ClassNames<Slots> = {
    [SlotName in keyof Slots]-?: string;
  };

  • In react-utilities: Adding helper type to define slot class names #21933
• Add conformance test to verify class names
• Add {component}ClassNames export, and static class names to the slots of:
  • Component template: use{{componentName}}Styles.ts.hbs
  • @fluentui/react-accordion - Accordion, AccordionHeader, AccordionItem, AccordionPanel
  • @fluentui/react-avatar - Avatar
  • @fluentui/react-badge - Badge, CounterBadge, PresenceBadge
  • @fluentui/react-button - Button, CompoundButton, MenuButton, SplitButton, ToggleButton
    • In Button: Exporting class names of individual slots #20977
  • @fluentui/react-card - Card, CardFooter, CardHeader, CardPreview
  • @fluentui/react-checkbox - Checkbox
  • @fluentui/react-combobox - Combobox, ComboButton, Listbox, Option, OptionGroup
  • @fluentui/react-dialog - Dialog
  • @fluentui/react-divider - Divider
  • @fluentui/react-image - Image
  • @fluentui/react-input - Input
  • @fluentui/react-label - Label
  • @fluentui/react-link - Link
  • @fluentui/react-menu - MenuDivider, MenuGroup, MenuGroupHeader, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuList, MenuPopover, MenuSplitGroup
  • @fluentui/react-popover - PopoverSurface
  • @fluentui/react-provider - FluentProvider
  • @fluentui/react-radio - Radio, RadioGroup
  • @fluentui/react-select - Select
  • @fluentui/react-slider - Slider
  • @fluentui/react-spinbutton - SpinButton
  • @fluentui/react-spinner - Spinner
  • @fluentui/react-switch - Switch
    • In react-utilities: Adding helper type to define slot class names #21933
  • @fluentui/react-tabs - Tab, TabList
  • @fluentui/react-text - Body, Caption, Display, Headline, LargeTitle, Subheadline, Text
  • @fluentui/react-toolbar - Toolbar, ToolbarButton, ToolbarDivider
  • @fluentui/react-tooltip - Tooltip
• Export all static class name objects from root of @fluentui/react-components