Skip to content
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

breaking(Popup): switch to Popper.js #3532

Merged
merged 5 commits into from
Mar 25, 2019
Merged

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented Mar 24, 2019

BREAKING CHANGES

This PR removes our positioning logic and uses react-popper instead.

Removal of keepInViewport

This prop was removed and will be introduced again later.

Removal of horizontalOffset & verticalOffset, use offset now

Popper.js uses more flexible offset, please follow their docs.

<Popup
-  horizontalOffset={50}
-  verticalOffset={50}
+ offset='50, 50'
/>

(!) Offset in Popper works differently than horizontalOffset & verticalOffset:

For length is intended the main axis relative to the placement of the popper.
This means that if the placement is top or bottom, the length will be the width. In case of left or right, it will be the height.

Changes in behavior

Popup changes its position more accurate now.

Before

popup-before

After

popup-after


Fixes #1126.

Before

popup-fixed-bug

After

popup-fixed-fix

Fixes #3226

After

popup-resize-fix

Fixes #3505

Fixes #3478

Before

popup-reposition-before

After

popup-reposition-after

@layershifter layershifter added the wip Work in progress label Mar 24, 2019
@codecov-io
Copy link

codecov-io commented Mar 25, 2019

Codecov Report

Merging #3532 into master will decrease coverage by <.01%.
The diff coverage is 100%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #3532      +/-   ##
==========================================
- Coverage   99.82%   99.81%   -0.01%     
==========================================
  Files         172      174       +2     
  Lines        2795     2725      -70     
==========================================
- Hits         2790     2720      -70     
  Misses          5        5
Impacted Files Coverage Δ
src/modules/Popup/Popup.js 98.24% <100%> (-1.02%) ⬇️
src/modules/Popup/lib/createReferenceProxy.js 100% <100%> (ø)
src/modules/Popup/lib/positions.js 100% <100%> (ø)

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update fbef399...5aa2ac5. Read the comment docs.

@layershifter layershifter merged commit a7b757a into master Mar 25, 2019
@delete-merged-branch delete-merged-branch bot deleted the breaking/poppup-popper branch March 25, 2019 18:32
mbakiev pushed a commit to mbakiev/Semantic-UI-React that referenced this pull request Jun 17, 2019
* breaking(Popup): switch to Popper.js

* chore(package): update react-hot-loader

* update UTs

* fix offset, update docs

* rework docs
@semireg
Copy link

semireg commented Feb 9, 2020

Is there a guide anywhere that shows how to upgrade from something like 0.84.0 with regards to Popper? The CHANGELOG says "Breaking" but offers no hints on how to fix the expected breaks. Thank you for the hard work, everyone!

@HardenIan
Copy link

Is there a guide anywhere that shows how to upgrade from something like 0.84.0 with regards to Popper? The CHANGELOG says "Breaking" but offers no hints on how to fix the expected breaks. Thank you for the hard work, everyone!

I have a feeling the "Breaking" change is the offset props being removed and the new combined offset being added.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
wip Work in progress
Projects
None yet
4 participants