Dialog: Converting to mergeStyles part 1 - file structure.

common/changes/office-ui-fabric-react/mergeStyles-Dialog-round1_2018-02-21-00-19.json

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

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

@@ -0,0 +1,146 @@
+import * as React from 'react';
+import {
+  BaseComponent,
+  css,
+  getId
+} from '../../Utilities';
+import { IDialogProps } from './Dialog.types';
+import { DialogType } from './DialogContent.types';
+import { Modal } from '../../Modal';
+import { withResponsiveMode } from '../../utilities/decorators/withResponsiveMode';
+import * as stylesImport from './Dialog.scss';
+const styles: any = stylesImport;
+
+import { DialogContent } from './DialogContent';
+
+@withResponsiveMode
+export class DialogBase extends BaseComponent<IDialogProps, {}> {
+  public static defaultProps: IDialogProps = {
+    modalProps: {
+      isDarkOverlay: true,
+      isBlocking: false,
+      className: '',
+      containerClassName: ''
+    },
+    dialogContentProps: {
+      type: DialogType.normal,
+      className: '',
+      topButtonsProps: [],
+    },
+    hidden: true,
+  };
+
+  private _id: string;
+  private _defaultTitleTextId: string;
+  private _defaultSubTextId: string;
+
+  constructor(props: IDialogProps) {
+    super(props);
+
+    this._id = getId('Dialog');
+    this._defaultTitleTextId = this._id + '-title';
+    this._defaultSubTextId = this._id + '-subText';
+
+    this._warnDeprecations({
+      'isOpen': 'hidden',
+      'type': 'dialogContentProps.type',
+      'subText': 'dialogContentProps.subText',
+      'contentClassName': 'dialogContentProps.className',
+      'topButtonsProps': 'dialogContentProps.topButtonsProps',
+      'className': 'modalProps.className',
+      'isDarkOverlay': 'modalProps.isDarkOverlay',
+      'isBlocking': 'modalProps.isBlocking',
+      'containerClassName': 'modalProps.containerClassName',
+      'onDismissed': 'modalProps.onDismissed',
+      'onLayerDidMount': 'modalProps.onLayerDidMount',
+      'ariaDescribedById': 'modalProps.subtitleAriaId',
+      'ariaLabelledById': 'modalProps.titleAriaId'
+    });
+  }
+
+  public render() {
+    const {
+      elementToFocusOnDismiss,
+      firstFocusableSelector,
+      forceFocusInsideTrap,
+      ignoreExternalFocusing,
+      isBlocking,
+      isClickableOutsideFocusTrap,
+      isDarkOverlay,
+      isOpen,
+      className,
+      onDismiss,
+      onDismissed,
+      onLayerDidMount,
+      responsiveMode,
+      subText,
+      title,
+      type,
+      contentClassName,
+      topButtonsProps,
+      dialogContentProps,
+      modalProps,
+      containerClassName,
+      hidden
+    } = this.props;
+
+    return (
+      <Modal
+        elementToFocusOnDismiss={ elementToFocusOnDismiss }
+        firstFocusableSelector={ firstFocusableSelector }
+        forceFocusInsideTrap={ forceFocusInsideTrap }
+        ignoreExternalFocusing={ ignoreExternalFocusing }
+        isClickableOutsideFocusTrap={ isClickableOutsideFocusTrap }
+        onDismissed={ onDismissed }
+        onLayerDidMount={ onLayerDidMount }
+        responsiveMode={ responsiveMode }
+        { ...modalProps }
+        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) }
+        onDismiss={ onDismiss ? onDismiss : modalProps!.onDismiss }
+        subtitleAriaId={ this._getSubTextId() }
+        titleAriaId={ this._getTitleTextId() }
+      >
+        <DialogContent
+          titleId={ this._defaultTitleTextId }
+          subTextId={ this._defaultSubTextId }
+          title={ title }
+          subText={ subText }
+          showCloseButton={ isBlocking !== undefined ? !isBlocking : !modalProps!.isBlocking }
+          topButtonsProps={ topButtonsProps ? topButtonsProps : dialogContentProps!.topButtonsProps }
+          type={ type !== undefined ? type : dialogContentProps!.type }
+          onDismiss={ onDismiss ? onDismiss : dialogContentProps!.onDismiss }
+          className={ css(contentClassName ? contentClassName : dialogContentProps!.className) }
+          { ...dialogContentProps }
+        >
+          { this.props.children }
+        </DialogContent>
+      </Modal>
+    );
+  }
+
+  private _getSubTextId = (): string | undefined => {
+    const { ariaDescribedById, modalProps, dialogContentProps, subText } = this.props;
+    let id = ariaDescribedById || (modalProps && modalProps.subtitleAriaId);
+
+    if (!id) {
+      id = (subText || (dialogContentProps && dialogContentProps.subText)) && this._defaultSubTextId;
+    }
+
+    return id;
+  }
+
+  private _getTitleTextId = (): string | undefined => {
+    const { ariaLabelledById, modalProps, dialogContentProps, title } = this.props;
+    let id = ariaLabelledById || (modalProps && modalProps.titleAriaId);
+
+    if (!id) {
+      id = (title || (dialogContentProps && dialogContentProps.title)) && this._defaultTitleTextId;
+    }
+
+    return id;
+  }
+}

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

