From 6a250b7fcf572339f89b65b6711c8f3d9f1731fc Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Thu, 1 Feb 2018 17:46:17 -0800 Subject: [PATCH 01/20] Separate types to types.ts file. Start converting check to mergeStyles --- .../src/components/Check/Check.tsx | 21 +---------- .../src/components/Check/Check.types.ts | 36 +++++++++++++++++++ 2 files changed, 37 insertions(+), 20 deletions(-) create mode 100644 packages/office-ui-fabric-react/src/components/Check/Check.types.ts 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 0141ca290999de..00776c454469fe 100644 --- a/packages/office-ui-fabric-react/src/components/Check/Check.tsx +++ b/packages/office-ui-fabric-react/src/components/Check/Check.tsx @@ -2,28 +2,9 @@ import * as React from 'react'; import { BaseComponent, css } from '../../Utilities'; import { Icon } from '../../Icon'; import * as stylesImport from './Check.scss'; +import { ICheckProps } from './Check.types'; 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 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..70c765ac8bd480 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Check/Check.types.ts @@ -0,0 +1,36 @@ +import * as React from 'react'; +import { Check } from './Check'; +import { IStyle, ITheme } from '@uifabric/Styling'; + +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 interface ICheckStyleProps { + theme?: ITheme; + checkBoxHeight?: string; +} + +export interface ICheckStyles { + root?: IStyle; + rootIsChecked?: IStyle; + check?: IStyle; + checkHost?: IStyle; + circle?: IStyle; +} \ No newline at end of file From b35ac6526afbc2f7046263c21250640bcc000f73 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Thu, 1 Feb 2018 17:47:06 -0800 Subject: [PATCH 02/20] Convert bulk scss to mergeStyles. Needs to be reviewed, this is rough. --- .../src/components/Check/Check.styles.ts | 142 ++++++++++++++++++ 1 file changed, 142 insertions(+) create mode 100644 packages/office-ui-fabric-react/src/components/Check/Check.styles.ts 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..10e71629123d76 --- /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 { + concatStyleSets, + setUserSelect, + getTheme, + ITheme, + IStyle, + HighContrastSelector +} from '@uifabric/styling'; +import { memoizeFunction } from '@uifabric/utilities'; + +const DEFAULT_CHECKBOX_HEIGHT: string = '18px'; + +export const getStyles = ( + props: ICheckStyleProps +): ICheckStyles => { + const { + checkBoxHeight = DEFAULT_CHECKBOX_HEIGHT, + theme = getTheme() + } = props; + const { palette, semanticColors } = theme; + const _circle_check: IStyle = { + fontSize: checkBoxHeight, + position: 'absolute', + left: 0, + top: 0, + width: checkBoxHeight, + height: checkBoxHeight, + textAlign: 'center', + verticalAlign: 'middle' + }; + + return ({ + root: [ + setUserSelect('none'), + { + lineHeight: 1, + width: checkBoxHeight, + height: checkBoxHeight, + verticalAlign: 'top', + position: 'relative', + + selectors: { + ':before': { + content: '""', + position: 'absolute', + top: '1px', + right: '1px', + bottom: '1px', + left: '1px', + borderRadius: '50%', + opacity: 1, + background: semanticColors.bodyBackground, + }, + + rootIsChecked: { + selectors: { + ':before': { + background: palette.themePrimary, + opacity: 1, + selectors: { + [HighContrastSelector]: { + background: 'Window' + } + } + } + } + }, + check: { + opacity: 0 + }, + checkHost: { + selectors: { + ':hover &': { + opacity: 1 + }, + ':focus &': { + opacity: 1 + }, + ':hover': { + opacity: 1 + }, + ':focus': { + opacity: 1 + }, + rootIsChecked: { + selectors: { + check: { + opacity: 1 + } + } + } + } + } + } + } + ], + + circle: { + ..._circle_check, + color: palette.neutralTertiaryAlt, + selectors: { + [HighContrastSelector]: { + color: 'WindowText' + } + } + }, + + check: { + ..._circle_check, + color: palette.neutralTertiaryAlt, + fontSize: '16px', + left: '.5px', + + selectors: { + [HighContrastSelector]: { + MsHighContrastAdjust: 'none' + } + } + }, + + rootIsChecked: { + selectors: { + circle: { + color: palette.white + }, + + check: { + color: palette.white, + fontWeight: 900, + + selectors: { + [HighContrastSelector]: { + border: 'none', + color: 'WindowText' + } + } + } + } + }, + }); +}; From fe0a2cc1fee18eb7a40892028f8369efe6fa0c42 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Thu, 1 Feb 2018 17:59:48 -0800 Subject: [PATCH 03/20] Add comments for style types. --- .../src/components/Check/Check.types.ts | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) 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 index 70c765ac8bd480..67a21e0db884c7 100644 --- a/packages/office-ui-fabric-react/src/components/Check/Check.types.ts +++ b/packages/office-ui-fabric-react/src/components/Check/Check.types.ts @@ -23,14 +23,41 @@ export interface ICheckProps extends React.Props { } export interface ICheckStyleProps { + /** + * Accept theme prop. Defaults to getTheme() function. + * @defaultvalue getTheme() + */ theme?: ITheme; + /** + * Accept custom checkBox size in pixels. + * @defaultvalue '18px' + */ checkBoxHeight?: string; } export interface ICheckStyles { + /** + * Style for the root element. + */ root?: IStyle; + + /** + * Change child element styles based on isChecked state. + */ rootIsChecked?: IStyle; + + /** + * The 'check' icon styles. + */ check?: IStyle; + + /** + * ??? Has something to do with DetailsList row??? + */ checkHost?: IStyle; + + /** + * The 'circle' icon styles. + */ circle?: IStyle; } \ No newline at end of file From 077aec67fe32480009d778bbc06f371203ea69ce Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Fri, 2 Feb 2018 13:46:53 -0800 Subject: [PATCH 04/20] Convert Check to mergeStyle pattern --- .../src/components/Check/Check.base.tsx | 63 +++++++++++++++++++ .../src/components/Check/Check.tsx | 56 ++++------------- 2 files changed, 76 insertions(+), 43 deletions(-) create mode 100644 packages/office-ui-fabric-react/src/components/Check/Check.base.tsx 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..508ec883c30d16 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Check/Check.base.tsx @@ -0,0 +1,63 @@ +import * as React from 'react'; +import { + BaseComponent, + classNamesFunction, + css, + customizable, +} from '@uifabric/utilities'; +import { + ICheckProps, + ICheckStyleProps, + ICheckStyles +} from './Check.types'; +import { Icon } from '../../Icon'; +import { getStyles } from './Check.styles'; + +// import * as stylesImport from './Check.scss'; +// const styles: any = stylesImport; +const getClassNames = classNamesFunction(); + +@customizable('Check', ['theme']) +export class CheckBase extends BaseComponent { + public static defaultProps: ICheckProps = { + isChecked: false + }; + + public shouldComponentUpdate(newProps: ICheckProps) { + return this.props.isChecked !== newProps.isChecked || this.props.checked !== newProps.checked; + } + + public render(): JSX.Element { + const { + checked, + className, + theme + } = this.props; + + const classNames = getClassNames(getStyles!, { theme: theme!, className, checked }); + + return ( +
+ { Icon({ + className: ` + ms-Check-circle ${classNames.circle} + `, + iconName: 'CircleRing' + }) } + { Icon({ + className: ` + ms-Check-check ${classNames.check} + `, + iconName: 'StatusCircleCheckmark' + }) } +
+ ); + } +} 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 00776c454469fe..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,43 +1,13 @@ -import * as React from 'react'; -import { BaseComponent, css } from '../../Utilities'; -import { Icon } from '../../Icon'; -import * as stylesImport from './Check.scss'; -import { ICheckProps } from './Check.types'; -const styles: any = stylesImport; - -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, checked } = this.props; - - isChecked = isChecked || checked; - - return ( -
- { Icon({ - className: 'ms-Check-circle ' + styles.circle, - iconName: 'CircleRing' - }) } - { Icon({ - className: 'ms-Check-check ' + styles.check, - iconName: 'StatusCircleCheckmark' - }) } -
- ); - } -} +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 +); From 653e51696e8a8983146c6bb539ff144c4b7f682a Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Fri, 2 Feb 2018 13:47:12 -0800 Subject: [PATCH 05/20] Add more props and types --- .../src/components/Check/Check.types.ts | 37 +++++++++++++++++-- 1 file changed, 33 insertions(+), 4 deletions(-) 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 index 67a21e0db884c7..bac1be634d88f2 100644 --- a/packages/office-ui-fabric-react/src/components/Check/Check.types.ts +++ b/packages/office-ui-fabric-react/src/components/Check/Check.types.ts @@ -1,25 +1,46 @@ import * as React from 'react'; -import { Check } from './Check'; +import { CheckBase } from './Check.base'; import { IStyle, ITheme } from '@uifabric/Styling'; +import { IStyleFunction } from '@uifabric/utilities'; -export interface ICheckProps extends React.Props { +export interface ICheckProps extends React.Props { /** * Gets the component ref. */ - componentRef?: () => void; + componentRef?: (component: ICheckProps) => 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; + /** + * 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 { @@ -27,12 +48,20 @@ export interface ICheckStyleProps { * Accept theme prop. Defaults to getTheme() function. * @defaultvalue getTheme() */ - theme?: ITheme; + theme: ITheme; + + /** + * Accept custom classNames + */ + className?: string; + /** * Accept custom checkBox size in pixels. * @defaultvalue '18px' */ checkBoxHeight?: string; + + checked?: boolean; } export interface ICheckStyles { From 7043de224f8e85561902151125247129cafe9d6e Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Fri, 2 Feb 2018 13:47:41 -0800 Subject: [PATCH 06/20] Fix most style conversions. --- .../src/components/Check/Check.styles.ts | 136 ++++++++---------- 1 file changed, 63 insertions(+), 73 deletions(-) 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 10e71629123d76..1a83c5c584b71b 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 @@ -1,11 +1,11 @@ import { ICheckStyleProps, ICheckStyles } from './Check.types'; import { concatStyleSets, - setUserSelect, getTheme, + HighContrastSelector, ITheme, IStyle, - HighContrastSelector + setUserSelect, } from '@uifabric/styling'; import { memoizeFunction } from '@uifabric/utilities'; @@ -16,10 +16,13 @@ export const getStyles = ( ): ICheckStyles => { const { checkBoxHeight = DEFAULT_CHECKBOX_HEIGHT, - theme = getTheme() + theme, + checked } = props; + const { palette, semanticColors } = theme; - const _circle_check: IStyle = { + + const _sharedCircleCheck: IStyle = { fontSize: checkBoxHeight, position: 'absolute', left: 0, @@ -53,42 +56,24 @@ export const getStyles = ( background: semanticColors.bodyBackground, }, - rootIsChecked: { - selectors: { - ':before': { - background: palette.themePrimary, - opacity: 1, - selectors: { - [HighContrastSelector]: { - background: 'Window' - } - } - } - } - }, - check: { - opacity: 0 - }, - checkHost: { + /** + * TODO: Come back to this once .checkHost has been + * converted to mergeStyles + */ + '.checkHost:hover &, .checkHost:focus &, &:hover, &:focus': { + opacity: 1 + } + } + }, + + checked && { + selectors: { + ':before': { + background: palette.themePrimary, + opacity: 1, selectors: { - ':hover &': { - opacity: 1 - }, - ':focus &': { - opacity: 1 - }, - ':hover': { - opacity: 1 - }, - ':focus': { - opacity: 1 - }, - rootIsChecked: { - selectors: { - check: { - opacity: 1 - } - } + [HighContrastSelector]: { + background: 'Window' } } } @@ -96,47 +81,52 @@ export const getStyles = ( } ], - circle: { - ..._circle_check, - color: palette.neutralTertiaryAlt, - selectors: { - [HighContrastSelector]: { - color: 'WindowText' + circle: [ + _sharedCircleCheck, + + { + color: palette.neutralTertiaryAlt, + + selectors: { + [HighContrastSelector]: { + color: 'WindowText' + } } + }, + + checked && { + color: palette.white } - }, + ], - check: { - ..._circle_check, - color: palette.neutralTertiaryAlt, - fontSize: '16px', - left: '.5px', + check: [ + _sharedCircleCheck, + + { + opacity: 0, + color: palette.neutralTertiaryAlt, + fontSize: '16px', + left: '.5px', - selectors: { - [HighContrastSelector]: { - MsHighContrastAdjust: 'none' + selectors: { + [HighContrastSelector]: { + MsHighContrastAdjust: 'none' + } } - } - }, - - rootIsChecked: { - selectors: { - circle: { - color: palette.white - }, - - check: { - color: palette.white, - fontWeight: 900, - - selectors: { - [HighContrastSelector]: { - border: 'none', - color: 'WindowText' - } + }, + + checked && { + opacity: 1, + color: palette.white, + fontWeight: 900, + + selectors: { + [HighContrastSelector]: { + border: 'none', + color: 'WindowText' } } } - }, + ], }); }; From 90edfb02e569767e41c681b2ad452a6d032c9512 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Fri, 2 Feb 2018 16:06:25 -0800 Subject: [PATCH 07/20] Remove setUserSelect related lines. Rename rootIsChecked to just checked state. --- .../src/components/Check/Check.base.tsx | 7 ++++--- .../src/components/Check/Check.styles.ts | 4 ++-- .../src/components/Check/Check.types.ts | 11 ----------- 3 files changed, 6 insertions(+), 16 deletions(-) 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 index 508ec883c30d16..1fa1aff8789ecc 100644 --- a/packages/office-ui-fabric-react/src/components/Check/Check.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Check/Check.base.tsx @@ -20,11 +20,11 @@ const getClassNames = classNamesFunction(); @customizable('Check', ['theme']) export class CheckBase extends BaseComponent { public static defaultProps: ICheckProps = { - isChecked: false + checked: false }; public shouldComponentUpdate(newProps: ICheckProps) { - return this.props.isChecked !== newProps.isChecked || this.props.checked !== newProps.checked; + return this.props.checked !== newProps.checked; } public render(): JSX.Element { @@ -42,7 +42,8 @@ export class CheckBase extends BaseComponent { 'ms-Check', className, classNames.root, - checked && 'is-checked' + checked && 'is-checked', + checked && 'rootIsChecked' ) } > { Icon({ 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 1a83c5c584b71b..8ae7e23902e4ba 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 @@ -5,7 +5,7 @@ import { HighContrastSelector, ITheme, IStyle, - setUserSelect, + // setUserSelect, } from '@uifabric/styling'; import { memoizeFunction } from '@uifabric/utilities'; @@ -35,13 +35,13 @@ export const getStyles = ( return ({ root: [ - setUserSelect('none'), { lineHeight: 1, width: checkBoxHeight, height: checkBoxHeight, verticalAlign: 'top', position: 'relative', + userSelect: 'none', selectors: { ':before': { 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 index bac1be634d88f2..c3a01cf8d71258 100644 --- a/packages/office-ui-fabric-react/src/components/Check/Check.types.ts +++ b/packages/office-ui-fabric-react/src/components/Check/Check.types.ts @@ -15,12 +15,6 @@ export interface ICheckProps extends React.Props { */ checked?: boolean; - /** - * Deprecated at v0.65.1 and will be removed by v 1.0. Use 'checked' instead. - * @deprecated - */ - isChecked?: boolean; - /** * Call to provide customized styling that will layer on top of the variant rules */ @@ -70,11 +64,6 @@ export interface ICheckStyles { */ root?: IStyle; - /** - * Change child element styles based on isChecked state. - */ - rootIsChecked?: IStyle; - /** * The 'check' icon styles. */ From 45ccb3ab80fce48b73a4ed9537f241d60006082b Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Fri, 2 Feb 2018 16:06:25 -0800 Subject: [PATCH 08/20] Remove setUserSelect related lines. Rename rootIsChecked to just checked state. --- .../src/components/Check/Check.base.tsx | 6 ++---- .../src/components/Check/Check.styles.ts | 7 +++---- .../src/components/Check/Check.types.ts | 14 +------------- 3 files changed, 6 insertions(+), 21 deletions(-) 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 index 508ec883c30d16..69d2a959d5c51e 100644 --- a/packages/office-ui-fabric-react/src/components/Check/Check.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Check/Check.base.tsx @@ -13,18 +13,16 @@ import { import { Icon } from '../../Icon'; import { getStyles } from './Check.styles'; -// import * as stylesImport from './Check.scss'; -// const styles: any = stylesImport; const getClassNames = classNamesFunction(); @customizable('Check', ['theme']) export class CheckBase extends BaseComponent { public static defaultProps: ICheckProps = { - isChecked: false + checked: false }; public shouldComponentUpdate(newProps: ICheckProps) { - return this.props.isChecked !== newProps.isChecked || this.props.checked !== newProps.checked; + return this.props.checked !== newProps.checked; } public render(): JSX.Element { 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 1a83c5c584b71b..53d27bfb34f88e 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 @@ -3,9 +3,8 @@ import { concatStyleSets, getTheme, HighContrastSelector, - ITheme, IStyle, - setUserSelect, + ITheme, } from '@uifabric/styling'; import { memoizeFunction } from '@uifabric/utilities'; @@ -35,13 +34,13 @@ export const getStyles = ( return ({ root: [ - setUserSelect('none'), { lineHeight: 1, width: checkBoxHeight, height: checkBoxHeight, verticalAlign: 'top', position: 'relative', + userSelect: 'none', selectors: { ':before': { @@ -127,6 +126,6 @@ export const 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 index bac1be634d88f2..cdbef8ffd75dd3 100644 --- a/packages/office-ui-fabric-react/src/components/Check/Check.types.ts +++ b/packages/office-ui-fabric-react/src/components/Check/Check.types.ts @@ -15,12 +15,6 @@ export interface ICheckProps extends React.Props { */ checked?: boolean; - /** - * Deprecated at v0.65.1 and will be removed by v 1.0. Use 'checked' instead. - * @deprecated - */ - isChecked?: boolean; - /** * Call to provide customized styling that will layer on top of the variant rules */ @@ -45,8 +39,7 @@ export interface ICheckProps extends React.Props { export interface ICheckStyleProps { /** - * Accept theme prop. Defaults to getTheme() function. - * @defaultvalue getTheme() + * Accept theme prop. */ theme: ITheme; @@ -70,11 +63,6 @@ export interface ICheckStyles { */ root?: IStyle; - /** - * Change child element styles based on isChecked state. - */ - rootIsChecked?: IStyle; - /** * The 'check' icon styles. */ From 1726d5b8a4751cfde04de32ce2c3b2f00e5e621e Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Fri, 2 Feb 2018 17:40:35 -0800 Subject: [PATCH 09/20] Fix line-height --- .../src/components/Check/Check.styles.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) 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 53d27bfb34f88e..4e873ccd24bf98 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 @@ -35,7 +35,8 @@ export const getStyles = ( return ({ root: [ { - lineHeight: 1, + // lineHeight currently needs to be a string to output without 'px' + lineHeight: '1', width: checkBoxHeight, height: checkBoxHeight, verticalAlign: 'top', @@ -108,6 +109,10 @@ export const getStyles = ( left: '.5px', selectors: { + ':hover': { + opacity: 1 + }, + [HighContrastSelector]: { MsHighContrastAdjust: 'none' } From 456a30887f48e83726affdbb6dd5de9a90cde4f0 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Fri, 2 Feb 2018 17:47:44 -0800 Subject: [PATCH 10/20] Export types in index. --- packages/office-ui-fabric-react/src/components/Check/index.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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..78a8a3af423247 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,2 @@ -export * from './Check'; \ No newline at end of file +export * from './Check'; +export * from './Check.types'; From 047428ee9c426bc612d4308c0d6bbf6c3a99ef4e Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Fri, 2 Feb 2018 17:49:05 -0800 Subject: [PATCH 11/20] npm run change output --- .../mergeStyles-Check_2018-02-03-01-48.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/office-ui-fabric-react/mergeStyles-Check_2018-02-03-01-48.json 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 From 98377dcd41e239b28301b9c333c926c9278f85a8 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Mon, 5 Feb 2018 16:11:52 -0800 Subject: [PATCH 12/20] Fix import for Travis --- .../office-ui-fabric-react/src/components/Check/Check.types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index cdbef8ffd75dd3..1672a24b09ef94 100644 --- a/packages/office-ui-fabric-react/src/components/Check/Check.types.ts +++ b/packages/office-ui-fabric-react/src/components/Check/Check.types.ts @@ -1,6 +1,6 @@ import * as React from 'react'; import { CheckBase } from './Check.base'; -import { IStyle, ITheme } from '@uifabric/Styling'; +import { IStyle, ITheme } from '@uifabric/styling'; import { IStyleFunction } from '@uifabric/utilities'; export interface ICheckProps extends React.Props { From 5a03aa57237be11ad28d15b01e11bd727a413ff9 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 6 Feb 2018 15:04:24 -0800 Subject: [PATCH 13/20] Move className logic to styles file. --- .../src/components/Check/Check.base.tsx | 16 +++------------- .../src/components/Check/Check.styles.ts | 11 +++++++++-- 2 files changed, 12 insertions(+), 15 deletions(-) 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 index 69d2a959d5c51e..6e2d8a8b425364 100644 --- a/packages/office-ui-fabric-react/src/components/Check/Check.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Check/Check.base.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import { BaseComponent, classNamesFunction, - css, customizable, } from '@uifabric/utilities'; import { @@ -36,23 +35,14 @@ export class CheckBase extends BaseComponent { return (
{ Icon({ - className: ` - ms-Check-circle ${classNames.circle} - `, + className: classNames.circle, iconName: 'CircleRing' }) } { Icon({ - className: ` - ms-Check-check ${classNames.check} - `, + className: classNames.check, iconName: 'StatusCircleCheckmark' }) }
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 4e873ccd24bf98..48b1dd61f97859 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 @@ -15,8 +15,9 @@ export const getStyles = ( ): ICheckStyles => { const { checkBoxHeight = DEFAULT_CHECKBOX_HEIGHT, + checked, + className, theme, - checked } = props; const { palette, semanticColors } = theme; @@ -34,6 +35,8 @@ export const getStyles = ( return ({ root: [ + 'ms-Check', + { // lineHeight currently needs to be a string to output without 'px' lineHeight: '1', @@ -66,6 +69,7 @@ export const getStyles = ( } }, + checked && 'is-checked', checked && { selectors: { ':before': { @@ -78,10 +82,12 @@ export const getStyles = ( } } } - } + }, + className ], circle: [ + 'ms-Check-circle', _sharedCircleCheck, { @@ -100,6 +106,7 @@ export const getStyles = ( ], check: [ + 'ms-Check-check', _sharedCircleCheck, { From 21832aa07ae33a48c59d604d7962f307dbe77c49 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 6 Feb 2018 17:39:16 -0800 Subject: [PATCH 14/20] nit, remove _ in _sharedCircleCheck --- .../src/components/Check/Check.styles.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 48b1dd61f97859..174a7704167004 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 @@ -22,7 +22,7 @@ export const getStyles = ( const { palette, semanticColors } = theme; - const _sharedCircleCheck: IStyle = { + const sharedCircleCheck: IStyle = { fontSize: checkBoxHeight, position: 'absolute', left: 0, @@ -88,7 +88,7 @@ export const getStyles = ( circle: [ 'ms-Check-circle', - _sharedCircleCheck, + sharedCircleCheck, { color: palette.neutralTertiaryAlt, @@ -107,7 +107,7 @@ export const getStyles = ( check: [ 'ms-Check-check', - _sharedCircleCheck, + sharedCircleCheck, { opacity: 0, From 3872a954982bf5995a8c3c2b112ea2bea36998cd Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Thu, 8 Feb 2018 12:07:14 -0800 Subject: [PATCH 15/20] Combine checked conditionals into array. --- .../src/components/Check/Check.styles.ts | 24 ++++++++++--------- 1 file changed, 13 insertions(+), 11 deletions(-) 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 174a7704167004..43fa263cf0091f 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 @@ -69,20 +69,22 @@ export const getStyles = ( } }, - checked && 'is-checked', - checked && { - selectors: { - ':before': { - background: palette.themePrimary, - opacity: 1, - selectors: { - [HighContrastSelector]: { - background: 'Window' + checked && [ + 'is-checked', + { + selectors: { + ':before': { + background: palette.themePrimary, + opacity: 1, + selectors: { + [HighContrastSelector]: { + background: 'Window' + } } } } - } - }, + }, + ], className ], From d0d9590ef8951945b06ac6e5306df3260707c778 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Fri, 9 Feb 2018 10:01:40 -0800 Subject: [PATCH 16/20] Make ICheckStyles required, remove checkHost --- .../src/components/Check/Check.types.ts | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) 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 index 1672a24b09ef94..eaee9b82f93ccc 100644 --- a/packages/office-ui-fabric-react/src/components/Check/Check.types.ts +++ b/packages/office-ui-fabric-react/src/components/Check/Check.types.ts @@ -61,20 +61,15 @@ export interface ICheckStyles { /** * Style for the root element. */ - root?: IStyle; + root: IStyle; /** * The 'check' icon styles. */ - check?: IStyle; - - /** - * ??? Has something to do with DetailsList row??? - */ - checkHost?: IStyle; + check: IStyle; /** * The 'circle' icon styles. */ - circle?: IStyle; + circle: IStyle; } \ No newline at end of file From babf3bac2ef7ef91364441713d9c6651d23fc854 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Mon, 12 Feb 2018 10:27:28 -0800 Subject: [PATCH 17/20] Export base component --- packages/office-ui-fabric-react/src/components/Check/index.ts | 1 + 1 file changed, 1 insertion(+) 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 78a8a3af423247..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,2 +1,3 @@ export * from './Check'; +export * from './Check.base'; export * from './Check.types'; From 04a146c959f5ee2813d58fcb711e95c7b8dd3870 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Mon, 12 Feb 2018 10:27:39 -0800 Subject: [PATCH 18/20] Remove unused import --- .../office-ui-fabric-react/src/components/Check/Check.styles.ts | 1 - 1 file changed, 1 deletion(-) 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 43fa263cf0091f..f4eac95ededa2b 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 @@ -1,6 +1,5 @@ import { ICheckStyleProps, ICheckStyles } from './Check.types'; import { - concatStyleSets, getTheme, HighContrastSelector, IStyle, From e531bbc4827b5175ae9869ad8657451921392b8b Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Mon, 12 Feb 2018 10:38:07 -0800 Subject: [PATCH 19/20] Make icons jsx --- .../src/components/Check/Check.base.tsx | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) 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 index 6e2d8a8b425364..d0a679aaf1ae28 100644 --- a/packages/office-ui-fabric-react/src/components/Check/Check.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Check/Check.base.tsx @@ -34,17 +34,9 @@ export class CheckBase extends BaseComponent { const classNames = getClassNames(getStyles!, { theme: theme!, className, checked }); return ( -
- { Icon({ - className: classNames.circle, - iconName: 'CircleRing' - }) } - { Icon({ - className: classNames.check, - iconName: 'StatusCircleCheckmark' - }) } +
+ +
); } From 6dd84730f40cae534162ed45fca9a8be72bc782f Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Mon, 12 Feb 2018 10:42:49 -0800 Subject: [PATCH 20/20] Remove uneeded const --- .../src/components/Check/Check.styles.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) 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 f4eac95ededa2b..94e7c1af848b4c 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 @@ -7,13 +7,11 @@ import { } from '@uifabric/styling'; import { memoizeFunction } from '@uifabric/utilities'; -const DEFAULT_CHECKBOX_HEIGHT: string = '18px'; - export const getStyles = ( props: ICheckStyleProps ): ICheckStyles => { const { - checkBoxHeight = DEFAULT_CHECKBOX_HEIGHT, + checkBoxHeight = '18px', checked, className, theme,