ScrollablePane SCSS to MergeStyles Part 2: Style Conversion

common/changes/office-ui-fabric-react/scrollablepane-scss2ms-pt2_2018-02-17-00-02.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Converting SCSS to MergeStyles step 2 - style conversion",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "v-brgarl@microsoft.com"
+}

packages/merge-styles/src/IRawStyleBase.ts

@@ -173,6 +173,11 @@ export interface IRawStyleBase extends IRawFontStyle {
    */
   WebkitFontSmoothing?: 'none' | 'antialiased' | 'grayscale' | 'subpixel-antialiased';
 
+  /**
+   * (Webkit specific) momentum scrolling on iOS devices
+   */
+  WebkitOverflowScrolling?: 'auto' | 'touch';
+
   /**
    * Aligns a flex container's lines within the flex container when there is extra space
    * in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx

@@ -6,20 +6,24 @@ import * as PropTypes from 'prop-types';
 import {
   autobind,
   BaseComponent,
-  css
+  classNamesFunction,
+  customizable
 } from '../../Utilities';
 import {
   IScrollablePane,
   IScrollablePaneProps,
+  IScrollablePaneStyles,
+  IScrollablePaneStyleProps
 } from './ScrollablePane.types';
 import { Sticky } from '../../Sticky';
-import * as stylesImport from './ScrollablePane.scss';
-const styles: any = stylesImport;
 
 export interface IScrollablePaneContext {
   scrollablePane: PropTypes.Requireable<object>;
 }
 
+const getClassNames = classNamesFunction<IScrollablePaneStyleProps, IScrollablePaneStyles>();
+
+@customizable('ScrollablePane', ['theme'])
 export class ScrollablePaneBase extends BaseComponent<IScrollablePaneProps, {}> implements IScrollablePane {
   public static childContextTypes: React.ValidationMap<IScrollablePaneContext> = {
     scrollablePane: PropTypes.object
@@ -82,17 +86,23 @@ export class ScrollablePaneBase extends BaseComponent<IScrollablePaneProps, {}>
   }
 
   public render() {
-    const { className } = this.props;
+    const { className, theme, getStyles } = this.props;
+    const classNames = getClassNames(getStyles!,
+      {
+        theme: theme!,
+        className
+      }
+    );
 
     return (
       <div
         ref='root'
-        className={ css('ms-ScrollablePane', styles.root, className) }
+        className={ classNames.root }
         data-is-scrollable={ true }
       >
-        <div ref='stickyContainer' className={ styles.stickyContainer }>
-          <div ref='stickyAbove' className={ styles.stickyAbove } />
-          <div ref='stickyBelow' className={ styles.stickyBelow } />
+        <div ref='stickyContainer' className={ classNames.stickyContainer }>
+          <div ref='stickyAbove' className={ classNames.stickyAbove } />
+          <div ref='stickyBelow' className={ classNames.stickyBelow } />
         </div>
         { this.props.children }
       </div>

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

@@ -1,7 +1,8 @@
 import { IScrollablePaneStyleProps, IScrollablePaneStyles } from './ScrollablePane.types';
 import {
+  HighContrastSelector,
   IStyle,
-  ITheme,
+  ITheme
 } from '../../Styling';
 
 export const getStyles = (
@@ -14,15 +15,53 @@ export const getStyles = (
 
   const { palette, semanticColors } = theme;
 
+  const AboveAndBelowStyles: IStyle = {
+    position: 'absolute',
+    pointerEvents: 'auto',
+    width: '100%',
+    zIndex: 1
+  };
+
   return ({
     root: [
       'ms-ScrollablePane',
       {
-        // Insert css properties
+        overflowY: 'auto',
+        maxHeight: 'inherit',
+        height: 'inherit',
+        WebkitOverflowScrolling: 'touch'
+      },
+      className
+    ],
+    stickyContainer: [
+      {
+        overflow: 'hidden',
+        position: 'absolute',
+        pointerEvents: 'none',
 
       }
     ],
-
-    // Insert className styles
+    stickyAbove: [
+      {
+        top: 0,
+        selectors: {
+          [HighContrastSelector]: {
+            borderBottom: '1px solid WindowText'
+          }
+        }
+      },
+      AboveAndBelowStyles
+    ],
+    stickyBelow: [
+      {
+        bottom: 0,
+        selectors: {
+          [HighContrastSelector]: {
+            borderTop: '1px solid WindowText'
+          }
+        }
+      },
+      AboveAndBelowStyles
+    ]
   });
 };

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

@@ -50,9 +50,19 @@ export interface IScrollablePaneStyleProps {
 
 export interface IScrollablePaneStyles {
   /**
-   * Style for the root element.
+   * Style set for the root element.
    */
   root: IStyle;
-
-  // Insert ScrollablePane classNames below
+  /**
+   * Style set for the stickyContainer element.
+   */
+  stickyContainer: IStyle;
+  /**
+   * Style set for the stickyAbove element.
+   */
+  stickyAbove: IStyle;
+  /**
+   * Style set for the stickyAbove element.
+   */
+  stickyBelow: IStyle;
 }