Dialog: Converting to mergeStyles part 2 - style conversion

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,21 @@
 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 * as stylesImport from './Dialog.scss';
+// const styles: any = stylesImport;
 
 import { DialogContent } from './DialogContent';
 
@@ -26,6 +32,7 @@ const DefaultDialogContentProps: IDialogContentProps = {
   topButtonsProps: [],
 };
 
+@customizable('Dialog', ['theme'])
 @withResponsiveMode
 export class DialogBase extends BaseComponent<IDialogProps, {}> {
   public static defaultProps: IDialogProps = {
@@ -62,38 +69,52 @@ export class DialogBase extends BaseComponent<IDialogProps, {}> {
 
   public render() {
     const {
+      className,
+      containerClassName: containerClassNameProp,
+      contentClassName: contentClassNameProp,
       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 = {
       ...DefaultModalProps,
       ...this.props.modalProps
     };
 
+    const containerClassName = containerClassNameProp ? containerClassNameProp : modalProps!.containerClassName;
+
     const dialogContentProps: IDialogContentProps = {
       ...DefaultDialogContentProps,
-      ...this.props.dialogContentProps
+      ...this.props.dialogContentProps,
     };
 
+    const contentClassName = contentClassNameProp ? contentClassNameProp : dialogContentProps!.className;
+
+    const classNames = getClassNames(getStyles!, {
+      theme: theme!,
+      className,
+      containerClassName,
+      contentClassName,
+      hidden,
+    });
+
     return (
       <Modal
         elementToFocusOnDismiss={ elementToFocusOnDismiss }
@@ -108,8 +129,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 +144,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 }
         >
           { this.props.children }

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

@@ -2,27 +2,44 @@ import { IDialogStyleProps, IDialogStyles } from './Dialog.types';
 import {
   IStyle,
   ITheme,
+  FontWeights,
+  ScreenWidthMinMedium,
 } from '../../Styling';
 
 export const getStyles = (
   props: IDialogStyleProps
 ): IDialogStyles => {
   const {
     className,
+    containerClassName,
+    contentClassName,
     theme,
+    hidden,
   } = props;
 
-  const { palette, semanticColors } = theme;
+  const dialogDefaultMinWidth = '288px';
+  const dialogDefaultMaxWidth = '340px';
 
   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,29 @@ 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;
 }
 
 export interface IDialogStyles {
   /**
    * Style for the root element.
    */
   root: IStyle;
-
-  // Insert Dialog classNames below
+  main: IStyle;
 }

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

@@ -1,15 +1,22 @@
 import * as React from 'react';
 import {
   BaseComponent,
-  css,
+  classNamesFunction,
+  customizable,
 } from '../../Utilities';
-import { IDialogContentProps, DialogType } from './DialogContent.types';
+import {
+  DialogType,
+  IDialogContentProps,
+  IDialogContentStyleProps,
+  IDialogContentStyles,
+} from './DialogContent.types';
 import { IconButton } from '../../Button';
 import { DialogFooter } from './DialogFooter';
 import { withResponsiveMode } from '../../utilities/decorators/withResponsiveMode';
-import * as stylesImport from './Dialog.scss';
-const styles: any = stylesImport;
 
+const getClassNames = classNamesFunction<IDialogContentStyleProps, IDialogContentStyles>();
+
+@customizable('DialogContent', ['theme'])
 @withResponsiveMode
 export class DialogContentBase extends BaseComponent<IDialogContentProps, {}> {
 
@@ -27,49 +34,50 @@ export class DialogContentBase extends BaseComponent<IDialogContentProps, {}> {
   public render() {
     const {
       showCloseButton,
+      className,
       closeButtonAriaLabel,
       onDismiss,
       subTextId,
       subText,
       titleId,
       title,
-      type
+      type,
+      getStyles,
+      theme,
     } = this.props;
 
+    const classNames = getClassNames(getStyles!, {
+      theme: theme!,
+      className,
+      type
+    });
+
     const groupings = this._groupChildren();
     let subTextContent;
     if (subText) {
-      subTextContent = <p className={ css('ms-Dialog-subText', styles.subText) } id={ subTextId }>{ subText }</p>;
+      subTextContent = <p className={ classNames.subText } id={ subTextId }>{ subText }</p>;
     }
 
-    const contentClassName = css(this.props.className, {
-      ['ms-Dialog--lgHeader ' + styles.isLargeHeader]: type === DialogType.largeHeader,
-      ['ms-Dialog--close ' + styles.isClose]: type === DialogType.close,
-    });
-
     return (
-      <div className={ css(contentClassName) }>
-        <div className={ css('ms-Dialog-header', styles.header) }>
-          <p className={ css('ms-Dialog-title', styles.title) } id={ titleId } role='heading'>{ title }</p>
-          <div className={ css('ms-Dialog-topButton', styles.topButton) }>
+      <div className={ classNames.content }>
+        <div className={ classNames.header }>
+          <p className={ classNames.title } id={ titleId } role='heading'>{ title }</p>
+          <div className={ classNames.topButton }>
             { this.props.topButtonsProps!.map((props) => (
               <IconButton { ...props } />
             )) }
             { (type === DialogType.close || (showCloseButton && type !== DialogType.largeHeader)) &&
               <IconButton
-                className={ css(
-                  'ms-Dialog-button ms-Dialog-button--close',
-                  styles.button
-                ) }
+                className={ classNames.button }
                 iconProps={ { iconName: 'Cancel' } }
                 ariaLabel={ closeButtonAriaLabel }
                 onClick={ onDismiss as any }
               />
             }
           </div>
         </div>
-        <div className={ css('ms-Dialog-inner', styles.inner) }>
-          <div className={ css('ms-Dialog-content', styles.content, this.props.className) }>
+        <div className={ classNames.inner }>
+          <div className={ classNames.innerContent }>
             { subTextContent }
             { groupings.contents }
           </div>