From 2a0af357799db8fb320e307dfcc6328c160f74ff Mon Sep 17 00:00:00 2001 From: Mark Polak Date: Thu, 19 Apr 2018 19:29:56 +0200 Subject: [PATCH 01/14] Initial reference implementation --- .../src/components/Link/Link.styles.ts | 5 +++-- .../src/components/Link/Link.test.tsx | 13 +++++++++++ packages/styling/src/interfaces/ITheme.ts | 6 +++++ packages/styling/src/interfaces/index.ts | 2 +- .../globalClassNamesWhenEnabled.test.ts | 22 +++++++++++++++++++ .../src/styles/globalClassNamesWhenEnabled.ts | 15 +++++++++++++ packages/styling/src/styles/index.ts | 1 + packages/styling/src/styles/theme.ts | 16 +++++++++++--- packages/utilities/src/Customizer.test.tsx | 1 - packages/variants/src/variants.ts | 9 +++++--- 10 files changed, 80 insertions(+), 10 deletions(-) create mode 100644 packages/styling/src/styles/globalClassNamesWhenEnabled.test.ts create mode 100644 packages/styling/src/styles/globalClassNamesWhenEnabled.ts 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 1568800197ddf..4e3cadeaf63ee 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,5 +1,6 @@ import { - getFocusStyle + getFocusStyle, + globalClassNamesWhenEnabled } from '../../Styling'; import { ILinkStyleProps, @@ -12,7 +13,7 @@ export const getStyles = (props: ILinkStyleProps): ILinkStyles => { return { root: [ - 'ms-Link', + globalClassNamesWhenEnabled(theme, ['ms-Link']), 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..0be9c538e68e9 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({ flags: { noGlobalClassNames: true } }); + + expect(ReactDOM.renderToStaticMarkup( + + My Link + + )).toEqual('My Link'); + }) }); \ No newline at end of file diff --git a/packages/styling/src/interfaces/ITheme.ts b/packages/styling/src/interfaces/ITheme.ts index c918041937e20..f95d49b42d45c 100644 --- a/packages/styling/src/interfaces/ITheme.ts +++ b/packages/styling/src/interfaces/ITheme.ts @@ -2,11 +2,16 @@ import { IPalette } from './IPalette'; import { IFontStyles } from './IFontStyles'; import { ISemanticColors } from './ISemanticColors'; +export interface IThemeFlags { + noGlobalClassNames: boolean; +} + export interface ITheme { palette: IPalette; fonts: IFontStyles; semanticColors: ISemanticColors; isInverted: boolean; + flags: IThemeFlags; } export interface IPartialTheme { @@ -14,4 +19,5 @@ export interface IPartialTheme { fonts?: Partial; semanticColors?: Partial; isInverted?: boolean; + flags?: Partial; } diff --git a/packages/styling/src/interfaces/index.ts b/packages/styling/src/interfaces/index.ts index f50da76e5038c..af790f6a8fa63 100644 --- a/packages/styling/src/interfaces/index.ts +++ b/packages/styling/src/interfaces/index.ts @@ -2,4 +2,4 @@ export { IAnimationStyles, IAnimationVariables } from './IAnimationStyles'; export { IFontStyles } from './IFontStyles'; export { IPalette } from './IPalette'; export { ISemanticColors } from './ISemanticColors'; -export { ITheme, IPartialTheme } from './ITheme'; +export { ITheme, IPartialTheme, IThemeFlags } from './ITheme'; diff --git a/packages/styling/src/styles/globalClassNamesWhenEnabled.test.ts b/packages/styling/src/styles/globalClassNamesWhenEnabled.test.ts new file mode 100644 index 0000000000000..f510229ddf2a7 --- /dev/null +++ b/packages/styling/src/styles/globalClassNamesWhenEnabled.test.ts @@ -0,0 +1,22 @@ +import { globalClassNamesWhenEnabled } from './globalClassNamesWhenEnabled'; +import { createTheme } from './theme'; + +describe('globalClassNamesWhenEnabled', () => { + it('returns an empty string when the global styles are disabled', () => { + const theme = createTheme({ flags: { noGlobalClassNames: true } }); + + expect(globalClassNamesWhenEnabled(theme, ['ms-Link'])).toBe(''); + }); + + it('returns the correct classNames when global classes are enabled', () => { + const theme = createTheme({ flags: { noGlobalClassNames: false } }); + + expect(globalClassNamesWhenEnabled(theme, ['ms-Link'])).toBe('ms-Link'); + }); + + it('works for multiple global classes', () => { + const theme = createTheme({ flags: { noGlobalClassNames: false } }); + + expect(globalClassNamesWhenEnabled(theme, ['ms-Link', 'my-other-global'])).toBe('ms-Link my-other-global'); + }); +}); \ No newline at end of file diff --git a/packages/styling/src/styles/globalClassNamesWhenEnabled.ts b/packages/styling/src/styles/globalClassNamesWhenEnabled.ts new file mode 100644 index 0000000000000..8c90d67571c74 --- /dev/null +++ b/packages/styling/src/styles/globalClassNamesWhenEnabled.ts @@ -0,0 +1,15 @@ +import { ITheme } from '../interfaces'; + +/** + * Checks for the `flags.noGlobalClassNames` 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 globalClassNamesWhenEnabled(theme: ITheme, classNames: string[]): string { + if (theme.flags.noGlobalClassNames) { + return ''; + } + + return classNames.join(' '); +} \ No newline at end of file diff --git a/packages/styling/src/styles/index.ts b/packages/styling/src/styles/index.ts index 767d807877fbb..354d8fe25c170 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 { globalClassNamesWhenEnabled } from './globalClassNamesWhenEnabled'; export { ThemeSettingName, getTheme, diff --git a/packages/styling/src/styles/theme.ts b/packages/styling/src/styles/theme.ts index ab52c951ba3df..51c468db6b87a 100644 --- a/packages/styling/src/styles/theme.ts +++ b/packages/styling/src/styles/theme.ts @@ -3,6 +3,7 @@ import { IPalette, ISemanticColors, ITheme, + IThemeFlags, IPartialTheme } from '../interfaces/index'; import { @@ -13,11 +14,16 @@ import { } from './DefaultPalette'; import { loadTheme as legacyLoadTheme } from '@microsoft/load-themed-styles'; +const defaultThemeFlags: IThemeFlags = { + noGlobalClassNames: false, +}; + let _theme: ITheme = { palette: DefaultPalette, semanticColors: _makeSemanticColorsFromPalette(DefaultPalette, false, false), fonts: DefaultFontStyles, - isInverted: false + isInverted: false, + flags: defaultThemeFlags, }; let _onThemeChangeCallbacks: Array<(theme: ITheme) => void> = []; @@ -117,8 +123,12 @@ export function createTheme(theme: IPartialTheme, depComments: boolean = false): ...theme.fonts }, semanticColors: newSemanticColors, - isInverted: !!theme.isInverted - } as ITheme; + isInverted: !!theme.isInverted, + flags: { + ...defaultThemeFlags, + ...theme.flags, + } + }; } // Generates all the semantic slot colors based on the Fabric palette. diff --git a/packages/utilities/src/Customizer.test.tsx b/packages/utilities/src/Customizer.test.tsx index cfb3004ce966c..1307925d7d745 100644 --- a/packages/utilities/src/Customizer.test.tsx +++ b/packages/utilities/src/Customizer.test.tsx @@ -90,5 +90,4 @@ describe('Customizer', () => { )).toEqual('
fieldfield2field3
'); }); - }); diff --git a/packages/variants/src/variants.ts b/packages/variants/src/variants.ts index 60a88538ee41b..2a22c92e19526 100644 --- a/packages/variants/src/variants.ts +++ b/packages/variants/src/variants.ts @@ -2,6 +2,7 @@ import { IPalette, ISemanticColors, ITheme, + IThemeFlags, IPartialTheme } from '@uifabric/styling/lib/index'; import { createTheme } from '@uifabric/styling/lib/index'; @@ -9,12 +10,14 @@ import { createTheme } from '@uifabric/styling/lib/index'; function makeThemeFromPartials( originalTheme: IPartialTheme, partialPalette: Partial, - partialSemantic: Partial): ITheme { + partialSemantic: Partial, + partialFlags: Partial): ITheme { return createTheme({ ...originalTheme, ...{ palette: { ...originalTheme.palette, ...partialPalette }, - semanticColors: { ...originalTheme.semanticColors, ...partialSemantic } + semanticColors: { ...originalTheme.semanticColors, ...partialSemantic }, + flags: { ...partialFlags } } }); } @@ -67,7 +70,7 @@ export function getNeutralVariant(theme: IPartialTheme): ITheme { bodyBackground: p.neutralLighter }; - return makeThemeFromPartials(theme, partialPalette, partialSemantic); + return makeThemeFromPartials(theme, partialPalette, partialSemantic, partialFlags); } /** From dcf3398f2b7dc5a732b009d88328638a842402ae Mon Sep 17 00:00:00 2001 From: Mark Polak Date: Thu, 19 Apr 2018 23:45:26 +0200 Subject: [PATCH 02/14] More components with disabled globals --- .../Callout/CalloutContent.styles.ts | 13 +- .../src/components/Check/Check.styles.ts | 7 +- .../src/components/Dialog/Dialog.styles.ts | 4 +- .../components/Dialog/DialogContent.styles.ts | 23 +- .../components/Dialog/DialogFooter.styles.ts | 8 +- .../src/components/Fabric/Fabric.styles.ts | 7 +- .../src/components/Image/Image.styles.ts | 22 +- .../src/components/Layer/Layer.styles.ts | 10 +- .../src/components/Link/Link.test.tsx | 6 +- .../src/components/Nav/Nav.styles.ts | 23 +- .../src/components/Overlay/Overlay.styles.ts | 6 +- .../src/components/Persona/Persona.styles.ts | 45 ++-- .../Persona/PersonaCoin/PersonaCoin.styles.ts | 27 +-- .../PersonaPresence/PersonaPresence.styles.ts | 5 +- .../ProgressIndicator.styles.ts | 19 +- .../src/components/Rating/Rating.styles.ts | 17 +- .../ResizeGroup/ResizeGroup.styles.ts | 4 +- .../ScrollablePane/ScrollablePane.styles.ts | 10 +- .../SpinButton/SpinButton.classNames.ts | 208 +++++++++--------- .../SwatchColorPicker.styles.ts | 8 +- packages/variants/src/variants.ts | 6 +- 21 files changed, 254 insertions(+), 224 deletions(-) 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..f98bd294d085e 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, + globalClassNamesWhenEnabled } from '../../Styling'; import { ICalloutContentStyleProps, ICalloutContentStyles } from './Callout.types'; @@ -36,13 +37,13 @@ export const getStyles = (props: ICalloutContentStyleProps): ICalloutContentStyl const { palette } = theme; return { container: [ - 'ms-Callout-container', + globalClassNamesWhenEnabled(theme, ['ms-Callout-container']), { position: 'relative', } ], root: [ - 'ms-Callout', + globalClassNamesWhenEnabled(theme, ['ms-Callout']), { position: 'absolute', boxSizing: 'border-box', @@ -63,7 +64,7 @@ export const getStyles = (props: ICalloutContentStyleProps): ICalloutContentStyl !!calloutWidth && { width: calloutWidth } ], beak: [ - 'ms-Callout-beak', + globalClassNamesWhenEnabled(theme, ['ms-Callout-beak']), { position: 'absolute', backgroundColor: palette.white, @@ -78,7 +79,7 @@ export const getStyles = (props: ICalloutContentStyleProps): ICalloutContentStyl } ], beakCurtain: [ - 'ms-Callout-beakCurtain', + globalClassNamesWhenEnabled(theme, ['ms-Callout-beakCurtain']), { position: 'absolute', top: 0, @@ -89,7 +90,7 @@ export const getStyles = (props: ICalloutContentStyleProps): ICalloutContentStyl } ], calloutMain: [ - 'ms-Callout-main', + globalClassNamesWhenEnabled(theme, ['ms-Callout-main']), { 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..0d31207f72421 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,6 +2,7 @@ import { ICheckStyleProps, ICheckStyles } from './Check.types'; import { HighContrastSelector, IStyle, + globalClassNamesWhenEnabled, } from '../../Styling'; export const getStyles = ( @@ -29,7 +30,7 @@ export const getStyles = ( return ({ root: [ - 'ms-Check', + globalClassNamesWhenEnabled(theme, ['ms-Check']), { // lineHeight currently needs to be a string to output without 'px' @@ -83,7 +84,7 @@ export const getStyles = ( ], circle: [ - 'ms-Check-circle', + globalClassNamesWhenEnabled(theme, ['ms-Check-circle']), sharedCircleCheck, { @@ -102,7 +103,7 @@ export const getStyles = ( ], check: [ - 'ms-Check-check', + globalClassNamesWhenEnabled(theme, ['ms-Check-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..bcdd600b99743 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,6 +1,7 @@ import { IDialogStyleProps, IDialogStyles } from './Dialog.types'; import { ScreenWidthMinMedium, + globalClassNamesWhenEnabled, } from '../../Styling'; export const getStyles = ( @@ -12,11 +13,12 @@ export const getStyles = ( dialogDefaultMinWidth = '288px', dialogDefaultMaxWidth = '340px', hidden, + theme } = props; return ({ root: [ - 'ms-Dialog', + globalClassNamesWhenEnabled(theme, ['ms-Dialog']), 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..5362298fc10b3 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,6 +4,7 @@ import { } from './DialogContent.types'; import { FontWeights, + globalClassNamesWhenEnabled, } from '../../Styling'; export const getStyles = ( @@ -22,8 +23,8 @@ export const getStyles = ( return ({ content: [ - isLargeHeader && 'ms-Dialog-lgHeader', - isClose && 'ms-Dialog--close', + isLargeHeader && globalClassNamesWhenEnabled(theme, ['ms-Dialog-lgHeader']), + isClose && globalClassNamesWhenEnabled(theme, ['ms-Dialog--close']), { flexGrow: 1 }, @@ -31,7 +32,7 @@ export const getStyles = ( ], subText: [ - 'ms-Dialog-subText', + globalClassNamesWhenEnabled(theme, ['ms-Dialog-subText']), isLargeHeader ? fonts.medium : fonts.small, { margin: '0 0 20px 0', @@ -44,24 +45,24 @@ export const getStyles = ( ], header: [ - 'ms-Dialog-header', + globalClassNamesWhenEnabled(theme, ['ms-Dialog-header']), { position: 'relative', width: '100%', boxSizing: 'border-box', }, isLargeHeader && [ - 'ms-Dialog--lgHeader', + globalClassNamesWhenEnabled(theme, ['ms-Dialog--lgHeader']), { backgroundColor: palette.themePrimary, } ], - isClose && 'ms-Dialog--close', + isClose && globalClassNamesWhenEnabled(theme, ['ms-Dialog--close']), ], button: [ - 'ms-Dialog-button', - 'ms-Dialog-button--close', + globalClassNamesWhenEnabled(theme, ['ms-Dialog-button']), + globalClassNamesWhenEnabled(theme, ['ms-Dialog-button--close']), hidden && { selectors: { '.ms-Icon.ms-Icon--Cancel': { @@ -73,14 +74,14 @@ export const getStyles = ( ], inner: [ - 'ms-Dialog-inner', + globalClassNamesWhenEnabled(theme, ['ms-Dialog-inner']), { padding: isMultiline ? '0 20px 20px' : '0 28px 20px', } ], innerContent: [ - 'ms-Dialog-content', + globalClassNamesWhenEnabled(theme, ['ms-Dialog-content']), { position: 'relative', width: '100%', @@ -101,7 +102,7 @@ export const getStyles = ( ], title: [ - 'ms-Dialog-title', + globalClassNamesWhenEnabled(theme, ['ms-Dialog-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..00ab088823c23 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,17 @@ import { IDialogFooterStyleProps, IDialogFooterStyles } from './DialogFooter.types'; +import { globalClassNamesWhenEnabled } from '../../Styling'; export const getStyles = ( props: IDialogFooterStyleProps ): IDialogFooterStyles => { const { className, + theme, } = props; return ({ actions: [ - 'ms-Dialog-actions', + globalClassNamesWhenEnabled(theme, ['ms-Dialog-actions']), { position: 'relative', width: '100%', @@ -28,11 +30,11 @@ export const getStyles = ( ], action: [ - 'ms-Dialog-action', + globalClassNamesWhenEnabled(theme, ['ms-Dialog-action']), ], actionsRight: [ - 'ms-Dialog-actionsRight', + globalClassNamesWhenEnabled(theme, ['ms-Dialog-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 746a7facdcbc9..206d68429baf3 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,8 +1,5 @@ -import { - ITheme, - mergeStyles -} from '../../Styling'; +import { globalClassNamesWhenEnabled } from '../../Styling'; import { IFabricStyleProps, IFabricStyles } from './Fabric.types'; const inheritFont = { fontFamily: 'inherit' }; @@ -19,7 +16,7 @@ export const getStyles = (props: IFabricStyleProps): IFabricStyles => { return { root: [ - 'ms-Fabric', + globalClassNamesWhenEnabled(theme, ['ms-Fabric']), theme.fonts.medium, { color: theme.palette.neutralPrimary, 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..138dbb0e28334 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,6 +2,7 @@ import { IImageStyleProps, IImageStyles } from './Image.types'; import { AnimationClassNames, IStyle, + globalClassNamesWhenEnabled, } from '../../Styling'; export const getStyles = ( @@ -21,7 +22,8 @@ export const getStyles = ( isCover, isNone, isError, - isNotImageFit + isNotImageFit, + theme } = props; const ImageFitStyles: IStyle = { @@ -33,12 +35,12 @@ export const getStyles = ( return ({ root: [ - 'ms-Image', + globalClassNamesWhenEnabled(theme, ['ms-Image']), { overflow: 'hidden' }, maximizeFrame && [ - 'ms-Image--maximizeFrame', + globalClassNamesWhenEnabled(theme, ['ms-Image--maximizeFrame']), { height: '100%', width: '100%' @@ -50,7 +52,7 @@ export const getStyles = ( className ], image: [ - 'ms-Image-image', + globalClassNamesWhenEnabled(theme, ['ms-Image-image']), { display: 'block', opacity: 0 @@ -62,11 +64,11 @@ export const getStyles = ( } ], isCenter && [ - 'ms-Image-image--center', + globalClassNamesWhenEnabled(theme, ['ms-Image-image--center']), ImageFitStyles ], isContain && [ - 'ms-Image-image--contain', + globalClassNamesWhenEnabled(theme, ['ms-Image-image--contain']), isLandscape && { width: '100%', height: 'auto' @@ -78,7 +80,7 @@ export const getStyles = ( ImageFitStyles ], isCover && [ - 'ms-Image-image--cover', + globalClassNamesWhenEnabled(theme, ['ms-Image-image--cover']), isLandscape && { width: 'auto', height: '100%' @@ -90,7 +92,7 @@ export const getStyles = ( ImageFitStyles ], isNone && [ - 'ms-Image-image--none', + globalClassNamesWhenEnabled(theme, ['ms-Image-image--none']), { width: 'auto', height: 'auto' @@ -111,8 +113,8 @@ export const getStyles = ( } ], isLoaded && shouldFadeIn && !shouldStartVisible && AnimationClassNames.fadeIn400, - isLandscape && 'ms-Image-image--landscape', - !isLandscape && 'ms-Image-image--portrait', + isLandscape && globalClassNamesWhenEnabled(theme, ['ms-Image-image--landscape']), + !isLandscape && globalClassNamesWhenEnabled(theme, ['ms-Image-image--portrait']), !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..0e643831d0d34 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,20 @@ import { ILayerStyleProps, ILayerStyles } from './Layer.types'; +import { globalClassNamesWhenEnabled } from '../../Styling'; export const getStyles = ( props: ILayerStyleProps ): ILayerStyles => { const { className, - isNotHost + isNotHost, + theme } = props; return ({ root: [ - 'ms-Layer', + globalClassNamesWhenEnabled(theme, ['ms-Layer']), isNotHost && [ - 'ms-Layer--fixed', + globalClassNamesWhenEnabled(theme, ['ms-Layer--fixed']), { position: 'fixed', zIndex: 1000000, @@ -26,7 +28,7 @@ export const getStyles = ( className ], content: [ - 'ms-Layer-content', + globalClassNamesWhenEnabled(theme, ['ms-Layer-content']), { visibility: 'visible' } 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 0be9c538e68e9..0bd56a0a8d58a 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 @@ -2,7 +2,7 @@ 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 { createTheme } from '../../Styling'; import { Link } from './Link'; @@ -38,8 +38,8 @@ describe('Link', () => { expect(ReactDOM.renderToStaticMarkup( - My Link + 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..212a70b096fda 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,7 +5,8 @@ import { DefaultFontStyles, getFocusStyle, FontSizes, - FontWeights + FontWeights, + globalClassNamesWhenEnabled } from '../../Styling'; export const buttonStyles: IButtonStyles = { @@ -43,7 +44,7 @@ export const getStyles = ( return ({ root: [ - 'ms-Nav', + globalClassNamesWhenEnabled(theme, ['ms-Nav']), className, { overflowY: 'auto', @@ -58,7 +59,7 @@ export const getStyles = ( ] ], linkText: [ - 'ms-Nav-linkText', + globalClassNamesWhenEnabled(theme, ['ms-Nav-linkText']), { margin: '0 4px', overflow: 'hidden', @@ -67,7 +68,7 @@ export const getStyles = ( } ], compositeLink: [ - 'ms-Nav-compositeLink', + globalClassNamesWhenEnabled(theme, ['ms-Nav-compositeLink']), { display: 'block', position: 'relative', @@ -78,7 +79,7 @@ export const getStyles = ( isSelected && 'is-selected' ], link: [ - 'ms-Nav-link', + globalClassNamesWhenEnabled(theme, ['ms-Nav-link']), getFocusStyle(theme), { display: 'block', @@ -120,7 +121,7 @@ export const getStyles = ( } ], chevronButton: [ - 'ms-Nav-chevronButton', + globalClassNamesWhenEnabled(theme, ['ms-Nav-chevronButton']), getFocusStyle(theme), { display: 'block', @@ -189,7 +190,7 @@ export const getStyles = ( } ], chevronIcon: [ - 'ms-Nav-chevron', + globalClassNamesWhenEnabled(theme, ['ms-Nav-chevron']), { position: 'absolute', left: '8px', @@ -206,24 +207,24 @@ export const getStyles = ( } ], navItem: [ - 'ms-Nav-navItem', + globalClassNamesWhenEnabled(theme, ['ms-Nav-navItem']), { padding: 0 } ], navItems: [ - 'ms-Nav-navItems', + globalClassNamesWhenEnabled(theme, ['ms-Nav-navItems']), { listStyleType: 'none', padding: 0 } ], group: [ - 'ms-Nav-group', + globalClassNamesWhenEnabled(theme, ['ms-Nav-group']), isExpanded && 'is-expanded' ], groupContent: [ - 'ms-Nav-groupContent', + globalClassNamesWhenEnabled(theme, ['ms-Nav-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..17e23d9fd393a 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,5 @@ import { IOverlayStyleProps, IOverlayStyles } from './Overlay.types'; -import { HighContrastSelector } from '../../Styling'; +import { HighContrastSelector, globalClassNamesWhenEnabled } from '../../Styling'; export const getStyles = ( props: IOverlayStyleProps @@ -15,7 +15,7 @@ export const getStyles = ( return ({ root: [ - 'ms-Overlay', + globalClassNamesWhenEnabled(theme, ['ms-Overlay']), { backgroundColor: palette.whiteTranslucent40, top: 0, @@ -36,7 +36,7 @@ export const getStyles = ( }, isDark && [ - 'ms-Overlay--dark', + globalClassNamesWhenEnabled(theme, ['ms-Overlay--dark']), { 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..63a739a6345a1 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, + globalClassNamesWhenEnabled, } from '../../Styling'; import { personaSize, @@ -41,7 +42,7 @@ export const getStyles = ( return ({ root: [ - 'ms-Persona', + globalClassNamesWhenEnabled(theme, ['ms-Persona']), normalize, { color: palette.neutralPrimary, @@ -69,7 +70,7 @@ export const getStyles = ( }, size.isSize10 && [ - 'ms-Persona--size10', + globalClassNamesWhenEnabled(theme, ['ms-Persona--size10']), { height: personaSize.size10, minWidth: personaSize.size10, @@ -77,7 +78,7 @@ export const getStyles = ( ], size.isSize16 && [ - 'ms-Persona--size16', + globalClassNamesWhenEnabled(theme, ['ms-Persona--size16']), { height: personaSize.size16, minWidth: personaSize.size16, @@ -85,7 +86,7 @@ export const getStyles = ( ], size.isSize24 && [ - 'ms-Persona--size24', + globalClassNamesWhenEnabled(theme, ['ms-Persona--size24']), { height: personaSize.size24, minWidth: personaSize.size24, @@ -97,7 +98,7 @@ export const getStyles = ( }, size.isSize28 && [ - 'ms-Persona--size28', + globalClassNamesWhenEnabled(theme, ['ms-Persona--size28']), { height: personaSize.size28, minWidth: personaSize.size28, @@ -109,7 +110,7 @@ export const getStyles = ( }, size.isSize32 && [ - 'ms-Persona--size32', + globalClassNamesWhenEnabled(theme, ['ms-Persona--size32']), { height: personaSize.size32, minWidth: personaSize.size32, @@ -117,17 +118,17 @@ export const getStyles = ( ], size.isSize40 && [ - 'ms-Persona--size40', + globalClassNamesWhenEnabled(theme, ['ms-Persona--size40']), { height: personaSize.size40, minWidth: personaSize.size40, } ], - size.isSize48 && 'ms-Persona--size48', + size.isSize48 && globalClassNamesWhenEnabled(theme, ['ms-Persona--size48']), size.isSize72 && [ - 'ms-Persona--size72', + globalClassNamesWhenEnabled(theme, ['ms-Persona--size72']), { height: personaSize.size72, minWidth: personaSize.size72, @@ -135,7 +136,7 @@ export const getStyles = ( ], size.isSize100 && [ - 'ms-Persona--size100', + globalClassNamesWhenEnabled(theme, ['ms-Persona--size100']), { height: personaSize.size100, minWidth: personaSize.size100, @@ -145,17 +146,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 && globalClassNamesWhenEnabled(theme, ['ms-Persona--online']), + presence.isAway && globalClassNamesWhenEnabled(theme, ['ms-Persona--away']), + presence.isBlocked && globalClassNamesWhenEnabled(theme, ['ms-Persona--blocked']), + presence.isBusy && globalClassNamesWhenEnabled(theme, ['ms-Persona--busy']), + presence.isDoNotDisturb && globalClassNamesWhenEnabled(theme, ['ms-Persona--donotdisturb']), + presence.isOffline && globalClassNamesWhenEnabled(theme, ['ms-Persona--offline']), className, ], details: [ - 'ms-Persona-details', + globalClassNamesWhenEnabled(theme, ['ms-Persona-details']), { padding: '0 24px 0 16px', minWidth: 0, @@ -176,7 +177,7 @@ export const getStyles = ( ], primaryText: [ - 'ms-Persona-primaryText', + globalClassNamesWhenEnabled(theme, ['ms-Persona-primaryText']), noWrap, { color: palette.neutralPrimary, @@ -216,7 +217,7 @@ export const getStyles = ( ], secondaryText: [ - 'ms-Persona-secondaryText', + globalClassNamesWhenEnabled(theme, ['ms-Persona-secondaryText']), noWrap, sharedTextStyles, @@ -241,7 +242,7 @@ export const getStyles = ( ], tertiaryText: [ - 'ms-Persona-tertiaryText', + globalClassNamesWhenEnabled(theme, ['ms-Persona-tertiaryText']), noWrap, sharedTextStyles, { @@ -254,7 +255,7 @@ export const getStyles = ( ], optionalText: [ - 'ms-Persona-optionalText', + globalClassNamesWhenEnabled(theme, ['ms-Persona-optionalText']), noWrap, sharedTextStyles, { @@ -267,7 +268,7 @@ export const getStyles = ( ], textContent: [ - 'ms-Persona-textContent', + globalClassNamesWhenEnabled(theme, ['ms-Persona-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..c4dfa30ecef20 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,6 +7,7 @@ import { HighContrastSelector, FontSizes, FontWeights, + globalClassNamesWhenEnabled, } from '../../../Styling'; import { personaSize, @@ -27,16 +28,16 @@ export const getStyles = ( 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', + globalClassNamesWhenEnabled(theme, ['ms-Persona-coin']), + size.isSize10 && globalClassNamesWhenEnabled(theme, ['ms-Persona--size10']), + size.isSize16 && globalClassNamesWhenEnabled(theme, ['ms-Persona--size16']), + size.isSize24 && globalClassNamesWhenEnabled(theme, ['ms-Persona--size24']), + size.isSize28 && globalClassNamesWhenEnabled(theme, ['ms-Persona--size28']), + size.isSize32 && globalClassNamesWhenEnabled(theme, ['ms-Persona--size32']), + size.isSize40 && globalClassNamesWhenEnabled(theme, ['ms-Persona--size40']), + size.isSize48 && globalClassNamesWhenEnabled(theme, ['ms-Persona--size48']), + size.isSize72 && globalClassNamesWhenEnabled(theme, ['ms-Persona--size72']), + size.isSize100 && globalClassNamesWhenEnabled(theme, ['ms-Persona--size100']), className ], @@ -49,7 +50,7 @@ export const getStyles = ( }, imageArea: [ - 'ms-Persona-imageArea', + globalClassNamesWhenEnabled(theme, ['ms-Persona-imageArea']), { position: 'relative', textAlign: 'center', @@ -102,7 +103,7 @@ export const getStyles = ( ], image: [ - 'ms-Persona-image', + globalClassNamesWhenEnabled(theme, ['ms-Persona-image']), { marginRight: '10px', position: 'absolute', @@ -159,7 +160,7 @@ export const getStyles = ( ], initials: [ - 'ms-Persona-initials', + globalClassNamesWhenEnabled(theme, ['ms-Persona-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..3c1e6549ef4f4 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, + globalClassNamesWhenEnabled, } from '../../../Styling'; import { personaPresenceSize, @@ -32,7 +33,7 @@ export const getStyles = ( return ({ presence: [ - 'ms-Persona-presence', + globalClassNamesWhenEnabled(theme, ['ms-Persona-presence']), { position: 'absolute', height: personaPresenceSize.size12, @@ -170,7 +171,7 @@ export const getStyles = ( ], presenceIcon: [ - 'ms-Persona-presenceIcon', + globalClassNamesWhenEnabled(theme, ['ms-Persona-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 5a326f92ce5a6..8b49738bcf58d 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 @@ -1,40 +1,43 @@ -import { IStyle, keyframes } from '../../Styling'; +import { globalClassNamesWhenEnabled } from '../../Styling'; import { IProgressIndicatorStyleProps, IProgressIndicatorStyles } from './ProgressIndicator.types'; export const getStyles = ( props: IProgressIndicatorStyleProps ): IProgressIndicatorStyles => { - const { className } = props; + const { + className, + theme, + } = props; return ({ root: [ - 'ms-ProgressIndicator', + globalClassNamesWhenEnabled(theme, ['ms-ProgressIndicator']), {}, className ], itemName: [ - 'ms-ProgressIndicator-itemName', + globalClassNamesWhenEnabled(theme, ['ms-ProgressIndicator-itemName']), {} ], itemDescription: [ - 'ms-ProgressIndicator-itemDescription', + globalClassNamesWhenEnabled(theme, ['ms-ProgressIndicator-itemDescription']), {} ], itemProgress: [ - 'ms-ProgressIndicator-itemProgress', + globalClassNamesWhenEnabled(theme, ['ms-ProgressIndicator-itemProgress']), {} ], progressTrack: [ - 'ms-ProgressIndicator-progressTrack', + globalClassNamesWhenEnabled(theme, ['ms-ProgressIndicator-progressTrack']), {} ], progressBar: [ - 'ms-ProgressIndicator-progressBar', + globalClassNamesWhenEnabled(theme, ['ms-ProgressIndicator-progressBar']), {}, ], }); 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 d9e0861c57ab0..3df7a5700fc4a 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,6 +2,7 @@ import { getFocusStyle, hiddenContentStyle, HighContrastSelector, + globalClassNamesWhenEnabled, } from '../../Styling'; import { IRatingStyleProps, IRatingStyles } from './Rating.types'; @@ -21,14 +22,14 @@ export function getStyles(props: IRatingStyleProps): IRatingStyles { return { ratingStar: [ - 'ms-RatingStar-container', + globalClassNamesWhenEnabled(theme, ['ms-RatingStar-container']), { display: 'inline-block', position: 'relative' } ], ratingStarBack: [ - 'ms-RatingStar-back', + globalClassNamesWhenEnabled(theme, ['ms-RatingStar-back']), { // TODO: Use a proper semantic color for this color: palette.neutralTertiary, @@ -44,7 +45,7 @@ export function getStyles(props: IRatingStyleProps): IRatingStyles { } ], ratingStarFront: [ - 'ms-RatingStar-front', + globalClassNamesWhenEnabled(theme, ['ms-RatingStar-front']), { position: 'absolute', height: '100 %', @@ -63,7 +64,7 @@ export function getStyles(props: IRatingStyleProps): IRatingStyles { ], ratingButton: [ getFocusStyle(theme, 0), - 'ms-Rating-button', + globalClassNamesWhenEnabled(theme, ['ms-Rating-button']), { background: 'none', margin: '3px 3px 0px 0px', @@ -84,25 +85,25 @@ export function getStyles(props: IRatingStyleProps): IRatingStyles { }, ], rootIsSmall: [ - 'ms-Rating--small', + globalClassNamesWhenEnabled(theme, ['ms-Rating--small']), { fontSize: ratingSmallIconSize, lineHeight: ratingSmallIconSize } ], rootIsLarge: [ - 'ms-Rating--large', + globalClassNamesWhenEnabled(theme, ['ms-Rating--large']), { fontSize: ratingLargeIconSize, lineHeight: ratingLargeIconSize } ], labelText: [ - 'ms-Rating-labelText', + globalClassNamesWhenEnabled(theme, ['ms-Rating-labelText']), hiddenContentStyle ], ratingFocusZone: [ - 'ms-Rating-focuszone', + globalClassNamesWhenEnabled(theme, ['ms-Rating-focuszone']), { 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..eb92353510467 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,17 @@ import { IResizeGroupStyleProps, IResizeGroupStyles } from './ResizeGroup.types'; +import { globalClassNamesWhenEnabled } from '../../Styling'; export const getStyles = ( props: IResizeGroupStyleProps ): IResizeGroupStyles => { const { className, + theme, } = props; return ({ root: [ - 'ms-ResizeGroup', + globalClassNamesWhenEnabled(theme, ['ms-ResizeGroup']), { 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..3aa9e69644d06 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,17 @@ import { IScrollablePaneStyleProps, IScrollablePaneStyles } from './ScrollablePane.types'; import { HighContrastSelector, - IStyle + IStyle, + globalClassNamesWhenEnabled } from '../../Styling'; export const getStyles = ( props: IScrollablePaneStyleProps ): IScrollablePaneStyles => { - const { className } = props; + const { + className, + theme, + } = props; const AboveAndBelowStyles: IStyle = { position: 'absolute', @@ -18,7 +22,7 @@ export const getStyles = ( return ({ root: [ - 'ms-ScrollablePane', + globalClassNamesWhenEnabled(theme, ['ms-ScrollablePane']), { 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..1f93f4a1ee0f6 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,12 @@ import { ISwatchColorPickerStyleProps, ISwatchColorPickerStyles } from './SwatchColorPicker.types'; +import { globalClassNamesWhenEnabled } from '../../Styling'; export const getStyles = (props: ISwatchColorPickerStyleProps): ISwatchColorPickerStyles => { - const { className } = props; + const { + className, + theme, + } = props; return { root: { @@ -13,7 +17,7 @@ export const getStyles = (props: ISwatchColorPickerStyleProps): ISwatchColorPick padding: 0 }, focusedContainer: [ - 'ms-swatchColorPickerBodyContainer', + globalClassNamesWhenEnabled(theme, ['ms-swatchColorPickerBodyContainer']), { clear: 'both', display: 'block', diff --git a/packages/variants/src/variants.ts b/packages/variants/src/variants.ts index 2a22c92e19526..c3cafc8f65a82 100644 --- a/packages/variants/src/variants.ts +++ b/packages/variants/src/variants.ts @@ -70,6 +70,8 @@ export function getNeutralVariant(theme: IPartialTheme): ITheme { bodyBackground: p.neutralLighter }; + const partialFlags = {}; + return makeThemeFromPartials(theme, partialPalette, partialSemantic, partialFlags); } @@ -128,7 +130,9 @@ export function getSoftVariant(theme: IPartialTheme): ITheme { // inputFocusBorderAlt: p.themePrimary, }; - return makeThemeFromPartials(theme, partialPalette, partialSemantic); + const partialFlags = {}; + + return makeThemeFromPartials(theme, partialPalette, partialSemantic, partialFlags); } /** From 79d13fc83317ca9228a57786e7935eae8f602513 Mon Sep 17 00:00:00 2001 From: Mark Polak Date: Fri, 20 Apr 2018 20:15:22 +0200 Subject: [PATCH 03/14] Updates to how global classes are retrieved --- .../Callout/CalloutContent.styles.ts | 22 ++++-- .../src/components/Check/Check.styles.ts | 17 +++-- .../src/components/Dialog/Dialog.styles.ts | 10 ++- .../components/Dialog/DialogContent.styles.ts | 37 +++++++--- .../components/Dialog/DialogFooter.styles.ts | 16 +++- .../src/components/Fabric/Fabric.styles.ts | 10 ++- .../src/components/Image/Image.styles.ts | 34 ++++++--- .../src/components/Layer/Layer.styles.ts | 16 +++- .../src/components/Link/Link.styles.ts | 10 ++- .../src/components/Nav/Nav.styles.ts | 37 +++++++--- .../src/components/Overlay/Overlay.styles.ts | 13 +++- .../src/components/Persona/Persona.styles.ts | 73 +++++++++++++------ .../Persona/PersonaCoin/PersonaCoin.styles.ts | 46 ++++++++---- .../PersonaPresence/PersonaPresence.styles.ts | 13 +++- .../ProgressIndicator.styles.ts | 26 +++++-- .../src/components/Rating/Rating.styles.ts | 31 +++++--- .../ResizeGroup/ResizeGroup.styles.ts | 10 ++- .../ScrollablePane/ScrollablePane.styles.ts | 10 ++- .../SwatchColorPicker.styles.ts | 10 ++- ...ed.test.ts => getGlobalClassNames.test.ts} | 10 +-- ...sWhenEnabled.ts => getGlobalClassNames.ts} | 8 +- packages/styling/src/styles/index.ts | 2 +- 22 files changed, 329 insertions(+), 132 deletions(-) rename packages/styling/src/styles/{globalClassNamesWhenEnabled.test.ts => getGlobalClassNames.test.ts} (55%) rename packages/styling/src/styles/{globalClassNamesWhenEnabled.ts => getGlobalClassNames.ts} (59%) 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 f98bd294d085e..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 @@ -2,7 +2,7 @@ import { HighContrastSelector, IRawStyle, focusClear, - globalClassNamesWhenEnabled + getGlobalClassNames, } from '../../Styling'; import { ICalloutContentStyleProps, ICalloutContentStyles } from './Callout.types'; @@ -22,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, @@ -34,16 +42,18 @@ export const getStyles = (props: ICalloutContentStyleProps): ICalloutContentStyl beakStyle } = props; + const classNames = getGlobalClassNames(GlobalClassNames, theme); + const { palette } = theme; return { container: [ - globalClassNamesWhenEnabled(theme, ['ms-Callout-container']), + classNames.container, { position: 'relative', } ], root: [ - globalClassNamesWhenEnabled(theme, ['ms-Callout']), + classNames.root, { position: 'absolute', boxSizing: 'border-box', @@ -64,7 +74,7 @@ export const getStyles = (props: ICalloutContentStyleProps): ICalloutContentStyl !!calloutWidth && { width: calloutWidth } ], beak: [ - globalClassNamesWhenEnabled(theme, ['ms-Callout-beak']), + classNames.beak, { position: 'absolute', backgroundColor: palette.white, @@ -79,7 +89,7 @@ export const getStyles = (props: ICalloutContentStyleProps): ICalloutContentStyl } ], beakCurtain: [ - globalClassNamesWhenEnabled(theme, ['ms-Callout-beakCurtain']), + classNames.beakCurtain, { position: 'absolute', top: 0, @@ -90,7 +100,7 @@ export const getStyles = (props: ICalloutContentStyleProps): ICalloutContentStyl } ], calloutMain: [ - globalClassNamesWhenEnabled(theme, ['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 0d31207f72421..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,9 +2,15 @@ import { ICheckStyleProps, ICheckStyles } from './Check.types'; import { HighContrastSelector, IStyle, - globalClassNamesWhenEnabled, + getGlobalClassNames, } from '../../Styling'; +const GlobalClassNames = { + root: 'ms-Check', + circle: 'ms-Check-circle', + check: 'ms-Check-check', +}; + export const getStyles = ( props: ICheckStyleProps ): ICheckStyles => { @@ -17,6 +23,8 @@ export const getStyles = ( const { palette, semanticColors } = theme; + const classNames = getGlobalClassNames(GlobalClassNames, theme); + const sharedCircleCheck: IStyle = { fontSize: checkBoxHeight, position: 'absolute', @@ -30,8 +38,7 @@ export const getStyles = ( return ({ root: [ - globalClassNamesWhenEnabled(theme, ['ms-Check']), - + classNames.root, { // lineHeight currently needs to be a string to output without 'px' lineHeight: '1', @@ -84,7 +91,7 @@ export const getStyles = ( ], circle: [ - globalClassNamesWhenEnabled(theme, ['ms-Check-circle']), + classNames.circle, sharedCircleCheck, { @@ -103,7 +110,7 @@ export const getStyles = ( ], check: [ - globalClassNamesWhenEnabled(theme, ['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 bcdd600b99743..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,9 +1,13 @@ import { IDialogStyleProps, IDialogStyles } from './Dialog.types'; import { ScreenWidthMinMedium, - globalClassNamesWhenEnabled, + getGlobalClassNames, } from '../../Styling'; +const GlobalClassNames = { + root: 'ms-Dialog', +}; + export const getStyles = ( props: IDialogStyleProps ): IDialogStyles => { @@ -16,9 +20,11 @@ export const getStyles = ( theme } = props; + const classNames = getGlobalClassNames(GlobalClassNames, theme); + return ({ root: [ - globalClassNamesWhenEnabled(theme, ['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 5362298fc10b3..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,9 +4,21 @@ import { } from './DialogContent.types'; import { FontWeights, - globalClassNamesWhenEnabled, + 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 => { @@ -21,10 +33,12 @@ export const getStyles = ( const { palette, fonts } = theme; + const classNames = getGlobalClassNames(GlobalClassNames, theme); + return ({ content: [ - isLargeHeader && globalClassNamesWhenEnabled(theme, ['ms-Dialog-lgHeader']), - isClose && globalClassNamesWhenEnabled(theme, ['ms-Dialog--close']), + isLargeHeader && classNames.contentLgHeader, + isClose && classNames.close, { flexGrow: 1 }, @@ -32,7 +46,7 @@ export const getStyles = ( ], subText: [ - globalClassNamesWhenEnabled(theme, ['ms-Dialog-subText']), + classNames.subText, isLargeHeader ? fonts.medium : fonts.small, { margin: '0 0 20px 0', @@ -45,24 +59,23 @@ export const getStyles = ( ], header: [ - globalClassNamesWhenEnabled(theme, ['ms-Dialog-header']), + classNames.header, { position: 'relative', width: '100%', boxSizing: 'border-box', }, isLargeHeader && [ - globalClassNamesWhenEnabled(theme, ['ms-Dialog--lgHeader']), + classNames.headerLg, { backgroundColor: palette.themePrimary, } ], - isClose && globalClassNamesWhenEnabled(theme, ['ms-Dialog--close']), + isClose && classNames.close, ], button: [ - globalClassNamesWhenEnabled(theme, ['ms-Dialog-button']), - globalClassNamesWhenEnabled(theme, ['ms-Dialog-button--close']), + classNames.button, hidden && { selectors: { '.ms-Icon.ms-Icon--Cancel': { @@ -74,14 +87,14 @@ export const getStyles = ( ], inner: [ - globalClassNamesWhenEnabled(theme, ['ms-Dialog-inner']), + classNames.inner, { padding: isMultiline ? '0 20px 20px' : '0 28px 20px', } ], innerContent: [ - globalClassNamesWhenEnabled(theme, ['ms-Dialog-content']), + classNames.content, { position: 'relative', width: '100%', @@ -102,7 +115,7 @@ export const getStyles = ( ], title: [ - globalClassNamesWhenEnabled(theme, ['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 00ab088823c23..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,5 +1,11 @@ import { IDialogFooterStyleProps, IDialogFooterStyles } from './DialogFooter.types'; -import { globalClassNamesWhenEnabled } from '../../Styling'; +import { getGlobalClassNames } from '../../Styling'; + +const GlobalClassNames = { + actions: 'ms-Dialog-actions', + action: 'ms-Dialog-action', + actionsRight: 'ms-Dialog-actionsRight', +}; export const getStyles = ( props: IDialogFooterStyleProps @@ -9,9 +15,11 @@ export const getStyles = ( theme, } = props; + const classNames = getGlobalClassNames(GlobalClassNames, theme); + return ({ actions: [ - globalClassNamesWhenEnabled(theme, ['ms-Dialog-actions']), + classNames.actions, { position: 'relative', width: '100%', @@ -30,11 +38,11 @@ export const getStyles = ( ], action: [ - globalClassNamesWhenEnabled(theme, ['ms-Dialog-action']), + classNames.action, ], actionsRight: [ - globalClassNamesWhenEnabled(theme, ['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 206d68429baf3..ec3ce55d31fe3 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,9 +1,13 @@ -import { globalClassNamesWhenEnabled } from '../../Styling'; +import { getGlobalClassNames } from '../../Styling'; import { IFabricStyleProps, IFabricStyles } from './Fabric.types'; const inheritFont = { fontFamily: 'inherit' }; +const GlobalClassNames = { + root: 'ms-Fabric', +}; + export interface IFabricClassNames { root: string; } @@ -14,9 +18,11 @@ export const getStyles = (props: IFabricStyleProps): IFabricStyles => { className, } = props; + const classNames = getGlobalClassNames(GlobalClassNames, theme); + return { root: [ - globalClassNamesWhenEnabled(theme, ['ms-Fabric']), + classNames.root, theme.fonts.medium, { color: theme.palette.neutralPrimary, 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 138dbb0e28334..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,9 +2,21 @@ import { IImageStyleProps, IImageStyles } from './Image.types'; import { AnimationClassNames, IStyle, - globalClassNamesWhenEnabled, + 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 => { @@ -26,6 +38,8 @@ export const getStyles = ( theme } = props; + const classNames = getGlobalClassNames(GlobalClassNames, theme); + const ImageFitStyles: IStyle = { position: 'absolute', left: '50% /* @noflip */', @@ -35,12 +49,12 @@ export const getStyles = ( return ({ root: [ - globalClassNamesWhenEnabled(theme, ['ms-Image']), + classNames.root, { overflow: 'hidden' }, maximizeFrame && [ - globalClassNamesWhenEnabled(theme, ['ms-Image--maximizeFrame']), + classNames.rootMaximizeFrame, { height: '100%', width: '100%' @@ -52,7 +66,7 @@ export const getStyles = ( className ], image: [ - globalClassNamesWhenEnabled(theme, ['ms-Image-image']), + classNames.image, { display: 'block', opacity: 0 @@ -64,11 +78,11 @@ export const getStyles = ( } ], isCenter && [ - globalClassNamesWhenEnabled(theme, ['ms-Image-image--center']), + classNames.imageCenter, ImageFitStyles ], isContain && [ - globalClassNamesWhenEnabled(theme, ['ms-Image-image--contain']), + classNames.imageContain, isLandscape && { width: '100%', height: 'auto' @@ -80,7 +94,7 @@ export const getStyles = ( ImageFitStyles ], isCover && [ - globalClassNamesWhenEnabled(theme, ['ms-Image-image--cover']), + classNames.imageCover, isLandscape && { width: 'auto', height: '100%' @@ -92,7 +106,7 @@ export const getStyles = ( ImageFitStyles ], isNone && [ - globalClassNamesWhenEnabled(theme, ['ms-Image-image--none']), + classNames.imageNone, { width: 'auto', height: 'auto' @@ -113,8 +127,8 @@ export const getStyles = ( } ], isLoaded && shouldFadeIn && !shouldStartVisible && AnimationClassNames.fadeIn400, - isLandscape && globalClassNamesWhenEnabled(theme, ['ms-Image-image--landscape']), - !isLandscape && globalClassNamesWhenEnabled(theme, ['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 0e643831d0d34..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,5 +1,11 @@ import { ILayerStyleProps, ILayerStyles } from './Layer.types'; -import { globalClassNamesWhenEnabled } from '../../Styling'; +import { getGlobalClassNames } from '../../Styling'; + +const GlobalClassNames = { + root: 'ms-Layer', + rootNoHost: 'ms-Layer--fixed', + content: 'ms-Layer-content', +}; export const getStyles = ( props: ILayerStyleProps @@ -10,11 +16,13 @@ export const getStyles = ( theme } = props; + const classNames = getGlobalClassNames(GlobalClassNames, theme); + return ({ root: [ - globalClassNamesWhenEnabled(theme, ['ms-Layer']), + classNames.root, isNotHost && [ - globalClassNamesWhenEnabled(theme, ['ms-Layer--fixed']), + classNames.rootNoHost, { position: 'fixed', zIndex: 1000000, @@ -28,7 +36,7 @@ export const getStyles = ( className ], content: [ - globalClassNamesWhenEnabled(theme, ['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 4e3cadeaf63ee..93330da017988 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,19 +1,25 @@ import { getFocusStyle, - globalClassNamesWhenEnabled + 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: [ - globalClassNamesWhenEnabled(theme, ['ms-Link']), + classNames.root, className, getFocusStyle(theme), { 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 212a70b096fda..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 @@ -6,9 +6,22 @@ import { getFocusStyle, FontSizes, FontWeights, - globalClassNamesWhenEnabled + 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', @@ -42,9 +55,11 @@ export const getStyles = ( const { palette, semanticColors } = theme; + const classNames = getGlobalClassNames(GlobalClassNames, theme); + return ({ root: [ - globalClassNamesWhenEnabled(theme, ['ms-Nav']), + classNames.root, className, { overflowY: 'auto', @@ -59,7 +74,7 @@ export const getStyles = ( ] ], linkText: [ - globalClassNamesWhenEnabled(theme, ['ms-Nav-linkText']), + classNames.linkText, { margin: '0 4px', overflow: 'hidden', @@ -68,7 +83,7 @@ export const getStyles = ( } ], compositeLink: [ - globalClassNamesWhenEnabled(theme, ['ms-Nav-compositeLink']), + classNames.compositeLink, { display: 'block', position: 'relative', @@ -79,7 +94,7 @@ export const getStyles = ( isSelected && 'is-selected' ], link: [ - globalClassNamesWhenEnabled(theme, ['ms-Nav-link']), + classNames.link, getFocusStyle(theme), { display: 'block', @@ -121,7 +136,7 @@ export const getStyles = ( } ], chevronButton: [ - globalClassNamesWhenEnabled(theme, ['ms-Nav-chevronButton']), + classNames.chevronButton, getFocusStyle(theme), { display: 'block', @@ -190,7 +205,7 @@ export const getStyles = ( } ], chevronIcon: [ - globalClassNamesWhenEnabled(theme, ['ms-Nav-chevron']), + classNames.chevronIcon, { position: 'absolute', left: '8px', @@ -207,24 +222,24 @@ export const getStyles = ( } ], navItem: [ - globalClassNamesWhenEnabled(theme, ['ms-Nav-navItem']), + classNames.navItem, { padding: 0 } ], navItems: [ - globalClassNamesWhenEnabled(theme, ['ms-Nav-navItems']), + classNames.navItems, { listStyleType: 'none', padding: 0 } ], group: [ - globalClassNamesWhenEnabled(theme, ['ms-Nav-group']), + classNames.group, isExpanded && 'is-expanded' ], groupContent: [ - globalClassNamesWhenEnabled(theme, ['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 17e23d9fd393a..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, globalClassNamesWhenEnabled } 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: [ - globalClassNamesWhenEnabled(theme, ['ms-Overlay']), + classNames.root, { backgroundColor: palette.whiteTranslucent40, top: 0, @@ -36,7 +43,7 @@ export const getStyles = ( }, isDark && [ - globalClassNamesWhenEnabled(theme, ['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 63a739a6345a1..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,7 +10,7 @@ import { IStyle, normalize, noWrap, - globalClassNamesWhenEnabled, + getGlobalClassNames, } from '../../Styling'; import { personaSize, @@ -18,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 => { @@ -29,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); @@ -42,7 +69,7 @@ export const getStyles = ( return ({ root: [ - globalClassNamesWhenEnabled(theme, ['ms-Persona']), + classNames.root, normalize, { color: palette.neutralPrimary, @@ -70,7 +97,7 @@ export const getStyles = ( }, size.isSize10 && [ - globalClassNamesWhenEnabled(theme, ['ms-Persona--size10']), + classNames.size10, { height: personaSize.size10, minWidth: personaSize.size10, @@ -78,7 +105,7 @@ export const getStyles = ( ], size.isSize16 && [ - globalClassNamesWhenEnabled(theme, ['ms-Persona--size16']), + classNames.size16, { height: personaSize.size16, minWidth: personaSize.size16, @@ -86,7 +113,7 @@ export const getStyles = ( ], size.isSize24 && [ - globalClassNamesWhenEnabled(theme, ['ms-Persona--size24']), + classNames.size24, { height: personaSize.size24, minWidth: personaSize.size24, @@ -98,7 +125,7 @@ export const getStyles = ( }, size.isSize28 && [ - globalClassNamesWhenEnabled(theme, ['ms-Persona--size28']), + classNames.size28, { height: personaSize.size28, minWidth: personaSize.size28, @@ -110,7 +137,7 @@ export const getStyles = ( }, size.isSize32 && [ - globalClassNamesWhenEnabled(theme, ['ms-Persona--size32']), + classNames.size32, { height: personaSize.size32, minWidth: personaSize.size32, @@ -118,17 +145,17 @@ export const getStyles = ( ], size.isSize40 && [ - globalClassNamesWhenEnabled(theme, ['ms-Persona--size40']), + classNames.size40, { height: personaSize.size40, minWidth: personaSize.size40, } ], - size.isSize48 && globalClassNamesWhenEnabled(theme, ['ms-Persona--size48']), + size.isSize48 && classNames.size48, size.isSize72 && [ - globalClassNamesWhenEnabled(theme, ['ms-Persona--size72']), + classNames.size72, { height: personaSize.size72, minWidth: personaSize.size72, @@ -136,7 +163,7 @@ export const getStyles = ( ], size.isSize100 && [ - globalClassNamesWhenEnabled(theme, ['ms-Persona--size100']), + classNames.size100, { height: personaSize.size100, minWidth: personaSize.size100, @@ -146,17 +173,17 @@ export const getStyles = ( /** * Modifiers: presence */ - presence.isAvailable && globalClassNamesWhenEnabled(theme, ['ms-Persona--online']), - presence.isAway && globalClassNamesWhenEnabled(theme, ['ms-Persona--away']), - presence.isBlocked && globalClassNamesWhenEnabled(theme, ['ms-Persona--blocked']), - presence.isBusy && globalClassNamesWhenEnabled(theme, ['ms-Persona--busy']), - presence.isDoNotDisturb && globalClassNamesWhenEnabled(theme, ['ms-Persona--donotdisturb']), - presence.isOffline && globalClassNamesWhenEnabled(theme, ['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: [ - globalClassNamesWhenEnabled(theme, ['ms-Persona-details']), + classNames.details, { padding: '0 24px 0 16px', minWidth: 0, @@ -177,7 +204,7 @@ export const getStyles = ( ], primaryText: [ - globalClassNamesWhenEnabled(theme, ['ms-Persona-primaryText']), + classNames.primaryText, noWrap, { color: palette.neutralPrimary, @@ -217,7 +244,7 @@ export const getStyles = ( ], secondaryText: [ - globalClassNamesWhenEnabled(theme, ['ms-Persona-secondaryText']), + classNames.secondaryText, noWrap, sharedTextStyles, @@ -242,7 +269,7 @@ export const getStyles = ( ], tertiaryText: [ - globalClassNamesWhenEnabled(theme, ['ms-Persona-tertiaryText']), + classNames.tertiaryText, noWrap, sharedTextStyles, { @@ -255,7 +282,7 @@ export const getStyles = ( ], optionalText: [ - globalClassNamesWhenEnabled(theme, ['ms-Persona-optionalText']), + classNames.optionalText, noWrap, sharedTextStyles, { @@ -268,7 +295,7 @@ export const getStyles = ( ], textContent: [ - globalClassNamesWhenEnabled(theme, ['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 c4dfa30ecef20..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,13 +7,29 @@ import { HighContrastSelector, FontSizes, FontWeights, - globalClassNamesWhenEnabled, + 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 => { @@ -26,18 +42,20 @@ export const getStyles = ( const size = sizeBoolean(props.size as PersonaSize); + const classNames = getGlobalClassNames(GlobalClassNames, theme); + return ({ coin: [ - globalClassNamesWhenEnabled(theme, ['ms-Persona-coin']), - size.isSize10 && globalClassNamesWhenEnabled(theme, ['ms-Persona--size10']), - size.isSize16 && globalClassNamesWhenEnabled(theme, ['ms-Persona--size16']), - size.isSize24 && globalClassNamesWhenEnabled(theme, ['ms-Persona--size24']), - size.isSize28 && globalClassNamesWhenEnabled(theme, ['ms-Persona--size28']), - size.isSize32 && globalClassNamesWhenEnabled(theme, ['ms-Persona--size32']), - size.isSize40 && globalClassNamesWhenEnabled(theme, ['ms-Persona--size40']), - size.isSize48 && globalClassNamesWhenEnabled(theme, ['ms-Persona--size48']), - size.isSize72 && globalClassNamesWhenEnabled(theme, ['ms-Persona--size72']), - size.isSize100 && globalClassNamesWhenEnabled(theme, ['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 ], @@ -50,7 +68,7 @@ export const getStyles = ( }, imageArea: [ - globalClassNamesWhenEnabled(theme, ['ms-Persona-imageArea']), + classNames.imageArea, { position: 'relative', textAlign: 'center', @@ -103,7 +121,7 @@ export const getStyles = ( ], image: [ - globalClassNamesWhenEnabled(theme, ['ms-Persona-image']), + classNames.image, { marginRight: '10px', position: 'absolute', @@ -160,7 +178,7 @@ export const getStyles = ( ], initials: [ - globalClassNamesWhenEnabled(theme, ['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 3c1e6549ef4f4..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,7 +7,7 @@ import { import { FontSizes, HighContrastSelector, - globalClassNamesWhenEnabled, + getGlobalClassNames, } from '../../../Styling'; import { personaPresenceSize, @@ -15,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); @@ -33,7 +40,7 @@ export const getStyles = ( return ({ presence: [ - globalClassNamesWhenEnabled(theme, ['ms-Persona-presence']), + classNames.presence, { position: 'absolute', height: personaPresenceSize.size12, @@ -171,7 +178,7 @@ export const getStyles = ( ], presenceIcon: [ - globalClassNamesWhenEnabled(theme, ['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 8b49738bcf58d..1fec06cda7b46 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 @@ -1,5 +1,15 @@ -import { globalClassNamesWhenEnabled } from '../../Styling'; +import { getGlobalClassNames } from '../../Styling'; import { IProgressIndicatorStyleProps, IProgressIndicatorStyles } from './ProgressIndicator.types'; +import { itemDescription, itemProgress, progressTrack, progressBar } from 'office-ui-fabric-react/lib/components/ProgressIndicator/ProgressIndicator.scss'; + +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', +}; export const getStyles = ( props: IProgressIndicatorStyleProps @@ -9,35 +19,37 @@ export const getStyles = ( theme, } = props; + const classNames = getGlobalClassNames(GlobalClassNames, theme); + return ({ root: [ - globalClassNamesWhenEnabled(theme, ['ms-ProgressIndicator']), + classNames.root, {}, className ], itemName: [ - globalClassNamesWhenEnabled(theme, ['ms-ProgressIndicator-itemName']), + classNames.itemName, {} ], itemDescription: [ - globalClassNamesWhenEnabled(theme, ['ms-ProgressIndicator-itemDescription']), + classNames.itemDescription, {} ], itemProgress: [ - globalClassNamesWhenEnabled(theme, ['ms-ProgressIndicator-itemProgress']), + classNames.itemProgress, {} ], progressTrack: [ - globalClassNamesWhenEnabled(theme, ['ms-ProgressIndicator-progressTrack']), + classNames.progressTrack, {} ], progressBar: [ - globalClassNamesWhenEnabled(theme, ['ms-ProgressIndicator-progressBar']), + classNames.progressBar, {}, ], }); 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 3df7a5700fc4a..f21d75ff0fbec 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,10 +2,21 @@ import { getFocusStyle, hiddenContentStyle, HighContrastSelector, - globalClassNamesWhenEnabled, + 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, @@ -17,19 +28,21 @@ export function getStyles(props: IRatingStyleProps): IRatingStyles { palette } = theme; + const classNames = getGlobalClassNames(GlobalClassNames, theme); + const ratingSmallIconSize = '16px'; const ratingLargeIconSize = '20px'; return { ratingStar: [ - globalClassNamesWhenEnabled(theme, ['ms-RatingStar-container']), + classNames.ratingStar, { display: 'inline-block', position: 'relative' } ], ratingStarBack: [ - globalClassNamesWhenEnabled(theme, ['ms-RatingStar-back']), + classNames.ratingStarBack, { // TODO: Use a proper semantic color for this color: palette.neutralTertiary, @@ -45,7 +58,7 @@ export function getStyles(props: IRatingStyleProps): IRatingStyles { } ], ratingStarFront: [ - globalClassNamesWhenEnabled(theme, ['ms-RatingStar-front']), + classNames.ratingStarFront, { position: 'absolute', height: '100 %', @@ -64,7 +77,7 @@ export function getStyles(props: IRatingStyleProps): IRatingStyles { ], ratingButton: [ getFocusStyle(theme, 0), - globalClassNamesWhenEnabled(theme, ['ms-Rating-button']), + classNames.ratingButton, { background: 'none', margin: '3px 3px 0px 0px', @@ -85,25 +98,25 @@ export function getStyles(props: IRatingStyleProps): IRatingStyles { }, ], rootIsSmall: [ - globalClassNamesWhenEnabled(theme, ['ms-Rating--small']), + classNames.rootIsSmall, { fontSize: ratingSmallIconSize, lineHeight: ratingSmallIconSize } ], rootIsLarge: [ - globalClassNamesWhenEnabled(theme, ['ms-Rating--large']), + classNames.rootIsLarge, { fontSize: ratingLargeIconSize, lineHeight: ratingLargeIconSize } ], labelText: [ - globalClassNamesWhenEnabled(theme, ['ms-Rating-labelText']), + classNames.labelText, hiddenContentStyle ], ratingFocusZone: [ - globalClassNamesWhenEnabled(theme, ['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 eb92353510467..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,5 +1,9 @@ import { IResizeGroupStyleProps, IResizeGroupStyles } from './ResizeGroup.types'; -import { globalClassNamesWhenEnabled } from '../../Styling'; +import { getGlobalClassNames } from '../../Styling'; + +const GlobalClassNames = { + root: 'ms-ResizeGroup', +}; export const getStyles = ( props: IResizeGroupStyleProps @@ -9,9 +13,11 @@ export const getStyles = ( theme, } = props; + const classNames = getGlobalClassNames(GlobalClassNames, theme); + return ({ root: [ - globalClassNamesWhenEnabled(theme, ['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 3aa9e69644d06..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 @@ -2,9 +2,13 @@ import { IScrollablePaneStyleProps, IScrollablePaneStyles } from './ScrollablePa import { HighContrastSelector, IStyle, - globalClassNamesWhenEnabled + getGlobalClassNames, } from '../../Styling'; +const GlobalClassNames = { + root: 'ms-ScrollablePane', +}; + export const getStyles = ( props: IScrollablePaneStyleProps ): IScrollablePaneStyles => { @@ -13,6 +17,8 @@ export const getStyles = ( theme, } = props; + const classNames = getGlobalClassNames(GlobalClassNames, theme); + const AboveAndBelowStyles: IStyle = { position: 'absolute', pointerEvents: 'auto', @@ -22,7 +28,7 @@ export const getStyles = ( return ({ root: [ - globalClassNamesWhenEnabled(theme, ['ms-ScrollablePane']), + classNames.root, { overflowY: 'auto', maxHeight: 'inherit', 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 1f93f4a1ee0f6..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,6 +1,10 @@ import { ISwatchColorPickerStyleProps, ISwatchColorPickerStyles } from './SwatchColorPicker.types'; -import { globalClassNamesWhenEnabled } from '../../Styling'; +import { getGlobalClassNames } from '../../Styling'; + +const GlobalClassNames = { + focusedContainer: 'ms-swatchColorPickerBodyContainer', +}; export const getStyles = (props: ISwatchColorPickerStyleProps): ISwatchColorPickerStyles => { const { @@ -8,6 +12,8 @@ export const getStyles = (props: ISwatchColorPickerStyleProps): ISwatchColorPick theme, } = props; + const classNames = getGlobalClassNames(GlobalClassNames, theme); + return { root: { padding: 2, @@ -17,7 +23,7 @@ export const getStyles = (props: ISwatchColorPickerStyleProps): ISwatchColorPick padding: 0 }, focusedContainer: [ - globalClassNamesWhenEnabled(theme, ['ms-swatchColorPickerBodyContainer']), + classNames.focusedContainer, { clear: 'both', display: 'block', diff --git a/packages/styling/src/styles/globalClassNamesWhenEnabled.test.ts b/packages/styling/src/styles/getGlobalClassNames.test.ts similarity index 55% rename from packages/styling/src/styles/globalClassNamesWhenEnabled.test.ts rename to packages/styling/src/styles/getGlobalClassNames.test.ts index f510229ddf2a7..0292429ec0086 100644 --- a/packages/styling/src/styles/globalClassNamesWhenEnabled.test.ts +++ b/packages/styling/src/styles/getGlobalClassNames.test.ts @@ -1,22 +1,22 @@ -import { globalClassNamesWhenEnabled } from './globalClassNamesWhenEnabled'; +import { getGlobalClassNames } from './getGlobalClassNames'; import { createTheme } from './theme'; -describe('globalClassNamesWhenEnabled', () => { +describe('getGlobalClassNames', () => { it('returns an empty string when the global styles are disabled', () => { const theme = createTheme({ flags: { noGlobalClassNames: true } }); - expect(globalClassNamesWhenEnabled(theme, ['ms-Link'])).toBe(''); + expect(getGlobalClassNames({ root: 'ms-Link' }, theme)).toEqual({}); }); it('returns the correct classNames when global classes are enabled', () => { const theme = createTheme({ flags: { noGlobalClassNames: false } }); - expect(globalClassNamesWhenEnabled(theme, ['ms-Link'])).toBe('ms-Link'); + expect(getGlobalClassNames({ root: 'ms-Link' }, theme)).toEqual({ root: 'ms-Link' }); }); it('works for multiple global classes', () => { const theme = createTheme({ flags: { noGlobalClassNames: false } }); - expect(globalClassNamesWhenEnabled(theme, ['ms-Link', 'my-other-global'])).toBe('ms-Link my-other-global'); + 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/globalClassNamesWhenEnabled.ts b/packages/styling/src/styles/getGlobalClassNames.ts similarity index 59% rename from packages/styling/src/styles/globalClassNamesWhenEnabled.ts rename to packages/styling/src/styles/getGlobalClassNames.ts index 8c90d67571c74..0df47e3346697 100644 --- a/packages/styling/src/styles/globalClassNamesWhenEnabled.ts +++ b/packages/styling/src/styles/getGlobalClassNames.ts @@ -1,15 +1,17 @@ import { ITheme } from '../interfaces'; +export type GlobalClassNames = Record; + /** * Checks for the `flags.noGlobalClassNames` 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 globalClassNamesWhenEnabled(theme: ITheme, classNames: string[]): string { +export function getGlobalClassNames(classNames: GlobalClassNames, theme: ITheme): Partial> { if (theme.flags.noGlobalClassNames) { - return ''; + return {}; } - return classNames.join(' '); + 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 354d8fe25c170..1cf3df1eee0d9 100644 --- a/packages/styling/src/styles/index.ts +++ b/packages/styling/src/styles/index.ts @@ -5,7 +5,7 @@ export { FontSizes, FontWeights, IconFontSizes, createFontStyles } from './fonts export { getFocusStyle, focusClear } from './getFocusStyle'; export { hiddenContentStyle } from './hiddenContentStyle'; export { PulsingBeaconAnimationStyles } from './PulsingBeaconAnimationStyles'; -export { globalClassNamesWhenEnabled } from './globalClassNamesWhenEnabled'; +export { getGlobalClassNames, GlobalClassNames } from './getGlobalClassNames'; export { ThemeSettingName, getTheme, From 977732bcdcbe9d2f33d89a71fb203950a52071a3 Mon Sep 17 00:00:00 2001 From: Mark Polak Date: Fri, 20 Apr 2018 20:25:25 +0200 Subject: [PATCH 04/14] Change flag name per suggestion --- .../src/components/Link/Link.test.tsx | 2 +- packages/styling/src/interfaces/ITheme.ts | 2 +- packages/styling/src/styles/getGlobalClassNames.test.ts | 6 +++--- packages/styling/src/styles/getGlobalClassNames.ts | 4 ++-- packages/styling/src/styles/theme.ts | 2 +- 5 files changed, 8 insertions(+), 8 deletions(-) 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 0bd56a0a8d58a..84cb14b6adb3d 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 @@ -34,7 +34,7 @@ describe('Link', () => { }); it('can have the global styles for Link component be disabled', () => { - const NoClassNamesTheme = createTheme({ flags: { noGlobalClassNames: true } }); + const NoClassNamesTheme = createTheme({ flags: { disableGlobalClassNames: true } }); expect(ReactDOM.renderToStaticMarkup( diff --git a/packages/styling/src/interfaces/ITheme.ts b/packages/styling/src/interfaces/ITheme.ts index f95d49b42d45c..ca2587a7fddab 100644 --- a/packages/styling/src/interfaces/ITheme.ts +++ b/packages/styling/src/interfaces/ITheme.ts @@ -3,7 +3,7 @@ import { IFontStyles } from './IFontStyles'; import { ISemanticColors } from './ISemanticColors'; export interface IThemeFlags { - noGlobalClassNames: boolean; + disableGlobalClassNames: boolean; } export interface ITheme { diff --git a/packages/styling/src/styles/getGlobalClassNames.test.ts b/packages/styling/src/styles/getGlobalClassNames.test.ts index 0292429ec0086..8cf3e4dd0ec3f 100644 --- a/packages/styling/src/styles/getGlobalClassNames.test.ts +++ b/packages/styling/src/styles/getGlobalClassNames.test.ts @@ -3,19 +3,19 @@ import { createTheme } from './theme'; describe('getGlobalClassNames', () => { it('returns an empty string when the global styles are disabled', () => { - const theme = createTheme({ flags: { noGlobalClassNames: true } }); + const theme = createTheme({ flags: { disableGlobalClassNames: true } }); expect(getGlobalClassNames({ root: 'ms-Link' }, theme)).toEqual({}); }); it('returns the correct classNames when global classes are enabled', () => { - const theme = createTheme({ flags: { noGlobalClassNames: false } }); + const theme = createTheme({ flags: { disableGlobalClassNames: false } }); expect(getGlobalClassNames({ root: 'ms-Link' }, theme)).toEqual({ root: 'ms-Link' }); }); it('works for multiple global classes', () => { - const theme = createTheme({ flags: { noGlobalClassNames: false } }); + const theme = createTheme({ flags: { disableGlobalClassNames: false } }); expect(getGlobalClassNames({ root: 'ms-Link my-other-global' }, theme)).toEqual({ root: 'ms-Link my-other-global' }); }); diff --git a/packages/styling/src/styles/getGlobalClassNames.ts b/packages/styling/src/styles/getGlobalClassNames.ts index 0df47e3346697..9099d60ee8cce 100644 --- a/packages/styling/src/styles/getGlobalClassNames.ts +++ b/packages/styling/src/styles/getGlobalClassNames.ts @@ -3,13 +3,13 @@ import { ITheme } from '../interfaces'; export type GlobalClassNames = Record; /** - * Checks for the `flags.noGlobalClassNames` on the `theme` to determine if it should return `classNames` + * Checks for the `flags.disableGlobalClassNames` 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.flags.noGlobalClassNames) { + if (theme.flags.disableGlobalClassNames) { return {}; } diff --git a/packages/styling/src/styles/theme.ts b/packages/styling/src/styles/theme.ts index 51c468db6b87a..abed1b38a98f7 100644 --- a/packages/styling/src/styles/theme.ts +++ b/packages/styling/src/styles/theme.ts @@ -15,7 +15,7 @@ import { import { loadTheme as legacyLoadTheme } from '@microsoft/load-themed-styles'; const defaultThemeFlags: IThemeFlags = { - noGlobalClassNames: false, + disableGlobalClassNames: false, }; let _theme: ITheme = { From 34658422e9d437d66469baf613c66bc74a49cd27 Mon Sep 17 00:00:00 2001 From: Mark Polak Date: Fri, 20 Apr 2018 20:30:12 +0200 Subject: [PATCH 05/14] Remove unnecessary change --- packages/utilities/src/Customizer.test.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/utilities/src/Customizer.test.tsx b/packages/utilities/src/Customizer.test.tsx index 1307925d7d745..cfb3004ce966c 100644 --- a/packages/utilities/src/Customizer.test.tsx +++ b/packages/utilities/src/Customizer.test.tsx @@ -90,4 +90,5 @@ describe('Customizer', () => { )).toEqual('
fieldfield2field3
'); }); + }); From 6ede19f5dd6a86b0581c786332fc72932f4e4ffe Mon Sep 17 00:00:00 2001 From: Mark Polak Date: Fri, 20 Apr 2018 20:30:46 +0200 Subject: [PATCH 06/14] Add change files --- .../mapol-noGlobalClassNames_2018-04-20-18-28.json | 11 +++++++++++ .../mapol-noGlobalClassNames_2018-04-20-18-28.json | 11 +++++++++++ .../mapol-noGlobalClassNames_2018-04-20-18-28.json | 11 +++++++++++ 3 files changed, 33 insertions(+) create mode 100644 common/changes/@uifabric/styling/mapol-noGlobalClassNames_2018-04-20-18-28.json create mode 100644 common/changes/@uifabric/variants/mapol-noGlobalClassNames_2018-04-20-18-28.json create mode 100644 common/changes/office-ui-fabric-react/mapol-noGlobalClassNames_2018-04-20-18-28.json 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 From c10cdda919e5917850e35985523c8ddaad200af6 Mon Sep 17 00:00:00 2001 From: Mark Polak Date: Fri, 20 Apr 2018 20:48:40 +0200 Subject: [PATCH 07/14] Use scoped className as parent instead of global string --- .../office-ui-fabric-react/src/components/Nav/Nav.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 a8abc58222d27..837e590e5b4d3 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 @@ -110,7 +110,7 @@ export const getStyles = ( paddingLeft: leftPadding, paddingRight: rightPadding, selectors: { - '.ms-Nav-compositeLink:hover &': { + '$compositeLink:hover &': { backgroundColor: palette.neutralLighterAlt, color: semanticColors.bodyText }, From f03fb836f19ac2485158541a66df2d064f835ac4 Mon Sep 17 00:00:00 2001 From: Mark Polak Date: Fri, 20 Apr 2018 20:54:20 +0200 Subject: [PATCH 08/14] Update test --- .../src/components/Nav/__snapshots__/Nav.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap index b1e5e6fd2fb61..56243d938fb7b 100644 --- a/packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap @@ -136,7 +136,7 @@ exports[`Nav renders Nav correctly 1`] = ` right: -2px; top: -2px; } - .ms-Nav-compositeLink:hover & { + $compositeLink:hover & { background-color: #f8f8f8; color: #333333; } From bf0be8e54556f8b360660768bcaa78db7a562285 Mon Sep 17 00:00:00 2001 From: Mark Polak Date: Sat, 21 Apr 2018 01:25:06 +0200 Subject: [PATCH 09/14] Sub selectors not supported? :( --- .../office-ui-fabric-react/src/components/Nav/Nav.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 837e590e5b4d3..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 @@ -110,7 +110,7 @@ export const getStyles = ( paddingLeft: leftPadding, paddingRight: rightPadding, selectors: { - '$compositeLink:hover &': { + '.ms-Nav-compositeLink:hover &': { backgroundColor: palette.neutralLighterAlt, color: semanticColors.bodyText }, From 1eaf1aece3a3f1e70ebb07f1b47f6fe81f8a9317 Mon Sep 17 00:00:00 2001 From: Mark Polak Date: Sat, 21 Apr 2018 02:10:23 +0200 Subject: [PATCH 10/14] Snapshot fix --- .../src/components/Nav/__snapshots__/Nav.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap index 56243d938fb7b..b1e5e6fd2fb61 100644 --- a/packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap @@ -136,7 +136,7 @@ exports[`Nav renders Nav correctly 1`] = ` right: -2px; top: -2px; } - $compositeLink:hover & { + .ms-Nav-compositeLink:hover & { background-color: #f8f8f8; color: #333333; } From 276d5a083f93e498e83e893998870d211b1c069f Mon Sep 17 00:00:00 2001 From: Mark Polak Date: Thu, 26 Apr 2018 16:57:43 +0200 Subject: [PATCH 11/14] Bump bundle size --- scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/package.json b/scripts/package.json index 3778537389b20..f29c297d775b0 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.5 kB" + "maxSize": "46.7 kB" } ] } \ No newline at end of file From dc5d7e80ad01e3541b64ef80c2ee503f3856c671 Mon Sep 17 00:00:00 2001 From: Mark Polak Date: Thu, 26 Apr 2018 18:16:21 +0200 Subject: [PATCH 12/14] Put global setting on theme instead of flags --- .../src/components/Link/Link.test.tsx | 2 +- packages/styling/src/interfaces/ITheme.ts | 16 ++++++++++------ packages/styling/src/interfaces/index.ts | 2 +- .../src/styles/getGlobalClassNames.test.ts | 6 +++--- .../styling/src/styles/getGlobalClassNames.ts | 4 ++-- packages/styling/src/styles/theme.ts | 12 ++---------- packages/variants/src/variants.ts | 13 +++---------- 7 files changed, 22 insertions(+), 33 deletions(-) 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 84cb14b6adb3d..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 @@ -34,7 +34,7 @@ describe('Link', () => { }); it('can have the global styles for Link component be disabled', () => { - const NoClassNamesTheme = createTheme({ flags: { disableGlobalClassNames: true } }); + const NoClassNamesTheme = createTheme({ disableGlobalClassNames: true }); expect(ReactDOM.renderToStaticMarkup( diff --git a/packages/styling/src/interfaces/ITheme.ts b/packages/styling/src/interfaces/ITheme.ts index ca2587a7fddab..0af61850fed82 100644 --- a/packages/styling/src/interfaces/ITheme.ts +++ b/packages/styling/src/interfaces/ITheme.ts @@ -2,16 +2,20 @@ import { IPalette } from './IPalette'; import { IFontStyles } from './IFontStyles'; import { ISemanticColors } from './ISemanticColors'; -export interface IThemeFlags { - disableGlobalClassNames: boolean; -} - export interface ITheme { palette: IPalette; fonts: IFontStyles; semanticColors: ISemanticColors; isInverted: boolean; - flags: IThemeFlags; + /** + * 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 { @@ -19,5 +23,5 @@ export interface IPartialTheme { fonts?: Partial; semanticColors?: Partial; isInverted?: boolean; - flags?: Partial; + disableGlobalClassNames?: boolean; } diff --git a/packages/styling/src/interfaces/index.ts b/packages/styling/src/interfaces/index.ts index af790f6a8fa63..f50da76e5038c 100644 --- a/packages/styling/src/interfaces/index.ts +++ b/packages/styling/src/interfaces/index.ts @@ -2,4 +2,4 @@ export { IAnimationStyles, IAnimationVariables } from './IAnimationStyles'; export { IFontStyles } from './IFontStyles'; export { IPalette } from './IPalette'; export { ISemanticColors } from './ISemanticColors'; -export { ITheme, IPartialTheme, IThemeFlags } from './ITheme'; +export { ITheme, IPartialTheme } from './ITheme'; diff --git a/packages/styling/src/styles/getGlobalClassNames.test.ts b/packages/styling/src/styles/getGlobalClassNames.test.ts index 8cf3e4dd0ec3f..54488de8eb945 100644 --- a/packages/styling/src/styles/getGlobalClassNames.test.ts +++ b/packages/styling/src/styles/getGlobalClassNames.test.ts @@ -3,19 +3,19 @@ import { createTheme } from './theme'; describe('getGlobalClassNames', () => { it('returns an empty string when the global styles are disabled', () => { - const theme = createTheme({ flags: { disableGlobalClassNames: true } }); + 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({ flags: { disableGlobalClassNames: false } }); + const theme = createTheme({ disableGlobalClassNames: false }); expect(getGlobalClassNames({ root: 'ms-Link' }, theme)).toEqual({ root: 'ms-Link' }); }); it('works for multiple global classes', () => { - const theme = createTheme({ flags: { disableGlobalClassNames: false } }); + const theme = createTheme({ disableGlobalClassNames: false }); expect(getGlobalClassNames({ root: 'ms-Link my-other-global' }, theme)).toEqual({ root: 'ms-Link my-other-global' }); }); diff --git a/packages/styling/src/styles/getGlobalClassNames.ts b/packages/styling/src/styles/getGlobalClassNames.ts index 9099d60ee8cce..dda97a89f6918 100644 --- a/packages/styling/src/styles/getGlobalClassNames.ts +++ b/packages/styling/src/styles/getGlobalClassNames.ts @@ -3,13 +3,13 @@ import { ITheme } from '../interfaces'; export type GlobalClassNames = Record; /** - * Checks for the `flags.disableGlobalClassNames` on the `theme` to determine if it should return `classNames` + * 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.flags.disableGlobalClassNames) { + if (theme.disableGlobalClassNames) { return {}; } diff --git a/packages/styling/src/styles/theme.ts b/packages/styling/src/styles/theme.ts index a5c1d6e406ec6..e6d6769ccd09a 100644 --- a/packages/styling/src/styles/theme.ts +++ b/packages/styling/src/styles/theme.ts @@ -3,7 +3,6 @@ import { IPalette, ISemanticColors, ITheme, - IThemeFlags, IPartialTheme } from '../interfaces/index'; import { @@ -14,16 +13,12 @@ import { } from './DefaultPalette'; import { loadTheme as legacyLoadTheme } from '@microsoft/load-themed-styles'; -const defaultThemeFlags: IThemeFlags = { - disableGlobalClassNames: false, -}; - let _theme: ITheme = { palette: DefaultPalette, semanticColors: _makeSemanticColorsFromPalette(DefaultPalette, false, false), fonts: DefaultFontStyles, isInverted: false, - flags: defaultThemeFlags, + disableGlobalClassNames: false, }; let _onThemeChangeCallbacks: Array<(theme: ITheme) => void> = []; @@ -124,10 +119,7 @@ export function createTheme(theme: IPartialTheme, depComments: boolean = false): }, semanticColors: newSemanticColors, isInverted: !!theme.isInverted, - flags: { - ...defaultThemeFlags, - ...theme.flags, - } + disableGlobalClassNames: !!theme.disableGlobalClassNames, }; } diff --git a/packages/variants/src/variants.ts b/packages/variants/src/variants.ts index c3cafc8f65a82..5ac76334b4368 100644 --- a/packages/variants/src/variants.ts +++ b/packages/variants/src/variants.ts @@ -2,7 +2,6 @@ import { IPalette, ISemanticColors, ITheme, - IThemeFlags, IPartialTheme } from '@uifabric/styling/lib/index'; import { createTheme } from '@uifabric/styling/lib/index'; @@ -10,14 +9,12 @@ import { createTheme } from '@uifabric/styling/lib/index'; function makeThemeFromPartials( originalTheme: IPartialTheme, partialPalette: Partial, - partialSemantic: Partial, - partialFlags: Partial): ITheme { + partialSemantic: Partial): ITheme { return createTheme({ ...originalTheme, ...{ palette: { ...originalTheme.palette, ...partialPalette }, semanticColors: { ...originalTheme.semanticColors, ...partialSemantic }, - flags: { ...partialFlags } } }); } @@ -70,9 +67,7 @@ export function getNeutralVariant(theme: IPartialTheme): ITheme { bodyBackground: p.neutralLighter }; - const partialFlags = {}; - - return makeThemeFromPartials(theme, partialPalette, partialSemantic, partialFlags); + return makeThemeFromPartials(theme, partialPalette, partialSemantic); } /** @@ -130,9 +125,7 @@ export function getSoftVariant(theme: IPartialTheme): ITheme { // inputFocusBorderAlt: p.themePrimary, }; - const partialFlags = {}; - - return makeThemeFromPartials(theme, partialPalette, partialSemantic, partialFlags); + return makeThemeFromPartials(theme, partialPalette, partialSemantic); } /** From e8d732df0eddabed3afb94b70b25fb012fcf133a Mon Sep 17 00:00:00 2001 From: Mark Polak Date: Thu, 26 Apr 2018 20:50:56 +0200 Subject: [PATCH 13/14] Increase bundle size --- scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/package.json b/scripts/package.json index f29c297d775b0..6e444f825b63d 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.7 kB" + "maxSize": "46.8 kB" } ] } \ No newline at end of file From da15818fa4bd49394cdd7a252939f4a29b4e2257 Mon Sep 17 00:00:00 2001 From: Mark Polak Date: Fri, 27 Apr 2018 12:20:17 +0200 Subject: [PATCH 14/14] Increase bundle size --- scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/package.json b/scripts/package.json index ab0fd8cecd02a..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