Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve immersive Modal display on iOS #1087

Merged
merged 2 commits into from
Aug 5, 2021
Merged

Improve immersive Modal display on iOS #1087

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b40b6df
Improve immersive Modal height on iOS
connor-baer Aug 5, 2021
7658274
Add changeset
connor-baer Aug 5, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/thick-cougars-heal.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@sumup/circuit-ui': patch
---

Improved fullscreen display of immersive Modals on iOS and added bottom padding to the Modal content to clear any browser chrome overlays.
10 changes: 5 additions & 5 deletions packages/circuit-ui/components/Modal/Modal.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export const Base = (modal: ModalProps): JSX.Element => {

Base.args = {
children: (
<Headline as="h2" size="four">
<Headline as="h2" size="four" noMargin>
Hello World!
</Headline>
),
Expand Down Expand Up @@ -88,7 +88,7 @@ export const Variants = (modal: ModalProps): JSX.Element => {

Variants.args = {
children: (
<Headline as="h2" size="four">
<Headline as="h2" size="four" noMargin>
Hello World!
</Headline>
),
Expand All @@ -115,7 +115,7 @@ export const PreventClose = (modal: ModalProps): JSX.Element => {
PreventClose.args = {
children: ({ onClose }: { onClose: ModalProps['onClose'] }) => (
<Fragment>
<Headline as="h2" size="four">
<Headline as="h2" size="four" noMargin>
Complete the action
</Headline>
<Body>
Expand Down Expand Up @@ -178,10 +178,10 @@ CustomStyles.args = {
children: (
<Fragment>
<Image src="https://source.unsplash.com/TpHmEoVSmfQ/1600x900" alt="" />
<Headline as="h2" size="four" css={spacing('mega')}>
<Headline as="h2" size="four" css={spacing('mega')} noMargin>
Custom styles
</Headline>
<Body css={spacing('mega')}>
<Body css={spacing('mega')} noMargin>
Custom styles can be applied using the <code>css</code> prop.
</Body>
</Fragment>
Expand Down
155 changes: 71 additions & 84 deletions packages/circuit-ui/components/Modal/Modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,11 +88,13 @@ const contentStyles = ({ theme }: StyleProps) => css`
${theme.mq.untilKilo} {
-webkit-overflow-scrolling: touch;
padding: ${theme.spacings.mega};
padding-bottom: calc(env(safe-area-inset-bottom) + ${theme.spacings.mega});
width: 100vw;
}

${theme.mq.kilo} {
padding: ${theme.spacings.giga};
padding-bottom: calc(env(safe-area-inset-bottom) + ${theme.spacings.giga});
max-height: 90vh;
min-width: 480px;
max-width: 90vw;
Expand Down Expand Up @@ -121,15 +123,7 @@ const contentVariantStyles = ({
if (variant === 'immersive') {
return css`
${theme.mq.untilKilo} {
height: 100vh;
}

/* iOS viewport bug fix */
/* https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/ */
@supports (max-height: -webkit-fill-available) {
${theme.mq.untilKilo} {
height: 80vh;
}
height: 100%;
}
`;
}
Expand Down Expand Up @@ -171,113 +165,106 @@ export const Modal: ModalComponent<ModalProps> = ({
const styles = {
base: cx(
cssString`
position: fixed;
outline: none;
background-color: ${theme.colors.white};

&::after {
position: fixed;
content: '';
display: block;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(
rgba(255,255,255,0),
rgba(255,255,255,0.66),
rgba(255,255,255,1)
);
}

${theme.mq.untilKilo} {
right: 0;
bottom: 0;
left: 0;
transform: translateY(100%);
transition: transform ${TRANSITION_DURATION_MOBILE}ms ease-in-out;
outline: none;
background-color: ${theme.colors.white};

&::after {
height: ${theme.spacings.mega};
position: fixed;
content: '';
display: block;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(
rgba(255,255,255,0),
rgba(255,255,255,0.66),
rgba(255,255,255,1)
);
}
}

${theme.mq.kilo} {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity ${TRANSITION_DURATION_DESKTOP}ms ease-in-out;
border-radius: ${theme.borderRadius.mega};
${theme.mq.untilKilo} {
right: 0;
bottom: 0;
left: 0;
transform: translateY(100%);
transition: transform ${TRANSITION_DURATION_MOBILE}ms ease-in-out;

&::after {
height: ${theme.spacings.giga};
border-bottom-left-radius: ${theme.borderRadius.mega};
border-bottom-right-radius: ${theme.borderRadius.mega};
&::after {
height: ${theme.spacings.mega};
}
}

${theme.mq.kilo} {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity ${TRANSITION_DURATION_DESKTOP}ms ease-in-out;
border-radius: ${theme.borderRadius.mega};

&::after {
height: ${theme.spacings.giga};
border-bottom-left-radius: ${theme.borderRadius.mega};
border-bottom-right-radius: ${theme.borderRadius.mega};
}
}
}
`,
variant === 'contextual' &&
cssString`
${theme.mq.untilKilo} {
border-top-left-radius: ${theme.borderRadius.mega};
border-top-right-radius: ${theme.borderRadius.mega};
}
`,
variant === 'immersive' &&
cssString`
/* iOS viewport bug fix */
/* https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/ */
@supports (max-height: -webkit-fill-available) {
${theme.mq.untilKilo} {
border-top-left-radius: ${theme.borderRadius.mega};
border-top-right-radius: ${theme.borderRadius.mega};
}
}
`,
variant === 'immersive' &&
cssString`
top: 0;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@robinmetral This did the trick for fullscreen on iOS: by setting both top and bottom to 0, we can use 100% instead of 100vh.

`,
),
// The !important below is necessary because of some weird
// style specificity issues in Emotion.
afterOpen: cssString`
${theme.mq.untilKilo} {
transform: translateY(0) !important;
}
${theme.mq.untilKilo} {
transform: translateY(0) !important;
}

${theme.mq.kilo} {
opacity: 1 !important;
}
`,
${theme.mq.kilo} {
opacity: 1 !important;
}
`,
beforeClose: cssString`
${theme.mq.untilKilo} {
transform: translateY(100%);
}
${theme.mq.untilKilo} {
transform: translateY(100%) !important;
}

${theme.mq.kilo} {
opacity: 0;
}
${theme.mq.kilo} {
opacity: 0 !important;
}
`,
};

const overlayStyles = {
base: cssString`
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0;
transition: opacity ${TRANSITION_DURATION_MOBILE}ms ease-in-out;
background: ${theme.colors.overlay};
z-index: ${theme.zIndex.modal};
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0;
transition: opacity ${TRANSITION_DURATION_MOBILE}ms ease-in-out;
background: ${theme.colors.overlay};
z-index: ${theme.zIndex.modal};

${theme.mq.kilo} {
transition: opacity ${TRANSITION_DURATION_DESKTOP}ms ease-in-out;
}
${theme.mq.kilo} {
transition: opacity ${TRANSITION_DURATION_DESKTOP}ms ease-in-out;
}
`,
afterOpen: cssString`
opacity: 1;
opacity: 1;
`,
beforeClose: cssString`
opacity: 0;
opacity: 0;
`,
};

Expand Down
22 changes: 4 additions & 18 deletions packages/circuit-ui/components/Modal/__snapshots__/Modal.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ exports[`Modal should match the snapshot 1`] = `
position: fixed;
outline: none;
background-color: #FFF;
top: 0;
}

.circuit-3::after {
Expand Down Expand Up @@ -55,15 +56,6 @@ exports[`Modal should match the snapshot 1`] = `
}
}

@supports (max-height:-webkit-fill-available) {
@media (max-width:479px) {
.circuit-3 {
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}
}
}

@media (max-width:479px) {
.circuit-4 {
-webkit-transform: translateY(0) !important;
Expand Down Expand Up @@ -110,13 +102,15 @@ exports[`Modal should match the snapshot 1`] = `
.circuit-2 {
-webkit-overflow-scrolling: touch;
padding: 16px;
padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
width: 100vw;
}
}

@media (min-width:480px) {
.circuit-2 {
padding: 24px;
padding-bottom: calc(env(safe-area-inset-bottom) + 24px);
max-height: 90vh;
min-width: 480px;
max-width: 90vw;
Expand All @@ -125,18 +119,10 @@ exports[`Modal should match the snapshot 1`] = `

@media (max-width:479px) {
.circuit-2 {
height: 100vh;
height: 100%;
}
}

@supports (max-height:-webkit-fill-available) {
@media (max-width:479px) {
.circuit-2 {
height: 80vh;
}
}
}

.circuit-1 {
font-size: 16px;
line-height: 24px;
Expand Down