[SDK-2295] Add forceAutoHeight property to UI config

README.md

@@ -272,6 +272,7 @@ The appearance of the widget and the mechanics of authentication can be customiz
 - **allowShowPassword {Boolean}**: Determines whether or not add a checkbox to show the password when typing it. Defaults to `false`.
 - **allowPasswordAutocomplete {Boolean}**: Determines whether the password field will allow autocomplete; setting this to `true` is required for password manager support and to avoid many cases of adverse behavior. Defaults to `false`.
 - **preferConnectionDisplayName {Boolean}**: If true, Lock will try to use the connection display name as configured in the manage dashboard, if available.
+- **forceAutoHeight {Boolean}**: If true, Lock will use the `height: auto!important` style on the wrapping div, which may be useful in some circumstances where `height: 100vh` is undesirable (see [\#1963](https://github.com/auth0/lock/issues/1963)). Defaults to `false`.
 
 #### Theming options
 

css/index.styl

@@ -22,6 +22,10 @@ loadingSize = 30px
       display block!important
 
 
+
+.auto-height
+  height auto !important
+
 // Lock base style
 
 

package.json

@@ -108,6 +108,7 @@
     "auth0-js": "^9.16.4",
     "auth0-password-policies": "^1.0.2",
     "blueimp-md5": "^2.18.0",
+    "classnames": "^2.3.1",
     "dompurify": "^2.2.8",
     "immutable": "^3.7.3",
     "jsonp": "^0.2.1",

src/__tests__/core/__snapshots__/index.test.js.snap

@@ -75,6 +75,7 @@ Object {
     "containerID": "auth0-lock-container-id",
     "dict": Object {},
     "disableWarnings": false,
+    "forceAutoHeight": false,
     "hideMainScreenTitle": false,
     "labeledSubmitButton": true,
     "language": "en",

src/__tests__/ui/box/__snapshots__/chrome.test.jsx.snap

@@ -1,5 +1,217 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Chrome adds the auto-height class when forceAutoHeight UI prop is true 1`] = `
+<div
+  className="auth0-lock-cred-pane auth0-lock-quiet"
+>
+  <div
+    className="auth0-lock-cred-pane-internal-wrapper auto-height"
+  >
+    <div
+      className="auth0-lock-content-wrapper"
+    >
+      <div
+        data-__type="header"
+        data-backHandler={undefined}
+        data-backgroundColor="white"
+        data-backgroundUrl="avatar"
+        data-logoUrl="logo"
+        data-name={undefined}
+        data-title={undefined}
+      />
+      <div
+        className="auth0-lock-content-body-wrapper"
+        style={
+          Object {
+            "marginTop": 0,
+          }
+        }
+      >
+        <div>
+          <div>
+            <div
+              data-__type="div"
+              data-message={
+                <span
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "This is a success message",
+                    }
+                  }
+                />
+              }
+              data-scrollIntoView={true}
+              data-type="success"
+            />
+            <div
+              data-__type="div"
+              data-message={
+                <span
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "There is an error",
+                    }
+                  }
+                />
+              }
+              data-scrollIntoView={true}
+              data-type="error"
+            />
+            <div
+              data-__type="div"
+              data-message={
+                <span
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "This is an information message",
+                    }
+                  }
+                />
+              }
+              data-scrollIntoView={true}
+              data-type="info"
+            />
+          </div>
+        </div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-__type="div"
+            data-delay={550}
+            data-onDidAppear={[Function]}
+            data-onDidSlide={[Function]}
+            data-onWillSlide={[Function]}
+            data-reverse={false}
+            data-transitionName=""
+          >
+            <div
+              className="auth0-lock-view-content"
+            >
+              <div
+                style={
+                  Object {
+                    "position": "relative",
+                  }
+                }
+              >
+                <div
+                  className="auth0-lock-body-content"
+                >
+                  <div
+                    className="auth0-lock-content"
+                  >
+                    <div
+                      className="auth0-lock-form"
+                    >
+                      <div
+                        data-__type="content"
+                        data-focusSubmit={[Function]}
+                        data-model={
+                          Immutable.Map {
+                            "id": "__lock_id__",
+                          }
+                        }
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <button
+      aria-label="Submit"
+      className="auth0-lock-submit"
+      disabled={false}
+      name="submit"
+      onClick={[Function]}
+      style={
+        Object {
+          "backgroundColor": "white",
+          "display": "block",
+        }
+      }
+      type="submit"
+    >
+      <div
+        className="auth0-loading-container"
+      >
+        <div
+          className="auth0-loading"
+        />
+      </div>
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        height="42px"
+        version="1.1"
+        viewBox="0 0 43 42"
+        width="43px"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+      >
+        <g
+          fill="none"
+          fillRule="evenodd"
+          id="Page-1"
+          stroke="none"
+          strokeWidth="1"
+        >
+          <g
+            id="Lock"
+            transform="translate(-280.000000, -3592.000000)"
+          >
+            <g
+              id="SMS"
+              transform="translate(153.000000, 3207.000000)"
+            >
+              <g
+                id="Group"
+              >
+                <g
+                  id="Login"
+                  transform="translate(0.000000, 369.000000)"
+                >
+                  <g
+                    id="Btn"
+                  >
+                    <g
+                      id="Oval-302-+-Shape"
+                      transform="translate(128.000000, 17.000000)"
+                    >
+                      <circle
+                        cx="20.5"
+                        cy="20"
+                        id="Oval-302"
+                        r="20"
+                        stroke="#FFFFFF"
+                        strokeWidth="2"
+                      />
+                      <path
+                        d="M17.8,15.4 L19.2,14 L25.2,20 L19.2,26 L17.8,24.6 L22.4,20 L17.8,15.4 Z"
+                        fill="#FFFFFF"
+                        id="Shape"
+                      />
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </svg>
+    </button>
+  </div>
+</div>
+`;
+
 exports[`Chrome can dislay all global messages together 1`] = `
 <div
   className="auth0-lock-cred-pane auth0-lock-quiet"

