diff --git a/CHANGELOG.md b/CHANGELOG.md
index fa6fd893..0c7bf402 100644
--- a/CHANGELOG.md
+++ b/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)
diff --git a/packages/core/package.json b/packages/core/package.json
index 5e581e53..bbd41736 100644
--- a/packages/core/package.json
+++ b/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"
diff --git a/packages/core/src/SearchInput.js b/packages/core/src/SearchInput.js
index 694c7b43..225cdcb1 100644
--- a/packages/core/src/SearchInput.js
+++ b/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 (
diff --git a/packages/core/src/StatusIcon.js b/packages/core/src/StatusIcon.js
index 74b45bf7..13097176 100644
--- a/packages/core/src/StatusIcon.js
+++ b/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 && (
{icon}
diff --git a/packages/core/src/Text.js b/packages/core/src/Text.js
index 33db86e1..ab5c41b8 100644
--- a/packages/core/src/Text.js
+++ b/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)
diff --git a/packages/core/src/utils/getRemainingProps.js b/packages/core/src/utils/getRemainingProps.js
new file mode 100644
index 00000000..da31171f
--- /dev/null
+++ b/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));
+}
diff --git a/packages/storybook/examples/core/Text.stories.js b/packages/storybook/examples/core/Text.stories.js
index 5f1050fc..acb3d7a7 100644
--- a/packages/storybook/examples/core/Text.stories.js
+++ b/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';
diff --git a/yarn.lock b/yarn.lock
index c76f5a59..29e159c8 100644
--- a/yarn.lock
+++ b/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"