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

feat(modal): Support scrolling entire modal #905

Closed
wants to merge 1 commit into from
Closed

feat(modal): Support scrolling entire modal #905

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
29 changes: 22 additions & 7 deletions modules/modal/css/lib/modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
background: none;
}
to {
background: rgba(0,0,0,0.65);
background: rgba(0, 0, 0, 0.65);
}
}

Expand All @@ -19,17 +19,32 @@
}

.wdc-modal-bg {
align-items: center;
animation-duration: 0.3s;
animation-name: wdc-modal-bg-animation;
background: rgba(0,0,0,0.65);
display: flex;
height: 100vh;
justify-content: center;
background: rgba(0, 0, 0, 0.65);
display: inline-block;
left: 0;
position: fixed;
top: 0;
width: 100vw;
bottom: 0;
right: 0;
overflow-x: hidden;
overflow-y: auto;
}

.wdc-modal-dialog {
display: flex;
align-items: center;
justify-content: center;
margin: 1.75rem auto;
min-height: calc(100% - (1.75rem * 2));

// IE11 fix for setting min-height in a flex container
&::before {
display: block;
height: calc(100vh - (1.75rem * 2));
content: '';
}
}

.wdc-modal {
Expand Down
56 changes: 29 additions & 27 deletions modules/modal/css/stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,37 +33,39 @@ class ModalWrapper extends React.Component<{}, ModalWrapperState> {
</button>
{open ? (
<div className="wdc-modal-bg" onClick={this.onOverlayClick}>
<div
className="wdc-modal wdc-modal-padding-s"
style={{width: '440px'}}
role="dialog"
aria-labelledby="modal-heading"
>
<div className="wdc-modal-close">
<div className="wdc-modal-dialog">
<div
className="wdc-modal wdc-modal-padding-s"
style={{width: '440px'}}
role="dialog"
aria-labelledby="modal-heading"
>
<div className="wdc-modal-close">
<button
onClick={this.onCloseClick}
className="wdc-btn-icon-plain"
aria-label="Close"
>
<i className="wdc-icon" data-icon="x" data-category="system" />
</button>
</div>
<h3 className="wdc-modal-heading" id="modal-heading">
Delete Item
</h3>
<div style={{marginBottom: '24px'}} className="wdc-modal-body">
Are you sure you'd like to delete the item titled 'My Item'?
</div>
<button
onClick={this.onCloseClick}
className="wdc-btn-icon-plain"
aria-label="Close"
className="wdc-btn wdc-btn-delete"
onClick={this.onDeleteClick}
style={{marginRight: '16px'}}
>
<i className="wdc-icon" data-icon="x" data-category="system" />
Delete Item
</button>
<button className="wdc-btn" onClick={this.onCancelClick}>
Cancel
</button>
</div>
<h3 className="wdc-modal-heading" id="modal-heading">
Delete Item
</h3>
<div style={{marginBottom: '24px'}} className="wdc-modal-body">
Are you sure you'd like to delete the item titled 'My Item'?
</div>
<button
className="wdc-btn wdc-btn-delete"
onClick={this.onDeleteClick}
style={{marginRight: '16px'}}
>
Delete Item
</button>
<button className="wdc-btn" onClick={this.onCancelClick}>
Cancel
</button>
</div>
</div>
) : null}
Expand Down
32 changes: 26 additions & 6 deletions modules/modal/react/lib/ModalContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,8 +75,10 @@ const Container = styled('div')({
position: 'fixed',
top: 0,
left: 0,
width: '100vw',
height: '100vh',
bottom: 0,
right: 0,
overflowX: 'hidden',
overflowY: 'auto',
background: 'rgba(0,0,0,0.65)',
animationName: `${fadeIn}`,
animationDuration: '0.3s',
Expand All @@ -91,13 +93,18 @@ const Container = styled('div')({
// the Modal. The centering container forces a "center" pixel calculation by making sure the width
// is always an even number
const CenteringContainer = styled('div')({
height: '100vh',
display: 'flex',
position: 'absolute',
left: 0,
top: 0,
alignItems: 'center',
justifyContent: 'center',
margin: '1.75rem auto',
Copy link
Author

Choose a reason for hiding this comment

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

used 1.75rem as the margin for the top and bottom value (same as bootstrap), as i am unsure how much space to put when the model is higher than viewport

minHeight: 'calc(100% - (1.75rem * 2))',

// IE11 fix for setting min-height in a flex container
'&::before': {
Copy link
Author

Choose a reason for hiding this comment

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

IE11 fix for min-height philipwalton/flexbugs#231

display: 'block',
content: "''",
height: 'calc(100vh - (1.75rem * 2))',
},
});

const transformOrigin = {
Expand Down Expand Up @@ -184,6 +191,18 @@ const useInitialFocus = (
}, [modalRef, firstFocusRef]);
};

const useRemoveBodyScroll = () => {
Copy link
Author

Choose a reason for hiding this comment

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

added a hook to remove scroll on body when modal is open

React.useLayoutEffect(() => {
const originalOverflow = document.documentElement.style.overflow;

document.body.style.overflow = 'hidden';

return () => {
document.body.style.overflow = originalOverflow;
};
}, []);
};

const ModalContent = ({
ariaLabel,
width = ModalWidth.s,
Expand All @@ -203,6 +222,7 @@ const ModalContent = ({
useFocusTrap(stackRef);
useInitialFocus(stackRef, firstFocusRef);
useAssistiveHideSiblings(stackRef);
useRemoveBodyScroll();

// special handling for clicking on the overlay
const onOverlayClick = (event: React.MouseEvent<HTMLElement>) => {
Expand Down