Skip to content

Commit

Permalink
feat(Popover): implements inverted prop
Browse files Browse the repository at this point in the history
  • Loading branch information
@rapahaeru
rapahaeru committed May 24, 2019
1 parent a8ef205 commit 92951cf
Show file tree
Hide file tree
Showing 4 changed files with 65 additions and 16 deletions.
2 changes: 2 additions & 0 deletions components/Popover/Popover.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,7 @@ class Popover extends Component {
TriggerBlock.displayName = 'TriggerBlock';

Popover.propTypes = {
inverted: PropTypes.bool,
visible: PropTypes.bool,
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
Expand All @@ -134,6 +135,7 @@ Popover.propTypes = {
};

Popover.defaultProps = {
inverted: false,
visible: false,
skin: 'neutral',
placement: 'top',
Expand Down
35 changes: 35 additions & 0 deletions components/Popover/__snapshots__/Popover.unit.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ exports[`Popover component Snapshots should match snapshots 1`] = `
}
<Popover
inverted={false}
onClose={[Function]}
placement="top"
skin="neutral"
Expand Down Expand Up @@ -129,6 +130,7 @@ exports[`Popover component Snapshots should match snapshots 2`] = `
}
<Popover
inverted={false}
onClose={[Function]}
placement="top"
skin="success"
Expand Down Expand Up @@ -247,6 +249,7 @@ exports[`Popover component Snapshots should match snapshots 3`] = `
}
<Popover
inverted={false}
onClose={[Function]}
placement="top"
skin="warning"
Expand Down Expand Up @@ -365,6 +368,7 @@ exports[`Popover component Snapshots should match snapshots 4`] = `
}
<Popover
inverted={false}
onClose={[Function]}
placement="top"
skin="error"
Expand Down Expand Up @@ -483,6 +487,7 @@ exports[`Popover component Snapshots should match snapshots 5`] = `
}
<Popover
inverted={false}
onClose={[Function]}
placement="bottom"
skin="neutral"
Expand Down Expand Up @@ -601,6 +606,7 @@ exports[`Popover component Snapshots should match snapshots 6`] = `
}
<Popover
inverted={false}
onClose={[Function]}
placement="left"
skin="neutral"
Expand Down Expand Up @@ -719,6 +725,7 @@ exports[`Popover component Snapshots should match snapshots 7`] = `
}
<Popover
inverted={false}
onClose={[Function]}
placement="right"
skin="neutral"
Expand Down Expand Up @@ -974,6 +981,7 @@ exports[`Popover component Snapshots should match the snapshots after click on
}
<Popover
inverted={false}
onClose={[Function]}
placement="top"
skin="neutral"
Expand Down Expand Up @@ -1037,6 +1045,7 @@ exports[`Popover component Snapshots should match the snapshots after click on
className="c0"
>
<Content
inverted={false}
onClose={[Function]}
onPopoverClose={[Function]}
placement="top"
Expand Down Expand Up @@ -1234,6 +1243,7 @@ exports[`Popover component Snapshots should match the snapshots after click on
}
>
<Content__PopoverContent
inverted={false}
onClose={[Function]}
placement="top"
skin="neutral"
Expand Down Expand Up @@ -1294,6 +1304,7 @@ exports[`Popover component Snapshots should match the snapshots after click on
}
}
forwardedRef={[Function]}
inverted={false}
onClose={[Function]}
placement="top"
skin="neutral"
Expand Down Expand Up @@ -1787,6 +1798,7 @@ exports[`Popover component Snapshots should match the snapshots after click on
}
<Popover
inverted={false}
onClose={[Function]}
placement="top"
skin="success"
Expand Down Expand Up @@ -1850,6 +1862,7 @@ exports[`Popover component Snapshots should match the snapshots after click on
className="c0"
>
<Content
inverted={false}
onClose={[Function]}
onPopoverClose={[Function]}
placement="top"
Expand Down Expand Up @@ -2047,6 +2060,7 @@ exports[`Popover component Snapshots should match the snapshots after click on
}
>
<Content__PopoverContent
inverted={false}
onClose={[Function]}
placement="top"
skin="success"
Expand Down Expand Up @@ -2107,6 +2121,7 @@ exports[`Popover component Snapshots should match the snapshots after click on
}
}
forwardedRef={[Function]}
inverted={false}
onClose={[Function]}
placement="top"
skin="success"
Expand Down Expand Up @@ -2600,6 +2615,7 @@ exports[`Popover component Snapshots should match the snapshots after click on
}
<Popover
inverted={false}
onClose={[Function]}
placement="top"
skin="warning"
Expand Down Expand Up @@ -2663,6 +2679,7 @@ exports[`Popover component Snapshots should match the snapshots after click on
className="c0"
>
<Content
inverted={false}
onClose={[Function]}
onPopoverClose={[Function]}
placement="top"
Expand Down Expand Up @@ -2860,6 +2877,7 @@ exports[`Popover component Snapshots should match the snapshots after click on
}
>
<Content__PopoverContent
inverted={false}
onClose={[Function]}
placement="top"
skin="warning"
Expand Down Expand Up @@ -2920,6 +2938,7 @@ exports[`Popover component Snapshots should match the snapshots after click on
}
}
forwardedRef={[Function]}
inverted={false}
onClose={[Function]}
placement="top"
skin="warning"
Expand Down Expand Up @@ -3413,6 +3432,7 @@ exports[`Popover component Snapshots should match the snapshots after click on
}
<Popover
inverted={false}
onClose={[Function]}
placement="top"
skin="error"
Expand Down Expand Up @@ -3476,6 +3496,7 @@ exports[`Popover component Snapshots should match the snapshots after click on
className="c0"
>
<Content
inverted={false}
onClose={[Function]}
onPopoverClose={[Function]}
placement="top"
Expand Down Expand Up @@ -3673,6 +3694,7 @@ exports[`Popover component Snapshots should match the snapshots after click on
}
>
<Content__PopoverContent
inverted={false}
onClose={[Function]}
placement="top"
skin="error"
Expand Down Expand Up @@ -3733,6 +3755,7 @@ exports[`Popover component Snapshots should match the snapshots after click on
}
}
forwardedRef={[Function]}
inverted={false}
onClose={[Function]}
placement="top"
skin="error"
Expand Down Expand Up @@ -4226,6 +4249,7 @@ exports[`Popover component Snapshots should match the snapshots after click on
}
<Popover
inverted={false}
onClose={[Function]}
placement="bottom"
skin="neutral"
Expand Down Expand Up @@ -4289,6 +4313,7 @@ exports[`Popover component Snapshots should match the snapshots after click on
className="c0"
>
<Content
inverted={false}
onClose={[Function]}
onPopoverClose={[Function]}
placement="bottom"
Expand Down Expand Up @@ -4486,6 +4511,7 @@ exports[`Popover component Snapshots should match the snapshots after click on
}
>
<Content__PopoverContent
inverted={false}
onClose={[Function]}
placement="bottom"
skin="neutral"
Expand Down Expand Up @@ -4546,6 +4572,7 @@ exports[`Popover component Snapshots should match the snapshots after click on
}
}
forwardedRef={[Function]}
inverted={false}
onClose={[Function]}
placement="bottom"
skin="neutral"
Expand Down Expand Up @@ -5036,6 +5063,7 @@ exports[`Popover component Snapshots should match the snapshots after click on
}
<Popover
inverted={false}
onClose={[Function]}
placement="left"
skin="neutral"
Expand Down Expand Up @@ -5099,6 +5127,7 @@ exports[`Popover component Snapshots should match the snapshots after click on
className="c0"
>
<Content
inverted={false}
onClose={[Function]}
onPopoverClose={[Function]}
placement="left"
Expand Down Expand Up @@ -5293,6 +5322,7 @@ exports[`Popover component Snapshots should match the snapshots after click on
}
>
<Content__PopoverContent
inverted={false}
onClose={[Function]}
placement="left"
skin="neutral"
Expand Down Expand Up @@ -5353,6 +5383,7 @@ exports[`Popover component Snapshots should match the snapshots after click on
}
}
forwardedRef={[Function]}
inverted={false}
onClose={[Function]}
placement="left"
skin="neutral"
Expand Down Expand Up @@ -5843,6 +5874,7 @@ exports[`Popover component Snapshots should match the snapshots after click on
}
<Popover
inverted={false}
onClose={[Function]}
placement="right"
skin="neutral"
Expand Down Expand Up @@ -5906,6 +5938,7 @@ exports[`Popover component Snapshots should match the snapshots after click on
className="c0"
>
<Content
inverted={false}
onClose={[Function]}
onPopoverClose={[Function]}
placement="right"
Expand Down Expand Up @@ -6100,6 +6133,7 @@ exports[`Popover component Snapshots should match the snapshots after click on
}
>
<Content__PopoverContent
inverted={false}
onClose={[Function]}
placement="right"
skin="neutral"
Expand Down Expand Up @@ -6160,6 +6194,7 @@ exports[`Popover component Snapshots should match the snapshots after click on
}
}
forwardedRef={[Function]}
inverted={false}
onClose={[Function]}
placement="right"
skin="neutral"
Expand Down
12 changes: 9 additions & 3 deletions components/Popover/arrowProperties.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,13 @@ const getColorBySkin = (
popover: { skins },
},
},
) => skins[skin].background;
inverted,
) => {
if (inverted) {
return skins[skin].text;
}
return skins[skin].background;
};

const placementPosition = {
top: `
Expand Down Expand Up @@ -42,8 +48,8 @@ const placementPosition = {
`,
};

const getArrow = (placement, skin, theme) => `
color: ${getColorBySkin(skin, theme)}
const getArrow = (placement, skin, theme, inverted) => `
color: ${getColorBySkin(skin, theme, inverted)}
font-size: ${ARROW_SIZE};
position: absolute;
Expand Down
32 changes: 19 additions & 13 deletions components/Popover/sub-components/Content.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,19 +17,22 @@ const _colors = ({
},
},
},
}) => css`
background-color: ${popoverColor.background};
color: ${popoverColor.text};
`;
inverted,
}) => {
if (inverted) {
const [background, text] = [popoverColor.text, popoverColor.background];

return css`
background-color: ${background};
color: ${text};
`;
}
return css`
background-color: ${popoverColor.background};
color: ${popoverColor.text};
`;
};

// const getStyleBySkin = skin =>
// // const indexColor = skin.toUpperCase();
// `
// background-color: ${
// skin === 'neutral' ? colors.neutral[100] : colors[skin][100]
// };
// color: ${skin === 'neutral' ? colors.neutral[700] : colors[skin][900]};
// `;
const PopoverContent = styled.div`
box-shadow: 0 2px 4px 0 ${Colors.SHADOW[50]};
align-items: start;
Expand All @@ -43,7 +46,8 @@ const PopoverContent = styled.div`
z-index: 100;
&:before {
${({ placement, skin, theme }) => getArrow(placement, skin, theme)};
${({ placement, skin, theme, inverted }) =>
getArrow(placement, skin, theme, inverted)};
}
${_colors}
Expand Down Expand Up @@ -110,6 +114,7 @@ Content.propTypes = {
PropTypes.arrayOf(PropTypes.node),
PropTypes.node,
]).isRequired,
inverted: PropTypes.bool,
placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
onPopoverClose: PropTypes.func,
skin: PropTypes.oneOf(['neutral', 'success', 'warning', 'error']),
Expand All @@ -122,6 +127,7 @@ Content.propTypes = {
};

Content.defaultProps = {
inverted: false,
placement: 'top',
onPopoverClose: () => {},
skin: 'neutral',
Expand Down

0 comments on commit 92951cf

Please sign in to comment.