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

Author: mgr34

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.
+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

@@ -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",

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'));
+});