Merge branch 'MonalisaBaltatescu-feature/listview-styles' into dev

Author: AJIXuMuK

docs/documentation/docs/controls/ListView.md

@@ -37,7 +37,9 @@ import { ListView, IViewField, SelectionMode, GroupOrder, IGrouping } from "@pnp
   groupByFields={groupByFields}
   dragDropFiles={true}
   onDrop={this._getDropFiles}
-  stickyHeader={true} />
+  stickyHeader={true}
+  className={styles.listWrapper}
+  listClassName={styles.list} />
 ```
 - The control provides full text filtering through all the columns. If you want to execute filtering on the specified columns, you can use syntax : `<ColumndName>`:`<FilterValue>`. Use `':'` as a separator between column name and value. Control support both `'fieldName'` and `'name'` properties of IColumn interface.
 
@@ -98,6 +100,8 @@ The ListView control can be configured with the following properties:
 | onDrop | file | no | Event handler returns files from drag and drop. |
 | stickyHeader | boolean | no | Specifies if the header of the `ListView`, including search box, is sticky |
 | sortItems | (items: any[], columnName: string, descending: boolean) =&gt; any[] | no | Custom sorting function to handle sorting by column |
+| className | string | no | Class name to apply additional styles on list view wrapper |
+| listClassName | string | no | Class name to apply additional styles on list view |
 
 The `IViewField` has the following implementation:
 

src/controls/listView/IListView.ts

@@ -68,6 +68,14 @@ export interface IListViewProps {
    * Set to false by default
    */
   stickyHeader?: boolean;
+   /**
+   * Class name to apply additional styles on list view wrapper
+   */
+  className?: string;
+  /**
+   * Class name to apply additional styles on list view
+   */
+  listClassName?: string;
   /**
    * Custom sorting function.
    * @returns sorted collection of items

src/controls/listView/ListView.tsx

@@ -30,14 +30,14 @@ const classNames = mergeStyleSets({
 /**
 * Wrap the listview in a scrollable pane if sticky header = true
 */
-const ListViewWrapper = ({ stickyHeader, children }) => (stickyHeader ?
-  <div className={classNames.wrapper} >
-    <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
-      {children}
-    </ScrollablePane>
-  </div>
-  : children
-);
+const ListViewWrapper = ({ stickyHeader, children, className }) => (stickyHeader ?
+    <div className={`${classNames.wrapper} ${className ?? ""}`} >
+      <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
+        {children}
+      </ScrollablePane>
+    </div>
+    : children
+  );
 
 /**
 * Lock the searchbox when scrolling if sticky header = true
@@ -580,7 +580,7 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
   public render(): React.ReactElement<IListViewProps> {
     let groupProps: IGroupRenderProps = {};
 
-    let { showFilter, filterPlaceHolder, dragDropFiles, stickyHeader, selectionMode, compact } = this.props;
+    let { showFilter, filterPlaceHolder, dragDropFiles, stickyHeader, selectionMode, compact, className, listClassName } = this.props;
     let { filterValue, items, columns, groups } = this.state;
 
     // Check if selection mode is single selection,
@@ -595,7 +595,7 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
     }
 
     return (
-      <ListViewWrapper stickyHeader={!!this.props.stickyHeader}>
+      <ListViewWrapper stickyHeader={!!stickyHeader} className={className}>
         <DragDropFiles enable={dragDropFiles}
           iconName="BulkUpload"
           labelMessage={strings.UploadFileHeader}
@@ -607,7 +607,7 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
           } >
           {
             showFilter &&
-            <SearchBoxWrapper stickyHeader={!!this.props.stickyHeader}>
+            <SearchBoxWrapper stickyHeader={!!stickyHeader}>
               <SearchBox placeholder={filterPlaceHolder || strings.ListViewFilterLabel} onSearch={this._updateFilterValue} onChange={(e, value) => this._updateFilterValue(value)} value={filterValue} />
             </SearchBoxWrapper>
           }
@@ -623,6 +623,7 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
             compact={compact}
             setKey='ListViewControl'
             groupProps={groupProps}
+            className={listClassName}
             onRenderDetailsHeader={this._onRenderDetailsHeader}
             componentRef={ref => {
               if (ref) {

src/webparts/controlsTest/components/ControlsTest.module.scss

@@ -82,6 +82,10 @@ $themePrimary: '[theme:themePrimary, default:#0078d7]';
   .carouselImageContent {
     height: 400px;
   }
+
+  .listViewWrapper {
+    height: 200px;
+  }
 }
 
 .dialogContainer {

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -438,7 +438,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
       canMoveNext: true,
       currentCarouselElement: this.carouselElements[0],
       comboBoxListItemPickerListId: '0ffa51d7-4ad1-4f04-8cfe-98209905d6da',
-      comboBoxListItemPickerIds: [{Id: 1, Title: '111'}],
+      comboBoxListItemPickerIds: [{ Id: 1, Title: '111' }],
       treeViewSelectedKeys: ['gc1', 'gc3'],
       showAnimatedDialog: false,
       showCustomisedAnimatedDialog: false,
@@ -1290,21 +1290,20 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
         </DragDropFiles>
         <br></br>
 
-
-        <ListView items={this.state.items}
-          viewFields={viewFields}
-          iconFieldName='ServerRelativeUrl'
-          groupByFields={groupByFields}
-          compact={true}
-          selectionMode={SelectionMode.single}
-          selection={this._getSelection}
-          showFilter={true}
-          dragDropFiles={true}
-          onDrop={this._getDropFiles}
-          stickyHeader={true}
-        // defaultFilter="Team"
-        />
-
+          <ListView items={this.state.items}
+            viewFields={viewFields}
+            iconFieldName='ServerRelativeUrl'
+            groupByFields={groupByFields}
+            compact={true}
+            selectionMode={SelectionMode.single}
+            selection={this._getSelection}
+            showFilter={true}
+            dragDropFiles={true}
+            onDrop={this._getDropFiles}
+            stickyHeader={true}
+            className={styles.listViewWrapper}
+          // defaultFilter="Team"
+          />
 
         <ChartControl type={ChartType.Bar}
           data={{
@@ -1393,7 +1392,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
 
 
               <div className="ms-font-m">Site picker tester:
-              <SitePicker
+                <SitePicker
                   context={this.props.context}
                   label={'select sites'}
                   mode={'site'}
@@ -1459,7 +1458,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
                 }} />
                 <PrimaryButton text="Change default items" onClick={() => {
                   this.setState({
-                    comboBoxListItemPickerIds: [{Id: 2, Title: '222'}]
+                    comboBoxListItemPickerIds: [{ Id: 2, Title: '222' }]
                   });
                 }} />
 
@@ -1770,7 +1769,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
                   >
                     <NorthstarText size="large" weight="semibold">
                       Content #1
-                  </NorthstarText>
+                    </NorthstarText>
                   </Flex>
                 ),
               },
@@ -1785,7 +1784,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
                   >
                     <NorthstarText size="large" weight="semibold">
                       Content #2
-                  </NorthstarText>
+                    </NorthstarText>
                   </Flex>
                 ),
               },
@@ -1800,7 +1799,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
                   >
                     <NorthstarText size="large" weight="semibold">
                       Content #3
-                  </NorthstarText>
+                    </NorthstarText>
                   </Flex>
                 ),
               },