Unknown Prop Warning on ResponsiveNavigation Component (#57)

* GridContainer full / fluid generates render warning from React (#55)

* Unknown Prop Warning on ResponsiveNavigation Component (#23)

Author: bobwalker99

src/components/responsive.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { TopBar } from './top-bar';
-import { GeneralPropTypes, FlexboxPropTypes, createClassName, generalClassNames, removeProps } from '../utils';
+import { GeneralPropTypes, FlexboxPropTypes, createClassName, generalClassNames, removeProps, objectKeys } from '../utils';
 import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
 
 // Default pixel value when title bar is displayed and top bar is hidden.
@@ -116,9 +116,17 @@ export const TitleBar = props => {
     generalClassNames(props)
   );
 
+  const passProps = removeProps(props, objectKeys(TitleBar.propTypes));
+  
   return (
-    <div {...props} className={className}/>
+    <div {...passProps} className={className} />
   );
+  
+};
+
+TitleBar.propTypes = {
+  ...GeneralPropTypes,
+  ...FlexboxPropTypes
 };
 
 /**
@@ -133,12 +141,18 @@ export const MenuIcon = props => {
     props.className,
     generalClassNames(props)
   );
+  const passProps = removeProps(props, objectKeys(MenuIcon.propTypes));
 
   return (
-    <button {...props} className={className} type="button"/>
+    <button {...passProps} className={className} type="button"/>
   );
 };
 
+MenuIcon.propTypes = {
+  ...GeneralPropTypes,
+  ...FlexboxPropTypes
+};
+
 /**
  * Title bar title sub-component.
  *
@@ -152,7 +166,13 @@ export const TitleBarTitle = props => {
     generalClassNames(props)
   );
 
+  const passProps = removeProps(props, objectKeys(TitleBarTitle.propTypes));
   return (
-    <div {...props} className={className}/>
+    <div {...passProps} className={className}/>
   );
 };
+
+TitleBarTitle.propTypes = {
+  ...GeneralPropTypes,
+  ...FlexboxPropTypes
+};

test/components/responsive-spec.js

@@ -101,7 +101,10 @@ describe('TitleBar component', () => {
     const component = render(<TitleBar className="my-title-bar"/>);
     expect(component).to.have.className('my-title-bar');
   });
-
+  it('does not carry over non-DOM props', () => {
+    const component = shallow(<TitleBar isHidden={true} />);
+    expect(component).to.not.have.prop('isHidden');
+  });
 });
 
 describe('MenuIcon component', () => {
@@ -136,6 +139,11 @@ describe('MenuIcon component', () => {
     expect(component).to.have.text('Icon');
   });
 
+  it('does not carry over non-DOM props', () => {
+    const component = shallow(<MenuIcon isHidden={true} />);
+    expect(component).to.not.have.prop('isHidden');
+  });
+
 });
 
 describe('TitleBarTitle component', () => {
@@ -165,4 +173,9 @@ describe('TitleBarTitle component', () => {
     expect(component).to.have.text('Menu');
   });
 
+  it('does not carry over non-DOM props', () => {
+    const component = shallow(<TitleBarTitle isHidden={true} />);
+    expect(component).to.not.have.prop('isHidden');
+  });
+
 });