From b25ac168723b5d63b0ad2c422e95a8243fdd8358 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 17 Apr 2018 16:33:23 -0700 Subject: [PATCH 01/20] Scaffold styles file --- .../ProgressIndicator.styles.ts | 48 +++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts new file mode 100644 index 00000000000000..14ccfb155facc9 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts @@ -0,0 +1,48 @@ +import { IStyle, keyframes } from '../../Styling'; +import { IProgressIndicatorStyleProps, IProgressIndicatorStyles } from './ProgressIndicator.types'; + +export const getStyles = ( + props: IProgressIndicatorStyleProps +): IProgressIndicatorStyles => { + const { + className, + theme, + indeterminate, + smoothTransition, + } = props; + + const { palette, semanticColors } = theme; + + return ({ + root: [ + 'ms-ProgressIndicator', + {}, + className + ], + + itemName: [ + 'ms-ProgressIndicator-itemName', + {} + ], + + itemDescription: [ + 'ms-ProgressIndicator-itemDescription', + {} + ], + + itemProgress: [ + 'ms-ProgressIndicator-itemProgress', + {} + ], + + progressTrack: [ + 'ms-ProgressIndicator-progressTrack', + {} + ], + + progressBar: [ + 'ms-ProgressIndicator-progressBar', + {}, + ], + }); +}; \ No newline at end of file From 50fcaf13ad400fbc2c5faaf3bea9d1480a7c377c Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 17 Apr 2018 16:33:45 -0700 Subject: [PATCH 02/20] Split to base file. --- .../ProgressIndicator.base.tsx | 67 +++++++++++++++ .../ProgressIndicator/ProgressIndicator.tsx | 84 ++++--------------- 2 files changed, 82 insertions(+), 69 deletions(-) create mode 100644 packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.base.tsx diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.base.tsx b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.base.tsx new file mode 100644 index 00000000000000..586b762d11152e --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.base.tsx @@ -0,0 +1,67 @@ +import * as React from 'react'; +import { + BaseComponent, + css +} from '../../Utilities'; +import { IProgressIndicatorProps } from './ProgressIndicator.types'; +import * as stylesImport from './ProgressIndicator.scss'; +const styles: any = stylesImport; + +// if the percentComplete is near 0, don't animate it. +// This prevents animations on reset to 0 scenarios +const ZERO_THRESHOLD = 0.01; + +export class ProgressIndicatorBase extends BaseComponent { + public static defaultProps = { + label: '', + description: '', + width: 180 + }; + + constructor(props: IProgressIndicatorProps) { + super(props); + + this._warnDeprecations({ + title: 'label' + }); + + } + + public render() { + const { title, description, className, ariaValueText } = this.props; + let { label, percentComplete } = this.props; + + // Handle deprecated value. + if (title) { + label = title; + } + + if (this.props.percentComplete !== undefined) { + percentComplete = Math.min(100, Math.max(0, percentComplete! * 100)); + } + + return ( +
+
{ label }
+
+
+
ZERO_THRESHOLD && 'smoothTransition', + percentComplete === undefined && styles.indeterminate + ) } + style={ percentComplete !== undefined ? { width: percentComplete + '%' } : undefined } + role='progressbar' + aria-valuemin={ 0 } + aria-valuemax={ 100 } + aria-valuenow={ percentComplete } + aria-valuetext={ ariaValueText } + /> +
+
{ description }
+
+ ); + } +} 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 9487e06251e3b9..5f9dd23cadfbb3 100644 --- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.tsx +++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.tsx @@ -1,70 +1,16 @@ -/* tslint:disable:no-unused-variable */ -import * as React from 'react'; -/* tslint:enable:no-unused-variable */ - +import { styled } from '../../Utilities'; import { - BaseComponent, - css -} from '../../Utilities'; -import { IProgressIndicatorProps } from './ProgressIndicator.types'; -import * as stylesImport from './ProgressIndicator.scss'; -const styles: any = stylesImport; - -// if the percentComplete is near 0, don't animate it. -// This prevents animations on reset to 0 scenarios -const ZERO_THRESHOLD = 0.01; - -export class ProgressIndicator extends BaseComponent { - public static defaultProps = { - label: '', - description: '', - width: 180 - }; - - constructor(props: IProgressIndicatorProps) { - super(props); - - this._warnDeprecations({ - title: 'label' - }); - - } - - public render() { - const { title, description, className, ariaValueText } = this.props; - let { label, percentComplete } = this.props; - - // Handle deprecated value. - if (title) { - label = title; - } - - if (this.props.percentComplete !== undefined) { - percentComplete = Math.min(100, Math.max(0, percentComplete! * 100)); - } - - return ( -
-
{ label }
-
-
-
ZERO_THRESHOLD && 'smoothTransition', - percentComplete === undefined && styles.indeterminate - ) } - style={ percentComplete !== undefined ? { width: percentComplete + '%' } : undefined } - role='progressbar' - aria-valuemin={ 0 } - aria-valuemax={ 100 } - aria-valuenow={ percentComplete } - aria-valuetext={ ariaValueText } - /> -
-
{ description }
-
- ); - } -} + IProgressIndicatorProps, + IProgressIndicatorStyleProps, + IProgressIndicatorStyles +} from './ProgressIndicator.types'; +import { ProgressIndicatorBase } from './ProgressIndicator.base'; +import { getStyles } from './ProgressIndicator.styles'; + +/** +* ProgressIndicator description +*/ +export const ProgressIndicator = styled( + ProgressIndicatorBase, + getStyles +); From 5e94230d2531f0a879df1f2a8dce9da41091ca34 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 17 Apr 2018 16:34:06 -0700 Subject: [PATCH 03/20] Scaffold types file. --- .../ProgressIndicator.types.ts | 53 ++++++++++++++++--- 1 file changed, 47 insertions(+), 6 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.types.ts b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.types.ts index b1bb692efdecda..547667bb8f3e69 100644 --- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.types.ts +++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.types.ts @@ -1,16 +1,31 @@ -export interface IProgressIndicator { +import * as React from 'react'; +import { ProgressIndicatorBase } from './ProgressIndicator.base'; +import { IStyle, ITheme } from '../../Styling'; +import { IStyleFunction } from '../../Utilities'; +export interface IProgressIndicator { + focus: () => void; } -export interface IProgressIndicatorProps { +export interface IProgressIndicatorProps extends React.Props { + /** + * Gets the component ref. + */ + componentRef?: (component: IProgressIndicatorProps | null) => void; + /** - * Optional callback to access the IProgressIndicator interface. Use this instead of ref for accessing - * the public methods and properties of the component. + * Call to provide customized styling that will layer on top of the variant rules. */ - componentRef?: (component: IProgressIndicator | null) => void; + getStyles?: IStyleFunction; /** - * Class name to apply to the root in addition to ms-ProgressIndicator. + * Theme provided by High-Order Component. + */ + theme?: ITheme; + + /** + * Additional css class to apply to the ProgressIndicator + * @defaultvalue undefined */ className?: string; @@ -40,3 +55,29 @@ export interface IProgressIndicatorProps { */ title?: string; } + +export interface IProgressIndicatorStyleProps { + /** + * Theme provided by High-Order Component. + */ + theme: ITheme; + + /** + * Accept custom classNames + */ + className?: string; + indeterminate?: boolean; + smoothTransition?: boolean; +} + +export interface IProgressIndicatorStyles { + /** + * Style for the root element. + */ + root: IStyle; + itemName: IStyle; + itemDescription: IStyle; + itemProgress: IStyle; + progressTrack: IStyle; + progressBar: IStyle; +} \ No newline at end of file From a34ca8ab1ace3a774c9e2787eb984628d77a27ce Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 17 Apr 2018 16:34:27 -0700 Subject: [PATCH 04/20] Export base --- .../src/components/ProgressIndicator/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/index.ts b/packages/office-ui-fabric-react/src/components/ProgressIndicator/index.ts index c03c55d7411bb8..56e3192e1179bd 100644 --- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/index.ts +++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/index.ts @@ -1,2 +1,3 @@ export * from './ProgressIndicator'; +export * from './ProgressIndicator.base'; export * from './ProgressIndicator.types'; From f8be1b1fb42db2e699d09fb894ef1e1723cf3f3e Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 17 Apr 2018 17:10:20 -0700 Subject: [PATCH 05/20] Add `animation` to `IRawStyleBase` --- packages/merge-styles/src/IRawStyleBase.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/merge-styles/src/IRawStyleBase.ts b/packages/merge-styles/src/IRawStyleBase.ts index 67952762bdd8b4..b2f7b361051b4b 100644 --- a/packages/merge-styles/src/IRawStyleBase.ts +++ b/packages/merge-styles/src/IRawStyleBase.ts @@ -213,6 +213,14 @@ export interface IRawStyleBase extends IRawFontStyle { */ alignmentBaseline?: ICSSRule | string; + /** + * The animation CSS property is a shorthand property for the various animation properties: + * `animation-name`, `animation-duration`, `animation-timing-function`, `animation-delay`, + * `animation-iteration-count`, `animation-direction`, `animation-fill-mode`, and + * `animation-play-state`. + */ + animation?: ICSSRule | string; + /** * Defines a length of time to elapse before an animation starts, allowing an animation to begin execution some time after it is applied. */ From 976661090e54eeeed987ebaf189bd3183de0672e Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 17 Apr 2018 17:11:40 -0700 Subject: [PATCH 06/20] Convert sass to js. Add barHeight prop. --- .../ProgressIndicator.styles.ts | 97 +++++++++++++++++-- .../ProgressIndicator.types.ts | 7 ++ 2 files changed, 95 insertions(+), 9 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts index 14ccfb155facc9..62ab5a162ecc72 100644 --- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts +++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts @@ -1,48 +1,127 @@ -import { IStyle, keyframes } from '../../Styling'; -import { IProgressIndicatorStyleProps, IProgressIndicatorStyles } from './ProgressIndicator.types'; +import { + FontSizes, + FontWeights, + HighContrastSelector, + IStyle, + keyframes, + noWrap, +} from '../../Styling'; +import { + IProgressIndicatorStyleProps, + IProgressIndicatorStyles, +} from './ProgressIndicator.types'; export const getStyles = ( props: IProgressIndicatorStyleProps ): IProgressIndicatorStyles => { const { className, - theme, indeterminate, smoothTransition, + theme, + barHeight = 2, } = props; const { palette, semanticColors } = theme; + const marginBetweenText = 8; + const buttonsWidth = 218; + const textHeight = 18; + + const indeterminateProgress = keyframes({ + '0%': { + left: '-30%', + }, + '100%': { + left: '100%', + } + }); + + const indeterminateStyles: IStyle = { + position: 'absolute', + minWidth: '33%', + background: `linear-gradient(to right, transparent 0%, ${palette.themePrimary} 50%, transparent 100%)`, + animation: `${indeterminateProgress} 3s infinite`, + }; + + const smoothTransitionStyles: IStyle = { + transitionProperty: 'width', + transitionTimingFunction: 'linear', + transitionDuration: '150ms', + }; + return ({ root: [ 'ms-ProgressIndicator', - {}, + { + fontWeight: FontWeights.regular, + }, className ], itemName: [ 'ms-ProgressIndicator-itemName', - {} + noWrap, + { + color: palette.neutralPrimary, + fontSize: FontSizes.medium, + paddingTop: marginBetweenText / 2, + lineHeight: textHeight + 2, + } ], itemDescription: [ 'ms-ProgressIndicator-itemDescription', - {} + { + color: palette.neutralSecondary, + fontSize: FontSizes.xSmall, + lineHeight: textHeight, + } ], itemProgress: [ 'ms-ProgressIndicator-itemProgress', - {} + { + position: 'relative', + overflow: 'hidden', + height: `${barHeight}px`, + padding: `${marginBetweenText} 0`, + } ], progressTrack: [ 'ms-ProgressIndicator-progressTrack', - {} + { + position: 'absolute', + width: '100%', + height: `${barHeight}px`, + backgroundColor: palette.neutralLight, + + selectors: { + [HighContrastSelector]: { + borderBottom: '1px solid WindowText', + } + } + } ], progressBar: [ 'ms-ProgressIndicator-progressBar', - {}, + { + backgroundColor: palette.themePrimary, + height: `${barHeight}px`, + position: 'absolute', + transition: 'width .3s ease', + width: 0, + + selectors: { + [HighContrastSelector]: { + backgroundColor: 'WindowText', + } + } + }, + indeterminate && indeterminateStyles, + smoothTransition && smoothTransitionStyles, ], }); }; \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.types.ts b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.types.ts index 547667bb8f3e69..08bc06bdbc8b8e 100644 --- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.types.ts +++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.types.ts @@ -54,6 +54,12 @@ export interface IProgressIndicatorProps extends React.Props Date: Tue, 17 Apr 2018 17:12:37 -0700 Subject: [PATCH 07/20] Use classNames instead of scss in base --- .../ProgressIndicator.base.tsx | 54 +++++++++++++------ 1 file changed, 38 insertions(+), 16 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.base.tsx b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.base.tsx index 586b762d11152e..113d56be2b0110 100644 --- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.base.tsx +++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.base.tsx @@ -1,16 +1,26 @@ import * as React from 'react'; import { BaseComponent, - css + classNamesFunction, + customizable, } from '../../Utilities'; -import { IProgressIndicatorProps } from './ProgressIndicator.types'; -import * as stylesImport from './ProgressIndicator.scss'; -const styles: any = stylesImport; +import { + IProgressIndicatorProps, + IProgressIndicatorStyleProps, + IProgressIndicatorStyles, +} from './ProgressIndicator.types'; + +const getClassNames = classNamesFunction(); // if the percentComplete is near 0, don't animate it. // This prevents animations on reset to 0 scenarios const ZERO_THRESHOLD = 0.01; +/** +* ProgressIndicator with no default styles. +* [Use the `getStyles` API to add your own styles.](https://github.com/OfficeDev/office-ui-fabric-react/wiki/Styling) +*/ +@customizable('ProgressIndicator', ['theme']) export class ProgressIndicatorBase extends BaseComponent { public static defaultProps = { label: '', @@ -28,9 +38,26 @@ export class ProgressIndicatorBase extends BaseComponent ZERO_THRESHOLD) ? true : false, + indeterminate: !percentComplete ? true : false, + }); + // Handle deprecated value. if (title) { label = title; @@ -41,17 +68,12 @@ export class ProgressIndicatorBase extends BaseComponent -
{ label }
-
-
+
+
{ label }
+
+
ZERO_THRESHOLD && 'smoothTransition', - percentComplete === undefined && styles.indeterminate - ) } + className={ classNames.progressBar } style={ percentComplete !== undefined ? { width: percentComplete + '%' } : undefined } role='progressbar' aria-valuemin={ 0 } @@ -60,7 +82,7 @@ export class ProgressIndicatorBase extends BaseComponent
-
{ description }
+
{ description }
); } From c1c266ec08cae0bd1b455c9a7b1e1e84cb1a4f14 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 17 Apr 2018 17:13:55 -0700 Subject: [PATCH 08/20] Delete sass file --- .../ProgressIndicator/ProgressIndicator.scss | 91 ------------------- 1 file changed, 91 deletions(-) delete mode 100644 packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.scss diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.scss b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.scss deleted file mode 100644 index c44a4f88888d61..00000000000000 --- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.scss +++ /dev/null @@ -1,91 +0,0 @@ -@import '../../common/common'; -// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -// -// Office UI Fabric -// -------------------------------------------------- -// ProgressIndicator Styles -$ProgressIndicatorMarginBetweenText: 8px; -$ProgressIndicatorButtonsWidth: 218px; -$ProgressIndicatorTextHeight: 18px; -.root { - font-weight: $ms-font-weight-regular; -} - -.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; -} - -.itemDescription { - color: $ms-color-neutralSecondaryAlt; - font-size: $ms-font-size-xs; - line-height: $ProgressIndicatorTextHeight; -} - -.itemProgress { - position: relative; - overflow: hidden; - height: 2px; - padding: $ProgressIndicatorMarginBetweenText 0; -} - -.progressTrack { - position: absolute; - width: 100%; - height: 2px; - background-color: $ms-color-neutralLight; - @include high-contrast { - border-bottom: 1px solid WindowText; - } -} - -.progressBar { - background-color: $ms-color-themePrimary; - height: 2px; - position: absolute; - transition: width .3s ease; - width: 0; - &.indeterminate { - position: absolute; - min-width: 33%; - background: linear-gradient(to right, transparent 0%, $ms-color-themePrimary 50%, transparent 100%); - animation: indeterminateProgress 3s infinite; - } - @include high-contrast { - background-color: WindowText; - } - @include RTL { - &.indeterminate { - animation: indeterminateProgressRTL 3s infinite; - } - } -} - -.smoothTransition { - transition-property: width; - transition-timing-function: linear; - transition-duration: 150ms; -} - -@keyframes indeterminateProgress { - 0% { - left: -30%; - } - 100% { - left: 100%; - } -} - -@keyframes indeterminateProgressRTL { - 0% { - right: -30%; - } - 100% { - right: 100%; - } -} \ No newline at end of file From f80d729f2edf85b18f37938fc55767aee1581228 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 17 Apr 2018 17:59:42 -0700 Subject: [PATCH 09/20] let styles default barHeight --- .../src/components/ProgressIndicator/ProgressIndicator.base.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.base.tsx b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.base.tsx index 113d56be2b0110..3cbf0e83f06521 100644 --- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.base.tsx +++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.base.tsx @@ -40,7 +40,7 @@ export class ProgressIndicatorBase extends BaseComponent Date: Tue, 17 Apr 2018 18:00:58 -0700 Subject: [PATCH 10/20] Fix RTL keyframes --- .../ProgressIndicator.styles.ts | 42 +++++++++++++------ 1 file changed, 29 insertions(+), 13 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts index 62ab5a162ecc72..3d3c61691c32a9 100644 --- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts +++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts @@ -6,6 +6,7 @@ import { keyframes, noWrap, } from '../../Styling'; +import { getRTL } from '../../Utilities'; import { IProgressIndicatorStyleProps, IProgressIndicatorStyles, @@ -14,6 +15,7 @@ import { export const getStyles = ( props: IProgressIndicatorStyleProps ): IProgressIndicatorStyles => { + const isRTL = getRTL(); const { className, indeterminate, @@ -36,13 +38,14 @@ export const getStyles = ( left: '100%', } }); - - const indeterminateStyles: IStyle = { - position: 'absolute', - minWidth: '33%', - background: `linear-gradient(to right, transparent 0%, ${palette.themePrimary} 50%, transparent 100%)`, - animation: `${indeterminateProgress} 3s infinite`, - }; + const indeterminateProgressRTL = keyframes({ + '100%': { + right: '-30%', + }, + '0%': { + right: '100%', + } + }); const smoothTransitionStyles: IStyle = { transitionProperty: 'width', @@ -63,17 +66,17 @@ export const getStyles = ( 'ms-ProgressIndicator-itemName', noWrap, { - color: palette.neutralPrimary, + color: semanticColors.bodyText, fontSize: FontSizes.medium, - paddingTop: marginBetweenText / 2, - lineHeight: textHeight + 2, + paddingTop: `${marginBetweenText / 2}px`, + lineHeight: `${textHeight + 2}px`, } ], itemDescription: [ 'ms-ProgressIndicator-itemDescription', { - color: palette.neutralSecondary, + color: semanticColors.bodySubtext, fontSize: FontSizes.xSmall, lineHeight: textHeight, } @@ -85,7 +88,7 @@ export const getStyles = ( position: 'relative', overflow: 'hidden', height: `${barHeight}px`, - padding: `${marginBetweenText} 0`, + padding: `${marginBetweenText}px 0`, } ], @@ -120,7 +123,20 @@ export const getStyles = ( } } }, - indeterminate && indeterminateStyles, + indeterminate && [ + { + position: 'absolute', + minWidth: '33%', + background: `linear-gradient(to right, transparent 0%, ${palette.themePrimary} 50%, transparent 100%)`, + }, + isRTL + ? { + animation: `${indeterminateProgressRTL} 3s infinite`, + } : + { + animation: `${indeterminateProgress} 3s infinite`, + } + ], smoothTransition && smoothTransitionStyles, ], }); From 16f91721bf2a5c1875ce4af286833fa9215dfe36 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 17 Apr 2018 18:05:21 -0700 Subject: [PATCH 11/20] changes --- ...yles-ProgressIndicator-part2_2018-04-18-01-05.json | 11 +++++++++++ ...yles-ProgressIndicator-part2_2018-04-18-01-05.json | 11 +++++++++++ 2 files changed, 22 insertions(+) create mode 100644 common/changes/@uifabric/merge-styles/mergeStyles-ProgressIndicator-part2_2018-04-18-01-05.json create mode 100644 common/changes/office-ui-fabric-react/mergeStyles-ProgressIndicator-part2_2018-04-18-01-05.json diff --git a/common/changes/@uifabric/merge-styles/mergeStyles-ProgressIndicator-part2_2018-04-18-01-05.json b/common/changes/@uifabric/merge-styles/mergeStyles-ProgressIndicator-part2_2018-04-18-01-05.json new file mode 100644 index 00000000000000..a1990b77f20195 --- /dev/null +++ b/common/changes/@uifabric/merge-styles/mergeStyles-ProgressIndicator-part2_2018-04-18-01-05.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/merge-styles", + "comment": "Add `animation` to `IRawStyleBase` for use in style sets.", + "type": "minor" + } + ], + "packageName": "@uifabric/merge-styles", + "email": "v-jojanz@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/mergeStyles-ProgressIndicator-part2_2018-04-18-01-05.json b/common/changes/office-ui-fabric-react/mergeStyles-ProgressIndicator-part2_2018-04-18-01-05.json new file mode 100644 index 00000000000000..1ca09fdf4bf6eb --- /dev/null +++ b/common/changes/office-ui-fabric-react/mergeStyles-ProgressIndicator-part2_2018-04-18-01-05.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Complete ProgressIndicator conversion to mergeStyles. Add `barHeight` to enable changing height of progress bar.", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "v-jojanz@microsoft.com" +} \ No newline at end of file From 0c1349988035a0d78d978a5fc16d316ed45e1e8a Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Wed, 18 Apr 2018 09:48:18 -0700 Subject: [PATCH 12/20] Update snapshots --- .../ProgressIndicator.test.tsx.snap | 132 ++++++++++++++++-- 1 file changed, 120 insertions(+), 12 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap index 575c15cc1ce374..598890af13cb44 100644 --- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap @@ -2,25 +2,73 @@ exports[`ProgressIndicator renders ProgressIndicator correctly 1`] = `
@@ -39,31 +93,85 @@ exports[`ProgressIndicator renders ProgressIndicator correctly 1`] = ` exports[`ProgressIndicator renders indeterminate ProgressIndicator correctly 1`] = `
From 56c46c3c15a167efb3b8ab6392ff48942ca8b212 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Wed, 18 Apr 2018 10:00:06 -0700 Subject: [PATCH 13/20] Fix more conflicts --- .../components/ProgressIndicator/ProgressIndicator.types.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.types.ts b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.types.ts index 253df18479bfb6..08bc06bdbc8b8e 100644 --- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.types.ts +++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.types.ts @@ -74,10 +74,7 @@ export interface IProgressIndicatorStyleProps { className?: string; indeterminate?: boolean; smoothTransition?: boolean; -<<<<<<< HEAD barHeight?: number; -======= ->>>>>>> master } export interface IProgressIndicatorStyles { From b7f2a62b7dccc058abae4c373c7e516d00c20a90 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Wed, 18 Apr 2018 17:59:14 -0700 Subject: [PATCH 14/20] Switch to private _classNames set in constructor to prevent tag spam --- .../ProgressIndicator.base.tsx | 37 +++++++++++-------- 1 file changed, 21 insertions(+), 16 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.base.tsx b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.base.tsx index 3cbf0e83f06521..66ae375cecf2b5 100644 --- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.base.tsx +++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.base.tsx @@ -3,6 +3,7 @@ import { BaseComponent, classNamesFunction, customizable, + IClassNames, } from '../../Utilities'; import { IProgressIndicatorProps, @@ -28,6 +29,7 @@ export class ProgressIndicatorBase extends BaseComponent; constructor(props: IProgressIndicatorProps) { super(props); @@ -35,6 +37,12 @@ export class ProgressIndicatorBase extends BaseComponent ZERO_THRESHOLD) ? true : false, - indeterminate: !percentComplete ? true : false, - }); - // Handle deprecated value. if (title) { label = title; @@ -67,22 +67,27 @@ export class ProgressIndicatorBase extends BaseComponent -
{ label }
-
-
+
+
{ label }
+
+
-
{ description }
+
{ description }
); } From da96361b47f59c137aa6e5e0d3bfadb9ffd24239 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Wed, 18 Apr 2018 17:59:29 -0700 Subject: [PATCH 15/20] Remove smoothTransition style prop --- .../ProgressIndicator/ProgressIndicator.styles.ts | 12 +++--------- .../ProgressIndicator/ProgressIndicator.types.ts | 1 - 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts index 3d3c61691c32a9..552cda6e0227ce 100644 --- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts +++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts @@ -2,7 +2,6 @@ import { FontSizes, FontWeights, HighContrastSelector, - IStyle, keyframes, noWrap, } from '../../Styling'; @@ -19,7 +18,6 @@ export const getStyles = ( const { className, indeterminate, - smoothTransition, theme, barHeight = 2, } = props; @@ -47,12 +45,6 @@ export const getStyles = ( } }); - const smoothTransitionStyles: IStyle = { - transitionProperty: 'width', - transitionTimingFunction: 'linear', - transitionDuration: '150ms', - }; - return ({ root: [ 'ms-ProgressIndicator', @@ -123,6 +115,9 @@ export const getStyles = ( } } }, + !indeterminate && { + transition: 'width .15s linear' + }, indeterminate && [ { position: 'absolute', @@ -137,7 +132,6 @@ export const getStyles = ( animation: `${indeterminateProgress} 3s infinite`, } ], - smoothTransition && smoothTransitionStyles, ], }); }; \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.types.ts b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.types.ts index 08bc06bdbc8b8e..f2227ba3314123 100644 --- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.types.ts +++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.types.ts @@ -73,7 +73,6 @@ export interface IProgressIndicatorStyleProps { */ className?: string; indeterminate?: boolean; - smoothTransition?: boolean; barHeight?: number; } From ef51588850fafce8aff8d5a4f4bec8e1da5d5dec Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Wed, 18 Apr 2018 19:16:57 -0700 Subject: [PATCH 16/20] Remove unused variables --- .../ProgressIndicator/ProgressIndicator.base.tsx | 7 ++----- .../ProgressIndicator/ProgressIndicator.styles.ts | 1 - 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.base.tsx b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.base.tsx index 66ae375cecf2b5..34c75883d58d3e 100644 --- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.base.tsx +++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.base.tsx @@ -30,6 +30,7 @@ export class ProgressIndicatorBase extends BaseComponent; + constructor(props: IProgressIndicatorProps) { super(props); @@ -48,11 +49,7 @@ export class ProgressIndicatorBase extends BaseComponent diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts index 552cda6e0227ce..82772c4a5103e6 100644 --- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts +++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts @@ -25,7 +25,6 @@ export const getStyles = ( const { palette, semanticColors } = theme; const marginBetweenText = 8; - const buttonsWidth = 218; const textHeight = 18; const indeterminateProgress = keyframes({ From 459511bcdf96c26cbb001b8d5b9db16d59c003a5 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Thu, 19 Apr 2018 09:01:23 -0700 Subject: [PATCH 17/20] Update snapshot --- .../__snapshots__/ProgressIndicator.test.tsx.snap | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap index 598890af13cb44..8e52a522740587 100644 --- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap @@ -60,10 +60,7 @@ exports[`ProgressIndicator renders ProgressIndicator correctly 1`] = ` background-color: #0078d4; height: 2px; position: absolute; - transition-duration: 150ms; - transition-property: width; - transition-timing-function: linear; - transition: width .3s ease; + transition: width .15s linear; width: 0px; } @media screen and (-ms-high-contrast: active){& { @@ -72,6 +69,7 @@ exports[`ProgressIndicator renders ProgressIndicator correctly 1`] = ` role="progressbar" style={ Object { + "transition": undefined, "width": "75%", } } @@ -143,7 +141,7 @@ exports[`ProgressIndicator renders indeterminate ProgressIndicator correctly 1`]
Date: Thu, 19 Apr 2018 11:03:15 -0700 Subject: [PATCH 18/20] simplify --- .../ProgressIndicator/ProgressIndicator.styles.ts | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts index 82772c4a5103e6..7e84547e8500ad 100644 --- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts +++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts @@ -122,14 +122,9 @@ export const getStyles = ( position: 'absolute', minWidth: '33%', background: `linear-gradient(to right, transparent 0%, ${palette.themePrimary} 50%, transparent 100%)`, + animation: `${indeterminateProgress} 3s infinite`, }, - isRTL - ? { - animation: `${indeterminateProgressRTL} 3s infinite`, - } : - { - animation: `${indeterminateProgress} 3s infinite`, - } + isRTL && { animation: `${indeterminateProgressRTL} 3s infinite` }, ], ], }); From 2838ce40b02928f9b037230578209e5c1e1aa071 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Thu, 19 Apr 2018 15:43:38 -0700 Subject: [PATCH 19/20] Fix classNames being called with keyframes. --- .../ProgressIndicator.base.tsx | 33 ++++++------- .../ProgressIndicator.styles.ts | 48 +++++++++---------- 2 files changed, 41 insertions(+), 40 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.base.tsx b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.base.tsx index 34c75883d58d3e..7cec1918ea7c90 100644 --- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.base.tsx +++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.base.tsx @@ -3,7 +3,6 @@ import { BaseComponent, classNamesFunction, customizable, - IClassNames, } from '../../Utilities'; import { IProgressIndicatorProps, @@ -29,32 +28,34 @@ export class ProgressIndicatorBase extends BaseComponent; - constructor(props: IProgressIndicatorProps) { super(props); this._warnDeprecations({ title: 'label' }); - - this._classNames = getClassNames(this.props.getStyles, { - theme: this.props.theme!, - className: this.props.className, - barHeight: this.props.barHeight, - indeterminate: this.props.percentComplete === undefined ? true : false, - }); } public render() { const { ariaValueText, + barHeight, + className, description, + getStyles, + theme, title, } = this.props; let { label, percentComplete } = this.props; + const classNames = getClassNames(getStyles, { + theme: theme!, + className, + barHeight, + indeterminate: percentComplete === undefined ? true : false, + }); + // Handle deprecated value. if (title) { label = title; @@ -70,12 +71,12 @@ export class ProgressIndicatorBase extends BaseComponent -
{ label }
-
-
+
+
{ label }
+
+
-
{ description }
+
{ description }
); } diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts index 7e84547e8500ad..f2bacacd624fa0 100644 --- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts +++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts @@ -11,6 +11,23 @@ import { IProgressIndicatorStyles, } from './ProgressIndicator.types'; +const IndeterminateProgress = keyframes({ + '0%': { + left: '-30%', + }, + '100%': { + left: '100%', + } +}); +const IndeterminateProgressRTL = keyframes({ + '100%': { + right: '-30%', + }, + '0%': { + right: '100%', + } +}); + export const getStyles = ( props: IProgressIndicatorStyleProps ): IProgressIndicatorStyles => { @@ -27,23 +44,6 @@ export const getStyles = ( const marginBetweenText = 8; const textHeight = 18; - const indeterminateProgress = keyframes({ - '0%': { - left: '-30%', - }, - '100%': { - left: '100%', - } - }); - const indeterminateProgressRTL = keyframes({ - '100%': { - right: '-30%', - }, - '0%': { - right: '100%', - } - }); - return ({ root: [ 'ms-ProgressIndicator', @@ -59,8 +59,8 @@ export const getStyles = ( { color: semanticColors.bodyText, fontSize: FontSizes.medium, - paddingTop: `${marginBetweenText / 2}px`, - lineHeight: `${textHeight + 2}px`, + paddingTop: marginBetweenText / 2, + lineHeight: textHeight + 2, } ], @@ -78,7 +78,7 @@ export const getStyles = ( { position: 'relative', overflow: 'hidden', - height: `${barHeight}px`, + height: barHeight, padding: `${marginBetweenText}px 0`, } ], @@ -88,7 +88,7 @@ export const getStyles = ( { position: 'absolute', width: '100%', - height: `${barHeight}px`, + height: barHeight, backgroundColor: palette.neutralLight, selectors: { @@ -103,7 +103,7 @@ export const getStyles = ( 'ms-ProgressIndicator-progressBar', { backgroundColor: palette.themePrimary, - height: `${barHeight}px`, + height: barHeight, position: 'absolute', transition: 'width .3s ease', width: 0, @@ -122,9 +122,9 @@ export const getStyles = ( position: 'absolute', minWidth: '33%', background: `linear-gradient(to right, transparent 0%, ${palette.themePrimary} 50%, transparent 100%)`, - animation: `${indeterminateProgress} 3s infinite`, + animation: `${IndeterminateProgress} 3s infinite`, }, - isRTL && { animation: `${indeterminateProgressRTL} 3s infinite` }, + isRTL && { animation: `${IndeterminateProgressRTL} 3s infinite` }, ], ], }); From 0180bc8a5b741d13d578039c61e6735e71c5ba1f Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Mon, 23 Apr 2018 14:05:37 -0700 Subject: [PATCH 20/20] update snapshot --- .../__snapshots__/ProgressIndicator.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap index 8e52a522740587..8e71ec1d2f80d1 100644 --- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap @@ -146,7 +146,7 @@ exports[`ProgressIndicator renders indeterminate ProgressIndicator correctly 1`] className= ms-ProgressIndicator-progressBar { - animation: css-41 3s infinite; + animation: keyframes 0%{left:-30%;}100%{left:100%;} 3s infinite; background-color: #0078d4; background: linear-gradient(to right, transparent 0%, #0078d4 50%, transparent 100%); height: 2px;