Resolve theme and formatting issues from upgrade

samples/js-display-list/package-lock.json

@@ -2421,6 +2421,16 @@
         "tslib": "~1.10.0"
       }
     },
+    "@microsoft/sp-office-ui-fabric-core": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/@microsoft/sp-office-ui-fabric-core/-/sp-office-ui-fabric-core-1.11.0.tgz",
+      "integrity": "sha512-tc9dddjQPviaqI1AhCxnU2nMCx75zJhQHuy8vDqXCW2a6m7pjjM7SLGQcN8DRMk6/h/AKFy1TqyP2Q8o0lSQOg==",
+      "requires": {
+        "@types/webpack-env": "1.13.1",
+        "office-ui-fabric-core": "9.6.1-fluent2",
+        "tslib": "~1.10.0"
+      }
+    },
     "@microsoft/sp-page-context": {
       "version": "1.11.0",
       "resolved": "https://registry.npmjs.org/@microsoft/sp-page-context/-/sp-page-context-1.11.0.tgz",
@@ -13923,6 +13933,11 @@
         "has": "^1.0.3"
       }
     },
+    "office-ui-fabric-core": {
+      "version": "9.6.1-fluent2",
+      "resolved": "https://registry.npmjs.org/office-ui-fabric-core/-/office-ui-fabric-core-9.6.1-fluent2.tgz",
+      "integrity": "sha512-gcBs5HHr7tjkvk/+Ls10ttb3jEllRn7SvJitX/kx/gQq8BiFMSMKr1w+oNqXlh4EgkBHWUlJVPrYUu1KW/jVaQ=="
+    },
     "office-ui-fabric-react": {
       "version": "7.59.0",
       "resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-7.59.0.tgz",

samples/js-display-list/package.json

@@ -8,6 +8,7 @@
   "main": "lib/index.js",
   "dependencies": {
     "@microsoft/sp-core-library": "1.11.0",
+    "@microsoft/sp-office-ui-fabric-core": "^1.11.0",
     "@microsoft/sp-property-pane": "1.11.0",
     "@microsoft/sp-webpart-base": "1.11.0",
     "@types/es6-collections": "^0.5.32"

samples/js-display-list/src/webparts/jsDisplayList/JsDisplayList.module.scss

@@ -1,3 +1,57 @@
+@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
+
+$ms-greenLight:                 "[theme:greenLight, default:#bad80a]";
+$ms-neutralSecondaryAlt:        "[theme:info, default:#767676]";
+$ms-neutralLight:               "[theme:infoBackground, default:#eaeaea]";
+$ms-magenta:                    "[theme:magenta, default:#b4009e]";
+$ms-magentaDark:                "[theme:magentaDark, default:#5c005c]";
+$ms-magentaLight:               "[theme:magentaLight, default:#e3008c]";
+$ms-neutralDark:                "[theme:neutralDark, default:#212121]";
+$ms-neutralLight:               "[theme:neutralLight, default:#eaeaea]";
+$ms-neutralLighter:             "[theme:neutralLighter, default:#f4f4f4]";
+$ms-neutralLighterAlt:          "[theme:neutralLighterAlt, default:#f8f8f8]";
+$ms-neutralPrimary:             "[theme:neutralPrimary, default:#333333]";
+$ms-neutralPrimaryAlt:          "[theme:neutralPrimaryAlt, default:#3C3C3C]";
+$ms-neutralQuaternary:          "[theme:neutralPrimaryTranslucent50, default:#d0d0d0]";
+$ms-neutralQuaternaryAlt:       "[theme:neutralQuaternary, default:#dadada]";
+$ms-neutralSecondary:           "[theme:neutralQuaternaryAlt, default:#666666]";
+$ms-neutralSecondaryAlt:        "[theme:neutralSecondary, default:#767676]";
+$ms-neutralTertiary:            "[theme:neutralSecondaryAlt, default:#a6a6a6]";
+$ms-neutralTertiaryAlt:         "[theme:neutralTertiary, default:#c8c8c8]";
+$ms-white:                      "[theme:neutralTertiaryAlt, default:#ffffff]";
+$ms-orange:                     "[theme:orange, default:#d83b01]";
+$ms-orangeLight:                "[theme:orangeLight, default:#ea4300]";
+$ms-orangeLighter:              "[theme:orangeLighter, default:#ff8c00]";
+$ms-primaryBackground:          "[theme:primaryBackground, default:#0078d7]";
+$ms-primaryText:                "[theme:primaryText, default:#0078d7]";
+$ms-purple:                     "[theme:purple, default:#5c2d91]";
+$ms-purpleDark:                 "[theme:purpleDark, default:#32145a]";
+$ms-purpleLight:                "[theme:purpleLight, default:#b4a0ff]";
+$ms-red:                        "[theme:red, default:#e81123]";
+$ms-redDark:                    "[theme:redDark, default:#a80000]";
+$ms-success:                    "[theme:success, default:#107c10]";
+$ms-successBackground:          "[theme:successBackground, default:#dff6dd]";
+$ms-teal:                       "[theme:teal, default:#008272]";
+$ms-tealDark:                   "[theme:tealDark, default:#004b50]";
+$ms-tealLight:                  "[theme:tealLight, default:#00b294]";
+$ms-themeAccent:                "[theme:themeAccent, default:inherit]";
+$ms-themeAccentTranslucent10:   "[theme:themeAccentTranslucent10, default:inherit]";
+$ms-themeDark:                  "[theme:themeDark, default:#005a9e]";
+$ms-themeDarkAlt:               "[theme:themeDarkAlt, default:#106ebe]";
+$ms-themeDarker:                "[theme:themeDarker, default:#004578]";
+$ms-themeLight:                 "[theme:themeLight, default:#b3d6f2]";
+$ms-themeLightAlt:              "[theme:themeLightAlt, default:inherit]";
+$ms-themeLighter:               "[theme:themeLighter, default:#deecf9]";
+$ms-themeLighterAlt:            "[theme:themeLighterAlt, default:#eff6fc]";
+$ms-themePrimary:               "[theme:themePrimary, default:#0078d7]";
+$ms-themeSecondary:             "[theme:themeSecondary, default:#2488d8]";
+$ms-themeTertiary:              "[theme:themeTertiary, default:#69afe5]";
+$ms-themeTertiaryAlt:           "[theme:themeTertiaryAlt, default:#c8c8c8]";
+$ms-white:                      "[theme:white, default:#ffffff]";
+$ms-whiteTranslucent40:         "[theme:whiteTranslucent40, default:rgba(255,255,255,.4)]";
+$ms-yellow:                     "[theme:yellow, default:#ffb900]";
+$ms-yellowLight:                "[theme:yellowLight, default:#fff100]";
+
 .jsDisplayList {
   .container {
     max-width: 700px;
@@ -6,7 +60,40 @@
   }
 
   .row {
-    padding: 20px;
+    @include ms-Grid-row;
+  }
+
+  .grid {
+    @include ms-Grid;
+  }
+  .columnHeader {
+    @include ms-Grid-col;
+    @include ms-md3;
+    @include ms-sm5;
+    @include ms-lg4;
+    @include ms-font-m-plus;
+    background-color: $ms-themeLight;
+  }
+  .column {
+    @include ms-Grid-col;
+    @include ms-md3;
+    @include ms-sm5;
+    @include ms-lg4;
+    @include ms-font-m;
+  }
+  .fontMPlus{
+    @include ms-font-m-plus;
+  }
+  .semiBold {
+    @include ms-fontWeight-semibold;
+  }
+  .themeDark {
+    background-color: $ms-themeDark;
+    color: $ms-white;
+    @include ms-font-l;
+  }
+  .themeLight {
+    background-color: $ms-themeLight;
   }
 
   .listItem {

samples/js-display-list/src/webparts/jsDisplayList/JsDisplayListWebPart.ts

@@ -115,14 +115,13 @@ export default class JsDisplayListWebPart extends BaseClientSideWebPart<IJsDispl
 
     if(!items) {
 
-      html = '<br /><p class="ms-font-m-plus">The selected list does not exist.</p>';
+      html = `<br /><p class="${styles.fontMPlus}">The selected list does not exist.</p>`;
 
     } else if (items.length === 0) {
 
-      html = '<br /><p class="ms-font-m-plus">The selected list is empty</p>';
+      html = `<br /><p class="${styles.fontMPlus}">The selected list is empty</p>`;
 
     } else {
-      //debugger;
       items.forEach((item: ISPList) => {
         let title: string = '';
 
@@ -135,12 +134,12 @@ export default class JsDisplayListWebPart extends BaseClientSideWebPart<IJsDispl
         let created: any = item["Created"];
 
         html += `
-          <div class="${styles.row} ms-Grid-row " }>
+          <div class="${styles.row}" }>
-                <div class="ms-Grid-col ms-u-sm5 ms-u-md3 ms-u-lg4 ms-font-m">${title}</div>
+                <div class="${styles.column}">${title}</div>
-                <div class="ms-Grid-col ms-u-sm5 ms-u-md3 ms-u-lg4 ms-font-m">
+                <div class="${styles.column}">
                   ${created.substring(0, created.length - 1).replace('T', ' ')}
                 </div>
-                <div class="ms-Grid-col ms-u-sm5 ms-u-md3 ms-u-lg4 ms-font-m">${item['Author'].Title}</div>
+                <div class="${styles.column}">${item['Author'].Title}</div>
           </div>`;
       });
     }
@@ -153,18 +152,18 @@ export default class JsDisplayListWebPart extends BaseClientSideWebPart<IJsDispl
   private _renderListAsync(): void {
 
     this.domElement.innerHTML = `
-        <div className='wrapper'>
+        <div class='wrapper ${styles.jsDisplayList}'>
-          <p class="ms-font-l ms-bgColor-themeDark ms-fontColor-white">
+          <p class="${styles.themeDark}">
-          <span class="ms-fontWeight-semibold">
+          <span class="${styles.semiBold}">
               ${this.properties.listTitle}
               </span>
               List
           </p>
-          <div class="ms-Grid ${styles.jsDisplayList}">
+          <div class="${styles.grid} ${styles.jsDisplayList}">
-             <div class="ms-Grid-row">
+             <div class="${styles.row}">
-                <div class="ms-Grid-col ms-u-sm5 ms-u-md3 ms-u-lg4 ms-bgColor-themeLight  ms-font-m-plus">Title</div>
+                <div class="${styles.columnHeader}">Title</div>
-                <div class="ms-Grid-col ms-u-sm5 ms-u-md3 ms-u-lg4 ms-bgColor-themeLight  ms-font-m-plus">Created</div>
+                <div class="${styles.columnHeader}">Created</div>
-                <div class="ms-Grid-col ms-u-sm5 ms-u-md3 ms-u-lg4  ms-bgColor-themeLight  ms-font-m-plus">Created By</div>
+                <div class="${styles.columnHeader}">Created By</div>
               </div>
               <hr />
               <div id="spListContainer"></div>