diff --git a/common/changes/office-ui-fabric-react/v-vibr-ShimmerPropDeprecation_2018-07-31-18-23.json b/common/changes/office-ui-fabric-react/v-vibr-ShimmerPropDeprecation_2018-07-31-18-23.json new file mode 100644 index 00000000000000..ed1cdd655e3c8a --- /dev/null +++ b/common/changes/office-ui-fabric-react/v-vibr-ShimmerPropDeprecation_2018-07-31-18-23.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Deprecating 'borderStyle' prop of Shimmer subcomponents Line, Circle, Gap in favor of leveraging mergeStyles API.", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "v-vibr@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts index e99d038a740ccc..7c0786993c681e 100644 --- a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts @@ -10,14 +10,13 @@ export function getStyles(props: IShimmerCircleStyleProps): IShimmerCircleStyles const { height, borderStyle, theme } = props; const { palette } = theme; - const classNames = getGlobalClassNames(GlobalClassNames, theme); + const globalClassNames = getGlobalClassNames(GlobalClassNames, theme); - const styles: IRawStyle = !!borderStyle ? borderStyle : {}; + const borderStyles: IRawStyle = !!borderStyle ? borderStyle : {}; return { root: [ - classNames.root, - styles, + globalClassNames.root, { width: `${height}px`, height: `${height}px`, @@ -31,10 +30,11 @@ export function getStyles(props: IShimmerCircleStyleProps): IShimmerCircleStyles borderColor: 'Window' } } - } + }, + borderStyles ], svg: [ - classNames.svg, + globalClassNames.svg, { display: 'block', fill: palette.white, diff --git a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts index 56baee2fc573aa..0837e76a79e365 100644 --- a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts +++ b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts @@ -20,11 +20,6 @@ export interface IShimmerCircleProps extends React.AllHTMLAttributes; + + /** + * Use to set custom styling of the shimmerCircle borders. + * @deprecated Use 'styles' prop to leverage mergeStyle API. + */ + borderStyle?: IRawStyle; } -export interface IShimmerCircleStyleProps { +/** + * Props needed to construct styles. + */ +export type IShimmerCircleStyleProps = { + /** + * Theme values passed to the component. + */ + theme: ITheme; + + /** + * Needed to provide a height to the root of the control. + */ height?: number; + + /** + * Styles to override borderStyles with custom ones. + * @deprecated in favor of mergeStyles API. + */ borderStyle?: IRawStyle; - theme: ITheme; -} +}; +/** + * Represents the stylable areas of the control. + */ export interface IShimmerCircleStyles { + /** + * Root of the ShimmerCircle component. + */ root?: IStyle; + + /** + * Style for the circle SVG of the ShimmerCircle component. + */ svg?: IStyle; } diff --git a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.base.tsx b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.base.tsx index 4967c873161f9c..0790d47324886d 100644 --- a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.base.tsx @@ -8,8 +8,11 @@ import { import { IRawStyle } from '../../../Styling'; import { ShimmerElementType, ShimmerElementsDefaultHeights, IShimmerElement } from '../Shimmer.types'; import { ShimmerLine } from '../ShimmerLine/ShimmerLine'; +import { IShimmerLineStyles } from '../ShimmerLine/ShimmerLine.types'; import { ShimmerGap } from '../ShimmerGap/ShimmerGap'; +import { IShimmerGapStyles } from '../ShimmerGap/ShimmerGap.types'; import { ShimmerCircle } from '../ShimmerCircle/ShimmerCircle'; +import { IShimmerCircleStyles } from '../ShimmerCircle/ShimmerCircle.types'; const getClassNames = classNamesFunction(); @@ -49,24 +52,25 @@ export class ShimmerElementsGroupBase extends BaseComponent - ); + return ; case ShimmerElementType.gap: - return ; + return ; case ShimmerElementType.line: - return ; + return ; } } ) ) : ( - + ); return renderedElements; }; - private _getBorderStyles = (elem: IShimmerElement, rowHeight?: number): IRawStyle | undefined => { + private _getBorderStyles = ( + elem: IShimmerElement, + rowHeight?: number + ): IShimmerCircleStyles | IShimmerGapStyles | IShimmerLineStyles => { const elemHeight: number | undefined = elem.height; const dif: number = rowHeight && elemHeight ? rowHeight - elemHeight : 0; @@ -89,7 +93,9 @@ export class ShimmerElementsGroupBase extends BaseComponent { */ width?: number | string; - /** - * Sets custom styling of the gap. - */ - borderStyle?: IRawStyle; - /** * Theme provided by High-Order Component. */ @@ -40,14 +35,41 @@ export interface IShimmerGapProps extends React.AllHTMLAttributes { * Call to provide customized styling that will layer on top of the variant rules. */ styles?: IStyleFunctionOrObject; + + /** + * Use to set custom styling of the shimmerGap borders. + * @deprecated Use 'styles' prop to leverage mergeStyle API. + */ + borderStyle?: IRawStyle; } -export interface IShimmerGapStyleProps { +/** + * Props needed to construct styles. + */ +export type IShimmerGapStyleProps = { + /** + * Theme values passed to the component. + */ + theme: ITheme; + + /** + * Needed to provide a height to the root of the control. + */ height?: number; + + /** + * Styles to override borderStyles with custom ones. + * @deprecated in favor of mergeStyles API. + */ borderStyle?: IRawStyle; - theme: ITheme; -} +}; +/** + * Represents the stylable areas of the control. + */ export interface IShimmerGapStyles { + /** + * Root of the ShimmerGap component. + */ root?: IStyle; } diff --git a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerLine/ShimmerLine.styles.ts b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerLine/ShimmerLine.styles.ts index d02c980f853708..5943f7f67c8b77 100644 --- a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerLine/ShimmerLine.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerLine/ShimmerLine.styles.ts @@ -13,9 +13,9 @@ export function getStyles(props: IShimmerLineStyleProps): IShimmerLineStyles { const { height, borderStyle, theme } = props; const { palette } = theme; - const classNames = getGlobalClassNames(GlobalClassNames, theme); + const globalClassNames = getGlobalClassNames(GlobalClassNames, theme); - const styles: IRawStyle = !!borderStyle ? borderStyle : { borderWidth: '0px' }; + const borderStyles: IRawStyle = !!borderStyle ? borderStyle : {}; const sharedCornerStyles: IRawStyle = { position: 'absolute', @@ -24,8 +24,7 @@ export function getStyles(props: IShimmerLineStyleProps): IShimmerLineStyles { return { root: [ - classNames.root, - styles, + globalClassNames.root, { height: `${height}px`, boxSizing: 'content-box', @@ -43,10 +42,11 @@ export function getStyles(props: IShimmerLineStyleProps): IShimmerLineStyles { } } } - } + }, + borderStyles ], topLeftCorner: [ - classNames.topLeftCorner, + globalClassNames.topLeftCorner, { top: '0', left: '0' @@ -54,7 +54,7 @@ export function getStyles(props: IShimmerLineStyleProps): IShimmerLineStyles { sharedCornerStyles ], topRightCorner: [ - classNames.topRightCorner, + globalClassNames.topRightCorner, { top: '0', right: '0' @@ -62,7 +62,7 @@ export function getStyles(props: IShimmerLineStyleProps): IShimmerLineStyles { sharedCornerStyles ], bottomRightCorner: [ - classNames.bottomRightCorner, + globalClassNames.bottomRightCorner, { bottom: '0', right: '0' @@ -70,7 +70,7 @@ export function getStyles(props: IShimmerLineStyleProps): IShimmerLineStyles { sharedCornerStyles ], bottomLeftCorner: [ - classNames.bottomLeftCorner, + globalClassNames.bottomLeftCorner, { bottom: '0', left: '0' diff --git a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerLine/ShimmerLine.types.ts b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerLine/ShimmerLine.types.ts index 0e831aeeb4fd9e..74066ff7731ff5 100644 --- a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerLine/ShimmerLine.types.ts +++ b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerLine/ShimmerLine.types.ts @@ -26,11 +26,6 @@ export interface IShimmerLineProps extends React.AllHTMLAttributes */ width?: number | string; - /** - * Sets custom styling of the rectangle. - */ - borderStyle?: IRawStyle; - /** * Theme provided by High-Order Component. */ @@ -40,18 +35,61 @@ export interface IShimmerLineProps extends React.AllHTMLAttributes * Call to provide customized styling that will layer on top of the variant rules. */ styles?: IStyleFunctionOrObject; + + /** + * Use to set custom styling of the shimmerLine borders. + * @deprecated Use 'styles' prop to leverage mergeStyle API. + */ + borderStyle?: IRawStyle; } -export interface IShimmerLineStyleProps { +/** + * Props needed to construct styles. + */ +export type IShimmerLineStyleProps = { + /** + * Theme values passed to the component. + */ + theme: ITheme; + + /** + * Needed to provide a height to the root of the control. + */ height?: number; + + /** + * Styles to override borderStyles with custom ones. + * @deprecated in favor of mergeStyles API. + */ borderStyle?: IRawStyle; - theme: ITheme; -} +}; +/** + * Represents the stylable areas of the control. + */ export interface IShimmerLineStyles { + /** + * Root of the ShimmerLine component. + */ root?: IStyle; + + /** + * Top-left corner SVG of the ShimmerLine component. + */ topLeftCorner?: IStyle; + + /** + * Top-right corner SVG of the ShimmerLine component. + */ topRightCorner?: IStyle; + + /** + * Bottom-right corner SVG of the ShimmerLine component. + */ bottomRightCorner?: IStyle; + + /** + * Bottom-left corner SVG of the ShimmerLine component. + */ bottomLeftCorner?: IStyle; }