Merge pull request #331 from pnp/CK-jquery-field-itemOrder_Icon-fix

Fixed issue with icon display
pnp · Sep 23, 2020 · cbd0626 · cbd0626
2 parents c13c226 + 59b87ac
commit cbd0626
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 3 deletions.
diff --git a/samples/jquery-field-itemorder/README.md b/samples/jquery-field-itemorder/README.md
@@ -29,6 +29,7 @@ Version|Date|Comments
 1.1|September 28, 2017|Updated for SPFx Extensions GA 1.3.0
 1.4|February 2, 2018|Updated for SPFx 1.4.0
 1.5|October 10, 2019|Updated to SPFx 1.4.1 and enabled ordering across item paging
+1.6|Septemmber 23, 2020|Fixed issue with icons not displaying because SP changed the fabric class name to ms-SPLegacyFabricBlock
 
 ## Disclaimer
 **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**

diff --git a/...ery-field-itemorder/src/extensions/spfxItemOrder/SpfxItemOrderFieldCustomizer.module.scss b/...ery-field-itemorder/src/extensions/spfxItemOrder/SpfxItemOrderFieldCustomizer.module.scss
@@ -1,5 +1,3 @@
-$ms-themePrimary: "[theme:themePrimary, default:#333333]";
-
 @mixin keyframes($animation-name) {
   @-webkit-keyframes #{$animation-name} {
     from { -webkit-transform: rotate(0deg); }
@@ -41,7 +39,6 @@ $ms-themePrimary: "[theme:themePrimary, default:#333333]";
 
   .reorderField {
     cursor: pointer;
-    color: $ms-themePrimary;
   }
   span.reorderField {
     display: inline-block;

diff --git a/samples/jquery-field-itemorder/src/extensions/spfxItemOrder/SpfxItemOrderFieldCustomizer.ts b/samples/jquery-field-itemorder/src/extensions/spfxItemOrder/SpfxItemOrderFieldCustomizer.ts
@@ -67,6 +67,9 @@ export default class SpfxItemOrderFieldCustomizer
     //Provide an icon for dragging (actually, the whole row can be dragged, but a UI hint is helpful)
     event.domElement.classList.add('ms-font-l'); //increase the font-size
     event.domElement.classList.add(`${styles.SpfxItemOrder}`); //add our base CSS class
+    event.domElement.classList.add('ms-Fabric'); //Needed to show icons
+    event.domElement.classList.add('ms-SPLegacyFabricBlock'); //Need to show icons in SPO
+    event.domElement.classList.add('ms-fontColor-themePrimary'); //Shows icon using the primary theme color
 
     if(this.context.pageContext.list.permissions.hasPermission(SPPermission.editListItems)) {
       if(this._useIcons) {