fix(Modals): Modal backdrop fades in correctly

[#135658065] Signed-off-by: Charles Hansen <chansen@pivotal.io>
pivotal-cf · Dec 13, 2016 · c9d4fee · c9d4fee
1 parent b88f18d
commit c9d4fee
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/library/spec/pivotal-ui-react/modals/modals_spec.js b/library/spec/pivotal-ui-react/modals/modals_spec.js
@@ -97,40 +97,40 @@ describe('BaseModal', function() {
 
     it('animates the modal in (with easeOutQuad)', () => {
       expect('.modal-dialog').toHaveAttr('style', /margin-top: 0px;/);
-      expect('.modal-wrapper').toHaveAttr('style', /opacity: 0;/);
+      expect('.modal-backdrop').toHaveAttr('style', /opacity: 0;/);
       MockNow.tick(delay / 2);
       MockRaf.next();
       expect('.modal-dialog').toHaveAttr('style', /margin-top: 37\.5px;/);
-      expect('.modal-wrapper').toHaveAttr('style', /opacity: 0.75;/);
+      expect('.modal-backdrop').toHaveAttr('style', /opacity: 0.6/);
       MockNow.tick(delay / 2);
       MockRaf.next();
       expect('.modal-dialog').toHaveAttr('style', /margin-top: 50px;/);
-      expect('.modal-wrapper').toHaveAttr('style', /opacity: 1;/);
+      expect('.modal-backdrop').toHaveAttr('style', /opacity: 0.8;/);
     });
 
     it('animates the modal out', () => {
       MockNow.tick(delay);
       MockRaf.next();
       subject::setProps({show: false});
       expect('.modal-dialog').toHaveAttr('style', /margin-top: 50px;/);
-      expect('.modal-wrapper').toHaveAttr('style', /opacity: 1;/);
+      expect('.modal-backdrop').toHaveAttr('style', /opacity: 0.8;/);
       MockNow.tick(delay / 2);
       MockRaf.next();
       expect('.modal-dialog').toHaveAttr('style', /margin-top: 12\.5px;/);
-      expect('.modal-wrapper').toHaveAttr('style', /opacity: 0.25;/);
+      expect('.modal-backdrop').toHaveAttr('style', /opacity: 0.2;/);
       MockNow.tick(delay / 2);
       MockRaf.next();
       expect('.modal-dialog').not.toExist();
-      expect('.modal-wrapper').not.toExist();
+      expect('.modal-backdrop').not.toExist();
     });
 
     it('does not animate if animation is false', () => {
       subject::setProps({animation: false});
       expect('.modal-dialog').toHaveAttr('style', /margin-top: 50px;/);
-      expect('.modal-wrapper').toHaveAttr('style', /opacity: 1;/);
+      expect('.modal-backdrop').toHaveAttr('style', /opacity: 0.8;/);
       subject::setProps({show: false});
       expect('.modal-dialog').not.toExist();
-      expect('.modal-wrapper').not.toExist();
+      expect('.modal-backdrop').not.toExist();
     });
   });
 

diff --git a/library/src/pivotal-ui-react/modals/modals.js b/library/src/pivotal-ui-react/modals/modals.js
@@ -115,8 +115,8 @@ class BaseModal extends mixin(React.Component).with(Animation) {
     const modalSizeClass = `modal-${modalSize}`;
 
     return (
-      <div className="modal-wrapper" role="dialog" style={{opacity: fractionShown}}>
-        <div className="modal-backdrop fade in" onClick={onHide}/>
+      <div className="modal-wrapper" role="dialog">
+        <div className="modal-backdrop fade in" style={{opacity: fractionShown * 0.8}} onClick={onHide}/>
         <div {...props} ref={(ref) => {this.modal = ref;}}>
           <div className={classnames('modal-dialog', dialogClassName, {[modalSizeClass]: modalSize})} style={dialogStyle} ref={(ref) => {this.dialog = ref;}}>
             <div className="modal-content">