Fabric css conflicts with modern sharepoint fixed

markgab · Jan 31, 2022 · 6162425 · 6162425
1 parent c11da29
commit 6162425
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -44,6 +44,8 @@ Likewise, the Swivel Search Results web part allows you to select which columns
 * [Swivel Search Customization](./Search-Customization.md)
 * [Swivel Search Results Customization](./Results-Customization.md)
 * [Selecting Managed Properties](./Selecting-Managed-Properties.md)
+* [Github Repositry](
+https://github.com/markgab/swivel-search)
 
 ### Building the code
 

diff --git a/Results-Customization.md b/Results-Customization.md
@@ -64,4 +64,6 @@ Select the direction of the sorting.
 * [README](./README.md)
 * [Swivel Search Customization](./Search-Customization.md)
 * [Swivel Search Results Customization](./Results-Customization.md)
-* [Selecting Managed Properties](./Selecting-Managed-Properties.md)
+* [Selecting Managed Properties](./Selecting-Managed-Properties.md)
+* [Github Repositry](
+https://github.com/markgab/swivel-search)
diff --git a/Search-Customization.md b/Search-Customization.md
@@ -67,4 +67,6 @@ Add any Keyword Query Language (KQL) criteria to this textbox. This will be appe
 * [README](./README.md)
 * [Swivel Search Customization](./Search-Customization.md)
 * [Swivel Search Results Customization](./Results-Customization.md)
-* [Selecting Managed Properties](./Selecting-Managed-Properties.md)
+* [Selecting Managed Properties](./Selecting-Managed-Properties.md)
+* [Github Repositry](
+https://github.com/markgab/swivel-search)
diff --git a/Selecting-Managed-Properties.md b/Selecting-Managed-Properties.md
@@ -70,4 +70,6 @@ Want to cover all the bases? There is a collection of predefined managed propert
 * [README](./README.md)
 * [Swivel Search Customization](./Search-Customization.md)
 * [Swivel Search Results Customization](./Results-Customization.md)
-* [Selecting Managed Properties](./Selecting-Managed-Properties.md)
+* [Selecting Managed Properties](./Selecting-Managed-Properties.md)
+* [Github Repositry](
+https://github.com/markgab/swivel-search)
diff --git a/config/package-solution.json b/config/package-solution.json
@@ -3,7 +3,7 @@
   "solution": {
     "name": "Swivel Search Web Parts",
     "id": "3fb9e8f1-2d94-46d4-a36c-20ad8deab8ec",
-    "version": "1.0.0.1",
+    "version": "1.0.0.2",
     "includeClientSideAssets": true,
     "isDomainIsolated": false
   },

diff --git a/src/webparts/swivelSearch/SwivelSearchWebPart.ts b/src/webparts/swivelSearch/SwivelSearchWebPart.ts
@@ -3,11 +3,13 @@ import * as ReactDom from 'react-dom';
 import { Version } from '@microsoft/sp-core-library';
 import {
   BaseClientSideWebPart,
+} from '@microsoft/sp-webpart-base';
+import {
   IPropertyPaneConfiguration,
   PropertyPaneTextField,
   IPropertyPaneTextFieldProps,
   PropertyPaneToggle
-} from '@microsoft/sp-webpart-base';
+} from '@microsoft/sp-property-pane';
 import { 
   Dropdown, 
   IDropdown, 

diff --git a/src/webparts/swivelSearch/components/SwivelSearch.module.scss b/src/webparts/swivelSearch/components/SwivelSearch.module.scss
@@ -18,6 +18,16 @@
   .searchInterface {
     box-shadow: 0 3px 5px 0 rgba(0,0,0,.18), 0 3px 5px 2px rgba(0,0,0,.15);
     padding:30px;
+
+    button {
+      border-width: 0;
+      background-color: rgb(243, 242, 241);
+
+      &:hover {
+        background-color: rgb(237, 235, 233);
+        color: rgb(32, 31, 30);
+      }
+    }
   }
 
   .buttonRow {
@@ -51,6 +61,10 @@
         }
       }
 
+      .ms-TextField-field::placeholder {
+        color: #999;
+      }
+
       .ms-TextField-suffix {
 /*         @include noselect();
         color: rgb(51, 51, 51);

diff --git a/src/webparts/swivelSearchResults/SwivelSearchResultsWebPart.ts b/src/webparts/swivelSearchResults/SwivelSearchResultsWebPart.ts
@@ -3,17 +3,19 @@ import * as ReactDom from 'react-dom';
 import { Version } from '@microsoft/sp-core-library';
 import {
   BaseClientSideWebPart,
+  IWebPartPropertiesMetadata,
+} from '@microsoft/sp-webpart-base';
+import {
   IPropertyPaneConfiguration,
   IPropertyPaneConditionalGroup,
   PropertyPaneTextField,
   PropertyPaneToggle,
   PropertyPaneDynamicField,
   PropertyPaneButton,
-  IWebPartPropertiesMetadata,
   DynamicDataSharedDepth,
   PropertyPaneDropdown,
   IPropertyPaneDropdownOption
-} from '@microsoft/sp-webpart-base';
+} from '@microsoft/sp-property-pane';
 import * as Model from '../../model/AdvancedSearchModel';
 import * as strings from 'SwivelSearchResultsWebPartStrings';
 import SwivelSearchResults, { ISwivelSearchResultsProps } from './components/SwivelSearchResults';
@@ -50,7 +52,7 @@ export default class SwivelSearchResultsWebPart extends BaseClientSideWebPart<IS
   public onInit(): Promise<void> {
     return super.onInit().then(_ => {
 
-      this.properties.isDebug = true;
+      //this.properties.isDebug = true;
 
       this.searchSchemaHelper = new SearchSchemaHelper(
         document.location.origin,

diff --git a/src/webparts/swivelSearchResults/components/ResultsInterface.module.scss b/src/webparts/swivelSearchResults/components/ResultsInterface.module.scss
@@ -74,6 +74,10 @@
   .commandBar {
     border-top: 5px solid #FFF;
     z-index: 10;
+
+    button {
+      border-width: 0;
+    }
   }
 
   .commandbarLabelItem {