Merge branch 'gautamdsheth-feature/stockImagesTab' into dev

Author: AJIXuMuK

src/controls/filePicker/FilePicker.module.scss

@@ -64,6 +64,7 @@
   text-decoration: none;
   border-radius: 0px;
   overflow: hidden;
+  border-color: transparent;
 }
 
 .filePicker :global(.is-selected) :global(.ms-Nav-link) {
@@ -90,8 +91,6 @@
   outline: transparent;
   border-width: initial;
   border-style: none;
-  border-color: initial;
-  border-image: initial;
   text-decoration: none;
   border-radius: 0px;
   overflow: hidden;
@@ -163,18 +162,19 @@
 }
 
 .tab {
-  padding: 0 32px;
   overflow-y: auto;
-  -webkit-box-flex: 2;
-  -ms-flex-positive: 2;
   flex-grow: 2;
 }
+
+.tabOffset {
+  padding: 0 32px;
+}
+
 .tabFiles {
   overflow-y: hidden;
   overflow-x: hidden;
-  -webkit-box-flex: 2;
-  -ms-flex-positive: 2;
   flex-grow: 2;
+  padding: 0 32px;
 }
 .scrollablePaneWrapper {
   height: 75vh;
@@ -236,8 +236,8 @@
 .tabHeader {
   color: $ms-color-neutralPrimary;
   margin: 0;
-  font-size: 28px;
-  font-weight: 100;
+  font-size: 24px;
+  font-weight: 600;
   padding: 22px 0 20px 32px;
 }
 

src/controls/filePicker/LinkFilePickerTab/LinkFilePickerTab.tsx

@@ -5,6 +5,7 @@ import { GeneralHelper } from '../../../Utilities';
 import { IFilePickerResult } from '../FilePicker.types';
 import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/components/Button';
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import { css } from '@uifabric/utilities/lib/css';
 
 import * as strings from 'ControlStrings';
 import styles from './LinkFilePickerTab.module.scss';
@@ -23,7 +24,7 @@ export default class LinkFilePickerTab extends React.Component<ILinkFilePickerTa
         <div className={styles.tabHeaderContainer}>
           <h2 className={styles.tabHeader}>{strings.LinkHeader}</h2>
         </div>
-        <div className={styles.tab}>
+        <div className={css(styles.tab, styles.tabOffset)}>
           <TextField
             multiline={true}
             required={true}

src/controls/filePicker/RecentFilesTab/RecentFilesTab.tsx

@@ -5,7 +5,7 @@ import { Spinner } from 'office-ui-fabric-react/lib/Spinner';
 import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone';
 import { List } from 'office-ui-fabric-react/lib/List';
 import { IRectangle } from 'office-ui-fabric-react/lib/Utilities';
-import { css } from "@uifabric/utilities/lib/css";
+import { css } from '@uifabric/utilities/lib/css';
 import { Selection, SelectionMode, SelectionZone } from 'office-ui-fabric-react/lib/Selection';
 import { Image, ImageFit } from 'office-ui-fabric-react/lib/Image';
 import { Check } from 'office-ui-fabric-react/lib/Check';
@@ -71,27 +71,27 @@ export default class RecentFilesTab extends React.Component<IRecentFilesTabProps
     const { results,
       isLoading } = this.state;
     return (
-      <span className={styles.tabContainer}>
-        <span className={styles.tabHeaderContainer}>
+      <div className={styles.tabContainer}>
+        <div className={styles.tabHeaderContainer}>
           <h2 className={styles.tabHeader}>{strings.RecentDocumentsHeader}</h2>
-        </span>
-        <span className={styles.tab}>
+        </div>
+        <div className={css(styles.tab, styles.tabOffset)}>
           {isLoading ?
             this._renderSpinner() :
             results === undefined || results.length < 1 ? this._renderPlaceholder() : this._renderGridList()
           }
-        </span>
-        <span className={styles.actionButtonsContainer}>
-          <span className={styles.actionButtons}>
+        </div>
+        <div className={styles.actionButtonsContainer}>
+          <div className={styles.actionButtons}>
             <PrimaryButton
               disabled={!this.state.filePickerResult}
               onClick={() => this._handleSave()}
               className={styles.actionButton}
             >{strings.OpenButtonLabel}</PrimaryButton>
             <DefaultButton onClick={() => this._handleClose()} className={styles.actionButton}>{strings.CancelButtonLabel}</DefaultButton>
-          </span>
-        </span>
-      </span>
+          </div>
+        </div>
+      </div>
     );
   }
 

src/controls/filePicker/StockImagesTab/StockImages.module.scss

@@ -13,6 +13,6 @@
   padding: 0px;
   overflow: hidden;
 
-  margin-top:-30px;
-  margin-left: -35px;
-}
+  //margin-top:-30px;
+  //margin-left: -35px;
+}

src/controls/filePicker/UploadFilePickerTab/UploadFilePickerTab.tsx

@@ -4,6 +4,7 @@ import { IUploadFilePickerTabProps, IUploadFilePickerTabState } from '.';
 import { IFilePickerResult } from '../FilePicker.types';
 import { GeneralHelper } from '../../../common/utilities';
 import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/components/Button';
+import { css } from '@uifabric/utilities/lib/css';
 
 import * as strings from 'ControlStrings';
 import styles from './UploadFilePickerTab.module.scss';
@@ -28,7 +29,7 @@ export default class UploadFilePickerTab extends React.Component<IUploadFilePick
         <div className={styles.tabHeaderContainer}>
           <h2 className={styles.tabHeader}>{strings.UploadFileHeader}</h2>
         </div>
-        <div className={styles.tab}>
+        <div className={css(styles.tab, styles.tabOffset)}>
           <input
             className={styles.localTabInput}
             type="file" id="fileInput"

src/controls/filePicker/WebSearchTab/WebSearchTab.tsx

@@ -55,14 +55,12 @@ export default class WebSearchTab extends React.Component<IWebSearchTabProps, IW
     return (
       <div className={styles.tabContainer}>
         <div className={styles.tabHeaderContainer}>
-          <Link onClick={this._clearSearch}>
-            <h2 className={styles.tabHeader}>{strings.WebSearchLinkLabel}</h2>
-          </Link>
-          {this.props.bingSearchService && this._renderSearchBox()}
+          <h2 className={styles.tabHeader}>{strings.WebSearchLinkLabel}</h2>
         </div>
-        <div className={styles.tab}>
-          { !query && this._renderSearchSuggestions() }
-          { query && results && this._renderSearchResults() }
+        {this.props.bingSearchService && this._renderSearchBox()}
+        <div className={css(styles.tab, styles.tabOffset)}>
+          {!query && this._renderSearchSuggestions()}
+          {query && results && this._renderSearchResults()}
         </div>
         <div className={styles.actionButtonsContainer}>
           {

src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.module.scss

@@ -92,5 +92,5 @@
 }
 
 .documentLibraryBrowserContainer {
-  padding: 0 32px;
+  padding: 0;
 }