Add missing icons to Signal and minor visual updates

common/changes/@uifabric/experiments/signals_2018-03-22-21-03.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "Add missing icons to Signals and fix colors",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "tmichon@microsoft.com"
+}

packages/experiments/src/components/signals/SignalField.scss

@@ -2,7 +2,16 @@
 @import '~office-ui-fabric-react/src/common/common';
 
 .signalField {
-  display: inline-flex;
+  &,
+  &.compact {
+    display: inline-flex;
+  }
+
+  &.wide {
+    display: flex;
+    vertical-align: top;
+  }
+
   max-width: 100%;
   flex-direction: row nowrap;
 }
@@ -12,4 +21,5 @@
   overflow: hidden;
   white-space: nowrap;
   text-align: left;
+  flex: 1;
 }

packages/experiments/src/components/signals/SignalField.tsx

@@ -6,7 +6,10 @@ import * as SignalFieldStylesModule from './SignalField.scss';
 // tslint:disable-next-line:no-any
 const SignalFieldStyles: any = SignalFieldStylesModule;
 
+export type SignalFieldMode = 'wide' | 'compact';
+
 export interface ISignalFieldProps extends React.HTMLAttributes<HTMLSpanElement> {
+  signalsFieldMode?: SignalFieldMode;
   before?: React.ReactNode | React.ReactNode[];
   after?: React.ReactNode | React.ReactNode[];
 }
@@ -21,12 +24,16 @@ export const SignalField: React.StatelessComponent<ISignalFieldProps> = (props:
     before,
     after,
     className,
+    signalsFieldMode = 'compact',
     ...spanProps
   } = props;
   return (
     <span
       { ...spanProps }
-      className={ css(SignalFieldStyles.signalField, className) }
+      className={ css(SignalFieldStyles.signalField, {
+        [SignalFieldStyles.wide]: signalsFieldMode === 'wide',
+        [SignalFieldStyles.compact]: signalsFieldMode === 'compact'
+      }, className) }
     >
       { props.before }
       <span className={ SignalFieldStyles.signalFieldValue }>

packages/experiments/src/components/signals/Signals.scss

@@ -26,7 +26,7 @@ settings used by the parent control.
   bottom: 100%;
   @include right(-0.15em);
   font-size: 0.66em;
-  margin-bottom: -0.8em;
+  margin-bottom: -0.9em;
 }
 
 .comments {
@@ -49,11 +49,11 @@ settings used by the parent control.
 }
 
 .trending {
-  color: #006257;
+  color: $ms-color-green;
 }
 
 .blocked {
-  color: #a80000;
+  color: $ms-color-redDark;
 }
 
 .warning {
@@ -62,10 +62,38 @@ settings used by the parent control.
 
 .shared {
   color: $ms-color-neutralSecondary;
+
+  .selected & {
+    color: $ms-color-black;
+  }
+}
+
+.lock {
+  color: $ms-color-neutralSecondary;
+
+  .selected & {
+    color: $ms-color-black;
+  }
 }
 
 .missingMetadata {
-  color: $ms-color-themeDarker;
+  color: #cf3902;
+}
+
+.youCheckedOut {
+  color: $ms-color-redDark;
+}
+
+.someoneCheckedOut {
+  color: $ms-color-neutralSecondary;
+
+  .selected & {
+    color: $ms-color-black;
+  }
+}
+
+.awaitingApproval {
+  color: #ad3100;
 }
 
 .mention {
@@ -78,10 +106,54 @@ settings used by the parent control.
   }
 }
 
+.unseenEdit {
+  color: $ms-color-themePrimary;
+
+  .selected & {
+    color: $ms-color-themeDark;
+  }
+}
+
+.unseenReply {
+  color: $ms-color-themePrimary;
+
+  .selected & {
+    color: $ms-color-themeDark;
+  }
+}
+
+i.unseenReply {
+  top: 0.25em;
+}
+
+.emailed {
+  color: $ms-color-themePrimary;
+
+  .selected & {
+    color: $ms-color-themeDark;
+  }
+}
+
+i.emailed {
+  top: 0.25em;
+}
+
 .malwareDetected {
   color: $ms-color-redDark;
 }
 
