From 337a092791d9aaf2660c887a8a203a2dc7343755 Mon Sep 17 00:00:00 2001 From: meganaconley Date: Mon, 24 Feb 2020 14:57:49 -0800 Subject: [PATCH 01/58] created overlay component --- package-lock.json | 143 +++++++++++++---------------- package.json | 2 +- src/Forms/FormInput.js | 9 +- src/Forms/FormValidationOverlay.js | 33 +++++++ src/Forms/Forms.Component.js | 9 -- 5 files changed, 104 insertions(+), 92 deletions(-) create mode 100644 src/Forms/FormValidationOverlay.js diff --git a/package-lock.json b/package-lock.json index ad3abaffa..584e8eed7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9931,28 +9931,27 @@ "dependencies": { "abbrev": { "version": "1.1.1", - "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", + "resolved": false, "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", "dev": true, "optional": true }, "ansi-regex": { "version": "2.1.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", + "resolved": false, "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz", + "resolved": false, "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==", "dev": true, "optional": true }, "are-we-there-yet": { "version": "1.1.5", - "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz", + "resolved": false, "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==", "dev": true, "optional": true, @@ -9963,17 +9962,15 @@ }, "balanced-match": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", + "resolved": false, "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", + "resolved": false, "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -9988,28 +9985,25 @@ }, "code-point-at": { "version": "1.1.0", - "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", + "resolved": false, "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", - "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", + "resolved": false, "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", - "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", + "resolved": false, "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", + "resolved": false, "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", "dev": true, "optional": true @@ -10026,21 +10020,21 @@ }, "deep-extend": { "version": "0.6.0", - "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz", + "resolved": false, "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==", "dev": true, "optional": true }, "delegates": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", + "resolved": false, "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", "dev": true, "optional": true }, "detect-libc": { "version": "1.0.3", - "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", + "resolved": false, "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=", "dev": true, "optional": true @@ -10057,14 +10051,14 @@ }, "fs.realpath": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", + "resolved": false, "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", "dev": true, "optional": true }, "gauge": { "version": "2.7.4", - "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz", + "resolved": false, "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", "dev": true, "optional": true, @@ -10096,14 +10090,14 @@ }, "has-unicode": { "version": "2.0.1", - "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", + "resolved": false, "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=", "dev": true, "optional": true }, "iconv-lite": { "version": "0.4.24", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", + "resolved": false, "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", "dev": true, "optional": true, @@ -10123,7 +10117,7 @@ }, "inflight": { "version": "1.0.6", - "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", + "resolved": false, "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", "dev": true, "optional": true, @@ -10136,56 +10130,51 @@ "version": "2.0.4", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", - "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", + "resolved": false, "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", "dev": true, "optional": true }, "is-fullwidth-code-point": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", + "resolved": false, "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } }, "isarray": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", + "resolved": false, "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", "dev": true, "optional": true }, "minimatch": { "version": "3.0.4", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", + "resolved": false, "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", + "resolved": false, "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.9.0", "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.9.0.tgz", "integrity": "sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==", "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -10203,10 +10192,9 @@ }, "mkdirp": { "version": "0.5.1", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", + "resolved": false, "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -10251,7 +10239,7 @@ }, "nopt": { "version": "4.0.1", - "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz", + "resolved": false, "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=", "dev": true, "optional": true, @@ -10290,7 +10278,7 @@ }, "npmlog": { "version": "4.1.2", - "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz", + "resolved": false, "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", "dev": true, "optional": true, @@ -10303,45 +10291,43 @@ }, "number-is-nan": { "version": "1.0.1", - "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", + "resolved": false, "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", - "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "resolved": false, "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", "dev": true, "optional": true }, "once": { "version": "1.4.0", - "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", + "resolved": false, "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, - "optional": true, "requires": { "wrappy": "1" } }, "os-homedir": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz", + "resolved": false, "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=", "dev": true, "optional": true }, "os-tmpdir": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", + "resolved": false, "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", "dev": true, "optional": true }, "osenv": { "version": "0.1.5", - "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz", + "resolved": false, "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==", "dev": true, "optional": true, @@ -10352,7 +10338,7 @@ }, "path-is-absolute": { "version": "1.0.1", - "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", + "resolved": false, "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", "dev": true, "optional": true @@ -10366,7 +10352,7 @@ }, "rc": { "version": "1.2.8", - "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz", + "resolved": false, "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==", "dev": true, "optional": true, @@ -10379,7 +10365,7 @@ "dependencies": { "minimist": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "resolved": false, "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "dev": true, "optional": true @@ -10388,7 +10374,7 @@ }, "readable-stream": { "version": "2.3.6", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", + "resolved": false, "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", "dev": true, "optional": true, @@ -10414,21 +10400,20 @@ }, "safe-buffer": { "version": "5.1.2", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "resolved": false, "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", - "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "resolved": false, "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true, "optional": true }, "sax": { "version": "1.2.4", - "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", + "resolved": false, "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", "dev": true, "optional": true @@ -10442,24 +10427,23 @@ }, "set-blocking": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", + "resolved": false, "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=", "dev": true, "optional": true }, "signal-exit": { "version": "3.0.2", - "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz", + "resolved": false, "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=", "dev": true, "optional": true }, "string-width": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", + "resolved": false, "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -10468,7 +10452,7 @@ }, "string_decoder": { "version": "1.1.1", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "resolved": false, "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", "dev": true, "optional": true, @@ -10478,17 +10462,16 @@ }, "strip-ansi": { "version": "3.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", + "resolved": false, "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } }, "strip-json-comments": { "version": "2.0.1", - "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz", + "resolved": false, "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=", "dev": true, "optional": true @@ -10511,14 +10494,14 @@ }, "util-deprecate": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "resolved": false, "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", "dev": true, "optional": true }, "wide-align": { "version": "1.1.3", - "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz", + "resolved": false, "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==", "dev": true, "optional": true, @@ -10528,17 +10511,15 @@ }, "wrappy": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", + "resolved": false, "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", - "dev": true, - "optional": true + "dev": true } } }, @@ -10583,9 +10564,9 @@ "dev": true }, "fundamental-styles": { - "version": "0.4.0-rc.24", - "resolved": "https://registry.npmjs.org/fundamental-styles/-/fundamental-styles-0.4.0-rc.24.tgz", - "integrity": "sha512-qJC7IyxkhqIuDve3NTJ0Oxe01LzpsJFkQAQvRkY/8VjURz4jx5+LBf/m+VJLECub16xrBjD1+Q9I7F5WFaPJpA==", + "version": "0.4.0-rc.25", + "resolved": "https://registry.npmjs.org/fundamental-styles/-/fundamental-styles-0.4.0-rc.25.tgz", + "integrity": "sha512-VT6kuV0YP2oR8C1DgtsSJXO/KW4LYmryRunhfVeSpJ7mIeg/kb20sWqWBqWNZj3qzU9exPMEKISoxAstOuT3Mw==", "requires": { "@sap-theming/theming-base-content": "^11.1.10" } diff --git a/package.json b/package.json index 307f4a33e..84fb4488e 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "@babel/runtime": "^7.8.0", "chain-function": "^1.0.1", "classnames": "^2.2.6", - "fundamental-styles": "0.4.0-rc.24", + "fundamental-styles": "0.4.0-rc.25", "keycode": "^2.2.0", "moment": "^2.24.0", "prop-types": "^15.7.1", diff --git a/src/Forms/FormInput.js b/src/Forms/FormInput.js index d5bae8d7d..9a69384c4 100644 --- a/src/Forms/FormInput.js +++ b/src/Forms/FormInput.js @@ -1,5 +1,6 @@ import classnames from 'classnames'; import { FORM_STATES } from '../utils/constants'; +import FormValidationOverlay from './FormValidationOverlay'; import PropTypes from 'prop-types'; import React, { useEffect } from 'react'; @@ -22,7 +23,7 @@ const FormInput = React.forwardRef(({ state, className, compact, disabled, id, n className ); - return ( + const formInput = ( ); + + return ( + + ); }); FormInput.displayName = 'FormInput'; diff --git a/src/Forms/FormValidationOverlay.js b/src/Forms/FormValidationOverlay.js new file mode 100644 index 000000000..c994b57b0 --- /dev/null +++ b/src/Forms/FormValidationOverlay.js @@ -0,0 +1,33 @@ +import FormMessage from './FormMessage'; +import Popover from '../Popover/Popover'; +import PropTypes from 'prop-types'; +import React from 'react'; + +const FormValidationOverlay = ({ className, control, validationState, ...props }) => { + + const { state, text } = validationState; + + const bodyContent = ({text}); + + return ( + + ); +}; +FormValidationOverlay.displayName = 'FormValidationOverlay'; + +FormValidationOverlay.propTypes = { + className: PropTypes.string, + control: PropTypes.node, + validationState: PropTypes.object +}; + +FormValidationOverlay.propDescriptions = { + +}; + +export default FormValidationOverlay; diff --git a/src/Forms/Forms.Component.js b/src/Forms/Forms.Component.js index 92269ff9c..5127c415a 100644 --- a/src/Forms/Forms.Component.js +++ b/src/Forms/Forms.Component.js @@ -163,9 +163,6 @@ export const FormsComponent = () => { Invalid Input - - Pellentesque metus lacus commodo eget justo ut rutrum varius nunc - @@ -174,9 +171,6 @@ export const FormsComponent = () => { Warning Input - - Pellentesque metus lacus commodo eget justo ut rutrum varius nunc - @@ -185,9 +179,6 @@ export const FormsComponent = () => { Information Input - - Pellentesque metus lacus commodo eget justo ut rutrum varius nunc - From 08d8b2bc027cc2555545457280cedfd985971b05 Mon Sep 17 00:00:00 2001 From: jbadan Date: Tue, 25 Feb 2020 07:38:15 -0800 Subject: [PATCH 02/58] wip --- package-lock.json | 137 ++++++++++-------- src/Forms/FormInput.js | 25 ++-- src/Forms/FormSet.test.js | 2 +- src/Forms/{FormMessage.js => _FormMessage.js} | 0 ...onOverlay.js => _FormValidationOverlay.js} | 8 +- src/Forms/__stories__/FormInput.stories.js | 28 ++-- src/Forms/__stories__/FormMessage.stories.js | 27 ---- src/index.js | 1 - src/utils/constants.js | 1 + 9 files changed, 112 insertions(+), 117 deletions(-) rename src/Forms/{FormMessage.js => _FormMessage.js} (100%) rename src/Forms/{FormValidationOverlay.js => _FormValidationOverlay.js} (76%) delete mode 100644 src/Forms/__stories__/FormMessage.stories.js diff --git a/package-lock.json b/package-lock.json index 584e8eed7..7def87416 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9931,27 +9931,28 @@ "dependencies": { "abbrev": { "version": "1.1.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", "dev": true, "optional": true }, "ansi-regex": { "version": "2.1.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz", "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==", "dev": true, "optional": true }, "are-we-there-yet": { "version": "1.1.5", - "resolved": false, + "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz", "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==", "dev": true, "optional": true, @@ -9962,15 +9963,17 @@ }, "balanced-match": { "version": "1.0.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", - "resolved": false, + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -9985,25 +9988,28 @@ }, "code-point-at": { "version": "1.1.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", "dev": true, "optional": true @@ -10020,21 +10026,21 @@ }, "deep-extend": { "version": "0.6.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz", "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==", "dev": true, "optional": true }, "delegates": { "version": "1.0.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", "dev": true, "optional": true }, "detect-libc": { "version": "1.0.3", - "resolved": false, + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=", "dev": true, "optional": true @@ -10051,14 +10057,14 @@ }, "fs.realpath": { "version": "1.0.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", "dev": true, "optional": true }, "gauge": { "version": "2.7.4", - "resolved": false, + "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz", "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", "dev": true, "optional": true, @@ -10090,14 +10096,14 @@ }, "has-unicode": { "version": "2.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=", "dev": true, "optional": true }, "iconv-lite": { "version": "0.4.24", - "resolved": false, + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", "dev": true, "optional": true, @@ -10117,7 +10123,7 @@ }, "inflight": { "version": "1.0.6", - "resolved": false, + "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", "dev": true, "optional": true, @@ -10130,51 +10136,56 @@ "version": "2.0.4", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", - "resolved": false, + "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", "dev": true, "optional": true }, "is-fullwidth-code-point": { "version": "1.0.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } }, "isarray": { "version": "1.0.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", "dev": true, "optional": true }, "minimatch": { "version": "3.0.4", - "resolved": false, + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "resolved": false, + "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.9.0", "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.9.0.tgz", "integrity": "sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==", "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -10192,9 +10203,10 @@ }, "mkdirp": { "version": "0.5.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -10239,7 +10251,7 @@ }, "nopt": { "version": "4.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz", "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=", "dev": true, "optional": true, @@ -10278,7 +10290,7 @@ }, "npmlog": { "version": "4.1.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz", "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", "dev": true, "optional": true, @@ -10291,43 +10303,45 @@ }, "number-is-nan": { "version": "1.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", "dev": true, "optional": true }, "once": { "version": "1.4.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, + "optional": true, "requires": { "wrappy": "1" } }, "os-homedir": { "version": "1.0.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz", "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=", "dev": true, "optional": true }, "os-tmpdir": { "version": "1.0.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", "dev": true, "optional": true }, "osenv": { "version": "0.1.5", - "resolved": false, + "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz", "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==", "dev": true, "optional": true, @@ -10338,7 +10352,7 @@ }, "path-is-absolute": { "version": "1.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", "dev": true, "optional": true @@ -10352,7 +10366,7 @@ }, "rc": { "version": "1.2.8", - "resolved": false, + "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz", "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==", "dev": true, "optional": true, @@ -10365,7 +10379,7 @@ "dependencies": { "minimist": { "version": "1.2.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "dev": true, "optional": true @@ -10374,7 +10388,7 @@ }, "readable-stream": { "version": "2.3.6", - "resolved": false, + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", "dev": true, "optional": true, @@ -10400,20 +10414,21 @@ }, "safe-buffer": { "version": "5.1.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true, "optional": true }, "sax": { "version": "1.2.4", - "resolved": false, + "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", "dev": true, "optional": true @@ -10427,23 +10442,24 @@ }, "set-blocking": { "version": "2.0.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=", "dev": true, "optional": true }, "signal-exit": { "version": "3.0.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz", "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=", "dev": true, "optional": true }, "string-width": { "version": "1.0.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -10452,7 +10468,7 @@ }, "string_decoder": { "version": "1.1.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", "dev": true, "optional": true, @@ -10462,16 +10478,17 @@ }, "strip-ansi": { "version": "3.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } }, "strip-json-comments": { "version": "2.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz", "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=", "dev": true, "optional": true @@ -10494,14 +10511,14 @@ }, "util-deprecate": { "version": "1.0.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", "dev": true, "optional": true }, "wide-align": { "version": "1.1.3", - "resolved": false, + "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz", "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==", "dev": true, "optional": true, @@ -10511,15 +10528,17 @@ }, "wrappy": { "version": "1.0.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", - "dev": true + "dev": true, + "optional": true } } }, diff --git a/src/Forms/FormInput.js b/src/Forms/FormInput.js index 9a69384c4..1843599d2 100644 --- a/src/Forms/FormInput.js +++ b/src/Forms/FormInput.js @@ -1,11 +1,10 @@ import classnames from 'classnames'; -import { FORM_STATES } from '../utils/constants'; -import FormValidationOverlay from './FormValidationOverlay'; +import { FORM_MESSAGE_TYPES } from '../utils/constants'; +import FormValidationOverlay from './_FormValidationOverlay'; import PropTypes from 'prop-types'; import React, { useEffect } from 'react'; -const FormInput = React.forwardRef(({ state, className, compact, disabled, id, name, placeholder, readOnly, type, value, disableStyles, ...props }, ref) => { - +const FormInput = React.forwardRef(({ className, compact, disabled, id, name, placeholder, readOnly, type, value, validationState, disableStyles, ...props }, ref) => { useEffect(() => { if (!disableStyles) { require('fundamental-styles/dist/fonts.css'); @@ -17,8 +16,7 @@ const FormInput = React.forwardRef(({ state, className, compact, disabled, id, n const formInputClasses = classnames( 'fd-input', { - 'fd-input--compact': !!compact, - [`is-${state}`]: state + 'fd-input--compact': !!compact }, className ); @@ -38,9 +36,12 @@ const FormInput = React.forwardRef(({ state, className, compact, disabled, id, n ); return ( - + validationState ? ( + + ) : + formInput ); }); @@ -55,8 +56,11 @@ FormInput.propTypes = { name: PropTypes.string, placeholder: PropTypes.string, readOnly: PropTypes.bool, - state: PropTypes.oneOf(FORM_STATES), type: PropTypes.string, + validationState: PropTypes.shape({ + state: PropTypes.oneOf(FORM_MESSAGE_TYPES), + text: PropTypes.string + }), value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]) }; @@ -66,7 +70,6 @@ FormInput.defaultProps = { FormInput.propDescriptions = { name: 'Value for the `name` attribute on the input.', - state: 'Sets the state of the input. Can be left empty for default styles.', type: 'Value for the `type` attribute on the input.', value: 'Value for the `value` attribute on the input.' }; diff --git a/src/Forms/FormSet.test.js b/src/Forms/FormSet.test.js index 2f629c075..5d01698c9 100644 --- a/src/Forms/FormSet.test.js +++ b/src/Forms/FormSet.test.js @@ -1,7 +1,7 @@ import FormInput from './FormInput'; import FormItem from './FormItem'; import FormLabel from './FormLabel'; -import FormMessage from './FormMessage'; +import FormMessage from './_FormMessage'; import FormSelect from './FormSelect'; import FormSet from './FormSet'; import FormTextarea from './FormTextarea'; diff --git a/src/Forms/FormMessage.js b/src/Forms/_FormMessage.js similarity index 100% rename from src/Forms/FormMessage.js rename to src/Forms/_FormMessage.js diff --git a/src/Forms/FormValidationOverlay.js b/src/Forms/_FormValidationOverlay.js similarity index 76% rename from src/Forms/FormValidationOverlay.js rename to src/Forms/_FormValidationOverlay.js index c994b57b0..8ac9e56c7 100644 --- a/src/Forms/FormValidationOverlay.js +++ b/src/Forms/_FormValidationOverlay.js @@ -1,4 +1,5 @@ -import FormMessage from './FormMessage'; +import { FORM_MESSAGE_TYPES } from '../utils/constants'; +import FormMessage from './_FormMessage'; import Popover from '../Popover/Popover'; import PropTypes from 'prop-types'; import React from 'react'; @@ -23,7 +24,10 @@ FormValidationOverlay.displayName = 'FormValidationOverlay'; FormValidationOverlay.propTypes = { className: PropTypes.string, control: PropTypes.node, - validationState: PropTypes.object + validationState: PropTypes.shape({ + state: PropTypes.oneOf(FORM_MESSAGE_TYPES), + text: PropTypes.string + }) }; FormValidationOverlay.propDescriptions = { diff --git a/src/Forms/__stories__/FormInput.stories.js b/src/Forms/__stories__/FormInput.stories.js index a89af3df9..6b1044385 100644 --- a/src/Forms/__stories__/FormInput.stories.js +++ b/src/Forms/__stories__/FormInput.stories.js @@ -22,31 +22,27 @@ storiesOf('Components|FormInput', module) .add('ReadOnly', () => ( )) - .add('State | Valid', () => ( - + .add('Validation State | Default', () => ( + )) - .add('State | Invalid', () => ( - + .add('Validation State | Error', () => ( + )) - .add('State | Information', () => ( - + .add('Validation State | Warning', () => ( + )) - .add('State | Warning', () => ( - + .add('Validation State | Information', () => ( + + )) + .add('Validation State | Success', () => ( + )) .add('Props', () => ( + readOnly={boolean('Read only?', false)} /> )) .add('disable styles', () => ( diff --git a/src/Forms/__stories__/FormMessage.stories.js b/src/Forms/__stories__/FormMessage.stories.js deleted file mode 100644 index 610f394ff..000000000 --- a/src/Forms/__stories__/FormMessage.stories.js +++ /dev/null @@ -1,27 +0,0 @@ -import FormMessage from '../FormMessage'; -import React from 'react'; -import { storiesOf } from '@storybook/react'; -import { - select, - withKnobs -} from '@storybook/addon-knobs'; - -const createProps = (overrides) => ({ - type: select('Types', { - 'default': null, - 'error': 'error', - 'success': 'success', - 'information': 'information', - 'warning': 'warning' - }), - ...overrides -}); - -storiesOf('Components|FormMessage', module) - .addDecorator(withKnobs) - .add('Default', () => ( - Default - )) - .add('disable styles', () => ( - Default - )); diff --git a/src/index.js b/src/index.js index 1fbcf9143..67de0e689 100644 --- a/src/index.js +++ b/src/index.js @@ -20,7 +20,6 @@ export { default as FormInput } from './Forms/FormInput'; export { default as FormRadioGroup } from './Forms/FormRadioGroup'; export { default as FormRadioItem } from './Forms/FormRadioItem'; export { default as FormTextarea } from './Forms/FormTextarea'; -export { default as FormMessage } from './Forms/FormMessage'; export { default as FormSelect } from './Forms/FormSelect'; export { default as FormFieldset } from './Forms/FormFieldset'; export { default as FormLegend } from './Forms/FormLegend'; diff --git a/src/utils/constants.js b/src/utils/constants.js index d7cf5f20e..83d589bd3 100644 --- a/src/utils/constants.js +++ b/src/utils/constants.js @@ -44,6 +44,7 @@ export const BUTTON_TYPES = [ ]; export const FORM_MESSAGE_TYPES = [ + 'default', 'error', 'warning', 'information', From c0bf9aeba1f05b9f079113f0c46168ad0a6da70c Mon Sep 17 00:00:00 2001 From: jbadan Date: Tue, 25 Feb 2020 13:19:48 -0800 Subject: [PATCH 03/58] rc25 --- src/Forms/FormInput.js | 9 +- src/Forms/FormInput.test.js | 51 ++++++- src/Forms/FormItem.test.js | 7 - src/Forms/FormMessage.test.js | 4 +- src/Forms/FormSet.test.js | 7 - src/Forms/Forms.Component.js | 84 +++++------ src/Forms/_FormValidationOverlay.js | 8 +- .../__snapshots__/FormInput.test.js.snap | 142 +++++++++++++++++- src/Forms/__snapshots__/FormItem.test.js.snap | 13 +- .../__snapshots__/FormMessage.test.js.snap | 2 +- src/Forms/__snapshots__/FormSet.test.js.snap | 13 +- src/Forms/__stories__/FormInput.stories.js | 22 +-- src/Popover/Popover.js | 4 + .../documentation/Properties/defaults.js | 6 +- src/utils/constants.js | 1 - 15 files changed, 270 insertions(+), 103 deletions(-) diff --git a/src/Forms/FormInput.js b/src/Forms/FormInput.js index 1843599d2..12fcadf99 100644 --- a/src/Forms/FormInput.js +++ b/src/Forms/FormInput.js @@ -12,11 +12,15 @@ const FormInput = React.forwardRef(({ className, compact, disabled, id, name, pl } }, []); - const formInputClasses = classnames( 'fd-input', { - 'fd-input--compact': !!compact + 'fd-input--compact': !!compact, + // TO DO: update with https://github.com/SAP/fundamental-styles/pull/704 + 'is-warning': validationState?.state === 'warning', + 'is-invalid': validationState?.state === 'error', + 'is-valid': validationState?.state === 'success', + 'is-information': validationState?.state === 'information' }, className ); @@ -39,6 +43,7 @@ const FormInput = React.forwardRef(({ className, compact, disabled, id, name, pl validationState ? ( ) : formInput diff --git a/src/Forms/FormInput.test.js b/src/Forms/FormInput.test.js index 8aced5da1..7b2c8d25b 100644 --- a/src/Forms/FormInput.test.js +++ b/src/Forms/FormInput.test.js @@ -7,8 +7,7 @@ describe('', () => { const formInput = ( + placeholder='Field placeholder text' /> ); test('create form input item', () => { @@ -38,6 +37,54 @@ describe('', () => { }); }); + describe('Validation states', () => { + test('should render the correct snapshots', () => { + const formInputWarning = ( + + ); + + let component = renderer.create(formInputWarning); + let tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + + const formInputError = ( + + ); + + component = renderer.create(formInputError); + tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + + const formInputSuccess = ( + + ); + + component = renderer.create(formInputSuccess); + tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + + const formInputInformation = ( + + ); + + component = renderer.create(formInputInformation); + tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); + }); + test('forwards the ref', () => { let ref; class Test extends React.Component { diff --git a/src/Forms/FormItem.test.js b/src/Forms/FormItem.test.js index 90bc5f0af..1074c88a0 100644 --- a/src/Forms/FormItem.test.js +++ b/src/Forms/FormItem.test.js @@ -1,7 +1,6 @@ import FormInput from './FormInput'; import FormItem from './FormItem'; import FormLabel from './FormLabel'; -import FormMessage from './FormMessage'; import FormSelect from './FormSelect'; import FormTextarea from './FormTextarea'; import { mount } from 'enzyme'; @@ -24,12 +23,6 @@ describe('', () => { Pellentesque metus lacus commodo eget justo ut rutrum varius nunc. - - Pellentesque metus lacus commodo eget justo ut rutrum varius nunc - - - Pellentesque metus lacus commodo eget justo ut rutrum varius nunc - diff --git a/src/Forms/FormMessage.test.js b/src/Forms/FormMessage.test.js index b05c876d0..a73104ca9 100644 --- a/src/Forms/FormMessage.test.js +++ b/src/Forms/FormMessage.test.js @@ -1,11 +1,11 @@ -import FormMessage from './FormMessage'; +import FormMessage from './_FormMessage'; import { mount } from 'enzyme'; import React from 'react'; import renderer from 'react-test-renderer'; describe('', () => { const formMessage = ( - + Pellentesque metus lacus commodo eget justo ut rutrum varius nunc ); diff --git a/src/Forms/FormSet.test.js b/src/Forms/FormSet.test.js index 5d01698c9..8be19b308 100644 --- a/src/Forms/FormSet.test.js +++ b/src/Forms/FormSet.test.js @@ -1,7 +1,6 @@ import FormInput from './FormInput'; import FormItem from './FormItem'; import FormLabel from './FormLabel'; -import FormMessage from './_FormMessage'; import FormSelect from './FormSelect'; import FormSet from './FormSet'; import FormTextarea from './FormTextarea'; @@ -34,12 +33,6 @@ describe('', () => { Pellentesque metus lacus commodo eget justo ut rutrum varius nunc. - - Pellentesque metus lacus commodo eget justo ut rutrum varius nunc - - - Pellentesque metus lacus commodo eget justo ut rutrum varius nunc - diff --git a/src/Forms/Forms.Component.js b/src/Forms/Forms.Component.js index 5127c415a..c2fa3f89c 100644 --- a/src/Forms/Forms.Component.js +++ b/src/Forms/Forms.Component.js @@ -1,6 +1,6 @@ import path from 'path'; import React from 'react'; -import { Checkbox, FormFieldset, FormGroup, FormInput, FormItem, FormLabel, FormLegend, FormMessage, FormRadioGroup, FormRadioItem, FormSelect, FormSet, FormTextarea, InlineHelp } from '../'; +import { Checkbox, FormFieldset, FormGroup, FormInput, FormItem, FormLabel, FormLegend, FormRadioGroup, FormRadioItem, FormSelect, FormSet, FormTextarea, InlineHelp } from '../'; import { ComponentPage, Example } from '../_playground'; export const FormsComponent = () => { @@ -15,12 +15,11 @@ export const FormsComponent = () => { description={`Inputs are used to collect data from the user. When a field is required, the \`required\` property will include an asterisk (*).`} title='Inputs'> -
+ <> Default Input - + @@ -29,8 +28,7 @@ export const FormsComponent = () => { Required Input - + @@ -52,17 +50,16 @@ export const FormsComponent = () => { -
+ -
+ <> Default Input - + @@ -71,8 +68,7 @@ export const FormsComponent = () => { Required Input - + @@ -94,7 +90,7 @@ export const FormsComponent = () => { -
+ { the data allowed in the input field. An example is “Maximum 20 characters”. This is displayed below the input field.`} title='Input Help Elements'> -
+ <> @@ -114,55 +110,53 @@ export const FormsComponent = () => { placement='bottom-left' text='Lorem ipsum dolor sit amet, consectetur adipiscing.' /> - + Input with Help Message - - - Pellentesque metus lacus commodo eget justo ut rutrum varius nunc - + -
+ -
+ <> - Normal Input - - Pellentesque metus lacus commodo eget justo ut rutrum varius nunc + Default Input + - Valid Input + Success Input + validationState={{ state: 'success', text: 'Pellentesque metus lacus commodo eget justo ut rutrum varius nunc' }} /> + - Invalid Input + Error Input + validationState={{ state: 'error', text: 'Pellentesque metus lacus commodo eget justo ut rutrum varius nunc' }} /> + @@ -170,7 +164,8 @@ export const FormsComponent = () => { Warning Input + validationState={{ state: 'warning', text: 'Pellentesque metus lacus commodo eget justo ut rutrum varius nunc' }} /> + @@ -178,10 +173,11 @@ export const FormsComponent = () => { Information Input + validationState={{ state: 'information', text: 'Pellentesque metus lacus commodo eget justo ut rutrum varius nunc' }} /> + -
+ { selection within the form.\n\n* **Read Only**: Used to display static information in the context of a form.`} title='Disabled and Read Only'> - + <> Disabled Input + placeholder='Field placeholder text' /> @@ -208,17 +203,16 @@ export const FormsComponent = () => { + readOnly /> - + -
+ <> Default Select @@ -240,14 +234,14 @@ export const FormsComponent = () => { -
+ -
+ <> Radio buttons @@ -308,7 +302,7 @@ export const FormsComponent = () => { -
+ { +const FormValidationOverlay = ({ className, control, id, validationState, ...props }) => { const { state, text } = validationState; @@ -16,7 +16,10 @@ const FormValidationOverlay = ({ className, control, validationState, ...props } body={bodyContent} control={control} noArrow - placement='bottom-start' /> + placement='bottom-start' + popperClassName='fd-popover__popper--input-messaging-group' // TO DO: this class is in 0.6.0-rc.22 - removes borders + popperProps={{ id }} + style={{ display: 'block' }} /> // TO DO: replace with class from fundamental-styles ); }; FormValidationOverlay.displayName = 'FormValidationOverlay'; @@ -24,6 +27,7 @@ FormValidationOverlay.displayName = 'FormValidationOverlay'; FormValidationOverlay.propTypes = { className: PropTypes.string, control: PropTypes.node, + id: PropTypes.string, validationState: PropTypes.shape({ state: PropTypes.oneOf(FORM_MESSAGE_TYPES), text: PropTypes.string diff --git a/src/Forms/__snapshots__/FormInput.test.js.snap b/src/Forms/__snapshots__/FormInput.test.js.snap index b536b6ca1..3e0a7fae7 100644 --- a/src/Forms/__snapshots__/FormInput.test.js.snap +++ b/src/Forms/__snapshots__/FormInput.test.js.snap @@ -1,8 +1,148 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[` Validation states should render the correct snapshots 1`] = ` +
+
+
+ +
+
+
+`; + +exports[` Validation states should render the correct snapshots 2`] = ` +
+
+
+ +
+
+
+`; + +exports[` Validation states should render the correct snapshots 3`] = ` +
+
+
+ +
+
+
+`; + +exports[` Validation states should render the correct snapshots 4`] = ` +
+
+
+ +
+
+
+`; + exports[` create form input item 1`] = ` create form item 1`] = ` Default Input - - Pellentesque metus lacus commodo eget justo ut rutrum varius nunc - - - Pellentesque metus lacus commodo eget justo ut rutrum varius nunc - - - Pellentesque metus lacus commodo eget justo ut rutrum varius nunc - - - Pellentesque metus lacus commodo eget justo ut rutrum varius nunc - +
+
+
+ +
+
+