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.

Sign up for GitHub

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

Jump to bottom

feat(Popup): add positionFixed to support fixed mode in Popper.JS #3760

Merged
merged 6 commits into from
Aug 29, 2019
Merged

feat(Popup): add positionFixed to support fixed mode in Popper.JS #3760

merged 6 commits into from
Aug 29, 2019

Conversation

fxOne
Copy link
Contributor

@fxOne fxOne commented Aug 24, 2019 •
edited by layershifter
Loading

Fixes #3718.

Add support for popper.js to position the popup correctly if used with a mountNode inside a position: fixed container

@fxOne
feat(Popup): add positionFixed to support popper fixed mode (#3718)
b15bce5 
Add support for popper.js to position the popup correctly if used with a mountNode inside a `position: fixed` container
@welcome
Copy link

welcome bot commented Aug 24, 2019

💖 Thanks for opening this pull request! 💖

Here is a list of things that will help get it across the finish line:

  • Run yarn lint locally to catch formatting errors. This will fix some errors automatically, commit and push any changes.
  • Run yarn test locally to catch errors. This ensures all components still behave as they should.
  • Run yarn start to run the doc site locally and try a few pages, ensuring everything is in good working order.
  • Include tests when adding/changing behavior.

We get a lot of pull requests on this repo, so please be patient and we will get back to you as soon as we can.

@codecov-io
Copy link

codecov-io commented Aug 24, 2019 •
edited
Loading

Codecov Report

Merging #3760 into master will not change coverage.
The diff coverage is n/a.

Impacted file tree graph

@@           Coverage Diff           @@
##           master    #3760   +/-   ##
=======================================
  Coverage   99.84%   99.84%           
=======================================
  Files         175      175           
  Lines        3125     3125           
=======================================
  Hits         3120     3120           
  Misses          5        5
Impacted Files Coverage Δ
src/modules/Popup/Popup.js 98.71% <ø> (ø) ⬆️

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 6e5234e...71b3476. Read the comment docs.

layershifter
layershifter reviewed Aug 26, 2019
View reviewed changes
src/modules/Popup/Popup.js Outdated
@@ -153,6 +156,7 @@ export default class Popup extends Component {
on: ['click', 'hover'],
pinned: false,
position: 'top left',
positionFixed: false,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
positionFixed: false,

It's not required to set defaults to false

layershifter
layershifter reviewed Aug 26, 2019
View reviewed changes
test/specs/modules/Popup/Popup-test.js Outdated
it(`is "false" by default`, () => {
wrapperMount(<Popup open />)

wrapper.should.have.prop('positionFixed', false)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
wrapper.should.have.prop('positionFixed', false)
wrapper.should.not.have.prop('positionFixed')

https://github.com/Semantic-Org/Semantic-UI-React/pull/3760/files#r317650640

@layershifter layershifter changed the title feat(Popup): add positionFixed to support popper fixed mode (#3718) feat(Popup): add positionFixed to support fixed mode in Popper.JS Aug 26, 2019
layershifter
layershifter approved these changes Aug 26, 2019
View reviewed changes
Copy link
Member

@layershifter layershifter left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left minor comments, looks good to me ❤️

@fxOne
Copy link
Contributor Author

fxOne commented Aug 28, 2019

Thanks for the feedback, I removed the unnecessary code.

layershifter
layershifter reviewed Aug 29, 2019
View reviewed changes
src/modules/Popup/Popup.d.ts Outdated
@@ -107,6 +107,9 @@ export interface StrictPopupProps extends StrictPortalProps {
| 'top center'
| 'bottom center'

/** Enables the popper position 'fixed' mode */
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
/** Enables the popper position 'fixed' mode */
/** Tells `Popper.js` to use the `position: fixed` strategy to position the popover. */

layershifter
layershifter reviewed Aug 29, 2019
View reviewed changes
src/modules/Popup/Popup.js Outdated
@@ -127,6 +127,9 @@ export default class Popup extends Component {
/** Position for the popover. */
position: PropTypes.oneOf(positions),

/** Enables the popper position 'fixed' mode */
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
/** Enables the popper position 'fixed' mode */
/** Tells `Popper.js` to use the `position: fixed` strategy to position the popover. */

@layershifter layershifter merged commit 81d3cd1 into Semantic-Org:master Aug 29, 2019
@welcome
Copy link

welcome bot commented Aug 29, 2019

Congrats on merging your first pull request! 🎉🎉🎉

robot victory dance

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@layershifter layershifter layershifter approved these changes

Assignees
No one assigned
Labels
enhancement ready for review
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Popup: wrong positioning when mountNode uses position: fixed
3 participants
@fxOne @codecov-io @layershifter