From 7390123ee8c8e740c1a174c9270ec8393f960685 Mon Sep 17 00:00:00 2001 From: mgr34 Date: Fri, 14 Dec 2018 16:36:41 -0500 Subject: [PATCH 1/7] fix(top-app-bar): dense prop being passed to DOM as an invalid HTML attribute --- packages/top-app-bar/index.js | 1 + 1 file changed, 1 insertion(+) 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, From 9f6ad63981f42aadc1c4c887897da8c3dc8bde6a Mon Sep 17 00:00:00 2001 From: mgr34 Date: Fri, 14 Dec 2018 16:45:55 -0500 Subject: [PATCH 2/7] fix(top-app-bar): added variants for fixed adjust --- packages/top-app-bar/FixedAdjust.js | 26 +++++++++++++---- test/screenshot/top-app-bar/dense.js | 2 +- test/screenshot/top-app-bar/fixed.js | 2 +- test/screenshot/top-app-bar/mainContent.js | 4 +-- test/screenshot/top-app-bar/prominent.js | 2 +- test/screenshot/top-app-bar/prominentDense.js | 2 +- test/screenshot/top-app-bar/short.js | 2 +- test/screenshot/top-app-bar/shortCollapsed.js | 4 +-- test/screenshot/top-app-bar/standard.js | 4 +-- .../top-app-bar/standardNoActionItems.js | 2 +- .../standardWithNavigationIconElement.js | 3 +- test/unit/top-app-bar/FixedAdjust.test.js | 28 +++++++++++++++++++ 12 files changed, 62 insertions(+), 19 deletions(-) diff --git a/packages/top-app-bar/FixedAdjust.js b/packages/top-app-bar/FixedAdjust.js index 878e5f08b..85ba530dc 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/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')); +}); From e3bf4bb55d88c1567ec77497168350423ac0d0b2 Mon Sep 17 00:00:00 2001 From: mgr34 Date: Fri, 14 Dec 2018 16:57:04 -0500 Subject: [PATCH 3/7] doc(top-app-bar): includes variant documentation for TopAppBarFixedAdjust. --- packages/top-app-bar/README.md | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/top-app-bar/README.md b/packages/top-app-bar/README.md index 20dc6f698..6d18074a7 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.A +tag | String | Customizes the TopAppBarFixedAdjust tag (defaults to `
`) +> NOTE: if not dense, prominent, or short will apply `mdc-top-app-bar--fixed-adjust` ## Icons From 2b17772b3a327b1b2c6f9ec0fc27d22f64cba59a Mon Sep 17 00:00:00 2001 From: mgr34 Date: Fri, 14 Dec 2018 22:09:26 +0000 Subject: [PATCH 4/7] fix(top-app-bar): updated golden TopAppBarFixedAdjust variant additions --- test/screenshot/golden.json | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json index 369d570ad..5271e722d 100644 --- a/test/screenshot/golden.json +++ b/test/screenshot/golden.json @@ -1,8 +1,8 @@ { "button": "8941ec5719bb5c82418d335f37dd6e4d523bf8a1121b50a4df4c5a784ca41fbe", - "card": "b2fd82763c383be438ff6578083bf9009711c7470333d07eb916ab690fc42d31", + "card": "4560bf40053939152365ab689aa7892782835d9e4e8c9fff4508debb02afe6d3", "checkbox": "9c61177f0f927e178e7c6687d74cdfa08abc15ea8fc3c381f570b7c7d1f46d2a", - "chips": "e100a23df0b92c37920127c62d7d694ce3fe40c101c0ed05d535f5cafee62b27", + "chips": "7a17c978c8f18f16ddfdfde899547db2b3bfdcecec696159066591709d31b257", "fab": "db36f52195c420062d91dd5ebe5432ad87247b3c1146fd547b0a195079bbce2f", "floating-label": "1d4d4f2e57e1769b14fc84985d1e6f53410c49aef41c9cf4fde94f938adefe57", "icon-button": "5ffb1f7fbd06d2c0533f6ba8d4d9ea170cec1a248a61de1cc1bb626cb58ebcd2", @@ -10,12 +10,12 @@ "line-ripple": "56b136db2dc7e09260849447e6bde9b55a837af332a05d9f52506ab1c95e2e57", "list": "a53f22639b6eae05613ffd0bb943ede1e7edba4a50d28463389a00828896a644", "material-icon": "442b39fb22d2c7a74efb23ca098429b471501ce21df8662327bbf9871fe0bcb0", - "menu-surface": "f5face1a24fe166e86e8a3dc35ea85b2d4431469a3d06bf6fc1a30fbdc175aff", + "menu-surface": "1bb1e6a51e7647d69b41a86a0eb699a08487d6a3fb9cff240cbde3085913e0fa", "notched-outline": "7770dd381c27608a1f43b6f83da92507fe53963f5e4409bd73184b86275538fe", "radio": "adfce0bbfa2711c67a52e1c3c3c7e980314be0147e340dac733152c80c385765", - "select": "ff57b7fec25dd375b6583a7245c9756afa3713ada13829dfa11757fbbf5faacf", + "select": "161bb6b2e5fce0f7b9968c38ae921227fbec58015f079cc1440188ccb08f995b", "switch": "dd8a3ec00447e0c586b5bbefdc633681d29e6f04ff8b517a68209bd1f4a6a4e4", - "tab": "0e53fa0ca9b2de4ff7941169a9b6a929a83b18e517c18404adeb40f7e644a2f1", + "tab": "1eb4b8dc126e4efd69b958001317fdb72ab0d7e659775f68057f26a590fc413f", "tab-bar": "6c28ec268b2baf308459e7df9d7471fb7907b6473240b9a28a81be54a335f932", "tab-indicator": "7ce7ce8fd50301c67d7ebfb0ba953208260ce2881bee0c7e640c46bf60dc90b6", "tab-scroller": "468866dd0c222b36b55485ab44a5760133a4ddfb2a6cf81e6ae4672d7e02a447", @@ -24,16 +24,16 @@ "text-field/textArea": "871b32d2fd1982e191e9d5f6ac32e8eb4d82f9fbb1a83359bce8e8f2e9edd027", "text-field/standard": "be2ea75813583dac8d3ad988282cfa19fa7266a29b095cbd60a34912a1900251", "text-field/fullWidth": "7c854723b1b4ce7e6df614f44f7b7845bef6098ac30714da5c5128bbd57eb51f", - "text-field/outlined": "5d7fd01cfe503a0651daeb7acdf8163dd39a3b3f0ce3d872613bb15db30400ec", + "text-field/outlined": "55ac33ddfb4e71ed1f36804db6c3923cf223337bf0cd71d289dc88397a1b8cc3", "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", @@ -41,4 +41,4 @@ "drawer/modal": "da83487c9349b253f7d4de01f92d442de55aab92a8028b77ff1a48cfaa265b72", "drawer/permanentToModal": "6355905c2241b5e6fdddc2e25119a1cc3b062577375a88b59e6750c4b76e4561", "typography": "c5e87d672d8c05ca3b61c0df4971eabe3c6a6a1f24a9b98f71f55a23360c498a" -} +} From dba1306152bab2da03e064cccdac308560041c69 Mon Sep 17 00:00:00 2001 From: mgr34 Date: Sun, 16 Dec 2018 12:07:59 -0500 Subject: [PATCH 5/7] fix(top-app-bar): unrelated golden changes --- test/screenshot/golden.json | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json index 5271e722d..691d5c73d 100644 --- a/test/screenshot/golden.json +++ b/test/screenshot/golden.json @@ -1,8 +1,8 @@ { "button": "8941ec5719bb5c82418d335f37dd6e4d523bf8a1121b50a4df4c5a784ca41fbe", - "card": "4560bf40053939152365ab689aa7892782835d9e4e8c9fff4508debb02afe6d3", + "card": "b2fd82763c383be438ff6578083bf9009711c7470333d07eb916ab690fc42d31", "checkbox": "9c61177f0f927e178e7c6687d74cdfa08abc15ea8fc3c381f570b7c7d1f46d2a", - "chips": "7a17c978c8f18f16ddfdfde899547db2b3bfdcecec696159066591709d31b257", + "chips": "e100a23df0b92c37920127c62d7d694ce3fe40c101c0ed05d535f5cafee62b27", "fab": "db36f52195c420062d91dd5ebe5432ad87247b3c1146fd547b0a195079bbce2f", "floating-label": "1d4d4f2e57e1769b14fc84985d1e6f53410c49aef41c9cf4fde94f938adefe57", "icon-button": "5ffb1f7fbd06d2c0533f6ba8d4d9ea170cec1a248a61de1cc1bb626cb58ebcd2", @@ -10,12 +10,12 @@ "line-ripple": "56b136db2dc7e09260849447e6bde9b55a837af332a05d9f52506ab1c95e2e57", "list": "a53f22639b6eae05613ffd0bb943ede1e7edba4a50d28463389a00828896a644", "material-icon": "442b39fb22d2c7a74efb23ca098429b471501ce21df8662327bbf9871fe0bcb0", - "menu-surface": "1bb1e6a51e7647d69b41a86a0eb699a08487d6a3fb9cff240cbde3085913e0fa", + "menu-surface": "f5face1a24fe166e86e8a3dc35ea85b2d4431469a3d06bf6fc1a30fbdc175aff", "notched-outline": "7770dd381c27608a1f43b6f83da92507fe53963f5e4409bd73184b86275538fe", "radio": "adfce0bbfa2711c67a52e1c3c3c7e980314be0147e340dac733152c80c385765", - "select": "161bb6b2e5fce0f7b9968c38ae921227fbec58015f079cc1440188ccb08f995b", + "select": "ff57b7fec25dd375b6583a7245c9756afa3713ada13829dfa11757fbbf5faacf", "switch": "dd8a3ec00447e0c586b5bbefdc633681d29e6f04ff8b517a68209bd1f4a6a4e4", - "tab": "1eb4b8dc126e4efd69b958001317fdb72ab0d7e659775f68057f26a590fc413f", + "tab": "0e53fa0ca9b2de4ff7941169a9b6a929a83b18e517c18404adeb40f7e644a2f1", "tab-bar": "6c28ec268b2baf308459e7df9d7471fb7907b6473240b9a28a81be54a335f932", "tab-indicator": "7ce7ce8fd50301c67d7ebfb0ba953208260ce2881bee0c7e640c46bf60dc90b6", "tab-scroller": "468866dd0c222b36b55485ab44a5760133a4ddfb2a6cf81e6ae4672d7e02a447", @@ -24,7 +24,7 @@ "text-field/textArea": "871b32d2fd1982e191e9d5f6ac32e8eb4d82f9fbb1a83359bce8e8f2e9edd027", "text-field/standard": "be2ea75813583dac8d3ad988282cfa19fa7266a29b095cbd60a34912a1900251", "text-field/fullWidth": "7c854723b1b4ce7e6df614f44f7b7845bef6098ac30714da5c5128bbd57eb51f", - "text-field/outlined": "55ac33ddfb4e71ed1f36804db6c3923cf223337bf0cd71d289dc88397a1b8cc3", + "text-field/outlined": "5d7fd01cfe503a0651daeb7acdf8163dd39a3b3f0ce3d872613bb15db30400ec", "top-app-bar/fixed": "7a2dd6318d62ac2eabd66f1b28100db7c15840ccb753660065fa9524db6435d6", "top-app-bar/prominent": "2506ed2dd5f370c7bab69315d2daebd58b443d2b9e32bbaec762e40a8736309b", "top-app-bar/short": "4d9b86955a026da5bfebeb13389022b9360e779dbd6c23c8761e7bb78e14d6fd", @@ -41,4 +41,4 @@ "drawer/modal": "da83487c9349b253f7d4de01f92d442de55aab92a8028b77ff1a48cfaa265b72", "drawer/permanentToModal": "6355905c2241b5e6fdddc2e25119a1cc3b062577375a88b59e6750c4b76e4561", "typography": "c5e87d672d8c05ca3b61c0df4971eabe3c6a6a1f24a9b98f71f55a23360c498a" -} +} From c1128921ffb36f7b93c3a2f3a128a2421f178714 Mon Sep 17 00:00:00 2001 From: mgr34 Date: Sun, 16 Dec 2018 12:25:10 -0500 Subject: [PATCH 6/7] fix(top-app-bar): clode cleanup --- packages/top-app-bar/FixedAdjust.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/top-app-bar/FixedAdjust.js b/packages/top-app-bar/FixedAdjust.js index 85ba530dc..a65472e65 100644 --- a/packages/top-app-bar/FixedAdjust.js +++ b/packages/top-app-bar/FixedAdjust.js @@ -39,9 +39,9 @@ const FixedAdjust = (props) => { const suffix = '-fixed-adjust'; const classes = classnames(className, { [base + '--short' + suffix]: short, - [base + '--dense' + suffix]: dense && (!prominent), + [base + '--dense' + suffix]: dense && !prominent, [base + '--dense-prominent' + suffix]: dense && prominent, - [base + '--prominent' + suffix]: (!dense) && prominent, + [base + '--prominent' + suffix]: !dense && prominent, [base + '-' + suffix]: !short && !dense && !prominent, }); From 55047c4a0a31418d3f55877c5a25403244cb6ef5 Mon Sep 17 00:00:00 2001 From: mgr34 Date: Sun, 16 Dec 2018 12:25:48 -0500 Subject: [PATCH 7/7] fix(top-app-bar): extra A --- 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 6d18074a7..c0b45ee23 100644 --- a/packages/top-app-bar/README.md +++ b/packages/top-app-bar/README.md @@ -75,7 +75,7 @@ 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.A +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`