+.readOnly {
+  color: $ms-color-neutralSecondary;
+
+  .selected & {
+    color: $ms-color-black;
+  }
+}
+
 .external {
   color: $ms-color-neutralSecondary;
+
+  .selected & {
+    color: $ms-color-black;
+  }
 }

packages/experiments/src/components/signals/Signals.tsx

@@ -19,7 +19,7 @@ export const YouCheckedOutSignal: Signal = (props: ISignalProps): JSX.Element =>
     <Icon
       ariaLabel={ props.ariaLabel }
       className={ css(SignalStyles.signal, SignalsStyles.youCheckedOutl) }
-      iconName=''
+      iconName='checkedoutbyyou12'
     /> // TODO get correct icon
   );
 };
@@ -29,7 +29,7 @@ export const BlockedSignal: Signal = (props: ISignalProps): JSX.Element => {
     <Icon
       ariaLabel={ props.ariaLabel }
       className={ css(SignalStyles.signal, SignalsStyles.blocked) }
-      iconName='blocked2'
+      iconName='blocked12'
     />
   );
 };
@@ -49,7 +49,7 @@ export const WarningSignal: Signal = (props: ISignalProps): JSX.Element => {
     <Icon
       ariaLabel={ props.ariaLabel }
       className={ css(SignalStyles.signal, SignalsStyles.warning) }
-      iconName='warning'
+      iconName='warning12'
     />
   );
 };
@@ -59,8 +59,8 @@ export const AwaitingApprovalSignal: Signal = (props: ISignalProps): JSX.Element
     <Icon
       ariaLabel={ props.ariaLabel }
       className={ css(SignalStyles.signal, SignalsStyles.awaitingApproval) }
-      iconName='documentmanagement'
-    /> // TODO get correct icon
+      iconName='clock'
+    />
   );
 };
 
@@ -79,8 +79,18 @@ export const SomeoneCheckedOutSignal: Signal = (props: ISignalProps): JSX.Elemen
     <Icon
       ariaLabel={ props.ariaLabel }
       className={ css(SignalStyles.signal, SignalsStyles.someoneCheckedOut) }
-      iconName='navigateforward'
-    /> // TODO get correct icon
+      iconName='checkedoutbyother12'
+    />
+  );
+};
+
+export const RecordSignal: Signal = (props: ISignalProps): JSX.Element => {
+  return (
+    <Icon
+      ariaLabel={ props.ariaLabel }
+      className={ css(SignalStyles.signal, SignalsStyles.record) }
+      iconName='lock'
+    />
   );
 };
 
@@ -166,13 +176,26 @@ export const CommentsSignal: Signal = (props: ISignalProps): JSX.Element => {
   );
 };
 
+/**
+ * Renders a signal for a number of comments.
+ */
+export const UnseenReplySignal: Signal = (props: ISignalProps): JSX.Element => {
+  return (
+    <Icon
+      ariaLabel={ props.ariaLabel }
+      className={ css(SignalStyles.signal, SignalsStyles.unseenReply) }
+      iconName='commentprevious'
+    />
+  );
+};
+
 export const UnseenEditSignal: Signal = (props: ISignalProps): JSX.Element => {
   return (
     <Icon
       ariaLabel={ props.ariaLabel }
       className={ css(SignalStyles.signal, SignalsStyles.unseenEdit) }
       iconName='edit'
-    /> // TODO get correct icon
+    />
   );
 };
 
@@ -181,8 +204,18 @@ export const ReadOnlySignal: Signal = (props: ISignalProps): JSX.Element => {
     <Icon
       ariaLabel={ props.ariaLabel }
       className={ css(SignalStyles.signal, SignalsStyles.readOnly) }
-      iconName=''
-    /> // TODO get correct icon
+      iconName='uneditablesolid12'
+    />
+  );
+};
+
+export const EmailedSignal: Signal = (props: ISignalProps): JSX.Element => {
+  return (
+    <Icon
+      ariaLabel={ props.ariaLabel }
+      className={ css(SignalStyles.signal, SignalsStyles.emailed) }
+      iconName='mail'
+    />
   );
 };
 

packages/experiments/src/components/signals/SignalsPage.tsx

