Skip to content

Commit

Permalink
Merge 94ae7d4 into c1da533
Browse files Browse the repository at this point in the history
  • Loading branch information
@iaronaraujo
iaronaraujo committed Aug 8, 2019
2 parents c1da533 + 94ae7d4 commit 009c76b
Show file tree
Hide file tree
Showing 6 changed files with 147 additions and 124 deletions.
5 changes: 5 additions & 0 deletions CHANGELOG.md
View file
Expand Up @@ -7,9 +7,14 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.

## [Unreleased]

### Fixed

- Issue with popover being displayed behind other elements.

## [2.9.2] - 2019-06-27

### Fixed

- Build assets with new builder hub.

## [2.9.1] - 2019-05-27
Expand Down
1 change: 1 addition & 0 deletions manifest.json
View file
Expand Up @@ -20,6 +20,7 @@
"vtex.store-session": "0.x",
"vtex.store-components": "3.x",
"vtex.styleguide": "9.x",
"vtex.react-portal": "0.x",
"vtex.store-icons": "0.x"
},
"$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
Expand Down
7 changes: 7 additions & 0 deletions react/__mocks__/vtex.react-portal.tsx
View file
@@ -0,0 +1,7 @@
import React, { FunctionComponent } from 'react'

export const Overlay: FunctionComponent = ({ children }) => {
return (
<div>{children}</div>
)
}
226 changes: 115 additions & 111 deletions react/__tests__/__snapshots__/Telemarketing.test.tsx.snap
View file
Expand Up @@ -62,116 +62,118 @@ exports[`<Telemarketing /> component should match snapshot with client 1`] = `
</div>
</div>
</div>
<div
class="popoverBox absolute-ns top-2 z-max bb b--muted-3 fixed-s dn"
>
<div>
<div
class="popoverContentContainer mt3-ns bg-base shadow-3-ns"
class="popoverBox absolute-ns top-2 z-max bb b--muted-3 fixed-s dn"
>
<div
class="bg-emphasis w-100 pa7"
class="popoverContentContainer mt3-ns bg-base shadow-3-ns"
>
<div
class="popoverHeaderIcon c-on-base--inverted"
class="bg-emphasis w-100 pa7"
>
<svg
class="IconAssistantSales-mock "
height="50"
width="50"
<div
class="popoverHeaderIcon c-on-base--inverted"
>
<rect
<svg
class="IconAssistantSales-mock "
height="50"
width="50"
/>
</svg>
</div>
<div
class="popoverHeaderEmail c-on-emphasis"
>
attendant@vtex.com
>
<rect
height="50"
width="50"
/>
</svg>
</div>
<div
class="popoverHeaderEmail c-on-emphasis"
>
attendant@vtex.com
</div>
</div>
</div>
<div
class="bg-base w-100 pt7 pb5 ph5"
>
<div
class="logoutForm c-disabled"
class="bg-base w-100 pt7 pb5 ph5"
>
<div
class="w-100 bw1 bb b--muted-5 flex-wrap"
class="logoutForm c-disabled"
>
<div
class="clientName w-100 t-heading-5 center pb5 c-on-base"
>
name
</div>
<div
class="w-100 flex flex-wrap t-small"
class="w-100 bw1 bb b--muted-5 flex-wrap"
>
<div
class="tl pb5 pr2"
class="clientName w-100 t-heading-5 center pb5 c-on-base"
>
Email
name
</div>
<div
class="pb5 pl2 c-muted-3"
class="w-100 flex flex-wrap t-small"
>
client@vtex.com
<div
class="tl pb5 pr2"
>
Email
</div>
<div
class="pb5 pl2 c-muted-3"
>
client@vtex.com
</div>
</div>
</div>
<div
class="w-100 flex flex-wrap t-small"
>
<div
class="tl pb5 pr2"
class="w-100 flex flex-wrap t-small"
>
Document
<div
class="tl pb5 pr2"
>
Document
</div>
<div
class="pb5 pl2 c-muted-3"
>
document
</div>
</div>
<div
class="pb5 pl2 c-muted-3"
class="w-100 flex flex-wrap t-small"
>
document
<div
class="tl pb5 pr2"
>
Phone
</div>
<div
class="pb5 pl2 c-muted-3"
>
phone
</div>
</div>
</div>
<div
class="w-100 flex flex-wrap t-small"
class="flex justify-around mt5"
>
<div
class="tl pb5 pr2"
<a
href="store.account"
>
Phone
</div>
<div
class="pb5 pl2 c-muted-3"
>
phone
</div>
</div>
</div>
<div
class="flex justify-around mt5"
>
<a
href="store.account"
>
<button
type="button"
>
Orders
</button>
</a>
<button
type="button"
>
Orders
Logout
</button>
</a>
<button
type="button"
>
Logout
</button>
</div>
</div>
</div>
</div>
<div
class="popoverArrowUp absolute top-0 rotate-135 dib-ns dn-s bg-emphasis"
/>
</div>
<div
class="popoverArrowUp absolute top-0 rotate-135 dib-ns dn-s bg-emphasis"
/>
</div>
</div>
</div>
Expand Down Expand Up @@ -243,65 +245,67 @@ exports[`<Telemarketing /> component should match snapshot without client 1`] =
</div>
</div>
</div>
<div
class="popoverBox absolute-ns top-2 z-max bb b--muted-3 fixed-s dn"
>
<div>
<div
class="popoverContentContainer mt3-ns bg-base shadow-3-ns"
class="popoverBox absolute-ns top-2 z-max bb b--muted-3 fixed-s dn"
>
<div
class="bg-base--inverted w-100 pa7 c-on-base--inverted"
class="popoverContentContainer mt3-ns bg-base shadow-3-ns"
>
<div
class="popoverHeaderIcon"
class="bg-base--inverted w-100 pa7 c-on-base--inverted"
>
<svg
class="IconAssistantSales-mock "
height="50"
width="50"
<div
class="popoverHeaderIcon"
>
<rect
<svg
class="IconAssistantSales-mock "
height="50"
width="50"
/>
</svg>
</div>
<div
class="popoverHeaderEmail white-50 mt3"
>
attendant@vtex.com
</div>
</div>
<div
class="bg-base w-100 ph5 pb5 pt7"
>
<div
class="loginForm c-disabled"
>
>
<rect
height="50"
width="50"
/>
</svg>
</div>
<div
class="loginFormMessage t-small tl mb3"
class="popoverHeaderEmail white-50 mt3"
>
Login as
attendant@vtex.com
</div>
</div>
<div
class="bg-base w-100 ph5 pb5 pt7"
>
<div
class="emailInput mb5"
class="loginForm c-disabled"
>
<input
placeholder="Ex: example@mail.com"
value="email@vtex.com"
/>
<div
class="loginFormMessage t-small tl mb3"
>
Login as
</div>
<div
class="emailInput mb5"
>
<input
placeholder="Ex: example@mail.com"
value="email@vtex.com"
/>
</div>
<button
type="button"
>
Login
</button>
</div>
<button
type="button"
>
Login
</button>
</div>
</div>
<div
class="popoverArrowUp absolute top-0 rotate-135 dib-ns dn-s bg-base--inverted"
/>
</div>
<div
class="popoverArrowUp absolute top-0 rotate-135 dib-ns dn-s bg-base--inverted"
/>
</div>
</div>
</div>
Expand Down
29 changes: 16 additions & 13 deletions react/components/Popover.tsx
View file
Expand Up @@ -2,6 +2,7 @@ import React, { ReactNode, useRef, useState, useCallback } from 'react'
import classnames from 'classnames'
import useOutsideClick from '../hooks/useOutsideClick'
import styles from '../telemarketing.css'
import { Overlay } from 'vtex.react-portal'

interface Props {
/** Function that will display the header */
Expand Down Expand Up @@ -56,20 +57,22 @@ const Popover = (props: Props) => {
>
{renderHeader()}
</div>
<div className={boxClasses} style={boxPositionStyle} ref={boxRef}>
<div
className={`${
styles.popoverContentContainer
} mt3-ns bg-base shadow-3-ns`}
>
{children}
<Overlay>
<div className={boxClasses} style={boxPositionStyle} ref={boxRef}>
<div
className={`${
styles.popoverContentContainer
} mt3-ns bg-base shadow-3-ns`}
>
{children}
</div>
<div
className={`${
styles.popoverArrowUp
} absolute top-0 rotate-135 dib-ns dn-s ${arrowClasses}`}
/>
</div>
<div
className={`${
styles.popoverArrowUp
} absolute top-0 rotate-135 dib-ns dn-s ${arrowClasses}`}
/>
</div>
</Overlay>
</div>
)
}
Expand Down
3 changes: 3 additions & 0 deletions react/typings/vtex.react-portal.d.ts
View file
@@ -0,0 +1,3 @@
declare module 'vtex.react-portal' {
export const Overlay
}

0 comments on commit 009c76b

Please sign in to comment.