Convert Overlay to mergeStyles

common/changes/@uifabric/styling/mergeStyles-Overlay_2018-02-14-21-47.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/styling",
+      "comment": "Add whiteTranslucent40 to palette",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/styling",
+  "email": "v-jojanz@microsoft.com"
+}

common/changes/office-ui-fabric-react/mergeStyles-Overlay_2018-02-14-21-47.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Convert overlay and examples to mergeStyles",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "v-jojanz@microsoft.com"
+}

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

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import {
+  BaseComponent,
+  customizable,
+  classNamesFunction,
+  getNativeProps,
+  divProperties,
+  enableBodyScroll,
+  disableBodyScroll
+} from '../../Utilities';
+import {
+  IOverlayProps,
+  IOverlayStyleProps,
+  IOverlayStyles,
+} from './Overlay.types';
+
+const getClassNames = classNamesFunction<IOverlayStyleProps, IOverlayStyles>();
+
+@customizable('Overlay', ['theme'])
+export class OverlayBase extends BaseComponent<IOverlayProps, {}> {
+
+  public componentDidMount() {
+    disableBodyScroll();
+  }
+
+  public componentWillUnmount() {
+    enableBodyScroll();
+  }
+
+  public render() {
+    const {
+      isDarkThemed,
+      className,
+      theme,
+      getStyles
+    } = this.props;
+
+    const divProps = getNativeProps(this.props, divProperties);
+
+    const classNames = getClassNames(getStyles!, {
+      theme: theme!,
+      className,
+      isDarkThemed,
+    });
+
+    return (
+      <div { ...divProps } className={ classNames.root } />
+    );
+  }
+}

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

@@ -0,0 +1,52 @@
+import { IOverlayStyleProps, IOverlayStyles } from './Overlay.types';
+import {
+  IStyle,
+  ITheme,
+  HighContrastSelector,
+} from '../../Styling';
+
+export const getStyles = (
+  props: IOverlayStyleProps
+): IOverlayStyles => {
+  const {
+    className,
+    theme,
+    isNone,
+    isDarkThemed,
+  } = props;
+
+  const { palette, semanticColors } = theme;
+
+  return ({
+    root: [
+      'ms-Overlay',
+      {
+        backgroundColor: palette.whiteTranslucent40,
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        position: 'absolute',
+
+        selectors: {
+          [HighContrastSelector]: {
+            border: '1px solid WindowText',
+          }
+        }
+      },
+
+      isNone && {
+        visibility: 'hidden',
+      },
+
+      isDarkThemed && [
+        'ms-Overlay--dark',
+        {
+          backgroundColor: palette.blackTranslucent40,
+        }
+      ],
+
+      className
+    ],
+  });
+};

packages/office-ui-fabric-react/src/components/Overlay/Overlay.tsx

@@ -1,41 +1,13 @@
-import * as React from 'react';
+import { styled } from '../../Utilities';
 import {
-  BaseComponent,
-  css,
-  getNativeProps,
-  divProperties,
-  enableBodyScroll,
-  disableBodyScroll
-} from '../../Utilities';
-import { IOverlayProps } from './Overlay.types';
-
-import * as stylesImport from './Overlay.scss';
-const styles: any = stylesImport;
-
-export class Overlay extends BaseComponent<IOverlayProps, {}> {
-
-  public componentDidMount() {
-    disableBodyScroll();
-  }
-
-  public componentWillUnmount() {
-    enableBodyScroll();
-  }
-
-  public render() {
-    let { isDarkThemed, className } = this.props;
-    let divProps = getNativeProps(this.props, divProperties);
-
-    let modifiedClassName = css(
-      'ms-Overlay',
-      styles.root,
-      className,
-      {
-        ['ms-Overlay--dark ' + styles.rootIsDark]: isDarkThemed,
-      });
-
-    return (
-      <div { ...divProps } className={ modifiedClassName } />
-    );
-  }
-}
+  IOverlayProps,
+  IOverlayStyleProps,
+  IOverlayStyles
+} from './Overlay.types';
+import { OverlayBase } from './Overlay.base';
+import { getStyles } from './Overlay.styles';
+
+export const Overlay = styled<IOverlayProps, IOverlayStyleProps, IOverlayStyles>(
+  OverlayBase,
+  getStyles
+);

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

@@ -1,19 +1,68 @@
 import * as React from 'react';
+import { OverlayBase } from './Overlay.base';
+import { IStyle, ITheme } from '../../Styling';
+import { IStyleFunction } from '../../Utilities';
 
 export interface IOverlay {
 
 }
 
 export interface IOverlayProps extends React.HTMLAttributes<HTMLElement> {
   /**
-   * Optional callback to access the IOverlay interface. Use this instead of ref for accessing
-   * the public methods and properties of the component.
+   * Gets the component ref.
    */
-  componentRef?: (component: IOverlay) => void;
+  componentRef?: (component: IOverlayProps) => void;
+
+  /**
+   * Call to provide customized styling that will layer on top of the variant rules
+   */
+  getStyles?: IStyleFunction<IOverlayStyleProps, IOverlayStyles>;
+
+  /**
+   * Theme provided by HOC.
+   */
+  theme?: ITheme;
+
+  /**
+   * Additional css class to apply to the Overlay
+   * @defaultvalue undefined
+   */
+  className?: string;
 
   /**
    * Whether to use the dark-themed overlay.
    * @defaultvalue false
    */
   isDarkThemed?: boolean;
+
+  onClick?: () => void;
+}
+
+export interface IOverlayStyleProps {
+  /**
+   * Accept theme prop.
+   */
+  theme: ITheme;
+
+  /**
+   * Accept custom classNames
+   */
+  className?: string;
+
+  /**
+   * Is overlay visible
+   */
+  isNone?: boolean;
+
+  /**
+   * Is overlay dark themed
+   */
+  isDarkThemed?: boolean;
+}
+
+export interface IOverlayStyles {
+  /**
+   * Style for the root element.
+   */
+  root?: IStyle;
 }

packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Dark.Example.tsx

@@ -1,9 +1,18 @@
 import * as React from 'react';
-import { autobind } from 'office-ui-fabric-react/lib/Utilities';
+import {
+  autobind,
+  IStyleFunction,
+  classNamesFunction
+} from '../../../Utilities';
 import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
-import { Overlay } from 'office-ui-fabric-react/lib/Overlay';
 
-import './Overlay.Example.scss';
+import { Overlay } from '../Overlay';
+
+import { getStyles, IOverlayExampleStyles } from './Overlay.Example.styles';
+
+export interface IOverlayDarkExampleProps {
+  getStyles?: IStyleFunction<{}, IOverlayExampleStyles>;
+}
 
 export class OverlayDarkExample extends React.Component<{}, {
   isOverlayVisible: boolean;
@@ -15,7 +24,9 @@ export class OverlayDarkExample extends React.Component<{}, {
   }
 
   public render() {
-    let { isOverlayVisible } = this.state;
+    const { isOverlayVisible } = this.state;
+    const getClassNames = classNamesFunction<{}, IOverlayExampleStyles>();
+    const classNames = getClassNames(getStyles);
 
     return (
       <div>
@@ -28,7 +39,7 @@ export class OverlayDarkExample extends React.Component<{}, {
             isDarkThemed={ true }
             onClick={ this._setVisibilityFalse }
           >
-            <div className='OverlayExample-content'>
+            <div className={ classNames.root }>
               <p>I am content within the overlay.</p>
             </div>
           </Overlay>

packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Example.styles.ts

@@ -0,0 +1,23 @@
+import { IStyle } from '../../../Styling';
+
+export interface IOverlayExampleStyles {
+  root: IStyle;
+}
+
+export const getStyles = (): IOverlayExampleStyles => {
+
+  return ({
+    root: [
+      'OverlayExample-content',
+      {
+        background: 'blue',
+        bottom: '0',
+        color: 'white',
+        left: '0',
+        padding: '10px',
+        position: 'absolute',
+        right: '0',
+      }
+    ]
+  });
+};