Add compact timestamp style for ActivityItem component

common/changes/office-ui-fabric-react/activity-compact_2018-03-21-15-01.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Provide compact timestamp style for ActivityItem",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "tmichon@microsoft.com"
+}

packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.classNames.ts

@@ -59,6 +59,9 @@ export const getClassNames = memoizeFunction((
 
     activityText: mergeStyles('ms-ActivityItem-activityText', styles.activityText),
     commentText: mergeStyles('ms-ActivityItem-commentText', styles.commentText),
-    timeStamp: mergeStyles('ms-ActivityItem-timeStamp', styles.timeStamp)
+    timeStamp: mergeStyles(
+      'ms-ActivityItem-timeStamp',
+      styles.timeStamp,
+      isCompact && styles.isCompactTimeStamp)
   };
 });

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

@@ -127,7 +127,13 @@ export const getStyles = memoizeFunction((
         fontWeight: 400,
         color: theme.palette.neutralSecondary
       }
-    ]
+    ],
+
+    isCompactTimeStamp: {
+      display: 'inline-block',
+      paddingLeft: '0.3em', // One space character
+      fontSize: '1em'
+    }
   };
 
   return concatStyleSets(ActivityItemStyles, customStyles);

packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx

@@ -9,9 +9,6 @@ import { getStyles } from './ActivityItem.styles';
 import { PersonaSize, PersonaCoin, IPersonaProps } from '../../Persona';
 
 export class ActivityItem extends BaseComponent<IActivityItemProps, {}> {
-  private _classNames: IActivityItemClassNames;
-  private _styles: IActivityItemStyles;
-
   constructor(props: IActivityItemProps) {
     super(props);
   }
@@ -25,24 +22,18 @@ export class ActivityItem extends BaseComponent<IActivityItemProps, {}> {
       styles: customStyles
     } = this.props;
 
-    this._styles = getStyles(undefined, customStyles);
-    this._classNames = getClassNames(
-      this._styles,
-      this.props.className!,
-      this.props.activityPersonas!,
-      this.props.isCompact!
-    );
+    const classNames = this._getClassNames(this.props);
 
     return (
-      <div className={ this._classNames.root } style={ this.props.style } >
+      <div className={ classNames.root } style={ this.props.style } >
 
         { (this.props.activityPersonas || this.props.activityIcon || this.props.onRenderIcon) &&
-          <div className={ this._classNames.activityTypeIcon }>
+          <div className={ classNames.activityTypeIcon }>
             { onRenderIcon(this.props) }
           </div>
         }
 
-        <div className={ this._classNames.activityContent }>
+        <div className={ classNames.activityContent }>
           { onRenderActivityDescription(this.props, this._onRenderActivityDescription) }
           { onRenderComments(this.props, this._onRenderComments) }
           { onRenderTimeStamp(this.props, this._onRenderTimeStamp) }
@@ -61,35 +52,43 @@ export class ActivityItem extends BaseComponent<IActivityItemProps, {}> {
   }
 
   private _onRenderActivityDescription = (props: IActivityItemProps): JSX.Element | null => {
+    const classNames = this._getClassNames(props);
+
     const activityDescription = props.activityDescription || props.activityDescriptionText;
 
     if (activityDescription) {
-      return (<span className={ this._classNames.activityText }>{ activityDescription }</span>);
+      return (<span className={ classNames.activityText }>{ activityDescription }</span>);
     }
 
     return null;
   }
 
   private _onRenderComments = (props: IActivityItemProps): JSX.Element | null => {
+    const classNames = this._getClassNames(props);
+
     const comments = props.comments || props.commentText;
 
     if (!props.isCompact && comments) {
-      return (<div className={ this._classNames.commentText }>{ comments }</div>);
+      return (<div className={ classNames.commentText }>{ comments }</div>);
     }
 
     return null;
   }
 
   private _onRenderTimeStamp = (props: IActivityItemProps): JSX.Element | null => {
+    const classNames = this._getClassNames(props);
+
     if (!props.isCompact && props.timeStamp) {
-      return (<div className={ this._classNames.timeStamp }>{ props.timeStamp }</div>);
+      return (<div className={ classNames.timeStamp }>{ props.timeStamp }</div>);
     }
 
     return null;
   }
 
   // If activityPersonas is an array of persona props, build the persona cluster element.
   private _onRenderPersonaArray = (props: IActivityItemProps): JSX.Element | null => {
+    const classNames = this._getClassNames(props);
+
     let personaElement: JSX.Element | null = null;
     const activityPersonas = props.activityPersonas as Array<IPersonaProps & { key?: string | number }>;
     if (activityPersonas[0].imageUrl || activityPersonas[0].imageInitials) {
@@ -111,15 +110,18 @@ export class ActivityItem extends BaseComponent<IActivityItemProps, {}> {
             { ...person }
             // tslint:disable-next-line:no-string-literal
             key={ person['key'] ? person['key'] : index }
-            className={ this._classNames.activityPersona }
+            className={ classNames.activityPersona }
             size={ showSize16Personas ? PersonaSize.size16 : PersonaSize.size32 }
             style={ style }
           />
         );
       });
-      personaElement = <div className={ this._classNames.personaContainer }>{ personaList }</div>;
+      personaElement = <div className={ classNames.personaContainer }>{ personaList }</div>;
     }
     return personaElement;
   }
 