@@ -7,6 +7,11 @@ import {
 } from '@uifabric/example-app-base';
 
 /* tslint:disable:max-line-length */
+import { SignalFieldBasicExample } from './examples/SignalField.Basic.Example';
+const SignalFieldBasicExampleCode = require(
+  '!raw-loader!experiments/src/components/signals/examples/SignalField.Basic.Example.tsx'
+) as string;
+
 import { SignalsBasicExample } from './examples/Signals.Basic.Example';
 const SignalsBasicExampleCode = require(
   '!raw-loader!experiments/src/components/signals/examples/Signals.Basic.Example.tsx'
@@ -17,10 +22,13 @@ export class SignalsPage extends React.Component<IComponentDemoPageProps, {}> {
     return (
       <ComponentPage
         title='Signals'
-        componentName='SignalsBasicExample'
+        componentName='SignalField'
         exampleCards={
           <div>
-            <ExampleCard title='Basic signals usage' isOptIn={ true } code={ SignalsBasicExampleCode }>
+            <ExampleCard title='Controlling Signal alignment' isOptIn={ true } code={ SignalFieldBasicExampleCode }>
+              <SignalFieldBasicExample />
+            </ExampleCard>
+            <ExampleCard title='All Signal types' isOptIn={ true } code={ SignalsBasicExampleCode }>
               <SignalsBasicExample />
             </ExampleCard>
           </div>

packages/experiments/src/components/signals/examples/SignalField.Basic.Example.tsx

@@ -0,0 +1,42 @@
+
+import * as React from 'react';
+import { SignalField, SignalFieldMode } from '../SignalField';
+import { YouCheckedOutSignal, AwaitingApprovalSignal } from '../Signals';
+import { lorem } from '@uifabric/example-app-base';
+import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
+
+export interface ISignalFieldBasicExampleState {
+  mode: SignalFieldMode;
+}
+
+const text = lorem(4);
+
+export class SignalFieldBasicExample extends React.Component<{}, ISignalFieldBasicExampleState> {
+  constructor(props: {}) {
+    super(props);
+
+    this.state = {
+      mode: 'compact'
+    };
+  }
+
+  public render(): JSX.Element {
+    return (
+      <div>
+        <Checkbox label='Wide?' onChange={ this._onModeChange } checked={ this.state.mode === 'wide' } />
+        <SignalField
+          signalsFieldMode={ this.state.mode }
+          before={ [<YouCheckedOutSignal key='a' />] }
+          after={ [<AwaitingApprovalSignal key='b' />] }
+        >{ text }
+        </SignalField>
+      </div>
+    );
+  }
+
+  private _onModeChange = (event: React.MouseEvent<HTMLElement>, checked?: boolean | undefined): void => {
+    this.setState({
+      mode: checked ? 'wide' : 'compact'
+    });
+  }
+}

packages/experiments/src/components/signals/examples/Signals.Basic.Example.tsx

@@ -14,9 +14,12 @@ import {
   LiveEditSignal,
   MentionSignal,
   CommentsSignal,
+  UnseenReplySignal,
   UnseenEditSignal,
   ReadOnlySignal,
-  SharedSignal
+  SharedSignal,
+  EmailedSignal,
+  RecordSignal
 } from '../Signals';
 import { ChoiceGroup, IChoiceGroupOption, Checkbox } from 'office-ui-fabric-react';
 import { css, autobind } from 'office-ui-fabric-react/lib/Utilities';
@@ -162,10 +165,22 @@ export class SignalsBasicExample extends React.Component<{}, ISignalsBasicExampl
             name='Comments (count)'
             signal={ <CommentsSignal>2</CommentsSignal> }
           />
+          <SignalExample
+            name='Unseen reply'
+            signal={ <UnseenReplySignal /> }
+          />
           <SignalExample
             name='Unseen edit'
             signal={ <UnseenEditSignal /> }
           />
+          <SignalExample
+            name='Emailed'
+            signal={ <EmailedSignal /> }
+          />
+          <SignalExample
+            name='Record'
+            signal={ <RecordSignal /> }
+          />
           <SignalExample
             name='Read-only'
             signal={ <ReadOnlySignal /> }