From 9e69a6afca53955e48b12f744bccb1ef316bdeaa Mon Sep 17 00:00:00 2001 From: mgr34 Date: Thu, 13 Dec 2018 17:51:06 -0500 Subject: [PATCH 1/6] feat(top-app-bar): adds a dense variant --- packages/top-app-bar/README.md | 3 ++- packages/top-app-bar/index.js | 4 +++ test/screenshot/top-app-bar/dense.js | 24 ++++++++++++++++++ test/screenshot/top-app-bar/prominentDense.js | 25 +++++++++++++++++++ test/screenshot/top-app-bar/variants.js | 2 ++ test/unit/top-app-bar/index.test.js | 5 ++++ 6 files changed, 62 insertions(+), 1 deletion(-) create mode 100644 test/screenshot/top-app-bar/dense.js create mode 100644 test/screenshot/top-app-bar/prominentDense.js diff --git a/packages/top-app-bar/README.md b/packages/top-app-bar/README.md index 94b42eaab..a39a5bd96 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. +> NOTES: 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/top-app-bar/dense.js b/test/screenshot/top-app-bar/dense.js new file mode 100644 index 000000000..fa818cba9 --- /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 TopAppBarProminentScreenshotTest = () => { + return ( +
+ console.log('prominent click')} + />} + actionItems={[]} + /> + +
+ ); +}; + +export default TopAppBarProminentScreenshotTest; diff --git a/test/screenshot/top-app-bar/prominentDense.js b/test/screenshot/top-app-bar/prominentDense.js new file mode 100644 index 000000000..caab669dc --- /dev/null +++ b/test/screenshot/top-app-bar/prominentDense.js @@ -0,0 +1,25 @@ +import React from 'react'; +import TopAppBar from '../../../packages/top-app-bar'; + +import MaterialIcon from '../../../packages/material-icon'; +import MainTopAppBarContent from './mainContent'; + +const TopAppBarProminentScreenshotTest = () => { + return ( +
+ console.log('prominent click')} + />} + actionItems={[]} + /> + +
+ ); +}; + +export default TopAppBarProminentScreenshotTest; diff --git a/test/screenshot/top-app-bar/variants.js b/test/screenshot/top-app-bar/variants.js index f1c12eded..41ebdc8b9 100644 --- a/test/screenshot/top-app-bar/variants.js +++ b/test/screenshot/top-app-bar/variants.js @@ -1,6 +1,8 @@ export default [ 'fixed', + 'dense', 'prominent', + 'prominentDense', 'short', 'shortCollapsed', 'standard', diff --git a/test/unit/top-app-bar/index.test.js b/test/unit/top-app-bar/index.test.js index f840f1582..50ca0a38e 100644 --- a/test/unit/top-app-bar/index.test.js +++ b/test/unit/top-app-bar/index.test.js @@ -63,6 +63,11 @@ test('has correct fixed class', () => { assert.isTrue(wrapper.hasClass('mdc-top-app-bar--fixed')); }); +test('has correct dense class', () => { + const wrapper = shallow(); + assert.isTrue(wrapper.hasClass('mdc-top-app-bar--dense')); +}); + test('navigationIcon is rendered with navigation icon class', () => { const wrapper = mount( Date: Thu, 13 Dec 2018 17:56:17 -0500 Subject: [PATCH 2/6] update component names --- test/screenshot/top-app-bar/dense.js | 4 ++-- test/screenshot/top-app-bar/prominentDense.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/test/screenshot/top-app-bar/dense.js b/test/screenshot/top-app-bar/dense.js index fa818cba9..13a87cfbe 100644 --- a/test/screenshot/top-app-bar/dense.js +++ b/test/screenshot/top-app-bar/dense.js @@ -4,7 +4,7 @@ import TopAppBar from '../../../packages/top-app-bar'; import MaterialIcon from '../../../packages/material-icon'; import MainTopAppBarContent from './mainContent'; -const TopAppBarProminentScreenshotTest = () => { +const TopAppBarDenseScreenshotTest = () => { return (
{ ); }; -export default TopAppBarProminentScreenshotTest; +export default TopAppBarDenseScreenshotTest; diff --git a/test/screenshot/top-app-bar/prominentDense.js b/test/screenshot/top-app-bar/prominentDense.js index caab669dc..8220e884f 100644 --- a/test/screenshot/top-app-bar/prominentDense.js +++ b/test/screenshot/top-app-bar/prominentDense.js @@ -4,7 +4,7 @@ import TopAppBar from '../../../packages/top-app-bar'; import MaterialIcon from '../../../packages/material-icon'; import MainTopAppBarContent from './mainContent'; -const TopAppBarProminentScreenshotTest = () => { +const TopAppBarProminentDenseScreenshotTest = () => { return (
{ ); }; -export default TopAppBarProminentScreenshotTest; +export default TopAppBarProminentDenseScreenshotTest; From a01920a82adc389d144d178b035a7ab8af1c3460 Mon Sep 17 00:00:00 2001 From: mgr34 Date: Thu, 13 Dec 2018 18:02:34 -0500 Subject: [PATCH 3/6] grammatical correction --- packages/top-app-bar/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/top-app-bar/README.md b/packages/top-app-bar/README.md index a39a5bd96..20dc6f698 100644 --- a/packages/top-app-bar/README.md +++ b/packages/top-app-bar/README.md @@ -64,7 +64,7 @@ prominent | Boolean | Enables prominent variant. fixed | Boolean | Enables fixed variant. dense | Boolean | Enables dense variant. -> NOTES: As per design guidelines, prominent and dense variants 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 From dc69fe1c93f8650efbfa13ce24f3af011466ca3a Mon Sep 17 00:00:00 2001 From: Matt Goo Date: Fri, 14 Dec 2018 10:21:50 -0800 Subject: [PATCH 4/6] WIP: add golden for dense and dense prominent --- test/screenshot/golden.json | 2 ++ 1 file changed, 2 insertions(+) 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", From 911c09df12e3ad6e6752837b518ee2629a368af5 Mon Sep 17 00:00:00 2001 From: mgr34 Date: Fri, 14 Dec 2018 13:58:38 -0500 Subject: [PATCH 5/6] fix(top-app-bar): correct variant name onClick --- test/screenshot/top-app-bar/dense.js | 2 +- test/screenshot/top-app-bar/prominentDense.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/test/screenshot/top-app-bar/dense.js b/test/screenshot/top-app-bar/dense.js index 13a87cfbe..b9632b407 100644 --- a/test/screenshot/top-app-bar/dense.js +++ b/test/screenshot/top-app-bar/dense.js @@ -12,7 +12,7 @@ const TopAppBarDenseScreenshotTest = () => { title='Miami, FL' navigationIcon={ console.log('prominent click')} + onClick={() => console.log('dense click')} />} actionItems={[]} /> diff --git a/test/screenshot/top-app-bar/prominentDense.js b/test/screenshot/top-app-bar/prominentDense.js index 8220e884f..51a373e92 100644 --- a/test/screenshot/top-app-bar/prominentDense.js +++ b/test/screenshot/top-app-bar/prominentDense.js @@ -13,7 +13,7 @@ const TopAppBarProminentDenseScreenshotTest = () => { title='Miami, FL' navigationIcon={ console.log('prominent click')} + onClick={() => console.log('prominent dense click')} />} actionItems={[]} /> From a26a65d9ecef00c7956e58fada17acc411c08de2 Mon Sep 17 00:00:00 2001 From: mgr34 Date: Fri, 14 Dec 2018 13:59:02 -0500 Subject: [PATCH 6/6] fix(top-app-bar): add missing unit test for prominentDense --- test/unit/top-app-bar/index.test.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/test/unit/top-app-bar/index.test.js b/test/unit/top-app-bar/index.test.js index 50ca0a38e..df6a91f4d 100644 --- a/test/unit/top-app-bar/index.test.js +++ b/test/unit/top-app-bar/index.test.js @@ -68,6 +68,12 @@ test('has correct dense class', () => { assert.isTrue(wrapper.hasClass('mdc-top-app-bar--dense')); }); +test('has correct prominent dense class', () => { + const wrapper = shallow(); + assert.isTrue(wrapper.hasClass('mdc-top-app-bar--dense')); + assert.isTrue(wrapper.hasClass('mdc-top-app-bar--prominent')); +}); + test('navigationIcon is rendered with navigation icon class', () => { const wrapper = mount(