ShimmerComponent new props

common/changes/@uifabric/experiments/v-vibr-ShimmerComponent_2018-03-06-18-42.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "Adds a new Shimmer Component to experiments package.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "v-vibr@microsoft.com"
+}

common/changes/@uifabric/experiments/v-vibr-Shimmer_2018-03-13-19-06.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "Changes in the props and naming.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "v-vibr@microsoft.com"
+}

packages/experiments/src/components/Shimmer/Shimmer.base.tsx

@@ -17,30 +17,37 @@ import {
   DefaultPalette,
   IStyleSet
 } from '../../Styling';
-import { ShimmerRectangle } from './ShimmerRectangle/ShimmerRectangle';
+import { ShimmerLine } from './ShimmerLine/ShimmerLine';
 import { ShimmerCircle } from './ShimmerCircle/ShimmerCircle';
 
+const LINE_DEFAULT_HEIGHT = 16;
+const CIRCLE_DEFAULT_HEIGHT = 24;
+
 const getClassNames = classNamesFunction<IShimmerStyleProps, IShimmerStyles>();
 
 export class ShimmerBase extends BaseComponent<IShimmerProps, {}> {
   public static defaultProps: IShimmerProps = {
     width: 100,
-    isDataLoaded: false
+    isDataLoaded: false,
+    isBaseStyle: false
   };
   private _classNames: {[key in keyof IShimmerStyles]: string};
   constructor(props: IShimmerProps) {
     super(props);
   }
 
   public render(): JSX.Element {
-    const { getStyles, width, lineElements, children, isDataLoaded } = this.props;
+    const { getStyles, width, lineElements, children, isDataLoaded, isBaseStyle } = this.props;
     const maxHeight: number | undefined = lineElements ? this._findMaxHeight(lineElements) : undefined;
-    this._classNames = getClassNames(getStyles!, { width, maxHeight, isDataLoaded });
+    this._classNames = getClassNames(getStyles!, { width, maxHeight, isDataLoaded, isBaseStyle });
 
     const elements: JSX.Element[] | JSX.Element = lineElements ?
       lineElements.map((elem: ICircle | ILine | IGap, index: number): JSX.Element => {
         switch (elem.type) {
           case ShimmerElementType.CIRCLE:
+            if (!elem.height) {
+              elem.height = CIRCLE_DEFAULT_HEIGHT;
+            }
             return (
               <ShimmerCircle
                 key={ index }
@@ -49,7 +56,9 @@ export class ShimmerBase extends BaseComponent<IShimmerProps, {}> {
               />
             );
           case ShimmerElementType.GAP:
-            const gapWidth = elem.width ? elem.width + '%' : '1%';
+            const gapWidth = elem.widthInPercentage || elem.widthInPixel ?
+              elem.widthInPercentage ? elem.widthInPercentage + '%' : elem.widthInPixel + 'px'
+              : '5px';
             return (
               <div
                 key={ index }
@@ -61,34 +70,55 @@ export class ShimmerBase extends BaseComponent<IShimmerProps, {}> {
                 } }
               />
             );
-          case ShimmerElementType.RECTANGLE:
+          case ShimmerElementType.LINE:
+            if (!elem.height) {
+              elem.height = LINE_DEFAULT_HEIGHT;
+            }
             return (
-              <ShimmerRectangle
+              <ShimmerLine
                 key={ index }
                 { ...elem }
                 borderAlignStyle={ this._getBorderAlignStyles(maxHeight, elem) }
               />
             );
         }
-      }) :
-      <ShimmerRectangle />;
+      }) : (
+        <ShimmerLine
+          height={ LINE_DEFAULT_HEIGHT }
+        />
+      );
 
     return (
       <div className={ this._classNames.root }>
         <div className={ this._classNames.shimmerWrapper }>
-          { elements }
-        </div>
-        <div className={ this._classNames.dataWrapper }>
-          { !!isDataLoaded ?
-            !!children ? children : null
-            : null }
+          { !!isBaseStyle ? children : elements }
         </div>
+
+        { !!isDataLoaded &&
+          <div className={ this._classNames.dataWrapper }>
+            { !!children ? children : null }
+          </div>
+        }
       </div>
     );
   }
 
   private _findMaxHeight(items: Array<ICircle | IGap | ILine>): number {
-    const maxHeight = items.reduce((acc: number, next: ICircle | IGap | ILine): number => {
+    const itemsDefaulted: Array<ICircle | IGap | ILine> = items.map((item: ICircle | IGap | ILine): ICircle | IGap | ILine => {
+      switch (item.type) {
+        case ShimmerElementType.CIRCLE:
+          if (!item.height) {
+            item.height = CIRCLE_DEFAULT_HEIGHT;
+          }
+        case ShimmerElementType.LINE:
+          if (!item.height) {
+            item.height = LINE_DEFAULT_HEIGHT;
+          }
+      }
+      return item;
+    });
+
+    const maxHeight = itemsDefaulted.reduce((acc: number, next: ICircle | IGap | ILine): number => {
       return next.height ?
         next.height > acc ? next.height : acc
         : acc;
@@ -97,19 +127,11 @@ export class ShimmerBase extends BaseComponent<IShimmerProps, {}> {
   }
 
   private _getBorderAlignStyles(maxHeight: number | undefined, elem: ICircle | IGap | ILine): IStyleSet | undefined {
-    let height: number | undefined;
-    switch (elem.type) {
-      case ShimmerElementType.RECTANGLE:
-        height = !!elem.height ? elem.height : 16;
-        break;
-      case ShimmerElementType.CIRCLE:
-        height = !!elem.height ? elem.height : 24;
-        break;
-    }
-    console.log(height);
-    const dif: number | undefined = maxHeight && height ?
-      maxHeight - height > 0 ?
-        maxHeight - height : undefined
+    const elemHeight: number | undefined = elem.height;
+
+    const dif: number | undefined = maxHeight && elemHeight ?
+      maxHeight - elemHeight > 0 ?
+        maxHeight - elemHeight : undefined
       : undefined;
 
     let borderStyle: IStyleSet | undefined;

packages/experiments/src/components/Shimmer/Shimmer.styles.ts

@@ -8,15 +8,18 @@ export function getStyles(props: IShimmerStyleProps): IShimmerStyles {
   const {
     width,
     maxHeight,
-    isDataLoaded
+    isDataLoaded,
+    isBaseStyle
   } = props;
 
+  const BACKGROUND_OFF_SCREEN_POSITION = '1000%';
+
   const shimmerAnimation: string = keyframes({
     '0%': {
-      backgroundPosition: '-900%'
+      backgroundPosition: `-${BACKGROUND_OFF_SCREEN_POSITION}`
     },
     '100%': {
-      backgroundPosition: '1000%'
+      backgroundPosition: BACKGROUND_OFF_SCREEN_POSITION
     }
   });
 
@@ -26,8 +29,15 @@ export function getStyles(props: IShimmerStyleProps): IShimmerStyles {
       {
         position: 'relative',
         margin: '10px',
+        width: 'auto',
         boxSizing: 'content-box',
         minHeight: maxHeight ? `${maxHeight}px` : '16px'
+      },
+      isBaseStyle && {
+        margin: '0',
+        minHeight: 'inherit',
+        display: 'flex',
+        alignItems: 'center'
       }
     ],
     shimmerWrapper: [
@@ -60,6 +70,10 @@ export function getStyles(props: IShimmerStyleProps): IShimmerStyles {
       isDataLoaded && {
         opacity: '0',
         visibility: 'hidden'
+      },
+      isBaseStyle && {
+        position: 'static',
+        width: 'auto'
       }
     ],
     dataWrapper: [

packages/experiments/src/components/Shimmer/Shimmer.types.ts

@@ -19,7 +19,7 @@ export interface IShimmerProps extends React.AllHTMLAttributes<HTMLElement> {
   componentRef?: (component: IShimmer) => void;
 
   /**
-   * Sets the width of the shimmer wave container in percentages.
+   * Sets the width of the shimmer wave wrapper in percentages.
    * @default 100%
    */
   width?: number;
@@ -30,6 +30,12 @@ export interface IShimmerProps extends React.AllHTMLAttributes<HTMLElement> {
    */
   isDataLoaded?: boolean;
 
+  /**
+   * Provide when Shimmer is intended to be used when using 'onRenderMissingItem' optional callback of the DetailsList Fabric Component.
+   * @default false
+   */
+  isBaseStyle?: boolean;
+
   /**
    * Elements to render in one line of the Shimmer.
    */
@@ -48,72 +54,75 @@ export interface IShimmerElement {
   type: ShimmerElementType;
 
   /**
-   * The hight of the element (ICircle, ILine, IGap).
+   * The hight of the element in pixels (ICircle, ILine).
    * Read more details for each specific element.
    */
   height?: number;
 
   /**
-   * The width of the element (ICircle, ILine, IGap).
+   * The width of the element in pixels (ILine, IGap).
    * Read more details for each specific element.
    */
-  width?: number;
+  widthInPixel?: number;
 
   /**
-   * The vertical alignemt of the element (ICircle, ILine, IGap).
+   * The width of the element in pixels (ILine, IGap).
+   * Read more details for each specific element.
+   */
+  widthInPercentage?: number;
+
+  /**
+   * The vertical alignemt of the element (ICircle, ILine).
    * @default center
    */
   verticalAlign?: ShimmerElementVerticalAlign;
 }
 
 export interface ILine extends IShimmerElement {
   /**
-   * Sets the height of the rectangle.
-   * The value will represent the height in pixels.
-   * @default 16
+   * Sets the height of the shimmer line in pixels.
+   * @default 16px
    */
   height?: number;
 
   /**
-   * If not provided the line will the take the remaining space to fill the shimmer container.
-   * The value provided will represent the width as '%' relative to the shimmer container.
+   * The value provided will represent the width as '%' relative to the shimmer wrapper.
    */
-  width?: number;
-}
+  widthInPercentage?: number;
 
-export interface ICircle extends IShimmerElement {
   /**
-   * Sets the height of the circle.
-   * The value will represent the height in pixels.
-   * @default 24
+   * Sets the width of the Line to an exact value in pixels.
+   * @default 50px
    */
-  height?: number;
+  widthInPixel?: number;
+}
 
+export interface ICircle extends IShimmerElement {
   /**
-   * Width of the circle element if provided will be ignored.
-   * The value will be set equal to the height of the circle for scale ratio reasons.
+   * Sets the height of the shimmer circle in pixels.
+   * @default 24px
    */
-  width?: number;
+  height?: number;
 }
 
 export interface IGap extends IShimmerElement {
   /**
-   * Height for gap element will be ignored and set equal to the heighest element on the line.
+   * The value will be calculated as '%' relative the to shimmer wrapper.
    */
-  height?: number;
+  widthInPercentage?: number;
 
   /**
-   * Sets the width relative to the shimmer container width for responsiveness reasons.
-   * The value will be calculated as '%' relative the to shimmer container.
-   * @default 1%
+   * Sets the width of the Gap to an exact value in pixels.
+   * @default 5px
    */
-  width?: number;
+  widthInPixel?: number;
 }
 
 export interface IShimmerStyleProps {
   width?: number;
   maxHeight?: number;
   isDataLoaded?: boolean;
+  isBaseStyle?: boolean;
 }
 
 export interface IShimmerStyles {
@@ -123,7 +132,7 @@ export interface IShimmerStyles {
 }
 
 export const enum ShimmerElementType {
-  RECTANGLE = 'line',
+  LINE = 'line',
   CIRCLE = 'circle',
   GAP = 'gap'
 }

packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.base.tsx

@@ -7,15 +7,13 @@ import {
   IShimmerCircleProps,
   IShimmerCircleStyleProps,
   IShimmerCircleStyles
-} from './ShimmerCircle.styles';
+} from './ShimmerCircle.types';
 
 const getClassNames = classNamesFunction<IShimmerCircleStyleProps, IShimmerCircleStyles>();
 
 export class ShimmerCircleBase extends BaseComponent<IShimmerCircleProps, {}> {
-  public static defaultProps: IShimmerCircleProps = {
-    height: 24
-  };
   private _classNames: {[key in keyof IShimmerCircleStyles]: string};
+
   constructor(props: IShimmerCircleProps) {
     super(props);
   }