Skip to content

Commit

Permalink
[components] Improve dialog and popover components
Browse files Browse the repository at this point in the history
  • Loading branch information
@mariuslundgard @rexxars
mariuslundgard authored and rexxars committed Oct 6, 2020
1 parent 5fb6e58 commit eb10d2b
Show file tree
Hide file tree
Showing 5 changed files with 208 additions and 217 deletions.
2 changes: 2 additions & 0 deletions packages/@sanity/components/src/dialogs/PopoverDialog.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,8 @@
}

.card {
max-height: 50vh;

@nest .root[data-color='danger'] & {
background-color: var(--state-danger-color);
color: var(--state-danger-color--inverted);
Expand Down
159 changes: 78 additions & 81 deletions packages/@sanity/components/src/dialogs/PopoverDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import ButtonGrid from 'part:@sanity/components/buttons/button-grid'
import {ClickOutside} from 'part:@sanity/components/click-outside'
import {Popover} from 'part:@sanity/components/popover'
import React, {useCallback, useState} from 'react'
import {Portal} from '../utilities/Portal'
import Stacked from '../utilities/Stacked'
import Escapable from '../utilities/Escapable'
import {Placement} from '../types'
Expand All @@ -24,6 +23,7 @@ interface PopoverDialogProps {
onEscape?: (event: KeyboardEvent) => void
padding?: 'none' | 'small' | 'medium' | 'large'
placement?: Placement
portal?: boolean
referenceElement?: HTMLElement | null
size?: 'small' | 'medium' | 'large' | 'auto'
title?: string
Expand All @@ -42,6 +42,7 @@ function PopoverDialog(props: PopoverDialogProps) {
onEscape,
padding = 'medium',
placement = 'auto',
portal,
referenceElement: referenceElementProp,
size = 'medium',
title,
Expand Down Expand Up @@ -74,90 +75,86 @@ function PopoverDialog(props: PopoverDialogProps) {
<>
{!referenceElementProp && <div ref={setTargetElement} />}

<Portal>
<Stacked>
{isActive => (
<>
{useOverlay && <div className={styles.overlay} />}

{referenceElement && (
<ClickOutside onClickOutside={isActive ? onClickOutside : undefined}>
{ref => (
<Popover
arrowClassName={classNames(
styles.arrow,
hasAnimation && styles.popperAnimation
)}
cardClassName={classNames(
styles.card,
hasAnimation && styles.popperAnimation
)}
className={styles.root}
data-color={color}
data-padding={padding}
data-size={size}
content={
<>
<Escapable onEscape={isActive ? handleEscape : undefined} />

{title && (
<div className={styles.header}>
<div className={styles.title}>
<h3>{title}</h3>
</div>

{onClose && (
<div className={styles.closeButtonContainer}>
<Button
className={styles.closeButton}
icon={CloseIcon}
kind="simple"
onClick={onClose}
padding="small"
title="Close"
/>
</div>
)}
<Stacked>
{isActive => (
<>
{useOverlay && <div className={styles.overlay} />}

{referenceElement && (
<ClickOutside onClickOutside={isActive ? onClickOutside : undefined}>
{ref => (
<Popover
arrowClassName={classNames(
styles.arrow,
hasAnimation && styles.popperAnimation
)}
cardClassName={classNames(styles.card, hasAnimation && styles.popperAnimation)}
className={styles.root}
data-color={color}
data-padding={padding}
data-size={size}
content={
<>
<Escapable onEscape={isActive ? handleEscape : undefined} />

{title && (
<div className={styles.header}>
<div className={styles.title}>
<h3>{title}</h3>
</div>
)}

{!title && onClose && (
<div className={styles.floatingCloseButtonContainer}>
<Button
icon={CloseIcon}
kind="simple"
onClick={onClose}
padding="small"
title="Close"
/>
</div>
)}

<div className={styles.content}>
<div className={styles.contentWrapper}>{children}</div>
{onClose && (
<div className={styles.closeButtonContainer}>
<Button
className={styles.closeButton}
icon={CloseIcon}
kind="simple"
onClick={onClose}
padding="small"
title="Close"
/>
</div>
)}
</div>
)}

{!title && onClose && (
<div className={styles.floatingCloseButtonContainer}>
<Button
icon={CloseIcon}
kind="simple"
onClick={onClose}
padding="small"
title="Close"
/>
</div>
)}

{actions.length > 0 && (
<div className={styles.footer}>
<ButtonGrid align="end" secondary={primaryActionButtons}>
{secondaryActionButtons}
</ButtonGrid>
</div>
)}
</>
}
placement={placement}
open
ref={ref}
targetElement={referenceElement}
/>
)}
</ClickOutside>
)}
</>
)}
</Stacked>
</Portal>
<div className={styles.content}>
<div className={styles.contentWrapper}>{children}</div>
</div>

{actions.length > 0 && (
<div className={styles.footer}>
<ButtonGrid align="end" secondary={primaryActionButtons}>
{secondaryActionButtons}
</ButtonGrid>
</div>
)}
</>
}
open
placement={placement}
portal={portal}
ref={ref}
targetElement={referenceElement}
/>
)}
</ClickOutside>
)}
</>
)}
</Stacked>
</>
)
}
Expand Down
93 changes: 41 additions & 52 deletions packages/@sanity/components/src/edititem/EditItemFoldOut.css
View file
Original file line number Diff line number Diff line change
@@ -1,101 +1,90 @@
@import 'part:@sanity/base/theme/variables-style';

:root {
--edit-item-fold-border-color: var(--brand-primary);
--edit-item-fold-dark-color: color(var(--edit-item-fold-border-color) lightness(- 20%));
--edit-item-fold-padding: var(--medium-padding);
}

:export {
padding: var(--edit-item-fold-padding);
}

@keyframes appear {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

.root {
position: relative;
display: block;
width: 100%;

z-index: var(--zindex-portal);
}

.wrapper {
.card {
composes: shadow-12dp from 'part:@sanity/base/theme/shadows-style';
box-sizing: border-box;
border: 1px solid var(--edit-item-fold-border-color);
background-color: var(--component-bg);
border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
margin-left: calc(var(--edit-item-fold-padding) * -1);
margin-right: calc(var(--edit-item-fold-padding) * -1);
margin-left: calc(var(--small-padding) * -1);
margin-right: calc(var(--small-padding) * -1);
width: calc(100% + var(--small-padding) * 2);
border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
max-height: 50vh;
position: relative;
animation: appear 0.2s linear;
width: calc(100% + var(--edit-item-fold-padding) * 2);
display: flex;
flex-direction: column;

@nest &::after {
content: '';
box-sizing: content-box;
display: block;
position: absolute;
top: calc(var(--edit-item-fold-padding) * -1);
top: calc((var(--small-padding) * -1) - 1px);
left: 0;
height: 0;
width: 0;
margin-left: -1px;
margin-top: -1px;
border-color: transparent;
border-bottom: var(--edit-item-fold-padding) solid var(--edit-item-fold-dark-color);
border-left: var(--edit-item-fold-padding) solid transparent;
border-bottom: calc(var(--small-padding) + 1px) solid var(--hairline-color);
border-left: calc(var(--small-padding) + 1px) solid transparent;
z-index: -1;
}

@nest &::before {
content: '';
box-sizing: content-box;
display: block;
position: absolute;
top: calc(var(--edit-item-fold-padding) * -1);
top: calc((var(--small-padding) * -1) - 1px);
right: 0;
height: 0;
width: 0;
margin-right: -1px;
margin-top: -1px;
border-color: transparent;
border-bottom: var(--edit-item-fold-padding) solid var(--edit-item-fold-dark-color);
border-right: var(--edit-item-fold-padding) solid transparent;
border-bottom: calc(var(--small-padding) + 1px) solid var(--hairline-color);
border-right: calc(var(--small-padding) + 1px) solid transparent;
z-index: -1;
}
}

.head {
background-color: var(--edit-item-fold-border-color);
padding: var(--small-padding);
height: 1.5em;
color: var(--white);
.header {
position: relative;
display: flex;
align-items: center;

@nest &::after {
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
bottom: -1px;
border-bottom: 1px solid var(--hairline-color);
z-index: 1;
}
}

.close {
pointer-events: auto;
outline: none;
color: var(--white);
display: block;
border: none;
background-color: transparent;
float: right;
.header__title {
flex: 1;
min-width: 0;
margin: -2px 0 -1px;
font-weight: 600;
padding: var(--medium-padding);
}

.closeDark {
composes: close;
color: var(--black);
.header__actions {
padding: var(--small-padding);
}

.content {
flex: 1;
min-height: 0;
padding: var(--medium-padding);
overflow: auto;
}

0 comments on commit eb10d2b

Please sign in to comment.