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"