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

fix(Popup): transfer zIndex & fix floated elements #4094

Merged
merged 1 commit into from Oct 25, 2020

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented Oct 25, 2020

zIndex transfering

Fixes #4083.

In #3947 a wrapping element was added around .popup to avoid Popper.js warnings and position arrows properly. However, that created an issue with zIndex as it was defined inside a nested element:

<div>
  <!-- Oops, zIndex was defined in `.popup` CSS -->
  <div class="ui popup">A popup content</div>
</div>

There were multiple proposals in #4083, however I decided to go with syncing zIndex and avoid hardcoded values in JS code:

<!-- 1900 is a value defined in `.popup` CSS -->
<div style="zIndex: 1900">
  <div class="ui popup">A popup content</div>
</div>

floated elements

Fixes #4092. As was reported in that issue elements that have float CSS properly were breaking layout, this was fixed by adding display: flex to a wrapping element.

popper shorthand

A wrapping element is accessible as a shorthand now, this allows to apply custom props and styling:

  <Popup
    content={
      <>
        A wrapping element in this Popup will have custom <code>id</code> &{' '}
        <code>zIndex</code>.
      </>
    }
    popper={{ id: 'popper-container', style: { zIndex: 2000 } }}
    trigger={<Button>Open a popup</Button>}
  />
)

An example to docs was also added.

@github-actions
Copy link

size-limit report

Path Size
bundle-size/dist/Button.size.js 58.65 KB (0%)
bundle-size/dist/Icon.size.js 25.06 KB (0%)
bundle-size/dist/Image.size.js 53.83 KB (0%)
bundle-size/dist/Modal.size.js 68.73 KB (0%)
bundle-size/dist/Portal.size.js 40.54 KB (0%)

@layershifter layershifter changed the title fix(Popup): ... fix(Popup): transfer zIndex & fix floated elements Oct 25, 2020
@codecov-io
Copy link

codecov-io commented Oct 25, 2020

Codecov Report

Merging #4094 into master will increase coverage by 0.00%.
The diff coverage is 100.00%.

Impacted file tree graph

@@           Coverage Diff           @@
##           master    #4094   +/-   ##
=======================================
  Coverage   99.75%   99.75%           
=======================================
  Files         180      180           
  Lines        3231     3241   +10     
=======================================
+ Hits         3223     3233   +10     
  Misses          8        8           
Impacted Files Coverage Δ
src/modules/Popup/Popup.js 98.90% <100.00%> (+0.13%) ⬆️

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 26cab91...e5a25e9. Read the comment docs.

@layershifter layershifter merged commit c3f1989 into master Oct 25, 2020
8 of 9 checks passed
@layershifter layershifter deleted the fix/popup-container branch Oct 25, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Popup: Floating elements not positioned properly Popup: zIndex is not applied in v2
2 participants