Added field width to ListView

Added a feature that allows users to choose a field width as a prop on the ListView  react control

Author: jason-appliedis

src/controls/listView/IListView.ts

@@ -47,6 +47,10 @@ export interface IListViewProps {
    * Specify the placeholder for the filter text box. Default 'Search'
    */
   filterPlaceHolder?: string;
+  /**
+   * Specify if the filter width in % 0 - 100.
+   */
+  filterWidth?: number;
   /**
    * Specify if the filter text box should be rendered.
    */

src/controls/listView/ListView.tsx

@@ -500,7 +500,7 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
   public render(): React.ReactElement<IListViewProps> {
     let groupProps: IGroupRenderProps = {};
 
-    let { showFilter, filterPlaceHolder } = this.props;
+    let { showFilter, filterPlaceHolder, filterWidth } = this.props;
     let { filterValue, items } = this.state;
 
     // Check if selection mode is single selection,
@@ -517,7 +517,11 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
     return (
       <div>
         {
-          showFilter && <TextField placeholder={filterPlaceHolder || strings.ListViewFilterLabel} onChanged={this._updateFilterValue} value={filterValue}/>
+          showFilter && 
+          // Add div to control the width of the filter for the list view dynamically allowing users to enter a number 0-100 % to alter the field width
+          <div style={{width:`${filterWidth}%`}}>
+            <TextField placeholder={filterPlaceHolder || strings.ListViewFilterLabel} onChanged={this._updateFilterValue} value={filterValue}/>
+          </div>
         }
         <DetailsList
           key="ListViewControl"