feat(react-aria): creates ARIAButtonComponent type #24893
Closed
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Current Behavior
At the moment main usages for
ARIAButton
are:Button
component itselfAccordionHeader
button slotPopoverTrigger
,MenuTrigger
,DialogTrigger
)When those usages are combined (which is the case for Triggers +
Button
normally), it means that multiple invocations ofuseARIAButtonProps
hook will be provided (one from the Button itself, and one from the trigger that encapsulates theButton
)New Behavior
Inspired on
FluentTriggerComponent
fluentui/packages/react-components/react-utilities/src/trigger/types.ts
Lines 15 to 17 in 92bc886
This PR Provides proper flag mechanism to ensure that
useARIAButtonProps
doesn't need to add more handlers on elements that already handle button properties correctly by adding proper typeARIAButtonComponent
.Main usage for this will be to ensure that a given component already implements all the proper behaviours of an
ARIAButton
, this follows the same idea provided on Trigger components, here'sMenuTrigger
as an example:fluentui/packages/react-components/react-menu/src/components/MenuTrigger/MenuTrigger.tsx
Lines 7 to 18 in 92bc886
This
isFluentTriggerComponent = true
indicates to other triggers that that specific element is a trigger and can be properly concatenated, allowing the usage of multiple trigger in a single child without causing conflict.Following this approach
Button
will be like: