Dialog: Converting to mergeStyles part 2 - style conversion

common/changes/@uifabric/fabric-website/mergeStyles-Dialog-round2_2018-03-08-01-38.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "",
+      "packageName": "@uifabric/fabric-website",
+      "type": "none"
+    }
+  ],
+  "packageName": "@uifabric/fabric-website",
+  "email": "v-jojanz@microsoft.com"
+}

common/changes/@uifabric/utilities/mergeStyles-Dialog-round2_2018-03-08-01-38.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/utilities",
+      "comment": "Add hoistStatics function to withResponsiveMode decorator.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/utilities",
+  "email": "v-jojanz@microsoft.com"
+}

common/changes/office-ui-fabric-react/mergeStyles-Dialog-round2_2018-03-02-01-05.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Dialog: convert to mergeStyles part 2.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "v-jojanz@microsoft.com"
+}

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

@@ -1,15 +1,20 @@
 import * as React from 'react';
 import {
   BaseComponent,
-  css,
+  classNamesFunction,
+  customizable,
   getId
 } from '../../Utilities';
-import { IDialogProps } from './Dialog.types';
+import {
+  IDialogProps,
+  IDialogStyleProps,
+  IDialogStyles,
+} from './Dialog.types';
 import { DialogType, IDialogContentProps } from './DialogContent.types';
 import { Modal, IModalProps } from '../../Modal';
 import { withResponsiveMode } from '../../utilities/decorators/withResponsiveMode';
-import * as stylesImport from './Dialog.scss';
-const styles: any = stylesImport;
+
+const getClassNames = classNamesFunction<IDialogStyleProps, IDialogStyles>();
 
 import { DialogContent } from './DialogContent';
 
@@ -26,6 +31,7 @@ const DefaultDialogContentProps: IDialogContentProps = {
   topButtonsProps: [],
 };
 
+@customizable('Dialog', ['theme'])
 @withResponsiveMode
 export class DialogBase extends BaseComponent<IDialogProps, {}> {
   public static defaultProps: IDialogProps = {
@@ -62,26 +68,28 @@ export class DialogBase extends BaseComponent<IDialogProps, {}> {
 
   public render() {
     const {
+      className,
+      containerClassName,
+      contentClassName,
       elementToFocusOnDismiss,
       firstFocusableSelector,
       forceFocusInsideTrap,
+      getStyles,
+      hidden,
       ignoreExternalFocusing,
       isBlocking,
       isClickableOutsideFocusTrap,
       isDarkOverlay,
       isOpen,
-      className,
       onDismiss,
       onDismissed,
       onLayerDidMount,
       responsiveMode,
       subText,
+      theme,
       title,
-      type,
-      contentClassName,
       topButtonsProps,
-      containerClassName,
-      hidden
+      type,
     } = this.props;
 
     const modalProps = {
@@ -91,9 +99,16 @@ export class DialogBase extends BaseComponent<IDialogProps, {}> {
 
     const dialogContentProps: IDialogContentProps = {
       ...DefaultDialogContentProps,
-      ...this.props.dialogContentProps
+      ...this.props.dialogContentProps,
     };
 
+    const classNames = getClassNames(getStyles!, {
+      theme: theme!,
+      className: className || modalProps!.className,
+      containerClassName: containerClassName || modalProps!.containerClassName,
+      hidden,
+    });
+
     return (
       <Modal
         elementToFocusOnDismiss={ elementToFocusOnDismiss }
@@ -108,8 +123,8 @@ export class DialogBase extends BaseComponent<IDialogProps, {}> {
         isDarkOverlay={ isDarkOverlay !== undefined ? isDarkOverlay : modalProps!.isDarkOverlay }
         isBlocking={ isBlocking !== undefined ? isBlocking : modalProps!.isBlocking }
         isOpen={ isOpen !== undefined ? isOpen : !hidden }
-        className={ css('ms-Dialog', className ? className : modalProps!.className) }
-        containerClassName={ css(styles.main, containerClassName ? containerClassName : modalProps!.containerClassName) }
+        className={ classNames.root }
+        containerClassName={ classNames.main }
         onDismiss={ onDismiss ? onDismiss : modalProps!.onDismiss }
         subtitleAriaId={ this._getSubTextId() }
         titleAriaId={ this._getTitleTextId() }
@@ -123,7 +138,7 @@ export class DialogBase extends BaseComponent<IDialogProps, {}> {
           topButtonsProps={ topButtonsProps ? topButtonsProps : dialogContentProps!.topButtonsProps }
           type={ type !== undefined ? type : dialogContentProps!.type }
           onDismiss={ onDismiss ? onDismiss : dialogContentProps!.onDismiss }
-          className={ css(contentClassName ? contentClassName : dialogContentProps!.className) }
+          className={ contentClassName || dialogContentProps!.className }
           { ...dialogContentProps }
         >
           { this.props.children }

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

@@ -1,17 +1,39 @@
 import { IDialogStyleProps, IDialogStyles } from './Dialog.types';
+import {
+  ScreenWidthMinMedium,
+} from '../../Styling';
 
 export const getStyles = (
   props: IDialogStyleProps
 ): IDialogStyles => {
+  const {
+    className,
+    containerClassName,
+    dialogDefaultMinWidth = '288px',
+    dialogDefaultMaxWidth = '340px',
+    hidden,
+  } = props;
 
   return ({
     root: [
       'ms-Dialog',
-      {
-        // Insert css properties
-      }
+      className,
     ],
 
-    // Insert className styles
+    main: [
+      {
+        width: dialogDefaultMinWidth,
+
+        selectors: {
+          [`@media (min-width: ${ScreenWidthMinMedium}px)`]: {
+            width: 'auto',
+            maxWidth: dialogDefaultMaxWidth,
+            minWidth: dialogDefaultMinWidth,
+          }
+        }
+      },
+      !hidden && { display: 'flex' },
+      containerClassName,
+    ]
   });
 };

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

@@ -157,14 +157,41 @@ export interface IDialogStyleProps {
    */
   className?: string;
 
-  // Insert Dialog style props below
+  /**
+  * Optional override for container class
+  * @deprecated Pass through via modalProps.className instead
+  */
+  containerClassName?: string;
+
+  /**
+  * Optional override content class
+  * @deprecated Pass through via dialogContentProps instead as className
+  */
+  contentClassName?: string;
+
+  /**
+  * Whether the dialog is hidden.
+  * @default false
+  */
+  hidden?: boolean;
+
+  /**
+   * Default min-width for the dialog box.
+   * @defaultvalue '288px'
+   */
+  dialogDefaultMinWidth?: string;
+
+  /**
+   * Default max-width for the dialog box.
+   * @defaultvalue '340px'
+   */
+  dialogDefaultMaxWidth?: string;
 }
 
 export interface IDialogStyles {
   /**
    * Style for the root element.
    */
   root: IStyle;
-
-  // Insert Dialog classNames below
+  main: IStyle;
 }