Skip to content

Commit

Permalink
fix(modal): Add backdrop style to open Modals
Browse files Browse the repository at this point in the history
  • Loading branch information
MichaelRoytman authored and Farhanah Sheets committed Dec 20, 2017
1 parent e55f193 commit f39744d
Show file tree
Hide file tree
Showing 4 changed files with 36 additions and 9 deletions.
14 changes: 7 additions & 7 deletions .storybook/__snapshots__/Storyshots.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -695,7 +695,7 @@ exports[`Storyshots Modal basic usage 1`] = `
<div
aria-labelledby="id2"
aria-modal={true}
className="modal show modal-open"
className="modal modal-open modal-backdrop show"
role="dialog"
>
<div
Expand Down Expand Up @@ -757,7 +757,7 @@ exports[`Storyshots Modal configurable buttons 1`] = `
<div
aria-labelledby="id3"
aria-modal={true}
className="modal show modal-open"
className="modal modal-open modal-backdrop show"
role="dialog"
>
<div
Expand Down Expand Up @@ -846,7 +846,7 @@ exports[`Storyshots Modal configurable buttons that perform actions 1`] = `
<div
aria-labelledby="id5"
aria-modal={true}
className="modal show modal-open"
className="modal modal-open modal-backdrop show"
role="dialog"
>
<div
Expand Down Expand Up @@ -917,7 +917,7 @@ exports[`Storyshots Modal configurable close button 1`] = `
<div
aria-labelledby="id6"
aria-modal={true}
className="modal show modal-open"
className="modal modal-open modal-backdrop show"
role="dialog"
>
<div
Expand Down Expand Up @@ -979,7 +979,7 @@ exports[`Storyshots Modal configurable title and body 1`] = `
<div
aria-labelledby="id4"
aria-modal={true}
className="modal show modal-open"
className="modal modal-open modal-backdrop show"
role="dialog"
>
<div
Expand Down Expand Up @@ -1051,7 +1051,7 @@ exports[`Storyshots Modal modal invoked via a button 1`] = `
<div
aria-labelledby="id7"
aria-modal={true}
className="modal show"
className="modal fade"
role="dialog"
>
<div
Expand Down Expand Up @@ -1123,7 +1123,7 @@ exports[`Storyshots Modal modal with element body 1`] = `
<div
aria-labelledby="id8"
aria-modal={true}
className="modal show modal-open"
className="modal modal-open modal-backdrop show"
role="dialog"
>
<div
Expand Down
9 changes: 9 additions & 0 deletions src/Modal/Modal.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,14 @@
@import "~bootstrap/scss/_variables";
@import "~bootstrap/scss/_modal";

.modal-open {
display: block;
}

.modal-backdrop {
background-color: rgba(0,0,0,0.3);

// Fade for backdrop
&.fade { opacity: 0; }
&.show { opacity: 1; }
}
5 changes: 4 additions & 1 deletion src/Modal/Modal.test.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,10 @@ import Button from '../Button';


const modalOpen = (isOpen, wrapper) => {
expect(wrapper.childAt(0).hasClass('modal-open')).toEqual(isOpen);
expect(wrapper.find('.modal').hasClass('modal-open')).toEqual(isOpen);
expect(wrapper.find('.modal').hasClass('modal-backdrop')).toEqual(isOpen);
expect(wrapper.find('.modal').hasClass('show')).toEqual(isOpen);
expect(wrapper.find('.modal').hasClass('fade')).toEqual(!isOpen);
expect(wrapper.state('open')).toEqual(isOpen);
};
const title = 'Modal title';
Expand Down
17 changes: 16 additions & 1 deletion src/Modal/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -99,8 +99,23 @@ class Modal extends React.Component {
}

render() {
const { open } = this.state;

return (
<div className={classNames(styles.modal, styles.show, { [styles['modal-open']]: this.state.open })} role="dialog" aria-modal aria-labelledby={this.headerId}>
<div
className={classNames(
styles.modal,
{
[styles['modal-open']]: open,
[styles['modal-backdrop']]: open,
[styles.show]: open,
[styles.fade]: !open,
},
)}
role="dialog"
aria-modal
aria-labelledby={this.headerId}
>
<div className={styles['modal-dialog']}>
<div className={styles['modal-content']}>
<div className={styles['modal-header']}>
Expand Down

0 comments on commit f39744d

Please sign in to comment.