fix(Popup): transfer zIndex & fix floated elements

[layershifter]

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]

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%)

[codecov-io]

Codecov Report

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

@@           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.