diff --git a/packages/@adobe/spectrum-css-temp/components/dialog/index.css b/packages/@adobe/spectrum-css-temp/components/dialog/index.css index 1a5356fda0d..5f2245ea167 100644 --- a/packages/@adobe/spectrum-css-temp/components/dialog/index.css +++ b/packages/@adobe/spectrum-css-temp/components/dialog/index.css @@ -23,6 +23,9 @@ governing permissions and limitations under the License. /* The font-weight of the fullscreen dialog header */ --spectrum-dialog-fullscreen-header-text-font-weight: 100; + /* Distance between top and bottom of dialog and edge of window for fullscreen dialog */ + --spectrum-dialog-fullscreen-margin: 40px; + --spectrum-dialog-small-width: 400px; --spectrum-dialog-medium-width: 480px; --spectrum-dialog-large-width: 640px; @@ -199,8 +202,8 @@ governing permissions and limitations under the License. } .spectrum-Dialog--fullscreen { - width: calc(100vw - 32px); - height: calc(100vh - 32px); + width: calc(100vw - calc(2 * var(--spectrum-dialog-fullscreen-margin))); + height: calc(100vw - calc(2 * var(--spectrum-dialog-fullscreen-margin))); } .spectrum-Dialog--fullscreenTakeover { width: 100vw; diff --git a/packages/@adobe/spectrum-css-temp/components/modal/index.css b/packages/@adobe/spectrum-css-temp/components/modal/index.css index b581ff148f3..74f96830537 100644 --- a/packages/@adobe/spectrum-css-temp/components/modal/index.css +++ b/packages/@adobe/spectrum-css-temp/components/modal/index.css @@ -20,7 +20,7 @@ governing permissions and limitations under the License. --spectrum-dialog-exit-animation-delay: 0ms; /* Distance between top and bottom of dialog and edge of window for fullscreen dialog */ - --spectrum-dialog-fullscreen-margin: 32px; + --spectrum-dialog-fullscreen-margin: 40px; --spectrum-dialog-max-height: 90vh; } diff --git a/packages/@react-spectrum/dialog/src/Dialog.tsx b/packages/@react-spectrum/dialog/src/Dialog.tsx index 98ce6c54ea5..49ae3ad469b 100644 --- a/packages/@react-spectrum/dialog/src/Dialog.tsx +++ b/packages/@react-spectrum/dialog/src/Dialog.tsx @@ -43,13 +43,18 @@ export function Dialog(props: SpectrumDialogProps) { styleProps ), {className: classNames(styles, {'spectrum-Dialog--dismissable': isDismissable})} - ); + ); + let size = type === 'popover' ? undefined : (otherProps.size || 'L'); if (type === 'popover') { - return {children}; + return {children}; } else { + if (type === 'fullscreen' || type === 'fullscreenTakeover') { + size = type; + } + return ( - + {children} {isDismissable && } onPress={onDismiss} />} @@ -70,8 +75,9 @@ let sizeMap = { fullscreenTakeover: 'fullscreenTakeover' }; -function BaseDialog({children, slots, size = 'L', role, ...otherProps}: SpectrumBaseDialogProps) { +function BaseDialog({children, slots, size, role, ...otherProps}: SpectrumBaseDialogProps) { let ref = useRef(); + let sizeVariant = sizeMap[size]; let {dialogProps} = useDialog({ref, role}); if (!slots) { slots = { @@ -94,7 +100,7 @@ function BaseDialog({children, slots, size = 'L', role, ...otherProps}: Spectrum className={classNames( styles, 'spectrum-Dialog', - {[`spectrum-Dialog--${sizeMap[size]}`]: size}, + {[`spectrum-Dialog--${sizeVariant}`]: sizeVariant}, otherProps.className )} ref={ref}> diff --git a/packages/@react-spectrum/dialog/src/DialogTrigger.tsx b/packages/@react-spectrum/dialog/src/DialogTrigger.tsx index a3efe107c48..450e4e37c4f 100644 --- a/packages/@react-spectrum/dialog/src/DialogTrigger.tsx +++ b/packages/@react-spectrum/dialog/src/DialogTrigger.tsx @@ -63,6 +63,13 @@ export function DialogTrigger(props: SpectrumDialogTriggerProps) { let renderOverlay = () => { switch (type) { + case 'fullscreen': + case 'fullscreenTakeover': + return ( + + {content} + + ); case 'modal': return ( @@ -150,7 +157,7 @@ function DialogTriggerBase({type, isOpen, onPress, onClose, dialogProps = {}, tr + isPressed={isOpen && type !== 'modal' && type !== 'fullscreen' && type !== 'fullscreenTakeover'}> {trigger} diff --git a/packages/@react-spectrum/dialog/stories/Dialog.stories.tsx b/packages/@react-spectrum/dialog/stories/Dialog.stories.tsx index c1811318cb3..f96ccd1bc13 100644 --- a/packages/@react-spectrum/dialog/stories/Dialog.stories.tsx +++ b/packages/@react-spectrum/dialog/stories/Dialog.stories.tsx @@ -62,21 +62,13 @@ storiesOf('Dialog', module) 'large', () => render({size: 'L'}) ) - .add( - 'fullscreen', - () => render({size: 'fullscreen'}) - ) - .add( - 'fullscreenTakeover', - () => render({size: 'fullscreenTakeover'}) - ) .add( 'form', () => renderWithForm({}) ) .add( 'fullscreenTakeover form', - () => renderWithForm({size: 'fullscreenTakeover'}) + () => renderWithForm({type: 'fullscreenTakeover'}) ) .add( 'three buttons', @@ -261,7 +253,7 @@ function renderAlert({width = 'auto', ...props}: SpectrumAlertDialogProps) { function renderWithForm({width = 'auto', ...props}) { return (
- + Trigger
The Title
diff --git a/packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx b/packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx index 65179c9a7b1..6fe2973485c 100644 --- a/packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx +++ b/packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx @@ -39,11 +39,27 @@ storiesOf('DialogTrigger', module) () => render({type: 'modal'}), {chromaticProvider: {scales: ['medium'], height: 1000}} ) + .add( + 'type: fullscreen', + () => render({type: 'fullscreen'}) + ) + .add( + 'type: fullscreenTakeover', + () => render({type: 'fullscreenTakeover'}) + ) .add( 'type: tray', () => renderPopover({type: 'tray'}), {chromaticProvider: {scales: ['medium'], height: 1000}} ) + .add( + 'mobileType: fullscreen', + () => render({type: 'modal', mobileType: 'fullscreen'}) + ) + .add( + 'mobileType: fullscreenTakeover', + () => render({type: 'modal', mobileType: 'fullscreenTakeover'}) + ) .add( 'popover with mobileType: modal', () => renderPopover({type: 'popover', mobileType: 'modal'}), diff --git a/packages/@react-spectrum/overlays/src/Modal.tsx b/packages/@react-spectrum/overlays/src/Modal.tsx index 66385a33a24..7ee9f975ed0 100644 --- a/packages/@react-spectrum/overlays/src/Modal.tsx +++ b/packages/@react-spectrum/overlays/src/Modal.tsx @@ -21,7 +21,8 @@ import {useModal, useOverlay} from '@react-aria/overlays'; interface ModalProps { children: ReactElement, isOpen?: boolean, - onClose?: () => void + onClose?: () => void, + type?: 'fullscreen' | 'fullscreenTakeover' } interface ModalWrapperProps extends ModalProps { @@ -29,20 +30,28 @@ interface ModalWrapperProps extends ModalProps { } export function Modal(props: ModalProps) { - let {children, onClose, ...otherProps} = props; + let {children, onClose, type, ...otherProps} = props; return ( - + {children} ); } +let typeMap = { + fullscreen: 'fullscreen', + fullscreenTakeover: 'fullscreenTakeover' +}; + function ModalWrapper(props: ModalWrapperProps) { - let {children, onClose, isOpen} = props; + let {children, onClose, isOpen, type} = props; + let typeVariant = typeMap[type]; let ref = useRef(null); let {overlayProps} = useOverlay({ref, onClose, isOpen}); useModal(); @@ -67,7 +76,8 @@ function ModalWrapper(props: ModalWrapperProps) { overrideStyles, 'spectrum-Modal', 'react-spectrum-Modal' - ) + ), + {[`spectrum-Modal--${typeVariant}`]: typeVariant} ); return ( diff --git a/packages/@react-types/dialog/src/index.d.ts b/packages/@react-types/dialog/src/index.d.ts index a4448f8f397..9a05a2cc331 100644 --- a/packages/@react-types/dialog/src/index.d.ts +++ b/packages/@react-types/dialog/src/index.d.ts @@ -17,8 +17,8 @@ import {Slots} from '@react-types/layout'; export interface SpectrumDialogTriggerProps extends PositionProps { children: ReactElement[], - type?: 'modal' | 'popover' | 'tray', - mobileType?: 'modal' | 'tray', + type?: 'modal' | 'popover' | 'tray' | 'fullscreen' | 'fullscreenTakeover', + mobileType?: 'modal' | 'tray' | 'fullscreen' | 'fullscreenTakeover', hideArrow?: boolean, targetRef?: RefObject, isOpen?: boolean,