Skip to content
This repository has been archived by the owner on Mar 4, 2020. It is now read-only.

feat(Popup): add pointing prop #1198

Merged
merged 20 commits into from
Apr 15, 2019
Merged

feat(Popup): add pointing prop #1198

merged 20 commits into from
Apr 15, 2019

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented Apr 10, 2019

This PR adds a new pointing prop that allows to show a pointer to a trigger.

image


pointing

We have pointing prop in Menu, used this name for consistency.

Changes in PopupContent

DOM structure

WARNING: `arrow.element` must be child of its popper element!

A pointer should be a slot of PopupContent, otherwise it fill fail. Bootstrap uses PopperJS and the same structure, BTW.

content slot

As I have to change DOM structure, I added a new slot content, but it's really weird to have PopupContent.content 😮 inner may be?

position: 'absolute',
textAlign: 'left',
color: variables.contentColor,
background: variables.contentBackgroundColor,
Copy link
Member Author

Choose a reason for hiding this comment

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

Moved to popupContentStyles...

Copy link
Member

Choose a reason for hiding this comment

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

Talk to @kuzhelov. In #1121 he intentionally moved the styles from popupContentStyles to here.

Copy link
Contributor

@kuzhelov kuzhelov Apr 12, 2019

Choose a reason for hiding this comment

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

these styles should be left here, as we popup expects any content to be rendered with this set of styles, not just PopupContent. Also, please, ensure that PopupContent just CSS-inherits this set of colors.

These two requirements are necessary for introducing correct semantics around these styles, as well as for expected effects of theme switching.

FYI #1121

@layershifter layershifter changed the title [WIP] feat(Popup): add pointing prop feat(Popup): add pointing prop Apr 10, 2019
Copy link
Collaborator

@bmdalex bmdalex left a comment

Choose a reason for hiding this comment

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

👍 just couple of comments

Copy link
Member

@miroslavstastny miroslavstastny left a comment

Choose a reason for hiding this comment

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

RTL is broken:
image

@codecov
Copy link

codecov bot commented Apr 11, 2019

Codecov Report

Merging #1198 into master will decrease coverage by 0.03%.
The diff coverage is 60.86%.

Impacted file tree graph

@@            Coverage Diff            @@
##           master   #1198      +/-   ##
=========================================
- Coverage   82.54%   82.5%   -0.04%     
=========================================
  Files         751     751              
  Lines        8850    8865      +15     
  Branches     1246    1251       +5     
=========================================
+ Hits         7305    7314       +9     
- Misses       1530    1536       +6     
  Partials       15      15
Impacted Files Coverage Δ
...es/teams/components/Popup/popupContentVariables.ts 66.66% <ø> (ø) ⬆️
...t/src/themes/teams/components/Popup/popupStyles.ts 33.33% <ø> (ø) ⬆️
packages/react/src/components/Popup/Popup.tsx 76.43% <100%> (+0.63%) ⬆️
...hemes/teams/components/Popup/popupContentStyles.ts 20% <11.11%> (-20%) ⬇️
...ckages/react/src/components/Popup/PopupContent.tsx 96.77% <85.71%> (-3.23%) ⬇️

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 ef5ab15...58f4fe0. Read the comment docs.

@codecov
Copy link

codecov bot commented Apr 11, 2019

Codecov Report

Merging #1198 into master will decrease coverage by 0.04%.
The diff coverage is 58.33%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #1198      +/-   ##
==========================================
- Coverage   82.57%   82.53%   -0.05%     
==========================================
  Files         752      751       -1     
  Lines        8868     8880      +12     
  Branches     1186     1259      +73     
==========================================
+ Hits         7323     7329       +6     
- Misses       1530     1536       +6     
  Partials       15       15
Impacted Files Coverage Δ
...rc/themes/teams/components/Popup/popupVariables.ts 100% <ø> (ø) ⬆️
...c/themes/teams-high-contrast/componentVariables.ts 100% <ø> (ø) ⬆️
.../react/src/themes/teams-dark/componentVariables.ts 100% <ø> (ø) ⬆️
...es/teams/components/Popup/popupContentVariables.ts 66.66% <ø> (ø) ⬆️
...t/src/themes/teams/components/Popup/popupStyles.ts 33.33% <0%> (ø) ⬆️
packages/react/src/components/Popup/Popup.tsx 76.43% <100%> (+0.63%) ⬆️
...hemes/teams/components/Popup/popupContentStyles.ts 20% <11.11%> (-20%) ⬇️
...ckages/react/src/components/Popup/PopupContent.tsx 96.77% <85.71%> (-3.23%) ⬇️

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 d8dd9a6...c504a33. Read the comment docs.

padding: string

contentColor: string
Copy link
Member

Choose a reason for hiding this comment

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

  • there are contentColor and contentBackgroundColor left in popupVariables as well and are not used in popupStyles
  • popupVariablesin teams-dark is setting color which is not used
  • if we move variables from popup to popupContent it is a breaking change

Copy link
Member

Choose a reason for hiding this comment

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

contentColor and contentBackgroundColor are now variables of PopupContent. Is the content in the variables' names still meaningful?

const PopupWithButton = props => (
<Popup
align={props.align}
content="A popup with a pointer."
Copy link
Member

Choose a reason for hiding this comment

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

For the other popup example, we intentionally use multiline content to clearly show the difference between top/center/bottom - it would be great to have the same here as well.

Copy link
Contributor

@kuzhelov kuzhelov left a comment

Choose a reason for hiding this comment

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

please, take a look on this comment about styles: https://github.com/stardust-ui/react/pull/1198/files#r273879017

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants