Skip to content

Commit

Permalink
fix(Backdrop): fixes overflow value reset on close
Browse files Browse the repository at this point in the history
  • Loading branch information
@Shib00
Shib00 committed Feb 1, 2021
1 parent 71d6dac commit 57f5ec9
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 187 deletions.
15 changes: 4 additions & 11 deletions core/components/atoms/backdrop/Backdrop.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,21 +31,17 @@ export const Backdrop: React.FC<BackdropProps> = props => {
}, className);

const disableBodyScroll = () => {
if (savedBodyOverflow) {
return;
}

setBodyOverflow(document.body.style.overflow);
document.body.style.overflow = 'hidden';
document.body.style.setProperty('overflow', 'hidden', 'important');
};

const enableBodyScroll = () => {
document.body.style.overflow = savedBodyOverflow || 'auto';
document.body.style.overflow = savedBodyOverflow || '';
setBodyOverflow(null);
};

useEffect(() => {
if (props.open) {
setBodyOverflow(document.body.style.overflow);
disableBodyScroll();
setOpen(true);
setAnimate(true);
Expand All @@ -55,11 +51,8 @@ export const Backdrop: React.FC<BackdropProps> = props => {
setOpen(false);
}, 120);
setAnimate(false);
}

return () => {
enableBodyScroll();
};
}
}, [props.open]);

