diff --git a/common/changes/@uifabric/styling/mapol-noGlobalClassNames_2018-04-20-18-28.json b/common/changes/@uifabric/styling/mapol-noGlobalClassNames_2018-04-20-18-28.json
new file mode 100644
index 0000000000000..163da537635d0
--- /dev/null
+++ b/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": "mark@thedutchies.com"
+}
\ No newline at end of file
diff --git a/common/changes/@uifabric/variants/mapol-noGlobalClassNames_2018-04-20-18-28.json b/common/changes/@uifabric/variants/mapol-noGlobalClassNames_2018-04-20-18-28.json
new file mode 100644
index 0000000000000..c6b97e3187036
--- /dev/null
+++ b/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": "mark@thedutchies.com"
+}
\ No newline at end of file
diff --git a/common/changes/office-ui-fabric-react/mapol-noGlobalClassNames_2018-04-20-18-28.json b/common/changes/office-ui-fabric-react/mapol-noGlobalClassNames_2018-04-20-18-28.json
new file mode 100644
index 0000000000000..ac57cfc9b616d
--- /dev/null
+++ b/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": "mark@thedutchies.com"
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.styles.ts b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.styles.ts
index 1c6721e6ca3c5..af8bf64ad647f 100644
--- a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.styles.ts
+++ b/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',
diff --git a/packages/office-ui-fabric-react/src/components/Check/Check.styles.ts b/packages/office-ui-fabric-react/src/components/Check/Check.styles.ts
index 6cae0b2316206..d8dccaf869d7e 100644
--- a/packages/office-ui-fabric-react/src/components/Check/Check.styles.ts
+++ b/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,
{
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/Dialog.styles.ts b/packages/office-ui-fabric-react/src/components/Dialog/Dialog.styles.ts
index 990aa517aace8..4e073115f679c 100644
--- a/packages/office-ui-fabric-react/src/components/Dialog/Dialog.styles.ts
+++ b/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,
],
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/DialogContent.styles.ts b/packages/office-ui-fabric-react/src/components/Dialog/DialogContent.styles.ts
index 279ec4cad60e9..870454b767e0a 100644
--- a/packages/office-ui-fabric-react/src/components/Dialog/DialogContent.styles.ts
+++ b/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,10 +33,12 @@ 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
},
@@ -31,7 +46,7 @@ export const getStyles = (
],
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',
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.styles.ts b/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.styles.ts
index f8277cd04c6ba..a55d9f65c3e08 100644
--- a/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.styles.ts
+++ b/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',
diff --git a/packages/office-ui-fabric-react/src/components/Fabric/Fabric.styles.ts b/packages/office-ui-fabric-react/src/components/Fabric/Fabric.styles.ts
index 68c9e588f8e20..6bb242e30bdbc 100644
--- a/packages/office-ui-fabric-react/src/components/Fabric/Fabric.styles.ts
+++ b/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,
{
diff --git a/packages/office-ui-fabric-react/src/components/Image/Image.styles.ts b/packages/office-ui-fabric-react/src/components/Image/Image.styles.ts
index bff0a259dbe23..d7d5124fa413b 100644
--- a/packages/office-ui-fabric-react/src/components/Image/Image.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Image/Image.styles.ts
@@ -2,8 +2,21 @@ import { IImageStyleProps, IImageStyles } from './Image.types';
import {
AnimationClassNames,
IStyle,
+ getGlobalClassNames,
} from '../../Styling';
+const GlobalClassNames = {
+ root: 'ms-Image',
+ rootMaximizeFrame: 'ms-Image--maximizeFrame',
+ image: 'ms-Image-image',
+ imageCenter: 'ms-Image-image--center',
+ imageContain: 'ms-Image-image--contain',
+ imageCover: 'ms-Image-image--cover',
+ imageNone: 'ms-Image-image--none',
+ imageLandscape: 'ms-Image-image--landscape',
+ imagePortrait: 'ms-Image-image--portrait',
+};
+
export const getStyles = (
props: IImageStyleProps
): IImageStyles => {
@@ -21,9 +34,12 @@ export const getStyles = (
isCover,
isNone,
isError,
- isNotImageFit
+ isNotImageFit,
+ theme
} = props;
+ const classNames = getGlobalClassNames(GlobalClassNames, theme);
+
const ImageFitStyles: IStyle = {
position: 'absolute',
left: '50% /* @noflip */',
@@ -33,12 +49,12 @@ export const getStyles = (
return ({
root: [
- 'ms-Image',
+ classNames.root,
{
overflow: 'hidden'
},
maximizeFrame && [
- 'ms-Image--maximizeFrame',
+ classNames.rootMaximizeFrame,
{
height: '100%',
width: '100%'
@@ -50,7 +66,7 @@ export const getStyles = (
className
],
image: [
- 'ms-Image-image',
+ classNames.image,
{
display: 'block',
opacity: 0
@@ -62,11 +78,11 @@ export const getStyles = (
}
],
isCenter && [
- 'ms-Image-image--center',
+ classNames.imageCenter,
ImageFitStyles
],
isContain && [
- 'ms-Image-image--contain',
+ classNames.imageContain,
isLandscape && {
width: '100%',
height: 'auto'
@@ -78,7 +94,7 @@ export const getStyles = (
ImageFitStyles
],
isCover && [
- 'ms-Image-image--cover',
+ classNames.imageCover,
isLandscape && {
width: 'auto',
height: '100%'
@@ -90,7 +106,7 @@ export const getStyles = (
ImageFitStyles
],
isNone && [
- 'ms-Image-image--none',
+ classNames.imageNone,
{
width: 'auto',
height: 'auto'
@@ -111,8 +127,8 @@ export const getStyles = (
}
],
isLoaded && shouldFadeIn && !shouldStartVisible && AnimationClassNames.fadeIn400,
- isLandscape && 'ms-Image-image--landscape',
- !isLandscape && 'ms-Image-image--portrait',
+ isLandscape && classNames.imageLandscape,
+ !isLandscape && classNames.imagePortrait,
!isLoaded && 'is-notLoaded',
shouldFadeIn && 'is-fadeIn',
isError && 'is-error'
diff --git a/packages/office-ui-fabric-react/src/components/Layer/Layer.styles.ts b/packages/office-ui-fabric-react/src/components/Layer/Layer.styles.ts
index e8b53479bb77f..8e5aaec828fbc 100644
--- a/packages/office-ui-fabric-react/src/components/Layer/Layer.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Layer/Layer.styles.ts
@@ -1,18 +1,28 @@
import { ILayerStyleProps, ILayerStyles } from './Layer.types';
+import { getGlobalClassNames } from '../../Styling';
+
+const GlobalClassNames = {
+ root: 'ms-Layer',
+ rootNoHost: 'ms-Layer--fixed',
+ content: 'ms-Layer-content',
+};
export const getStyles = (
props: ILayerStyleProps
): ILayerStyles => {
const {
className,
- isNotHost
+ isNotHost,
+ theme
} = props;
+ const classNames = getGlobalClassNames(GlobalClassNames, theme);
+
return ({
root: [
- 'ms-Layer',
+ classNames.root,
isNotHost && [
- 'ms-Layer--fixed',
+ classNames.rootNoHost,
{
position: 'fixed',
zIndex: 1000000,
@@ -26,7 +36,7 @@ export const getStyles = (
className
],
content: [
- 'ms-Layer-content',
+ classNames.content,
{
visibility: 'visible'
}
diff --git a/packages/office-ui-fabric-react/src/components/Link/Link.styles.ts b/packages/office-ui-fabric-react/src/components/Link/Link.styles.ts
index 7fd3682704da4..60ea98750dcb1 100644
--- a/packages/office-ui-fabric-react/src/components/Link/Link.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Link/Link.styles.ts
@@ -1,18 +1,25 @@
import {
- getFocusStyle
+ getFocusStyle,
+ getGlobalClassNames,
} from '../../Styling';
import {
ILinkStyleProps,
ILinkStyles
} from './Link.types';
+const GlobalClassNames = {
+ root: 'ms-Link'
+};
+
export const getStyles = (props: ILinkStyleProps): ILinkStyles => {
const { className, isButton, isDisabled, theme } = props;
const { semanticColors } = theme;
+ const classNames = getGlobalClassNames(GlobalClassNames, theme);
+
return {
root: [
- 'ms-Link',
+ classNames.root,
className,
getFocusStyle(theme),
{
diff --git a/packages/office-ui-fabric-react/src/components/Link/Link.test.tsx b/packages/office-ui-fabric-react/src/components/Link/Link.test.tsx
index 22a65951497af..029d32b84b69e 100644
--- a/packages/office-ui-fabric-react/src/components/Link/Link.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/Link/Link.test.tsx
@@ -1,5 +1,8 @@
import * as React from 'react';
+import * as ReactDOM from 'react-dom/server';
import * as renderer from 'react-test-renderer';
+import { Customizer } from '../../Utilities';
+import { createTheme } from '../../Styling';
import { Link } from './Link';
@@ -29,4 +32,14 @@ describe('Link', () => {
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
+
+ it('can have the global styles for Link component be disabled', () => {
+ const NoClassNamesTheme = createTheme({ disableGlobalClassNames: true });
+
+ expect(ReactDOM.renderToStaticMarkup(
+
+ My Link
+
+ )).toEqual('My Link');
+ });
});
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Nav/Nav.styles.ts b/packages/office-ui-fabric-react/src/components/Nav/Nav.styles.ts
index cc80fb46bebd1..a8abc58222d27 100644
--- a/packages/office-ui-fabric-react/src/components/Nav/Nav.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Nav/Nav.styles.ts
@@ -5,9 +5,23 @@ import {
DefaultFontStyles,
getFocusStyle,
FontSizes,
- FontWeights
+ FontWeights,
+ getGlobalClassNames,
} from '../../Styling';
+const GlobalClassNames = {
+ root: 'ms-Nav',
+ linkText: 'ms-Nav-linkText',
+ compositeLink: 'ms-Nav-compositeLink',
+ link: 'ms-Nav-link',
+ chevronButton: 'ms-Nav-chevronButton',
+ chevronIcon: 'ms-Nav-chevron',
+ navItem: 'ms-Nav-navItem',
+ navItems: 'ms-Nav-navItems',
+ group: 'ms-Nav-group',
+ groupContent: 'ms-Nav-groupContent',
+};
+
export const buttonStyles: IButtonStyles = {
textContainer: {
overflow: 'hidden',
@@ -41,9 +55,11 @@ export const getStyles = (
const { palette, semanticColors } = theme;
+ const classNames = getGlobalClassNames(GlobalClassNames, theme);
+
return ({
root: [
- 'ms-Nav',
+ classNames.root,
className,
{
overflowY: 'auto',
@@ -58,7 +74,7 @@ export const getStyles = (
]
],
linkText: [
- 'ms-Nav-linkText',
+ classNames.linkText,
{
margin: '0 4px',
overflow: 'hidden',
@@ -67,7 +83,7 @@ export const getStyles = (
}
],
compositeLink: [
- 'ms-Nav-compositeLink',
+ classNames.compositeLink,
{
display: 'block',
position: 'relative',
@@ -78,7 +94,7 @@ export const getStyles = (
isSelected && 'is-selected'
],
link: [
- 'ms-Nav-link',
+ classNames.link,
getFocusStyle(theme),
{
display: 'block',
@@ -120,7 +136,7 @@ export const getStyles = (
}
],
chevronButton: [
- 'ms-Nav-chevronButton',
+ classNames.chevronButton,
getFocusStyle(theme),
{
display: 'block',
@@ -189,7 +205,7 @@ export const getStyles = (
}
],
chevronIcon: [
- 'ms-Nav-chevron',
+ classNames.chevronIcon,
{
position: 'absolute',
left: '8px',
@@ -206,24 +222,24 @@ export const getStyles = (
}
],
navItem: [
- 'ms-Nav-navItem',
+ classNames.navItem,
{
padding: 0
}
],
navItems: [
- 'ms-Nav-navItems',
+ classNames.navItems,
{
listStyleType: 'none',
padding: 0
}
],
group: [
- 'ms-Nav-group',
+ classNames.group,
isExpanded && 'is-expanded'
],
groupContent: [
- 'ms-Nav-groupContent',
+ classNames.groupContent,
{
display: 'none',
marginBottom: '40px'
diff --git a/packages/office-ui-fabric-react/src/components/Overlay/Overlay.styles.ts b/packages/office-ui-fabric-react/src/components/Overlay/Overlay.styles.ts
index 4ef125c30226c..3224dbc4468a0 100644
--- a/packages/office-ui-fabric-react/src/components/Overlay/Overlay.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Overlay/Overlay.styles.ts
@@ -1,5 +1,10 @@
import { IOverlayStyleProps, IOverlayStyles } from './Overlay.types';
-import { HighContrastSelector } from '../../Styling';
+import { HighContrastSelector, getGlobalClassNames } from '../../Styling';
+
+const GlobalClassNames = {
+ root: 'ms-Overlay',
+ rootDark: 'ms-Overlay--dark',
+};
export const getStyles = (
props: IOverlayStyleProps
@@ -13,9 +18,11 @@ export const getStyles = (
const { palette } = theme;
+ const classNames = getGlobalClassNames(GlobalClassNames, theme);
+
return ({
root: [
- 'ms-Overlay',
+ classNames.root,
{
backgroundColor: palette.whiteTranslucent40,
top: 0,
@@ -36,7 +43,7 @@ export const getStyles = (
},
isDark && [
- 'ms-Overlay--dark',
+ classNames.rootDark,
{
backgroundColor: palette.blackTranslucent40,
}
diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts
index afcdcf15bdc54..a9078096157de 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts
@@ -10,6 +10,7 @@ import {
IStyle,
normalize,
noWrap,
+ getGlobalClassNames,
} from '../../Styling';
import {
personaSize,
@@ -17,6 +18,31 @@ import {
sizeBoolean,
} from './PersonaConsts';
+const GlobalClassNames = {
+ root: 'ms-Persona',
+ size10: 'ms-Persona--size10',
+ size16: 'ms-Persona--size16',
+ size24: 'ms-Persona--size24',
+ size28: 'ms-Persona--size28',
+ size32: 'ms-Persona--size32',
+ size40: 'ms-Persona--size40',
+ size48: 'ms-Persona--size48',
+ size72: 'ms-Persona--size72',
+ size100: 'ms-Persona--size100',
+ available: 'ms-Persona--online',
+ away: 'ms-Persona--away',
+ blocked: 'ms-Persona--blocked',
+ busy: 'ms-Persona--busy',
+ doNotDisturb: 'ms-Persona--donotdisturb',
+ offline: 'ms-Persona--offline',
+ details: 'ms-Persona-details',
+ primaryText: 'ms-Persona-primaryText',
+ secondaryText: 'ms-Persona-secondaryText',
+ tertiaryText: 'ms-Persona-tertiaryText',
+ optionalText: 'ms-Persona-optionalText',
+ textContent: 'ms-Persona-textContent',
+};
+
export const getStyles = (
props: IPersonaStyleProps
): IPersonaStyles => {
@@ -28,6 +54,8 @@ export const getStyles = (
const { palette } = theme;
+ const classNames = getGlobalClassNames(GlobalClassNames, theme);
+
const size = sizeBoolean(props.size as PersonaSize);
const presence = presenceBoolean(props.presence as PersonaPresence);
@@ -41,7 +69,7 @@ export const getStyles = (
return ({
root: [
- 'ms-Persona',
+ classNames.root,
normalize,
{
color: palette.neutralPrimary,
@@ -69,7 +97,7 @@ export const getStyles = (
},
size.isSize10 && [
- 'ms-Persona--size10',
+ classNames.size10,
{
height: personaSize.size10,
minWidth: personaSize.size10,
@@ -77,7 +105,7 @@ export const getStyles = (
],
size.isSize16 && [
- 'ms-Persona--size16',
+ classNames.size16,
{
height: personaSize.size16,
minWidth: personaSize.size16,
@@ -85,7 +113,7 @@ export const getStyles = (
],
size.isSize24 && [
- 'ms-Persona--size24',
+ classNames.size24,
{
height: personaSize.size24,
minWidth: personaSize.size24,
@@ -97,7 +125,7 @@ export const getStyles = (
},
size.isSize28 && [
- 'ms-Persona--size28',
+ classNames.size28,
{
height: personaSize.size28,
minWidth: personaSize.size28,
@@ -109,7 +137,7 @@ export const getStyles = (
},
size.isSize32 && [
- 'ms-Persona--size32',
+ classNames.size32,
{
height: personaSize.size32,
minWidth: personaSize.size32,
@@ -117,17 +145,17 @@ export const getStyles = (
],
size.isSize40 && [
- 'ms-Persona--size40',
+ classNames.size40,
{
height: personaSize.size40,
minWidth: personaSize.size40,
}
],
- size.isSize48 && 'ms-Persona--size48',
+ size.isSize48 && classNames.size48,
size.isSize72 && [
- 'ms-Persona--size72',
+ classNames.size72,
{
height: personaSize.size72,
minWidth: personaSize.size72,
@@ -135,7 +163,7 @@ export const getStyles = (
],
size.isSize100 && [
- 'ms-Persona--size100',
+ classNames.size100,
{
height: personaSize.size100,
minWidth: personaSize.size100,
@@ -145,17 +173,17 @@ export const getStyles = (
/**
* Modifiers: presence
*/
- presence.isAvailable && 'ms-Persona--online',
- presence.isAway && 'ms-Persona--away',
- presence.isBlocked && 'ms-Persona--blocked',
- presence.isBusy && 'ms-Persona--busy',
- presence.isDoNotDisturb && 'ms-Persona--donotdisturb',
- presence.isOffline && 'ms-Persona--offline',
+ presence.isAvailable && classNames.available,
+ presence.isAway && classNames.away,
+ presence.isBlocked && classNames.blocked,
+ presence.isBusy && classNames.busy,
+ presence.isDoNotDisturb && classNames.doNotDisturb,
+ presence.isOffline && classNames.offline,
className,
],
details: [
- 'ms-Persona-details',
+ classNames.details,
{
padding: '0 24px 0 16px',
minWidth: 0,
@@ -176,7 +204,7 @@ export const getStyles = (
],
primaryText: [
- 'ms-Persona-primaryText',
+ classNames.primaryText,
noWrap,
{
color: palette.neutralPrimary,
@@ -216,7 +244,7 @@ export const getStyles = (
],
secondaryText: [
- 'ms-Persona-secondaryText',
+ classNames.secondaryText,
noWrap,
sharedTextStyles,
@@ -241,7 +269,7 @@ export const getStyles = (
],
tertiaryText: [
- 'ms-Persona-tertiaryText',
+ classNames.tertiaryText,
noWrap,
sharedTextStyles,
{
@@ -254,7 +282,7 @@ export const getStyles = (
],
optionalText: [
- 'ms-Persona-optionalText',
+ classNames.optionalText,
noWrap,
sharedTextStyles,
{
@@ -267,7 +295,7 @@ export const getStyles = (
],
textContent: [
- 'ms-Persona-textContent',
+ classNames.textContent,
noWrap
],
});
diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/PersonaCoin.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/PersonaCoin.styles.ts
index 4d702892baf9f..04751a96a5b55 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/PersonaCoin.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/PersonaCoin.styles.ts
@@ -7,12 +7,29 @@ import {
HighContrastSelector,
FontSizes,
FontWeights,
+ getGlobalClassNames,
} from '../../../Styling';
import {
personaSize,
sizeBoolean,
} from '../PersonaConsts';
+const GlobalClassNames = {
+ coin: 'ms-Persona-coin',
+ imageArea: 'ms-Persona-imageArea',
+ image: 'ms-Persona-image',
+ initials: 'ms-Persona-initials',
+ size10: 'ms-Persona--size10',
+ size16: 'ms-Persona--size16',
+ size24: 'ms-Persona--size24',
+ size28: 'ms-Persona--size28',
+ size32: 'ms-Persona--size32',
+ size40: 'ms-Persona--size40',
+ size48: 'ms-Persona--size48',
+ size72: 'ms-Persona--size72',
+ size100: 'ms-Persona--size100',
+};
+
export const getStyles = (
props: IPersonaCoinStyleProps
): IPersonaCoinStyles => {
@@ -25,18 +42,20 @@ export const getStyles = (
const size = sizeBoolean(props.size as PersonaSize);
+ const classNames = getGlobalClassNames(GlobalClassNames, theme);
+
return ({
coin: [
- 'ms-Persona-coin',
- size.isSize10 && 'ms-Persona--size10',
- size.isSize16 && 'ms-Persona--size16',
- size.isSize24 && 'ms-Persona--size24',
- size.isSize28 && 'ms-Persona--size28',
- size.isSize32 && 'ms-Persona--size32',
- size.isSize40 && 'ms-Persona--size40',
- size.isSize48 && 'ms-Persona--size48',
- size.isSize72 && 'ms-Persona--size72',
- size.isSize100 && 'ms-Persona--size100',
+ classNames.coin,
+ size.isSize10 && classNames.size10,
+ size.isSize16 && classNames.size16,
+ size.isSize24 && classNames.size24,
+ size.isSize28 && classNames.size28,
+ size.isSize32 && classNames.size32,
+ size.isSize40 && classNames.size40,
+ size.isSize48 && classNames.size48,
+ size.isSize72 && classNames.size72,
+ size.isSize100 && classNames.size100,
className
],
@@ -49,7 +68,7 @@ export const getStyles = (
},
imageArea: [
- 'ms-Persona-imageArea',
+ classNames.imageArea,
{
position: 'relative',
textAlign: 'center',
@@ -102,7 +121,7 @@ export const getStyles = (
],
image: [
- 'ms-Persona-image',
+ classNames.image,
{
marginRight: '10px',
position: 'absolute',
@@ -159,7 +178,7 @@ export const getStyles = (
],
initials: [
- 'ms-Persona-initials',
+ classNames.initials,
{
borderRadius: '50%',
color: palette.white,
diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.styles.ts
index 4322c5dd53f9e..4be99e73718a5 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.styles.ts
@@ -7,6 +7,7 @@ import {
import {
FontSizes,
HighContrastSelector,
+ getGlobalClassNames,
} from '../../../Styling';
import {
personaPresenceSize,
@@ -14,12 +15,19 @@ import {
sizeBoolean,
} from '../PersonaConsts';
+const GlobalClassNames = {
+ presence: 'ms-Persona-presence',
+ presenceIcon: 'ms-Persona-presenceIcon',
+};
+
export const getStyles = (
props: IPersonaPresenceStyleProps
): IPersonaPresenceStyles => {
const { theme } = props;
const { semanticColors } = theme;
+ const classNames = getGlobalClassNames(GlobalClassNames, theme);
+
const size = sizeBoolean(props.size as PersonaSize);
const presence = presenceBoolean(props.presence as PersonaPresence);
@@ -32,7 +40,7 @@ export const getStyles = (
return ({
presence: [
- 'ms-Persona-presence',
+ classNames.presence,
{
position: 'absolute',
height: personaPresenceSize.size12,
@@ -170,7 +178,7 @@ export const getStyles = (
],
presenceIcon: [
- 'ms-Persona-presenceIcon',
+ classNames.presenceIcon,
{
color: semanticColors.bodyBackground,
fontSize: '6px',
diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts
index f2bacacd624fa..0d1f85ca08da2 100644
--- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts
@@ -4,6 +4,7 @@ import {
HighContrastSelector,
keyframes,
noWrap,
+ getGlobalClassNames,
} from '../../Styling';
import { getRTL } from '../../Utilities';
import {
@@ -11,6 +12,15 @@ import {
IProgressIndicatorStyles,
} from './ProgressIndicator.types';
+const GlobalClassNames = {
+ root: 'ms-ProgressIndicator',
+ itemName: 'ms-ProgressIndicator-itemName',
+ itemDescription: 'ms-ProgressIndicator-itemDescription',
+ itemProgress: 'ms-ProgressIndicator-itemProgress',
+ progressTrack: 'ms-ProgressIndicator-progressTrack',
+ progressBar: 'ms-ProgressIndicator-progressBar',
+};
+
const IndeterminateProgress = keyframes({
'0%': {
left: '-30%',
@@ -40,13 +50,14 @@ export const getStyles = (
} = props;
const { palette, semanticColors } = theme;
+ const classNames = getGlobalClassNames(GlobalClassNames, theme);
const marginBetweenText = 8;
const textHeight = 18;
return ({
root: [
- 'ms-ProgressIndicator',
+ classNames.root,
{
fontWeight: FontWeights.regular,
},
@@ -54,7 +65,7 @@ export const getStyles = (
],
itemName: [
- 'ms-ProgressIndicator-itemName',
+ classNames.itemName,
noWrap,
{
color: semanticColors.bodyText,
@@ -65,7 +76,7 @@ export const getStyles = (
],
itemDescription: [
- 'ms-ProgressIndicator-itemDescription',
+ classNames.itemDescription,
{
color: semanticColors.bodySubtext,
fontSize: FontSizes.xSmall,
@@ -74,7 +85,7 @@ export const getStyles = (
],
itemProgress: [
- 'ms-ProgressIndicator-itemProgress',
+ classNames.itemProgress,
{
position: 'relative',
overflow: 'hidden',
@@ -84,7 +95,7 @@ export const getStyles = (
],
progressTrack: [
- 'ms-ProgressIndicator-progressTrack',
+ classNames.progressTrack,
{
position: 'absolute',
width: '100%',
@@ -100,7 +111,7 @@ export const getStyles = (
],
progressBar: [
- 'ms-ProgressIndicator-progressBar',
+ classNames.progressBar,
{
backgroundColor: palette.themePrimary,
height: barHeight,
diff --git a/packages/office-ui-fabric-react/src/components/Rating/Rating.styles.ts b/packages/office-ui-fabric-react/src/components/Rating/Rating.styles.ts
index f077567b8fba0..e8c574a38919a 100644
--- a/packages/office-ui-fabric-react/src/components/Rating/Rating.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Rating/Rating.styles.ts
@@ -2,9 +2,21 @@ import {
getFocusStyle,
hiddenContentStyle,
HighContrastSelector,
+ getGlobalClassNames,
} from '../../Styling';
import { IRatingStyleProps, IRatingStyles } from './Rating.types';
+const GlobalClassNames = {
+ ratingStar: 'ms-RatingStar-container',
+ ratingStarBack: 'ms-RatingStar-back',
+ ratingStarFront: 'ms-RatingStar-front',
+ ratingButton: 'ms-Rating-button',
+ rootIsSmall: 'ms-Rating--small',
+ rootIsLarge: 'ms-Rating--large',
+ labelText: 'ms-Rating-labelText',
+ ratingFocusZone: 'ms-Rating-focuszone',
+};
+
export function getStyles(props: IRatingStyleProps): IRatingStyles {
const {
disabled,
@@ -16,19 +28,21 @@ export function getStyles(props: IRatingStyleProps): IRatingStyles {
palette
} = theme;
+ const classNames = getGlobalClassNames(GlobalClassNames, theme);
+
const ratingSmallIconSize = '16px';
const ratingLargeIconSize = '20px';
return {
ratingStar: [
- 'ms-RatingStar-container',
+ classNames.ratingStar,
{
display: 'inline-block',
position: 'relative'
}
],
ratingStarBack: [
- 'ms-RatingStar-back',
+ classNames.ratingStarBack,
{
// TODO: Use a proper semantic color for this
color: palette.neutralTertiary,
@@ -44,7 +58,7 @@ export function getStyles(props: IRatingStyleProps): IRatingStyles {
}
],
ratingStarFront: [
- 'ms-RatingStar-front',
+ classNames.ratingStarFront,
{
position: 'absolute',
height: '100 %',
@@ -63,7 +77,7 @@ export function getStyles(props: IRatingStyleProps): IRatingStyles {
],
ratingButton: [
getFocusStyle(theme, 0),
- 'ms-Rating-button',
+ classNames.ratingButton,
{
background: 'none',
backgroundColor: 'transparent',
@@ -85,25 +99,25 @@ export function getStyles(props: IRatingStyleProps): IRatingStyles {
},
],
rootIsSmall: [
- 'ms-Rating--small',
+ classNames.rootIsSmall,
{
fontSize: ratingSmallIconSize,
lineHeight: ratingSmallIconSize
}
],
rootIsLarge: [
- 'ms-Rating--large',
+ classNames.rootIsLarge,
{
fontSize: ratingLargeIconSize,
lineHeight: ratingLargeIconSize
}
],
labelText: [
- 'ms-Rating-labelText',
+ classNames.labelText,
hiddenContentStyle
],
ratingFocusZone: [
- 'ms-Rating-focuszone',
+ classNames.ratingFocusZone,
{
display: 'inline-block',
paddingBottom: '1px'
diff --git a/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.styles.ts b/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.styles.ts
index a91a6ecf123f4..3779d986d55c0 100644
--- a/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.styles.ts
@@ -1,15 +1,23 @@
import { IResizeGroupStyleProps, IResizeGroupStyles } from './ResizeGroup.types';
+import { getGlobalClassNames } from '../../Styling';
+
+const GlobalClassNames = {
+ root: 'ms-ResizeGroup',
+};
export const getStyles = (
props: IResizeGroupStyleProps
): IResizeGroupStyles => {
const {
className,
+ theme,
} = props;
+ const classNames = getGlobalClassNames(GlobalClassNames, theme);
+
return ({
root: [
- 'ms-ResizeGroup',
+ classNames.root,
{
display: 'block',
position: 'relative'
diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.styles.ts b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.styles.ts
index b89f518d1728c..e9bbe88880e71 100644
--- a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.styles.ts
@@ -1,13 +1,23 @@
import { IScrollablePaneStyleProps, IScrollablePaneStyles } from './ScrollablePane.types';
import {
HighContrastSelector,
- IStyle
+ IStyle,
+ getGlobalClassNames,
} from '../../Styling';
+const GlobalClassNames = {
+ root: 'ms-ScrollablePane',
+};
+
export const getStyles = (
props: IScrollablePaneStyleProps
): IScrollablePaneStyles => {
- const { className } = props;
+ const {
+ className,
+ theme,
+ } = props;
+
+ const classNames = getGlobalClassNames(GlobalClassNames, theme);
const AboveAndBelowStyles: IStyle = {
position: 'absolute',
@@ -18,7 +28,7 @@ export const getStyles = (
return ({
root: [
- 'ms-ScrollablePane',
+ classNames.root,
{
overflowY: 'auto',
maxHeight: 'inherit',
diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.classNames.ts b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.classNames.ts
index 4da46493fa6fe..e5c5a9284f8bc 100644
--- a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.classNames.ts
+++ b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.classNames.ts
@@ -1,105 +1,105 @@
-import { memoizeFunction } from '../../Utilities';
-import { mergeStyles, IStyle } from '../../Styling';
-import { ISpinButtonStyles } from './SpinButton.types';
-import { KeyboardSpinDirection } from './SpinButton';
-import { Position } from '../../utilities/positioning';
-
-export interface ISpinButtonClassNames {
- root: string;
- labelWrapper: string;
- icon: string;
- label: string;
- spinButtonWrapper: string;
- input: string;
- arrowBox: string;
-}
-
-export const getClassNames = memoizeFunction((
- styles: ISpinButtonStyles,
- disabled: boolean,
- isFocused: boolean,
- keyboardSpinDirection: KeyboardSpinDirection,
- labelPosition: Position = Position.start
-): ISpinButtonClassNames => {
- return {
- root: mergeStyles(
- styles.root
- ),
- labelWrapper: mergeStyles(
- styles.labelWrapper,
- _getStyleForLabelBasedOnPosition(labelPosition, styles)
- ),
- icon: mergeStyles(
- styles.icon,
- disabled && styles.iconDisabled
- ),
- label: mergeStyles(
- styles.label,
- disabled && styles.labelDisabled
- ),
- spinButtonWrapper: mergeStyles(
- styles.spinButtonWrapper,
- _getStyleForRootBasedOnPosition(labelPosition, styles),
- !disabled && [
- {
- selectors: {
- ':hover': styles.spinButtonWrapperHovered
- }
- },
- isFocused && {
- // This is to increase the specifity of the focus styles
- // and make it equal to that of the hover styles.
- selectors: {
- '&&': styles.spinButtonWrapperFocused
- }
- }
- ],
- disabled && styles.spinButtonWrapperDisabled
- ),
- input: mergeStyles(
- 'ms-spinButton-input',
- styles.input,
- !disabled && {
- selectors: {
- '::selection': styles.inputTextSelected
- }
- },
- disabled && styles.inputDisabled,
- ),
- arrowBox: mergeStyles(
- styles.arrowButtonsContainer,
- disabled && styles.arrowButtonsContainerDisabled
- ),
- };
-});
-
-/**
- * Returns the Style corresponding to the label position
- */
-function _getStyleForLabelBasedOnPosition(labelPosition: Position, styles: ISpinButtonStyles): IStyle {
- switch (labelPosition) {
- case Position.start:
- return styles.labelWrapperStart;
- case Position.end:
- return styles.labelWrapperEnd;
- case Position.top:
- return styles.labelWrapperTop;
- case Position.bottom:
- return styles.labelWrapperBottom;
- }
-}
-
-/**
- * Returns the Style corresponding to the label position
- */
-function _getStyleForRootBasedOnPosition(labelPosition: Position, styles: ISpinButtonStyles): IStyle {
- switch (labelPosition) {
- case Position.top:
- case Position.bottom:
- return styles.spinButtonWrapperTopBottom;
- default:
- return {
-
- };
- }
+import { memoizeFunction } from '../../Utilities';
+import { mergeStyles, IStyle } from '../../Styling';
+import { ISpinButtonStyles } from './SpinButton.types';
+import { KeyboardSpinDirection } from './SpinButton';
+import { Position } from '../../utilities/positioning';
+
+export interface ISpinButtonClassNames {
+ root: string;
+ labelWrapper: string;
+ icon: string;
+ label: string;
+ spinButtonWrapper: string;
+ input: string;
+ arrowBox: string;
+}
+
+export const getClassNames = memoizeFunction((
+ styles: ISpinButtonStyles,
+ disabled: boolean,
+ isFocused: boolean,
+ keyboardSpinDirection: KeyboardSpinDirection,
+ labelPosition: Position = Position.start
+): ISpinButtonClassNames => {
+ return {
+ root: mergeStyles(
+ styles.root
+ ),
+ labelWrapper: mergeStyles(
+ styles.labelWrapper,
+ _getStyleForLabelBasedOnPosition(labelPosition, styles)
+ ),
+ icon: mergeStyles(
+ styles.icon,
+ disabled && styles.iconDisabled
+ ),
+ label: mergeStyles(
+ styles.label,
+ disabled && styles.labelDisabled
+ ),
+ spinButtonWrapper: mergeStyles(
+ styles.spinButtonWrapper,
+ _getStyleForRootBasedOnPosition(labelPosition, styles),
+ !disabled && [
+ {
+ selectors: {
+ ':hover': styles.spinButtonWrapperHovered
+ }
+ },
+ isFocused && {
+ // This is to increase the specifity of the focus styles
+ // and make it equal to that of the hover styles.
+ selectors: {
+ '&&': styles.spinButtonWrapperFocused
+ }
+ }
+ ],
+ disabled && styles.spinButtonWrapperDisabled
+ ),
+ input: mergeStyles(
+ 'ms-spinButton-input',
+ styles.input,
+ !disabled && {
+ selectors: {
+ '::selection': styles.inputTextSelected
+ }
+ },
+ disabled && styles.inputDisabled,
+ ),
+ arrowBox: mergeStyles(
+ styles.arrowButtonsContainer,
+ disabled && styles.arrowButtonsContainerDisabled
+ ),
+ };
+});
+
+/**
+ * Returns the Style corresponding to the label position
+ */
+function _getStyleForLabelBasedOnPosition(labelPosition: Position, styles: ISpinButtonStyles): IStyle {
+ switch (labelPosition) {
+ case Position.start:
+ return styles.labelWrapperStart;
+ case Position.end:
+ return styles.labelWrapperEnd;
+ case Position.top:
+ return styles.labelWrapperTop;
+ case Position.bottom:
+ return styles.labelWrapperBottom;
+ }
+}
+
+/**
+ * Returns the Style corresponding to the label position
+ */
+function _getStyleForRootBasedOnPosition(labelPosition: Position, styles: ISpinButtonStyles): IStyle {
+ switch (labelPosition) {
+ case Position.top:
+ case Position.bottom:
+ return styles.spinButtonWrapperTopBottom;
+ default:
+ return {
+
+ };
+ }
}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.styles.ts b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.styles.ts
index e92a869d37aea..273f43812fffe 100644
--- a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.styles.ts
@@ -1,8 +1,18 @@
import { ISwatchColorPickerStyleProps, ISwatchColorPickerStyles } from './SwatchColorPicker.types';
+import { getGlobalClassNames } from '../../Styling';
+
+const GlobalClassNames = {
+ focusedContainer: 'ms-swatchColorPickerBodyContainer',
+};
export const getStyles = (props: ISwatchColorPickerStyleProps): ISwatchColorPickerStyles => {
- const { className } = props;
+ const {
+ className,
+ theme,
+ } = props;
+
+ const classNames = getGlobalClassNames(GlobalClassNames, theme);
return {
root: {
@@ -13,7 +23,7 @@ export const getStyles = (props: ISwatchColorPickerStyleProps): ISwatchColorPick
padding: 0
},
focusedContainer: [
- 'ms-swatchColorPickerBodyContainer',
+ classNames.focusedContainer,
{
clear: 'both',
display: 'block',
diff --git a/packages/styling/src/interfaces/ITheme.ts b/packages/styling/src/interfaces/ITheme.ts
index c918041937e20..0af61850fed82 100644
--- a/packages/styling/src/interfaces/ITheme.ts
+++ b/packages/styling/src/interfaces/ITheme.ts
@@ -7,6 +7,15 @@ export interface ITheme {
fonts: IFontStyles;
semanticColors: ISemanticColors;
isInverted: boolean;
+ /**
+ * This setting is for a very narrow use case and you probably don't need to worry about,
+ * unless you share a environment with others that also use fabric.
+ * It is used for disabling global styles on fabric components. This will prevent global
+ * overrides that might have been set by other fabric users from applying to your components.
+ * When you set this setting to `true` on your theme the components in the subtree of your
+ * Customizer will not get the global styles applied to them.
+ */
+ disableGlobalClassNames: boolean;
}
export interface IPartialTheme {
@@ -14,4 +23,5 @@ export interface IPartialTheme {
fonts?: Partial;
semanticColors?: Partial;
isInverted?: boolean;
+ disableGlobalClassNames?: boolean;
}
diff --git a/packages/styling/src/styles/getGlobalClassNames.test.ts b/packages/styling/src/styles/getGlobalClassNames.test.ts
new file mode 100644
index 0000000000000..54488de8eb945
--- /dev/null
+++ b/packages/styling/src/styles/getGlobalClassNames.test.ts
@@ -0,0 +1,22 @@
+import { getGlobalClassNames } from './getGlobalClassNames';
+import { createTheme } from './theme';
+
+describe('getGlobalClassNames', () => {
+ it('returns an empty string when the global styles are disabled', () => {
+ const theme = createTheme({ disableGlobalClassNames: true });
+
+ expect(getGlobalClassNames({ root: 'ms-Link' }, theme)).toEqual({});
+ });
+
+ it('returns the correct classNames when global classes are enabled', () => {
+ const theme = createTheme({ disableGlobalClassNames: false });
+
+ expect(getGlobalClassNames({ root: 'ms-Link' }, theme)).toEqual({ root: 'ms-Link' });
+ });
+
+ it('works for multiple global classes', () => {
+ const theme = createTheme({ disableGlobalClassNames: false });
+
+ expect(getGlobalClassNames({ root: 'ms-Link my-other-global' }, theme)).toEqual({ root: 'ms-Link my-other-global' });
+ });
+});
\ No newline at end of file
diff --git a/packages/styling/src/styles/getGlobalClassNames.ts b/packages/styling/src/styles/getGlobalClassNames.ts
new file mode 100644
index 0000000000000..dda97a89f6918
--- /dev/null
+++ b/packages/styling/src/styles/getGlobalClassNames.ts
@@ -0,0 +1,17 @@
+import { ITheme } from '../interfaces';
+
+export type GlobalClassNames = Record;
+
+/**
+ * Checks for the `disableGlobalClassNames` property on the `theme` to determine if it should return `classNames`
+ *
+ * @param theme The theme to check the flag on
+ * @param classNames The global class names that apply when the flag is false
+ */
+export function getGlobalClassNames(classNames: GlobalClassNames, theme: ITheme): Partial> {
+ if (theme.disableGlobalClassNames) {
+ return {};
+ }
+
+ return classNames;
+}
\ No newline at end of file
diff --git a/packages/styling/src/styles/index.ts b/packages/styling/src/styles/index.ts
index 767d807877fbb..1cf3df1eee0d9 100644
--- a/packages/styling/src/styles/index.ts
+++ b/packages/styling/src/styles/index.ts
@@ -5,6 +5,7 @@ export { FontSizes, FontWeights, IconFontSizes, createFontStyles } from './fonts
export { getFocusStyle, focusClear } from './getFocusStyle';
export { hiddenContentStyle } from './hiddenContentStyle';
export { PulsingBeaconAnimationStyles } from './PulsingBeaconAnimationStyles';
+export { getGlobalClassNames, GlobalClassNames } from './getGlobalClassNames';
export {
ThemeSettingName,
getTheme,
diff --git a/packages/styling/src/styles/theme.ts b/packages/styling/src/styles/theme.ts
index 2b21b0953bb0b..e6d6769ccd09a 100644
--- a/packages/styling/src/styles/theme.ts
+++ b/packages/styling/src/styles/theme.ts
@@ -17,7 +17,8 @@ let _theme: ITheme = {
palette: DefaultPalette,
semanticColors: _makeSemanticColorsFromPalette(DefaultPalette, false, false),
fonts: DefaultFontStyles,
- isInverted: false
+ isInverted: false,
+ disableGlobalClassNames: false,
};
let _onThemeChangeCallbacks: Array<(theme: ITheme) => void> = [];
@@ -117,8 +118,9 @@ export function createTheme(theme: IPartialTheme, depComments: boolean = false):
...theme.fonts
},
semanticColors: newSemanticColors,
- isInverted: !!theme.isInverted
- } as ITheme;
+ isInverted: !!theme.isInverted,
+ disableGlobalClassNames: !!theme.disableGlobalClassNames,
+ };
}
// Generates all the semantic slot colors based on the Fabric palette.
diff --git a/packages/variants/src/variants.ts b/packages/variants/src/variants.ts
index 60a88538ee41b..5ac76334b4368 100644
--- a/packages/variants/src/variants.ts
+++ b/packages/variants/src/variants.ts
@@ -14,7 +14,7 @@ function makeThemeFromPartials(
...originalTheme,
...{
palette: { ...originalTheme.palette, ...partialPalette },
- semanticColors: { ...originalTheme.semanticColors, ...partialSemantic }
+ semanticColors: { ...originalTheme.semanticColors, ...partialSemantic },
}
});
}
diff --git a/scripts/package.json b/scripts/package.json
index d26a3559c52e1..54abbbccd466c 100644
--- a/scripts/package.json
+++ b/scripts/package.json
@@ -50,7 +50,7 @@
"bundlesize": [
{
"path": "../apps/test-bundle-button/dist/test-bundle-button.min.js",
- "maxSize": "46.9 kB"
+ "maxSize": "47 kB"
}
]
-}
+}
\ No newline at end of file