fix: action panel backdrop opacity and fade in

Adslot · Jun 28, 2019 · b24afcb · b24afcb
1 parent 356c5d9
commit b24afcb
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 35 deletions.
diff --git a/src/components/adslot-ui/ActionPanel/index.jsx b/src/components/adslot-ui/ActionPanel/index.jsx
@@ -4,26 +4,42 @@ import classNames from 'classnames';
 import Button from 'react-bootstrap/lib/Button';
 import './styles.scss';
 
-const ActionPanel = ({ title, className, size, onClose, children, actionButton, isModal, closeIcon }) => (
-  <div className={classNames('aui--action-panel-wrapper', { 'aui--action-panel-wrapper-backdrop': isModal })}>
-    <div className={classNames('aui--action-panel', className, `is-${size}`, { 'action-modal': isModal })}>
-      <div className={classNames('aui--action-panel-header', { 'has-actions': actionButton })}>
-        <span className="title">{title}</span>
-        <span className="actions">
-          <Button
-            onClick={onClose}
-            className={classNames('close-button', { 'close-svg-icon': !actionButton })}
-            dts="header-close-button"
-          >
-            {actionButton ? 'Cancel' : closeIcon}
-          </Button>
-          {actionButton}
-        </span>
-      </div>
-      <div className="aui--action-panel-body">{children}</div>
-    </div>
-  </div>
-);
+class ActionPanel extends React.PureComponent {
+  componentDidMount() {
+    if (this.props.isModal) document.body.classList.add('modal-open');
+  }
+
+  componentWillUnmount() {
+    if (this.props.isModal) document.body.classList.remove('modal-open');
+  }
+
+  render() {
+    const { title, className, size, onClose, children, actionButton, isModal, closeIcon } = this.props;
+    return (
+      <React.Fragment>
+        <div className={isModal ? 'aui--action-panel-backdrop' : 'hide'} />
+        <div className={classNames('aui--action-panel-wrapper', { 'aui--action-panel-modal-wrapper': isModal })}>
+          <div className={classNames('aui--action-panel', className, `is-${size}`, { 'action-modal': isModal })}>
+            <div className={classNames('aui--action-panel-header', { 'has-actions': actionButton })}>
+              <span className="title">{title}</span>
+              <span className="actions">
+                <Button
+                  onClick={onClose}
+                  className={classNames('close-button', { 'close-svg-icon': !actionButton })}
+                  dts="header-close-button"
+                >
+                  {actionButton ? 'Cancel' : closeIcon}
+                </Button>
+                {actionButton}
+              </span>
+            </div>
+            <div className="aui--action-panel-body">{children}</div>
+          </div>
+        </div>
+      </React.Fragment>
+    );
+  }
+}
 
 ActionPanel.propTypes = {
   title: PropTypes.string.isRequired,

diff --git a/src/components/adslot-ui/ActionPanel/index.spec.jsx b/src/components/adslot-ui/ActionPanel/index.spec.jsx
@@ -24,15 +24,23 @@ describe('ActionPanelComponent', () => {
 
     const bodyElement = wrapper.find('.aui--action-panel-body');
     expect(bodyElement).to.have.length(1);
+
+    wrapper.instance().componentWillUnmount();
+    expect(document.body.classList.contains('modal-open')).to.equal(false);
   });
 
   it('should render as a modal', () => {
     const wrapper = shallow(
       <ActionPanel {...makeProps({ isModal: true, size: 'large', actionButton: <Button>Action</Button> })} />
     );
-    expect(wrapper.prop('className')).to.equal('aui--action-panel-wrapper aui--action-panel-wrapper-backdrop');
 
+    expect(document.body.classList.contains('modal-open')).to.equal(true);
+
+    expect(wrapper.find('.aui--action-panel-modal-wrapper')).to.have.length(1);
     const actionPanelElement = wrapper.find('.aui--action-panel');
     expect(actionPanelElement.prop('className')).to.equal('aui--action-panel is-large action-modal');
+
+    wrapper.instance().componentWillUnmount();
+    expect(document.body.classList.contains('modal-open')).to.equal(false);
   });
 });
diff --git a/src/components/adslot-ui/ActionPanel/styles.scss b/src/components/adslot-ui/ActionPanel/styles.scss
@@ -4,6 +4,7 @@
 @import '~styles/variable';
 @import '~styles/font-weight';
 @import '~styles/icon';
+@import '~styles/animation';
 
 .aui--action-panel {
   min-width: 300px;
@@ -14,7 +15,6 @@
   border-radius: 2px;
 
   &.action-modal {
-    position: fixed;
     top: 30px;
     background-color: $color-white ;
     margin: 30px auto;
@@ -121,20 +121,28 @@
   &-body {
     padding: 30px;
   }
-
-  &-wrapper-backdrop {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    background-color: $color-gray-dark;
-    width: 100%;
-    z-index: 1040;
-    display: flex;
-    justify-content: center;
-    opacity: .9;
-  }
 }
 
+.aui--action-panel-backdrop {
+  position: fixed;
+  display: flex;
+  z-index: 1040;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: $color-gray-dark;
+  width: 100%;
+  opacity: .9;
+  animation: fadein .2s;
+}
 
 
+.aui--action-panel-modal-wrapper {
+  position: fixed;
+  width: 100%;
+  z-index: 1040;
+  display: flex;
+  align-content: center;
+  top: 0;
+  left: 0;
+}
diff --git a/src/styles/animation.scss b/src/styles/animation.scss
@@ -0,0 +1,9 @@
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: .9;
+  }
+}