diff --git a/packages/ui/Button/Button.js b/packages/ui/Button/Button.js index 0ad5fa6db5..28d011932d 100644 --- a/packages/ui/Button/Button.js +++ b/packages/ui/Button/Button.js @@ -106,6 +106,17 @@ const ButtonBase = kind({ */ iconComponent: EnactPropTypes.componentOverride, + /** + * The icon component prop passed to the {@link ui/Button.Button.iconComponent} component as props. + * + * If [icon]{@link ui/Button.ButtonBase.icon} is not assigned or is false, the icon + * will not be rendered. + * + * @type {Object} + * @public + */ + iconProps: PropTypes.object, + /** * Enforces a minimum width for the component. * @@ -175,12 +186,13 @@ const ButtonBase = kind({ pressed, selected }, size), - icon: ({css, icon, iconComponent, size}) => { + icon: ({css, icon, iconComponent, iconProps, size}) => { if (icon == null || icon === false) return; // Establish the base collection of props for the moost basic `iconComponent` type, an // HTML element string. const props = { + ...iconProps, className: css.icon, component: iconComponent }; @@ -201,6 +213,7 @@ const ButtonBase = kind({ render: ({children, css, decoration, disabled, icon, ...rest}) => { delete rest.iconComponent; + delete rest.iconProps; delete rest.minWidth; delete rest.pressed; delete rest.selected; diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index e70c76e3a7..46ca827c94 100644 --- a/packages/ui/CHANGELOG.md +++ b/packages/ui/CHANGELOG.md @@ -2,6 +2,12 @@ The following is a curated list of changes in the Enact ui module, newest changes on the top. +## [unreleased] + +### Added + +- `ui/Button` prop `iconProps` to allow iconProps to pass it to the Icon as props + ## [3.3.0-alpha.11] - 2020-06-08 No significant changes.