fix(Popup): fix styling with pointer when it is wrapped by FocusZones

[layershifter]

Fixes #1433.

---

Problem

When we use behaviors for Popup that have FocusZones, it results in new div and changed DOM structure, which causes broken styles.

Solution

Provide wrapped prop to PopupContent, so we will know if it is wrapped by FocusZones and provide correct styles. This solution is short-term and aims only to fix bug - as any refactoring that will make it simpler and will allow to avoid wrapped prop will contain breaking changes, which we want to allow for now.

I decided to prefer prop instead of passing down the variables because we don't have a proper merging of them.

[codecov]

Codecov Report

Merging #1492 into master will decrease coverage by <.01%.
The diff coverage is 50%.

@@            Coverage Diff             @@
##           master    #1492      +/-   ##
==========================================
- Coverage   73.44%   73.43%   -0.01%     
==========================================
  Files         822      822              
  Lines        6190     6192       +2     
  Branches     1795     1797       +2     
==========================================
+ Hits         4546     4547       +1     
- Misses       1639     1640       +1     
  Partials        5        5

Impacted Files	Coverage Δ
...ckages/react/src/components/Popup/PopupContent.tsx	90.9% <ø> (ø)	⬆️
...hemes/teams/components/Popup/popupContentStyles.ts	16.66% <0%> (-3.34%)	⬇️
packages/react/src/components/Popup/Popup.tsx	68.15% <100%> (+0.2%)	⬆️

---

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 1041c9a...8e9963e. Read the comment docs.

[mnajdova]

Don't have better idea for now. We may actually add the wrapper prop, as it is in the menu, but we really need just a boolean here for now, so as a short term fix, I am okay with this.

[kuzhelov]

nit: lets use code formatting for FocusZones

[kuzhelov]

nit: lets use @deprecated pragma to make proper accent on that - as this pragma is commonly supported and visualised (at least) by IDEs

[layershifter]

Will do, but you accidentally tagged someone 😸

[bmdalex]

Wouldn't it be enough to add the styles all the time? without the condition of p.unstable_wrapped? I mean maybe we can avoid this prop altogether... Or will adding these styles cause different issue?

[layershifter]

If we will always add these styles we will inherit backgroundColor from body when there are no wrapper...