From b58e9bfabab8062bf29d98faee8398d559058a10 Mon Sep 17 00:00:00 2001 From: David Zearing Date: Tue, 21 Feb 2017 15:43:31 -0800 Subject: [PATCH 01/44] CSS modules: Buttons and Links (#1033) * Default/Primary fixed. * Fixed Link. * Updates to link and primary, default, and compound buttons. * Fixing command button. * Updating Command and Icon button styles. * Adding change file. * Updating comments. --- ...component-css-button_2017-02-18-02-10.json | 15 ++ .../src/common/_focusBorder.scss | 4 +- .../src/components/Button/BaseButton.scss | 7 + .../src/components/Button/BaseButton.tsx | 75 ++++++---- .../Button/ButtonCore/ButtonCore.scss | 136 ++++++------------ .../Button/ButtonCore/ButtonCoreVars.scss | 12 -- .../Button/CommandButton/CommandButton.scss | 83 ++++------- .../Button/CommandButton/CommandButton.tsx | 17 ++- .../Button/CompoundButton/CompoundButton.scss | 112 +++++++-------- .../Button/CompoundButton/CompoundButton.tsx | 20 ++- .../Button/DefaultButton/DefaultButton.scss | 91 +++++------- .../Button/DefaultButton/DefaultButton.tsx | 18 ++- .../Button/IconButton/IconButton.scss | 85 +++++------ .../Button/IconButton/IconButton.tsx | 26 ++-- .../Button/PrimaryButton/PrimaryButton.scss | 84 +++++------ .../Button/PrimaryButton/PrimaryButton.tsx | 19 ++- .../src/components/Link/Link.scss | 80 +++++------ .../src/components/Link/Link.tsx | 13 +- 18 files changed, 428 insertions(+), 469 deletions(-) create mode 100644 common/changes/component-css-button_2017-02-18-02-10.json create mode 100644 packages/office-ui-fabric-react/src/components/Button/BaseButton.scss diff --git a/common/changes/component-css-button_2017-02-18-02-10.json b/common/changes/component-css-button_2017-02-18-02-10.json new file mode 100644 index 0000000000000..1f0b78be6946a --- /dev/null +++ b/common/changes/component-css-button_2017-02-18-02-10.json @@ -0,0 +1,15 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Button variants: the styles are now scoped within css modules. All class names that were previously on buttons still remain unchanged, but the styles have moved into a type safe hashed class name. This allows 2 different versions of any Button variant to live on the same page without having rules collide. The style rules for the variants were also tweaked. Content is now aligned using flexbox, which means more consistent centering when injecting inline, inline-block, or block elements. Second, all line-heights were removed and content now correctly centers within buttons, so if you change the height of the container (e.g. you make CommandButtons render in 36px instead of 40px) things will center correctly.", + "type": "minor" + }, + { + "packageName": "office-ui-fabric-react", + "comment": "Link: the styles are now scoped within css modules. All class names that were previously on buttons still remain unchanged, but the styles have moved into a type safe hashed class name.", + "type": "minor" + } + ], + "email": "dzearing@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/common/_focusBorder.scss b/packages/office-ui-fabric-react/src/common/_focusBorder.scss index fc7508dc5dd55..a05e1cdf39b28 100644 --- a/packages/office-ui-fabric-react/src/common/_focusBorder.scss +++ b/packages/office-ui-fabric-react/src/common/_focusBorder.scss @@ -14,7 +14,7 @@ position: relative; } - :global .ms-Fabric.is-focusVisible &:focus:after { + :global(.ms-Fabric.is-focusVisible) &:focus:after { // Wrap the parent element with $padding pixels. content: ''; position: absolute; @@ -33,7 +33,7 @@ // When focus is set using the keyboard, apply an outline. @mixin focus-outline { - :global .ms-Fabric.is-focusVisible &:focus { + :global(.ms-Fabric.is-focusVisible) &:focus { outline: 1px solid $focusedBorderColor; } } diff --git a/packages/office-ui-fabric-react/src/components/Button/BaseButton.scss b/packages/office-ui-fabric-react/src/components/Button/BaseButton.scss new file mode 100644 index 0000000000000..a90f1c2f015a5 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.scss @@ -0,0 +1,7 @@ +.flexContainer { + display: flex; + height: 100%; + flex-wrap: nowrap; + justify-content: center; + align-items: center; +} diff --git a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx index 4d01d92db23f5..58ffc85957ce6 100644 --- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx @@ -9,19 +9,28 @@ import { anchorProperties } from '../../Utilities'; import { IButtonProps, IButton } from './Button.Props'; +import styles from './BaseButton.scss'; + +export interface IBaseButtonClassNames { + base: string; + variant: string; + isDisabled: string; + isEnabled: string; + description?: string; + flexContainer?: string; + icon?: string; + label?: string; + root?: string; +}; export class BaseButton extends BaseComponent implements IButton { - /** - * _baseClassName can be overridden by subclasses to provide a unique class prefix to the class name used for - * sub parts of the render template. - */ - protected _baseClassName = 'ms-Button'; - - /** - * _variantClassName can be overridden by subclasses to add an extra default class name to the root element. - */ - protected _variantClassName = ''; + protected classNames: IBaseButtonClassNames = { + base: 'ms-Button', + variant: '', + isEnabled: '', + isDisabled: '' + }; private _buttonElement: HTMLButtonElement; private _labelId: string; @@ -36,7 +45,7 @@ export class BaseButton extends BaseComponent implements IButt } public render(): JSX.Element { - const { className, description, ariaLabel, ariaDescription, href, disabled } = this.props; + const { description, ariaLabel, ariaDescription, href, disabled } = this.props; const { _ariaDescriptionId, _labelId, _descriptionId } = this; const renderAsAnchor: boolean = !!href; const tag = renderAsAnchor ? 'a' : 'button'; @@ -65,15 +74,21 @@ export class BaseButton extends BaseComponent implements IButt nativeProps, { className: css( - className, - this._baseClassName, - this._variantClassName, - { 'disabled': disabled } - ), + this.props.className, + this.classNames.base, + this.classNames.variant, + this.classNames.root, + { + 'disabled': disabled, + [this.classNames.isDisabled]: disabled, + [this.classNames.isEnabled]: !disabled + }), ref: this._resolveRef('_buttonElement'), + 'disabled': disabled, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabel ? null : _labelId, - 'aria-describedby': ariaDescribedBy + 'aria-describedby': ariaDescribedBy, + 'aria-disabled': disabled } ); @@ -86,23 +101,24 @@ export class BaseButton extends BaseComponent implements IButt } } - protected onRenderContent(tag, buttonProps): JSX.Element { + protected onRenderContent(tag: any, buttonProps: IButtonProps): JSX.Element { return React.createElement( tag, buttonProps, - this.onRenderIcon(), - this.onRenderLabel(), - this.onRenderDescription(), - this.onRenderAriaDescription(), - this.onRenderChildren() - ); + React.createElement('div', { className: css(styles.flexContainer, this.classNames.flexContainer) }, + this.onRenderIcon(), + this.onRenderLabel(), + this.onRenderDescription(), + this.onRenderAriaDescription(), + this.onRenderChildren() + )); } protected onRenderIcon() { let { icon } = this.props; return icon ? ( - + ) : ( @@ -119,7 +135,7 @@ export class BaseButton extends BaseComponent implements IButt } return label ? ( - + { label } ) : (null); @@ -144,7 +160,12 @@ export class BaseButton extends BaseComponent implements IButt // ms-Button-description is only shown when the button type is compound. // In other cases it will not be displayed. return description ? ( - { description } + + { description } + ) : ( null ); diff --git a/packages/office-ui-fabric-react/src/components/Button/ButtonCore/ButtonCore.scss b/packages/office-ui-fabric-react/src/components/Button/ButtonCore/ButtonCore.scss index f0c4ac0456643..74cc216aa677c 100644 --- a/packages/office-ui-fabric-react/src/components/Button/ButtonCore/ButtonCore.scss +++ b/packages/office-ui-fabric-react/src/components/Button/ButtonCore/ButtonCore.scss @@ -8,101 +8,51 @@ @import '../../../common/common'; @import './ButtonCoreVars'; -:global { - - .ms-Button { - @include focus-border(); - @include ms-font-m; - user-select: none; - - border-width: 0; - text-decoration: none; - text-align: center; - cursor: pointer; - display: inline-block; - padding: $button-core-default-padding; - - @media screen and (-ms-high-contrast: active) { - color: $ms-color-contrastBlackSelected; - border-color: $ms-color-contrastBlackSelected; - } - - @media screen and (-ms-high-contrast: black-on-white) { - color: $ms-color-contrastWhiteSelected; - border-color: $ms-color-contrastWhiteSelected; - } +@mixin button-core-root-styles { + @include focus-border(); + @include ms-font-m; + + user-select: none; + border-width: 0; + text-decoration: none; + text-align: center; + cursor: pointer; + display: inline-block; + padding: $button-core-default-padding; + + @media screen and (-ms-high-contrast: active) { + color: $ms-color-contrastBlackSelected; + border-color: $ms-color-contrastBlackSelected; } - .ms-Button-icon { - margin: 0 4px; - width: 16px; - vertical-align: top; - display: inline-block; + @media screen and (-ms-high-contrast: black-on-white) { + color: $ms-color-contrastWhiteSelected; + border-color: $ms-color-contrastWhiteSelected; } - - .ms-Button-label { - margin: 0 4px; - vertical-align: top; - display: inline-block; - } - - // TODO: Remove Hero Styles once fully deprecated - - //== Modifier: Hero button - // - .ms-Button--hero { - background-color: transparent; - border: 0; - height: auto; - - .ms-Button-icon { - color: $ms-color-themePrimary; - display: inline-block; - @include margin-right(8px); - padding-top: 5px; - font-size: $ms-icon-size-l; - line-height: 1; // FireFox vertical offset - } - - .ms-Button-label { - color: $ms-color-themePrimary; - font-size: $ms-font-size-xl; - font-weight: $ms-font-weight-light; - vertical-align: top; - } - - &:hover, - &:focus { - background-color: transparent; - - .ms-Button-icon { - color: $ms-color-themeDark; - } - - .ms-Button-label { - color: $ms-color-themeDarker; - } - } - - &:active { - .ms-Button-icon { - color: $ms-color-themePrimary; - } - - .ms-Button-label { - color: $ms-color-themePrimary; - } - } - - &:disabled, - &.is-disabled { - .ms-Button-icon { - color: $ms-color-neutralTertiaryAlt; - } - - .ms-Button-label { - color: $ms-color-neutralTertiary; - } - } +} + +@mixin button-core-icon-styles { + margin: 0 4px; + width: 16px; + height: 16px; + line-height: 16px; + text-align: center; + vertical-align: middle; +} + +@mixin button-core-label-styles { + margin: 0 4px; + line-height: 100%; +} + +@mixin button-core-disabled { + background-color: $ms-color-neutralLighter; + color: $ms-color-neutralTertiary; + cursor: default; + pointer-events: none; + + &:hover, + &:focus { + outline: 0; } } \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Button/ButtonCore/ButtonCoreVars.scss b/packages/office-ui-fabric-react/src/components/Button/ButtonCore/ButtonCoreVars.scss index d362fea239a29..e53c1f61ee2f9 100644 --- a/packages/office-ui-fabric-react/src/components/Button/ButtonCore/ButtonCoreVars.scss +++ b/packages/office-ui-fabric-react/src/components/Button/ButtonCore/ButtonCoreVars.scss @@ -2,15 +2,3 @@ $button-core-default-height: 32px; $button-core-default-minWidth: 80px; $button-core-default-padding: 0 16px; -@mixin core-button-disabled { - background-color: $ms-color-neutralLighter; - border-color: $ms-color-neutralLighter; - cursor: default; - pointer-events: none; - color: $ms-color-neutralTertiary; - - &:hover, - &:focus { - outline: 0; - } -} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Button/CommandButton/CommandButton.scss b/packages/office-ui-fabric-react/src/components/Button/CommandButton/CommandButton.scss index 9eb6b31484ebf..31ffe61a753fd 100644 --- a/packages/office-ui-fabric-react/src/components/Button/CommandButton/CommandButton.scss +++ b/packages/office-ui-fabric-react/src/components/Button/CommandButton/CommandButton.scss @@ -1,5 +1,3 @@ -@import '../../../common/common'; - // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. // @@ -7,65 +5,46 @@ // -------------------------------------------------- // Command Button styles -$button-commandButtonHeight: 40px; - -:global { - - .ms-Button.ms-Button--command { - @include text-align(left); +@import '../../../common/common'; +@import '../ButtonCore/ButtonCore'; +@import '../ButtonCore/ButtonCoreVars'; - background-color: transparent; - border: none; - padding: 0 4px; +$button-commandButtonHeight: 40px; - .ms-Button-label, - .ms-Button-icon { - height: $button-commandButtonHeight; - line-height: $button-commandButtonHeight; - } +.root { + @include button-core-root-styles; - .ms-Button-label { - @include ms-font-m; - font-weight: $ms-font-weight-regular; - color: $ms-color-neutralPrimary; - } + background-color: transparent; + padding: 0 4px; + height: $button-commandButtonHeight; + color: $ms-color-neutralPrimary; +} - .ms-Button-icon { - vertical-align: top; - color: $ms-color-themePrimary; - display: inline-block; - font-size: $ms-icon-size-m; - position: relative; - } +.label { + @include button-core-label-styles; +} - &:hover, - &:focus { - background-color: transparent; +.icon { + @include button-core-icon-styles; +} - &, - .ms-Button-icon, - .ms-Button-label { - color: $ms-color-themeDarker; - } - } +.isEnabled { - &:active { - &, - .ms-Button-icon, - .ms-Button-label { - color: $ms-color-themePrimary; - } - } + &:hover { + color: $ms-color-themeDarker; + } - &:disabled, - &.disabled { - background-color: transparent; + &:active { + color: $ms-color-themePrimary; + } - .ms-Button-icon, - .ms-Button-label { - color: $ms-color-neutralTertiaryAlt; - } - } + .icon { + color: $ms-color-themePrimary; } +} +.isDisabled { + @include button-core-disabled; + background-color: transparent; } + diff --git a/packages/office-ui-fabric-react/src/components/Button/CommandButton/CommandButton.tsx b/packages/office-ui-fabric-react/src/components/Button/CommandButton/CommandButton.tsx index 3c842cd5eeeab..91480d03d590b 100644 --- a/packages/office-ui-fabric-react/src/components/Button/CommandButton/CommandButton.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/CommandButton/CommandButton.tsx @@ -1,11 +1,16 @@ import { BaseButton } from '../BaseButton'; -import './CommandButton.scss'; -import '../ButtonCore/ButtonCore.scss'; +import styles from './CommandButton.scss'; export class CommandButton extends BaseButton { - protected _variantClassName = 'ms-Button--command'; + protected classNames = { + base: 'ms-Button', + variant: 'ms-Button--default', + icon: styles.icon, + isDisabled: styles.isDisabled, + isEnabled: styles.isEnabled, + label: styles.label, + root: styles.root + }; - protected onRenderDescription() { - return null; - } + protected onRenderDescription() { return null; } } diff --git a/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.scss b/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.scss index a6613ce798f4b..6862673e95819 100644 --- a/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.scss +++ b/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.scss @@ -1,5 +1,3 @@ -@import '../../../common/common'; - // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. // @@ -7,73 +5,75 @@ // -------------------------------------------------- // Compound Button styles -:global { - .ms-Button.ms-Button--compound { - display: flex; - flex-direction: column; - justify-content: center; - align-items: stretch; +@import '../../../common/common'; +@import '../ButtonCore/ButtonCore'; +@import '../ButtonCore/ButtonCoreVars'; - width: 100%; - max-width: 280px; - min-height: 72px; +.root { + @include button-core-root-styles; - padding: 16px 20px; - background: $ms-color-neutralLighter; + padding: 16px 20px; + background-color: $ms-color-neutralLighter; + color: $ms-color-neutralSecondary; - @include text-align(left); + min-width: $button-core-default-minWidth; + max-width: 280px; - .ms-Button-label { - @include ms-font-m; - display: block; - font-weight: $ms-font-weight-semibold; - color: $ms-color-black; - margin: 0 0 2px; - } + min-height: 72px; +} - .ms-Button-description { - @include ms-font-s; - color: $ms-color-neutralSecondary; - display: block; - } +.flexContainer { + flex-direction: column; + justify-content: center; + align-items: stretch; - &:hover { - background-color: $ms-color-neutralLight; - border-color: $ms-color-neutralLight; + @include text-align(left); - .ms-Button-description { - color: $ms-color-neutralDark; - } - } + min-width: 100%; + height: auto; +} - &:focus { - border-color: $ms-color-themePrimary; - background-color: $ms-color-neutralLighter; - .ms-Button-label { - color: $ms-color-neutralPrimary; - } +.label { + @include button-core-label-styles; - .ms-Button-description { - color: $ms-color-neutralSecondary; - } - } + font-weight: $ms-font-weight-semibold; + color: $ms-color-black; + margin: 0 0 5px; +} - &:active { - background-color: $ms-color-themePrimary; +.description { + @include ms-font-s; + color: $ms-color-neutralSecondary; + line-height: 100%; +} - .ms-Button-description, - .ms-Button-label { - color: $ms-color-white; - } +.isEnabled { + + &:hover { + background-color: $ms-color-neutralLight; + + .description { + color: $ms-color-neutralDark; } + } + + &:active { + background-color: $ms-color-themePrimary; + color: $ms-color-white; - &:disabled, - &.disabled { - .ms-Button-label, - .ms-Button-description { - color: $ms-color-neutralTertiary; - } + .label, + .description { + color: inherit; } } -} \ No newline at end of file +} + +.isDisabled { + @include button-core-disabled; + + .label, + .description { + color: inherit; + } +} diff --git a/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.tsx b/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.tsx index b256e67991aad..d145f96573a73 100644 --- a/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.tsx @@ -1,11 +1,17 @@ +import { css } from '../../../Utilities'; import { BaseButton } from '../BaseButton'; -import './CompoundButton.scss'; -import '../ButtonCore/ButtonCore.scss'; +import styles from './CompoundButton.scss'; export class CompoundButton extends BaseButton { - protected _variantClassName = 'ms-Button--compound'; - - protected onRenderIcon() { - return null; - } + protected classNames = { + base: 'ms-Button', + variant: 'ms-Button--compound', + description: styles.description, + flexContainer: styles.flexContainer, + icon: null, + isDisabled: styles.isDisabled, + isEnabled: styles.isEnabled, + label: styles.label, + root: styles.root + }; } diff --git a/packages/office-ui-fabric-react/src/components/Button/DefaultButton/DefaultButton.scss b/packages/office-ui-fabric-react/src/components/Button/DefaultButton/DefaultButton.scss index 299631c582f83..fae899fe93cb5 100644 --- a/packages/office-ui-fabric-react/src/components/Button/DefaultButton/DefaultButton.scss +++ b/packages/office-ui-fabric-react/src/components/Button/DefaultButton/DefaultButton.scss @@ -1,63 +1,48 @@ -@import '../../../common/common'; -@import '../ButtonCore/ButtonCoreVars'; - // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. - // // Office UI Fabric // -------------------------------------------------- // Default Button styles -:global { - .ms-Button.ms-Button--default { - background-color: $ms-color-neutralLighter; - border: 1px solid $ms-color-neutralLighter; - min-width: $button-core-default-minWidth; - color: $ms-color-neutralPrimary; - - .ms-Button-label, - .ms-Button-icon { - height: $button-core-default-height; - line-height: $button-core-default-height; - } - - &:hover { - background-color: $ms-color-neutralLight; - border-color: $ms-color-neutralLight; - color: $ms-color-black; - } - - &:focus { - background-color: $ms-color-neutralLight; - border-color: $ms-color-neutralLighter; - outline: 1px solid transparent; - color: $ms-color-black; - - } - - &:active { - background-color: $ms-color-themePrimary; - border-color: $ms-color-themePrimary; - color: $ms-color-white; - } - - .ms-Button-label { - font-weight: $ms-font-weight-semibold; - font-size: $ms-font-size-m; - } - - &:disabled, &.disabled { - @include core-button-disabled; - } - } +@import '../../../common/common'; +@import '../ButtonCore/ButtonCore'; +@import '../ButtonCore/ButtonCoreVars'; + +.root { + @include button-core-root-styles; + + background-color: $ms-color-neutralLighter; + color: $ms-color-neutralPrimary; - .ms-Fabric.is-focusVisible .ms-Button { - &:focus { - color: $ms-color-black; + min-width: $button-core-default-minWidth; + height: $button-core-default-height; + + font-weight: $ms-font-weight-semibold; + font-size: $ms-font-size-m; +} - &:before { - border-color: $ms-color-themePrimary; - } - } +.label { + @include button-core-label-styles; +} + +.icon { + @include button-core-icon-styles; +} + +.isEnabled { + + &:hover { + background-color: $ms-color-neutralLight; + color: $ms-color-black; + } + + &:active { + background-color: $ms-color-themePrimary; + color: $ms-color-white; } } + +.isDisabled { + @include button-core-disabled; +} + diff --git a/packages/office-ui-fabric-react/src/components/Button/DefaultButton/DefaultButton.tsx b/packages/office-ui-fabric-react/src/components/Button/DefaultButton/DefaultButton.tsx index 817057d6ac3b2..af5180c23fec8 100644 --- a/packages/office-ui-fabric-react/src/components/Button/DefaultButton/DefaultButton.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/DefaultButton/DefaultButton.tsx @@ -1,11 +1,17 @@ +import { css } from '../../../Utilities'; import { BaseButton } from '../BaseButton'; -import './DefaultButton.scss'; -import '../ButtonCore/ButtonCore.scss'; +import styles from './DefaultButton.scss'; export class DefaultButton extends BaseButton { - protected _variantClassName = 'ms-Button--default'; + protected classNames = { + base: 'ms-Button', + variant: 'ms-Button--default', + icon: styles.icon, + isDisabled: styles.isDisabled, + isEnabled: styles.isEnabled, + label: styles.label, + root: styles.root + }; - protected onRenderDescription() { - return null; - } + protected onRenderDescription() { return null; } } diff --git a/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.scss b/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.scss index d13f7ffcd746f..51dcbbf9ed943 100644 --- a/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.scss +++ b/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.scss @@ -1,50 +1,53 @@ -@import '../../../common/common'; -@import '../ButtonCore/ButtonCoreVars'; - // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + // // Office UI Fabric // -------------------------------------------------- // Icon Button styles -:global { - - .ms-Button.ms-Button--icon { - @include focus-border(0px); - background-color: transparent; - color: $ms-color-neutralSecondary; - padding: 0 4px; - font-size: $ms-icon-size-m; - - .ms-Button-label, - .ms-Button-icon { - height: $button-core-default-height; - line-height: $button-core-default-height; - } - - &:hover, - &:active { - background-color: transparent; - color: $ms-color-neutralPrimary; - } - - &:focus { - background-color: transparent; - } - - &.disabled, - &:disabled { - color: $ms-color-neutralTertiaryAlt; - background-color: transparent; - } - - @media screen and (-ms-high-contrast: active) { - color: $ms-color-yellowLight; - } - - @media screen and (-ms-high-contrast: black-on-white) { - color: $ms-color-blueMid; - } +@import '../../../common/common'; +@import '../ButtonCore/ButtonCore'; +@import '../ButtonCore/ButtonCoreVars'; + +$button-iconButtonSize: 40px; + +.root { + @include button-core-root-styles; + + background-color: transparent; + padding: 0 4px; + + width: $button-iconButtonSize; + height: $button-iconButtonSize; + + color: $ms-color-neutralSecondary; + font-size: $ms-icon-size-m; +} + +.icon { + @include button-core-icon-styles; +} + +.isEnabled { + + &:hover { + color: $ms-color-themeDarker; } + &:active { + color: $ms-color-themePrimary; + } +} + +.isDisabled { + @include button-core-disabled; + background-color: transparent; + + @media screen and (-ms-high-contrast: active) { + color: $ms-color-yellowLight; + } + + @media screen and (-ms-high-contrast: black-on-white) { + color: $ms-color-blueMid; + } } diff --git a/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.tsx b/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.tsx index 87ae1c8865e41..1bba2056dabe8 100644 --- a/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.tsx @@ -1,19 +1,17 @@ import { BaseButton } from '../BaseButton'; -import './IconButton.scss'; -import '../ButtonCore/ButtonCore.scss'; +import styles from './IconButton.scss'; export class IconButton extends BaseButton { - protected _variantClassName = 'ms-Button--icon'; + protected classNames = { + base: 'ms-Button', + variant: 'ms-Button--icon', + icon: styles.icon, + isDisabled: styles.isDisabled, + isEnabled: styles.isEnabled, + root: styles.root + }; - protected onRenderLabel() { - return null; - } - - protected onRenderDescription() { - return null; - } - - protected onRenderChildren() { - return null; - } + protected onRenderLabel() { return null; } + protected onRenderDescription() { return null; } + protected onRenderChildren() { return null; } } diff --git a/packages/office-ui-fabric-react/src/components/Button/PrimaryButton/PrimaryButton.scss b/packages/office-ui-fabric-react/src/components/Button/PrimaryButton/PrimaryButton.scss index ff584ef208e9d..0375248ec97ff 100644 --- a/packages/office-ui-fabric-react/src/components/Button/PrimaryButton/PrimaryButton.scss +++ b/packages/office-ui-fabric-react/src/components/Button/PrimaryButton/PrimaryButton.scss @@ -1,61 +1,47 @@ -@import '../../../common/common'; -@import '../ButtonCore/ButtonCoreVars'; - // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. - // // Office UI Fabric // -------------------------------------------------- -// Primary Button styles +// Default Button styles -:global { +@import '../../../common/common'; +@import '../ButtonCore/ButtonCore'; +@import '../ButtonCore/ButtonCoreVars'; - .ms-Button.ms-Button--primary { - @include focus-border(1px, $ms-color-white); +.root { + @include button-core-root-styles; + @include focus-border(1px, $ms-color-white); - min-width: $button-core-default-minWidth; - background-color: $ms-color-themePrimary; - border-color: $ms-color-themePrimary; - color: $ms-color-white; + background-color: $ms-color-themePrimary; + color: $ms-color-white; - .ms-Button-label, - .ms-Button-icon { - height: $button-core-default-height; - line-height: $button-core-default-height; - } - - .ms-Button-label { - font-weight: $ms-font-weight-semibold; - font-size: $ms-font-size-m; - } - - &:hover { - background-color: $ms-color-themeDark; - border-color: $ms-color-themeDark; - } - - &:focus { - background-color: $ms-color-themeDark; - border-color: $ms-color-themePrimary; - } - - &:active { - background-color: $ms-color-themePrimary; - border-color: $ms-color-themePrimary; - } - - &:disabled, &.disabled { - @include core-button-disabled; - } - } + min-width: $button-core-default-minWidth; + height: $button-core-default-height; - .ms-Fabric.is-focusVisible .ms-Button--primary { - &:focus { - color: $ms-color-white; + font-weight: $ms-font-weight-semibold; + font-size: $ms-font-size-m; +} - &:before { - border-color: $ms-color-themeLighter; - } - } +.label { + @include button-core-label-styles; +} + +.icon { + @include button-core-icon-styles; +} + +.isEnabled { + + &:hover { + background-color: $ms-color-themeDark; + } + + &:active { + background-color: $ms-color-themePrimary; + color: $ms-color-white; } } + +.isDisabled { + @include button-core-disabled; +} diff --git a/packages/office-ui-fabric-react/src/components/Button/PrimaryButton/PrimaryButton.tsx b/packages/office-ui-fabric-react/src/components/Button/PrimaryButton/PrimaryButton.tsx index b42ae5d552728..1ade185cdbb0a 100644 --- a/packages/office-ui-fabric-react/src/components/Button/PrimaryButton/PrimaryButton.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/PrimaryButton/PrimaryButton.tsx @@ -1,11 +1,18 @@ +import { css } from '../../../Utilities'; import { BaseButton } from '../BaseButton'; -import './PrimaryButton.scss'; -import '../ButtonCore/ButtonCore.scss'; +import styles from './PrimaryButton.scss'; export class PrimaryButton extends BaseButton { - protected _variantClassName = 'ms-Button--primary'; + protected classNames = { + base: 'ms-Button', + variant: 'ms-Button--primary', + icon: styles.icon, + isDisabled: styles.isDisabled, + isEnabled: styles.isEnabled, + label: styles.label, + root: styles.root + }; + + protected onRenderDescription() { return null; } - protected onRenderDescription() { - return null; - } } diff --git a/packages/office-ui-fabric-react/src/components/Link/Link.scss b/packages/office-ui-fabric-react/src/components/Link/Link.scss index afef2c35b7451..e90fea8dbb54d 100644 --- a/packages/office-ui-fabric-react/src/components/Link/Link.scss +++ b/packages/office-ui-fabric-react/src/components/Link/Link.scss @@ -1,48 +1,48 @@ @import '../../common/common'; -:global { - .ms-Link { - @include ms-baseFont; - color: $ms-color-themePrimary; - margin: 0; - overflow: inherit; - padding: 0; - text-overflow: inherit; - - // State: The button is not disabled. - &:not(.is-disabled) { - &:hover, - &:focus { - color: $ms-color-themeDarker; - } - - &:active { - color: $ms-color-themePrimary; - } - } +// Element: ms-Link root component +.root { + @include ms-baseFont; + color: $ms-color-themePrimary; + margin: 0; + overflow: inherit; + padding: 0; + text-overflow: inherit; +} - // State: The button is disabled. - &.is-disabled { - color: $ms-color-neutralTertiary; - pointer-events: none; - cursor: default; - } +// State: The button is not disabled. +.isEnabled { + &:hover, + &:focus { + color: $ms-color-themeDarker; } - // Link implemented as a button. - button.ms-Link { - @include focus-border; - @include text-align(left); - background: none; - border: none; - cursor: pointer; - display: inline; - font-size: inherit; // Ensure that we inherit font size, rather than the browser's default. + &:active { + color: $ms-color-themePrimary; } +} - // Link implemented as an anchor. - a.ms-Link { - @include focus-outline; - text-decoration: none; - } +// State: The button is disabled. +.isDisabled { + color: $ms-color-neutralTertiary; + pointer-events: none; + cursor: default; +} + + +// Link implemented as a button. +button.root { + @include focus-border; + @include text-align(left); + background: none; + border: none; + cursor: pointer; + display: inline; + font-size: inherit; // Ensure that we inherit font size, rather than the browser's default. +} + +// Link implemented as an anchor. +a.root { + @include focus-outline; + text-decoration: none; } diff --git a/packages/office-ui-fabric-react/src/components/Link/Link.tsx b/packages/office-ui-fabric-react/src/components/Link/Link.tsx index 3b88e08efc3e8..ca1753ca24519 100644 --- a/packages/office-ui-fabric-react/src/components/Link/Link.tsx +++ b/packages/office-ui-fabric-react/src/components/Link/Link.tsx @@ -8,7 +8,7 @@ import { getNativeProps } from '../../Utilities'; import { ILink, ILinkProps } from './Link.Props'; -import './Link.scss'; +import styles from './Link.scss'; interface IMyScreen extends Screen { left: number; @@ -27,8 +27,10 @@ export class Link extends BaseComponent implements ILink { href ? ( implements ILink { ) : ( ) : (null) } { GroupSpacer({ count: groupNestingDepth - 1 }) } { columns.map((column, columnIndex) => ( -
-
- -
- { (column.isResizable) ? ( + style={ { width: column.calculatedWidth + INNER_PADDING } } + onClick={ this._onColumnClick.bind(this, column) } + onContextMenu={ this._onColumnContextMenu.bind(this, column) } + aria-haspopup={ column.columnActionsMode === ColumnActionsMode.hasDropdown } + aria-label={ column.ariaLabel || column.name } + data-automationid='ColumnsHeaderColumn' + data-item-key={ column.key } + > + + { column.isFiltered && ( + + ) } + + { column.isSorted && ( + + ) } + + { column.isGrouped && ( + + ) } + + { column.iconClassName && ( + + ) } + + { column.name } + + { column.columnActionsMode === ColumnActionsMode.hasDropdown && ( + + ) } + + { (column.isResizable) && (
- ) : (null) } + ) }
)) } + { isSizing && ( + +
+ + ) }
); } @@ -218,68 +248,16 @@ export class DetailsHeader extends BaseComponent) { - let { - // use buttons property here since ev.button in some edge case is not upding well during the move. - // but firefox doesn't support it, so we set the default value when it is not defined. - buttons = MOUSEMOVE_PRIMARY_BUTTON - } = ev; - - let { onColumnIsSizingChanged, columns } = this.props; - let { columnResizeDetails, isSizing } = this.state; - - if (columnResizeDetails) { - if (buttons !== MOUSEMOVE_PRIMARY_BUTTON) { - // cancel mouse down event and return early when the primary button is not pressed - this._onUp(ev); - return; - } - - if (!isSizing && ev.clientX !== columnResizeDetails.originX) { - isSizing = true; - - this._events.on(window, 'mousemove', this._onSizerMove, true); - this._events.on(window, 'mouseup', this._onSizerUp, true); - - this.setState({ isSizing: isSizing }); - - if (onColumnIsSizingChanged) { - onColumnIsSizingChanged(columns[columnResizeDetails.columnIndex], true); - } - - } - } - } - - /** - * mouse up event handler in the header - * clear the resize related state. - * This is to ensure we can catch double click event - * - * @private - * @param {React.MouseEvent} ev (mouse up event) - */ - private _onUp(ev: React.MouseEvent) { - this.setState({ - columnResizeDetails: null, - isSizing: false - }); - } - - private _onSizerDown(ev: MouseEvent) { + @autobind + private _onRootMouseDown(ev: MouseEvent) { let columnIndexAttr = (ev.target as HTMLElement).getAttribute('data-sizer-index'); let columnIndex = Number(columnIndexAttr); let { columns } = this.props; @@ -301,55 +279,72 @@ export class DetailsHeader extends BaseComponent) { + let { columnResizeDetails, isSizing } = this.state; - if (this.state.isAllSelected !== isAllSelected) { - this.setState({ - isAllSelected: isAllSelected - }); + if (columnResizeDetails && !isSizing && ev.clientX !== columnResizeDetails.originX) { + this.setState({ isSizing: true }); } } - private _onSizerMove(ev: React.MouseEvent) { + /** + * mouse move event handler in the header + * it will set isSizing state to true when user clicked on the sizer and move the mouse. + * + * @private + * @param {React.MouseEvent} ev (mouse move event) + */ + @autobind + private _onSizerMouseMove(ev: React.MouseEvent) { let { // use buttons property here since ev.button in some edge case is not upding well during the move. // but firefox doesn't support it, so we set the default value when it is not defined. - buttons = MOUSEMOVE_PRIMARY_BUTTON + buttons } = ev; - + let { onColumnIsSizingChanged, onColumnResized, columns } = this.props; let { columnResizeDetails } = this.state; - if (columnResizeDetails) { - if (buttons !== MOUSEMOVE_PRIMARY_BUTTON) { - // cancel mouse down event and return early when the primary button is not pressed - this._onSizerUp(); - return; - } - - let { onColumnResized, columns } = this.props; + if (buttons !== undefined && buttons !== MOUSEMOVE_PRIMARY_BUTTON) { + // cancel mouse down event and return early when the primary button is not pressed + this._onSizerMouseUp(ev); + return; + } - if (onColumnResized) { - let movement = ev.clientX - columnResizeDetails.originX; + if (ev.clientX !== columnResizeDetails.originX) { + if (onColumnIsSizingChanged) { + onColumnIsSizingChanged(columns[columnResizeDetails.columnIndex], true); + } + } - if (getRTL()) { - movement = -movement; - } + if (onColumnResized) { + let movement = ev.clientX - columnResizeDetails.originX; - onColumnResized( - columns[columnResizeDetails.columnIndex], - columnResizeDetails.columnMinWidth + movement - ); + if (getRTL()) { + movement = -movement; } + + onColumnResized( + columns[columnResizeDetails.columnIndex], + columnResizeDetails.columnMinWidth + movement + ); } + } - private _onSizerUp() { + /** + * mouse up event handler in the header + * clear the resize related state. + * This is to ensure we can catch double click event + * + * @private + * @param {React.MouseEvent} ev (mouse up event) + */ + @autobind + private _onSizerMouseUp(ev: React.MouseEvent) { let { columns, onColumnIsSizingChanged } = this.props; let { columnResizeDetails } = this.state; - this._events.off(window); - this.setState({ columnResizeDetails: null, isSizing: false @@ -360,6 +355,16 @@ export class DetailsHeader extends BaseComponent .ms-FocusZone { - display: inline-block; - vertical-align: top; - min-width: 1px; - min-height: 1px; - } - - } +.root { + position: relative; + font-size: $ms-font-size-s; +} - .ms-DetailsList.is-horizontalConstrained { - overflow-x: auto; - overflow-y: visible; +.focusZone { + display: inline-block; + vertical-align: top; + min-width: 1px; + min-height: 1px; +} - -webkit-overflow-scrolling: touch; - } +.rootIsHorizontalConstrained { + overflow-x: auto; + overflow-y: visible; - .ms-DetailsList-cell { - word-break: break-word; - } + -webkit-overflow-scrolling: touch; +} - /* Set the min height for a row to 38px so even rendering empty cells takes that space. */ - .ms-DetailsList .ms-List-cell { - min-height: 38px; - } +/* Set the min height for a row to 38px so even rendering empty cells takes that space. */ +.root :global(.ms-List-cell) { + min-height: 38px; + word-break: break-word; } diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx index 7c8c33110117c..e3426b8367063 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx @@ -30,7 +30,7 @@ import { SelectionZone } from '../../utilities/selection/index'; import { DragDropHelper } from '../../utilities/dragdrop/DragDropHelper'; -import './DetailsList.scss'; +import styles from './DetailsList.scss'; export interface IDetailsListState { lastWidth?: number; @@ -236,9 +236,9 @@ export class DetailsList extends React.Component (ev.which === getRTLSafeKeyCode(KeyCodes.right)) } onActiveElementChanged={ this._onActiveRowChanged } @@ -320,7 +321,7 @@ export class DetailsList extends React.Component; } diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.scss b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.scss index 1d59704444301..e485833ed4479 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.scss +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.scss @@ -6,109 +6,91 @@ $selectedColor: $ms-color-neutralQuaternary; $selectedHoverColor: $ms-color-neutralQuaternaryAlt; $unselectedHoverColor: $ms-color-neutralLighter; -:global { - .ms-DetailsRow { - @include focus-border(); - - display: inline-block; - min-width: 100%; - min-height: $rowHeight; - margin: 1px 0; - vertical-align: top; - white-space: nowrap; - padding: 0; - box-sizing: border-box; - - background: none; - border: none; - @include text-align(left); - vertical-align: top; - line-height: $rowHeight - ($rowVerticalPadding * 2); - - &.ms-DetailsRow.is-selected { - background: $selectedColor; - } - - &.is-contentUnselectable { - user-select: none; - cursor: default; - } - } - - .ms-DetailsRow:hover { +.root { + @include focus-border(); + + display: inline-block; + min-width: 100%; + min-height: $rowHeight; + margin: 1px 0; + vertical-align: top; + white-space: nowrap; + padding: 0; + box-sizing: border-box; + + background: none; + border: none; + @include text-align(left); + vertical-align: top; + line-height: $rowHeight - ($rowVerticalPadding * 2); + + &:hover { background: $unselectedHoverColor; } +} - .ms-DetailsRow.is-selected:hover { - background: $selectedHoverColor; - } - - .ms-DetailsRow-cell { - display: inline-block; - position: relative; - box-sizing: border-box; - padding: $rowVerticalPadding 0; - margin: 0 8px; - min-height: $rowHeight; - vertical-align: top; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - &.is-multiline { - white-space: normal; - word-break: break-word; - text-overflow: clip; - } - } +.rootIsSelected { + background: $selectedColor; - .ms-DetailsRow-fields { - display: inline-block; + &:hover { + background: $selectedHoverColor; } +} - .ms-DetailsRow-check { - @include focus-border(); +.rootIsContentUnselectable { + user-select: none; + cursor: default; +} - display: inline-block; - cursor: default; - padding: 6px; - box-sizing: border-box; - vertical-align: top; - background: none; - border: none; - } +.cell { + display: inline-block; + position: relative; + box-sizing: border-box; + padding: $rowVerticalPadding 0; + margin: 0 8px; + min-height: $rowHeight; + vertical-align: top; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} - .ms-DetailsRow-check { - opacity: 0; - } +.isMultiline { + white-space: normal; + word-break: break-word; + text-overflow: clip; +} - .ms-DetailsRow:hover .ms-DetailsRow-check, - .ms-DetailsRow.is-selected .ms-DetailsRow-check, - .ms-DetailsRow.is-check-visible .ms-DetailsRow-check { - opacity: 1; - } +.fields { + display: inline-block; +} - // TODO: delete? - .aFileTypeIconRenderer { - height: 36px; - line-height: 36px; - vertical-align: top; - } +.check { + @include focus-border(); + + display: inline-block; + cursor: default; + padding: 6px; + box-sizing: border-box; + vertical-align: top; + background: none; + border: none; + opacity: 0; +} - .FileTypeIconRenderer > img { - width: 16px; - height: 16px; - vertical-align: middle; - } +.root:hover .check, +.rootIsSelected .check, +.rootIsCheckVisible .check { + opacity: 1; +} - .ms-DetailsRow-cellMeasurer .ms-DetailsRow-cell { - overflow: visible; - white-space: nowrap; - } +.cellMeasurer .cell { + overflow: visible; + white-space: nowrap; +} - .ms-DetailsRow-checkSpacer { - display: inline-block; - height: 20px; - width: 20px; - } +.checkSpacer { + display: inline-block; + height: 20px; + width: 20px; } diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx index ac76a7ac86d5e..2287a98027d81 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx @@ -17,8 +17,8 @@ import { IDragDropOptions, } from './../../utilities/dragdrop/interfaces'; import { IViewport } from '../../utilities/decorators/withViewport'; +import styles from './DetailsRow.scss'; import { IDisposable } from '@uifabric/utilities'; -import './DetailsRow.scss'; export interface IDetailsRowProps extends React.Props { item: any; @@ -188,10 +188,10 @@ export class DetailsRow extends React.Component + { return ( ); diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx index edee07876b53e..ea1e5d4b7305a 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { IColumn } from './DetailsList.Props'; import { css } from '../../Utilities'; +import styles from './DetailsRow.scss'; export interface IDetailsRowFieldsProps { item: any; @@ -29,13 +30,14 @@ export class DetailsRowFields extends React.Component +
{ columns.map((column, columnIndex) => (
{ public render() { let { group, groupLevel, showAllLinkText } = this.props; return group && ( -
+
{ GroupSpacer({ count: groupLevel }) } { showAllLinkText }
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.scss b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.scss index 38d58b1885a17..acac50b8f5c03 100644 --- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.scss +++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.scss @@ -4,118 +4,116 @@ $groupHeader-ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000); $groupHeader-ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000); $groupHeader-ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045); -:global { - .ms-GroupHeader { - cursor: default; - user-select: none; - @include focus-border(); - - &:hover { - background: $ms-color-themeLighterAlt; - } - &.is-selected { - background: $ms-color-themeLighter; - } - &.is-selected:hover { - background: $ms-color-themeLight; - } - } +.root { + cursor: default; + user-select: none; + @include focus-border(); - .ms-GroupHeader-check, - .ms-GroupHeader-expand { - @include focus-border(); - display: inline-block; - cursor: default; - padding: 6px; - transform: translateY(50%); - margin-top: -12px; - box-sizing: border-box; - vertical-align: top; - background: none; - border: none; - font-size: $ms-icon-size-s; - top: 4px; + &:hover { + background: $ms-color-themeLighterAlt; } - - .ms-GroupHeader-check { - opacity: 0; - margin-top: -10px; - - &:focus { - opacity: 1; - } + &.rootIsSelected { + background: $ms-color-themeLighter; } - - .ms-GroupHeader:hover .ms-GroupHeader-check, - .ms-GroupHeader.is-selected .ms-GroupHeader-check { - opacity: 1; + &.rootIsSelected:hover { + background: $ms-color-themeLight; } - - .ms-GroupHeader-title { - padding: 14px 6px; - display: inline-block; - cursor: pointer; - outline: 0; +} + +.check, +.expand { + @include focus-border(); + display: inline-block; + cursor: default; + padding: 6px; + transform: translateY(50%); + margin-top: -12px; + box-sizing: border-box; + vertical-align: top; + background: none; + border: none; + font-size: $ms-icon-size-s; + top: 4px; +} + +.check { + opacity: 0; + margin-top: -10px; + + &:focus { + opacity: 1; } - - .ms-GroupHeader-expand { - width: 36px; - height: 40px; - color: $ms-color-neutralSecondary; - - .ms-Icon { - transform: rotate(-180deg); - transform-origin: 50% 50%; - transition: transform .1s linear; - - &.is-collapsed { - transform: rotate(0deg); - } +} + +.root:hover .check, +.root.rootIsSelected .check { + opacity: 1; +} + +.title { + padding: 14px 6px; + display: inline-block; + cursor: pointer; + outline: 0; +} + +.expand { + width: 36px; + height: 40px; + color: $ms-color-neutralSecondary; + + :global(.ms-Icon) { + transform: rotate(-180deg); + transform-origin: 50% 50%; + transition: transform .1s linear; + + &.expandIsCollapsed { + transform: rotate(0deg); } } +} + +.loading { + display: inline-block; + visibility: hidden; + opacity: 0; + padding: 0px 16px; + vertical-align: middle; + transition: visibility $ms-duration3, opacity $ms-duration3; + + &.loadingIsVisible { + visibility: visible; + opacity: 1; + } +} + +.dropIcon { + display: inline-block; + position: relative; + top: -16px; + @include left(-26px); + font-size: $ms-icon-size-l; + color: $ms-color-neutralSecondaryAlt; + transition: transform $ms-duration2 $groupHeader-ease-in-back, opacity $ms-duration4 $groupHeader-ease-out-sine; + opacity: 0; + transform: rotate(0.2deg) scale(0.65); // rotation prevents jittery motion in IE + transform-origin: 10px 10px; + + :global(.ms-Icon--Tag) { + position: absolute; + } +} - .ms-GroupHeader-loading { - display: inline-block; - visibility: hidden; - opacity: 0; - padding: 0px 16px; - vertical-align: middle; - transition: visibility $ms-duration3, opacity $ms-duration3; +:global(.ms-GroupedList-group.is-dropping) { - &.is-loading { - visibility: visible; + > .root .dropIcon { + transition: transform $ms-duration4 $groupHeader-ease-out-circ, opacity $ms-duration1 $groupHeader-ease-out-sine; + transition-delay: $ms-duration3; opacity: 1; + transform: rotate(0.2deg) scale(1); // rotation prevents jittery motion in IE } - } - .ms-GroupHeader-dropIcon { - display: inline-block; - position: relative; - top: -16px; - @include left(-26px); - font-size: $ms-icon-size-l; - color: $ms-color-neutralSecondaryAlt; - transition: transform $ms-duration2 $groupHeader-ease-in-back, opacity $ms-duration4 $groupHeader-ease-out-sine; - opacity: 0; - transform: rotate(0.2deg) scale(0.65); // rotation prevents jittery motion in IE - transform-origin: 10px 10px; - - .ms-Icon--Tag { - position: absolute; + .check { + opacity: 0; } - } - - .ms-GroupedList-group.is-dropping { - - > .ms-GroupHeader .ms-GroupHeader-dropIcon { - transition: transform $ms-duration4 $groupHeader-ease-out-circ, opacity $ms-duration1 $groupHeader-ease-out-sine; - transition-delay: $ms-duration3; - opacity: 1; - transform: rotate(0.2deg) scale(1); // rotation prevents jittery motion in IE - } - - .ms-GroupHeader-check { - opacity: 0; - } - } } \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.tsx index bd949ae4eda88..f7b0a47605a8a 100644 --- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.tsx +++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.tsx @@ -5,11 +5,12 @@ import { } from '../../Utilities'; import { IGroupDividerProps } from './GroupedList.Props'; import { SelectionMode } from '../../utilities/selection/index'; -import { Check } from '../Check/Check'; +import { Check } from '../../Check'; +import { Icon } from '../../Icon'; import { GroupSpacer } from './GroupSpacer'; import { Spinner } from '../../Spinner'; import { FocusZone, FocusZoneDirection } from '../../FocusZone'; -import './GroupHeader.scss'; +import styles from './GroupHeader.scss'; export interface IGroupHeaderState { isCollapsed: boolean; @@ -60,8 +61,8 @@ export class GroupHeader extends React.Component @@ -82,22 +84,39 @@ export class GroupHeader extends React.Component
- -
- { group.name } - {/* hasMoreData flag is set when grouping is throttle by SPO server which in turn resorts to regular sorting to simulate - grouping behaviors, in which case group count is the number of items returned so far. That's the reasons we need to - use "+" to show we might have more items than count indicates. */} - ({ group.count }{ group.hasMoreData && '+' }) +
+ { group.name } + { + // hasMoreData flag is set when grouping is throttle by SPO server which in turn resorts to regular + // sorting to simulate grouping behaviors, in which case group count is the number of items returned + // so far. That's the reasons we need to use "+" to show we might have more items than count + // indicates. + } + ({ group.count }{ group.hasMoreData && '+' })
-
+
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.scss b/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.scss index e776797a9a0e0..f7b3d1cefa464 100644 --- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.scss +++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.scss @@ -1,7 +1,5 @@ @import '../../common/common'; -:global { - .ms-GroupSpacer { - display: inline-block; - } +.root { + display: inline-block; } diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.tsx index 12bf54e4a62ab..f918dd896be62 100644 --- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.tsx +++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.tsx @@ -1,7 +1,10 @@ /* tslint:disable:no-unused-variable */ import * as React from 'react'; /* tslint:enable:no-unused-variable */ -import './GroupSpacer.scss'; +import { + css +} from '../../Utilities'; +import styles from './GroupSpacer.scss'; export interface IGroupSpacerProps { count: number; @@ -10,4 +13,12 @@ export interface IGroupSpacerProps { const SPACER_WIDTH = 36; export const GroupSpacer = (props: IGroupSpacerProps) => - props.count > 0 && ; + props.count > 0 && ( + + ); diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.scss b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.scss index 8d5ed5cb12678..e217223fa3e33 100644 --- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.scss +++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.scss @@ -2,47 +2,20 @@ $groupList-ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950); -:global { - .ms-GroupedList { - position: relative; - font-size: $ms-font-size-s; +.root { + position: relative; + font-size: $ms-font-size-s; - BUTTON { - font-family: inherit; - background-color: transparent; - } - - > .ms-FocusZone { - display: inline-block; - vertical-align: top; - min-width: 1px; - min-height: 1px; - } - - } - - .ms-GroupedList.is-horizontalConstrained { - overflow-x: auto; - overflow-y: visible; - - -webkit-overflow-scrolling: touch; - transform: translateZ(0); - } - - .ms-GroupedList-cell { - word-break: break-word; + BUTTON { + font-family: inherit; + background-color: transparent; } +} - .ms-GroupedList-group { - transition: background-color $ms-duration2 $groupList-ease-in-out-sine; - - &.is-dropping { - background-color: $ms-color-neutralLight; - } - } +.group { + transition: background-color $ms-duration2 $groupList-ease-in-out-sine; +} - /* Set the min height for a row to 38px so even rendering empty cells takes that space. */ - .ms-GroupedList .ms-List-cell { - min-height: 38px; - } +.groupIsDropping { + background-color: $ms-color-neutralLight; } diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.tsx index 14c7b3cef164e..b89789614e6ca 100644 --- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.tsx +++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.tsx @@ -19,7 +19,7 @@ import { import { SelectionMode } from '../../utilities/selection/index'; -import './GroupedList.scss'; +import styles from './GroupedList.scss'; export interface IGroupedListState { lastWidth?: number; @@ -85,11 +85,11 @@ export class GroupedList extends BaseComponent + > { !groups ? this._renderGroup(null, 0) : ( 1 } - /> + /> ) }
@@ -176,7 +176,7 @@ export class GroupedList extends BaseComponent + /> ) : null; } diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedListSection.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedListSection.tsx index 06490d9b452cf..9232b2d083692 100644 --- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedListSection.tsx +++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedListSection.tsx @@ -32,6 +32,7 @@ import { } from './../../utilities/dragdrop/interfaces'; import { assign, css } from '../../Utilities'; import { IViewport } from '../../utilities/decorators/withViewport'; +import styles from './GroupedList.scss'; import { IDisposable } from '@uifabric/utilities'; export interface IGroupedListSectionProps extends React.Props { @@ -187,7 +188,7 @@ export class GroupedListSection extends BaseComponent { onRenderGroupHeader(groupHeaderProps, this._onRenderGroupHeader) } { @@ -385,7 +386,11 @@ export class GroupedListSection extends BaseComponent Date: Fri, 24 Feb 2017 09:20:35 -0800 Subject: [PATCH 06/44] MessageBar: Convert to CSS modules (#1086) * modulify Overlay and MessageBar --- .../src/components/MessageBar/MessageBar.scss | 284 +++++++++--------- .../src/components/MessageBar/MessageBar.tsx | 50 +-- .../src/components/Overlay/Overlay.scss | 34 +-- .../src/components/Overlay/Overlay.tsx | 5 +- 4 files changed, 191 insertions(+), 182 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.scss b/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.scss index d7ba093b5a72c..559e657380cec 100644 --- a/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.scss +++ b/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.scss @@ -7,189 +7,191 @@ // -------------------------------------------------- // MessageBar Styles -:global { - .ms-MessageBar { - @include ms-baseFont; - @include ms-bgColor-info; - color: $ms-color-infoText; - width: 100%; - box-sizing: border-box; - display: flex; - position: relative; - - .ms-MessageBar-icon { - @include padding-right(8px); - color: $ms-color-info; - } - - .ms-Link { - font-size: $ms-font-size-s; - } - } +.root { + @include ms-baseFont; + @include ms-bgColor-info; + color: $ms-color-infoText; + width: 100%; + box-sizing: border-box; + display: flex; + position: relative; - .ms-MessageBar-icon, - .ms-MessageBar-text { - display: table-cell; - vertical-align: top; + .icon { + @include padding-right(8px); + color: $ms-color-info; } - .ms-MessageBar-icon { - font-size: $ms-icon-size-m; - min-width: 16px; - min-height: 16px; - display: flex; + :global(.ms-Link) { + font-size: $ms-font-size-s; } - .ms-MessageBar-text { - @include ms-font-s; - min-width: 0; - display: flex; + :global(.ms-Button) { + @include margin-left(6px); } +} +.icon, +.text { + display: table-cell; + vertical-align: top; +} - //== Modifier: Warning message - // - .ms-MessageBar.ms-MessageBar--warning { - @include ms-bgColor-warning; - color: $ms-color-warningText; - } +.icon { + font-size: $ms-icon-size-m; + min-width: 16px; + min-height: 16px; + display: flex; +} +.text { + @include ms-font-s; + min-width: 0; + display: flex; +} - //== Modifier: Severe Warning message - // - .ms-MessageBar.ms-MessageBar--severeWarning { - @include ms-bgColor-severeWarning; - color: $ms-color-severeWarningText; - .ms-MessageBar-icon { - @include ms-fontColor-severeWarning; - } - } +//== Modifier: Warning message +// +.root.rootIsWarning { + @include ms-bgColor-warning; + color: $ms-color-warningText; +} - //== Modifier: Error message - // - .ms-MessageBar.ms-MessageBar--error { - @include ms-bgColor-error; - color: $ms-color-errorText; +//== Modifier: Severe Warning message +// +.root.rootIsSevereWarning { + @include ms-bgColor-severeWarning; + color: $ms-color-severeWarningText; - .ms-MessageBar-icon { - @include ms-fontColor-error; - } + .icon { + @include ms-fontColor-severeWarning; } +} - //== Modifier: Blocked message - // - .ms-MessageBar.ms-MessageBar--blocked { - @include ms-bgColor-error; - color: $ms-color-errorText; +//== Modifier: Error message +// +.root.rootIsError { + @include ms-bgColor-error; + color: $ms-color-errorText; - .ms-MessageBar-icon { - @include ms-fontColor-error; - } + .icon { + @include ms-fontColor-error; } +} - //== Modifier: Success message - // - .ms-MessageBar.ms-MessageBar--success { - @include ms-bgColor-success; - color: $ms-color-successText; +//== Modifier: Blocked message +// +.root.rootIsBlocked { + @include ms-bgColor-error; + color: $ms-color-errorText; - .ms-MessageBar-icon { - @include ms-fontColor-green; - } + .icon { + @include ms-fontColor-error; } +} - // Shared - .ms-MessageBar-content { - padding: 16px; - display: flex; - width: 100%; - box-sizing: border-box; - } +//== Modifier: Success message +// +.root.rootIsSuccess { + @include ms-bgColor-success; + color: $ms-color-successText; - .ms-MessageBar-actionables { - display: flex; - flex-direction: column; - width: 100%; - min-width: 0; + .icon { + @include ms-fontColor-green; } +} - .ms-MessageBar-actionables > .ms-MessageBar-dismissal { - right: 0; - top: 0; - position: absolute !important; // Needed because we're using focus-border mixin - } +// Shared - .ms-MessageBar-actions, .ms-MessageBar-actionsOneline { - display: flex; - flex: 0 0 auto; - flex-direction: row-reverse; - align-items: center; - } +.content { + padding: 16px; + display: flex; + width: 100%; + box-sizing: border-box; +} - .ms-MessageBar-actionsOneline { - position: relative; - } +.actionables { + display: flex; + flex-direction: column; + width: 100%; + min-width: 0; +} - .ms-MessageBar-dismissal { - @include focus-border(); - min-width: 0; - } - .ms-MessageBar-dismissalOneline .ms-MessageBar-dismissal { - @include margin-right(-8px); - } +.actionables > .dismissal { + right: 0; + top: 0; + position: absolute !important; // Needed because we're using focus-border mixin +} - // Add space between adjacent MessageBars. - .ms-MessageBar + .ms-MessageBar { - margin-bottom: 6px; - } +.actions, .actionsOneline { + display: flex; + flex: 0 0 auto; + flex-direction: row-reverse; + align-items: center; +} - .ms-MessageBar-innerTextPadding { - @include padding-right(24px); // Add padding if we have a dismiss to prevent button overlapping text. +.actionsOneline { + position: relative; +} - span, .ms-MessageBar-innerText > span { - @include padding-right(4px); // Add padding between text and hyperlink. - } - } +.dismissal { + @include focus-border(); + min-width: 0; +} +.dismissalOneline .dismissal { + @include margin-right(-8px); +} + +// Add space between adjacent MessageBars. +.root + .root { + margin-bottom: 6px; +} + +.innerTextPadding { + @include padding-right(24px); // Add padding if we have a dismiss to prevent button overlapping text. - // When we can have multiple lines in the message bar. - .ms-MessageBar-multiline > .ms-MessageBar-content > .ms-MessageBar-actionables { - flex-direction: column; + span, .innerText > span { + @include padding-right(4px); // Add padding between text and hyperlink. } +} - // When we should have only a single line of text in the message bar. - .ms-MessageBar-singleline { - .ms-MessageBar-content { - .ms-MessageBar-icon{ - align-items: center; - } +// When we can have multiple lines in the message bar. +.multiline > .content > .actionables { + flex-direction: column; +} - .ms-MessageBar-actionables > .ms-MessageBar-text { - justify-content: center; - align-items: center; - - .ms-MessageBar-innerText, - .ms-MessageBar-innerTextPadding { - max-height: 1.3em; - line-height: 1.3em; - overflow-x: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - } +// When we should have only a single line of text in the message bar. +.singleline { + .content { + .icon{ + align-items: center; } - .ms-MessageBar-content > .ms-MessageBar-actionables { - flex-direction: row; + .actionables > .text { + justify-content: center; + align-items: center; + + .innerText, + .innerTextPadding { + max-height: 1.3em; + line-height: 1.3em; + overflow-x: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } } } - // Because of an odd behaviour in other CSS, ms-MessageBar--remove causes children's icons to use 8px, and not inherit. - .ms-MessageBar .ms-Icon--Cancel { - font-size: 14px; + .content > .actionables { + flex-direction: row; } } + +// Because of an odd behaviour in other CSS, ms-MessageBar--remove causes children's icons to use 8px, and not inherit. +.root :global(.ms-Icon--Cancel) { + font-size: 14px; +} diff --git a/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.tsx b/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.tsx index c13f7d866eb88..022265b30974e 100644 --- a/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.tsx +++ b/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.tsx @@ -5,7 +5,7 @@ import { } from '../../Utilities'; import { Button, ButtonType } from '../../Button'; import { IMessageBarProps, MessageBarType } from './MessageBar.Props'; -import './MessageBar.scss'; +import styles from './MessageBar.scss'; export interface IMessageBarState { labelId?: string; @@ -56,7 +56,9 @@ export class MessageBar extends React.Component + return
{ this.props.actions }
; } @@ -64,13 +66,14 @@ export class MessageBar extends React.Component= 1.0.0 - 'ms-MessageBar--severeWarning': this.props.messageBarType === MessageBarType.severeWarning, - 'ms-MessageBar--success': this.props.messageBarType === MessageBarType.success, - 'ms-MessageBar--warning': this.props.messageBarType === MessageBarType.warning + return css(this.props.className, 'ms-MessageBar', styles.root, { + ['ms-MessageBar ' + styles.root]: this.props.messageBarType === MessageBarType.info, + ['ms-MessageBar--error ' + styles.rootIsError]: this.props.messageBarType === MessageBarType.error, + ['ms-MessageBar--blocked ' + styles.rootIsBlocked]: (this.props.messageBarType === MessageBarType.blocked) || + (this.props.messageBarType === MessageBarType.remove), // TODO remove deprecated value at >= 1.0.0 + ['ms-MessageBar--severeWarning ' + styles.rootIsSevereWarning]: this.props.messageBarType === MessageBarType.severeWarning, + ['ms-MessageBar--success ' + styles.rootIsSuccess]: this.props.messageBarType === MessageBarType.success, + ['ms-MessageBar--warning ' + styles.rootIsWarning]: this.props.messageBarType === MessageBarType.warning }); } @@ -78,7 +81,7 @@ export class MessageBar extends React.Component
; + return ( +
+ +
+ ); } private _getInnerTextClassName(): string { - return this.props.onDismiss || this.props.actions ? 'ms-MessageBar-innerTextPadding' : 'ms-MessageBar-innerText'; + return this.props.onDismiss || this.props.actions ? + 'ms-MessageBar-innerTextPadding ' + styles.innerTextPadding : 'ms-MessageBar-innerText ' + styles.innerText; } private _renderMultiLine(): React.ReactElement> { return (
-
+
{ this._getIconSpan() } -
-
+
+
{ this.state.showContent && this.props.children } @@ -120,20 +128,20 @@ export class MessageBar extends React.Component> { return ( -
-
+
{ this._getIconSpan() } -
-
+
+
{ this.state.showContent && this.props.children }
{ this._getActionsDiv() } -
+
{ this._getDismissDiv() }
diff --git a/packages/office-ui-fabric-react/src/components/Overlay/Overlay.scss b/packages/office-ui-fabric-react/src/components/Overlay/Overlay.scss index d517e90088353..25b9b60049dac 100644 --- a/packages/office-ui-fabric-react/src/components/Overlay/Overlay.scss +++ b/packages/office-ui-fabric-react/src/components/Overlay/Overlay.scss @@ -7,25 +7,23 @@ // -------------------------------------------------- // Modal overlay styles -:global { - .ms-Overlay { - background-color: $ms-color-whiteTranslucent40; - position: absolute; - bottom: 0; - left: 0; - right: 0; - top: 0; +.root { + background-color: $ms-color-whiteTranslucent40; + position: absolute; + bottom: 0; + left: 0; + right: 0; + top: 0; - //== Modifier: Hidden overlay - // - &.ms-Overlay--none { - visibility: hidden; - } +//== Modifier: Hidden overlay + // + &.rootIsNone { + visibility: hidden; + } - //== Modifier: Dark overlay - // - &.ms-Overlay--dark { - background-color: $ms-color-blackTranslucent40; - } + //== Modifier: Dark overlay + // + &.rootIsDark { + background-color: $ms-color-blackTranslucent40; } } 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 d8f5cbb1d912d..964d6391504cd 100644 --- a/packages/office-ui-fabric-react/src/components/Overlay/Overlay.tsx +++ b/packages/office-ui-fabric-react/src/components/Overlay/Overlay.tsx @@ -6,7 +6,7 @@ import { } from '../../Utilities'; import { IOverlayProps } from './Overlay.Props'; -import './Overlay.scss'; +import styles from './Overlay.scss'; export class Overlay extends React.Component { public render() { @@ -15,9 +15,10 @@ export class Overlay extends React.Component { let modifiedClassName = css( 'ms-Overlay', + styles.root, className, { - 'ms-Overlay--dark': isDarkThemed + ['ms-Overlay--dark ' + styles.rootIsDark]: isDarkThemed, }); return ( From 03d3c03cc8af8746614f74b67db387f8bc1843f7 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Fri, 24 Feb 2017 10:48:56 -0800 Subject: [PATCH 07/44] Dzearing component css form (#1102) * Updated checkbox to use css modules. * Fixing indentation * Updating choicegroup. * Fixing checkmark icon. * Fixing Icon and Image. * Updating ColorPicker. * Layer, MarqueeSelection. * Fixing dropdown. * Fixing TextField. * Updates to Slider, Spinner, Checkbox. * Updating ProgressIndicator and Rating. * Added change file. * Fixing icon. * Fixing choicegroup feedback. * Addressing feedback. * Updating tetxfield. * Updated checkbox with full elelment name selectors * Updated spinner with full element class names * UPdated more classes to use full name --- .../component-css-form_2017-02-21-04-37.json | 10 + packages/office-ui-fabric-react/gulpfile.js | 5 +- .../src/components/Checkbox/Checkbox.scss | 309 ++++++------ .../src/components/Checkbox/Checkbox.tsx | 30 +- .../components/ChoiceGroup/ChoiceGroup.scss | 468 +++++++++--------- .../components/ChoiceGroup/ChoiceGroup.tsx | 64 ++- .../components/ColorPicker/ColorPicker.scss | 191 ++++--- .../components/ColorPicker/ColorPicker.tsx | 36 +- .../components/ColorPicker/ColorRectangle.tsx | 12 +- .../components/ColorPicker/ColorSlider.tsx | 7 +- .../src/components/Icon/Icon.scss | 10 +- .../src/components/Icon/Icon.tsx | 4 +- .../src/components/Image/Image.scss | 118 +++-- .../src/components/Image/Image.tsx | 39 +- .../src/components/Layer/Layer.scss | 24 +- .../src/components/Layer/Layer.tsx | 8 +- .../MarqueeSelection/MarqueeSelection.scss | 56 +-- .../MarqueeSelection/MarqueeSelection.tsx | 12 +- .../ProgressIndicator/ProgressIndicator.scss | 94 ++-- .../ProgressIndicator/ProgressIndicator.tsx | 14 +- .../src/components/Rating/Rating.scss | 101 ++-- .../src/components/Rating/Rating.tsx | 29 +- .../src/components/Slider/Slider.scss | 187 ++++--- .../src/components/Slider/Slider.tsx | 32 +- .../src/components/Spinner/Spinner.scss | 87 ++-- .../src/components/Spinner/Spinner.tsx | 28 +- .../src/components/TextField/TextField.scss | 368 +++++++------- .../src/components/TextField/TextField.tsx | 47 +- 28 files changed, 1217 insertions(+), 1173 deletions(-) create mode 100644 common/changes/component-css-form_2017-02-21-04-37.json diff --git a/common/changes/component-css-form_2017-02-21-04-37.json b/common/changes/component-css-form_2017-02-21-04-37.json new file mode 100644 index 0000000000000..a8f49f3e68d0e --- /dev/null +++ b/common/changes/component-css-form_2017-02-21-04-37.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Checkbox, Choicegroup, Icon, Image, ColorPicker, MarqueeSelection, Layer, Dropdown, TextField, Slider, Spinner, ProgressIndicator, and Rating all updated to use css modules.", + "type": "patch" + } + ], + "email": "dzearing@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/gulpfile.js b/packages/office-ui-fabric-react/gulpfile.js index 9099a698655a2..1333d8ca6a40e 100644 --- a/packages/office-ui-fabric-react/gulpfile.js +++ b/packages/office-ui-fabric-react/gulpfile.js @@ -22,6 +22,9 @@ build.typescript.setConfig({ typescript: require('typescript') }); // Use css modules. build.sass.setConfig({ useCSSModules: true }); +// Use Karma Tests - Disable during develoment if prefered +build.karma.isEnabled = () => true; + // Disable unnecessary subtasks. build.preCopy.isEnabled = () => false; build.postCopy.isEnabled = () => isProduction; @@ -62,4 +65,4 @@ build.task('tslint', build.tslint); build.task('ts', build.typescript); // initialize tasks. -build.initialize(gulp); +build.initialize(gulp); \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.scss b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.scss index fdea6d83ebd93..e83a7397a2b01 100644 --- a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.scss +++ b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.scss @@ -32,198 +32,195 @@ $ms-checkbox-highContrast-iconBoxSize: 16px; } } -:global { - - .ms-Checkbox { - box-sizing: border-box; - color: $ms-color-neutralPrimary; - font-family: $ms-font-family-base; - font-size: $ms-font-size-m; - font-weight: $ms-font-weight-regular; - min-height: 36px; - position: relative; - - .ms-Label { - font-size: $ms-font-size-m; - @include padding(0, 0, 0, 26px); - display: inline-block; - } - } +.root { + box-sizing: border-box; + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-base; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + min-height: 36px; + position: relative; +} - // The hidden input - .ms-Checkbox-input { - position: absolute; - opacity: 0; - top: 8px - } +.textLabel { + font-size: $ms-font-size-m; + @include padding(0, 0, 0, 26px); + display: inline-block; + font-size: $ms-font-size-m; +} - // The checkbox square container - .ms-Checkbox-label::before { - content: ''; - display: inline-block; - border: 1px solid $ms-color-neutralTertiary; - width: $ms-checkbox-label-size; - height: $ms-checkbox-label-size; - font-weight: normal; - position: absolute; - box-sizing: border-box; - transition-property: background, border, border-color; - transition-duration: $ms-checkbox-transition-duration; - transition-timing-function: $ms-checkbox-transition-timing; - } +// The hidden input +.input { + position: absolute; + opacity: 0; + top: 8px +} - // The check mark icon - .ms-Checkbox-label::after { - @include ms-Icon--CheckMark; - font-family: 'FabricMDL2Icons'; - display: none; - position: absolute; - font-weight: 900; - background-color: transparent; - font-size: $ms-font-size-s-plus; - top: 0; - color: $ms-color-white; - line-height: $ms-checkbox-label-size; - width: $ms-checkbox-label-size; - text-align: center; - } +// The checkbox square container +.label::before { + content: ''; + display: inline-block; + border: 1px solid $ms-color-neutralTertiary; + width: $ms-checkbox-label-size; + height: $ms-checkbox-label-size; + font-weight: normal; + position: absolute; + box-sizing: border-box; + transition-property: background, border, border-color; + transition-duration: $ms-checkbox-transition-duration; + transition-timing-function: $ms-checkbox-transition-timing; +} - // The checkbox label - .ms-Checkbox-label { - display: inline-block; - cursor: pointer; - margin-top: 8px; - position: relative; - vertical-align: top; - user-select: none; - min-width: $ms-checkbox-label-size; - min-height: $ms-checkbox-label-size; - line-height: $ms-checkbox-label-size; - - &:hover { - &::before { - border-color: $ms-color-neutralSecondaryAlt; - } +// The check mark icon +.label::after { + @include ms-Icon--CheckMark; + font-family: 'FabricMDL2Icons'; + display: none; + position: absolute; + font-weight: 900; + background-color: transparent; + font-size: $ms-font-size-s-plus; + top: 0; + color: $ms-color-white; + line-height: $ms-checkbox-label-size; + width: $ms-checkbox-label-size; + text-align: center; +} - .ms-Label { - color: $ms-color-black; - } +// The checkbox label +.label { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; + vertical-align: top; + user-select: none; + min-width: $ms-checkbox-label-size; + min-height: $ms-checkbox-label-size; + line-height: $ms-checkbox-label-size; + + &:hover { + &::before { + border-color: $ms-color-neutralSecondaryAlt; } - &:focus { - &::before { - border-color: $ms-color-neutralSecondaryAlt; - } + .textLabel { + color: $ms-color-black; + } + } - &.is-disabled::before { - border-color: $ms-color-neutralTertiaryAlt; - } + &:focus { + &::before { + border-color: $ms-color-neutralSecondaryAlt; + } - &.is-checked::before { - border-color: $ms-color-themeDarkAlt; - } + &.labelIsDisabled::before { + border-color: $ms-color-neutralTertiaryAlt; } - &:active { - &::before { - border-color: $ms-color-neutralSecondaryAlt; - } + &.labelIsChecked::before { + border-color: $ms-color-themeDarkAlt; + } + } - .ms-Label { - color: $ms-color-black; - } + &:active { + &::before { + border-color: $ms-color-neutralSecondaryAlt; } - //== State: A checkbox is checked - // - &.is-checked { - &::before { - border: 10px solid $ms-color-themePrimary; - background-color: $ms-color-themePrimary; + .textLabel { + color: $ms-color-black; + } + } - @media screen and (-ms-high-contrast: active), (-ms-high-contrast: black-on-white) { - display: none; - } - } + //== State: A checkbox is checked + // + &.labelIsChecked { + &::before { + border: 10px solid $ms-color-themePrimary; + background-color: $ms-color-themePrimary; - &::after { - display: block; + @media screen and (-ms-high-contrast: active), (-ms-high-contrast: black-on-white) { + display: none; + } + } - @media screen and (-ms-high-contrast: active), (-ms-high-contrast: black-on-white) { - height: $ms-checkbox-highContrast-iconBoxSize; - width: $ms-checkbox-highContrast-iconBoxSize; - line-height: $ms-checkbox-highContrast-iconBoxSize; - } + &::after { + display: block; - @include highContrast-border($ms-color-white, $ms-color-black); + @media screen and (-ms-high-contrast: active), (-ms-high-contrast: black-on-white) { + height: $ms-checkbox-highContrast-iconBoxSize; + width: $ms-checkbox-highContrast-iconBoxSize; + line-height: $ms-checkbox-highContrast-iconBoxSize; } - &:hover, - &:focus { - &::before { - border-color: $ms-color-themeDarkAlt; - } - } + @include highContrast-border($ms-color-white, $ms-color-black); } - //== State: A disabled checkbox - // - &.is-disabled { - cursor: default; - - &:hover, - &:focus { - &::before { - border-color: $ms-color-neutralTertiaryAlt; - } + &:hover, + &:focus { + &::before { + border-color: $ms-color-themeDarkAlt; } + } + } + //== State: A disabled checkbox + // + &.labelIsDisabled { + cursor: default; + + &:hover, + &:focus { &::before { - background-color: $ms-color-neutralTertiaryAlt; border-color: $ms-color-neutralTertiaryAlt; - color: $ms-color-neutralTertiaryAlt; } + } - &::after { - @include highContrast-border($ms-color-contrastBlackDisabled, $ms-color-contrastWhiteDisabled); - @include highContrast-color($ms-color-contrastBlackDisabled, $ms-color-contrastWhiteDisabled); - } - - .ms-Label { - color: $ms-color-neutralTertiary; - - @include highContrast-color($ms-color-contrastBlackDisabled, $ms-color-contrastWhiteDisabled); - } + &::before { + background-color: $ms-color-neutralTertiaryAlt; + border-color: $ms-color-neutralTertiaryAlt; + color: $ms-color-neutralTertiaryAlt; } - //== State: A checkbox in focus - // - &.is-inFocus { - &::before { - border-color: $ms-color-neutralSecondaryAlt; - } + &::after { + @include highContrast-border($ms-color-contrastBlackDisabled, $ms-color-contrastWhiteDisabled); + @include highContrast-color($ms-color-contrastBlackDisabled, $ms-color-contrastWhiteDisabled); + } - &.is-disabled::before { - border-color: $ms-color-neutralTertiaryAlt; - } + .textLabel { + color: $ms-color-neutralTertiary; - &.is-checked::before { - border-color: $ms-color-themeDarkAlt; - } + @include highContrast-color($ms-color-contrastBlackDisabled, $ms-color-contrastWhiteDisabled); } } - .is-focusVisible .ms-Checkbox.is-inFocus { + //== State: A checkbox in focus + // + &.labelIsInFocus { &::before { - content: ''; - position: absolute; - top: 0px; - bottom: 0px; - @include right(0px); - @include left(-8px); - border: 1px solid $focusedBorderColor; - @include highContrast-border($ms-color-white, $ms-color-black, 1px); + border-color: $ms-color-neutralSecondaryAlt; + } + + &.labelIsDisabled::before { + border-color: $ms-color-neutralTertiaryAlt; + } + + &.labelIsChecked::before { + border-color: $ms-color-themeDarkAlt; } } +} -} \ No newline at end of file +:global(.ms-Fabric.is-focusVisible) .rootIsInFocus { + &::before { + content: ''; + position: absolute; + top: 0px; + bottom: 0px; + left: 0; + right: 0; + border: 1px solid $focusedBorderColor; + @include highContrast-border($ms-color-white, $ms-color-black, 1px); + } +} diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.tsx b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.tsx index 4b8103cce6b75..e717051017f18 100644 --- a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.tsx +++ b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.tsx @@ -9,7 +9,7 @@ import { ICheckbox, ICheckboxProps } from './Checkbox.Props'; -import './Checkbox.scss'; +import styles from './Checkbox.scss'; export interface ICheckboxState { /** Is true when the control has focus. */ @@ -48,12 +48,19 @@ export class Checkbox extends BaseComponent impl } = this.props; const { isFocused } = this.state; - const isChecked = checked === undefined ? this.state.isChecked : checked; + const isChecked = checked === undefined ? this.state.isFocused : checked; return (
+ className={ css( + 'ms-Checkbox', + styles.root, + className, + { + 'is-inFocus': isFocused, + [styles.rootIsInFocus]: isFocused + }) } + > impl ref={ this._resolveRef('_checkBox') } id={ this._id } name={ name || this._id } - className='ms-Checkbox-input' + className={ css('ms-Checkbox-input', styles.input) } type='checkbox' onChange={ this._onChange } onFocus={ this._onFocus } onBlur={ this._onBlur } aria-checked={ isChecked } - /> + /> { this.props.children }
); diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.scss b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.scss index 6e500ddd02cc2..149f6325ff290 100644 --- a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.scss +++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.scss @@ -14,310 +14,304 @@ $ms-choiceField-transition-timing: cubic-bezier(.4, 0, .23, 1); //== Component: Choicefield group // -:global { - .ms-ChoiceFieldGroup { - @include ms-baseFont; - margin-bottom: 4px; - - .ms-ChoiceFieldGroup-list { - padding: 0; - margin: 0; - } - } - - .ms-ChoiceField { - box-sizing: border-box; - color: $ms-color-neutralPrimary; - font-family: $ms-font-family-base; +.root { + @include ms-baseFont; + margin-bottom: 4px; +} + +.choiceField { + box-sizing: border-box; + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-base; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + min-height: 36px; + border: 1px solid transparent; + position: relative; + line-height: $ms-choiceField-field-size; + @include padding-left(8px); + + :global(.ms-Label) { font-size: $ms-font-size-m; - font-weight: $ms-font-weight-regular; - min-height: 36px; - border: 1px solid transparent; - position: relative; - line-height: $ms-choiceField-field-size; - @include padding-left(8px); - - .ms-Label { - font-size: $ms-font-size-m; - @include padding(0, 0, 0, 26px); - display: inline-block; - } + @include padding(0, 0, 0, 26px); + display: inline-block; + } +} + +// The hidden input +.input { + position: absolute; + opacity: 0; + top: 8px +} + +// The choiceField container +.field::before { + content: ''; + display: inline-block; + border: 2px solid $ms-color-neutralTertiary; + width: $ms-choiceField-field-size; + height: $ms-choiceField-field-size; + font-weight: normal; + position: absolute; + box-sizing: border-box; + transition-property: background, border, border-color; + transition-duration: $ms-choiceField-transition-duration; + transition-timing-function: $ms-choiceField-transition-timing; + border-radius: 50%; +} + +// The circle +.field::after { + content: ''; + width: 0; + height: 0; + border-radius: 50%; + position: absolute; + top: $ms-choiceField-field-size / 2; + @include left($ms-choiceField-field-size / 2); + bottom: 0; + @include right(0); + transition-property: top, left, right, width, height; + transition-duration: $ms-choiceField-transition-duration-inner; + transition-timing-function: $ms-choiceField-transition-timing; + box-sizing: border-box; + +@media screen and (-ms-high-contrast: active) { + color: $ms-color-contrastBlackDisabled; } - // The hidden input - .ms-ChoiceField-input { - position: absolute; - opacity: 0; - top: 8px + @media screen and (-ms-high-contrast: black-on-white) { + color: $ms-color-contrastWhiteDisabled; } +} + +// The choiceField field +.field { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; + vertical-align: top; + user-select: none; + + &:hover { + &::before { + border-color: $ms-color-neutralSecondaryAlt; + } - // The choiceField container - .ms-ChoiceField-field::before { - content: ''; - display: inline-block; - border: 2px solid $ms-color-neutralTertiary; - width: $ms-choiceField-field-size; - height: $ms-choiceField-field-size; - font-weight: normal; - position: absolute; - box-sizing: border-box; - transition-property: background, border, border-color; - transition-duration: $ms-choiceField-transition-duration; - transition-timing-function: $ms-choiceField-transition-timing; - border-radius: 50%; + :global(.ms-Label) { + color: $ms-color-black; + } } - // The circle - .ms-ChoiceField-field::after { - content: ''; - width: 0; - height: 0; - border-radius: 50%; - position: absolute; - top: $ms-choiceField-field-size / 2; - @include left($ms-choiceField-field-size / 2); - bottom: 0; - @include right(0); - transition-property: top, left, right, width, height; - transition-duration: $ms-choiceField-transition-duration-inner; - transition-timing-function: $ms-choiceField-transition-timing; - box-sizing: border-box; + &:focus { + &::before { + border-color: $ms-color-neutralSecondaryAlt; + } - @media screen and (-ms-high-contrast: active) { - color: $ms-color-contrastBlackDisabled; + &.fieldIsDisabled::before { + border-color: $ms-color-neutralTertiaryAlt; } - @media screen and (-ms-high-contrast: black-on-white) { - color: $ms-color-contrastWhiteDisabled; + &.fieldIsChecked::before { + border-color: $ms-color-themeDarkAlt; } } + &:active { + &::before { + border-color: $ms-color-neutralSecondaryAlt; + } - // The choiceField field - .ms-ChoiceField-field { - display: inline-block; - cursor: pointer; - margin-top: 8px; - position: relative; - vertical-align: top; - user-select: none; + :global(.ms-Label) { + color: $ms-color-black; + } + } - &:hover { - &::before { - border-color: $ms-color-neutralSecondaryAlt; + //== State: A choiceField is checked + // + &.fieldIsChecked { + &::before { + border: 2px solid $ms-color-themePrimary; + background-color: transparent; + + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-contrastBlackSelected; } - .ms-Label { - color: $ms-color-black; + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-contrastWhiteSelected; } } - &:focus { - &::before { - border-color: $ms-color-neutralSecondaryAlt; - } + &::after { + background-color: $ms-color-themePrimary; + top: 5px; + @include left(5px); + width: 10px; + height: 10px; - &.is-disabled::before { - border-color: $ms-color-neutralTertiaryAlt; + @media screen and (-ms-high-contrast: active) { + background-color: $ms-color-contrastBlackSelected; } - &.is-checked::before { - border-color: $ms-color-themeDarkAlt; + @media screen and (-ms-high-contrast: black-on-white) { + background-color: $ms-color-contrastWhiteSelected; } } - &:active { - &::before { - border-color: $ms-color-neutralSecondaryAlt; - } - .ms-Label { - color: $ms-color-black; + &:hover, + &:focus { + &::before { + border-color: $ms-color-themeDarkAlt; } } + } - //== State: A choiceField is checked - // - &.is-checked { - &::before { - border: 2px solid $ms-color-themePrimary; - background-color: transparent; - - @media screen and (-ms-high-contrast: active) { - border-color: $ms-color-contrastBlackSelected; - } + //== State: A disabled choiceField + // + &.fieldIsDisabled { + cursor: default; - @media screen and (-ms-high-contrast: black-on-white) { - border-color: $ms-color-contrastWhiteSelected; - } + &:hover, + &:focus { + &::before { + border-color: $ms-color-neutralTertiaryAlt; } + } - &::after { - background-color: $ms-color-themePrimary; - top: 5px; - @include left(5px); - width: 10px; - height: 10px; + &::before { + background-color: $ms-color-neutralTertiaryAlt; + border-color: $ms-color-neutralTertiaryAlt; + color: $ms-color-neutralTertiaryAlt; - @media screen and (-ms-high-contrast: active) { - background-color: $ms-color-contrastBlackSelected; - } - - @media screen and (-ms-high-contrast: black-on-white) { - background-color: $ms-color-contrastWhiteSelected; - } + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-contrastBlackDisabled; } - &:hover, - &:focus { - &::before { - border-color: $ms-color-themeDarkAlt; - } + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-contrastWhiteDisabled; } } - //== State: A disabled choiceField - // - &.is-disabled { - cursor: default; + :global(.ms-Label) { + color: $ms-color-neutralTertiary; - &:hover, - &:focus { - &::before { - border-color: $ms-color-neutralTertiaryAlt; - } + @media screen and (-ms-high-contrast: active) { + color: $ms-color-contrastBlackDisabled; } - &::before { - background-color: $ms-color-neutralTertiaryAlt; - border-color: $ms-color-neutralTertiaryAlt; - color: $ms-color-neutralTertiaryAlt; - - @media screen and (-ms-high-contrast: active) { - border-color: $ms-color-contrastBlackDisabled; - } - - @media screen and (-ms-high-contrast: black-on-white) { - border-color: $ms-color-contrastWhiteDisabled; - } + @media screen and (-ms-high-contrast: black-on-white) { + color: $ms-color-contrastWhiteDisabled; } + } + } - .ms-Label { - color: $ms-color-neutralTertiary; + //== State: A choiceField in focus + // + &.choiceFieldIsInFocus { + &::before { + border-color: $ms-color-neutralSecondaryAlt; + } - @media screen and (-ms-high-contrast: active) { - color: $ms-color-contrastBlackDisabled; - } + &.fieldIsDisabled::before { + border-color: $ms-color-neutralTertiaryAlt; + } - @media screen and (-ms-high-contrast: black-on-white) { - color: $ms-color-contrastWhiteDisabled; - } - } + &.fieldIsChecked::before { + border-color: $ms-color-themeDarkAlt; } + } +} - //== State: A choiceField in focus - // - &.is-inFocus { - &::before { - border-color: $ms-color-neutralSecondaryAlt; - } +.choiceFieldIsImage { + $fieldMinWidth: 164px; + $fieldPadding: 20px; - &.is-disabled::before { - border-color: $ms-color-neutralTertiaryAlt; - } + display: inline-block; - &.is-checked::before { - border-color: $ms-color-themeDarkAlt; - } - } - } + font-size: 0; - .ms-ChoiceField--image { - $fieldMinWidth: 164px; - $fieldPadding: 20px; + @include margin-right(6px); + @include padding-left(0px); + @include ms-bgColor-neutralLighter; + .fieldIsImage { display: inline-block; - font-size: 0; + box-sizing: border-box; + min-width: $fieldMinWidth; + cursor: pointer; + padding: $fieldPadding $fieldPadding 12px $fieldPadding; + text-align: center; + transition: all $ms-choiceField-transition-duration ease; - @include margin-right(6px); - @include padding-left(0px); - @include ms-bgColor-neutralLighter; + .innerField { + position: relative; - .ms-ChoiceField-field--image { - display: inline-block; + .imageWrapper { + transition: opacity $ms-choiceField-transition-duration ease; - box-sizing: border-box; - min-width: $fieldMinWidth; - cursor: pointer; - padding: $fieldPadding $fieldPadding 12px $fieldPadding; - text-align: center; - transition: all $ms-choiceField-transition-duration ease; - - .ms-ChoiceField-innerField { - position: relative; - - .ms-ChoiceField-imageWrapper { - transition: opacity $ms-choiceField-transition-duration ease; - - &.is-hidden { - position: absolute; - @include left(0); - top: 0; - width: 100%; - height: 100%; - overflow: hidden; - opacity: 0; - } - - .ms-Image { - display: inline-block; - } + &.imageWrapperIsHidden { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: hidden; + opacity: 0; } - .ms-ChoiceField-iconWrapper { - font-size: $ms-font-size-su; - line-height: $ms-font-size-su; + + :global(.ms-Image) { + display: inline-block; } } - .ms-ChoiceField-labelWrapper { - display: inline-block; - position: relative; - margin: 10px 0 0 0; - padding: 0 24px; - - .ms-ChoiceField-icon { - display: none; - position: absolute; - @include left(0); - line-height: $ms-font-size-s; + .iconWrapper { + font-size: $ms-font-size-su; + line-height: $ms-font-size-su; + } + } - @include ms-fontSize-l; - @include ms-fontColor-themeDark; - } + .labelWrapper { + display: inline-block; + position: relative; + margin: 10px 0 0 0; + padding: 0 24px; + + .icon { + display: none; + position: absolute; + @include left(0); + line-height: $ms-font-size-s; + + @include ms-fontSize-l; + @include ms-fontColor-themeDark; + } - .ms-Label { - display: inline-block; - padding: 0; - line-height: $ms-font-size-s; + :global(.ms-Label) { + display: inline-block; + padding: 0; + line-height: $ms-font-size-s; - @include ms-fontWeight-semibold; - @include ms-fontColor-neutralPrimary; - } + @include ms-fontWeight-semibold; + @include ms-fontColor-neutralPrimary; } + } - &.is-checked { - @include ms-bgColor-themeLighter; + &.fieldIsChecked { + @include ms-bgColor-themeLighter; - .ms-ChoiceField-labelWrapper .ms-ChoiceField-icon { - display: inline-block; - } - .ms-ChoiceField-iconWrapper { - @include ms-fontColor-themeDark; - } + .labelWrapper .icon { + display: inline-block; + } + .iconWrapper { + @include ms-fontColor-themeDark; } } } +} - .is-focusVisible .ms-ChoiceField.is-inFocus { - border: 1px solid $ms-color-neutralPrimary; - } +:global(.ms-Fabric.is-focusVisible) .choiceFieldIsInFocus { + border: 1px solid $ms-color-neutralPrimary; } \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.tsx b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.tsx index 11a4fbbe21beb..c0f029f0847bc 100644 --- a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.tsx +++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { Image } from '../../Image'; +import { Label } from '../../Label'; import { Icon, IIconProps } from '../../Icon'; import { IChoiceGroupOption, IChoiceGroupProps } from './ChoiceGroup.Props'; import { @@ -7,7 +8,7 @@ import { getId, BaseComponent } from '../../Utilities'; -import './ChoiceGroup.scss'; +import styles from './ChoiceGroup.scss'; export interface IChoiceGroupState { keyChecked: string; @@ -60,27 +61,27 @@ export class ChoiceGroup extends BaseComponent
-
- { this.props.label ? : null } -
+ { this.props.label && ( + + ) } { options.map((option) => (
this._inputElement = c } id={ `${this._id}-${option.key}` } - className='ms-ChoiceField-input' + className={ css('ms-ChoiceField-input', styles.input) } type='radio' name={ this.props.name || this._id } disabled={ option.isDisabled || option.disabled || this.props.disabled } @@ -126,23 +127,35 @@ export class ChoiceGroup extends BaseComponent { - option.imageSrc - ?
-
+ option.imageSrc && ( +
+
-
+
- : null + ) } { option.iconProps - ?
-
+ ?
+
@@ -163,11 +176,14 @@ export class ChoiceGroup extends BaseComponent - + ? ( +
+ + { option.text } +
+ ) : ( { option.text } -
- : { option.text } + ) } ); diff --git a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.scss b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.scss index 7276b54a73683..27decc62b5065 100644 --- a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.scss +++ b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.scss @@ -1,108 +1,107 @@ @import '../../common/common'; -:global { - .ms-ColorPicker { - position: relative; - max-width: 300px; +.root { + position: relative; + max-width: 300px; +} + +.panel { + padding: 16px; +} + +.colorRect { + position: relative; + margin-bottom: 10px; +} + +.rectContainer { + position: relative; +} + +.capture { + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 0; + background: rgba(255,0,0,.1); +} + +.rectContainer.rectContainerIsAdjusting .capture { + position: fixed; +} + +.thumb { + position: absolute; + width: 20px; + height: 20px; + background: white; + border: 1px solid rgba(255,255,255,.8); + border-radius: 50%; + box-shadow: 0 0 15px -5px black; + transform: translate(-50%, -50%); + + &.thumbIsSlider { + top: 50%; } - - .ms-ColorPicker-panel { - padding: 16px; - } - - .ms-ColorPicker-colorRect { - position: relative; - margin-bottom: 10px; - } - - .ms-ColorPicker-rectContainer { - position: relative; - } - - .ms-ColorPicker-capture { - position: absolute; - left: 0; - top: 0; - bottom: 0; - right: 0; - background: rgba(255,0,0,.1); - } - - .ms-ColorPicker-rectContainer.is-adjusting .ms-ColorPicker-capture { - position: fixed; +} + +.light { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + background: linear-gradient(to right, white 0%, transparent 100%); +} + +.dark { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + background: linear-gradient(to bottom, transparent 0, #000 100%); +} + +.slider { + position: relative; + height: 20px; + margin-bottom: 5px; + border: 1px solid $ms-color-neutralLight; + box-sizing: border-box; + + &.colorSliderIsHue { + background: linear-gradient(to left,red 0,#f09 10%,#cd00ff 20%,#3200ff 30%,#06f 40%,#00fffd 50%,#0f6 60%,#35ff00 70%,#cdff00 80%,#f90 90%,red 100%); } - .ms-ColorPicker-thumb { - position: absolute; - width: 20px; - height: 20px; - background: white; - border: 1px solid rgba(255,255,255,.8); - border-radius: 50%; - box-shadow: 0 0 15px -5px black; - transform: translate(-50%, -50%); - - &.is-slider { - top: 50%; - } + &.colorSliderIsAlpha { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJUlEQVQYV2N89erVfwY0ICYmxoguxjgUFKI7GsTH5m4M3w1ChQC1/Ca8i2n1WgAAAABJRU5ErkJggg==); } - - .ms-ColorPicker-light { - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - background: linear-gradient(to right, white 0%, transparent 100%); - } - - .ms-ColorPicker-dark { - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - background: linear-gradient(to bottom, transparent 0, #000 100%); - } - - .ms-ColorPicker-slider { - position: relative; - height: 20px; - margin-bottom: 5px; - border: 1px solid $ms-color-neutralLight; - box-sizing: border-box; - - &.is-hue { - background: linear-gradient(to left,red 0,#f09 10%,#cd00ff 20%,#3200ff 30%,#06f 40%,#00fffd 50%,#0f6 60%,#35ff00 70%,#cdff00 80%,#f90 90%,red 100%); - } - - &.is-alpha { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJUlEQVQYV2N89erVfwY0ICYmxoguxjgUFKI7GsTH5m4M3w1ChQC1/Ca8i2n1WgAAAABJRU5ErkJggg==); - } - - } - .ms-ColorPicker-sliderOverlay { - content: ''; - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - } - - .ms-ColorPicker-input { - width: 100%; - border: none; - box-sizing: border-box; - height: 30px; - } - - .ms-ColorPicker-input.ms-TextField { +} + +.sliderOverlay { + content: ''; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; +} + +.input { + width: 100%; + border: none; + box-sizing: border-box; + height: 30px; + + &:global(.ms-TextField) { padding-right: 2px; } - .ms-ColorPicker-input .ms-TextField-field { + .input &:global(.ms-TextField-field) { min-width: auto; padding: 5px; } -} \ No newline at end of file +} + diff --git a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.tsx b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.tsx index 33aa4eb809821..66d2600906c3a 100644 --- a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.tsx +++ b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { autobind } from '../../Utilities'; +import { autobind, css } from '../../Utilities'; import { IColorPickerProps } from './ColorPicker.Props'; import { TextField } from '../../TextField'; import { ColorRectangle } from './ColorRectangle'; @@ -12,7 +12,7 @@ import { updateH, updateSV } from './colors'; -import './ColorPicker.scss'; +import styles from './ColorPicker.scss'; export interface IColorPickerState { isOpen: boolean; @@ -50,11 +50,11 @@ export class ColorPicker extends React.Component -
+
+
{ !this.props.alphaSliderHidden && ( - - - - + + + + + + + + + + + + { !this.props.alphaSliderHidden && ( - ) } + + + + ) } diff --git a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorRectangle.tsx b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorRectangle.tsx index cc1fe159e4397..fd9b919ad9d2a 100644 --- a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorRectangle.tsx +++ b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorRectangle.tsx @@ -2,7 +2,8 @@ import * as React from 'react'; import { EventGroup, assign, - autobind + autobind, + css } from '../../Utilities'; import { IColor, @@ -11,6 +12,7 @@ import { getFullColorString, hsv2hex } from './colors'; +import styles from './ColorPicker.scss'; export interface IColorRectangleProps { color: IColor; @@ -71,10 +73,10 @@ export class ColorRectangle extends React.Component -
-
-
+
+
+
+
); } diff --git a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorSlider.tsx b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorSlider.tsx index 9be53e0f781c6..97d002896244d 100644 --- a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorSlider.tsx +++ b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorSlider.tsx @@ -4,6 +4,7 @@ import { autobind, css } from '../../Utilities'; +import styles from './ColorPicker.scss'; export interface IColorSliderProps { minValue?: number; @@ -65,12 +66,12 @@ export class ColorSlider extends React.Component -
-
+
+
); } diff --git a/packages/office-ui-fabric-react/src/components/Icon/Icon.scss b/packages/office-ui-fabric-react/src/components/Icon/Icon.scss index 3a8c15bf0cf36..9de6896681642 100644 --- a/packages/office-ui-fabric-react/src/components/Icon/Icon.scss +++ b/packages/office-ui-fabric-react/src/components/Icon/Icon.scss @@ -1,9 +1,3 @@ -:global { - .ms-Icon-imageContainer { - overflow: hidden; - } - - .ms-Icon-Image { - position: relative; - } +.imageContainer { + overflow: hidden; } diff --git a/packages/office-ui-fabric-react/src/components/Icon/Icon.tsx b/packages/office-ui-fabric-react/src/components/Icon/Icon.tsx index 2b37c4dfa3277..fd69a00c835d1 100644 --- a/packages/office-ui-fabric-react/src/components/Icon/Icon.tsx +++ b/packages/office-ui-fabric-react/src/components/Icon/Icon.tsx @@ -1,6 +1,6 @@ /* tslint:disable */ import * as React from 'react'; -import './Icon.scss' +import styles from './Icon.scss' /* tslint:enable */ import { IIconProps } from './Icon.Props'; import { IconType } from './IconType'; @@ -15,7 +15,7 @@ export const Icon: (props: IIconProps) => JSX.Element = (props: IIconProps) => { let customIcon = props.iconName === 'None'; if (props.iconType === IconType.Image) { - let containerClassName = css('ms-Icon', 'ms-Icon-imageContainer', props.className); + let containerClassName = css('ms-Icon', 'ms-Icon-imageContainer', styles.imageContainer, props.className); return (
diff --git a/packages/office-ui-fabric-react/src/components/Image/Image.scss b/packages/office-ui-fabric-react/src/components/Image/Image.scss index 96f231634a5f8..efbd49acf5bcb 100644 --- a/packages/office-ui-fabric-react/src/components/Image/Image.scss +++ b/packages/office-ui-fabric-react/src/components/Image/Image.scss @@ -1,82 +1,80 @@ @import '../../common/common'; -:global { - .ms-Image { - overflow: hidden; - } +.root { + overflow: hidden; +} - // Modifier: The image frame should fill its parent element. - .ms-Image--maximizeFrame { - height: 100%; - width: 100%; - } +// Modifier: The image frame should fill its parent element. +.rootIsMaximizeFrame { + height: 100%; + width: 100%; +} - .ms-Image-image { - display: block; - opacity: 0; +.image { + display: block; + opacity: 0; - &.is-loaded { - opacity: 1; - } + &.imageIsLoaded { + opacity: 1; } +} - .ms-Image-image--center, - .ms-Image-image--contain, - .ms-Image-image--cover { - position: relative; - @include left(50%); - top: 50%; - // transform-translateX mixin is not used here because a transateY is also required. - @include LTR { - transform: translate(-50%,-50%); - } - @include RTL { - transform: translate(50%,-50%); - } +.imageIsCenter, +.imageIsContain, +.imageIsCover { + position: relative; + @include left(50%); + top: 50%; + // transform-translateX mixin is not used here because a transateY is also required. + @include LTR { + transform: translate(-50%,-50%); } - - .ms-Image-image--contain { - &.ms-Image-image--landscape { - width: 100%; - height: auto; - } - - &.ms-Image-image--portrait { - height: 100%; - width: auto; - } + @include RTL { + transform: translate(50%,-50%); } +} - .ms-Image-image--cover { - &.ms-Image-image--landscape { - height: 100%; - width: auto; - } - - &.ms-Image-image--portrait { - width: 100%; - height: auto; - } +.imageIsContain { + &.imageIsLandscape { + width: 100%; + height: auto; } - .ms-Image-image--none { - height: auto; + &.imageIsPortrait { + height: 100%; width: auto; } +} - /** This is identical to the default behavior. */ - .ms-Image-image--scaleWidthHeight { +.imageIsCover { + &.imageLandscape { height: 100%; - width: 100%; + width: auto; } - .ms-Image-image--scaleWidth { - height: auto; + &.imageIsPortrait { width: 100%; + height: auto; } +} - .ms-Image-image--scaleHeight { - height: 100%; - width: auto; - } +.imageIsNone { + height: auto; + width: auto; +} + +/** This is identical to the default behavior. */ +.imageIsScaleWidthHeight { + height: 100%; + width: 100%; +} + +.imageIsScaleWidth { + height: auto; + width: 100%; +} + +.imageIsScaleHeight { + height: 100%; + width: auto; } \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Image/Image.tsx b/packages/office-ui-fabric-react/src/components/Image/Image.tsx index ab8bac0c2b7bf..c9f2c910bf551 100644 --- a/packages/office-ui-fabric-react/src/components/Image/Image.tsx +++ b/packages/office-ui-fabric-react/src/components/Image/Image.tsx @@ -10,7 +10,7 @@ import { } from '../../Utilities'; import { IImageProps, ImageFit, ImageLoadState } from './Image.Props'; -import './Image.scss'; +import styles from './Image.scss'; export interface IImageState { loadState?: ImageLoadState; @@ -22,15 +22,15 @@ export enum CoverStyle { } export const CoverStyleMap = { - [CoverStyle.landscape]: 'ms-Image-image--landscape', - [CoverStyle.portrait]: 'ms-Image-image--portrait' + [CoverStyle.landscape]: 'ms-Image-image--landscape ' + styles.imageIsLandscape, + [CoverStyle.portrait]: 'ms-Image-image--portrait ' + styles.imageIsPortrait }; export const ImageFitMap = { - [ImageFit.center]: 'ms-Image-image--center', - [ImageFit.contain]: 'ms-Image-image--contain', - [ImageFit.cover]: 'ms-Image-image--cover', - [ImageFit.none]: 'ms-Image-image--none' + [ImageFit.center]: 'ms-Image-image--center ' + styles.imageIsCenter, + [ImageFit.contain]: 'ms-Image-image--contain ' + styles.imageIsContain, + [ImageFit.cover]: 'ms-Image-image--cover ' + styles.imageIsCover, + [ImageFit.none]: 'ms-Image-image--none ' + styles.imageIsNone }; const KEY_PREFIX: string = 'fabricImage'; @@ -82,33 +82,42 @@ export class Image extends BaseComponent { // If image dimensions aren't specified, the natural size of the image is used. return (
+ > { + />
); } diff --git a/packages/office-ui-fabric-react/src/components/Layer/Layer.scss b/packages/office-ui-fabric-react/src/components/Layer/Layer.scss index dfda2c5b1a0c2..f09d8c521d96e 100644 --- a/packages/office-ui-fabric-react/src/components/Layer/Layer.scss +++ b/packages/office-ui-fabric-react/src/components/Layer/Layer.scss @@ -1,15 +1,13 @@ -:global { - .ms-Layer--fixed { - position: fixed; - z-index: 1000000; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - visibility: hidden; - } +.rootIsFixed { + position: fixed; + z-index: 1000000; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + visibility: hidden; +} - .ms-Layer-content { - visibility: visible; - } +.content { + visibility: visible; } diff --git a/packages/office-ui-fabric-react/src/components/Layer/Layer.tsx b/packages/office-ui-fabric-react/src/components/Layer/Layer.tsx index fe115510d9253..f228efa8fc9cc 100644 --- a/packages/office-ui-fabric-react/src/components/Layer/Layer.tsx +++ b/packages/office-ui-fabric-react/src/components/Layer/Layer.tsx @@ -6,7 +6,7 @@ import * as ReactDOM from 'react-dom'; import { Fabric } from '../../Fabric'; import { ILayerProps } from './Layer.Props'; import { css, BaseComponent, getDocument, setVirtualParent } from '../../Utilities'; -import './Layer.scss'; +import styles from './Layer.scss'; let _layersByHostId: { [hostId: string]: Layer[] } = {}; @@ -76,7 +76,7 @@ export class Layer extends BaseComponent { this._layerElement = doc.createElement('div'); this._layerElement.className = css('ms-Layer', { - 'ms-Layer--fixed': !this.props.hostId + ['ms-Layer--fixed ' + styles.rootIsFixed]: !this.props.hostId }); host.appendChild(this._layerElement); @@ -86,7 +86,7 @@ export class Layer extends BaseComponent { // Using this 'unstable' method allows us to retain the React context across the layer projection. ReactDOM.unstable_renderSubtreeIntoContainer( this, - + { this.props.children } , this._layerElement, @@ -110,7 +110,7 @@ export class Layer extends BaseComponent { + /> ); } diff --git a/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.scss b/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.scss index b1a5622407900..4615fbd8695a3 100644 --- a/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.scss +++ b/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.scss @@ -1,35 +1,33 @@ @import '../../common/common'; -:global { - .ms-MarqueeSelection { - position: relative; - cursor: default; - } +.root { + position: relative; + cursor: default; +} - .ms-MarqueeSelection-dragMask { - position: absolute; - background: rgba(255, 0, 0, 0); - left: 0; - top: 0; - right: 0; - bottom: 0; - } +.dragMask { + position: absolute; + background: rgba(255, 0, 0, 0); + left: 0; + top: 0; + right: 0; + bottom: 0; +} - .ms-MarqueeSelection-box { - position: absolute; - box-sizing: border-box; - border: 1px solid $ms-color-themePrimary; - pointer-events: none; - } +.box { + position: absolute; + box-sizing: border-box; + border: 1px solid $ms-color-themePrimary; + pointer-events: none; +} - .ms-MarqueeSelection-boxFill { - position: absolute; - box-sizing: border-box; - background-color: $ms-color-themePrimary; - opacity: .1; - left: 0; - top: 0; - right: 0; - bottom: 0; - } +.boxFill { + position: absolute; + box-sizing: border-box; + background-color: $ms-color-themePrimary; + opacity: .1; + left: 0; + top: 0; + right: 0; + bottom: 0; } diff --git a/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.tsx b/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.tsx index c079231bb0f6c..485473578b96c 100644 --- a/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.tsx +++ b/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.tsx @@ -11,7 +11,7 @@ import { getRTL } from '../../Utilities'; import { IMarqueeSelectionProps } from './MarqueeSelection.Props'; -import './MarqueeSelection.scss'; +import styles from './MarqueeSelection.scss'; export interface IMarqueeSelectionState { dragOrigin?: IPoint; @@ -82,14 +82,14 @@ export class MarqueeSelection extends BaseComponent + > { children } - { dragRect && (
) } + { dragRect && (
) } { dragRect && ( -
-
+
+
) }
diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.scss b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.scss index df014a15a66f2..c1ce8b8b58ec5 100644 --- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.scss +++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.scss @@ -12,61 +12,59 @@ $ProgressIndicatorMarginBetweenText: 8px; $ProgressIndicatorButtonsWidth: 218px; $ProgressIndicatorTextHeight: 18px; -:global { - .ms-ProgressIndicator { - @include ms-baseFont; - font-weight: $ms-font-weight-regular; - } - - .ms-ProgressIndicator-itemName { - color: $ms-color-neutralPrimary; - font-size: $ms-font-size-m; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - padding-top: $ProgressIndicatorMarginBetweenText / 2; - line-height: $ProgressIndicatorTextHeight + 2; - } +.root { + @include ms-baseFont; + font-weight: $ms-font-weight-regular; +} - .ms-ProgressIndicator-itemDescription { - color: $ms-color-neutralSecondaryAlt; - font-size: $ms-font-size-xs; - line-height: $ProgressIndicatorTextHeight; - } +.itemName { + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-m; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + padding-top: $ProgressIndicatorMarginBetweenText / 2; + line-height: $ProgressIndicatorTextHeight + 2; +} - .ms-ProgressIndicator-itemProgress { - position: relative; - height: 2px; - padding: $ProgressIndicatorMarginBetweenText 0; - } +.itemDescription { + color: $ms-color-neutralSecondaryAlt; + font-size: $ms-font-size-xs; + line-height: $ProgressIndicatorTextHeight; +} - .ms-ProgressIndicator-progressTrack { - position: absolute; - width: 100%; - height: 2px; - background-color: $ms-color-neutralLight; - outline: 1px solid transparent; - } +.itemProgress { + position: relative; + height: 2px; + padding: $ProgressIndicatorMarginBetweenText 0; +} - .ms-ProgressIndicator-progressBar { - background-color: $ms-color-themePrimary; - height: 2px; - position: absolute; - transition: width .3s ease; - width: 0; +.progressTrack { + position: absolute; + width: 100%; + height: 2px; + background-color: $ms-color-neutralLight; + outline: 1px solid transparent; +} - @media screen and (-ms-high-contrast: active) { - background-color: $ms-color-white; - } +.progressBar { + background-color: $ms-color-themePrimary; + height: 2px; + position: absolute; + transition: width .3s ease; + width: 0; - @media screen and (-ms-high-contrast: black-on-white) { - background-color: $ms-color-black; - } + @media screen and (-ms-high-contrast: active) { + background-color: $ms-color-white; } - .ms-ProgressIndicator-progressBar.smoothTransition { - transition-property: width; - transition-timing-function: linear; - transition-duration: 150ms; + @media screen and (-ms-high-contrast: black-on-white) { + background-color: $ms-color-black; } } + +.smoothTransition { + transition-property: width; + transition-timing-function: linear; + transition-duration: 150ms; +} diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.tsx b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.tsx index 5ee15eaa84221..30c6ce99dfe1e 100644 --- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.tsx +++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.tsx @@ -7,7 +7,7 @@ import { css } from '../../Utilities'; import { IProgressIndicatorProps } from './ProgressIndicator.Props'; -import './ProgressIndicator.scss'; +import styles from './ProgressIndicator.scss'; // if the percentComplete is near 0, don't animate it. // This prevents animations on reset to 0 scenarios @@ -38,11 +38,11 @@ export class ProgressIndicator extends BaseComponent -
{ label }
-
-
-
+
{ label }
+
+
+
ZERO_THRESHOLD }) } style={ { width: percentComplete + '%' } } @@ -52,7 +52,7 @@ export class ProgressIndicator extends BaseComponent
-
{ description }
+
{ description }
); } diff --git a/packages/office-ui-fabric-react/src/components/Rating/Rating.scss b/packages/office-ui-fabric-react/src/components/Rating/Rating.scss index cadd32dcbd7e5..31e721f56d346 100644 --- a/packages/office-ui-fabric-react/src/components/Rating/Rating.scss +++ b/packages/office-ui-fabric-react/src/components/Rating/Rating.scss @@ -8,79 +8,76 @@ $Rating-disabledColor: $ms-color-neutralTertiaryAlt; $Rating-smallIconSize: 16px; $Rating-largeIconSize: 20px; -:global { +// Hide input field +.input { + position: absolute; + opacity: 0; + top: 0px; +} - // Hide input field - .ms-Rating-input { - position: absolute; - opacity: 0; - top: 0px; - } +.container { + position: relative; + display: inline-block; - .ms-Rating-container { - position: relative; - display: inline-block; + &:hover { + .star:not(.starIsDisabled) { + color: $Rating-selectedColor; - &:hover { - .ms-Rating-star:not(.is-disabled) { - color: $Rating-selectedColor; + &.star:hover { + color: $Rating-hoverColor; - &.ms-Rating-star:hover { - color: $Rating-hoverColor; - - & ~ .ms-Rating-star { - // Set default color for any star after hovered one - color: $Rating-defaultColor; - } + & ~ .star { + // Set default color for any star after hovered one + color: $Rating-defaultColor; } } } + } - .ms-Rating-star { - display: inline-block; + .star { + display: inline-block; - text-align: center; + text-align: center; - color: $Rating-defaultColor; + color: $Rating-defaultColor; - &.is-selected { - color: $Rating-selectedColor; - } + &.starIsSelected { + color: $Rating-selectedColor; + } - &.is-disabled { - color: $Rating-disabledColor; + &.starIsDisabled { + color: $Rating-disabledColor; - .ms-Rating-label { - cursor: default; - } + .label { + cursor: default; } + } - .ms-Rating-label { - display: inline-block; - cursor: pointer; + .label { + display: inline-block; + cursor: pointer; - font-size: $Rating-smallIconSize; - padding: 12px 0px; + font-size: $Rating-smallIconSize; + padding: 12px 0px; - // Reserve space for focus styling - border: 1px solid transparent; - } + // Reserve space for focus styling + border: 1px solid transparent; } + } - :global(.ms-Rating--large) & { - .ms-Rating-label { - font-size: $Rating-largeIconSize; - padding: 6px 2px 9px 2px; - } + .rootIsLarge & { + .label { + font-size: $Rating-largeIconSize; + padding: 6px 2px 9px 2px; } } +} - .ms-Rating-labelText { - @include ms-u-screenReaderOnly(); - } +.labelText { + @include ms-u-screenReaderOnly(); +} - // Highlight focused star - .is-focusVisible .is-inFocus .ms-Rating-label { - border: 1px solid $focusedBorderColor; - } +// Highlight focused star +:global(.ms-Fabric.is-focusVisible) .starIsInFocus .label { + border: 1px solid $focusedBorderColor; } diff --git a/packages/office-ui-fabric-react/src/components/Rating/Rating.tsx b/packages/office-ui-fabric-react/src/components/Rating/Rating.tsx index dfd193a970711..63d49b6b3e208 100644 --- a/packages/office-ui-fabric-react/src/components/Rating/Rating.tsx +++ b/packages/office-ui-fabric-react/src/components/Rating/Rating.tsx @@ -5,7 +5,7 @@ import { getId } from '../../Utilities'; import { IRatingProps, RatingSize } from './Rating.Props'; -import './Rating.scss'; +import styles from './Rating.scss'; export interface IRatingState { rating: number; @@ -48,9 +48,9 @@ export class Rating extends BaseComponent { } return
-
+
{ stars }
; @@ -59,13 +59,13 @@ export class Rating extends BaseComponent { private _renderStar(rating: number): JSX.Element { const inputId = `${this._id}-${rating}`; - return
{ onChange={ this._onChange.bind(this, rating) } onFocus={ this._onFocus.bind(this, rating) } onBlur={ this._onBlur.bind(this, rating) } - /> -