From 8d538208ddd399a757637e167bc39c0eb4d69304 Mon Sep 17 00:00:00 2001 From: Steve Hobbs Date: Thu, 7 Oct 2021 11:28:55 +0100 Subject: [PATCH 1/2] Revert the revert of the forceAutoHeight property This reverts commit 9b88692223d7f0298936e8d7b35ad126fa8c44bf. --- css/index.styl | 4 + package.json | 1 + .../core/__snapshots__/index.test.js.snap | 1 + .../ui/box/__snapshots__/chrome.test.jsx.snap | 212 ++++++++++++++++++ src/__tests__/ui/box/chrome.test.jsx | 19 +- src/core/index.js | 6 +- src/ui/box/chrome.jsx | 17 +- yarn.lock | 5 + 8 files changed, 257 insertions(+), 8 deletions(-) diff --git a/css/index.styl b/css/index.styl index a2a254fbf..e4c3ce03e 100644 --- a/css/index.styl +++ b/css/index.styl @@ -22,6 +22,10 @@ loadingSize = 30px display block!important + +.auto-height + height auto !important + // Lock base style diff --git a/package.json b/package.json index 4236560f8..0490b2e74 100644 --- a/package.json +++ b/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", diff --git a/src/__tests__/core/__snapshots__/index.test.js.snap b/src/__tests__/core/__snapshots__/index.test.js.snap index 68378277a..9fa4ac293 100644 --- a/src/__tests__/core/__snapshots__/index.test.js.snap +++ b/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", diff --git a/src/__tests__/ui/box/__snapshots__/chrome.test.jsx.snap b/src/__tests__/ui/box/__snapshots__/chrome.test.jsx.snap index bd8ce35a5..425af1081 100644 --- a/src/__tests__/ui/box/__snapshots__/chrome.test.jsx.snap +++ b/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`] = ` +
+
+
+
+
+
+
+
+ } + data-scrollIntoView={true} + data-type="success" + /> +
+ } + data-scrollIntoView={true} + data-type="error" + /> +
+ } + data-scrollIntoView={true} + data-type="info" + /> +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+`; + exports[`Chrome can dislay all global messages together 1`] = `
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().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().toMatchSnapshot(); + }); }); diff --git a/src/core/index.js b/src/core/index.js index 6ab2a50d1..b6c684229 100644 --- a/src/core/index.js +++ b/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']); diff --git a/src/ui/box/chrome.jsx b/src/ui/box/chrome.jsx index 834e360d7..318400fb5 100644 --- a/src/ui/box/chrome.jsx +++ b/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 = () => ( -
+
Date: Thu, 7 Oct 2021 11:36:43 +0100 Subject: [PATCH 2/2] Add docs to readme --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 38fbf526c..f0d85d84a 100644 --- a/README.md +++ b/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