src/__tests__/ui/box/chrome.test.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import immutable from 'immutable';
-import { create } from 'react-test-renderer';
 
 import { expectComponent, mockComponent } from 'testUtils';
 const getComponent = () => require('ui/box/chrome').default;
@@ -22,7 +21,10 @@ const triggerEvent = name => {
 jest.mock('core/index', () => ({
   handleEvent: jest.fn((_, event, fn) => {
     mockEventRegister[event] = fn;
-  })
+  }),
+  ui: {
+    forceAutoHeight: jest.fn().mockReturnValue(false)
+  }
 }));
 
 const defaultProps = {
@@ -92,4 +94,17 @@ describe('Chrome', () => {
 
     expectComponent(<Chrome {...props} />).toMatchSnapshot();
   });
+
+  it('adds the auto-height class when forceAutoHeight UI prop is true', () => {
+    require('core/index').ui.forceAutoHeight.mockReturnValue(true);
+
+    const props = {
+      ...defaultProps,
+      info: 'This is an information message',
+      success: 'This is a success message',
+      error: 'There is an error'
+    };
+
+    expectComponent(<Chrome {...props} />).toMatchSnapshot();
+  });
 });

src/core/index.js

@@ -216,7 +216,8 @@ function extractUIOptions(id, options) {
     scrollGlobalMessagesIntoView:
       undefined === options.scrollGlobalMessagesIntoView
         ? true
-        : !!options.scrollGlobalMessagesIntoView
+        : !!options.scrollGlobalMessagesIntoView,
+    forceAutoHeight: !!options.forceAutoHeight
   });
 }
 
@@ -264,7 +265,8 @@ export const ui = {
   scrollGlobalMessagesIntoView: lock => getUIAttribute(lock, 'scrollGlobalMessagesIntoView'),
   allowShowPassword: m => tget(m, 'allowShowPassword', getUIAttribute(m, 'allowShowPassword')),
   allowPasswordAutocomplete: m =>
-    tget(m, 'allowPasswordAutocomplete', getUIAttribute(m, 'allowPasswordAutocomplete'))
+    tget(m, 'allowPasswordAutocomplete', getUIAttribute(m, 'allowPasswordAutocomplete')),
+  forceAutoHeight: m => tget(m, 'forceAutoHeight', getUIAttribute(m, 'forceAutoHeight'))
 };
 
 const { get: getAuthAttribute } = dataFns(['core', 'auth']);

src/ui/box/chrome.jsx

@@ -7,6 +7,7 @@ import MultisizeSlide from './multisize_slide';
 import GlobalMessage from './global_message';
 import * as l from '../../core/index';
 import Header from './header';
+import classnames from 'classnames';
 
 const SubmitSvg = () => (
   <svg
@@ -268,6 +269,8 @@ export default class Chrome extends React.Component {
       scrollGlobalMessagesIntoView
     } = this.props;
 
+    const { model } = contentProps;
+
     const { delayingShowSubmitButton, moving, reverse } = this.state;
 
     let backgroundUrl, name;
@@ -315,14 +318,20 @@ export default class Chrome extends React.Component {
     ) : null;
 
     const Content = contentComponent;
-
-    let className = 'auth0-lock-cred-pane';
     const isQuiet = !moving && !delayingShowSubmitButton;
-    className += isQuiet ? ' auth0-lock-quiet' : ' auth0-lock-moving';
+
+    const className = classnames('auth0-lock-cred-pane', {
+      'auth0-lock-quiet': isQuiet,
+      'auth0-lock-moving': !isQuiet
+    });
+
+    const internalWrapperClass = classnames('auth0-lock-cred-pane-internal-wrapper', {
+      'auto-height': l.ui.forceAutoHeight(model)
+    });
 
     return (
       <div className={className}>
-        <div className="auth0-lock-cred-pane-internal-wrapper">
+        <div className={internalWrapperClass}>
           <div className="auth0-lock-content-wrapper">
             <Header
               title={title}

yarn.lock

@@ -2397,6 +2397,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
+  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
+
 clean-stack@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"