From 9bf77a00de3e5aa5b531a53e85962113f2de375e Mon Sep 17 00:00:00 2001
From: David Zearing <dzearing@microsoft.com>
Date: Mon, 27 Feb 2017 16:02:06 -0800
Subject: [PATCH] Updates to Panel for module css.

---
 .../src/components/Panel/Panel.scss           | 464 ++++++++----------
 .../src/components/Panel/Panel.tsx            |  86 ++--
 2 files changed, 252 insertions(+), 298 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/Panel/Panel.scss b/packages/office-ui-fabric-react/src/components/Panel/Panel.scss
index 00dfd4c578837..746e1309b8d24 100644
--- a/packages/office-ui-fabric-react/src/components/Panel/Panel.scss
+++ b/packages/office-ui-fabric-react/src/components/Panel/Panel.scss
@@ -1,324 +1,248 @@
 @import '../../common/common';
 
-:global {
-  .ms-Panel {
-    /** bug: panel should not ignore pointer events. */
-    pointer-events: inherit;
-    overflow: hidden;
-  }
+.root {
+  /** bug: panel should not ignore pointer events. */
+  pointer-events: inherit;
+  overflow: hidden;
+}
 
-  .ms-Panel .ms-Panel-main {
-    position: absolute;
+.root .main {
+  position: absolute;
 
-    overflow-x: hidden;
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-  }
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
 
-  // [thomas.oconnor] Instead of using the current Fabric CSS implementation for the Panel,
-  // we are recreating it here. The Fabic Panel will be undergoing some redesign work in the
-  // near future.
-  // This implementation is RTL friendly, and divides the classes so that the panel types
-  // and left/right animations are in different classes. It also separates out the design
-  // rules/restrictions for Panel usage so that it becomes a generic Panel. It is up to the
-  // user to use the Panels properly (smLeft panels are for left navs, smFixed panels are for
-  // drop down menus on mobile, knowing when it's appropriate to have a command bar or not)
-  //
-  // Here is the OneNote design document for this implementation of the Panel:
-  //
-  // https://msft.spoppe.com/collab/OSS%20Design/pcp/_layouts/15/WopiFrame.aspx?sourcedoc={9a356b27-4138-491d-b2f6-6b3e442fc6a5}&action=edit&wd=target%28%2F%2FDesign%2FToolkit.one%7C61ef427b-c38f-4ee3-a215-67758011eb67%2FSurface%20Behavior%7C376ed8fd-33f0-4661-85aa-feec8a963fa0%2F%29
-  //
-
-  //
-  // Office UI Fabric
-  // --------------------------------------------------
-  // Panel styles
-
-  $Panel-width-xs: 272px;
-  $Panel-width-sm: 340px;
-  $Panel-width-md: 643px;
-  $Panel-width-lg: 940px;
-  $Panel-margin-md: 48px;
-  $Panel-margin-lg: 428px;
-  $Panel-margin-xl: 176px;
-  $CommandBarHeight: 40px;
-
-  .ms-Panel {
+// [thomas.oconnor] Instead of using the current Fabric CSS implementation for the Panel,
+// we are recreating it here. The Fabic Panel will be undergoing some redesign work in the
+// near future.
+// This implementation is RTL friendly, and divides the classes so that the panel types
+// and left/right animations are in different classes. It also separates out the design
+// rules/restrictions for Panel usage so that it becomes a generic Panel. It is up to the
+// user to use the Panels properly (smLeft panels are for left navs, smFixed panels are for
+// drop down menus on mobile, knowing when it's appropriate to have a command bar or not)
+//
+// Here is the OneNote design document for this implementation of the Panel:
+//
+// https://msft.spoppe.com/collab/OSS%20Design/pcp/_layouts/15/WopiFrame.aspx?sourcedoc={9a356b27-4138-491d-b2f6-6b3e442fc6a5}&action=edit&wd=target%28%2F%2FDesign%2FToolkit.one%7C61ef427b-c38f-4ee3-a215-67758011eb67%2FSurface%20Behavior%7C376ed8fd-33f0-4661-85aa-feec8a963fa0%2F%29
+//
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Panel styles
+
+$Panel-width-xs: 272px;
+$Panel-width-sm: 340px;
+$Panel-width-md: 643px;
+$Panel-width-lg: 940px;
+$Panel-margin-md: 48px;
+$Panel-margin-lg: 428px;
+$Panel-margin-xl: 176px;
+$CommandBarHeight: 40px;
+
+.root {
+  display: none;
+  pointer-events: none;
+
+  // Overlay used within panel
+  .overlay {
     display: none;
     pointer-events: none;
+    opacity: 1;
+    cursor: pointer;
+    transition: opacity $ms-duration3 $ms-ease1;
+  }
+}
 
-    // Overlay used within panel
-    .ms-Overlay {
-      display: none;
-      pointer-events: none;
-      opacity: 1;
-      cursor: pointer;
-      transition: opacity $ms-duration3 $ms-ease1;
-    }
+// The panel itself, where the content goes.
+.main {
+  background-color: $ms-color-white;
+  bottom: 0;
+  position: fixed;
+  @include right(0);
+  top: 0;
+  display: none;
+  width: 100%;
+
+  // Medium screens and up - (anchored right, fixed width)
+  @media (min-width: $ms-screen-md-min) {
+    border-left: 1px solid $ms-color-neutralLight;
+    border-right: 1px solid $ms-color-neutralLight;
+    pointer-events: auto;
+    width: $Panel-width-sm;
+    @include drop-shadow(-30px, 0px, 30px, -30px, .2);
+    @include left(auto);
   }
+}
 
-  // The panel itself, where the content goes.
-  .ms-Panel-main {
-    background-color: $ms-color-white;
-    bottom: 0;
-    position: fixed;
-    @include right(0);
-    top: 0;
-    display: none;
-    width: 100%;
+//== Modifier: Small panel (anchored right, fixed width)
+//
+.root.rootIsSmall {
+  .main {
+    width: $Panel-width-xs;
 
-    // Medium screens and up - (anchored right, fixed width)
     @media (min-width: $ms-screen-md-min) {
-      border-left: 1px solid $ms-color-neutralLight;
-      border-right: 1px solid $ms-color-neutralLight;
-      pointer-events: auto;
       width: $Panel-width-sm;
-      @include drop-shadow(-30px, 0px, 30px, -30px, .2);
-      @include left(auto);
     }
   }
+}
 
-  //== Modifier: Small panel (anchored right, fixed width)
-  //
-  .ms-Panel.ms-Panel--sm {
-    .ms-Panel-main {
-      width: $Panel-width-xs;
-
-      @media (min-width: $ms-screen-md-min) {
-        width: $Panel-width-sm;
-      }
-    }
+//== Modifier: Small panel (anchored left, fixed width)
+//
+.root.rootIsSmallLeft {
+  .main {
+    @include right(auto);
+    @include left(0);
+    width: $Panel-width-xs;
   }
+}
 
-  //== Modifier: Small panel (anchored left, fixed width)
-  //
-  .ms-Panel.ms-Panel--smLeft {
-    .ms-Panel-main {
-      @include right(auto);
-      @include left(0);
-      width: $Panel-width-xs;
-    }
+//== Modifier: Small panel, full screen (anchored left, fluid width)
+// Note: This panel should only be used for dropdown menus on small screens.
+//
+.root.rootIsSmallFluid {
+  .main {
+    width: 100%;
   }
+}
 
-  //== Modifier: Small panel, full screen (anchored left, fluid width)
-  // Note: This panel should only be used for dropdown menus on small screens.
-  //
-  .ms-Panel.ms-Panel--smFluid {
-    .ms-Panel-main {
-      width: 100%;
+//== Modifier: Medium, Large, Extra Largs panels (anchored right, fluid width)
+//
+.root.rootIsMedium,
+.root.rootIsLarge,
+.root.rootIsXLarge {
+  .main {
+    @media (min-width: $ms-screen-lg-min) {
+      @include left($Panel-margin-md);
+      width: auto;
     }
   }
+}
 
-  //== Modifier: Medium, Large, Extra Largs panels (anchored right, fluid width)
-  //
-  .ms-Panel.ms-Panel--md,
-  .ms-Panel.ms-Panel--lg,
-  .ms-Panel.ms-Panel--xl {
-    .ms-Panel-main {
-      @media (min-width: $ms-screen-lg-min) {
-        @include left($Panel-margin-md);
-        width: auto;
-      }
+//== Modifier: Medium panel (anchored right, fixed width)
+//
+.root.rootIsMedium {
+  .main {
+    @media (min-width: $ms-screen-xl-min) {
+      @include left(auto);
+      width: $Panel-width-md;
     }
   }
+}
 
-  //== Modifier: Medium panel (anchored right, fixed width)
-  //
-  .ms-Panel.ms-Panel--md {
-    .ms-Panel-main {
-      @media (min-width: $ms-screen-xl-min) {
-        @include left(auto);
-        width: $Panel-width-md;
-      }
+//== Modifier: Large panel (anchored right, fluid width)
+//
+.root.rootIsLarge {
+  .main {
+    @media (min-width: $ms-screen-xxl-min) {
+      @include left($Panel-margin-lg);
     }
   }
+}
 
-  //== Modifier: Large panel (anchored right, fluid width)
-  //
-  .ms-Panel.ms-Panel--lg {
-    .ms-Panel-main {
-      @media (min-width: $ms-screen-xxl-min) {
-        @include left($Panel-margin-lg);
-      }
+//== Modifier: Large fixed panel (anchored right, fixed width)
+//
+.root.rootIsLarge.rootIsFixed {
+  .main {
+    @media (min-width: $ms-screen-xxl-min) {
+      @include left(auto);
+      width: $Panel-width-lg;
     }
   }
+}
 
-  //== Modifier: Large fixed panel (anchored right, fixed width)
-  //
-  .ms-Panel.ms-Panel--lg.ms-Panel--fixed {
-    .ms-Panel-main {
-      @media (min-width: $ms-screen-xxl-min) {
-        @include left(auto);
-        width: $Panel-width-lg;
-      }
+//== Modifier: XLarge panel (anchored right, fluid width)
+//
+.root.rootIsXLarge {
+  .main {
+    @media (min-width: $ms-screen-xxl-min) {
+      @include left($Panel-margin-xl);
     }
   }
+}
 
-  //== Modifier: XLarge panel (anchored right, fluid width)
-  //
-  .ms-Panel.ms-Panel--xl {
-    .ms-Panel-main {
-      @media (min-width: $ms-screen-xxl-min) {
-        @include left($Panel-margin-xl);
-      }
-    }
-  }
+//== State: When the panel is open.
+//
+.root.rootIsOpen {
+  display: block;
 
-  //== State: When the panel is open.
-  //
-  .ms-Panel.is-open {
+  .main {
+    opacity: 1;
+    pointer-events: auto;
     display: block;
+  }
 
-    .ms-Panel-main {
-      opacity: 1;
-      pointer-events: auto;
-      display: block;
-    }
-
-    .ms-Overlay {
-      display: block;
-      pointer-events: auto;
-
-      @media screen and (-ms-high-contrast: active) {
-        opacity: 0;
-      }
-    }
-
-    &.ms-Panel-animateIn {
-      .ms-Panel-main {
-        @include ms-u-fadeIn100;
-      }
-    }
-
-    &.ms-Panel-animateOut {
-      .ms-Panel-main {
-        @include ms-u-fadeOut100;
-      }
-
-      .ms-Overlay {
-        display: none;
-      }
-    }
+  .overlay {
+    cursor: pointer;
+    display: block;
+    pointer-events: auto;
 
-    // Medium screens and up
-    @media (min-width: $ms-screen-md-min) {
-      // Animations -- Default (anchored right)
-      &.ms-Panel--openRight.ms-Panel-animateIn {
-        .ms-Panel-main {
-          @include ms-u-slideLeftIn40;
-        }
-
-        .ms-Overlay {
-          @include ms-u-fadeIn200;
-        }
-      }
-
-      &.ms-Panel--openRight.ms-Panel-animateOut {
-        .ms-Panel-main {
-          @include ms-u-slideRightOut40;
-        }
-        .ms-Overlay {
-          @include ms-u-fadeOut200;
-        }
-      }
-
-      // Animations - Left panel (anchored left)
-      &.ms-Panel--openLeft.ms-Panel-animateIn {
-        .ms-Panel-main {
-          @include ms-u-slideRightIn40;
-        }
-
-        .ms-Overlay {
-          @include ms-u-fadeIn200;
-        }
-      }
-
-      &.ms-Panel--openLeft.ms-Panel-animateOut {
-        .ms-Panel-main {
-          @include ms-u-slideLeftOut40;
-        }
-        .ms-Overlay {
-          @include ms-u-fadeOut200;
-        }
-      }
-
-      // Animate overlay to full opacity, activate pointer events
-      .ms-Overlay {
-        cursor: pointer;
-        opacity: 1;
-        pointer-events: auto;
-      }
-
-      &.ms-Panel--openRight.ms-Panel-animateIn,
-      &.ms-Panel--openLeft.ms-Panel-animateIn {
-        .ms-Overlay {
-          @media screen and (-ms-high-contrast: active) {
-            opacity: 0;
-            animation-name: none;
-          }
-        }
-      }
+    @media screen and (-ms-high-contrast: active) {
+      opacity: 0;
     }
   }
+}
 
-  // The close button in the top right (x)
-  .ms-Panel-closeButton {
-    @include button-reset();
-    position: absolute;
-    @include right(8px);
-    top: 0;
-    height: $CommandBarHeight;
-    width: $CommandBarHeight;
-    line-height: $CommandBarHeight;
-    padding: 0;
-    color: $ms-color-neutralSecondary;
-    font-size: $ms-icon-size-m;
-
-    &:hover {
-      color: $ms-color-neutralPrimary;
-    }
+// The  button in the top right (x)
+.closeButton {
+  @include button-reset();
+  position: absolute;
+  @include right(8px);
+  top: 0;
+  height: $CommandBarHeight;
+  width: $CommandBarHeight;
+  line-height: $CommandBarHeight;
+  padding: 0;
+  color: $ms-color-neutralSecondary;
+  font-size: $ms-icon-size-m;
+
+  &:hover {
+    color: $ms-color-neutralPrimary;
   }
+}
 
 
-  // Scrollable content area
-  .ms-Panel-contentInner {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    padding: 0 16px 20px;
-    overflow-y: auto;
-    .ms-Panel--hasCloseButton & {
-      top: $CommandBarHeight;
-    }
+// Scrollable content area
+.contentInner {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 0 16px 20px;
+  overflow-y: auto;
 
-    -webkit-overflow-scrolling: touch;
+  .rootHasCloseButton & {
+    top: $CommandBarHeight;
+  }
 
-    /* Force hw accelleration on scrollable region */
-    transform: translateZ(0);
+  -webkit-overflow-scrolling: touch;
 
-    @media (min-width: $ms-screen-lg-min) {
-      padding: 0 32px 20px;
-    }
+  /* Force hw accelleration on scrollable region */
+  transform: translateZ(0);
 
-    @media (min-width: $ms-screen-xxl-min) {
-      padding: 0 40px 20px;
-    }
+  @media (min-width: $ms-screen-lg-min) {
+    padding: 0 32px 20px;
   }
 
-  // Header text at the top of the panel.
-  .ms-Panel-headerText {
-    @include ms-font-xl;
-    color: $ms-color-neutralPrimary;
-    margin: 10px 0;
-    padding: 4px 0;
-    line-height: 1;
-    text-overflow: ellipsis;
-    overflow: hidden;
+  @media (min-width: $ms-screen-xxl-min) {
+    padding: 0 40px 20px;
+  }
+}
 
-    @media (min-width: $ms-screen-xl-min) {
-      margin-top: 30px;
-    }
+// Header text at the top of the panel.
+.headerText {
+  @include ms-font-xl;
+  color: $ms-color-neutralPrimary;
+  margin: 10px 0;
+  padding: 4px 0;
+  line-height: 1;
+  text-overflow: ellipsis;
+  overflow: hidden;
+
+  @media (min-width: $ms-screen-xl-min) {
+    margin-top: 30px;
   }
 }
diff --git a/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx b/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx
index 423f3be87b8dd..0e200828def41 100644
--- a/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx
+++ b/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx
@@ -12,8 +12,9 @@ import { FocusTrapZone } from '../FocusTrapZone/index';
 import { IPanelProps, PanelType } from './Panel.Props';
 import { Layer } from '../Layer/Layer';
 import { Overlay } from '../../Overlay';
-import { Popup } from '../Popup/index';
-import './Panel.scss';
+import { Popup } from '../../Popup';
+import { IconButton } from '../../Button';
+import styles from './Panel.scss';
 
 export interface IPanelState {
   isOpen?: boolean;
@@ -22,6 +23,16 @@ export interface IPanelState {
   id?: string;
 }
 
+// Animation class constants.
+const FADE_IN_100 = 'ms-u-fadeIn100';
+const FADE_IN_200 = 'ms-u-fadeIn200';
+const FADE_OUT_100 = 'ms-u-fadeOut100';
+const FADE_OUT_200 = 'ms-u-fadeOut200';
+const SLIDE_LEFT_IN_40 = 'ms-u-slideLeftIn40';
+const SLIDE_LEFT_OUT_40 = 'ms-u-slideLeftOut40';
+const SLIDE_RIGHT_IN_40 = 'ms-u-slideRightIn40';
+const SLIDE_RIGHT_OUT_40 = 'ms-u-slideRightOut40';
+
 export class Panel extends BaseComponent<IPanelProps, IPanelState> {
 
   public static defaultProps: IPanelProps = {
@@ -95,22 +106,35 @@ export class Panel extends BaseComponent<IPanelProps, IPanelState> {
 
     let header;
     if (headerText) {
-      header = <p className={ css('ms-Panel-headerText', headerClassName) } id={ headerTextId }>{ headerText }</p>;
+      header = <p className={ css('ms-Panel-headerText', styles.headerText, headerClassName) } id={ headerTextId }>{ headerText }</p>;
     }
 
     let closeButton;
     if (hasCloseButton) {
-      closeButton = <button className='ms-Panel-closeButton ms-PanelAction-close' onClick={ this._onPanelClick } aria-label={ closeButtonAriaLabel } data-is-visible={ true }>
-        <i className='ms-Panel-closeIcon ms-Icon ms-Icon--Cancel'></i>
-      </button>;
+      closeButton = (
+        <IconButton
+          className={ css('ms-Panel-closeButton ms-PanelAction-close', styles.closeButton) }
+          onClick={ this._onPanelClick }
+          aria-label={ closeButtonAriaLabel }
+          data-is-visible={ true } icon='Cancel'
+        />
+      );
     }
 
     let overlay;
     if (isBlocking) {
-      overlay = <Overlay
-        isDarkThemed={ false }
-        onClick={ isLightDismiss ? this._onPanelClick : null }
-      />;
+      overlay = (
+        <Overlay
+          className={ css(
+            styles.overlay,
+            {
+              [FADE_IN_200]: isAnimatingOpen,
+              [FADE_OUT_200]: isAnimatingClose
+            }) }
+          isDarkThemed={ false }
+          onClick={ isLightDismiss ? this._onPanelClick : null }
+        />
+      );
     }
 
     return (
@@ -122,39 +146,45 @@ export class Panel extends BaseComponent<IPanelProps, IPanelState> {
           <div
             ref={ this._onPanelRef }
             className={
-              css('ms-Panel', className, {
-                'ms-Panel--openLeft': !isOnRightSide,  // because the RTL animations are not being used, we need to set a class
-                'ms-Panel--openRight': isOnRightSide,  // because the RTL animations are not being used, we need to set a class
-                'is-open': isOpen,
-                'ms-Panel-animateIn': isAnimatingOpen,
-                'ms-Panel-animateOut': isAnimatingClose,
-                'ms-Panel--smFluid': type === PanelType.smallFluid,
-                'ms-Panel--smLeft': type === PanelType.smallFixedNear,
-                'ms-Panel--sm': type === PanelType.smallFixedFar,
-                'ms-Panel--md': type === PanelType.medium,
-                'ms-Panel--lg': type === PanelType.large || type === PanelType.largeFixed,
-                'ms-Panel--fixed': type === PanelType.largeFixed,
-                'ms-Panel--xl': type === PanelType.extraLarge,
-                'ms-Panel--hasCloseButton': hasCloseButton
+              css('ms-Panel', styles.root, className, {
+                // because the RTL animations are not being used, we need to set a class
+                ['is-open ' + styles.rootIsOpen]: isOpen,
+                ['ms-Panel--smFluid ' + styles.rootIsSmallFluid]: type === PanelType.smallFluid,
+                ['ms-Panel--smLeft ' + styles.rootIsSmallLeft]: type === PanelType.smallFixedNear,
+                ['ms-Panel--sm ' + styles.rootIsSmall]: type === PanelType.smallFixedFar,
+                ['ms-Panel--md ' + styles.rootIsMedium]: type === PanelType.medium,
+                ['ms-Panel--lg ' + styles.rootIsLarge]: type === PanelType.large || type === PanelType.largeFixed,
+                ['ms-Panel--fixed ' + styles.rootIsFixed]: type === PanelType.largeFixed,
+                ['ms-Panel--xl ' + styles.rootIsXLarge]: type === PanelType.extraLarge,
+                ['ms-Panel--hasCloseButton ' + styles.rootHasCloseButton]: hasCloseButton
               })
             }
           >
             { overlay }
             <FocusTrapZone
-              className='ms-Panel-main'
+              className={ css(
+                'ms-Panel-main',
+                styles.main,
+                {
+                  [SLIDE_RIGHT_IN_40]: isAnimatingOpen && !isOnRightSide,
+                  [SLIDE_LEFT_OUT_40]: isAnimatingClose && !isOnRightSide,
+                  [SLIDE_LEFT_IN_40]: isAnimatingOpen && isOnRightSide,
+                  [SLIDE_RIGHT_OUT_40]: isAnimatingClose && isOnRightSide
+                }
+              ) }
               elementToFocusOnDismiss={ elementToFocusOnDismiss }
               isClickableOutsideFocusTrap={ isLightDismiss }
               ignoreExternalFocusing={ ignoreExternalFocusing }
               forceFocusInsideTrap={ forceFocusInsideTrap }
               firstFocusableSelector={ firstFocusableSelector }
             >
-              <div className='ms-Panel-commands' data-is-visible={ true } >
+              <div className={ css('ms-Panel-commands') } data-is-visible={ true } >
                 { pendingCommandBarContent }
                 { closeButton }
               </div>
-              <div className='ms-Panel-contentInner'>
+              <div className={ css('ms-Panel-contentInner', styles.contentInner) }>
                 { header }
-                <div className='ms-Panel-content'>
+                <div className={ css('ms-Panel-content') }>
                   { children }
                 </div>
               </div>