Library

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

Describe the feature that you would like added

It would be great to have linter rules to avoid common mistakes with using Fluent UI. I'm creating this feature request to also track ideas for linter rules.

https://github.com/microsoft/fluentui/tree/master/packages/eslint-plugin and https://github.com/microsoft/fluentui/tree/master/tools/eslint-rules exist, but both seem to be designed for internal development rather than act as public packages.

Possible rules

• Avoid using bundleIcon inside a React component, move it to the module scope (already written)
• Don't use Fluent UI 8 components that have a corresponding Fluent UI 9 equivalent (already written)
• Ensure that <Dialog> either wraps <DialogSurface> or a forwardRef component
• Ensure that <Tooltip> wraps a forwardRef component and supports aria-label, onPointerEnter, etc as props. (unless the tooltip is inaccessible)
• Prefer using slot objects (such as { className: 'foo', children: <Icon /> }) over divs (such as <div className="foo"><Icon /></div>)
• Prefer using typographyStyles over fontSize + lineHeight tokens
• Prefer using tokens over hardcoded fontSize + lineHeight values
• Ensure the variables passed to bundleIcon are named "*Filled" and "*Regular"
• Don't set both disabled and disabledFocusable

Have you discussed this feature with our team

Martin Hochel

Additional context

I've written some linter rules already and would be happy to upstream them.

Validations

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

Priority

Low