(RSP-1526) Moving size prop into DialogTrigger and css fixes for fullscreen dialog

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;

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;
 }
 

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 <BaseDialog {...allProps} size={otherProps.size}>{children}</BaseDialog>;
+    return <BaseDialog {...allProps} size={size}>{children}</BaseDialog>;
   } else {
+    if (type === 'fullscreen' || type === 'fullscreenTakeover') {
+      size = type;
+    }
+
     return (
-      <ModalDialog {...allProps} size={otherProps.size}>
+      <ModalDialog {...allProps} size={size}>
         {children}
         {isDismissable && <ActionButton slot="closeButton" isQuiet icon={<CrossLarge size="L" />} onPress={onDismiss} />}
       </ModalDialog>
@@ -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}>

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 (
+          <Modal isOpen={isOpen} onClose={onClose} type={type}>
+            {content}
+          </Modal>
+        );
       case 'modal':
         return (
           <Modal isOpen={isOpen} onClose={onClose}>
@@ -150,7 +157,7 @@ function DialogTriggerBase({type, isOpen, onPress, onClose, dialogProps = {}, tr
       <PressResponder
         {...triggerProps}
         onPress={onPress}
-        isPressed={isOpen && type !== 'modal'}>
+        isPressed={isOpen && type !== 'modal' && type !== 'fullscreen' && type !== 'fullscreenTakeover'}>
         {trigger}
       </PressResponder>
       <DialogContext.Provider value={context}>

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 (
     <div style={{display: 'flex', width, margin: '100px 0'}}>
-      <DialogTrigger isOpen>
+      <DialogTrigger isOpen type={props.type}>
         <ActionButton>Trigger</ActionButton>
         <Dialog {...props}>
           <Header><Text slot="title">The Title</Text></Header>

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'}),

packages/@react-spectrum/overlays/src/Modal.tsx

@@ -21,28 +21,37 @@ import {useModal, useOverlay} from '@react-aria/overlays';
 interface ModalProps {
   children: ReactElement,
   isOpen?: boolean,
-  onClose?: () => void
+  onClose?: () => void,
+  type?: 'fullscreen' | 'fullscreenTakeover'
 }
 
 interface ModalWrapperProps extends ModalProps {
   isOpen?: boolean
 }
 
 export function Modal(props: ModalProps) {
-  let {children, onClose, ...otherProps} = props;
+  let {children, onClose, type, ...otherProps} = props;
 
   return (
     <Overlay {...otherProps}>
       <Underlay />
-      <ModalWrapper onClose={onClose}>
+      <ModalWrapper 
+        onClose={onClose} 
+        type={type}>
         {children}
       </ModalWrapper>
     </Overlay>
   );
 }
 
+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 (

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<HTMLElement>,
   isOpen?: boolean,