diff --git a/common/changes/office-ui-fabric-react/mergeStyles-Check_2018-02-03-01-48.json b/common/changes/office-ui-fabric-react/mergeStyles-Check_2018-02-03-01-48.json new file mode 100644 index 00000000000000..43bcbb50d623ad --- /dev/null +++ b/common/changes/office-ui-fabric-react/mergeStyles-Check_2018-02-03-01-48.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Convert Check 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/Check/Check.base.tsx b/packages/office-ui-fabric-react/src/components/Check/Check.base.tsx new file mode 100644 index 00000000000000..d0a679aaf1ae28 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Check/Check.base.tsx @@ -0,0 +1,43 @@ +import * as React from 'react'; +import { + BaseComponent, + classNamesFunction, + customizable, +} from '@uifabric/utilities'; +import { + ICheckProps, + ICheckStyleProps, + ICheckStyles +} from './Check.types'; +import { Icon } from '../../Icon'; +import { getStyles } from './Check.styles'; + +const getClassNames = classNamesFunction(); + +@customizable('Check', ['theme']) +export class CheckBase extends BaseComponent { + public static defaultProps: ICheckProps = { + checked: false + }; + + public shouldComponentUpdate(newProps: ICheckProps) { + return this.props.checked !== newProps.checked; + } + + public render(): JSX.Element { + const { + checked, + className, + theme + } = this.props; + + const classNames = getClassNames(getStyles!, { theme: theme!, className, checked }); + + return ( +
+ + +
+ ); + } +} 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 new file mode 100644 index 00000000000000..94e7c1af848b4c --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Check/Check.styles.ts @@ -0,0 +1,142 @@ +import { ICheckStyleProps, ICheckStyles } from './Check.types'; +import { + getTheme, + HighContrastSelector, + IStyle, + ITheme, +} from '@uifabric/styling'; +import { memoizeFunction } from '@uifabric/utilities'; + +export const getStyles = ( + props: ICheckStyleProps +): ICheckStyles => { + const { + checkBoxHeight = '18px', + checked, + className, + theme, + } = props; + + const { palette, semanticColors } = theme; + + const sharedCircleCheck: IStyle = { + fontSize: checkBoxHeight, + position: 'absolute', + left: 0, + top: 0, + width: checkBoxHeight, + height: checkBoxHeight, + textAlign: 'center', + verticalAlign: 'middle' + }; + + return ({ + root: [ + 'ms-Check', + + { + // lineHeight currently needs to be a string to output without 'px' + lineHeight: '1', + width: checkBoxHeight, + height: checkBoxHeight, + verticalAlign: 'top', + position: 'relative', + userSelect: 'none', + + selectors: { + ':before': { + content: '""', + position: 'absolute', + top: '1px', + right: '1px', + bottom: '1px', + left: '1px', + borderRadius: '50%', + opacity: 1, + background: semanticColors.bodyBackground, + }, + + /** + * TODO: Come back to this once .checkHost has been + * converted to mergeStyles + */ + '.checkHost:hover &, .checkHost:focus &, &:hover, &:focus': { + opacity: 1 + } + } + }, + + checked && [ + 'is-checked', + { + selectors: { + ':before': { + background: palette.themePrimary, + opacity: 1, + selectors: { + [HighContrastSelector]: { + background: 'Window' + } + } + } + } + }, + ], + className + ], + + circle: [ + 'ms-Check-circle', + sharedCircleCheck, + + { + color: palette.neutralTertiaryAlt, + + selectors: { + [HighContrastSelector]: { + color: 'WindowText' + } + } + }, + + checked && { + color: palette.white + } + ], + + check: [ + 'ms-Check-check', + sharedCircleCheck, + + { + opacity: 0, + color: palette.neutralTertiaryAlt, + fontSize: '16px', + left: '.5px', + + selectors: { + ':hover': { + opacity: 1 + }, + + [HighContrastSelector]: { + MsHighContrastAdjust: 'none' + } + } + }, + + checked && { + opacity: 1, + color: palette.white, + fontWeight: 900, + + selectors: { + [HighContrastSelector]: { + border: 'none', + color: 'WindowText' + } + } + } + ] + }); +}; diff --git a/packages/office-ui-fabric-react/src/components/Check/Check.tsx b/packages/office-ui-fabric-react/src/components/Check/Check.tsx index 9f4357908ad393..5ad63f1c407b88 100644 --- a/packages/office-ui-fabric-react/src/components/Check/Check.tsx +++ b/packages/office-ui-fabric-react/src/components/Check/Check.tsx @@ -1,63 +1,13 @@ -import * as React from 'react'; -import { BaseComponent, css } from '../../Utilities'; -import { Icon } from '../../Icon'; -import * as stylesImport from './Check.scss'; -const styles: any = stylesImport; - -export interface ICheckProps extends React.Props { - /** - * Gets the component ref. - */ - componentRef?: () => void; - - /** - * Whether or not this menu item is currently checked. - * @defaultvalue false - */ - checked?: boolean; - /** - * Deprecated at v0.65.1 and will be removed by v 1.0. Use 'checked' instead. - * @deprecated - */ - isChecked?: boolean; - - alwaysShowCheck?: boolean; -} - -export class Check extends BaseComponent { - public static defaultProps = { - isChecked: false - }; - - public shouldComponentUpdate(newProps: ICheckProps) { - return this.props.isChecked !== newProps.isChecked || this.props.checked !== newProps.checked; - } - - public render() { - let { isChecked } = this.props; - const { checked } = this.props; - - isChecked = isChecked || checked; - - return ( -
- { } - { } -
- ); - } -} +import { styled } from '@uifabric/utilities'; +import { + ICheckProps, + ICheckStyleProps, + ICheckStyles +} from './Check.types'; +import { CheckBase } from './Check.base'; +import { getStyles } from './Check.styles'; + +export const Check = styled( + CheckBase, + getStyles +); diff --git a/packages/office-ui-fabric-react/src/components/Check/Check.types.ts b/packages/office-ui-fabric-react/src/components/Check/Check.types.ts new file mode 100644 index 00000000000000..eaee9b82f93ccc --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Check/Check.types.ts @@ -0,0 +1,75 @@ +import * as React from 'react'; +import { CheckBase } from './Check.base'; +import { IStyle, ITheme } from '@uifabric/styling'; +import { IStyleFunction } from '@uifabric/utilities'; + +export interface ICheckProps extends React.Props { + /** + * Gets the component ref. + */ + componentRef?: (component: ICheckProps) => void; + + /** + * Whether or not this menu item is currently checked. + * @defaultvalue false + */ + checked?: boolean; + + /** + * Call to provide customized styling that will layer on top of the variant rules + */ + getStyles?: IStyleFunction; + + /** + * Flag to always show the check icon. Not currently working. + */ + alwaysShowCheck?: boolean; + + /** + * Theme provided by HOC. + */ + theme?: ITheme; + + /** + * Additional css class to apply to the Check + * @defaultvalue undefined + */ + className?: string; +} + +export interface ICheckStyleProps { + /** + * Accept theme prop. + */ + theme: ITheme; + + /** + * Accept custom classNames + */ + className?: string; + + /** + * Accept custom checkBox size in pixels. + * @defaultvalue '18px' + */ + checkBoxHeight?: string; + + checked?: boolean; +} + +export interface ICheckStyles { + /** + * Style for the root element. + */ + root: IStyle; + + /** + * The 'check' icon styles. + */ + check: IStyle; + + /** + * The 'circle' icon styles. + */ + circle: IStyle; +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Check/index.ts b/packages/office-ui-fabric-react/src/components/Check/index.ts index 96b6c5ff964240..8be72c0910ca84 100644 --- a/packages/office-ui-fabric-react/src/components/Check/index.ts +++ b/packages/office-ui-fabric-react/src/components/Check/index.ts @@ -1 +1,3 @@ -export * from './Check'; \ No newline at end of file +export * from './Check'; +export * from './Check.base'; +export * from './Check.types';