diff --git a/samples/js-display-list/package-lock.json b/samples/js-display-list/package-lock.json
index 8bf0b743d..a385d85a7 100644
--- a/samples/js-display-list/package-lock.json
+++ b/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",
diff --git a/samples/js-display-list/package.json b/samples/js-display-list/package.json
index 6bb508860..ed702df97 100644
--- a/samples/js-display-list/package.json
+++ b/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"
diff --git a/samples/js-display-list/src/webparts/jsDisplayList/JsDisplayList.module.scss b/samples/js-display-list/src/webparts/jsDisplayList/JsDisplayList.module.scss
index 97d0b4f80..82beb2801 100644
--- a/samples/js-display-list/src/webparts/jsDisplayList/JsDisplayList.module.scss
+++ b/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 {
diff --git a/samples/js-display-list/src/webparts/jsDisplayList/JsDisplayListWebPart.ts b/samples/js-display-list/src/webparts/jsDisplayList/JsDisplayListWebPart.ts
index cc7907eb7..db28cd444 100644
--- a/samples/js-display-list/src/webparts/jsDisplayList/JsDisplayListWebPart.ts
+++ b/samples/js-display-list/src/webparts/jsDisplayList/JsDisplayListWebPart.ts
@@ -115,14 +115,13 @@ export default class JsDisplayListWebPart extends BaseClientSideWebPart
The selected list does not exist.
`; } else if (items.length === 0) { - html = 'The selected list is empty
'; + html = `The selected list is empty
`; } else { - //debugger; items.forEach((item: ISPList) => { let title: string = ''; @@ -135,12 +134,12 @@ export default class JsDisplayListWebPart extends BaseClientSideWebPart
-
+
+
${this.properties.listTitle}
List