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

To help you get started, we’ve selected a few @fluentui/react examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github microsoft / fluent-ui-react / docs / src / examples / components / List / Types / ListExampleNavigable.shorthand.steps.ts View on Github external
item: (itemIndex: number) =>
    `.${List.className} .${List.Item.className}:nth-of-type(${itemIndex})`,
}
github microsoft / fluent-ui-react / docs / src / examples / components / List / Types / ListExampleSelectable.shorthand.steps.ts View on Github external
import { List } from '@fluentui/react'

const selectors = {
  list: `.${List.className}`,
  item: (itemIndex: number) =>
    `.${List.className} .${List.Item.className}:nth-of-type(${itemIndex})`,
}

const config: ScreenerTestsConfig = {
  themes: ['teams', 'teamsDark', 'teamsHighContrast'],
  steps: [
    builder =>
      builder
        .hover(selectors.item(2))
        .snapshot('Highlights an item')
        .click(selectors.item(2))
        .snapshot('Selects an item')
        .hover(selectors.item(3))
        .snapshot('Highlights another item'),
    (builder, keys) => builder.keys('body', keys.tab).snapshot('Focuses item'),