diff --git a/packages/top-app-bar/README.md b/packages/top-app-bar/README.md index 94b42eaab..20dc6f698 100644 --- a/packages/top-app-bar/README.md +++ b/packages/top-app-bar/README.md @@ -62,8 +62,9 @@ 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. -> NOTE: As per design guidelines, prominent variant should not be used with short or short collapsed. +> NOTE: As per design guidelines, prominent and dense variants should not be used with short or short collapsed. ## Icons diff --git a/packages/top-app-bar/index.js b/packages/top-app-bar/index.js index befe0ad13..fce1700a2 100644 --- a/packages/top-app-bar/index.js +++ b/packages/top-app-bar/index.js @@ -47,6 +47,7 @@ export default class TopAppBar extends React.Component { const {classList} = this.state; const { className, + dense, fixed, prominent, short, @@ -58,6 +59,7 @@ export default class TopAppBar extends React.Component { 'mdc-top-app-bar--short': shortCollapsed || short, 'mdc-top-app-bar--short-collapsed': shortCollapsed, 'mdc-top-app-bar--prominent': prominent, + 'mdc-top-app-bar--dense': dense, }); } @@ -222,6 +224,7 @@ export default class TopAppBar extends React.Component { TopAppBar.propTypes = { actionItems: PropTypes.arrayOf(PropTypes.element), className: PropTypes.string, + dense: PropTypes.bool, fixed: PropTypes.bool, navigationIcon: PropTypes.element, prominent: PropTypes.bool, @@ -236,6 +239,7 @@ TopAppBar.propTypes = { TopAppBar.defaultProps = { actionItems: null, className: '', + dense: false, fixed: false, navigationIcon: null, prominent: false, diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json index c18cb11b8..369d570ad 100644 --- a/test/screenshot/golden.json +++ b/test/screenshot/golden.json @@ -32,6 +32,8 @@ "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", "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 new file mode 100644 index 000000000..13a87cfbe --- /dev/null +++ b/test/screenshot/top-app-bar/dense.js @@ -0,0 +1,24 @@ +import React from 'react'; +import TopAppBar from '../../../packages/top-app-bar'; + +import MaterialIcon from '../../../packages/material-icon'; +import MainTopAppBarContent from './mainContent'; + +const TopAppBarDenseScreenshotTest = () => { + return ( +