From 72be25efc79f9b5ac8298808492419f922a9f830 Mon Sep 17 00:00:00 2001 From: Daniel Date: Wed, 26 Feb 2020 15:58:12 -0800 Subject: [PATCH 01/10] Moving size prop into DialogTrigger and css fixes for fullscreen dialog --- .../components/dialog/index.css | 4 +- .../components/modal/index.css | 1 + .../@react-spectrum/dialog/src/Dialog.tsx | 9 +++-- .../dialog/src/DialogTrigger.tsx | 17 +++++--- .../dialog/stories/Dialog.stories.tsx | 24 ----------- .../dialog/stories/DialogTrigger.stories.tsx | 40 +++++++++++++++++++ .../@react-spectrum/overlays/src/Modal.tsx | 20 +++++++--- packages/@react-types/dialog/src/index.d.ts | 7 ++-- 8 files changed, 78 insertions(+), 44 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/dialog/index.css b/packages/@adobe/spectrum-css-temp/components/dialog/index.css index 1a5356fda0d..46159d94610 100644 --- a/packages/@adobe/spectrum-css-temp/components/dialog/index.css +++ b/packages/@adobe/spectrum-css-temp/components/dialog/index.css @@ -199,8 +199,8 @@ governing permissions and limitations under the License. } .spectrum-Dialog--fullscreen { - width: calc(100vw - 32px); - height: calc(100vh - 32px); + width: calc(100vw - 64px); + height: calc(100vh - 64px); } .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..cbcc7dc5cb5 100644 --- a/packages/@adobe/spectrum-css-temp/components/modal/index.css +++ b/packages/@adobe/spectrum-css-temp/components/modal/index.css @@ -115,6 +115,7 @@ only screen and (max-device-height: 350px) { bottom: var(--spectrum-dialog-fullscreen-margin); max-width: none; max-height: none; + border-radius: 0; } .spectrum-Modal--fullscreenTakeover { diff --git a/packages/@react-spectrum/dialog/src/Dialog.tsx b/packages/@react-spectrum/dialog/src/Dialog.tsx index 871ded00c4b..72a94cb38cd 100644 --- a/packages/@react-spectrum/dialog/src/Dialog.tsx +++ b/packages/@react-spectrum/dialog/src/Dialog.tsx @@ -43,13 +43,13 @@ export function Dialog(props: SpectrumDialogProps) { styleProps ), {className: classNames(styles, {'spectrum-Dialog--dismissable': isDismissable})} - ); + ); if (type === 'popover') { - return {children}; + return {children}; } else { return ( - + {children} {isDismissable && } onPress={onDismiss} />} @@ -72,6 +72,7 @@ let sizeMap = { function BaseDialog({children, slots, size = 'L', role, ...otherProps}: SpectrumBaseDialogProps) { let ref = useRef(); + let sizeVariant = sizeMap[size]; let {dialogProps} = useDialog({ref, role}); if (!slots) { slots = { @@ -94,7 +95,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..2425e881f07 100644 --- a/packages/@react-spectrum/dialog/src/DialogTrigger.tsx +++ b/packages/@react-spectrum/dialog/src/DialogTrigger.tsx @@ -27,6 +27,7 @@ export function DialogTrigger(props: SpectrumDialogTriggerProps) { mobileType = type === 'popover' ? 'modal' : type, hideArrow, targetRef, + size, ...positionProps } = props; let [trigger, content] = React.Children.toArray(children); @@ -57,7 +58,8 @@ export function DialogTrigger(props: SpectrumDialogTriggerProps) { targetRef={targetRef} trigger={trigger} content={content} - hideArrow={hideArrow} /> + hideArrow={hideArrow} + size={size} /> ); } @@ -65,7 +67,7 @@ export function DialogTrigger(props: SpectrumDialogTriggerProps) { switch (type) { case 'modal': return ( - + {content} ); @@ -85,11 +87,12 @@ export function DialogTrigger(props: SpectrumDialogTriggerProps) { onPress={onPress} onClose={onClose} trigger={trigger} - overlay={renderOverlay()} /> + overlay={renderOverlay()} + size={size} /> ); } -function PopoverTrigger({isOpen, onPress, onClose, targetRef, trigger, content, hideArrow, ...props}) { +function PopoverTrigger({isOpen, onPress, onClose, targetRef, trigger, content, hideArrow, size, ...props}) { let containerRef = useRef>(); let triggerRef = useRef(); let overlayRef = useRef(); @@ -134,14 +137,16 @@ function PopoverTrigger({isOpen, onPress, onClose, targetRef, trigger, content, triggerProps={triggerPropsWithRef} dialogProps={overlayAriaProps} trigger={trigger} - overlay={overlay} /> + overlay={overlay} + size={size} /> ); } -function DialogTriggerBase({type, isOpen, onPress, onClose, dialogProps = {}, triggerProps = {}, overlay, trigger}) { +function DialogTriggerBase({type, isOpen, onPress, onClose, dialogProps = {}, triggerProps = {}, overlay, trigger, size}) { let context = { type, onClose, + size, ...dialogProps }; diff --git a/packages/@react-spectrum/dialog/stories/Dialog.stories.tsx b/packages/@react-spectrum/dialog/stories/Dialog.stories.tsx index 0533b97d427..85f84ac3662 100644 --- a/packages/@react-spectrum/dialog/stories/Dialog.stories.tsx +++ b/packages/@react-spectrum/dialog/stories/Dialog.stories.tsx @@ -49,34 +49,10 @@ storiesOf('Dialog', module) 'with hero, isDimissable', () => renderHero({isDismissable: true, onDismiss: action('dismissed')}) ) - .add( - 'small', - () => render({size: 'S'}) - ) - .add( - 'medium', - () => render({size: 'M'}) - ) - .add( - 'large', - () => render({size: 'L'}) - ) - .add( - 'fullscreen', - () => render({size: 'fullscreen'}) - ) - .add( - 'fullscreenTakeover', - () => render({size: 'fullscreenTakeover'}) - ) .add( 'form', () => renderWithForm({}) ) - .add( - 'fullscreenTakeover form', - () => renderWithForm({size: 'fullscreenTakeover'}) - ) .add( 'three buttons', () => renderWithThreeButtons({}) diff --git a/packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx b/packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx index c308027867a..a492b485873 100644 --- a/packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx +++ b/packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx @@ -34,11 +34,51 @@ storiesOf('DialogTrigger', module) 'type: popover', () => render({type: 'popover'}) ) + .add( + 'type: popover, small', + () => render({type: 'popover', size: 'S'}) + ) + .add( + 'type: popover, medium', + () => render({type: 'popover', size: 'M'}) + ) + .add( + 'type: popover, large', + () => render({type: 'popover', size: 'L'}) + ) + .add( + 'type: popover, fullscreen', + () => render({type: 'popover', size: 'fullscreen'}) + ) + .add( + 'type: popover, fullscreenTakeover', + () => render({type: 'popover', size: 'fullscreenTakeover'}) + ) .add( 'type: modal', () => render({type: 'modal'}), {chromaticProvider: {scales: ['medium'], height: 1000}} ) + .add( + 'type: modal, small', + () => render({type: 'modal', size: 'S'}) + ) + .add( + 'type: modal, medium', + () => render({type: 'modal', size: 'M'}) + ) + .add( + 'type: modal, large', + () => render({type: 'modal', size: 'L'}) + ) + .add( + 'type: modal, fullscreen', + () => render({type: 'modal', size: 'fullscreen'}) + ) + .add( + 'type: modal, fullscreenTakeover', + () => render({type: 'modal', size: 'fullscreenTakeover'}) + ) .add( 'type: tray', () => render({type: 'tray'}), diff --git a/packages/@react-spectrum/overlays/src/Modal.tsx b/packages/@react-spectrum/overlays/src/Modal.tsx index 66385a33a24..9697e3a5768 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, + size?: 'S' | 'M' | 'L' | '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, size, ...otherProps} = props; return ( - + {children} ); } +let sizeMap = { + fullscreen: 'fullscreen', + fullscreenTakeover: 'fullscreenTakeover' +}; + function ModalWrapper(props: ModalWrapperProps) { - let {children, onClose, isOpen} = props; + let {children, onClose, isOpen, size} = props; + let sizeVariant = sizeMap[size]; 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--${sizeVariant}`]: sizeVariant} ); return ( diff --git a/packages/@react-types/dialog/src/index.d.ts b/packages/@react-types/dialog/src/index.d.ts index a4448f8f397..82d25cb8aa6 100644 --- a/packages/@react-types/dialog/src/index.d.ts +++ b/packages/@react-types/dialog/src/index.d.ts @@ -24,13 +24,14 @@ export interface SpectrumDialogTriggerProps extends PositionProps { isOpen?: boolean, defaultOpen?: boolean, onOpenChange?: (isOpen: boolean) => void, - isDismissable?: boolean + isDismissable?: boolean, + size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover' } export interface SpectrumBaseDialogProps extends HTMLAttributes { slots?: Slots, - size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover', - role?: 'dialog' | 'alertdialog' + role?: 'dialog' | 'alertdialog', + size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover' } export interface SpectrumDialogProps extends DOMProps, StyleProps { From 098c90bca1e54231268f6cf40dc55e2786b21918 Mon Sep 17 00:00:00 2001 From: Daniel Date: Wed, 26 Feb 2020 16:18:05 -0800 Subject: [PATCH 02/10] accidentally moved size in dialog types --- packages/@react-types/dialog/src/index.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/@react-types/dialog/src/index.d.ts b/packages/@react-types/dialog/src/index.d.ts index 82d25cb8aa6..1ba4f8f4fbb 100644 --- a/packages/@react-types/dialog/src/index.d.ts +++ b/packages/@react-types/dialog/src/index.d.ts @@ -30,8 +30,8 @@ export interface SpectrumDialogTriggerProps extends PositionProps { export interface SpectrumBaseDialogProps extends HTMLAttributes { slots?: Slots, - role?: 'dialog' | 'alertdialog', - size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover' + size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover', + role?: 'dialog' | 'alertdialog' } export interface SpectrumDialogProps extends DOMProps, StyleProps { From c2748ece87bf926ff792e43f0c9db2c5db0cf061 Mon Sep 17 00:00:00 2001 From: Daniel Date: Fri, 28 Feb 2020 11:45:54 -0800 Subject: [PATCH 03/10] Addressing review comments --- .../components/modal/index.css | 1 - packages/@react-spectrum/dialog/src/Dialog.tsx | 12 +++++++++--- .../dialog/stories/Dialog.stories.tsx | 18 +++++++++++++++++- .../dialog/stories/DialogTrigger.stories.tsx | 8 -------- 4 files changed, 26 insertions(+), 13 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/modal/index.css b/packages/@adobe/spectrum-css-temp/components/modal/index.css index cbcc7dc5cb5..b581ff148f3 100644 --- a/packages/@adobe/spectrum-css-temp/components/modal/index.css +++ b/packages/@adobe/spectrum-css-temp/components/modal/index.css @@ -115,7 +115,6 @@ only screen and (max-device-height: 350px) { bottom: var(--spectrum-dialog-fullscreen-margin); max-width: none; max-height: none; - border-radius: 0; } .spectrum-Modal--fullscreenTakeover { diff --git a/packages/@react-spectrum/dialog/src/Dialog.tsx b/packages/@react-spectrum/dialog/src/Dialog.tsx index 72a94cb38cd..a2f4cb8ceba 100644 --- a/packages/@react-spectrum/dialog/src/Dialog.tsx +++ b/packages/@react-spectrum/dialog/src/Dialog.tsx @@ -44,12 +44,18 @@ export function Dialog(props: SpectrumDialogProps) { ), {className: classNames(styles, {'spectrum-Dialog--dismissable': isDismissable})} ); - + // Prioritize size from context over Dialog size prop + let size = allProps.size || otherProps.size; + if (type === 'popover') { - return {children}; + if (size.indexOf('fullscreen') > -1) { + size = undefined; + } + + return {children}; } else { return ( - + {children} {isDismissable && } onPress={onDismiss} />} diff --git a/packages/@react-spectrum/dialog/stories/Dialog.stories.tsx b/packages/@react-spectrum/dialog/stories/Dialog.stories.tsx index 85f84ac3662..e4ba0bc82fa 100644 --- a/packages/@react-spectrum/dialog/stories/Dialog.stories.tsx +++ b/packages/@react-spectrum/dialog/stories/Dialog.stories.tsx @@ -49,10 +49,26 @@ storiesOf('Dialog', module) 'with hero, isDimissable', () => renderHero({isDismissable: true, onDismiss: action('dismissed')}) ) + .add( + 'small', + () => render({size: 'S'}) + ) + .add( + 'medium', + () => render({size: 'M'}) + ) + .add( + 'large', + () => render({size: 'L'}) + ) .add( 'form', () => renderWithForm({}) ) + .add( + 'fullscreenTakeover form', + () => renderWithForm({size: 'fullscreenTakeover'}) + ) .add( 'three buttons', () => renderWithThreeButtons({}) @@ -232,7 +248,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 a492b485873..17ad7d7eaaa 100644 --- a/packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx +++ b/packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx @@ -46,14 +46,6 @@ storiesOf('DialogTrigger', module) 'type: popover, large', () => render({type: 'popover', size: 'L'}) ) - .add( - 'type: popover, fullscreen', - () => render({type: 'popover', size: 'fullscreen'}) - ) - .add( - 'type: popover, fullscreenTakeover', - () => render({type: 'popover', size: 'fullscreenTakeover'}) - ) .add( 'type: modal', () => render({type: 'modal'}), From c0e34a2f919b74df937c3028db3c5d0415c628d4 Mon Sep 17 00:00:00 2001 From: Daniel Date: Fri, 28 Feb 2020 11:57:55 -0800 Subject: [PATCH 04/10] fixing tests --- packages/@react-spectrum/dialog/src/Dialog.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/@react-spectrum/dialog/src/Dialog.tsx b/packages/@react-spectrum/dialog/src/Dialog.tsx index a2f4cb8ceba..b808185f3a8 100644 --- a/packages/@react-spectrum/dialog/src/Dialog.tsx +++ b/packages/@react-spectrum/dialog/src/Dialog.tsx @@ -46,9 +46,9 @@ export function Dialog(props: SpectrumDialogProps) { ); // Prioritize size from context over Dialog size prop let size = allProps.size || otherProps.size; - + if (type === 'popover') { - if (size.indexOf('fullscreen') > -1) { + if (size && size.indexOf('fullscreen') > -1) { size = undefined; } From 7fd85cdeda81bdb9bb62d7647d40e2656601490c Mon Sep 17 00:00:00 2001 From: Daniel Date: Fri, 28 Feb 2020 12:27:18 -0800 Subject: [PATCH 05/10] adjusting fullscreen dialog padding to 40px as per design --- packages/@adobe/spectrum-css-temp/components/dialog/index.css | 4 ++-- packages/@adobe/spectrum-css-temp/components/modal/index.css | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/dialog/index.css b/packages/@adobe/spectrum-css-temp/components/dialog/index.css index 46159d94610..47d01677ee3 100644 --- a/packages/@adobe/spectrum-css-temp/components/dialog/index.css +++ b/packages/@adobe/spectrum-css-temp/components/dialog/index.css @@ -199,8 +199,8 @@ governing permissions and limitations under the License. } .spectrum-Dialog--fullscreen { - width: calc(100vw - 64px); - height: calc(100vh - 64px); + width: calc(100vw - 80px); + height: calc(100vh - 80px); } .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; } From f458ea419124d7a2efd1ca5f3d8703cf22768d91 Mon Sep 17 00:00:00 2001 From: Daniel Date: Fri, 28 Feb 2020 13:08:02 -0800 Subject: [PATCH 06/10] adding 40px dialog fullscreen var --- .../@adobe/spectrum-css-temp/components/dialog/index.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/dialog/index.css b/packages/@adobe/spectrum-css-temp/components/dialog/index.css index 47d01677ee3..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 - 80px); - height: calc(100vh - 80px); + 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; From de82990dbea88ca1d34a654cc54cd2b08ce26834 Mon Sep 17 00:00:00 2001 From: Daniel Date: Mon, 2 Mar 2020 15:22:16 -0800 Subject: [PATCH 07/10] Removing size for popover dialogs --- packages/@react-spectrum/dialog/src/Dialog.tsx | 10 +++------- .../@react-spectrum/dialog/src/DialogTrigger.tsx | 10 ++++------ .../dialog/stories/DialogTrigger.stories.tsx | 12 ------------ 3 files changed, 7 insertions(+), 25 deletions(-) diff --git a/packages/@react-spectrum/dialog/src/Dialog.tsx b/packages/@react-spectrum/dialog/src/Dialog.tsx index dd52f88980d..920e19be29e 100644 --- a/packages/@react-spectrum/dialog/src/Dialog.tsx +++ b/packages/@react-spectrum/dialog/src/Dialog.tsx @@ -44,14 +44,10 @@ export function Dialog(props: SpectrumDialogProps) { ), {className: classNames(styles, {'spectrum-Dialog--dismissable': isDismissable})} ); - // Prioritize size from context over Dialog size prop - let size = allProps.size || otherProps.size; + // Prioritize size from context over Dialog size prop, default as large otherwise + let size = type === 'popover' ? undefined : (allProps.size || otherProps.size || 'L'); if (type === 'popover') { - if (size && size.indexOf('fullscreen') > -1) { - size = undefined; - } - return {children}; } else { return ( @@ -76,7 +72,7 @@ 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}); diff --git a/packages/@react-spectrum/dialog/src/DialogTrigger.tsx b/packages/@react-spectrum/dialog/src/DialogTrigger.tsx index 2425e881f07..6739ab569e7 100644 --- a/packages/@react-spectrum/dialog/src/DialogTrigger.tsx +++ b/packages/@react-spectrum/dialog/src/DialogTrigger.tsx @@ -58,8 +58,7 @@ export function DialogTrigger(props: SpectrumDialogTriggerProps) { targetRef={targetRef} trigger={trigger} content={content} - hideArrow={hideArrow} - size={size} /> + hideArrow={hideArrow} /> ); } @@ -92,7 +91,7 @@ export function DialogTrigger(props: SpectrumDialogTriggerProps) { ); } -function PopoverTrigger({isOpen, onPress, onClose, targetRef, trigger, content, hideArrow, size, ...props}) { +function PopoverTrigger({isOpen, onPress, onClose, targetRef, trigger, content, hideArrow, ...props}) { let containerRef = useRef>(); let triggerRef = useRef(); let overlayRef = useRef(); @@ -137,12 +136,11 @@ function PopoverTrigger({isOpen, onPress, onClose, targetRef, trigger, content, triggerProps={triggerPropsWithRef} dialogProps={overlayAriaProps} trigger={trigger} - overlay={overlay} - size={size} /> + overlay={overlay} /> ); } -function DialogTriggerBase({type, isOpen, onPress, onClose, dialogProps = {}, triggerProps = {}, overlay, trigger, size}) { +function DialogTriggerBase({type, isOpen, onPress, onClose, dialogProps = {}, triggerProps = {}, overlay, trigger, size = null}) { let context = { type, onClose, diff --git a/packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx b/packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx index dfaf27f5876..1cbc2cbdc9a 100644 --- a/packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx +++ b/packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx @@ -34,18 +34,6 @@ storiesOf('DialogTrigger', module) 'type: popover', () => renderPopover({type: 'popover'}) ) - .add( - 'type: popover, small', - () => render({type: 'popover', size: 'S'}) - ) - .add( - 'type: popover, medium', - () => render({type: 'popover', size: 'M'}) - ) - .add( - 'type: popover, large', - () => render({type: 'popover', size: 'L'}) - ) .add( 'type: modal', () => render({type: 'modal'}), From e6ed66faa63923af92ad1bd4c8ba75c6ad5d22a2 Mon Sep 17 00:00:00 2001 From: Daniel Date: Thu, 5 Mar 2020 10:19:50 -0800 Subject: [PATCH 08/10] Updating context in prep for Rob's changes --- packages/@react-spectrum/dialog/src/Dialog.tsx | 2 +- packages/@react-spectrum/dialog/src/context.ts | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/@react-spectrum/dialog/src/Dialog.tsx b/packages/@react-spectrum/dialog/src/Dialog.tsx index 920e19be29e..b45e9874292 100644 --- a/packages/@react-spectrum/dialog/src/Dialog.tsx +++ b/packages/@react-spectrum/dialog/src/Dialog.tsx @@ -45,7 +45,7 @@ export function Dialog(props: SpectrumDialogProps) { {className: classNames(styles, {'spectrum-Dialog--dismissable': isDismissable})} ); // Prioritize size from context over Dialog size prop, default as large otherwise - let size = type === 'popover' ? undefined : (allProps.size || otherProps.size || 'L'); + let size = type === 'popover' ? undefined : (contextProps.size || otherProps.size || 'L'); if (type === 'popover') { return {children}; diff --git a/packages/@react-spectrum/dialog/src/context.ts b/packages/@react-spectrum/dialog/src/context.ts index 039903128e9..32e668e4ad6 100644 --- a/packages/@react-spectrum/dialog/src/context.ts +++ b/packages/@react-spectrum/dialog/src/context.ts @@ -14,7 +14,8 @@ import React, {HTMLAttributes} from 'react'; export interface DialogContextValue extends HTMLAttributes { type: 'modal' | 'popover' | 'tray', - onClose?: () => void + onClose?: () => void, + size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover' } export const DialogContext = React.createContext(null); From f21f0195340b83f351a47d17135711e05a13a08f Mon Sep 17 00:00:00 2001 From: Daniel Date: Thu, 5 Mar 2020 12:00:55 -0800 Subject: [PATCH 09/10] Replacing size in DialogTrigger with fullscreen (mobile)type --- .../@react-spectrum/dialog/src/Dialog.tsx | 7 +++-- .../dialog/src/DialogTrigger.tsx | 18 ++++++++----- .../@react-spectrum/dialog/src/context.ts | 3 +-- .../dialog/stories/Dialog.stories.tsx | 4 +-- .../dialog/stories/DialogTrigger.stories.tsx | 26 ++++++++----------- .../@react-spectrum/overlays/src/Modal.tsx | 14 +++++----- packages/@react-types/dialog/src/index.d.ts | 4 +-- 7 files changed, 39 insertions(+), 37 deletions(-) diff --git a/packages/@react-spectrum/dialog/src/Dialog.tsx b/packages/@react-spectrum/dialog/src/Dialog.tsx index b45e9874292..49ae3ad469b 100644 --- a/packages/@react-spectrum/dialog/src/Dialog.tsx +++ b/packages/@react-spectrum/dialog/src/Dialog.tsx @@ -44,12 +44,15 @@ export function Dialog(props: SpectrumDialogProps) { ), {className: classNames(styles, {'spectrum-Dialog--dismissable': isDismissable})} ); - // Prioritize size from context over Dialog size prop, default as large otherwise - let size = type === 'popover' ? undefined : (contextProps.size || otherProps.size || 'L'); + let size = type === 'popover' ? undefined : (otherProps.size || 'L'); if (type === 'popover') { return {children}; } else { + if (type === 'fullscreen' || type === 'fullscreenTakeover') { + size = type; + } + return ( {children} diff --git a/packages/@react-spectrum/dialog/src/DialogTrigger.tsx b/packages/@react-spectrum/dialog/src/DialogTrigger.tsx index 6739ab569e7..450e4e37c4f 100644 --- a/packages/@react-spectrum/dialog/src/DialogTrigger.tsx +++ b/packages/@react-spectrum/dialog/src/DialogTrigger.tsx @@ -27,7 +27,6 @@ export function DialogTrigger(props: SpectrumDialogTriggerProps) { mobileType = type === 'popover' ? 'modal' : type, hideArrow, targetRef, - size, ...positionProps } = props; let [trigger, content] = React.Children.toArray(children); @@ -64,9 +63,16 @@ export function DialogTrigger(props: SpectrumDialogTriggerProps) { let renderOverlay = () => { switch (type) { + case 'fullscreen': + case 'fullscreenTakeover': + return ( + + {content} + + ); case 'modal': return ( - + {content} ); @@ -86,8 +92,7 @@ export function DialogTrigger(props: SpectrumDialogTriggerProps) { onPress={onPress} onClose={onClose} trigger={trigger} - overlay={renderOverlay()} - size={size} /> + overlay={renderOverlay()} /> ); } @@ -140,11 +145,10 @@ function PopoverTrigger({isOpen, onPress, onClose, targetRef, trigger, content, ); } -function DialogTriggerBase({type, isOpen, onPress, onClose, dialogProps = {}, triggerProps = {}, overlay, trigger, size = null}) { +function DialogTriggerBase({type, isOpen, onPress, onClose, dialogProps = {}, triggerProps = {}, overlay, trigger}) { let context = { type, onClose, - size, ...dialogProps }; @@ -153,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/src/context.ts b/packages/@react-spectrum/dialog/src/context.ts index 32e668e4ad6..039903128e9 100644 --- a/packages/@react-spectrum/dialog/src/context.ts +++ b/packages/@react-spectrum/dialog/src/context.ts @@ -14,8 +14,7 @@ import React, {HTMLAttributes} from 'react'; export interface DialogContextValue extends HTMLAttributes { type: 'modal' | 'popover' | 'tray', - onClose?: () => void, - size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover' + onClose?: () => void } export const DialogContext = React.createContext(null); diff --git a/packages/@react-spectrum/dialog/stories/Dialog.stories.tsx b/packages/@react-spectrum/dialog/stories/Dialog.stories.tsx index 0bc1646d826..f96ccd1bc13 100644 --- a/packages/@react-spectrum/dialog/stories/Dialog.stories.tsx +++ b/packages/@react-spectrum/dialog/stories/Dialog.stories.tsx @@ -68,7 +68,7 @@ storiesOf('Dialog', module) ) .add( 'fullscreenTakeover form', - () => renderWithForm({size: 'fullscreenTakeover'}) + () => renderWithForm({type: 'fullscreenTakeover'}) ) .add( 'three buttons', @@ -253,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 1cbc2cbdc9a..6fe2973485c 100644 --- a/packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx +++ b/packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx @@ -40,29 +40,25 @@ storiesOf('DialogTrigger', module) {chromaticProvider: {scales: ['medium'], height: 1000}} ) .add( - 'type: modal, small', - () => render({type: 'modal', size: 'S'}) + 'type: fullscreen', + () => render({type: 'fullscreen'}) ) .add( - 'type: modal, medium', - () => render({type: 'modal', size: 'M'}) + 'type: fullscreenTakeover', + () => render({type: 'fullscreenTakeover'}) ) .add( - 'type: modal, large', - () => render({type: 'modal', size: 'L'}) - ) - .add( - 'type: modal, fullscreen', - () => render({type: 'modal', size: 'fullscreen'}) + 'type: tray', + () => renderPopover({type: 'tray'}), + {chromaticProvider: {scales: ['medium'], height: 1000}} ) .add( - 'type: modal, fullscreenTakeover', - () => render({type: 'modal', size: 'fullscreenTakeover'}) + 'mobileType: fullscreen', + () => render({type: 'modal', mobileType: 'fullscreen'}) ) .add( - 'type: tray', - () => renderPopover({type: 'tray'}), - {chromaticProvider: {scales: ['medium'], height: 1000}} + 'mobileType: fullscreenTakeover', + () => render({type: 'modal', mobileType: 'fullscreenTakeover'}) ) .add( 'popover with mobileType: modal', diff --git a/packages/@react-spectrum/overlays/src/Modal.tsx b/packages/@react-spectrum/overlays/src/Modal.tsx index 9697e3a5768..7ee9f975ed0 100644 --- a/packages/@react-spectrum/overlays/src/Modal.tsx +++ b/packages/@react-spectrum/overlays/src/Modal.tsx @@ -22,7 +22,7 @@ interface ModalProps { children: ReactElement, isOpen?: boolean, onClose?: () => void, - size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover' + type?: 'fullscreen' | 'fullscreenTakeover' } interface ModalWrapperProps extends ModalProps { @@ -30,28 +30,28 @@ interface ModalWrapperProps extends ModalProps { } export function Modal(props: ModalProps) { - let {children, onClose, size, ...otherProps} = props; + let {children, onClose, type, ...otherProps} = props; return ( + type={type}> {children} ); } -let sizeMap = { +let typeMap = { fullscreen: 'fullscreen', fullscreenTakeover: 'fullscreenTakeover' }; function ModalWrapper(props: ModalWrapperProps) { - let {children, onClose, isOpen, size} = props; - let sizeVariant = sizeMap[size]; + let {children, onClose, isOpen, type} = props; + let typeVariant = typeMap[type]; let ref = useRef(null); let {overlayProps} = useOverlay({ref, onClose, isOpen}); useModal(); @@ -77,7 +77,7 @@ function ModalWrapper(props: ModalWrapperProps) { 'spectrum-Modal', 'react-spectrum-Modal' ), - {[`spectrum-Modal--${sizeVariant}`]: sizeVariant} + {[`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 1ba4f8f4fbb..4999675b755 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, From cffe870b87a79b0751331ae634c2cd3c8eb08c71 Mon Sep 17 00:00:00 2001 From: Daniel Date: Thu, 5 Mar 2020 12:03:41 -0800 Subject: [PATCH 10/10] forgot to remove size from dialog trigger types --- packages/@react-types/dialog/src/index.d.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/@react-types/dialog/src/index.d.ts b/packages/@react-types/dialog/src/index.d.ts index 4999675b755..9a05a2cc331 100644 --- a/packages/@react-types/dialog/src/index.d.ts +++ b/packages/@react-types/dialog/src/index.d.ts @@ -24,8 +24,7 @@ export interface SpectrumDialogTriggerProps extends PositionProps { isOpen?: boolean, defaultOpen?: boolean, onOpenChange?: (isOpen: boolean) => void, - isDismissable?: boolean, - size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover' + isDismissable?: boolean } export interface SpectrumBaseDialogProps extends HTMLAttributes {