-
Notifications
You must be signed in to change notification settings - Fork 55
feat(dropdown): align, position, offset props + automatic position #1312
Conversation
docs/src/examples/components/Dropdown/Variations/DropdownExamplePosition.shorthand.tsx
Outdated
Show resolved
Hide resolved
packages/react/src/lib/positioner/createPopperReferenceProxy.ts
Outdated
Show resolved
Hide resolved
5991235
to
b6a1063
Compare
Codecov Report
@@ Coverage Diff @@
## master #1312 +/- ##
==========================================
+ Coverage 73.57% 73.59% +0.01%
==========================================
Files 787 787
Lines 5885 5888 +3
Branches 1734 1717 -17
==========================================
+ Hits 4330 4333 +3
Misses 1549 1549
Partials 6 6
Continue to review full report at Codecov.
|
b6a1063
to
57fdcee
Compare
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.
docs/src/examples/components/Popup/Variations/PopupExamplePosition.shorthand.tsx
Outdated
Show resolved
Hide resolved
docs/src/examples/components/Popup/Variations/PopupExamplePosition.shorthand.tsx
Show resolved
Hide resolved
docs/src/examples/components/Popup/Variations/PopupExamplePosition.shorthand.tsx
Outdated
Show resolved
Hide resolved
eb45c51
to
686590f
Compare
@miroslavstastny I am aware of that. I was debugging popper code and noticed they recreate the popper instance (responsible for calculating styles that need to be applied for positioning elements) almost (they use debounce) every time there is a scroll/resize event: https://github.com/FezVrasta/popper.js/blob/36cc6c66e55f716232166c9a5725d8d08c4ec338/packages/popper/src/utils/setupEventListeners.js#L38 . This is where the jump comes from. I think this can cause perf issues especially when trying to:
The jump is quite visible in our docs because there is a popper instance for every Dropdown example even if they are closed. This is due to the fact that for MITIGATION:I think I was able to mitigate this by adding ALTERNATIVE:I'm starting to think the simpler solution for PROS:
CONS:
|
|
010ba8e
to
27c507a
Compare
if (process.env.NODE_ENV !== 'production') { | ||
if (knobs[knob.name]) { | ||
throw new Error(`Knob with name "${knob.name}" has been already registered`) | ||
setKnobs(prevKnobs => { |
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.
fix for the problem with using a different names for the same knob, thx @layershifter
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.
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.
reverted so that I get unblocked, thanks, @layershifter let's tackle this fix in separate PR as the one proposed introduces the issue @miroslavstastny is mentioning
this perf issue was fixed by #1358 |
…at/dropdown-position
…at/dropdown-position
…at/dropdown-position
docs/src/examples/components/Dropdown/Variations/DropdownExamplePosition.shorthand.tsx
Outdated
Show resolved
Hide resolved
docs/src/examples/components/Popup/Variations/PopupExamplePosition.shorthand.tsx
Outdated
Show resolved
Hide resolved
packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts
Outdated
Show resolved
Hide resolved
…tion.shorthand.tsx Co-Authored-By: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
docs/src/examples/components/Popup/Variations/PopupExamplePosition.tsx
Outdated
Show resolved
Hide resolved
Codecov Report
@@ Coverage Diff @@
## master #1312 +/- ##
==========================================
+ Coverage 73.57% 73.59% +0.01%
==========================================
Files 787 787
Lines 5885 5888 +3
Branches 1734 1717 -17
==========================================
+ Hits 4330 4333 +3
Misses 1549 1549
Partials 6 6
Continue to review full report at Codecov.
|
feat(dropdown): align, position, offset props + automatic position
BREAKING CHANGES MITIGATION
Replace
Dropdown
variables:➡️borderRadius
containerBorderRadius
➡️openBorderRadius
openAboveContainerBorderRadius
andopenBelowContainerBorderRadius
➡️listBorderRadius
aboveListBorderRadius
andbelowListBorderRadius
This PR tackles:
align
,position
,offset
props forDropdown
componentDropdown
resultsTODO:
src/lib/positioner
Positioner
helper component toPopup
andDropdown
positionerHelper
(move fromPopup-test.tsx
to dedicated file)Dropdown
trigger and list of resultsany ideas?