diff --git a/packages/top-app-bar/FixedAdjust.js b/packages/top-app-bar/FixedAdjust.js index 878e5f08b..a65472e65 100644 --- a/packages/top-app-bar/FixedAdjust.js +++ b/packages/top-app-bar/FixedAdjust.js @@ -29,16 +29,24 @@ const FixedAdjust = (props) => { tag: Tag, children, className, + dense, + prominent, + short, ...otherProps } = props; + const base = 'mdc-top-app-bar'; + const suffix = '-fixed-adjust'; + const classes = classnames(className, { + [base + '--short' + suffix]: short, + [base + '--dense' + suffix]: dense && !prominent, + [base + '--dense-prominent' + suffix]: dense && prominent, + [base + '--prominent' + suffix]: !dense && prominent, + [base + '-' + suffix]: !short && !dense && !prominent, + }); + return ( - - {children} - + {children} ); }; @@ -46,11 +54,17 @@ FixedAdjust.propTypes = { tag: PropTypes.string, children: PropTypes.node.isRequired, className: PropTypes.string, + dense: PropTypes.bool, + prominent: PropTypes.bool, + short: PropTypes.bool, }; FixedAdjust.defaultProps = { tag: 'main', className: '', + dense: false, + prominent: false, + short: false, }; export default FixedAdjust; diff --git a/packages/top-app-bar/README.md b/packages/top-app-bar/README.md index 20dc6f698..c0b45ee23 100644 --- a/packages/top-app-bar/README.md +++ b/packages/top-app-bar/README.md @@ -52,6 +52,8 @@ Use the `` component to give your content top-padding, s ## Props +### TopAppBar + Prop Name | Type | Description --- | --- | --- actionItems | Array | Accepts an array of elements that should be rendered to the opposite side of the title. Note that a single action item should also be passed as an array. @@ -62,10 +64,21 @@ short | Boolean | Enables short variant. shortCollapsed | Boolean | Enables short collapsed variant. prominent | Boolean | Enables prominent variant. fixed | Boolean | Enables fixed variant. -dense | Boolean | Enables dense variant. +dense | Boolean | Enables dense variant. + +> NOTES: As per design guidelines, prominent and dense variants should not be used with short or short collapsed. Additionally, dense variants should only be used on desktop. -> NOTE: As per design guidelines, prominent and dense variants should not be used with short or short collapsed. +### TopAppBarFixedAdjust + +Prop Name | Type | Description +--- | --- | --- +className | String | Classes to be applied to the root element. +dense | Boolean | Enables dense variant. +prominent | Boolean | Enables prominent variant. +short | Boolean | Enables short variant. +tag | String | Customizes the TopAppBarFixedAdjust tag (defaults to `
`) +> NOTE: if not dense, prominent, or short will apply `mdc-top-app-bar--fixed-adjust` ## Icons diff --git a/packages/top-app-bar/index.js b/packages/top-app-bar/index.js index fce1700a2..70d0b80b4 100644 --- a/packages/top-app-bar/index.js +++ b/packages/top-app-bar/index.js @@ -143,6 +143,7 @@ export default class TopAppBar extends React.Component { /* eslint-disable no-unused-vars */ actionItems, className, + dense, fixed, title, navigationIcon, diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json index 369d570ad..691d5c73d 100644 --- a/test/screenshot/golden.json +++ b/test/screenshot/golden.json @@ -26,14 +26,14 @@ "text-field/fullWidth": "7c854723b1b4ce7e6df614f44f7b7845bef6098ac30714da5c5128bbd57eb51f", "text-field/outlined": "5d7fd01cfe503a0651daeb7acdf8163dd39a3b3f0ce3d872613bb15db30400ec", "top-app-bar/fixed": "7a2dd6318d62ac2eabd66f1b28100db7c15840ccb753660065fa9524db6435d6", - "top-app-bar/prominent": "5a63148610f315001fbf80bd3f4b8ceb37691bd1a7ec81a33228bb3c2b364dae", - "top-app-bar/short": "0e0e8a6c812e93910a540689bc6a962a1c8097c9f4e8b9ca65f35994bb380cfc", - "top-app-bar/shortCollapsed": "5934b2260760fa716c461c55aadb5b2da2695a8eeb507cd4afe49e088e8a28c3", + "top-app-bar/prominent": "2506ed2dd5f370c7bab69315d2daebd58b443d2b9e32bbaec762e40a8736309b", + "top-app-bar/short": "4d9b86955a026da5bfebeb13389022b9360e779dbd6c23c8761e7bb78e14d6fd", + "top-app-bar/shortCollapsed": "d53239e0f8cffd81010e30c5dc9563cc323b3945328dcc4460486e5d0d1131db", "top-app-bar/standard": "7a2dd6318d62ac2eabd66f1b28100db7c15840ccb753660065fa9524db6435d6", "top-app-bar/standardNoActionItems": "6d361edb994cafcc6ac720336d12ee7d7114745993e16abd6e6b00f078424ff2", "top-app-bar/standardWithNavigationIconElement": "95afd559c35dede805e4d4b51ad1fabd82b4117c358a8679e3166b88e059bf68", - "top-app-bar/dense": "e8e288b997fa6cf112053e4ee62ed7c3d601c23a87eaece29348fc172dd5ebe4", - "top-app-bar/prominentDense": "280995e7c3df950c72ea39f1673e359c9032ebdfa3ab0309831591b9f79227d6", + "top-app-bar/dense": "e273e6c777f168248f5757c1f00a74206f4cce51c484d91cc7d36dc16de7d0de", + "top-app-bar/prominentDense": "cc8af934f9187ffd8f250834ef7c73e5c53c5ace10126bb855f74878ba125149", "drawer/permanentBelowTopAppBar": "587ee2605c4b3e3f0408c6130b824b58587e05cedf9b964e14fc481b9de1e4c2", "drawer/dismissibleBelowTopAppBar": "a9bf24c0edd3dcc9167516ce3bdd146fd1a352c4f5b9ea76a1f9dad1ba61e0f8", "drawer/permanent": "6355905c2241b5e6fdddc2e25119a1cc3b062577375a88b59e6750c4b76e4561", diff --git a/test/screenshot/top-app-bar/dense.js b/test/screenshot/top-app-bar/dense.js index b9632b407..22be80ce5 100644 --- a/test/screenshot/top-app-bar/dense.js +++ b/test/screenshot/top-app-bar/dense.js @@ -16,7 +16,7 @@ const TopAppBarDenseScreenshotTest = () => { />} actionItems={[]} /> - + ); }; diff --git a/test/screenshot/top-app-bar/fixed.js b/test/screenshot/top-app-bar/fixed.js index 79688384c..11705d5fc 100644 --- a/test/screenshot/top-app-bar/fixed.js +++ b/test/screenshot/top-app-bar/fixed.js @@ -15,7 +15,7 @@ const TopAppBarFixedScreenshotTest = () => { />} actionItems={[]} /> - + ); }; diff --git a/test/screenshot/top-app-bar/mainContent.js b/test/screenshot/top-app-bar/mainContent.js index 398c84085..b671762c6 100644 --- a/test/screenshot/top-app-bar/mainContent.js +++ b/test/screenshot/top-app-bar/mainContent.js @@ -1,9 +1,9 @@ import React from 'react'; import {TopAppBarFixedAdjust} from '../../../packages/top-app-bar'; -const MainTopAppBarContent = () => { +const MainTopAppBarContent = (props) => { return ( - +

{'Look at me I\'m a header'}

diff --git a/test/screenshot/top-app-bar/prominent.js b/test/screenshot/top-app-bar/prominent.js index badc8af44..9a609402c 100644 --- a/test/screenshot/top-app-bar/prominent.js +++ b/test/screenshot/top-app-bar/prominent.js @@ -16,7 +16,7 @@ const TopAppBarProminentScreenshotTest = () => { />} actionItems={[]} /> - + ); }; diff --git a/test/screenshot/top-app-bar/prominentDense.js b/test/screenshot/top-app-bar/prominentDense.js index 51a373e92..db7089fb8 100644 --- a/test/screenshot/top-app-bar/prominentDense.js +++ b/test/screenshot/top-app-bar/prominentDense.js @@ -17,7 +17,7 @@ const TopAppBarProminentDenseScreenshotTest = () => { />} actionItems={[]} /> - + ); }; diff --git a/test/screenshot/top-app-bar/short.js b/test/screenshot/top-app-bar/short.js index e864e59e0..3a66f08cb 100644 --- a/test/screenshot/top-app-bar/short.js +++ b/test/screenshot/top-app-bar/short.js @@ -15,7 +15,7 @@ const TopAppBarShortScreenshotTest = () => { />} actionItems={[]} /> - + ); }; diff --git a/test/screenshot/top-app-bar/shortCollapsed.js b/test/screenshot/top-app-bar/shortCollapsed.js index 107ccd482..682265ca8 100644 --- a/test/screenshot/top-app-bar/shortCollapsed.js +++ b/test/screenshot/top-app-bar/shortCollapsed.js @@ -10,10 +10,10 @@ const TopAppBarShortCollapsedScreenshotTest = () => { shortCollapsed navigationIcon={ console.log('click')} + onClick={() => console.log('shortCollapsed click')} />} /> - + ); }; diff --git a/test/screenshot/top-app-bar/standard.js b/test/screenshot/top-app-bar/standard.js index 9dbfa42a2..ddc027517 100644 --- a/test/screenshot/top-app-bar/standard.js +++ b/test/screenshot/top-app-bar/standard.js @@ -10,11 +10,11 @@ const TopAppBarStandardScreenshotTest = () => { title='Miami, FL' navigationIcon={ console.log('click')} + onClick={() => console.log('standard click')} />} actionItems={[]} /> - + ); }; diff --git a/test/screenshot/top-app-bar/standardNoActionItems.js b/test/screenshot/top-app-bar/standardNoActionItems.js index f3b7cac09..b3d99e220 100644 --- a/test/screenshot/top-app-bar/standardNoActionItems.js +++ b/test/screenshot/top-app-bar/standardNoActionItems.js @@ -13,7 +13,7 @@ const TopAppBarStandardNoActionItemsScreenshotTest = () => { onClick={() => console.log('click')} />} /> - + ); }; diff --git a/test/screenshot/top-app-bar/standardWithNavigationIconElement.js b/test/screenshot/top-app-bar/standardWithNavigationIconElement.js index 5b67301f3..65d414086 100644 --- a/test/screenshot/top-app-bar/standardWithNavigationIconElement.js +++ b/test/screenshot/top-app-bar/standardWithNavigationIconElement.js @@ -35,10 +35,11 @@ const TopAppBarStandardWithNavigationIconElementScreenshotTest = () => {
} actionItems={[]} /> - +
); }; diff --git a/test/unit/top-app-bar/FixedAdjust.test.js b/test/unit/top-app-bar/FixedAdjust.test.js index 84e6687f9..12b5cc49e 100644 --- a/test/unit/top-app-bar/FixedAdjust.test.js +++ b/test/unit/top-app-bar/FixedAdjust.test.js @@ -25,3 +25,31 @@ test('renders as a different tag name when passed props.tag', () => { assert.equal(wrapper.find('main').length, 0); assert.equal(wrapper.type(), 'div'); }); + +test('has correct dense class', () => { + const wrapper = shallow( + hello + ); + assert.isTrue(wrapper.hasClass('mdc-top-app-bar--dense-fixed-adjust')); +}); + +test('has correct dense prominent class', () => { + const wrapper = shallow( + hello + ); + assert.isTrue(wrapper.hasClass('mdc-top-app-bar--dense-prominent-fixed-adjust')); +}); + +test('has correct prominent class', () => { + const wrapper = shallow( + hello + ); + assert.isTrue(wrapper.hasClass('mdc-top-app-bar--prominent-fixed-adjust')); +}); + +test('has correct short class', () => { + const wrapper = shallow( + hello + ); + assert.isTrue(wrapper.hasClass('mdc-top-app-bar--short-fixed-adjust')); +});