@@ -0,0 +1,28 @@
+import { IDialogStyleProps, IDialogStyles } from './Dialog.types';
+import {
+  IStyle,
+  ITheme,
+} from '../../Styling';
+
+export const getStyles = (
+  props: IDialogStyleProps
+): IDialogStyles => {
+  const {
+    className,
+    theme,
+  } = props;
+
+  const { palette, semanticColors } = theme;
+
+  return ({
+    root: [
+      'ms-Dialog',
+      {
+        // Insert css properties
+
+      }
+    ],
+
+    // Insert className styles
+  });
+};

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

@@ -5,7 +5,7 @@ import * as renderer from 'react-test-renderer';
 
 import { mount } from 'enzyme';
 
-import { Dialog } from './Dialog';
+import { DialogBase } from './Dialog.base';
 import { DialogContent } from './DialogContent';
 import { DialogType } from './DialogContent.types';
 
@@ -26,7 +26,7 @@ describe('Dialog', () => {
     };
 
     const wrapper = mount(
-      <Dialog
+      <DialogBase
         hidden={ false }
         modalProps={ { onDismissed: handleDismissed } }
       />
@@ -51,7 +51,7 @@ describe('Dialog', () => {
 
   it('Properly attaches auto-generated aria attributes IDs', () => {
     const wrapper = mount(
-      <Dialog
+      <DialogBase
         hidden={ false }
         modalProps={ { onDismissed: () => {/* no-op */ } } }
         dialogContentProps={ {
@@ -72,7 +72,7 @@ describe('Dialog', () => {
   it('Properly attaches IDs when aria-describedby is passed', () => {
     const subTextAriaId = 'subtextariaid';
     const wrapper = mount(
-      <Dialog
+      <DialogBase
         hidden={ false }
         modalProps={ {
           onDismissed: () => {/* no-op */ },
@@ -96,7 +96,7 @@ describe('Dialog', () => {
   it('Properly attaches IDs when aria-labelledby is passed', () => {
     const titleAriaId = 'titleariaid';
     const wrapper = mount(
-      <Dialog
+      <DialogBase
         hidden={ false }
         modalProps={ {
           onDismissed: () => {/* no-op */ },

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

@@ -1,146 +1,13 @@
-import * as React from 'react';
+import { styled } from '../../Utilities';
 import {
-  BaseComponent,
-  css,
-  getId
-} from '../../Utilities';
-import { IDialogProps } from './Dialog.types';
-import { DialogType } from './DialogContent.types';
-import { Modal } from '../../Modal';
-import { withResponsiveMode } from '../../utilities/decorators/withResponsiveMode';
-import * as stylesImport from './Dialog.scss';
-const styles: any = stylesImport;
-
-import { DialogContent } from './DialogContent';
-
-@withResponsiveMode
-export class Dialog extends BaseComponent<IDialogProps, {}> {
-  public static defaultProps: IDialogProps = {
-    modalProps: {
-      isDarkOverlay: true,
-      isBlocking: false,
-      className: '',
-      containerClassName: ''
-    },
-    dialogContentProps: {
-      type: DialogType.normal,
-      className: '',
-      topButtonsProps: [],
-    },
-    hidden: true,
-  };
-
-  private _id: string;
-  private _defaultTitleTextId: string;
-  private _defaultSubTextId: string;
-
-  constructor(props: IDialogProps) {
-    super(props);
-
-    this._id = getId('Dialog');
-    this._defaultTitleTextId = this._id + '-title';
-    this._defaultSubTextId = this._id + '-subText';
-
-    this._warnDeprecations({
-      'isOpen': 'hidden',
-      'type': 'dialogContentProps.type',
-      'subText': 'dialogContentProps.subText',
-      'contentClassName': 'dialogContentProps.className',
-      'topButtonsProps': 'dialogContentProps.topButtonsProps',
-      'className': 'modalProps.className',
-      'isDarkOverlay': 'modalProps.isDarkOverlay',
-      'isBlocking': 'modalProps.isBlocking',
-      'containerClassName': 'modalProps.containerClassName',
-      'onDismissed': 'modalProps.onDismissed',
-      'onLayerDidMount': 'modalProps.onLayerDidMount',
-      'ariaDescribedById': 'modalProps.subtitleAriaId',
-      'ariaLabelledById': 'modalProps.titleAriaId'
-    });
-  }
-
-  public render() {
-    const {
-      elementToFocusOnDismiss,
-      firstFocusableSelector,
-      forceFocusInsideTrap,
-      ignoreExternalFocusing,
-      isBlocking,
-      isClickableOutsideFocusTrap,
-      isDarkOverlay,
-      isOpen,
-      className,
-      onDismiss,
-      onDismissed,
-      onLayerDidMount,
-      responsiveMode,
-      subText,
-      title,
-      type,
-      contentClassName,
-      topButtonsProps,
-      dialogContentProps,
-      modalProps,
-      containerClassName,
-      hidden
-    } = this.props;
-
-    return (
-      <Modal
-        elementToFocusOnDismiss={ elementToFocusOnDismiss }
-        firstFocusableSelector={ firstFocusableSelector }
-        forceFocusInsideTrap={ forceFocusInsideTrap }
-        ignoreExternalFocusing={ ignoreExternalFocusing }
-        isClickableOutsideFocusTrap={ isClickableOutsideFocusTrap }
-        onDismissed={ onDismissed }
-        onLayerDidMount={ onLayerDidMount }
-        responsiveMode={ responsiveMode }
-        { ...modalProps }
-        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) }
-        onDismiss={ onDismiss ? onDismiss : modalProps!.onDismiss }
-        subtitleAriaId={ this._getSubTextId() }
-        titleAriaId={ this._getTitleTextId() }
-      >
-        <DialogContent
-          titleId={ this._defaultTitleTextId }
-          subTextId={ this._defaultSubTextId }
-          title={ title }
-          subText={ subText }
-          showCloseButton={ isBlocking !== undefined ? !isBlocking : !modalProps!.isBlocking }
-          topButtonsProps={ topButtonsProps ? topButtonsProps : dialogContentProps!.topButtonsProps }
-          type={ type !== undefined ? type : dialogContentProps!.type }
-          onDismiss={ onDismiss ? onDismiss : dialogContentProps!.onDismiss }
-          className={ css(contentClassName ? contentClassName : dialogContentProps!.className) }
-          { ...dialogContentProps }
-        >
-          { this.props.children }
-        </DialogContent>
-      </Modal>
-    );
-  }
-
-  private _getSubTextId = (): string | undefined => {
-    const { ariaDescribedById, modalProps, dialogContentProps, subText } = this.props;
-    let id = ariaDescribedById || (modalProps && modalProps.subtitleAriaId);
-
-    if (!id) {
-      id = (subText || (dialogContentProps && dialogContentProps.subText)) && this._defaultSubTextId;
-    }
-
-    return id;
-  }
-
-  private _getTitleTextId = (): string | undefined => {
-    const { ariaLabelledById, modalProps, dialogContentProps, title } = this.props;
-    let id = ariaLabelledById || (modalProps && modalProps.titleAriaId);
-
-    if (!id) {
-      id = (title || (dialogContentProps && dialogContentProps.title)) && this._defaultTitleTextId;
-    }
-
-    return id;
-  }
-}
+  IDialogProps,
+  IDialogStyleProps,
+  IDialogStyles
+} from './Dialog.types';
+import { DialogBase } from './Dialog.base';
+import { getStyles } from './Dialog.styles';
+
+export const Dialog = styled<IDialogProps, IDialogStyleProps, IDialogStyles>(
+  DialogBase,
+  getStyles
+);