Updated the file picker with global classnames and properties

Author: estruyf

src/controls/filePicker/FilePicker.tsx

@@ -65,6 +65,8 @@ export class FilePicker extends React.Component<IFilePickerProps, IFilePickerSta
   public render(): JSX.Element {
     // If no acceptable file type was passed, and we're expecting images, set the default image filter
     const accepts: string[] = this.props.accepts;
+    const buttonClassName :string = this.props.buttonClassName ? this.props.buttonClassName : '';
+    const panelClassName :string = this.props.panelClassName ? this.props.panelClassName : '';
 
     const linkTabProps = {
       accepts: accepts,
@@ -75,24 +77,25 @@ export class FilePicker extends React.Component<IFilePickerProps, IFilePickerSta
     const buttonProps = {
       text: this.props.buttonLabel,
       disabled: this.props.disabled,
-      onClick: this._handleOpenPanel
+      onClick: this._handleOpenPanel,
+      className: `pnp__file-picker__button ${buttonClassName}`
     };
 
     return (
-      <div >
+      <div className={`pnp__file-picker`}>
         {
           this.props.label && <Label required={this.props.required}>{this.props.label}</Label>
         }
         {
           this.props.buttonIcon ?
             <ActionButton iconProps={{ iconName: this.props.buttonIcon }} {...buttonProps} /> :
-            <PrimaryButton {...buttonProps}/>
+            <PrimaryButton {...buttonProps} />
         }
 
         <Panel isOpen={this.state.panelOpen}
           isBlocking={true}
           hasCloseButton={true}
-          className={styles.filePicker}
+          className={`pnp__file-picker__panel ${styles.filePicker} ${panelClassName}`}
           onDismiss={this._handleClosePanel}
           type={PanelType.extraLarge}
           isFooterAtBottom={true}

src/controls/filePicker/IFilePickerProps.ts

@@ -32,6 +32,16 @@ export interface IFilePickerProps {
    */
   context: ExtensionContext |  WebPartContext;
 
+  /**
+   * ClassName to be applied to the opener button element.
+   */
+  buttonClassName?: string;
+
+  /**
+   * ClassName to be applied to the Panel root element.
+   */
+  panelClassName?: string;
+
   /**
    * File extensions to be displayed.
    */

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

@@ -75,6 +75,11 @@
   font-size: 21px;
   font-weight: 600;
 
+  :global .ms-Button-textContainer {
+    max-width: 100%;
+    word-break: break-word;
+  }
+
   &:hover {
     color: $ms-color-neutralLight;
     background-color: rgba(0, 0, 0, 0.6);