diff --git a/packages/top-app-bar/index.js b/packages/top-app-bar/index.js
index 70d0b80b4..58b8d4bbf 100644
--- a/packages/top-app-bar/index.js
+++ b/packages/top-app-bar/index.js
@@ -71,10 +71,25 @@ export default class TopAppBar extends React.Component {
this.foundation_.destroy();
}
+ componentDidUpdate(prevProps) {
+ const foundationChanged = ['short', 'shortCollapsed', 'fixed']
+ .some((variant) => this.props[variant] !== prevProps[variant] );
+
+ if (foundationChanged) {
+ this.initializeFoundation();
+ }
+ }
+
+
initializeFoundation = () => {
- if (this.props.short) {
+ const {short, shortCollapsed, fixed} = this.props;
+ if (this.foundation_) {
+ this.foundation_.destroy();
+ }
+
+ if (short || shortCollapsed) {
this.foundation_ = new MDCShortTopAppBarFoundation(this.adapter);
- } else if (this.props.fixed) {
+ } else if (fixed) {
this.foundation_ = new MDCFixedTopAppBarFoundation(this.adapter);
} else {
this.foundation_ = new MDCTopAppBarFoundation(this.adapter);
@@ -83,6 +98,7 @@ export default class TopAppBar extends React.Component {
this.foundation_.init();
}
+
addClassesToElement(classes, element) {
const updatedProps = {
className: classnames(classes, element.props.className),
diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json
index 691d5c73d..cc5e00ab7 100644
--- a/test/screenshot/golden.json
+++ b/test/screenshot/golden.json
@@ -32,6 +32,7 @@
"top-app-bar/standard": "7a2dd6318d62ac2eabd66f1b28100db7c15840ccb753660065fa9524db6435d6",
"top-app-bar/standardNoActionItems": "6d361edb994cafcc6ac720336d12ee7d7114745993e16abd6e6b00f078424ff2",
"top-app-bar/standardWithNavigationIconElement": "95afd559c35dede805e4d4b51ad1fabd82b4117c358a8679e3166b88e059bf68",
+ "top-app-bar/prominentToShortCollapsed": "ce23a6060af19f93ee0255e45ebe51c7243ff12c14b2c09d070501ea7806e316",
"top-app-bar/dense": "e273e6c777f168248f5757c1f00a74206f4cce51c484d91cc7d36dc16de7d0de",
"top-app-bar/prominentDense": "cc8af934f9187ffd8f250834ef7c73e5c53c5ace10126bb855f74878ba125149",
"drawer/permanentBelowTopAppBar": "587ee2605c4b3e3f0408c6130b824b58587e05cedf9b964e14fc481b9de1e4c2",
@@ -41,4 +42,4 @@
"drawer/modal": "da83487c9349b253f7d4de01f92d442de55aab92a8028b77ff1a48cfaa265b72",
"drawer/permanentToModal": "6355905c2241b5e6fdddc2e25119a1cc3b062577375a88b59e6750c4b76e4561",
"typography": "c5e87d672d8c05ca3b61c0df4971eabe3c6a6a1f24a9b98f71f55a23360c498a"
-}
+}
\ No newline at end of file
diff --git a/test/screenshot/top-app-bar/prominentToShortCollapsed.js b/test/screenshot/top-app-bar/prominentToShortCollapsed.js
new file mode 100644
index 000000000..a59f25bb2
--- /dev/null
+++ b/test/screenshot/top-app-bar/prominentToShortCollapsed.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import TopAppBar from '../../../packages/top-app-bar';
+import MaterialIcon from '../../../packages/material-icon';
+import MainTopAppBarContent from './mainContent';
+
+class TopAppBarProminentToShortCollapsedScreenshotTest extends React.Component {
+ state = {
+ isPhone: window.innerWidth < 599,
+ };
+
+ componentDidMount() {
+ window.addEventListener('resize', this.updateTopAppBarVariant);
+ }
+
+ shouldComponentUpdate(_, nextState) {
+ return nextState.isPhone !== this.state.isPhone;
+ }
+
+ componentWillUnmount() {
+ window.removeEventListener('resize', this.updateTopAppBarVariant);
+ }
+
+ updateTopAppBarVariant = () => {
+ const isPhone = window.innerWidth < 599;
+ this.setState({isPhone});
+ }
+
+ render() {
+ if (this.state.isPhone) {
+ return (
+
+ console.log('click')}
+ />}
+ />
+
+
+ );
+ }
+
+ return (
+
+ console.log('click')}
+ />}
+ />
+
+
+ );
+ }
+}
+
+export default TopAppBarProminentToShortCollapsedScreenshotTest;
diff --git a/test/screenshot/top-app-bar/variants.js b/test/screenshot/top-app-bar/variants.js
index 41ebdc8b9..f2776927b 100644
--- a/test/screenshot/top-app-bar/variants.js
+++ b/test/screenshot/top-app-bar/variants.js
@@ -8,4 +8,5 @@ export default [
'standard',
'standardNoActionItems',
'standardWithNavigationIconElement',
+ 'prominentToShortCollapsed',
];
diff --git a/test/unit/top-app-bar/index.test.js b/test/unit/top-app-bar/index.test.js
index df6a91f4d..ee699d54a 100644
--- a/test/unit/top-app-bar/index.test.js
+++ b/test/unit/top-app-bar/index.test.js
@@ -215,6 +215,111 @@ test('#enableRippleOnElement throws error if a native element', () => {
);
});
+test('when changes from short to fixed the foundation changes', () => {
+ const wrapper = shallow();
+ const originalFoundation = wrapper.instance().foundation_;
+ wrapper.setProps({fixed: true, short: false});
+ assert.notEqual(wrapper.instance().foundation_, originalFoundation);
+ assert.exists(wrapper.instance().foundation_);
+});
+
+test('when changes from short to fixed the foundation changes', () => {
+ const wrapper = shallow();
+ const originalFoundation = wrapper.instance().foundation_;
+ wrapper.setProps({fixed: true, short: false});
+ assert.notEqual(wrapper.instance().foundation_, originalFoundation);
+ assert.exists(wrapper.instance().foundation_);
+});
+
+test('when changes from short to standard the foundation changes', () => {
+ const wrapper = shallow();
+ const originalFoundation = wrapper.instance().foundation_;
+ wrapper.setProps({short: false});
+ assert.notEqual(wrapper.instance().foundation_, originalFoundation);
+ assert.exists(wrapper.instance().foundation_);
+});
+
+test('when changes from short to prominent the foundation changes', () => {
+ const wrapper = shallow();
+ const originalFoundation = wrapper.instance().foundation_;
+ wrapper.setProps({short: false, prominent: true});
+ assert.notEqual(wrapper.instance().foundation_, originalFoundation);
+ assert.exists(wrapper.instance().foundation_);
+});
+
+test('when changes from short to shortCollpased the foundation changes', () => {
+ const wrapper = shallow();
+ const originalFoundation = wrapper.instance().foundation_;
+ wrapper.setProps({shortCollapsed: true});
+ assert.notEqual(wrapper.instance().foundation_, originalFoundation);
+ assert.exists(wrapper.instance().foundation_);
+});
+
+test('when changes from fixed to prominent the foundation changes', () => {
+ const wrapper = shallow();
+ const originalFoundation = wrapper.instance().foundation_;
+ wrapper.setProps({fixed: false, prominent: true});
+ assert.notEqual(wrapper.instance().foundation_, originalFoundation);
+ assert.exists(wrapper.instance().foundation_);
+});
+
+test('when changes from fixed to short the foundation changes', () => {
+ const wrapper = shallow();
+ const originalFoundation = wrapper.instance().foundation_;
+ wrapper.setProps({fixed: false, short: true});
+ assert.notEqual(wrapper.instance().foundation_, originalFoundation);
+ assert.exists(wrapper.instance().foundation_);
+});
+
+test('when changes from fixed to shortCollpased the foundation changes', () => {
+ const wrapper = shallow();
+ const originalFoundation = wrapper.instance().foundation_;
+ wrapper.setProps({fixed: false, shortCollapsed: true});
+ assert.notEqual(wrapper.instance().foundation_, originalFoundation);
+ assert.exists(wrapper.instance().foundation_);
+});
+
+test('when changes from fixed to standard the foundation changes', () => {
+ const wrapper = shallow();
+ const originalFoundation = wrapper.instance().foundation_;
+ wrapper.setProps({fixed: false});
+ assert.notEqual(wrapper.instance().foundation_, originalFoundation);
+ assert.exists(wrapper.instance().foundation_);
+});
+
+test('when changes from standard to fixed the foundation changes', () => {
+ const wrapper = shallow();
+ const originalFoundation = wrapper.instance().foundation_;
+ wrapper.setProps({fixed: true});
+ assert.notEqual(wrapper.instance().foundation_, originalFoundation);
+ assert.exists(wrapper.instance().foundation_);
+});
+
+test('when changes from standard to short the foundation changes', () => {
+ const wrapper = shallow();
+ const originalFoundation = wrapper.instance().foundation_;
+ wrapper.setProps({short: true});
+ assert.notEqual(wrapper.instance().foundation_, originalFoundation);
+ assert.exists(wrapper.instance().foundation_);
+});
+
+test('when changes from standard to shortCollapsed the foundation changes', () => {
+ const wrapper = shallow();
+ const originalFoundation = wrapper.instance().foundation_;
+ wrapper.setProps({shortCollapsed: true});
+ assert.notEqual(wrapper.instance().foundation_, originalFoundation);
+ assert.exists(wrapper.instance().foundation_);
+});
+
+test('when changes from standard to prominent the foundation does not ' +
+ 'change', () => {
+ const wrapper = shallow();
+ const originalFoundation = wrapper.instance().foundation_;
+ wrapper.setProps({prominent: true});
+ assert.equal(wrapper.instance().foundation_, originalFoundation);
+ assert.exists(wrapper.instance().foundation_);
+});
+
test('#componentWillUnmount destroys foundation', () => {
const wrapper = shallow();
const foundation = wrapper.instance().foundation_;