Add full screen on mobile modal variant

CP-2753 CP-2812 Co-authored-by: Matthieu Bué <[email protected]>
cmolina · Nov 22, 2021 · c6c8278 · c6c8278
1 parent 6dd384b
commit c6c8278
Show file tree

Hide file tree

Showing 4 changed files with 181 additions and 107 deletions.
diff --git a/applications/storybook/src/stories/components/Modal.mdx b/applications/storybook/src/stories/components/Modal.mdx
@@ -48,6 +48,14 @@ This is easy to see in this example as there is a lot of content, however this c
     <Story id="components-modal--a-lot-of-content" />
 </Canvas>
 
+### Full screen on mobile
+
+Modals can cover the entire screen on mobile widths by using the `fullscreenOnMobile` prop.
+
+<Canvas>
+    <Story id="components-modal--fullscreen-on-mobile" />
+</Canvas>
+
 ### AlertModal
 
 The `AlertModal` is a special variant of the `Modal` component.

diff --git a/applications/storybook/src/stories/components/Modal.stories.tsx b/applications/storybook/src/stories/components/Modal.stories.tsx
@@ -228,6 +228,42 @@ export const ALotOfContent = () => {
     );
 };
 
+export const FullscreenOnMobile = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <div className="text-center">
+            <Button
+                className="mr0-5"
+                onClick={() => {
+                    setOpen(true);
+                }}
+            >
+                Open full screen on mobile modal
+            </Button>
+            <ModalTwo fullscreenOnMobile open={open} onClose={() => setOpen(false)}>
+                <ModalTwoHeader />
+                <ModalTwoContent>
+                    <ModalTwoTitle>I&apos;m full screen on mobile</ModalTwoTitle>
+                    <p>
+                        If I&apos;m not full screen you&apos;ll have to make your screen&apos;s width smaller. If you
+                        did that and I&apos;m still not fullscreen that means my developers did a shlopey job.
+                    </p>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium unde, blanditiis rem
+                        accusamus obcaecati enim amet, voluptatibus nemo facilis illum aut itaque in? Deleniti iure amet
+                        qui vero, blanditiis quos?
+                    </p>
+                </ModalTwoContent>
+                <ModalTwoFooter>
+                    <Button>Secondary action</Button>
+                    <Button color="norm">Primary action</Button>
+                </ModalTwoFooter>
+            </ModalTwo>
+        </div>
+    );
+};
+
 export const Alert = () => {
     const [open, setOpen] = useState(false);
 

diff --git a/packages/components/components/modalTwo/Modal.scss b/packages/components/components/modalTwo/Modal.scss
@@ -1,109 +1,124 @@
 @import '~@proton/styles/scss/config';
 
+.modal-two-backdrop {
+	position: fixed;
+	inset: 0;
+	z-index: 666;
+	display: flex;
+	padding: 2em;
+	overflow: hidden;
+	flex-flow: column nowrap;
+	align-items: center;
+	justify-content: center;
+	background: var(--backdrop-norm);
+	animation: 0.1s ease-out forwards;
+	animation-name: anime-modal-two-backdrop-in;
+
+	@include respond-to($breakpoint-tiny) {
+		padding: 1em;
+	}
+
+	&--out {
+		animation-name: anime-modal-two-backdrop-out;
+
+		.modal-two {
+			animation-name: anime-modal-two-out;
+		}
+	}
+
+	&--fullscreen-on-mobile {
+		@include respond-to($breakpoint-tiny) {
+			padding: 0;
+			align-items: stretch;
+			background: none;
+		}
+	}
+
+	@keyframes anime-modal-two-backdrop-in {
+		from {
+			opacity: 0;
+		}
+
+		to {
+			opacity: 1;
+		}
+	}
+
+	@keyframes anime-modal-two-backdrop-out {
+		from {
+			opacity: 1;
+		}
+
+		to {
+			opacity: 0;
+		}
+	}
+}
+
 .modal-two {
-  --size: #{rem(480)}; // medium
-  --margin: #{rem(48)};
-
-  @include respond-to(392) {
-    --margin: #{rem(24)};
-  }
-
-  position: relative;
-  display: flex;
-  max-inline-size: var(--size);
-  overflow: hidden;
-  padding: 0;
-  margin: auto;
-  transform-origin: center top;
-  flex: 0 1 auto;
-  flex-flow: column nowrap;
-  justify-content: flex-start;
-  align-items: stretch;
-  border-radius: var(--border-radius-large);
-  box-shadow: var(--shadow-lifted);
-  background: var(--background-norm);
-  color: var(--text-norm);
-  animation: .25s easing(easeOutCubic) forwards;
-  animation-name: anime-modal-two-in;
-
-  &--small {
-    --size: #{rem(392)};
-    --margin: #{rem(24)};
-  }
-
-  &--large {
-    --size: #{rem(600)};
-  }
-
-  &--full {
-    --size: 100%;
-    inline-size: var(--size);
-  }
-
-  &-backdrop--out & {
-    animation-name: anime-modal-two-out;
-  }
-
-  @keyframes anime-modal-two-in {
-    0% {
-      transform: scale(0.9);
-    }
-
-    100% {
-      transform: scale(1);
-    }
-  }
-
-  @keyframes anime-modal-two-out {
-    0% {
-      transform: scale(1);
-    }
-
-    100% {
-      transform: scale(0.9);
-    }
-  }
-
-  &-backdrop {
-    position: fixed;
-    inset: 0;
-    z-index: 666;
-    display: flex;
-    padding: 2em;
-    overflow: hidden;
-    flex-flow: column nowrap;
-    align-items: center;
-    justify-content: center;
-    background: var(--backdrop-norm);
-    animation: 0.1s ease-out forwards;
-    animation-name: anime-modal-two-backdrop-in;
-
-    @include respond-to(392) {
-      padding: 1em;
-    }
-
-    &--out {
-      animation-name: anime-modal-two-backdrop-out;
-    }
-  }
-
-  @keyframes anime-modal-two-backdrop-in {
-    from {
-      opacity: 0;
-    }
-
-    to {
-      opacity: 1;
-    }
-  }
-
-  @keyframes anime-modal-two-backdrop-out {
-    from {
-      opacity: 1;
-    }
-
-    to {
-      opacity: 0;
-    }
-  }
+	--size: #{rem(480)}; // medium
+	--margin: #{rem(48)};
+
+	@include respond-to($breakpoint-tiny) {
+		--margin: #{rem(24)};
+	}
+
+	position: relative;
+	display: flex;
+	max-inline-size: var(--size);
+	overflow: hidden;
+	padding: 0;
+	margin: auto;
+	transform-origin: center top;
+	flex: 0 1 auto;
+	flex-flow: column nowrap;
+	justify-content: flex-start;
+	align-items: stretch;
+	border-radius: var(--border-radius-large);
+	box-shadow: var(--shadow-lifted);
+	background: var(--background-norm);
+	color: var(--text-norm);
+	animation: 0.25s easing(easeOutCubic) both;
+	animation-name: anime-modal-two-in;
+
+	&--small {
+		--size: #{rem(392)};
+		--margin: #{rem(24)};
+	}
+
+	&--large {
+		--size: #{rem(600)};
+	}
+
+	&--full {
+		--size: 100%;
+		inline-size: var(--size);
+	}
+
+	&-backdrop--fullscreen-on-mobile & {
+		@include respond-to($breakpoint-tiny) {
+			flex: 1 0 100%;
+			border-radius: 0;
+		}
+	}
+
+	@keyframes anime-modal-two-in {
+		0% {
+			transform: scale(0.9);
+		}
+
+		100% {
+			transform: scale(1);
+		}
+	}
+
+	@keyframes anime-modal-two-out {
+		0% {
+			transform: scale(1);
+		}
+
+		100% {
+			transform: scale(0.9);
+		}
+	}
 }
diff --git a/packages/components/components/modalTwo/Modal.tsx b/packages/components/components/modalTwo/Modal.tsx
@@ -46,7 +46,18 @@ interface ModalOwnProps {
 export type ModalProps = ModalOwnProps & ComponentPropsWithoutRef<'div'>;
 
 const Modal = (props: ModalProps) => {
-    const { open, small, large, full, children, onClose, disableCloseOnEscape, className, ...rest } = props;
+    const {
+        open,
+        small,
+        large,
+        full,
+        fullscreenOnMobile,
+        children,
+        onClose,
+        disableCloseOnEscape,
+        className,
+        ...rest
+    } = props;
 
     const [exiting, setExiting] = useState(false);
 
@@ -98,7 +109,11 @@ const Modal = (props: ModalProps) => {
         }
     };
 
-    const backdropClassname = classnames(['modal-two-backdrop', exiting && 'modal-two-backdrop--out']);
+    const backdropClassname = classnames([
+        'modal-two-backdrop',
+        exiting && 'modal-two-backdrop--out',
+        fullscreenOnMobile && 'modal-two-backdrop--fullscreen-on-mobile',
+    ]);
 
     const dialogClassName = classnames([
         'modal-two',