feat(top-app-bar): TopAppBarFixedAdjust variants added

packages/top-app-bar/FixedAdjust.js

@@ -29,28 +29,42 @@ 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 (
-    <Tag
-      className={classnames('mdc-top-app-bar--fixed-adjust', className)}
-      {...otherProps}
-    >
-      {children}
-    </Tag>
+    <Tag className={classes} {...otherProps}>{children}</Tag>
   );
 };
 
 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;

packages/top-app-bar/README.md

@@ -52,6 +52,8 @@ Use the `<TopAppBarFixedAdjust />` 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 `<main>`)
 
+> NOTE: if not dense, prominent, or short will apply `mdc-top-app-bar--fixed-adjust`
 
 ## Icons
 

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,

test/screenshot/golden.json

@@ -1,21 +1,21 @@
 {
   "button": "8941ec5719bb5c82418d335f37dd6e4d523bf8a1121b50a4df4c5a784ca41fbe",
-  "card": "b2fd82763c383be438ff6578083bf9009711c7470333d07eb916ab690fc42d31",
+  "card": "4560bf40053939152365ab689aa7892782835d9e4e8c9fff4508debb02afe6d3",
   "checkbox": "9c61177f0f927e178e7c6687d74cdfa08abc15ea8fc3c381f570b7c7d1f46d2a",
-  "chips": "e100a23df0b92c37920127c62d7d694ce3fe40c101c0ed05d535f5cafee62b27",
+  "chips": "7a17c978c8f18f16ddfdfde899547db2b3bfdcecec696159066591709d31b257",
   "fab": "db36f52195c420062d91dd5ebe5432ad87247b3c1146fd547b0a195079bbce2f",
   "floating-label": "1d4d4f2e57e1769b14fc84985d1e6f53410c49aef41c9cf4fde94f938adefe57",
   "icon-button": "5ffb1f7fbd06d2c0533f6ba8d4d9ea170cec1a248a61de1cc1bb626cb58ebcd2",
   "layout-grid": "fe40f7a34853bc2a1d9a836e812599d4d47b5b26b839a8eaed7f98ea91946790",
   "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,21 +24,21 @@
   "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",
   "drawer/dismissible": "6ea0638441e0e6df3c97028136239498a31bba206253a01d114431eda20d1060",
   "drawer/modal": "da83487c9349b253f7d4de01f92d442de55aab92a8028b77ff1a48cfaa265b72",
   "drawer/permanentToModal": "6355905c2241b5e6fdddc2e25119a1cc3b062577375a88b59e6750c4b76e4561",
   "typography": "c5e87d672d8c05ca3b61c0df4971eabe3c6a6a1f24a9b98f71f55a23360c498a"
-}
+}

test/screenshot/top-app-bar/dense.js

@@ -16,7 +16,7 @@ const TopAppBarDenseScreenshotTest = () => {
         />}
         actionItems={[<MaterialIcon key='item' icon='bookmark' />]}
       />
-      <MainTopAppBarContent />
+      <MainTopAppBarContent dense/>
     </div>
   );
 };

test/screenshot/top-app-bar/fixed.js

@@ -15,7 +15,7 @@ const TopAppBarFixedScreenshotTest = () => {
         />}
         actionItems={[<MaterialIcon key='item' icon='bookmark' />]}
       />
-      <MainTopAppBarContent />
+      <MainTopAppBarContent/>
     </div>
   );
 };

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 (
-    <TopAppBarFixedAdjust>
+    <TopAppBarFixedAdjust {...props}>
       <h1>
         {'Look at me I\'m a header'}
       </h1>

test/screenshot/top-app-bar/prominent.js

@@ -16,7 +16,7 @@ const TopAppBarProminentScreenshotTest = () => {
         />}
         actionItems={[<MaterialIcon key='item' icon='bookmark' />]}
       />
-      <MainTopAppBarContent />
+      <MainTopAppBarContent prominent/>
     </div>
   );
 };

test/screenshot/top-app-bar/prominentDense.js

@@ -17,7 +17,7 @@ const TopAppBarProminentDenseScreenshotTest = () => {
         />}
         actionItems={[<MaterialIcon key='item' icon='bookmark' />]}
       />
-      <MainTopAppBarContent />
+      <MainTopAppBarContent prominent dense/>
     </div>
   );
 };

test/screenshot/top-app-bar/short.js

@@ -15,7 +15,7 @@ const TopAppBarShortScreenshotTest = () => {
         />}
         actionItems={[<MaterialIcon key='item' icon='bookmark' />]}
       />
-      <MainTopAppBarContent />
+      <MainTopAppBarContent short/>
     </div>
   );
 };

test/screenshot/top-app-bar/shortCollapsed.js

@@ -10,10 +10,10 @@ const TopAppBarShortCollapsedScreenshotTest = () => {
         shortCollapsed
         navigationIcon={<MaterialIcon
           icon='menu'
-          onClick={() => console.log('click')}
+          onClick={() => console.log('shortCollapsed click')}
         />}
       />
-      <MainTopAppBarContent />
+      <MainTopAppBarContent short/>
     </div>
   );
 };

test/screenshot/top-app-bar/standard.js

@@ -10,11 +10,11 @@ const TopAppBarStandardScreenshotTest = () => {
         title='Miami, FL'
         navigationIcon={<MaterialIcon
           icon='menu'
-          onClick={() => console.log('click')}
+          onClick={() => console.log('standard click')}
         />}
         actionItems={[<MaterialIcon key='item' icon='bookmark' />]}
       />
-      <MainTopAppBarContent />
+      <MainTopAppBarContent/>
     </div>
   );
 };

test/screenshot/top-app-bar/standardNoActionItems.js

@@ -13,7 +13,7 @@ const TopAppBarStandardNoActionItemsScreenshotTest = () => {
           onClick={() => console.log('click')}
         />}
       />
-      <MainTopAppBarContent />
+      <MainTopAppBarContent/>
     </div>
   );
 };

test/screenshot/top-app-bar/standardWithNavigationIconElement.js

@@ -35,10 +35,11 @@ const TopAppBarStandardWithNavigationIconElementScreenshotTest = () => {
     <div className='top-app-bar-container'>
       <TopAppBar
         title='Miami, FL'
+        dense={false}
         navigationIcon={<NavigationIconWithRipple unbounded />}
         actionItems={[<MaterialIcon key='item' icon='bookmark' />]}
       />
-      <MainTopAppBarContent />
+      <MainTopAppBarContent/>
     </div>
   );
 };

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(<TopAppBarFixedAdjust dense>
+    hello
+  </TopAppBarFixedAdjust>);
+  assert.isTrue(wrapper.hasClass('mdc-top-app-bar--dense-fixed-adjust'));
+});
+
+test('has correct dense prominent class', () => {
+  const wrapper = shallow(<TopAppBarFixedAdjust dense prominent>
+    hello
+  </TopAppBarFixedAdjust>);
+  assert.isTrue(wrapper.hasClass('mdc-top-app-bar--dense-prominent-fixed-adjust'));
+});
+
+test('has correct prominent class', () => {
+  const wrapper = shallow(<TopAppBarFixedAdjust prominent>
+    hello
+  </TopAppBarFixedAdjust>);
+  assert.isTrue(wrapper.hasClass('mdc-top-app-bar--prominent-fixed-adjust'));
+});
+
+test('has correct short class', () => {
+  const wrapper = shallow(<TopAppBarFixedAdjust short>
+    hello
+  </TopAppBarFixedAdjust>);
+  assert.isTrue(wrapper.hasClass('mdc-top-app-bar--short-fixed-adjust'));
+});