Change link to ActionButton (#199)

src/app/css/_deviceListPaging.scss

@@ -22,32 +22,38 @@
             left: 3px;
         }
     }
-    ul {
+    div.page-list {
+        float: left;
         margin: {
             top: 0px;
             bottom: 0px;
         }
         padding: {
             left: 10px;
-            bottom: 10px;
+            bottom: 0px;
         }
-        li {
+        div {
             button {
+                border: 0;
                 @include themify($themes) {
                     color: themed('pagerButtonColor');
+                    background-color: themed('pagerColor');
                 }
+                margin: 0;
+                padding: {
+                    top: 3px;
+                    bottom: 0px;
+                    left: 5px;
+                    right: 5px;
+                }
+                height: 28px;
             }
             margin: {
                 left: 1px;
                 right: 1px;
-                bottom: 0px;
-            }
-            padding: {
-                top: 3px;
-                bottom: 0px;
-                left: 5px;
-                right: 5px;
-            }
+                bottom: 0;
+            };
+            padding: 0;
             float: left;
             list-style-type: none;
             cursor: pointer;
@@ -60,14 +66,13 @@
                     top-left-radius: 3px;
                     top-right-radius: 3px;
                 };
-                background-color: themed('pagerColor');
             } 
             font: {
                 size: 18px;
                 weight: 100;
             }
         }
-        li.selected {
+        div.selected {
             border-width: 2px;
             @include themify($themes) {
                 border-color: themed('selectedBorder');
@@ -76,6 +81,12 @@
                 color: themed('pagerTextColor');
             }
             border-color: $selected-border;
+            padding: {
+                top: 3px;
+                bottom: 0px;
+                left: 5px;
+                right: 5px;
+            }
         }
     }
 }

src/app/devices/deviceList/components/__snapshots__/listPaging.spec.tsx.snap

@@ -10,21 +10,22 @@ exports[`components/devices/listPaging matches snapshot on different page 1`] =
   >
     deviceLists.paging.pages
   </span>
-  <ul
+  <div
+    className="page-list"
     role="list"
   >
-    <li
+    <div
       className=""
       key="page_0"
       role="listitem"
     >
-      <StyledLinkBase
+      <CustomizedActionButton
         onClick={[Function]}
       >
         1
-      </StyledLinkBase>
-    </li>
-    <li
+      </CustomizedActionButton>
+    </div>
+    <div
       className="selected"
       key="page_1"
       role="listitem"
@@ -32,19 +33,19 @@ exports[`components/devices/listPaging matches snapshot on different page 1`] =
       <span>
         2
       </span>
-    </li>
-    <li
+    </div>
+    <div
       className=""
       key="page_2"
       role="listitem"
     >
-      <StyledLinkBase
+      <CustomizedActionButton
         onClick={[Function]}
       >
         »
-      </StyledLinkBase>
-    </li>
-  </ul>
+      </CustomizedActionButton>
+    </div>
+  </div>
 </section>
 `;
 
@@ -58,10 +59,11 @@ exports[`components/devices/listPaging matches snapshot with continuation tokens
   >
     deviceLists.paging.pages
   </span>
-  <ul
+  <div
+    className="page-list"
     role="list"
   >
-    <li
+    <div
       className="selected"
       key="page_0"
       role="listitem"
@@ -69,19 +71,19 @@ exports[`components/devices/listPaging matches snapshot with continuation tokens
       <span>
         1
       </span>
-    </li>
-    <li
+    </div>
+    <div
       className=""
       key="page_1"
       role="listitem"
     >
-      <StyledLinkBase
+      <CustomizedActionButton
         onClick={[Function]}
       >
         »
-      </StyledLinkBase>
-    </li>
-  </ul>
+      </CustomizedActionButton>
+    </div>
+  </div>
 </section>
 `;
 

src/app/devices/deviceList/components/listPaging.spec.tsx

@@ -5,7 +5,7 @@
 import 'jest';
 import * as React from 'react';
 import { shallow } from 'enzyme';
-import { Link } from 'office-ui-fabric-react/lib/Link';
+import { ActionButton } from 'office-ui-fabric-react';
 import ListPaging from './listPaging';
 import { testSnapshot, mountWithLocalization } from '../../../shared/utils/testHelpers';
 
@@ -49,7 +49,7 @@ describe('components/devices/listPaging', () => {
             fetchPage={fetchPage}
         />);
 
-        const link = wrapper.find(Link).first();
+        const link = wrapper.find(ActionButton).first();
         link.simulate('click');
         expect(fetchPage).toHaveBeenCalled();
     });

src/app/devices/deviceList/components/listPaging.tsx

@@ -3,7 +3,7 @@
  * Licensed under the MIT License
  **********************************************************/
 import * as React from 'react';
-import { Link } from 'office-ui-fabric-react/lib/Link';
+import { ActionButton } from 'office-ui-fabric-react';
 import '../../../css/_deviceListPaging.scss';
 import { LocalizationContextConsumer, LocalizationContextInterface } from '../../../shared/contexts/localizationContext';
 import { ResourceKeys } from '../../../../localization/resourceKeys';
@@ -33,9 +33,9 @@ export default class ListPagingComponent extends React.Component<ListPagingDataP
                 {(context: LocalizationContextInterface) => (
                     <section role="navigation" className="grid-paging">
                         <span className="pages">{context.t(ResourceKeys.deviceLists.paging.pages)}</span>
-                        <ul role="list">
+                        <div role="list" className="page-list">
                             {this.props.continuationTokens.map(this.renderListItem)}
-                        </ul>
+                        </div>
                     </section>
                 )}
             </LocalizationContextConsumer>
@@ -48,20 +48,20 @@ export default class ListPagingComponent extends React.Component<ListPagingDataP
         };
 
         return (
-            <li
+            <div
                 key={`page_${index}`}
                 role="listitem"
                 className={index === this.props.currentPageIndex ? 'selected' : ''}
             >
                 {index !== this.props.currentPageIndex ?
-                    (<Link
+                    (<ActionButton
                         onClick={fetchPage}
                     >
                         {index === this.props.continuationTokens.length - 1 ? '»' : index + 1}
-                    </Link>) :
+                    </ActionButton>) :
                     (<span>{index + 1}</span>)
                 }
-            </li>
+            </div>
         );
     }
 }