feat(popover): dynamic height management #1772
Conversation
| isOpen ? 'block' : 'pointer-events-none opacity-0', | ||
| hasPopover && 'p-lg' | ||
| )} | ||
| {...props} |
There was a problem hiding this comment.
This is to enable this component to be used asChild (to merge its props with its parent props)
It's important to merge Dropdown.Popover into Dropdown.Items through asChild, as the first one is an alias of Popover.Content it has role="dialog" but it should have role="listbox" instead as the Trigger here is a combobox role.
Plus, the overflow (scrollbar) is attached to the Popover.Content, so not merging them means keyboard navigation will not auto-scroll on highlighted items (unless we do it programatically, which I prefer to avoid).
The call to getMenuProps() must be done after {...props} as we want the props from downshift to erase the one from Radix (Popover)
Powerplex
force-pushed
the
adjust-styles-dropdown
branch
from
66ef549 to
c446996
Compare
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #1772 +/- ##
==========================================
- Coverage 97.98% 97.98% -0.01%
==========================================
Files 693 693
Lines 4902 4901 -1
Branches 1785 1785
==========================================
- Hits 4803 4802 -1
Misses 99 99 ☔ View full report in Codecov by Sentry. |
| @@ -17,7 +17,7 @@ interface TriggerProps { | |||
| const styles = cva( | |||
| [ | |||
| 'flex w-full cursor-pointer items-center justify-between', | |||
| 'min-h-sz-44 rounded-lg bg-surface px-lg', | |||
| 'min-h-sz-44 rounded-lg bg-surface text-on-surface px-lg', | |||
There was a problem hiding this comment.
We forgot to specify the text color, so whenever the Dropdown was used inside a success-container for example, it has a on-success-container text color, etc
Powerplex
force-pushed
the
adjust-styles-dropdown
branch
from
c446996 to
ecda003
Compare
TYPE(SCOPE): TITLE
TASK: #1771
Dynamic height resizing on Popover.
It allows
Dropdown.Popoverto optimize height dynamically and display as many items as possible.Types of changes
Enregistrement.de.l.ecran.2023-12-19.a.19.02.40.mov