From 0a979711a4619e903c5186b637aa770f2380a577 Mon Sep 17 00:00:00 2001 From: navidnahidi Date: Fri, 5 Feb 2021 14:42:59 -0800 Subject: [PATCH] feat(PopOver): add variant option to PopOver component --- catalog/pages/popover/PopOverDemo.js | 10 ++- catalog/pages/popover/index.md | 6 +- .../__snapshots__/index.spec.js.snap | 75 +++++++++++++++++++ .../PopOver/__tests__/index.spec.js | 6 ++ src/components/PopOver/index.js | 22 +++++- 5 files changed, 111 insertions(+), 8 deletions(-) diff --git a/catalog/pages/popover/PopOverDemo.js b/catalog/pages/popover/PopOverDemo.js index 01be0a591..de3e3811e 100644 --- a/catalog/pages/popover/PopOverDemo.js +++ b/catalog/pages/popover/PopOverDemo.js @@ -2,6 +2,7 @@ import React from "react"; import PropTypes from "prop-types"; import styled from "styled-components"; import PopOver from "../../../src/components/PopOver"; +import { VARIANTS, LIGHT } from "../../../src/components/constants"; const Container = styled.div` width: 95%; @@ -47,7 +48,7 @@ class PopOverDemo extends React.Component { render() { const { showPopOver, ...position } = this.state; - const { inlineWithTarget, noBorders } = this.props; + const { inlineWithTarget, noBorders, variant } = this.props; return ( @@ -80,6 +81,7 @@ class PopOverDemo extends React.Component { reduceTop={76} inlineWithTarget={inlineWithTarget} noBorders={noBorders} + variant={variant} > Some text to be rendered in the pop over component. Some text to be rendered in the pop over component. @@ -92,13 +94,15 @@ class PopOverDemo extends React.Component { PopOverDemo.propTypes = { withinContainer: PropTypes.bool, inlineWithTarget: PropTypes.bool, - noBorders: PropTypes.bool + noBorders: PropTypes.bool, + variant: PropTypes.oneOf(VARIANTS) }; PopOverDemo.defaultProps = { withinContainer: false, inlineWithTarget: false, - noBorders: false + noBorders: false, + variant: LIGHT }; export default PopOverDemo; diff --git a/catalog/pages/popover/index.md b/catalog/pages/popover/index.md index 7ce74d1f2..236022cef 100644 --- a/catalog/pages/popover/index.md +++ b/catalog/pages/popover/index.md @@ -15,6 +15,10 @@ rows: Type: boolean Default: false Notes: Show/hide popover + - Prop: variant + Type: one of 'dark', 'light' + Default: 'light' + Notes: Changes PopOver's color scheme - Prop: inlineWithTarget Type: boolean Default: false @@ -50,5 +54,5 @@ rows: ```react --- - + ``` diff --git a/src/components/PopOver/__tests__/__snapshots__/index.spec.js.snap b/src/components/PopOver/__tests__/__snapshots__/index.spec.js.snap index 34896fe1a..14a5edca0 100644 --- a/src/components/PopOver/__tests__/__snapshots__/index.spec.js.snap +++ b/src/components/PopOver/__tests__/__snapshots__/index.spec.js.snap @@ -1,9 +1,82 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`PopOver dark should match snapshot 1`] = ` +.c0 { + background-color: #1f262d; + border: 1px solid #1f262d; + color: rgba(255,255,255,1); + border-radius: 4px; + box-shadow: 0 4px 4px 0 rgba(0,0,0,0.12); + position: absolute; + max-width: 300px; + padding: 16px; + z-index: 9; + display: block; + -webkit-transition: opacity 0.1s cubic-bezier(0.55,0.085,0.68,0.53), -webkit-transform 0.1s cubic-bezier(0.55,0.085,0.68,0.53); + -webkit-transition: opacity 0.1s cubic-bezier(0.55,0.085,0.68,0.53), transform 0.1s cubic-bezier(0.55,0.085,0.68,0.53); + transition: opacity 0.1s cubic-bezier(0.55,0.085,0.68,0.53), transform 0.1s cubic-bezier(0.55,0.085,0.68,0.53); +} + +.c0.open-enter, +.c0.open-appear { + -webkit-transition: opacity 0.3s cubic-bezier(0.455,0.03,0.515,0.955); + transition: opacity 0.3s cubic-bezier(0.455,0.03,0.515,0.955); + display: block; + opacity: 0; + -webkit-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); +} + +.c0.open-enter-active, +.c0.open-appear-active { + -webkit-transition: opacity 0.3s cubic-bezier(0.455,0.03,0.515,0.955), -webkit-transform 0.3s cubic-bezier(0.455,0.03,0.515,0.955); + -webkit-transition: opacity 0.3s cubic-bezier(0.455,0.03,0.515,0.955), transform 0.3s cubic-bezier(0.455,0.03,0.515,0.955); + transition: opacity 0.3s cubic-bezier(0.455,0.03,0.515,0.955), transform 0.3s cubic-bezier(0.455,0.03,0.515,0.955); + display: block; + opacity: 1; + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); +} + +.c0.open-enter-done { + -webkit-transition: opacity 0.3s cubic-bezier(0.455,0.03,0.515,0.955), -webkit-transform 0.3s cubic-bezier(0.455,0.03,0.515,0.955); + -webkit-transition: opacity 0.3s cubic-bezier(0.455,0.03,0.515,0.955), transform 0.3s cubic-bezier(0.455,0.03,0.515,0.955); + transition: opacity 0.3s cubic-bezier(0.455,0.03,0.515,0.955), transform 0.3s cubic-bezier(0.455,0.03,0.515,0.955); + display: block; + opacity: 1; + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); +} + +.c0.open-exit { + display: block; + opacity: 1; + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); +} + +.c0.open-exit-active { + display: block; + opacity: 0; + -webkit-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); +} + +
+`; + exports[`PopOver should match snapshot 1`] = ` .c0 { background-color: rgba(255,255,255,1); border: 1px solid #999999; + color: #262626; border-radius: 4px; box-shadow: 0 4px 4px 0 rgba(0,0,0,0.12); position: absolute; @@ -75,6 +148,7 @@ exports[`PopOver should match snapshot when visible 1`] = ` .c0 { background-color: rgba(255,255,255,1); border: 1px solid #999999; + color: #262626; border-radius: 4px; box-shadow: 0 4px 4px 0 rgba(0,0,0,0.12); position: absolute; @@ -145,6 +219,7 @@ exports[`PopOver should match snapshot when visible 1`] = ` exports[`PopOver should match snapshot when visible and without borders 1`] = ` .c0 { background-color: rgba(255,255,255,1); + color: #262626; border-radius: 4px; box-shadow: 0 2px 8px 0 rgba(159,159,159,0.5); position: absolute; diff --git a/src/components/PopOver/__tests__/index.spec.js b/src/components/PopOver/__tests__/index.spec.js index 2222c48bb..037a9f2c7 100644 --- a/src/components/PopOver/__tests__/index.spec.js +++ b/src/components/PopOver/__tests__/index.spec.js @@ -22,6 +22,12 @@ describe("PopOver", () => { expect(tree).toMatchSnapshot(); }); + it("dark should match snapshot", () => { + const tree = renderer.create().toJSON(); + + expect(tree).toMatchSnapshot(); + }); + it("should match snapshot when visible and without borders", () => { const tree = renderer.create().toJSON(); diff --git a/src/components/PopOver/index.js b/src/components/PopOver/index.js index b373dd7ad..fb58f8377 100644 --- a/src/components/PopOver/index.js +++ b/src/components/PopOver/index.js @@ -8,11 +8,21 @@ import { popContainersSharpBoxShadow } from "../../theme/constants"; import PopOverPortal from "./PopOverPortal"; +import { VARIANTS, LIGHT, DARK } from "../constants"; const StyledPopOver = styled.div` - background-color: ${themes.global.white.base}; - ${({ noBorders }) => - !noBorders && `border: 1px solid ${themes.global.gray02}`}; + background-color: ${({ variant }) => + variant === DARK ? themes.global.darkFill : themes.global.white.base}; + ${({ noBorders, variant }) => + !noBorders && + ` + border: ${ + variant === DARK + ? `1px solid ${themes.global.darkFill}` + : `1px solid ${themes.global.gray02}` + };`}; + color: ${({ variant }) => + variant === DARK ? themes.global.white.base : themes.global.gray01}; border-radius: ${constants.borderRadius.large}; box-shadow: ${({ noBorders }) => noBorders ? popContainersSharpBoxShadow : popContainersBoxShadow}; @@ -334,7 +344,7 @@ class PopOver extends Component { }; render() { - const { children, isVisible, noBorders, zInd } = this.props; + const { children, isVisible, variant, noBorders, zInd } = this.props; return ( @@ -344,6 +354,7 @@ class PopOver extends Component { timeout={300} classNames="open" appear={isVisible} + variant={variant} onEnter={this.popoverEnter} > {children} @@ -364,6 +376,7 @@ PopOver.propTypes = { children: PropTypes.node.isRequired, isVisible: PropTypes.bool, inlineWithTarget: PropTypes.bool, + variant: PropTypes.oneOf(VARIANTS), noBorders: PropTypes.bool, reduceTop: PropTypes.number, reduceBottom: PropTypes.number, @@ -383,6 +396,7 @@ PopOver.propTypes = { PopOver.defaultProps = { isVisible: false, inlineWithTarget: false, + variant: LIGHT, noBorders: false, reduceTop: 0, reduceBottom: 0,