-}
+  private _getClassNames(props: IActivityItemProps): IActivityItemClassNames {
+    return getClassNames(getStyles(undefined, props.styles), props.className!, props.activityPersonas!, props.isCompact!);
+  }
+}

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

@@ -148,4 +148,10 @@ export interface IActivityItemStyles {
    * Styles applied to the timestamp at the end of each activity item.
    */
   timeStamp?: IStyle;
-}
+
+  /**
+   * Styles applied to the timestamp in compact mode.
+   * This can occur if a host overrides the render behavior to force the timestamp to render.
+   */
+  isCompactTimeStamp?: IStyle;
+}

packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Compact.Example.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 /* tslint:enable:no-unused-variable */
 import { css, classNamesFunction } from '../../../Utilities';
 import { ActivityItem } from '../ActivityItem';
+import { IActivityItemProps } from '../ActivityItem.types';
 import {
   getStyles,
   IActivityItemExampleStyleProps,
@@ -16,7 +17,7 @@ export class ActivityItemCompactExample extends React.Component<React.Props<Acti
     const getClassNames = classNamesFunction<IActivityItemExampleStyleProps, IActivityItemExampleStyles>();
     const classNames = getClassNames(getStyles);
 
-    const activityItemExamples = [
+    const activityItemExamples: Partial<IActivityItemProps & React.Props<{}>>[] = [
       {
         key: 1,
         activityDescription: [
@@ -58,7 +59,7 @@ export class ActivityItemCompactExample extends React.Component<React.Props<Acti
           <span key={ 1 } className={ css(classNames.nameText) }>Sabrina De Luca</span>,
           <span key={ 2 }> added this file</span>
         ],
-        activityIcon: React.createElement(Icon, { iconName: 'Add' }),
+        activityIcon: <Icon iconName={ 'Add' } />,
         isCompact: true
       },
       {
@@ -67,7 +68,7 @@ export class ActivityItemCompactExample extends React.Component<React.Props<Acti
           <span key={ 1 } className={ css(classNames.nameText) }>Chuan Rojumanong</span>,
           <span key={ 2 }> shared this file</span>
         ],
-        activityIcon: React.createElement(Icon, { iconName: 'Share' }),
+        activityIcon: <Icon iconName={ 'Share' } />,
         isCompact: true
       }
     ];
@@ -76,7 +77,7 @@ export class ActivityItemCompactExample extends React.Component<React.Props<Acti
     activityItemExamples.forEach((item) => {
       const props = item;
       activityExampleList.push(
-        <ActivityItem {...props} key={ item.key } className={ css(classNames.exampleRoot) } />
+        <ActivityItem { ...props } key={ item.key } className={ css(classNames.exampleRoot) } />
       );
     });