const BackdropElement = ReactDOM.createPortal(
Expand Down
204 changes: 28 additions & 176 deletions core/utils/__tests__/__snapshots__/TS.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ exports[`TS renders children 1`] = `
class="Heading Heading--s Heading--default"
data-test="DesignSystem-Heading"
>
Jan
Feb
</h5>
</span>
 
Expand Down Expand Up @@ -173,34 +173,6 @@ exports[`TS renders children 1`] = `
<div
class="Calendar-valueRow"
>
<div
class="Calendar-valueWrapper"
>
<span
class="Calendar-value Calendar-value--dummy"
/>
</div>
<div
class="Calendar-valueWrapper"
>
<span
class="Calendar-value Calendar-value--dummy"
/>
</div>
<div
class="Calendar-valueWrapper"
>
<span
class="Calendar-value Calendar-value--dummy"
/>
</div>
<div
class="Calendar-valueWrapper"
>
<span
class="Calendar-value Calendar-value--dummy"
/>
</div>
<div
class="Calendar-valueWrapper"
>
Expand Down Expand Up @@ -236,10 +208,6 @@ exports[`TS renders children 1`] = `
</span>
</span>
</div>
</div>
<div
class="Calendar-valueRow"
>
<div
class="Calendar-valueWrapper"
>
Expand Down Expand Up @@ -296,6 +264,10 @@ exports[`TS renders children 1`] = `
</span>
</span>
</div>
</div>
<div
class="Calendar-valueRow"
>
<div
class="Calendar-valueWrapper"
>
Expand Down Expand Up @@ -338,10 +310,6 @@ exports[`TS renders children 1`] = `
</span>
</span>
</div>
</div>
<div
class="Calendar-valueRow"
>
<div
class="Calendar-valueWrapper"
>
Expand Down Expand Up @@ -398,6 +366,10 @@ exports[`TS renders children 1`] = `
</span>
</span>
</div>
</div>
<div
class="Calendar-valueRow"
>
<div
class="Calendar-valueWrapper"
>
Expand Down Expand Up @@ -440,10 +412,6 @@ exports[`TS renders children 1`] = `
</span>
</span>
</div>
</div>
<div
class="Calendar-valueRow"
>
<div
class="Calendar-valueWrapper"
>
Expand Down Expand Up @@ -500,6 +468,10 @@ exports[`TS renders children 1`] = `
</span>
</span>
</div>
</div>
<div
class="Calendar-valueRow"
>
<div
class="Calendar-valueWrapper"
>
Expand Down Expand Up @@ -542,10 +514,6 @@ exports[`TS renders children 1`] = `
</span>
</span>
</div>
</div>
<div
class="Calendar-valueRow"
>
<div
class="Calendar-valueWrapper"
>
Expand Down Expand Up @@ -602,48 +570,6 @@ exports[`TS renders children 1`] = `
</span>
</span>
</div>
<div
class="Calendar-valueWrapper"
>
<span
class="Calendar-value"
>
<span
class="Text Text--default Text--regular"
data-test="DesignSystem-Text"
>
28
</span>
</span>
</div>
<div
class="Calendar-valueWrapper"
>
<span
class="Calendar-value"
>
<span
class="Text Text--default Text--regular"
data-test="DesignSystem-Text"
>
29
</span>
</span>
</div>
<div
class="Calendar-valueWrapper"
>
<span
class="Calendar-value"
>
<span
class="Text Text--default Text--regular"
data-test="DesignSystem-Text"
>
30
</span>
</span>
</div>
</div>
<div
class="Calendar-valueRow"
Expand All @@ -658,7 +584,7 @@ exports[`TS renders children 1`] = `
class="Text Text--default Text--regular"
data-test="DesignSystem-Text"
>
31
28
</span>
</span>
</div>
Expand Down Expand Up @@ -1702,7 +1628,7 @@ exports[`TS renders children 1`] = `
class="Heading Heading--s Heading--default"
data-test="DesignSystem-Heading"
>
Jan
Feb
</h5>
</span>
 
Expand Down Expand Up @@ -1777,34 +1703,6 @@ exports[`TS renders children 1`] = `
<div
class="Calendar-valueRow"
>
<div
class="Calendar-valueWrapper"
>
<span
class="Calendar-value Calendar-value--dummy"
/>
</div>
<div
class="Calendar-valueWrapper"
>
<span
class="Calendar-value Calendar-value--dummy"
/>
</div>
<div
class="Calendar-valueWrapper"
>
<span
class="Calendar-value Calendar-value--dummy"
/>
</div>
<div
class="Calendar-valueWrapper"
>
<span
class="Calendar-value Calendar-value--dummy"
/>
</div>
<div
class="Calendar-valueWrapper"
>
Expand Down Expand Up @@ -1840,10 +1738,6 @@ exports[`TS renders children 1`] = `
</span>
</span>
</div>
</div>
<div
class="Calendar-valueRow"
>
<div
class="Calendar-valueWrapper"
>
Expand Down Expand Up @@ -1900,6 +1794,10 @@ exports[`TS renders children 1`] = `
</span>
</span>
</div>
</div>
<div
class="Calendar-valueRow"
>
<div
class="Calendar-valueWrapper"
>
Expand Down Expand Up @@ -1942,10 +1840,6 @@ exports[`TS renders children 1`] = `
</span>
</span>
</div>
</div>
<div
class="Calendar-valueRow"
>
<div
class="Calendar-valueWrapper"
>
Expand Down Expand Up @@ -2002,6 +1896,10 @@ exports[`TS renders children 1`] = `
</span>
</span>
</div>
</div>
<div
class="Calendar-valueRow"
>
<div
class="Calendar-valueWrapper"
>
Expand Down Expand Up @@ -2044,10 +1942,6 @@ exports[`TS renders children 1`] = `
</span>
</span>
</div>
</div>
<div
class="Calendar-valueRow"
>
<div
class="Calendar-valueWrapper"
>
Expand Down Expand Up @@ -2104,6 +1998,10 @@ exports[`TS renders children 1`] = `
</span>
</span>
</div>
</div>
<div
class="Calendar-valueRow"
>
<div
class="Calendar-valueWrapper"
>
Expand Down Expand Up @@ -2146,10 +2044,6 @@ exports[`TS renders children 1`] = `
</span>
</span>
</div>
</div>
<div
class="Calendar-valueRow"
>
<div
class="Calendar-valueWrapper"
>
Expand Down Expand Up @@ -2206,48 +2100,6 @@ exports[`TS renders children 1`] = `
</span>
</span>
</div>
<div
class="Calendar-valueWrapper"
>
<span
class="Calendar-value"
>
<span
class="Text Text--default Text--regular"
data-test="DesignSystem-Text"
>
28
</span>
</span>
</div>
<div
class="Calendar-valueWrapper"
>
<span
class="Calendar-value"
>
<span
class="Text Text--default Text--regular"
data-test="DesignSystem-Text"
>
29
</span>
</span>
</div>
<div
class="Calendar-valueWrapper"
>
<span
class="Calendar-value"
>
<span
class="Text Text--default Text--regular"
data-test="DesignSystem-Text"
>
30
</span>
</span>
</div>
</div>
<div
class="Calendar-valueRow"
Expand All @@ -2262,7 +2114,7 @@ exports[`TS renders children 1`] = `
class="Text Text--default Text--regular"
data-test="DesignSystem-Text"
>
31
28
</span>
</span>
</div>
Expand Down

0 comments on commit 57f5ec9

Please sign in to comment.