-
Notifications
You must be signed in to change notification settings - Fork 38
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
New popover #1506
New popover #1506
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good!
// max-height must be on the outermost element for virtual scroll | ||
maxBlockSize: | ||
'calc((var(--iui-component-height) - 1px) * 8.5)', | ||
overflowY: isOverflowOverlaySupported() ? 'overlay' : 'auto', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
since we are now using iui-menu
as the outer element, we don't need to set these inline styles for virtualization
while writing this, i also realized that we can remove iui-scroll
and make it the default behavior. this will fix #1301 as well. i will create a separate PR for it
Co-authored-by: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com>
packages/itwinui-react/src/core/Table/filters/DateRangeFilter/DatePickerInput.tsx
Show resolved
Hide resolved
Co-authored-by: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com>
Co-authored-by: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com>
Ohh, sorry, I missed this message. I reviewed and approved it. There were a few parts that involved concepts that I don't understand too well. But for the parts that I did understand, I reviewed them better. |
Changes
Continued from #1392
Replaced old tippy-based private
Popover
component with new floatingui-based privateusePopover
hook and publicPopover
component.Popover
defaults torole=dialog
and does some focus management, whereasusePopover
gives more control and is useful for internal components that bring their own logic for roles and focus management and custom triggers. The publicPopover
is also used in some internal components that do not need such custom logic.Removed old
popover.scss
; it was mainly used for reverting tippy styles (which don't exist anymore). The new popover does not need any CSS but also does not come with any animations (can be added in the future).The public
Popover
has anapplyBackground
prop which converts it into a Surface. Since this is a new component, I've decided not expose all floating-ui props to keep API surface small; we can re-evaluate in the future based on user requests.Testing
Thoroughly tested all affected components in storybook and vite playground.
Here's a screen recording showing various components in action:
Screen.Recording.2023-09-08.at.12.15.36.PM.mov
Updated all affected unit tests.
Docs
Changesets added. Pending documentation for
Popover
(future PR).