How to use the @fluentui/react.Button.className function in @fluentui/react

  steps: [builder => builder.hover(`.${Button.className}`).snapshot('Shows tooltip')],
}

import { Dropdown, Button } from '@fluentui/react'

const selectors = {
  toggleIndicator: `.${Dropdown.slotClassNames.toggleIndicator}`,
  item: (itemIndex: number) => `.${Dropdown.slotClassNames.itemsList} li:nth-child(${itemIndex})`,
  popupTrigger: `.${Button.className}`,
}

const config: ScreenerTestsConfig = {
  themes: ['teams', 'teamsDark', 'teamsHighContrast'],
  steps: [
    builder =>
      builder
        .click(selectors.popupTrigger)
        .click(selectors.toggleIndicator)
        .hover(selectors.item(2))
        .snapshot('Prepares to select item out of popup.')
        .click(selectors.item(2))
        .snapshot('Item should be selected.'),
  ],
}

import { Button, ChatMessage, ChatItem } from '@fluentui/react'

const classNames = {
  threadedMessage: {
    thread: `${ChatMessage.className}__thread`,
    threadBody: `${ChatMessage.className}__thread-body`,
    innerContent: `${ChatMessage.slotClassNames.content}-inner`,
    author: `${ChatMessage.slotClassNames.author}-inner`,
    timestamp: `${ChatMessage.slotClassNames.timestamp}-inner`,
  },
  threadReplies: {
    trigger: `${Button.className}__reply`,
    message: `${ChatMessage.className}__reply`,
    gutter: `${ChatItem.className}__reply__gutter`,
    chatItem: `${ChatItem.className}__reply`,
    chatItemMessage: `${ChatItem.slotClassNames.message}-reply`,
  },
  replyEditor: `${ChatMessage.className}__reply-editor`,
}

export default classNames

minWidth: '100%',
        boxShadow: 'none',
        border: 0,
        backgroundColor: siteVariables.colorScheme.brand.foreground,
        borderRadius: 'unset',
        marginBottom: 0,

        '&:focus': {
          backgroundColor: siteVariables.colorScheme.brand.foreground,
        },

        '&:hover': {
          backgroundColor: siteVariables.colorScheme.brand.foreground,
        },

        [`& .${Button.className} .${Icon.className}`]: {
          color: siteVariables.colorScheme.default.background,
        },
      }),
      header: ({ props: p, theme: { siteVariables } }) => ({

  steps: [builder => builder.click(`.${Button.className}`).snapshot('RTL: Shows menuButton')],
}

import { Button } from '@fluentui/react'

const button = `.${Button.className}`

const getScreenerSteps = (): ScreenerSteps => [
  builder => builder.hover(button).snapshot('Hovers the first button'),
  builder => builder.click(button).snapshot('Clicks the first button'),
  (builder, keys) => builder.keys(button, keys.tab).snapshot('Focuses on the second button'),
]

export default getScreenerSteps

  steps: [builder => builder.hover(`.${Button.className}`).snapshot('RTL: Shows tooltip')],
}

import { Button } from '@fluentui/react'

const button = `.${Button.className}`

const getScreenerSteps = (): ScreenerSteps => [
  builder => builder.click(button).snapshot('Clicks the trigger button'),
]

export default getScreenerSteps

import { Button } from '@fluentui/react'

const selectors = {
  triggerButton: `.${Button.className}[title*="Open popup"]`,
  closeButton: `.${Button.className}[title*="Close"]`,
}

const config: ScreenerTestsConfig = {
  steps: [
    builder =>
      builder
        .click(selectors.triggerButton)
        .snapshot('Click on the trigger (opens popup)')
        .click(selectors.closeButton)
        .snapshot('Click on close button (closes popup)'),
  ],
}

export default config

    builder => builder.hover(`.${Button.className}`).snapshot('Custom target: Shows tooltip'),
  ],