fix(floating-ui): improve floating element performance #8409

driskull · 2023-12-12T19:04:21Z

Related Issue: #7979 #8214 #8386 #8419 #5697

Summary

reverts fix: floating components will now get an initial position even if they are not opened #8001
- Keeps doc updates
reverts partially fix: dragging floating ui components #8230
- Keeps drag classes that are setting overflow:hidden when a drag is occurring.
- Keeps roundByDPR floating-ui fix. https://floating-ui.com/docs/misc#subpixel-and-accelerated-positioning
Hides overflow for calcite-sortable--chosen class
Only sets top and left on floating element once positioned. This fixes native drag and drop issue

…n if they are not opened

driskull · 2023-12-12T22:42:35Z

packages/calcite-components/src/utils/floating-ui.ts

@@ -489,8 +494,6 @@ export function connectFloatingUI(

    // initial positioning based on https://floating-ui.com/docs/computePosition#initial-layout
    position: component.overlayPositioning,
-    top: "0",


@jcfranco do you know why this was here?

It was added here: e220686#diff-3c419c81de1cc684c4d1d859881782bc87d089da410675b5af3f6c468b95ef13R458

I'd like to remove this to fix the drag and drop positioning issue. #7979

Instead, this is only set once an actual position occurs.

It's based on the Floating UI computedPosition doc.

Looks like that doc says only the position needs to be there initially so the top and left can happen later.

jcfranco

🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎
🏎🎈🎈🎈🎈🏎🎈🏎🏎🏎🏎🏎🎈🏎🎈🎈🎈🎈🏎🏎🎈🎈🎈🏎🏎🎈🎈🏎🏎🎈🏎🏎🏎🎈🏎🎈🎈🎈🎈🏎
🏎🎈🏎🏎🎈🏎🎈🏎🏎🏎🏎🏎🎈🏎🎈🏎🏎🏎🏎🎈🏎🏎🏎🏎🎈🏎🏎🎈🏎🎈🎈🏎🎈🎈🏎🎈🏎🏎🏎🏎
🏎🎈🎈🎈🎈🏎🎈🏎🏎🎈🏎🏎🎈🏎🎈🎈🎈🏎🏎🏎🎈🎈🏎🏎🎈🏎🏎🎈🏎🎈🏎🎈🏎🎈🏎🎈🎈🎈🏎🏎
🏎🎈🏎🏎🎈🏎🎈🏎🎈🏎🎈🏎🎈🏎🎈🏎🏎🏎🏎🏎🏎🏎🎈🏎🎈🏎🏎🎈🏎🎈🏎🏎🏎🎈🏎🎈🏎🏎🏎🏎
🏎🎈🏎🏎🎈🏎🏎🎈🏎🏎🏎🎈🏎🏎🎈🎈🎈🎈🏎🎈🎈🎈🏎🏎🏎🎈🎈🏎🏎🎈🏎🏎🏎🎈🏎🎈🎈🎈🎈🏎
🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎🏎

Do we have a perf impact issue we could link to for this PR?

jcfranco · 2023-12-13T09:00:07Z

packages/calcite-components/src/utils/floating-ui.ts

@@ -489,8 +494,6 @@ export function connectFloatingUI(

    // initial positioning based on https://floating-ui.com/docs/computePosition#initial-layout
    position: component.overlayPositioning,
-    top: "0",


It's based on the Floating UI computedPosition doc.

driskull · 2023-12-13T18:26:54Z

Do we have a perf impact issue we could link to for this PR?

No, can we get one? cc @paulcpederson

packages/calcite-components/src/components/dropdown/dropdown.tsx

jcfranco · 2023-12-13T18:57:19Z

@driskull Could you also check if this introduces a regression for #5697? 🙇‍♂️

paulcpederson · 2023-12-13T19:20:34Z

#8419

driskull · 2023-12-13T19:39:11Z

@driskull Could you also check if this introduces a regression for #5697? 🙇‍♂️

@jcfranco It seems like this would be a regression here. This makes sense because the component doesn't get its position necessary for a proper animation until after its opened. Once it has been opened once the position is there and the correct animation takes place.

I think we'll have to accept this for now. Thoughts?

jcfranco · 2023-12-13T19:46:43Z

I think we'll have to accept this for now. Thoughts?

Agreed. Let's reopen the issue and comment on the reasoning. cc @geospatialem

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-design-tokens: 2.1.0</summary> ## [2.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-design-tokens@2.0.0...@esri/calcite-design-tokens@2.1.0) (2023-12-19) ### Features * **font tokens:** Add font family fallbacks ([#8389](#8389)) ([b2fd255](b2fd255)) * Update tokens for better documentation ([#8395](#8395)) ([ff19630](ff19630)) ### Bug Fixes * **color tokens:** Fix errors in schema ([#8446](#8446)) ([f36a90e](f36a90e)) * **color-context tokens:** Only apply when `.calcite-mode-auto` is applied ([#8344](#8344)) ([19de817](19de817)) * Replace "\n" to support Windows for tokens output ([#8352](#8352)) ([02cf5d5](02cf5d5)) </details> <details><summary>@esri/calcite-components: 2.1.0</summary> ## [2.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.0.0...@esri/calcite-components@2.1.0) (2023-12-19) ### Features * Add `validation-message` and `validation-icon` attributes to form components for new internal `calcite-input-message` ([#8305](#8305)) ([a554cfd](a554cfd)) * **dropdown-item:** Add disabled support ([#8312](#8312)) ([4c311c6](4c311c6)) * **list-item:** Add calciteListItemToggle event. ([#8433](#8433)) ([1d2fa04](1d2fa04)) * **list:** Add `calciteListDragStart` and `calciteListDragEnd` events for when a drag starts and ends. ([#8361](#8361)) ([1314605](1314605)) * **list:** Add drag event details to `calciteListDragStart` and `calciteListDragEnd` events ([#8438](#8438)) ([e199c08](e199c08)) * Provide legacy CSS custom props for backwards compatibility ([#8355](#8355)) ([b0f063e](b0f063e)) ### Bug Fixes * **action-menu:** Filter hidden or disabled actions via keyboard. ([#8336](#8336)) ([11c0007](11c0007)) * **action-menu:** Fix closing action menu after a drag occurs ([#8339](#8339)) ([dcb8548](dcb8548)) * **action-menu:** Keep internal popover open property in sync ([#8387](#8387)) ([38dff7c](38dff7c)) * **dropdown-item:** Avoid hover/active styling when disabled ([#8398](#8398)) ([35817dc](35817dc)) * **floating-ui:** Improve floating element performance ([#8409](#8409)) ([4d8cfb8](4d8cfb8)) * **input-date-picker:** Ensure range input toggling is consistent ([#8414](#8414)) ([cd92586](cd92586)) * **input-date-picker:** No longer emits redundant change event ([#8341](#8341)) ([cd5b92b](cd5b92b)) * **input-date-picker:** Respect the numberingSystem property when rendering the input ([#8383](#8383)) ([395b538](395b538)) * **list-item:** Drag grid cell should be accessible via arrow keys. ([#8353](#8353)) ([2718ab3](2718ab3)) * **menu-item:** Improve keyboard navigability when `href` populated ([#8408](#8408)) ([5b44798](5b44798)) * **modal:** Ensure document overflow styles are properly restored when multiple modals are closed/removed ([#8390](#8390)) ([f2c6b09](f2c6b09)) * Replace "\n" to support Windows for tokens output ([#8352](#8352)) ([02cf5d5](02cf5d5)) * **shell-panel:** Adds border at the start when slotted in `panel-end` ([#8314](#8314)) ([2d1a1e2](2d1a1e2)) * **shell, shell-panel:** Support resizing shell panel when there is an iframe slotted in shell content ([#8317](#8317)) ([e0f69c9](e0f69c9)) * **stepper:** Emits `calciteStepperItemChange` event when switched to first step ([#8422](#8422)) ([508979f](508979f)) * **table-cell:** Fix background css variable ([#8439](#8439)) ([9e5c59b](9e5c59b)) * **tab:** Prevent vertical scrollbar on content pane when the height of outer elements are specified ([#8399](#8399)) ([9e6d901](9e6d901)) * Use Stencil watchers instead of global attributes util ([#8407](#8407)) ([c531d81](c531d81)) ### Dependencies * The following workspace dependencies were updated * devDependencies * @esri/calcite-design-tokens bumped from ^2.1.0-next.1 to ^2.1.0 </details> <details><summary>@esri/calcite-components-angular: 2.1.0</summary> ## [2.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.0.0...@esri/calcite-components-angular@2.1.0) (2023-12-19) ### Miscellaneous Chores * **@esri/calcite-components-angular:** Synchronize undefined versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^2.1.0-next.12 to ^2.1.0 </details> <details><summary>@esri/calcite-components-react: 2.1.0</summary> ## [2.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.0.0...@esri/calcite-components-react@2.1.0) (2023-12-19) ### Miscellaneous Chores * **@esri/calcite-components-react:** Synchronize undefined versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^2.1.0-next.12 to ^2.1.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

revert: fix: floating components will now get an initial position eve…

e544969

…n if they are not opened

github-actions bot assigned driskull Dec 12, 2023

github-actions bot added the chore Issues with changes that don't modify src or test files. label Dec 12, 2023

driskull added 5 commits December 12, 2023 11:44

cleanup

bef79b8

fix tests

6d7268f

cleanup

371a1eb

cleanup

beda1b7

Merge branch 'main' into dris0000/revert-8001

4f6853b

driskull commented Dec 12, 2023

View reviewed changes

driskull changed the title ~~revert: fix: floating components will now get an initial position even if they are not opened~~ fix(floating-ui): improve floating element performance. Dec 12, 2023

driskull changed the title ~~fix(floating-ui): improve floating element performance.~~ fix(floating-ui): improve floating element performance Dec 12, 2023

driskull marked this pull request as ready for review December 12, 2023 23:08

driskull requested a review from a team as a code owner December 12, 2023 23:08

driskull requested a review from jcfranco December 12, 2023 23:08

driskull added 2 - in development Issues that are actively being worked on. pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Dec 12, 2023

driskull added 2 commits December 13, 2023 08:44

remove max-content

2517338

Merge branch 'main' into dris0000/revert-8001

054d20c

github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Dec 13, 2023

driskull added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Dec 13, 2023

jcfranco approved these changes Dec 13, 2023

View reviewed changes

jcfranco reviewed Dec 13, 2023

View reviewed changes

packages/calcite-components/src/components/dropdown/dropdown.tsx Show resolved Hide resolved

jcfranco removed the chore Issues with changes that don't modify src or test files. label Dec 13, 2023

driskull mentioned this pull request Dec 13, 2023

Tooltips no longer move along x/y axis when transitioning to the open state for the first time #5697

Closed

driskull merged commit 4d8cfb8 into main Dec 13, 2023
20 checks passed

driskull deleted the dris0000/revert-8001 branch December 13, 2023 19:49

github-actions bot added this to the 2023 December Priorities milestone Dec 13, 2023

calcite-admin mentioned this pull request Dec 13, 2023

chore: release main #8329

Merged

calcite-admin mentioned this pull request May 28, 2024

chore: release hotfix #9438

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(floating-ui): improve floating element performance #8409

fix(floating-ui): improve floating element performance #8409

driskull commented Dec 12, 2023 •

edited

Loading

driskull Dec 12, 2023

driskull Dec 12, 2023

jcfranco Dec 13, 2023

driskull Dec 13, 2023

jcfranco left a comment

jcfranco Dec 13, 2023

driskull commented Dec 13, 2023

jcfranco commented Dec 13, 2023

paulcpederson commented Dec 13, 2023

driskull commented Dec 13, 2023

jcfranco commented Dec 13, 2023

fix(floating-ui): improve floating element performance #8409

fix(floating-ui): improve floating element performance #8409

Conversation

driskull commented Dec 12, 2023 • edited Loading

Summary

driskull Dec 12, 2023

Choose a reason for hiding this comment

driskull Dec 12, 2023

Choose a reason for hiding this comment

jcfranco Dec 13, 2023

Choose a reason for hiding this comment

driskull Dec 13, 2023

Choose a reason for hiding this comment

jcfranco left a comment

Choose a reason for hiding this comment

jcfranco Dec 13, 2023

Choose a reason for hiding this comment

driskull commented Dec 13, 2023

jcfranco commented Dec 13, 2023

paulcpederson commented Dec 13, 2023

driskull commented Dec 13, 2023

jcfranco commented Dec 13, 2023

driskull commented Dec 12, 2023 •

edited

Loading