diff --git a/common/changes/@uifabric/styling/mergeStyles-Overlay_2018-02-14-21-47.json b/common/changes/@uifabric/styling/mergeStyles-Overlay_2018-02-14-21-47.json new file mode 100644 index 0000000000000..471bf31aa6df8 --- /dev/null +++ b/common/changes/@uifabric/styling/mergeStyles-Overlay_2018-02-14-21-47.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/styling", + "comment": "Add whiteTranslucent40 to palette", + "type": "patch" + } + ], + "packageName": "@uifabric/styling", + "email": "v-jojanz@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/mergeStyles-Overlay_2018-02-14-21-47.json b/common/changes/office-ui-fabric-react/mergeStyles-Overlay_2018-02-14-21-47.json new file mode 100644 index 0000000000000..90c28ae80be9c --- /dev/null +++ b/common/changes/office-ui-fabric-react/mergeStyles-Overlay_2018-02-14-21-47.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Convert overlay and examples to mergeStyles", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "v-jojanz@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Overlay/Overlay.base.tsx b/packages/office-ui-fabric-react/src/components/Overlay/Overlay.base.tsx new file mode 100644 index 0000000000000..baa25fc6f8f53 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Overlay/Overlay.base.tsx @@ -0,0 +1,50 @@ +import * as React from 'react'; +import { + BaseComponent, + customizable, + classNamesFunction, + getNativeProps, + divProperties, + enableBodyScroll, + disableBodyScroll +} from '../../Utilities'; +import { + IOverlayProps, + IOverlayStyleProps, + IOverlayStyles, +} from './Overlay.types'; + +const getClassNames = classNamesFunction(); + +@customizable('Overlay', ['theme']) +export class OverlayBase extends BaseComponent { + + public componentDidMount() { + disableBodyScroll(); + } + + public componentWillUnmount() { + enableBodyScroll(); + } + + public render() { + const { + isDarkThemed: isDark, + className, + theme, + getStyles + } = this.props; + + const divProps = getNativeProps(this.props, divProperties); + + const classNames = getClassNames(getStyles!, { + theme: theme!, + className, + isDark, + }); + + return ( +
+ ); + } +} diff --git a/packages/office-ui-fabric-react/src/components/Overlay/Overlay.scss b/packages/office-ui-fabric-react/src/components/Overlay/Overlay.scss deleted file mode 100644 index 19c709336ac24..0000000000000 --- a/packages/office-ui-fabric-react/src/components/Overlay/Overlay.scss +++ /dev/null @@ -1,33 +0,0 @@ -@import '../../common/common'; - -// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. - -// -// Office UI Fabric -// -------------------------------------------------- -// Modal overlay styles - -.root { - background-color: $ms-color-whiteTranslucent40; - position: absolute; - bottom: 0; - left: 0; - right: 0; - top: 0; - -//== Modifier: Hidden overlay - // - &.rootIsNone { - visibility: hidden; - } - - //== Modifier: Dark overlay - // - &.rootIsDark { - background-color: $ms-color-blackTranslucent40; - } - - @include high-contrast { - border: 1px solid WindowText; - } -} 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 new file mode 100644 index 0000000000000..377847ff2ff1e --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Overlay/Overlay.styles.ts @@ -0,0 +1,52 @@ +import { IOverlayStyleProps, IOverlayStyles } from './Overlay.types'; +import { + IStyle, + ITheme, + HighContrastSelector, +} from '../../Styling'; + +export const getStyles = ( + props: IOverlayStyleProps +): IOverlayStyles => { + const { + className, + theme, + isNone, + isDark, + } = props; + + const { palette, semanticColors } = theme; + + return ({ + root: [ + 'ms-Overlay', + { + backgroundColor: palette.whiteTranslucent40, + top: 0, + right: 0, + bottom: 0, + left: 0, + position: 'absolute', + + selectors: { + [HighContrastSelector]: { + border: '1px solid WindowText', + } + } + }, + + isNone && { + visibility: 'hidden', + }, + + isDark && [ + 'ms-Overlay--dark', + { + backgroundColor: palette.blackTranslucent40, + } + ], + + className + ], + }); +}; diff --git a/packages/office-ui-fabric-react/src/components/Overlay/Overlay.tsx b/packages/office-ui-fabric-react/src/components/Overlay/Overlay.tsx index a76d03bef5c66..990d2dde00143 100644 --- a/packages/office-ui-fabric-react/src/components/Overlay/Overlay.tsx +++ b/packages/office-ui-fabric-react/src/components/Overlay/Overlay.tsx @@ -1,41 +1,13 @@ -import * as React from 'react'; +import { styled } from '../../Utilities'; import { - BaseComponent, - css, - getNativeProps, - divProperties, - enableBodyScroll, - disableBodyScroll -} from '../../Utilities'; -import { IOverlayProps } from './Overlay.types'; - -import * as stylesImport from './Overlay.scss'; -const styles: any = stylesImport; - -export class Overlay extends BaseComponent { - - public componentDidMount() { - disableBodyScroll(); - } - - public componentWillUnmount() { - enableBodyScroll(); - } - - public render() { - let { isDarkThemed, className } = this.props; - let divProps = getNativeProps(this.props, divProperties); - - let modifiedClassName = css( - 'ms-Overlay', - styles.root, - className, - { - ['ms-Overlay--dark ' + styles.rootIsDark]: isDarkThemed, - }); - - return ( -
- ); - } -} + IOverlayProps, + IOverlayStyleProps, + IOverlayStyles +} from './Overlay.types'; +import { OverlayBase } from './Overlay.base'; +import { getStyles } from './Overlay.styles'; + +export const Overlay = styled( + OverlayBase, + getStyles +); diff --git a/packages/office-ui-fabric-react/src/components/Overlay/Overlay.types.ts b/packages/office-ui-fabric-react/src/components/Overlay/Overlay.types.ts index f93363283a0dd..2710d2ee4bb21 100644 --- a/packages/office-ui-fabric-react/src/components/Overlay/Overlay.types.ts +++ b/packages/office-ui-fabric-react/src/components/Overlay/Overlay.types.ts @@ -1,4 +1,7 @@ import * as React from 'react'; +import { OverlayBase } from './Overlay.base'; +import { IStyle, ITheme } from '../../Styling'; +import { IStyleFunction } from '../../Utilities'; export interface IOverlay { @@ -6,14 +9,60 @@ export interface IOverlay { export interface IOverlayProps extends React.HTMLAttributes { /** - * Optional callback to access the IOverlay interface. Use this instead of ref for accessing - * the public methods and properties of the component. + * Gets the component ref. */ - componentRef?: (component: IOverlay) => void; + componentRef?: (component: IOverlayProps) => void; + + /** + * Call to provide customized styling that will layer on top of the variant rules + */ + getStyles?: IStyleFunction; + + /** + * Theme provided by HOC. + */ + theme?: ITheme; + + /** + * Additional css class to apply to the Overlay + * @defaultvalue undefined + */ + className?: string; /** * Whether to use the dark-themed overlay. * @defaultvalue false */ isDarkThemed?: boolean; -} \ No newline at end of file + + onClick?: () => void; +} + +export interface IOverlayStyleProps { + /** + * Accept theme prop. + */ + theme: ITheme; + + /** + * Accept custom classNames + */ + className?: string; + + /** + * Is overlay visible + */ + isNone?: boolean; + + /** + * Is overlay dark themed + */ + isDark?: boolean; +} + +export interface IOverlayStyles { + /** + * Style for the root element. + */ + root: IStyle; +} diff --git a/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Dark.Example.tsx b/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Dark.Example.tsx index 7c0f82f43bbe2..5e232b15d8f3c 100644 --- a/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Dark.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Dark.Example.tsx @@ -1,9 +1,18 @@ import * as React from 'react'; -import { autobind } from 'office-ui-fabric-react/lib/Utilities'; +import { + autobind, + IStyleFunction, + classNamesFunction +} from '../../../Utilities'; import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; -import { Overlay } from 'office-ui-fabric-react/lib/Overlay'; -import './Overlay.Example.scss'; +import { Overlay } from '../Overlay'; + +import { getStyles, IOverlayExampleStyles } from './Overlay.Example.styles'; + +export interface IOverlayDarkExampleProps { + getStyles?: IStyleFunction<{}, IOverlayExampleStyles>; +} export class OverlayDarkExample extends React.Component<{}, { isOverlayVisible: boolean; @@ -15,7 +24,9 @@ export class OverlayDarkExample extends React.Component<{}, { } public render() { - let { isOverlayVisible } = this.state; + const { isOverlayVisible } = this.state; + const getClassNames = classNamesFunction<{}, IOverlayExampleStyles>(); + const classNames = getClassNames(getStyles); return (
@@ -28,7 +39,7 @@ export class OverlayDarkExample extends React.Component<{}, { isDarkThemed={ true } onClick={ this._setVisibilityFalse } > -
+

I am content within the overlay.

diff --git a/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Example.scss b/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Example.scss deleted file mode 100644 index 7fe7f8a883af7..0000000000000 --- a/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Example.scss +++ /dev/null @@ -1,14 +0,0 @@ -:global { - - .OverlayExample-content { - position: absolute; - background: blue; - color: white; - position: absolute; - bottom: 0; - left: 0; - right: 0; - padding: 10px; - } - -} diff --git a/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Example.styles.ts b/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Example.styles.ts new file mode 100644 index 0000000000000..da0fa19e10345 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Example.styles.ts @@ -0,0 +1,23 @@ +import { IStyle } from '../../../Styling'; + +export interface IOverlayExampleStyles { + root: IStyle; +} + +export const getStyles = (): IOverlayExampleStyles => { + + return ({ + root: [ + 'OverlayExample-content', + { + background: 'blue', + bottom: '0', + color: 'white', + left: '0', + padding: '10px', + position: 'absolute', + right: '0', + } + ] + }); +}; diff --git a/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Light.Example.tsx b/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Light.Example.tsx index bbfd3f6889c87..b563f5cba3af6 100644 --- a/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Light.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Light.Example.tsx @@ -1,8 +1,18 @@ import * as React from 'react'; +import { + autobind, + IStyleFunction, + classNamesFunction +} from '../../../Utilities'; import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; -import { Overlay } from 'office-ui-fabric-react/lib/Overlay'; -import './Overlay.Example.scss'; +import { Overlay } from '../Overlay'; + +import { getStyles, IOverlayExampleStyles } from './Overlay.Example.styles'; + +export interface IOverlayLightExampleProps { + getStyles?: IStyleFunction<{}, IOverlayExampleStyles>; +} export class OverlayLightExample extends React.Component<{}, { isOverlayVisible: boolean; @@ -10,22 +20,23 @@ export class OverlayLightExample extends React.Component<{}, { constructor(props: {}) { super(props); - this._onClick = this._onClick.bind(this); - - this.state = { - isOverlayVisible: false - }; + this.state = { isOverlayVisible: false }; } public render() { - let { isOverlayVisible } = this.state; + const { isOverlayVisible } = this.state; + const getClassNames = classNamesFunction<{}, IOverlayExampleStyles>(); + const classNames = getClassNames(getStyles); return (
- Show the overlay + { isOverlayVisible && ( - -
+ +

I am content within the overlay.

 @@ -34,9 +45,13 @@ export class OverlayLightExample extends React.Component<{}, { ); } - private _onClick() { - this.setState({ - isOverlayVisible: !this.state.isOverlayVisible - }); + @autobind + private _setVisibilityFalse(): void { + this.setState({ isOverlayVisible: false }); + } + + @autobind + private _toggleOverlay(): void { + this.setState({ isOverlayVisible: !this.state.isOverlayVisible }); } } diff --git a/packages/office-ui-fabric-react/src/components/Overlay/index.ts b/packages/office-ui-fabric-react/src/components/Overlay/index.ts index 34cc685fc4bb3..8dbb699616e0b 100644 --- a/packages/office-ui-fabric-react/src/components/Overlay/index.ts +++ b/packages/office-ui-fabric-react/src/components/Overlay/index.ts @@ -1,2 +1,3 @@ export * from './Overlay'; +export * from './Overlay.base'; export * from './Overlay.types'; diff --git a/packages/styling/src/interfaces/IPalette.ts b/packages/styling/src/interfaces/IPalette.ts index e7e19aa3b3785..95aa41a0a1b7f 100644 --- a/packages/styling/src/interfaces/IPalette.ts +++ b/packages/styling/src/interfaces/IPalette.ts @@ -123,6 +123,11 @@ export interface IPalette { */ white: string; + /** + * Color code for whiteTranslucent40 + */ + whiteTranslucent40: string; + /** * Color code for yellow. */ diff --git a/packages/styling/src/styles/DefaultPalette.ts b/packages/styling/src/styles/DefaultPalette.ts index a543a5ce866b0..1a7fd7802cf6a 100644 --- a/packages/styling/src/styles/DefaultPalette.ts +++ b/packages/styling/src/styles/DefaultPalette.ts @@ -26,6 +26,7 @@ export const DefaultPalette: IPalette = { neutralLighterAlt: '#f8f8f8', accent: '#0078d7', white: '#ffffff', + whiteTranslucent40: 'rgba(255,255,255,.4)', yellow: '#ffb900', yellowLight: '#fff100', orange: '#d83b01',