feat(Popup): make 'content' prop to be a shorthand #322

kuzhelov · 2018-10-05T12:37:34Z

TODO

introduce examples for wrapped/non-wrapped Popup.
update changelog

These BREAKING changes make content to be a shorthand prop of the Popup, to address #312. With that the API will take the following look.

Unwrapped popup content, pasted 'as is'

const popupStyle = {
  zIndex: 1000,
 ...
}

<Popup content={<p style={popupStyle}>Hello from popup!</p>}>} ... >
   ...
</Popup>

<html>
  ...
  <body>
    ...
    <p>...</p>  <----- popup content element, pasted 'as is'
  </body>
</html>

Wrapped one (with PopupContent)

<Popup content='Hello from wrapped popup content!' ... >
   ...
</Popup>

<html>
  ...
  <body>
    ...
    <div class="ui-popup__content">  <----- popup wrapper
      Hello from wrapped popup!   <----- popup content
    </div>
  </body>
</html>

Wrapped one - with custom wrapped content

<Popup content={{ content: <Input ... /> }} ... >
   ...
</Popup>

<html>
  ...
  <body>
    ...
    <div class="ui-popup__content">  <----- popup wrapper
      <div class="ui-input">    <----- popup content
        ...
      </div>
    </div>
  </body>
</html>

codecov · 2018-10-05T13:20:55Z

Codecov Report

Merging #322 into master will increase coverage by 0.03%.
The diff coverage is 87.5%.

@@            Coverage Diff             @@
##           master     #322      +/-   ##
==========================================
+ Coverage   89.55%   89.59%   +0.03%     
==========================================
  Files          62       62              
  Lines        1216     1220       +4     
  Branches      155      179      +24     
==========================================
+ Hits         1089     1093       +4     
  Misses        125      125              
  Partials        2        2

Impacted Files	Coverage Δ
src/components/Popup/PopupContent.tsx	`100% <100%> (ø)`	⬆️
src/components/Popup/Popup.tsx	`41.37% <50%> (ø)`	⬆️

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 6878534...757242f. Read the comment docs.

mnajdova

I like this approach, as it fixes the styling issues for the content of the Popup.

introduce Popup content prop as a shorthand

6903560

kuzhelov requested review from dvdzkwsk, levithomason, miroslavstastny and mnajdova as code owners October 5, 2018 12:37

kuzhelov added the 🚧 WIP label Oct 5, 2018

fix popup content shorthand factory for primitives

41ff00e

kuzhelov added 🚀 ready for review and removed 🚧 WIP labels Oct 5, 2018

mnajdova approved these changes Oct 8, 2018

View reviewed changes

kuzhelov-ms added 6 commits October 8, 2018 15:03

introduce popup content example

cfcb232

Merge branch 'master' into feat/popup-content-shorthand

20d8b42

fix popup examples

62b29c1

update changelog

2727653

simplify popup content wrapper examples

c0959f0

fix create factory of PopupContent

757242f

kuzhelov merged commit 763973a into master Oct 8, 2018

layershifter deleted the feat/popup-content-shorthand branch November 9, 2018 09:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Popup): make 'content' prop to be a shorthand #322

feat(Popup): make 'content' prop to be a shorthand #322

kuzhelov commented Oct 5, 2018 •

edited

codecov bot commented Oct 5, 2018 •

edited

mnajdova left a comment

feat(Popup): make 'content' prop to be a shorthand #322

feat(Popup): make 'content' prop to be a shorthand #322

Conversation

kuzhelov commented Oct 5, 2018 • edited

TODO

Unwrapped popup content, pasted 'as is'

Wrapped one (with PopupContent)

Wrapped one - with custom wrapped content

codecov bot commented Oct 5, 2018 • edited

Codecov Report

mnajdova left a comment

Choose a reason for hiding this comment

kuzhelov commented Oct 5, 2018 •

edited

codecov bot commented Oct 5, 2018 •

edited