Use Floating UI for MenuItem submenus

[radium-v]

Pull Request

📖 Description

Replaces the methods used to position submenus for menu-item with Floating UI.

Changes the updateSubmenu method to be public to allow for overriding the default positioning behavior.

🎫 Issues

👩‍💻 Reviewer Notes

📑 Test Plan

All tests for the menu-item and menu components should pass as expected.

✅ Checklist

General

• I have included a change request file using $ yarn change
• I have added tests for my changes.
• I have tested my changes.
• I have updated the project documentation to reflect my changes.
• I have read the CONTRIBUTING documentation and followed the standards for this project.

Component-specific

• I have added a new component
• I have modified an existing component
• I have updated the definition file
• I have updated the configuration file

⏭ Next Steps

[chrisdholt]

Can we dig in here on the value of an internal element like this?

[radium-v]

Since the only thing we can confirm about the submenu is that it's an element with a role of menu, I think it's safer and less obtrusive to handle the positioning in the menu-item's shadow rather than on the slotted submenu element itself.

Here are some alternatives:

• Setting the positioning styles with the style attribute on the slotted submenu can cause conflicts with specificity and author intent.
• Attaching a stylesheet to the nested element would address the specificity problem, but it would only be possible if the submenu is guaranteed to have a FAST controller ($fastController) to attach the styles.

[chrisdholt]

I agree this is probably a preferred API, though I'm certainly curious of others thoughts. Ideally we can document the intent as part of the readme, or somewhere else to help convey this. I think given the alternatives, this is the best method of providing positioning without needing to get prescriptive with whats slotted in.

[EisenbergEffect]

I like it.

[chrisdholt]

Thanks @radium-v!