Shimmer: change prop use of subcomponents.

common/changes/office-ui-fabric-react/v-vibr-ShimmerPropRemoval_2018-07-13-19-48.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Removing use of borderStyle prop of Shimmer subcomponents Line, Circle, Gap in favor of using mergeStyles API.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}

packages/office-ui-fabric-react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.base.tsx

@@ -12,7 +12,7 @@ export class ShimmerCircleBase extends BaseComponent<IShimmerCircleProps, {}> {
   }
 
   public render(): JSX.Element {
-    const { height, styles, borderStyle, theme } = this.props;
+    const { height, styles, theme, borderStyle } = this.props;
     this._classNames = getClassNames(styles!, {
       theme: theme!,
       height,

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

@@ -7,17 +7,16 @@ const GlobalClassNames = {
 };
 
 export function getStyles(props: IShimmerCircleStyleProps): IShimmerCircleStyles {
-  const { height, borderStyle, theme } = props;
+  const { height, theme, borderStyle } = props;
 
   const { palette } = theme;
   const classNames = getGlobalClassNames(GlobalClassNames, theme);
 
-  const styles: IRawStyle = !!borderStyle ? borderStyle : {};
+  const borderStyles: IRawStyle = !!borderStyle ? borderStyle : {};
 
   return {
     root: [
       classNames.root,
-      styles,
       {
         width: `${height}px`,
         height: `${height}px`,
@@ -31,7 +30,8 @@ export function getStyles(props: IShimmerCircleStyleProps): IShimmerCircleStyles
             borderColor: 'Window'
           }
         }
-      }
+      },
+      borderStyles
     ],
     svg: [
       classNames.svg,

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,6 +29,12 @@ 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>;
+
+  /**
+   * Sets custom styling of the shimmerCircle borders.
+   * @deprecated Use 'styles' prop to leverage mergeStyle API.
+   */
+  borderStyle?: IRawStyle;
 }
 
 export interface IShimmerCircleStyleProps {

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.base.tsx

@@ -12,7 +12,7 @@ export class ShimmerGapBase extends BaseComponent<IShimmerGapProps, {}> {
   }
 
   public render(): JSX.Element {
-    const { height, styles, width, borderStyle, theme } = this.props;
+    const { height, styles, width, theme, borderStyle } = this.props;
 
     this._classNames = getClassNames(styles!, {
       theme: theme!,

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

@@ -6,17 +6,16 @@ const GlobalClassNames = {
 };
 
 export function getStyles(props: IShimmerGapStyleProps): IShimmerGapStyles {
-  const { height, borderStyle, theme } = props;
+  const { height, theme, borderStyle } = props;
 
   const { palette } = theme;
   const classNames = getGlobalClassNames(GlobalClassNames, theme);
 
-  const styles: IRawStyle = !!borderStyle ? borderStyle : {};
+  const borderStyles: IRawStyle = !!borderStyle ? borderStyle : {};
 
   return {
     root: [
       classNames.root,
-      styles,
       {
         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,6 +35,12 @@ 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>;
+
+  /**
+   * Sets custom styling of the shimmerGap borders.
+   * @deprecated Use 'styles' prop to leverage mergeStyle API.
+   */
+  borderStyle?: IRawStyle;
 }
 
 export interface IShimmerGapStyleProps {

packages/office-ui-fabric-react/src/components/Shimmer/ShimmerLine/ShimmerLine.base.tsx

@@ -12,7 +12,7 @@ export class ShimmerLineBase extends BaseComponent<IShimmerLineProps, {}> {
   }
 
   public render(): JSX.Element {
-    const { height, styles, width, borderStyle, theme } = this.props;
+    const { height, styles, width, theme, borderStyle } = this.props;
 
     this._classNames = getClassNames(styles!, {
       theme: theme!,

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

@@ -10,12 +10,12 @@ const GlobalClassNames = {
 };
 
 export function getStyles(props: IShimmerLineStyleProps): IShimmerLineStyles {
-  const { height, borderStyle, theme } = props;
+  const { height, theme, borderStyle } = props;
 
   const { palette } = theme;
   const classNames = getGlobalClassNames(GlobalClassNames, theme);
 
-  const styles: IRawStyle = !!borderStyle ? borderStyle : { borderWidth: '0px' };
+  const borderStyles: IRawStyle = !!borderStyle ? borderStyle : { borderWidth: '0px' };
 
   const sharedCornerStyles: IRawStyle = {
     position: 'absolute',
@@ -25,7 +25,6 @@ export function getStyles(props: IShimmerLineStyleProps): IShimmerLineStyles {
   return {
     root: [
       classNames.root,
-      styles,
       {
         height: `${height}px`,
         boxSizing: 'content-box',
@@ -43,7 +42,8 @@ export function getStyles(props: IShimmerLineStyleProps): IShimmerLineStyles {
             }
           }
         }
-      }
+      },
+      borderStyles
     ],
     topLeftCorner: [
       classNames.topLeftCorner,

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,6 +35,12 @@ 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>;
+
+  /**
+   * Sets custom styling of the shimmerLine borders.
+   * @deprecated Use styles prop to leverage mergeStyle API.
+   */
+  borderStyle?: IRawStyle;
 }
 
 export interface IShimmerLineStyleProps {

packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx

@@ -62,7 +62,7 @@ export class TooltipHost extends BaseComponent<ITooltipHostProps, ITooltipHostSt
       (tooltipProps && tooltipProps.onRenderContent && tooltipProps.onRenderContent())
     );
     const showTooltip = isTooltipVisible && isContentPresent;
-    const ariaDescribedBy = (setAriaDescribedBy && isTooltipVisible && isContentPresent) ? tooltipId : undefined;
+    const ariaDescribedBy = setAriaDescribedBy && isTooltipVisible && isContentPresent ? tooltipId : undefined;
 
     return (
       <div