ScrollablePane: Optimization on how component works

packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.styles.ts

@@ -8,6 +8,7 @@ import {
 
 const GlobalClassNames = {
   root: 'ms-ScrollablePane',
+  contentContainer: 'ms-ScrollablePane--contentContainer'
 };
 
 export const getStyles = (
@@ -24,19 +25,39 @@ export const getStyles = (
     position: 'absolute',
     pointerEvents: 'auto',
     width: '100%',
+    zIndex: ZIndexes.ScrollablePane,
+    overflowY: 'hidden',
+    overflowX: 'auto'
+  };
+
+  const maxHeightStyles: IStyle = {
+    height: 'inherit',
+    maxHeight: 'inherit',
     zIndex: ZIndexes.ScrollablePane
   };
 
   return ({
     root: [
       classNames.root,
+      {
+        WebkitOverflowScrolling: 'touch',
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0
+      },
+      maxHeightStyles,
+      className
+    ],
+    contentContainer: [
+      classNames.contentContainer,
       {
         overflowY: 'auto',
-        maxHeight: 'inherit',
-        height: 'inherit',
+        position: 'relative',
         WebkitOverflowScrolling: 'touch'
       },
-      className
+      maxHeightStyles
     ],
     stickyAbove: [
       {
@@ -59,6 +80,12 @@ export const getStyles = (
         }
       },
       AboveAndBelowStyles
+    ],
+    stickyBelowItems: [
+      {
+        bottom: 0
+      },
+      AboveAndBelowStyles
     ]
   });
 };

packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.types.ts

@@ -68,4 +68,12 @@ export interface IScrollablePaneStyles {
    * Style set for the stickyAbove element.
    */
   stickyBelow: IStyle;
+  /**
+   * Style set for the stickyBelowItems element.
+   */
+  stickyBelowItems: IStyle;
+  /**
+   * Style set for the contentContainer element.
+   */
+  contentContainer: IStyle;
 }

packages/office-ui-fabric-react/src/components/ScrollablePane/docs/ScrollablePaneDonts.md

@@ -1 +1 @@
-- Don't use Sticky on elements with margin top or bottom
+- Don't use Sticky on elements with `margin-top` or `margin-bottom`

packages/office-ui-fabric-react/src/components/ScrollablePane/docs/ScrollablePaneDos.md

@@ -1,3 +1,4 @@
-- Ensure that a parent component has a CSS height, or max-height attribute set (and any intermediary containers have an inherit, or explicit height/max-height set).
+- ScrollablePane uses `position: absolute`.  Ensure that the parent element has an explicit height, or has space already allocated for ScrollablePane (e.g: flexbox).
 - Use Sticky component on block level elements
-- Sticky component are ideally section headers and/or footers
+- Sticky component are ideally section headers and/or footers
+- Ensure that the total height of Sticky components do not exceed the height of the ScrollablePane

packages/office-ui-fabric-react/src/components/ScrollablePane/examples/ScrollablePane.Default.Example.tsx

@@ -4,41 +4,54 @@ import { Sticky, StickyPositionType } from 'office-ui-fabric-react/lib/Sticky';
 import { lorem } from '@uifabric/example-app-base';
 import './ScrollablePane.Example.scss';
 
-export class ScrollablePaneDefaultExample extends React.Component {
+const colors = [
+  '#eaeaea',
+  '#dadada',
+  '#d0d0d0',
+  '#c8c8c8',
+  '#a6a6a6',
+  '#c7e0f4',
+  '#71afe5',
+  '#eff6fc',
+  '#deecf9'
+];
 
-  public render(): JSX.Element {
+export class ScrollablePaneDefaultExample extends React.Component {
+  public render() {
     const contentAreas: JSX.Element[] = [];
-    for (let i = 0; i < 4; i++) {
+    for (let i = 0; i < 5; i++) {
       contentAreas.push(this._createContentArea(i));
     }
 
     return (
-      <ScrollablePane className='scrollablePaneDefaultExample'>
-        { contentAreas.map((ele) => {
-          return ele;
-        }) }
-      </ScrollablePane>
+      <div
+        style={ {
+          height: '900px',
+          position: 'relative',
+          maxHeight: 'inherit'
+        } }
+      >
+        <ScrollablePane className='scrollablePaneDefaultExample'>
+          { contentAreas.map((ele) => {
+            return ele;
+          }) }
+        </ScrollablePane>
+      </div>
     );
   }
 
-  private _getRandomColor(): string {
-    const letters = 'BCDEF'.split('');
-    let color = '#';
-    for (let i = 0; i < 6; i++) {
-      color += letters[Math.floor(Math.random() * letters.length)];
-    }
-    return color;
-  }
-
-  private _createContentArea(index: number): JSX.Element {
-    const style = this._getRandomColor();
+  private _createContentArea(index: number) {
+    const color = colors.splice(Math.floor(Math.random() * colors.length), 1)[0];
 
     return (
-      <div key={ index }>
+      <div
+        key={ index }
+        style={ {
+          backgroundColor: color
+        } }
+      >
         <Sticky
           stickyPosition={ StickyPositionType.Both }
-          stickyClassName='largeFont'
-          stickyBackgroundColor={ style }
         >
           <div className='sticky'>
             Sticky Component #{ index + 1 }

packages/office-ui-fabric-react/src/components/ScrollablePane/examples/ScrollablePane.DetailsList.Example.tsx

@@ -18,7 +18,8 @@ import {
   ScrollablePane
 } from 'office-ui-fabric-react/lib/ScrollablePane';
 import {
-  Sticky
+  Sticky,
+  StickyPositionType
 } from 'office-ui-fabric-react/lib/Sticky';
 import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';
 
@@ -83,41 +84,49 @@ export class ScrollablePaneDetailsListExample extends React.Component<{}, {
     const { items, selectionDetails } = this.state;
 
     return (
-      <ScrollablePane>
-        <Sticky>{ selectionDetails }</Sticky>
-        <TextField
-          label='Filter by name:'
-          // tslint:disable-next-line:jsx-no-lambda
-          onChanged={ text => this.setState({ items: text ? _items.filter(i => i.name.toLowerCase().indexOf(text) > -1) : _items }) }
-        />
-        <Sticky>
-          <h1 style={ { margin: '0px' } }>Item List</h1>
-        </Sticky>
-        <MarqueeSelection selection={ this._selection }>
-          <DetailsList
-            items={ items }
-            columns={ _columns }
-            setKey='set'
-            layoutMode={ DetailsListLayoutMode.fixedColumns }
-            onRenderDetailsHeader={
-              // tslint:disable-next-line:jsx-no-lambda
-              (detailsHeaderProps: IDetailsHeaderProps, defaultRender: IRenderFunction<IDetailsHeaderProps>) => (
-                <Sticky>
-                  { defaultRender({
-                    ...detailsHeaderProps,
-                    onRenderColumnHeaderTooltip: (tooltipHostProps: ITooltipHostProps) => <TooltipHost { ...tooltipHostProps } />
-                  }) }
-                </Sticky>
-              ) }
-            selection={ this._selection }
-            selectionPreservedOnEmptyClick={ true }
-            ariaLabelForSelectionColumn='Toggle selection'
-            ariaLabelForSelectAllCheckbox='Toggle selection for all items'
+      <div
+        style={ {
+          height: '10000px',
+          position: 'relative',
+          maxHeight: 'inherit'
+        } }
+      >
+        <ScrollablePane>
+          <Sticky stickyPosition={ StickyPositionType.Header }>{ selectionDetails }</Sticky>
+          <TextField
+            label='Filter by name:'
             // tslint:disable-next-line:jsx-no-lambda
-            onItemInvoked={ (item) => alert(`Item invoked: ${item.name}`) }
+            onChanged={ text => this.setState({ items: text ? _items.filter(i => i.name.toLowerCase().indexOf(text) > -1) : _items }) }
           />
-        </MarqueeSelection>
-      </ScrollablePane>
+          <Sticky stickyPosition={ StickyPositionType.Header }>
+            <h1 style={ { margin: '0px' } }>Item List</h1>
+          </Sticky>
+          <MarqueeSelection selection={ this._selection }>
+            <DetailsList
+              items={ items }
+              columns={ _columns }
+              setKey='set'
+              layoutMode={ DetailsListLayoutMode.fixedColumns }
+              onRenderDetailsHeader={
+                // tslint:disable-next-line:jsx-no-lambda
+                (detailsHeaderProps: IDetailsHeaderProps, defaultRender: IRenderFunction<IDetailsHeaderProps>) => (
+                  <Sticky stickyPosition={ StickyPositionType.Header }>
+                    { defaultRender({
+                      ...detailsHeaderProps,
+                      onRenderColumnHeaderTooltip: (tooltipHostProps: ITooltipHostProps) => <TooltipHost { ...tooltipHostProps } />
+                    }) }
+                  </Sticky>
+                ) }
+              selection={ this._selection }
+              selectionPreservedOnEmptyClick={ true }
+              ariaLabelForSelectionColumn='Toggle selection'
+              ariaLabelForSelectAllCheckbox='Toggle selection for all items'
+              // tslint:disable-next-line:jsx-no-lambda
+              onItemInvoked={ (item) => alert(`Item invoked: ${item.name}`) }
+            />
+          </MarqueeSelection>
+        </ScrollablePane>
+      </div>
     );
   }
 

packages/office-ui-fabric-react/src/components/ScrollablePane/examples/ScrollablePane.Example.scss

@@ -3,31 +3,15 @@
 :global {
   .scrollablePaneDefaultExample {
     max-width: 400px;
-    max-height: inherit;
     border: 1px solid $ms-color-neutralLight;
   }
 
   .sticky {
     @include ms-fontColor-neutralDark;
-    padding: 10px 20px;
-    font-size: 16px;
-    -webkit-transition: font-size ease 0.3s;
-    -moz-transition: font-size ease 0.3s;
-    -o-transition: font-size ease 0.3s;
-    -ms-transition: font-size ease 0.3s;
-    -webkit-transform: translateZ(0);
-    -moz-transform: translateZ(0);
-    -ms-transform: translateZ(0);
-    -o-transform: translateZ(0);
-    transform: translateZ(0);
-    will-change: font-size;
-    box-shadow: 0 0 5px -1px $ms-color-neutralDark;
-  }
-
-  .largeFont {
-    .sticky {
-      font-size: 20px;
-    }
+    padding: 5px 20px 5px 10px;
+    font-size: 13px;
+    border-top: 1px solid $ms-color-black;
+    border-bottom: 1px solid $ms-color-black;
   }
 
   .textContent {