From b9f6e845720daf7536a299a84be96ec4793ae57a Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Wed, 25 Apr 2018 15:53:57 -0700 Subject: [PATCH] ProgressIndicator: Finish conversion to mergeStyles (#4595) * Scaffold styles file * Split to base file. * Scaffold types file. * Export base * Add `animation` to `IRawStyleBase` * Convert sass to js. Add barHeight prop. * Use classNames instead of scss in base * Delete sass file * let styles default barHeight * Fix RTL keyframes * changes * Update snapshots * Fix more conflicts * Switch to private _classNames set in constructor to prevent tag spam * Remove smoothTransition style prop * Remove unused variables * Update snapshot * simplify * Fix classNames being called with keyframes. * update snapshot --- ...gressIndicator-part2_2018-04-18-01-05.json | 11 ++ ...gressIndicator-part2_2018-04-18-01-05.json | 11 ++ packages/merge-styles/src/IRawStyleBase.ts | 8 + .../ProgressIndicator.base.tsx | 63 +++++--- .../ProgressIndicator/ProgressIndicator.scss | 91 ------------ .../ProgressIndicator.styles.ts | 107 +++++++++++++- .../ProgressIndicator.types.ts | 8 +- .../ProgressIndicator.test.tsx.snap | 139 ++++++++++++++++-- 8 files changed, 305 insertions(+), 133 deletions(-) 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 delete mode 100644 packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.scss 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 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. */ 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..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 @@ -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: '', @@ -24,13 +34,28 @@ export class ProgressIndicatorBase extends BaseComponent -
{ label }
-
-
+
+
{ label }
+
+
ZERO_THRESHOLD && 'smoothTransition', - percentComplete === undefined && styles.indeterminate - ) } - style={ percentComplete !== undefined ? { width: percentComplete + '%' } : undefined } + className={ classNames.progressBar } + style={ progressBarStyles } role='progressbar' aria-valuemin={ 0 } aria-valuemax={ 100 } - aria-valuenow={ percentComplete } + aria-valuenow={ Math.floor(percentComplete!) } aria-valuetext={ ariaValueText } />
-
{ description }
+
{ description }
); } 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 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 e63d5805710c73..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 @@ -1,40 +1,131 @@ -import { IProgressIndicatorStyleProps, IProgressIndicatorStyles } from './ProgressIndicator.types'; +import { + FontSizes, + FontWeights, + HighContrastSelector, + keyframes, + noWrap, +} from '../../Styling'; +import { getRTL } from '../../Utilities'; +import { + IProgressIndicatorStyleProps, + 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 => { - const { className } = props; + const isRTL = getRTL(); + const { + className, + indeterminate, + theme, + barHeight = 2, + } = props; + + const { palette, semanticColors } = theme; + + const marginBetweenText = 8; + const textHeight = 18; return ({ root: [ 'ms-ProgressIndicator', - {}, + { + fontWeight: FontWeights.regular, + }, className ], itemName: [ 'ms-ProgressIndicator-itemName', - {} + noWrap, + { + color: semanticColors.bodyText, + fontSize: FontSizes.medium, + paddingTop: marginBetweenText / 2, + lineHeight: textHeight + 2, + } ], itemDescription: [ 'ms-ProgressIndicator-itemDescription', - {} + { + color: semanticColors.bodySubtext, + fontSize: FontSizes.xSmall, + lineHeight: textHeight, + } ], itemProgress: [ 'ms-ProgressIndicator-itemProgress', - {} + { + position: 'relative', + overflow: 'hidden', + height: barHeight, + padding: `${marginBetweenText}px 0`, + } ], progressTrack: [ 'ms-ProgressIndicator-progressTrack', - {} + { + position: 'absolute', + width: '100%', + height: barHeight, + backgroundColor: palette.neutralLight, + + selectors: { + [HighContrastSelector]: { + borderBottom: '1px solid WindowText', + } + } + } ], progressBar: [ 'ms-ProgressIndicator-progressBar', - {}, + { + backgroundColor: palette.themePrimary, + height: barHeight, + position: 'absolute', + transition: 'width .3s ease', + width: 0, + + selectors: { + [HighContrastSelector]: { + backgroundColor: 'WindowText', + } + } + }, + !indeterminate && { + transition: 'width .15s linear' + }, + indeterminate && [ + { + 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` }, + ], ], }); }; \ 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..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 @@ -54,6 +54,12 @@ export interface IProgressIndicatorProps extends React.Props
@@ -39,31 +91,90 @@ exports[`ProgressIndicator renders ProgressIndicator correctly 1`] = ` exports[`ProgressIndicator renders indeterminate ProgressIndicator correctly 1`] = `