[Bugfix] Fix passing invalid props to dom element

CHANGELOG.md

@@ -9,6 +9,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ### Breaking
 - [Core] Reduce icon font to only WOFF and WOFF2 formats. (#266)
 
+### Added
+- [Core] Allow passing remaining props to wrapper DOM element. (#267, #269)
+
 ### Changed
 - [Core] Add sort icon. (#268)
 

packages/core/package.json

@@ -40,6 +40,7 @@
     "create-react-context": "^0.2.3",
     "document-offset": "^1.0.4",
     "keycode": "^2.1.9",
+    "lodash.omit": "^4.5.0",
     "memoize-one": "^4.0.3",
     "react-textarea-autosize": "^7.1.0",
     "warning": "^4.0.3"

packages/core/src/SearchInput.js

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 
 import icBEM from './utils/icBEM';
 import prefixClass from './utils/prefixClass';
+import getRemainingProps from './utils/getRemainingProps';
 import rowComp from './mixins/rowComp';
 import './styles/SearchInput.scss';
 
@@ -139,13 +140,15 @@ class SearchInput extends Component {
     }
 
     render() {
-        const { inputProps, value, placeholder, className, ...wrapperProps } = this.props;
+        const { inputProps, value, placeholder, className } = this.props;
         const { innerValue } = this.state;
 
         const inputValue = this.isControlled() ? value : innerValue;
         const isLoading = this.context.status === STATUS_CODE.LOADING;
         const rootClassName = classNames(className, `${BEM.root}`);
 
+        const wrapperProps = getRemainingProps(this.props, SearchInput.propTypes);
+
         return (
             <div className={rootClassName} {...wrapperProps}>
                 <div className={BEM.inputWrapper}>

packages/core/src/StatusIcon.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import icBEM from './utils/icBEM';
 import prefixClass from './utils/prefixClass';
+import getRemainingProps from './utils/getRemainingProps';
 import './styles/StatusIcon.scss';
 
 import Icon from './Icon';
@@ -100,7 +101,7 @@ class StatusIcon extends PureComponent {
     }
 
     render() {
-        const { status, position, ...wrapperProps } = this.props;
+        const { status, position } = this.props;
         const rootClassName = ROOT_BEM.modifier(position);
         let icon = null;
 
@@ -120,6 +121,8 @@ class StatusIcon extends PureComponent {
                 break;
         }
 
+        const wrapperProps = getRemainingProps(this.props, StatusIcon.propTypes);
+
         return (icon && (
             <span className={rootClassName} {...wrapperProps}>
                 {icon}

packages/core/src/Text.js

@@ -21,6 +21,7 @@ import classNames from 'classnames';
 
 import icBEM from './utils/icBEM';
 import prefixClass from './utils/prefixClass';
+import getRemainingProps from './utils/getRemainingProps';
 import withStatus, { withStatusPropTypes } from './mixins/withStatus';
 import './styles/Text.scss';
 
@@ -125,8 +126,8 @@ class Text extends PureComponent {
             noGrow,
             bold,
             className,
-            ...wrapperProps
         } = this.props;
+        const wrapperProps = getRemainingProps(this.props, Text.propTypes);
 
         const bemClass = BEM.root
             .modifier(align)

packages/core/src/utils/getRemainingProps.js

@@ -0,0 +1,5 @@
+import omit from 'lodash.omit';
+
+export default function getRemainingProps(props, propTypes) {
+    return omit(props, Object.keys(propTypes));
+}

packages/storybook/examples/core/Text.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { StatusIcon } from '@ichef/gypcrete/src/StatusIcon';
+import StatusIcon from '@ichef/gypcrete/src/StatusIcon';
 import Text, { PureText } from '@ichef/gypcrete/src/Text';
 import TextEllipsis from '@ichef/gypcrete/src/TextEllipsis';
 

yarn.lock

@@ -9739,6 +9739,11 @@ lodash.memoize@^4.1.2:
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
+lodash.omit@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.omit/-/lodash.omit-4.5.0.tgz#6eb19ae5a1ee1dd9df0b969e66ce0b7fa30b5e60"
+  integrity sha1-brGa5aHuHdnfC5aeZs4Lf6MLXmA=
+
 lodash.set@^4.3.2:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/lodash.set/-/lodash.set-4.3.2.tgz#d8757b1da807dde24816b0d6a84bea1a76230b23"