Shimmer: change prop use of subcomponents Line, Circle and Gap.

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"
+}

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,

packages/office-ui-fabric-react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts

@@ -20,11 +20,6 @@ export interface IShimmerCircleProps extends React.AllHTMLAttributes<HTMLElement
    */
   height?: number;
 
-  /**
-   * Used to
-   */
-  borderStyle?: IRawStyle;
-
   /**
    * Theme provided by High-Order Component.
    */
@@ -34,15 +29,46 @@ export interface IShimmerCircleProps extends React.AllHTMLAttributes<HTMLElement
    * Call to provide customized styling that will layer on top of the variant rules.
    */
   styles?: IStyleFunctionOrObject<IShimmerCircleStyleProps, IShimmerCircleStyles>;
+
+  /**
+   * 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;
 }

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<IShimmerElementsGroupStyleProps, IShimmerElementsGroupStyles>();
 
@@ -49,24 +52,25 @@ export class ShimmerElementsGroupBase extends BaseComponent<IShimmerElementsGrou
           const { type, ...filteredElem } = elem;
           switch (elem.type) {
             case ShimmerElementType.circle:
-              return (
-                <ShimmerCircle key={index} {...filteredElem} borderStyle={this._getBorderStyles(elem, rowHeight)} />
-              );
+              return <ShimmerCircle key={index} {...filteredElem} styles={this._getBorderStyles(elem, rowHeight)} />;
             case ShimmerElementType.gap:
-              return <ShimmerGap key={index} {...filteredElem} borderStyle={this._getBorderStyles(elem, rowHeight)} />;
+              return <ShimmerGap key={index} {...filteredElem} styles={this._getBorderStyles(elem, rowHeight)} />;
             case ShimmerElementType.line:
-              return <ShimmerLine key={index} {...filteredElem} borderStyle={this._getBorderStyles(elem, rowHeight)} />;
+              return <ShimmerLine key={index} {...filteredElem} styles={this._getBorderStyles(elem, rowHeight)} />;
           }
         }
       )
     ) : (
-      <ShimmerLine height={ShimmerElementsDefaultHeights.line} />
+      <ShimmerLine height={ShimmerElementsDefaultHeights.line} styles={{ root: [{ borderWidth: '0px' }] }} />
     );
 
     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<IShimmerElementsGrou
       };
     }
 
-    return borderStyle;
+    return {
+      root: [{ ...borderStyle }]
+    };
   };
 
   /**

packages/office-ui-fabric-react/src/components/Shimmer/ShimmerGap/ShimmerGap.styles.ts

@@ -9,14 +9,13 @@ export function getStyles(props: IShimmerGapStyleProps): IShimmerGapStyles {
   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,
       {
         backgroundColor: palette.white,
         height: `${height}px`,
@@ -30,7 +29,8 @@ export function getStyles(props: IShimmerGapStyleProps): IShimmerGapStyles {
             borderColor: 'Window'
           }
         }
-      }
+      },
+      borderStyles
     ]
   };
 }

packages/office-ui-fabric-react/src/components/Shimmer/ShimmerGap/ShimmerGap.types.ts

@@ -26,11 +26,6 @@ export interface IShimmerGapProps extends React.AllHTMLAttributes<HTMLElement> {
    */
   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<HTMLElement> {
    * Call to provide customized styling that will layer on top of the variant rules.
    */
   styles?: IStyleFunctionOrObject<IShimmerGapStyleProps, IShimmerGapStyles>;
+
+  /**
+   * 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;
 }

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,34 +42,35 @@ export function getStyles(props: IShimmerLineStyleProps): IShimmerLineStyles {
             }
           }
         }
-      }
+      },
+      borderStyles
     ],
     topLeftCorner: [
-      classNames.topLeftCorner,
+      globalClassNames.topLeftCorner,
       {
         top: '0',
         left: '0'
       },
       sharedCornerStyles
     ],
     topRightCorner: [
-      classNames.topRightCorner,
+      globalClassNames.topRightCorner,
       {
         top: '0',
         right: '0'
       },
       sharedCornerStyles
     ],
     bottomRightCorner: [
-      classNames.bottomRightCorner,
+      globalClassNames.bottomRightCorner,
       {
         bottom: '0',
         right: '0'
       },
       sharedCornerStyles
     ],
     bottomLeftCorner: [
-      classNames.bottomLeftCorner,
+      globalClassNames.bottomLeftCorner,
       {
         bottom: '0',
         left: '0'

packages/office-ui-fabric-react/src/components/Shimmer/ShimmerLine/ShimmerLine.types.ts

@@ -26,11 +26,6 @@ export interface IShimmerLineProps extends React.AllHTMLAttributes<HTMLElement>
    */
   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<HTMLElement>
    * Call to provide customized styling that will layer on top of the variant rules.
    */
   styles?: IStyleFunctionOrObject<IShimmerLineStyleProps, IShimmerLineStyles>;
+
+  /**
+   * 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;
 }