Merge branch 'dev' into v2

Author: AJIXuMuK

CHANGELOG.JSON

@@ -7,7 +7,8 @@
         "enhancements": [
           "`FilePicker`: Fixes for OneDrive CORS issues [#407](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/407)",
           "`ListItemPicker`: added new control property `filter` [#392](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/392)",
-          "allowing to use context from any type of SPFx extensions: [#419](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/419)"
+          "allowing to use context from any type of SPFx extensions: [#419](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/419)",
+          "`Placeholder`: remove unused and vendor specific CSS [#426](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/426)"
         ],
         "fixes": [
           "Documentation fix for `FilePicker`: updated `accepts` value in props [#404](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/404)",
@@ -16,7 +17,12 @@
           "Documentation fix to include new components from v 1.15.0 [#394](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/394)",
           "`DateTimePicker`: dropdown for time not handling AM/PM correctly [#405](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/409)",
           "Documentation fix for `index` page: updated link to Chart controls [#417](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/417)",
-          "Documentation update for SPFx On Premises notice: [#418](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/418)"
+          "Documentation update for SPFx On Premises notice: [#418](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/418)",
+          "Documentation update for `ListItemPicker`: `valueColumnInternalName` should be `keyColumnInternalName`",
+          "`RichText`: Fix \"Align Left\" button [#429](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/429)",
+          "Documentation update for `FilePicker`: misspelling [#432](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/432)",
+          "`IFramePanel`: Fix doubled scroll issue when iframe content is higher than frame height [#431](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/431)",
+          "`PeoplePicker`: `errorMessage` not showing [#420](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/420)"
         ]
       },
       "contributions": [
@@ -26,7 +32,12 @@
         "[João Mendes](https://github.com/joaojmendes)",
         "[PrasadKasireddy](https://github.com/PrasadKasireddy)",
         "[Chad Eiserloh](https://github.com/c-eiser13)",
-        "[Koen Zomers](https://github.com/KoenZomers)"
+        "[Koen Zomers](https://github.com/KoenZomers)",
+        "[Dmitry Rogozhny](https://github.com/dmitryrogozhny)",
+        "[Alexander Kleshcheov](https://github.com/SharePickle)",
+        "[Hugo Bernier](https://github.com/hugoabernier)",
+        "[Beniamin](https://github.com/bbronisz)",
+        "[Giovani Martini](https://github.com/giovanibm)"
       ]
     },
     {

docs/documentation/docs/controls/FilePicker.md

@@ -80,8 +80,8 @@ interface `IFilePickerResult`
 Provides options for carousel buttons location.
 
 | Value | Type | Description |
-| ---- | ---- |
-| fileName | string | File namr of the result with the extension. |
+| ---- | ---- | ---- |
+| fileName | string | File name of the result with the extension. |
 | fileNameWithoutExtension | string | File name of the result without the extension. |
 | fileAbsoluteUrl | string | Absolute URL of the file. Null in case of file upload. |
 | downloadFileContent | () => Promise<File> | Function allows to download file content. Returns File object. |

docs/documentation/docs/controls/ListItemPicker.md

@@ -23,7 +23,7 @@ import { ListItemPicker } from '@pnp/spfx-controls-react/lib/listItemPicker';
 ```TypeScript
 <ListItemPicker listId='da8daf15-d84f-4ab1-9800-7568f82fed3f'
                 columnInternalName='Title'
-                valueColumnInternalName='Id'
+                keyColumnInternalName='Id'
                 filter="Title eq 'SPFx'"
                 itemLimit={2}
                 onSelectedItem={this.onSelectedItem}

src/controls/iFramePanel/IFramePanelContent.tsx

@@ -27,14 +27,14 @@ export class IFramePanelContent extends React.Component<IIFramePanelContentProps
       if (this._iframe) {
         const mainDiv = this.findParent(this._iframe, "ms-Panel-main");
         const commandsDiv = mainDiv.querySelector(".ms-Panel-commands") as HTMLDivElement;
-        const headerDiv = mainDiv.querySelector("ms-Panel-header") as HTMLDivElement;
-        const footerDiv = mainDiv.querySelector("ms-Panel-footer") as HTMLDivElement;
+        const headerDiv = mainDiv.querySelector(".ms-Panel-header") as HTMLDivElement;
+        const footerDiv = mainDiv.querySelector(".ms-Panel-footer") as HTMLDivElement;
 
         let height = this.getTrueHeight(mainDiv);
         height = height - this.getTrueHeight(commandsDiv);
         height = height - this.getTrueHeight(headerDiv);
         height = height - this.getTrueHeight(footerDiv);
-        height = height - 20;  // padding on content div
+        height = height - 25;  // padding on content div
 
         this._iframe.height = height.toString() + 'px';
       }
@@ -59,9 +59,9 @@ export class IFramePanelContent extends React.Component<IIFramePanelContentProps
    */
   private getTrueHeight(elm: HTMLElement): number {
     if (elm) {
-      const style = elm.style || window.getComputedStyle(elm);
+      const style = window.getComputedStyle && window.getComputedStyle(elm) || elm.style;
       let marginTop = parseInt((style.marginTop as string).replace("px", ""));
-      let marginBottom = parseInt((style.marginTop as string).replace("px", ""));
+      let marginBottom = parseInt((style.marginBottom as string).replace("px", ""));
       if (isNaN(marginTop)) {
         marginTop = 0;
       }

src/controls/peoplepicker/PeoplePickerComponent.tsx

@@ -225,7 +225,7 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
         }
 
         {
-          (this.props.isRequired && this.state.showRequiredError) || (this.state.errorMessage) && (
+          ((this.props.isRequired && this.state.showRequiredError) || (this.state.errorMessage)) && (
             <p className={`ms-TextField-errorMessage ${styles.errorMessage} ${this.props.errorMessageClassName ? this.props.errorMessageClassName : ''}`}>
               <Icon iconName='Error' className={styles.errorIcon} />
               {

src/controls/placeholder/PlaceholderComponent.module.scss

@@ -1,14 +1,9 @@
 @import '~office-ui-fabric-react/dist/sass/References.scss';
 
 .placeholder {
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
 
     .placeholderContainer {
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        -ms-grid-row-align: center;
         align-items: center;
         color: "[theme:neutralSecondary, default: #666666]";
         background-color: "[theme:neutralLighter, default: #f4f4f4]";
@@ -97,15 +92,3 @@
         }
     }
 }
-
-.placeholderOverlay {
-    position: relative;
-    height: 100%;
-    z-index: 1;
-
-    .placeholderSpinnerContainer {
-        position: relative;
-        width: 100%;
-        margin: 164px 0
-    }
-}

src/controls/richText/RichTextPropertyPane.tsx

@@ -369,7 +369,7 @@ export default class RichTextPropertyPane extends React.Component<IRichTextPrope
                          id="left-propertyPaneButton"
                          calloutProps={{ gapSpace: 0 }}>
               <IconButton checked={this.state.formats!.align === undefined}
-                          onClick={() => this.applyFormat('align', 'left')}
+                          onClick={() => this.applyFormat('align', undefined)}
                           className={styles.propertyPaneButton}
                           aria-describedby="left-propertyPaneButton"
                           iconProps={{