ni / nimble

The NI Nimble Design System
https://nimble.ni.dev
MIT License
32 stars 8 forks source link

Confine rich-text mention listbox to viewport #2236

Closed m-akinc closed 2 months ago

m-akinc commented 3 months ago

Pull Request

🤨 Rationale

Fixes #2217

👩‍💻 Implementation

Upon opening, the rich-text mention listbox now sets a availableViewportHeight property based on the distance between the bottom of the anchor element and the bottom of the window. Like with select and combobox, that property is bound to a CSS variable, which factors into the max-height for the listbox. I had to parameterize that CSS calculation with a couple new CSS variables to account for differences between the mention listbox and select/combobox.

Also, incidental to this change, I'm modifying the other mention listbox test that was disabled due to intermittency (#1891) in a way that might fix the intermittency. I'm re-enabling in hopes that it does.

🧪 Testing

Created a new test for the rich-text mention listbox, plus modified the existing select test to ensure that the test wasn't passing due to the default 10.5 item height limit.

✅ Checklist

m-akinc commented 3 months ago

@mollykreis could I get a buddy, please?