Merge branch 'feature/listview-styles' of https://github.com/MonalisaBaltatescu/sp-dev-fx-controls-react into MonalisaBaltatescu-feature/listview-styles

Author: AJIXuMuK

.circleci/config.yml

@@ -129,6 +129,8 @@ workflows:
               only:
                 - dev
                 - v2
+              ignore:
+                - v2-dev
       - build_next:
           requires:
             - build

src/controls/listView/IListView.ts

@@ -68,6 +68,10 @@ export interface IListViewProps {
    * Set to false by default
    */
   stickyHeader?: boolean;
+   /**
+   * Class name to apply additional styles on list view wrapper
+   */
+  className?: 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
@@ -595,7 +595,7 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
     }
 
     return (
-      <ListViewWrapper stickyHeader={!!this.props.stickyHeader}>
+      <ListViewWrapper stickyHeader={!!this.props.stickyHeader} className={this.props.className}>
         <DragDropFiles enable={dragDropFiles}
           iconName="BulkUpload"
           labelMessage={strings.UploadFileHeader}

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>
                 ),
               },