Feature: "isComponentInteractive" utility function

[varholak-peter]

Describe the feature that you would like added

It would be useful to provide a utility function which could standardise whether a component is interactive or not.

What is "interactive"?

For components "interactive" means:

• the styles applied to the component when the user interacts with it or when the component can be interacted with
• functional ability to dispatch events or call functions provided via props

These two aspects are to some degree connected. When the component has some functional behaviour it should represent that visually, at the same time when the component doesn't present itself as interactive users won't expect it to have functionality attached.

Why a utility function?

Ideally we want to standardise the way interactive styles are applied by default, while still giving end users the ability to override it as they see fit. This should cover most use cases with the added flexibility for special cases.

Proposed API

const isComponentInteractive = (state: ComponentState): boolean => {
  // Explicit interactive override.
  if (state.interactive === false) {
    return false
  }
  
  return Boolean(state.interactive ?? state.onClick ?? state.onMouseDown ?? state.onMouseUp ...)
}

This API counts on an interactive prop for components, as well as falling back to looking for standard handlers. If either the interactive prop is true or at least one of the specified handlers are found the component is deemed interactive and we can apply styles or other behaviour.

Handlers

This is a list of handlers that come to my mind when considering interactiveness:

- onAuxClick
- onClick
- onContextMenu
- onDoubleClick
- onDrag
- onFocus
- onMouseDown
- onMouseOver
- onMouseUp
- onPointerDown
- onPointerOver
- onPointerOut
- onTouchEnd
- onTouchStart

This is probably not a final list for now, but a rough approximation of all the possible event handlers a component could have defined to be considered "interactive" visually.

What component or utility would this be added to

Components such as @fluentui/react-card would benefit from this, as would any where we might need to consider stylistic or functional behaviour based on component interactiveness.

Have you discussed this feature with our team, and if so, who

@andrefcdias

[ling1726]

This makes many assumptions for our end users on what 'interactive' means. Do we really want to take such a strong opinion on this ? Normally avoiding footguns for users is good, but this is a bit too general IMO

For example not all users would consider hover or click as interaction. Instead of letting them have the first choice, they need to explicitly override ours

[varholak-peter]

Yes you are correct, but the alternative is to either provide a component, such as the card, without styles like focus and hover or always provide the styles for focus and hover.

This approach gives us a somewhat opinionated solution for what should be a majority of cases but still retain control for users who want to have extra control, either by using the interactive prop or alternatively overriding styles.

I would like to avoid a scenario where every time a user adds an onClick on the card they also need to pass interactive for default styling, not to mention it is not immediately obvious that interactive applies only to styles and does not affect the functionality in any way.

[msft-fluent-ui-bot]

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.