Flag on theme for no global class names

common/changes/@uifabric/styling/mapol-noGlobalClassNames_2018-04-20-18-28.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/styling",
+      "comment": "Adds flags to theme to support controlling global class names",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/styling",
+  "email": "[email protected]"
+}

common/changes/@uifabric/variants/mapol-noGlobalClassNames_2018-04-20-18-28.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/variants",
+      "comment": "Adds flags to theme to support controlling global class names",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/variants",
+  "email": "[email protected]"
+}

common/changes/office-ui-fabric-react/mapol-noGlobalClassNames_2018-04-20-18-28.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Use theme flag to control global classes",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}

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

@@ -1,7 +1,8 @@
 import {
   HighContrastSelector,
   IRawStyle,
-  focusClear
+  focusClear,
+  getGlobalClassNames,
 } from '../../Styling';
 import { ICalloutContentStyleProps, ICalloutContentStyles } from './Callout.types';
 
@@ -21,6 +22,14 @@ function getBeakStyle(beakWidth?: number,
   };
 }
 
+const GlobalClassNames = {
+  container: 'ms-Callout-container',
+  root: 'ms-Callout',
+  beak: 'ms-Callout-beak',
+  beakCurtain: 'ms-Callout-beakCurtain',
+  calloutMain: 'ms-Callout-main',
+};
+
 export const getStyles = (props: ICalloutContentStyleProps): ICalloutContentStyles => {
   const {
     theme,
@@ -33,16 +42,18 @@ export const getStyles = (props: ICalloutContentStyleProps): ICalloutContentStyl
     beakStyle
   } = props;
 
+  const classNames = getGlobalClassNames(GlobalClassNames, theme);
+
   const { palette } = theme;
   return {
     container: [
-      'ms-Callout-container',
+      classNames.container,
       {
         position: 'relative',
       }
     ],
     root: [
-      'ms-Callout',
+      classNames.root,
       {
         position: 'absolute',
         boxSizing: 'border-box',
@@ -63,7 +74,7 @@ export const getStyles = (props: ICalloutContentStyleProps): ICalloutContentStyl
       !!calloutWidth && { width: calloutWidth }
     ],
     beak: [
-      'ms-Callout-beak',
+      classNames.beak,
       {
         position: 'absolute',
         backgroundColor: palette.white,
@@ -78,7 +89,7 @@ export const getStyles = (props: ICalloutContentStyleProps): ICalloutContentStyl
       }
     ],
     beakCurtain: [
-      'ms-Callout-beakCurtain',
+      classNames.beakCurtain,
       {
         position: 'absolute',
         top: 0,
@@ -89,7 +100,7 @@ export const getStyles = (props: ICalloutContentStyleProps): ICalloutContentStyl
       }
     ],
     calloutMain: [
-      'ms-Callout-main',
+      classNames.calloutMain,
       {
         backgroundColor: palette.white,
         overflowX: 'hidden',

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

@@ -2,8 +2,15 @@ import { ICheckStyleProps, ICheckStyles } from './Check.types';
 import {
   HighContrastSelector,
   IStyle,
+  getGlobalClassNames,
 } from '../../Styling';
 
+const GlobalClassNames = {
+  root: 'ms-Check',
+  circle: 'ms-Check-circle',
+  check: 'ms-Check-check',
+};
+
 export const getStyles = (
   props: ICheckStyleProps
 ): ICheckStyles => {
@@ -16,6 +23,8 @@ export const getStyles = (
 
   const { palette, semanticColors } = theme;
 
+  const classNames = getGlobalClassNames(GlobalClassNames, theme);
+
   const sharedCircleCheck: IStyle = {
     fontSize: checkBoxHeight,
     position: 'absolute',
@@ -29,8 +38,7 @@ export const getStyles = (
 
   return ({
     root: [
-      'ms-Check',
-
+      classNames.root,
       {
         // lineHeight currently needs to be a string to output without 'px'
         lineHeight: '1',
@@ -83,7 +91,7 @@ export const getStyles = (
     ],
 
     circle: [
-      'ms-Check-circle',
+      classNames.circle,
       sharedCircleCheck,
 
       {
@@ -102,7 +110,7 @@ export const getStyles = (
     ],
 
     check: [
-      'ms-Check-check',
+      classNames.check,
       sharedCircleCheck,
 
       {

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

@@ -1,8 +1,13 @@
 import { IDialogStyleProps, IDialogStyles } from './Dialog.types';
 import {
   ScreenWidthMinMedium,
+  getGlobalClassNames,
 } from '../../Styling';
 
+const GlobalClassNames = {
+  root: 'ms-Dialog',
+};
+
 export const getStyles = (
   props: IDialogStyleProps
 ): IDialogStyles => {
@@ -12,11 +17,14 @@ export const getStyles = (
     dialogDefaultMinWidth = '288px',
     dialogDefaultMaxWidth = '340px',
     hidden,
+    theme
   } = props;
 
+  const classNames = getGlobalClassNames(GlobalClassNames, theme);
+
   return ({
     root: [
-      'ms-Dialog',
+      classNames.root,
       className,
     ],
 

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

@@ -4,8 +4,21 @@ import {
 } from './DialogContent.types';
 import {
   FontWeights,
+  getGlobalClassNames,
 } from '../../Styling';
 
+const GlobalClassNames = {
+  contentLgHeader: 'ms-Dialog-lgHeader',
+  close: 'ms-Dialog--close',
+  subText: 'ms-Dialog-subText',
+  header: 'ms-Dialog-header',
+  headerLg: 'ms-Dialog--lgHeader',
+  button: 'ms-Dialog-button ms-Dialog-button--close',
+  inner: 'ms-Dialog-inner',
+  content: 'ms-Dialog-content',
+  title: 'ms-Dialog-title',
+};
+
 export const getStyles = (
   props: IDialogContentStyleProps
 ): IDialogContentStyles => {
@@ -20,18 +33,20 @@ export const getStyles = (
 
   const { palette, fonts } = theme;
 
+  const classNames = getGlobalClassNames(GlobalClassNames, theme);
+
   return ({
     content: [
-      isLargeHeader && 'ms-Dialog-lgHeader',
-      isClose && 'ms-Dialog--close',
+      isLargeHeader && classNames.contentLgHeader,
+      isClose && classNames.close,
       {
         flexGrow: 1
       },
       className
     ],
 
     subText: [
-      'ms-Dialog-subText',
+      classNames.subText,
       isLargeHeader ? fonts.medium : fonts.small,
       {
         margin: '0 0 20px 0',
@@ -44,24 +59,23 @@ export const getStyles = (
     ],
 
     header: [
-      'ms-Dialog-header',
+      classNames.header,
       {
         position: 'relative',
         width: '100%',
         boxSizing: 'border-box',
       },
       isLargeHeader && [
-        'ms-Dialog--lgHeader',
+        classNames.headerLg,
         {
           backgroundColor: palette.themePrimary,
         }
       ],
-      isClose && 'ms-Dialog--close',
+      isClose && classNames.close,
     ],
 
     button: [
-      'ms-Dialog-button',
-      'ms-Dialog-button--close',
+      classNames.button,
       hidden && {
         selectors: {
           '.ms-Icon.ms-Icon--Cancel': {
@@ -73,14 +87,14 @@ export const getStyles = (
     ],
 
     inner: [
-      'ms-Dialog-inner',
+      classNames.inner,
       {
         padding: isMultiline ? '0 20px 20px' : '0 28px 20px',
       }
     ],
 
     innerContent: [
-      'ms-Dialog-content',
+      classNames.content,
       {
         position: 'relative',
         width: '100%',
@@ -101,7 +115,7 @@ export const getStyles = (
     ],
 
     title: [
-      'ms-Dialog-title',
+      classNames.title,
       {
         color: palette.neutralPrimary,
         margin: '0',

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

@@ -1,15 +1,25 @@
 import { IDialogFooterStyleProps, IDialogFooterStyles } from './DialogFooter.types';
+import { getGlobalClassNames } from '../../Styling';
+
+const GlobalClassNames = {
+  actions: 'ms-Dialog-actions',
+  action: 'ms-Dialog-action',
+  actionsRight: 'ms-Dialog-actionsRight',
+};
 
 export const getStyles = (
   props: IDialogFooterStyleProps
 ): IDialogFooterStyles => {
   const {
     className,
+    theme,
   } = props;
 
+  const classNames = getGlobalClassNames(GlobalClassNames, theme);
+
   return ({
     actions: [
-      'ms-Dialog-actions',
+      classNames.actions,
       {
         position: 'relative',
         width: '100%',
@@ -28,11 +38,11 @@ export const getStyles = (
     ],
 
     action: [
-      'ms-Dialog-action',
+      classNames.action,
     ],
 
     actionsRight: [
-      'ms-Dialog-actionsRight',
+      classNames.actionsRight,
       {
         textAlign: 'right',
         marginRight: '-4px',

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

@@ -1,7 +1,12 @@
+import { getGlobalClassNames } from '../../Styling';
 import { IFabricStyleProps, IFabricStyles } from './Fabric.types';
 
 const inheritFont = { fontFamily: 'inherit' };
 
+const GlobalClassNames = {
+  root: 'ms-Fabric',
+};
+
 export interface IFabricClassNames {
   root: string;
 }
@@ -13,9 +18,11 @@ export const getStyles = (props: IFabricStyleProps): IFabricStyles => {
     isFocusVisible
   } = props;
 
+  const classNames = getGlobalClassNames(GlobalClassNames, theme);
+
   return {
     root: [
-      'ms-Fabric',
+      classNames.root,
       isFocusVisible && 'is-focusVisible',
       theme.fonts.medium,
       {