From a46c9c40ad189cc3f891d6601db9a7ea57327ba3 Mon Sep 17 00:00:00 2001 From: Greg Smith Date: Fri, 15 Mar 2019 13:56:37 -0500 Subject: [PATCH] feat: Use popper for popovers (#467) * Implemented react-popper for popovers * Removed clickHandler prop to let onClick filter through * Abstracted react-popper functionality to an internal component * Updated jest config to support popper.js and updated Popover tests * Added out-of-boundaries handling and changed popper to default to no portal * Removed default placement * Updated examples * Updated tests and components to match new Popover API * Remove unused code blocks * Updates to Popover component page * Fixed tests for TimePicker and LocalizationEditor * Updated components, tests and snapshots * Updated size limit * Split out popper-based styles into separate scss file --- .size-limit | 2 +- __mocks__/popper.js.js | 12 + config/jest/jest.config.js | 12 + package-lock.json | 216 ++- package.json | 5 + src/ActionBar/ActionBar.Component.js | 9 +- src/ComboboxInput/ComboboxInput.test.js | 4 +- .../__snapshots__/ComboboxInput.test.js.snap | 116 +- .../__snapshots__/Dropdown.test.js.snap | 295 +--- src/Icon/Icon.js | 7 +- src/Icon/Icon.test.js | 10 +- src/LocalizationEditor/LocalizationEditor.js | 48 +- .../LocalizationEditor.test.js | 12 +- .../LocalizationEditor.test.js.snap | 328 +--- src/Popover/Popover.Component.js | 284 +++- src/Popover/Popover.js | 112 +- src/Popover/Popover.test.js | 27 +- .../__snapshots__/Popover.test.js.snap | 233 +-- src/Shellbar/Shellbar.js | 24 +- src/Shellbar/Shellbar.test.js | 11 + .../__snapshots__/Shellbar.test.js.snap | 1470 ++--------------- src/Table/Table.Component.js | 12 +- src/Tile/Tile.Component.js | 3 +- src/Tile/__snapshots__/Tile.test.js.snap | 116 +- src/TimePicker/TimePicker.test.js | 6 +- src/TimePicker/_TimePickerItem.js | 6 +- .../__snapshots__/TimePicker.test.js.snap | 1413 +--------------- src/Token/Token.Component.js | 8 +- src/Token/Token.js | 14 +- src/_playground/App.scss | 1 + src/_playground/_popper.scss | 128 ++ src/utils/_Popper.js | 179 ++ src/utils/constants.js | 15 + src/utils/modalManager.js | 3 + 34 files changed, 1324 insertions(+), 3817 deletions(-) create mode 100644 __mocks__/popper.js.js create mode 100644 src/_playground/_popper.scss create mode 100644 src/utils/_Popper.js create mode 100644 src/utils/modalManager.js diff --git a/.size-limit b/.size-limit index 43c57a0d8..b3dc3a69d 100644 --- a/.size-limit +++ b/.size-limit @@ -3,6 +3,6 @@ name: "Fundamental-React Size", webpack: true, path: "lib/index.js", - limit: "40 KB" + limit: "50 KB" } ] diff --git a/__mocks__/popper.js.js b/__mocks__/popper.js.js new file mode 100644 index 000000000..af469bce2 --- /dev/null +++ b/__mocks__/popper.js.js @@ -0,0 +1,12 @@ +import PopperJs from 'popper.js'; + +export default class Popper { + static placements = PopperJs.placements; + + constructor() { + return { + destroy: () => { }, + scheduleUpdate: () => { } + }; + } +} diff --git a/config/jest/jest.config.js b/config/jest/jest.config.js index 6e81d0b4f..5dc2cdb31 100644 --- a/config/jest/jest.config.js +++ b/config/jest/jest.config.js @@ -3,6 +3,18 @@ import { configure } from 'enzyme'; configure({ adapter: new Adapter() }); +//https://github.com/FezVrasta/popper.js/issues/478 +if (global.document) { + document.createRange = () => ({ + setStart: () => { }, + setEnd: () => { }, + commonAncestorContainer: { + nodeName: 'BODY', + ownerDocument: document + } + }); +} + module.exports = { 'testURL': 'http://localhost/' }; diff --git a/package-lock.json b/package-lock.json index 3b715cc7a..fc5d13493 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1673,6 +1673,11 @@ "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=", "dev": true }, + "asap": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", + "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=" + }, "asn1": { "version": "0.2.4", "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz", @@ -3025,6 +3030,11 @@ "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=", "dev": true }, + "chain-function": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/chain-function/-/chain-function-1.0.1.tgz", + "integrity": "sha512-SxltgMwL9uCko5/ZCLiyG2B7R9fY4pDZUw7hJ4MhirdjBLosoDqkWABi3XMucddHdLiFJMb7PD2MZifZriuMTg==" + }, "chalk": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", @@ -4281,6 +4291,15 @@ "sha.js": "^2.4.8" } }, + "create-react-context": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.2.tgz", + "integrity": "sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A==", + "requires": { + "fbjs": "^0.8.0", + "gud": "^1.0.0" + } + }, "cross-spawn": { "version": "6.0.5", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz", @@ -5154,6 +5173,24 @@ "utila": "~0.4" } }, + "dom-helpers": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz", + "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==", + "requires": { + "@babel/runtime": "^7.1.2" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.3.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.3.4.tgz", + "integrity": "sha512-IvfvnMdSaLBateu0jfsYIpZTxAc2cKEXEMiezGGN75QcBcecDUKd3PgLAncT0oOgxKy8dd8hrJKj9MfzgfZd6g==", + "requires": { + "regenerator-runtime": "^0.12.0" + } + } + } + }, "dom-serializer": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.0.tgz", @@ -5373,6 +5410,14 @@ "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=", "dev": true }, + "encoding": { + "version": "0.1.12", + "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz", + "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=", + "requires": { + "iconv-lite": "~0.4.13" + } + }, "end-of-stream": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz", @@ -6352,6 +6397,27 @@ "bser": "^2.0.0" } }, + "fbjs": { + "version": "0.8.17", + "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz", + "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=", + "requires": { + "core-js": "^1.0.0", + "isomorphic-fetch": "^2.1.1", + "loose-envify": "^1.0.0", + "object-assign": "^4.1.0", + "promise": "^7.1.1", + "setimmediate": "^1.0.5", + "ua-parser-js": "^0.7.18" + }, + "dependencies": { + "core-js": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", + "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=" + } + } + }, "figgy-pudding": { "version": "3.5.1", "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz", @@ -8030,6 +8096,11 @@ "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=", "dev": true }, + "gud": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz", + "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==" + }, "gzip-size": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.0.0.tgz", @@ -8561,7 +8632,6 @@ "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", - "dev": true, "requires": { "safer-buffer": ">= 2.1.2 < 3" } @@ -8770,7 +8840,6 @@ "version": "2.2.4", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", - "dev": true, "requires": { "loose-envify": "^1.0.0" } @@ -9136,8 +9205,7 @@ "is-stream": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz", - "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=", - "dev": true + "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=" }, "is-string": { "version": "1.0.4", @@ -9241,6 +9309,15 @@ "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=", "dev": true }, + "isomorphic-fetch": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz", + "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=", + "requires": { + "node-fetch": "^1.0.1", + "whatwg-fetch": ">=0.10.0" + } + }, "isstream": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz", @@ -10749,8 +10826,7 @@ "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" }, "js-yaml": { "version": "3.12.1", @@ -10901,6 +10977,11 @@ "array-includes": "^3.0.3" } }, + "keycode": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz", + "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ=" + }, "killable": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz", @@ -11204,7 +11285,6 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "dev": true, "requires": { "js-tokens": "^3.0.0 || ^4.0.0" } @@ -11770,6 +11850,15 @@ "lower-case": "^1.1.1" } }, + "node-fetch": { + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz", + "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==", + "requires": { + "encoding": "^0.1.11", + "is-stream": "^1.0.1" + } + }, "node-forge": { "version": "0.7.5", "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.5.tgz", @@ -12878,6 +12967,11 @@ "integrity": "sha512-CPCdcFxx7fEcDMWTDjXe2Wypt4JuMt4q5Q2UrpTcyBBkLiCIyPEh/mCGmUWIcNkKGyXwQ9Y2wVhlKm6ketiBNQ==", "dev": true }, + "popper.js": { + "version": "1.14.7", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.7.tgz", + "integrity": "sha512-4q1hNvoUre/8srWsH7hnoSJ5xVmIL4qgz+s4qf2TnJIMyZFUFMGH+9vE7mXynAlHSZ/NdTmmow86muD0myUkVQ==" + }, "portfinder": { "version": "1.0.20", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz", @@ -16698,6 +16792,14 @@ "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==", "dev": true }, + "promise": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", + "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", + "requires": { + "asap": "~2.0.3" + } + }, "promise-inflight": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz", @@ -16723,6 +16825,25 @@ "react-is": "^16.8.1" } }, + "prop-types-extra": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.0.tgz", + "integrity": "sha512-QFyuDxvMipmIVKD2TwxLVPzMnO4e5oOf1vr3tJIomL8E7d0lr6phTHd5nkPhFIzTD1idBLLEPeylL9g+rrTzRg==", + "requires": { + "react-is": "^16.3.2", + "warning": "^3.0.0" + }, + "dependencies": { + "warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", + "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", + "requires": { + "loose-envify": "^1.0.0" + } + } + } + }, "property-information": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.0.1.tgz", @@ -16995,6 +17116,11 @@ "scheduler": "^0.13.1" } }, + "react-context-toolbox": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/react-context-toolbox/-/react-context-toolbox-2.0.2.tgz", + "integrity": "sha512-tY4j0imkYC3n5ZlYSgFkaw7fmlCp3IoQQ6DxpqeNHzcD0hf+6V+/HeJxviLUZ1Rv1Yn3N3xyO2EhkkZwHn0m1A==" + }, "react-dev-utils": { "version": "6.1.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-6.1.1.tgz", @@ -17158,6 +17284,11 @@ "integrity": "sha512-7kEBKwU9R8fKnZJBRa5RSIfay4KJwnYvKB6gODGicUmDSAhQJ7Tdnll5S0RLtYrzRfMVXlqYw61rzrSpP4ThLQ==", "dev": true }, + "react-foco": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/react-foco/-/react-foco-1.2.0.tgz", + "integrity": "sha512-Gw+JHFxdqn+tIcqxaxxmkpX+unR8Nbu7MFGfn8d8gmntgtfel7PXOxfVBMM7QD3nv/zpUd9WnzygHAoBqQ9REw==" + }, "react-is": { "version": "16.8.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.1.tgz", @@ -17178,6 +17309,44 @@ "xtend": "^4.0.1" } }, + "react-overlays": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-1.1.2.tgz", + "integrity": "sha512-2YSsVcS0DP1+TEWY6BMIZcrO/8yN2GxJ34w1c3g9p+bSwZSki0dTzgtl7pw4QwLvf8xBDOyDffAU9iE0h/x4eA==", + "requires": { + "classnames": "^2.2.6", + "dom-helpers": "^3.4.0", + "prop-types": "^15.6.2", + "prop-types-extra": "^1.1.0", + "react-context-toolbox": "^2.0.2", + "react-popper": "^1.3.2", + "uncontrollable": "^6.0.0", + "warning": "^4.0.2" + } + }, + "react-popper": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.3.tgz", + "integrity": "sha512-ynMZBPkXONPc5K4P5yFWgZx5JGAUIP3pGGLNs58cfAPgK67olx7fmLp+AdpZ0+GoQ+ieFDa/z4cdV6u7sioH6w==", + "requires": { + "@babel/runtime": "^7.1.2", + "create-react-context": "<=0.2.2", + "popper.js": "^1.14.4", + "prop-types": "^15.6.1", + "typed-styles": "^0.0.7", + "warning": "^4.0.2" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.3.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.3.4.tgz", + "integrity": "sha512-IvfvnMdSaLBateu0jfsYIpZTxAc2cKEXEMiezGGN75QcBcecDUKd3PgLAncT0oOgxKy8dd8hrJKj9MfzgfZd6g==", + "requires": { + "regenerator-runtime": "^0.12.0" + } + } + } + }, "react-router": { "version": "4.3.1", "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz", @@ -17365,8 +17534,7 @@ "regenerator-runtime": { "version": "0.12.1", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz", - "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==", - "dev": true + "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==" }, "regenerator-transform": { "version": "0.13.3", @@ -17916,8 +18084,7 @@ "safer-buffer": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", - "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", - "dev": true + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" }, "sane": { "version": "2.5.2", @@ -18385,8 +18552,7 @@ "setimmediate": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", - "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=", - "dev": true + "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=" }, "setprototypeof": { "version": "1.1.0", @@ -20419,12 +20585,22 @@ "mime-types": "~2.1.18" } }, + "typed-styles": { + "version": "0.0.7", + "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz", + "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==" + }, "typedarray": { "version": "0.0.6", "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=", "dev": true }, + "ua-parser-js": { + "version": "0.7.19", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.19.tgz", + "integrity": "sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ==" + }, "uglify-js": { "version": "3.4.9", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz", @@ -20557,6 +20733,14 @@ } } }, + "uncontrollable": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-6.1.0.tgz", + "integrity": "sha512-2TzEm0pLKauMBZfAZXsgQvLpZHEp95891frCZdGDrSG7dWYaIQhedwLAzi0X8pR8KHNqlmuYEb2cEgbQzr050A==", + "requires": { + "invariant": "^2.2.4" + } + }, "unherit": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.1.tgz", @@ -21041,7 +21225,6 @@ "version": "4.0.2", "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.2.tgz", "integrity": "sha512-wbTp09q/9C+jJn4KKJfJfoS6VleK/Dti0yqWSm6KMvJ4MRCXFQNapHuJXutJIrWV0Cf4AhTdeIe4qdKHR1+Hug==", - "dev": true, "requires": { "loose-envify": "^1.0.0" } @@ -21604,6 +21787,11 @@ "iconv-lite": "0.4.24" } }, + "whatwg-fetch": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz", + "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==" + }, "whatwg-mimetype": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz", diff --git a/package.json b/package.json index 51a55194e..30bfdfb5b 100644 --- a/package.json +++ b/package.json @@ -44,9 +44,14 @@ "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive" }, "dependencies": { + "chain-function": "^1.0.1", "classnames": "^2.2.6", "focus-trap-react": "^6.0.0", + "keycode": "^2.2.0", "prop-types": "^15.7.1", + "react-foco": "^1.2.0", + "react-overlays": "^1.1.2", + "react-popper": "^1.3.3", "shortid": "^2.2.14" }, "devDependencies": { diff --git a/src/ActionBar/ActionBar.Component.js b/src/ActionBar/ActionBar.Component.js index 3fd6acf17..92f8884b6 100644 --- a/src/ActionBar/ActionBar.Component.js +++ b/src/ActionBar/ActionBar.Component.js @@ -56,7 +56,8 @@ export const ActionBarComponent = () => { } - control={ -
- -
- + `; @@ -71,66 +27,22 @@ exports[` create dropdown component 2`] = `
-
-
- -
-
+
`; @@ -138,66 +50,22 @@ exports[` create dropdown component 3`] = `
-
- -
+
`; @@ -205,68 +73,22 @@ exports[` create dropdown component 4`] = `
-
- -
+
`; @@ -274,69 +96,22 @@ exports[` create dropdown component 5`] = `
-
- -
+
`; diff --git a/src/Icon/Icon.js b/src/Icon/Icon.js index eb7e63ffa..f4ecbcc82 100644 --- a/src/Icon/Icon.js +++ b/src/Icon/Icon.js @@ -3,7 +3,7 @@ import { ICON_SIZES } from '../utils/constants'; import PropTypes from 'prop-types'; import React from 'react'; -const Icon = ({ glyph, size, clickHandler, className, ...props }) => { +const Icon = ({ glyph, size, className, ...props }) => { const iconClasses = classnames( { [`sap-icon--${glyph}`]: !!glyph, @@ -15,8 +15,7 @@ const Icon = ({ glyph, size, clickHandler, className, ...props }) => { return ( + className={iconClasses} /> ); }; @@ -25,12 +24,10 @@ Icon.displayName = 'Icon'; Icon.propTypes = { glyph: PropTypes.string.isRequired, className: PropTypes.string, - clickHandler: PropTypes.func, size: PropTypes.oneOf(ICON_SIZES) }; Icon.propDescriptions = { - clickHandler: 'Callback function when user clicks on the component.', size: 'Size of the icon. Options include **xs**, **s**, **compact**, and **l**. If no size is provided, default (normal) will be used.' }; diff --git a/src/Icon/Icon.test.js b/src/Icon/Icon.test.js index fcbf0f7d1..183a29136 100644 --- a/src/Icon/Icon.test.js +++ b/src/Icon/Icon.test.js @@ -6,8 +6,10 @@ import { mount, shallow } from 'enzyme'; describe('', () => { const mockOnClick = jest.fn(); const defaultIcon = ( - + ); const iconWithSize = ; @@ -26,11 +28,11 @@ describe('', () => { test('click on icon', () => { let wrapper = mount(defaultIcon); wrapper.find('.sap-icon--cart').simulate('click'); - expect(wrapper.prop('clickHandler')).toBeCalledTimes(1); + expect(wrapper.prop('onClick')).toBeCalledTimes(1); wrapper = shallow(iconWithSize); wrapper.find('span.sap-icon--cart').simulate('click'); - expect(wrapper.prop('clickHandler')).toBeUndefined; + expect(wrapper.prop('onClick')).toBeUndefined; }); describe('Prop spreading', () => { diff --git a/src/LocalizationEditor/LocalizationEditor.js b/src/LocalizationEditor/LocalizationEditor.js index dcbf86b07..5afd03610 100644 --- a/src/LocalizationEditor/LocalizationEditor.js +++ b/src/LocalizationEditor/LocalizationEditor.js @@ -43,6 +43,12 @@ const LocalizationEditor = ({ control, menu, id, compact, textarea, className, l return (
+ } control={ -
- -
- {textarea ? ( -