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