Convert Check to mergeStyles

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": "[email protected]"
+}

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<ICheckStyleProps, ICheckStyles>();
+
+@customizable('Check', ['theme'])
+export class CheckBase extends BaseComponent<ICheckProps, {}> {
+  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 (
+      <div className={ classNames.root } >
+        <Icon iconName='CircleRing' className={ classNames.circle } />
+        <Icon iconName='StatusCircleCheckmark' className={ classNames.check } />
+      </div>
+    );
+  }
+}

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'
+          }
+        }
+      }
+    ]
+  });
+};

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<Check> {
-  /**
-   * 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<ICheckProps, {}> {
-  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 (
-      <div
-        className={ css(
-          'ms-Check',
-          styles.root,
-          {
-            [`is-checked ${styles.rootIsChecked}`]: isChecked
-          }
-        ) }
-      >
-        { <Icon
-          className={ 'ms-Check-circle ' + styles.circle }
-          iconName={ 'CircleRing' }
-        /> }
-        { <Icon
-          className={ 'ms-Check-check ' + styles.check }
-          iconName={ 'StatusCircleCheckmark' }
-        /> }
-      </div>
-    );
-  }
-}
+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<ICheckProps, ICheckStyleProps, ICheckStyles>(
+  CheckBase,
+  getStyles
+);

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<CheckBase> {
+  /**
+   * 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<ICheckStyleProps, ICheckStyles>;
+
+  /**
+   * 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;
+}

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

@@ -1 +1,3 @@
-export * from './Check';
+export * from './Check';
+export * from './Check.base';
+export * from './Check.types';