diff --git a/src/components/Menu/Menu.js b/src/components/Menu/Menu.js index 0059e731..17b85707 100644 --- a/src/components/Menu/Menu.js +++ b/src/components/Menu/Menu.js @@ -98,7 +98,10 @@ class Menu extends Component { if (child.type === MenuLabel) { // MenuLabel needs toggleOpen function // We pass that directly so that component user doesn't need to worry about that - return React.cloneElement(child, { onToggleActive: this.toggleOpen }); + return React.cloneElement(child, { + isOpen: this.state.isOpen, + onToggleActive: this.toggleOpen, + }); } else if (child.type === MenuContent) { // MenuContent needs some styling data (width, arrowPosition, and isOpen info) // We pass those directly so that component user doesn't need to worry about those. diff --git a/src/components/MenuLabel/MenuLabel.css b/src/components/MenuLabel/MenuLabel.css index 77d52a1e..1de14c8a 100644 --- a/src/components/MenuLabel/MenuLabel.css +++ b/src/components/MenuLabel/MenuLabel.css @@ -16,3 +16,6 @@ outline: none; } } + +/* Default isOpen class - no styles yet */ +.isOpen {} diff --git a/src/components/MenuLabel/MenuLabel.js b/src/components/MenuLabel/MenuLabel.js index 0b52d439..88b55a22 100644 --- a/src/components/MenuLabel/MenuLabel.js +++ b/src/components/MenuLabel/MenuLabel.js @@ -35,11 +35,13 @@ class MenuLabel extends Component { } render() { - const { children, className, rootClassName } = this.props; + const { children, className, rootClassName, isOpen, isOpenClassName } = this.props; const rootClass = rootClassName || css.root; + const isOpenClass = isOpenClassName || css.isOpen; const classes = classNames(rootClass, className, { [css.clickedWithMouse]: this.state.clickedWithMouse, + [isOpenClass]: isOpen, }); return ( @@ -58,11 +60,13 @@ MenuLabel.defaultProps = { rootClassName: '', }; -const { func, node, string } = PropTypes; +const { bool, func, node, string } = PropTypes; MenuLabel.propTypes = { children: node.isRequired, className: string, + isOpenClassName: string, + isOpen: bool, onToggleActive: func, rootClassName: string, };