Merge pull request #1874 from auth0/fix-header-height

Header height not updated when Lock dialog is closed and reopened
auth0 · May 29, 2020 · 61c2182 · 61c2182
2 parents 0306b53 + 8327167
commit 61c2182
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 14 deletions.
diff --git a/src/__tests__/ui/box/__snapshots__/chrome.test.jsx.snap b/src/__tests__/ui/box/__snapshots__/chrome.test.jsx.snap
@@ -23,7 +23,7 @@ exports[`Chrome can dislay all global messages together 1`] = `
         className="auth0-lock-content-body-wrapper"
         style={
           Object {
-            "marginTop": 0,
+            "marginTop": 200,
           }
         }
       >
@@ -182,7 +182,7 @@ exports[`Chrome correctly sets the header size when the "signin ready" event is
         className="auth0-lock-content-body-wrapper"
         style={
           Object {
-            "marginTop": 0,
+            "marginTop": 200,
           }
         }
       >
@@ -298,7 +298,7 @@ exports[`Chrome correctly sets the header size when the "signin ready" event is
         className="auth0-lock-content-body-wrapper"
         style={
           Object {
-            "marginTop": 200,
+            "marginTop": 250,
           }
         }
       >
@@ -414,7 +414,7 @@ exports[`Chrome correctly sets the header size when the "signup ready" event is
         className="auth0-lock-content-body-wrapper"
         style={
           Object {
-            "marginTop": 0,
+            "marginTop": 200,
           }
         }
       >
@@ -530,7 +530,7 @@ exports[`Chrome correctly sets the header size when the "signup ready" event is
         className="auth0-lock-content-body-wrapper"
         style={
           Object {
-            "marginTop": 200,
+            "marginTop": 250,
           }
         }
       >
@@ -646,7 +646,7 @@ exports[`Chrome renders correctly when there is a global information message 1`]
         className="auth0-lock-content-body-wrapper"
         style={
           Object {
-            "marginTop": 0,
+            "marginTop": 200,
           }
         }
       >
@@ -777,7 +777,7 @@ exports[`Chrome renders correctly when there is a global message 1`] = `
         className="auth0-lock-content-body-wrapper"
         style={
           Object {
-            "marginTop": 0,
+            "marginTop": 200,
           }
         }
       >
@@ -908,7 +908,7 @@ exports[`Chrome renders correctly when there is a global success message 1`] = `
         className="auth0-lock-content-body-wrapper"
         style={
           Object {
-            "marginTop": 0,
+            "marginTop": 200,
           }
         }
       >
@@ -1039,7 +1039,7 @@ exports[`Chrome renders correctly with basic props 1`] = `
         className="auth0-lock-content-body-wrapper"
         style={
           Object {
-            "marginTop": 0,
+            "marginTop": 200,
           }
         }
       >

diff --git a/src/__tests__/ui/box/chrome.test.jsx b/src/__tests__/ui/box/chrome.test.jsx
@@ -59,25 +59,27 @@ describe('Chrome', () => {
     const component = create(<Chrome {...defaultProps} />);
     const instance = component.getInstance();
 
-    expect(instance.state.headerHeight).toBe(0);
+    expect(instance.state.headerHeight).toBe(200);
     expect(component).toMatchSnapshot();
 
+    Chrome.prototype.getHeaderSize.mockReturnValue(250);
     triggerEvent('signin ready');
 
-    expect(instance.state.headerHeight).toBe(200);
+    expect(instance.state.headerHeight).toBe(250);
     expect(component).toMatchSnapshot();
   });
 
   it('correctly sets the header size when the "signup ready" event is triggered', () => {
     const component = create(<Chrome {...defaultProps} />);
     const instance = component.getInstance();
 
-    expect(instance.state.headerHeight).toBe(0);
+    expect(instance.state.headerHeight).toBe(200);
     expect(component).toMatchSnapshot();
+    Chrome.prototype.getHeaderSize.mockReturnValue(250);
 
     triggerEvent('signup ready');
 
-    expect(instance.state.headerHeight).toBe(200);
+    expect(instance.state.headerHeight).toBe(250);
     expect(component).toMatchSnapshot();
   });
 

diff --git a/src/ui/box/chrome.jsx b/src/ui/box/chrome.jsx
@@ -87,6 +87,7 @@ export default class Chrome extends React.Component {
     this.state = { moving: false, reverse: false, headerHeight: 0 };
   }
 
+  // eslint-disable-next-line react/no-deprecated
   componentWillReceiveProps(nextProps) {
     const { auxiliaryPane, showSubmitButton } = this.props;
     const { delayingShowSubmitButton } = this.state;
@@ -151,6 +152,7 @@ export default class Chrome extends React.Component {
 
     l.handleEvent(m, 'signup ready', fn);
     l.handleEvent(m, 'signin ready', fn);
+    fn();
   }
 
   onWillSlide() {

diff --git a/src/ui/box/container.jsx b/src/ui/box/container.jsx
@@ -31,7 +31,7 @@ const badgeSvg = (
 
 const BottomBadge = ({ link }) => (
   <span className="auth0-lock-badge-bottom">
-    <a href={link} target="_blank" className="auth0-lock-badge">
+    <a href={link} target="_blank" className="auth0-lock-badge" rel="noopener noreferrer">
       Protected with {badgeSvg}
     </a>
   </span>

diff --git a/src/ui/box/multisize_slide.js b/src/ui/box/multisize_slide.js
@@ -9,6 +9,7 @@ export default class Slider extends React.Component {
     this.state = { children: { current: props.children } };
   }
 
+  // eslint-disable-next-line react/no-deprecated
   componentWillReceiveProps(nextProps) {
     // TODO: take a prop to identify what are we rendering instead of
     // infering it from children keys so we can accept more than one