Fix Signal rendering in IE

common/changes/@uifabric/experiments/signals_2018-03-29-18-33.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "Fix flex styling for SignalField",
+      "packageName": "@uifabric/experiments",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "[email protected]"
+}

common/changes/@uifabric/experiments/signals_2018-03-29-20-23.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "Pass all props to Signal Icon elements",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "[email protected]"
+}

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

@@ -13,6 +13,7 @@ export const Signal: Signal = (props: ISignalProps): JSX.Element => {
   const {
     ariaLabel,
     className,
+    children,
     ...spanProps
   } = props;
 

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

@@ -21,5 +21,5 @@
   overflow: hidden;
   white-space: nowrap;
   text-align: left;
-  flex: 1;
+  flex: 1 1 auto;
 }

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

@@ -1,6 +1,6 @@
 
 import * as React from 'react';
-import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import { Icon, IIconProps } from 'office-ui-fabric-react/lib/Icon';
 import { css } from 'office-ui-fabric-react/lib/Utilities';
 import { Signal, ISignalProps } from './Signal';
 import * as SignalsStyles from './Signals.scss';
@@ -11,79 +11,79 @@ export * from './SignalField';
 
 export const YouCheckedOutSignal: Signal = (props: ISignalProps): JSX.Element => {
   return (
-    <Icon
-      ariaLabel={ props.ariaLabel }
-      className={ css(SignalStyles.signal, SignalsStyles.youCheckedOut) }
+    <IconSignal
+      { ...props }
+      signalClass={ SignalsStyles.youCheckedOut }
       iconName='checkedoutbyyou12'
     />
   );
 };
 
 export const BlockedSignal: Signal = (props: ISignalProps): JSX.Element => {
   return (
-    <Icon
-      ariaLabel={ props.ariaLabel }
-      className={ css(SignalStyles.signal, SignalsStyles.blocked) }
+    <IconSignal
+      { ...props }
+      signalClass={ SignalsStyles.blocked }
       iconName='blocked12'
     />
   );
 };
 
 export const MissingMetadataSignal: Signal = (props: ISignalProps): JSX.Element => {
   return (
-    <Icon
-      ariaLabel={ props.ariaLabel }
-      className={ css(SignalStyles.signal, SignalsStyles.missingMetadata) }
+    <IconSignal
+      { ...props }
+      signalClass={ SignalsStyles.missingMetadata }
       iconName='info'
     />
   );
 };
 
 export const WarningSignal: Signal = (props: ISignalProps): JSX.Element => {
   return (
-    <Icon
-      ariaLabel={ props.ariaLabel }
-      className={ css(SignalStyles.signal, SignalsStyles.warning) }
+    <IconSignal
+      { ...props }
+      signalClass={ SignalsStyles.warning }
       iconName='warning12'
     />
   );
 };
 
 export const AwaitingApprovalSignal: Signal = (props: ISignalProps): JSX.Element => {
   return (
-    <Icon
-      ariaLabel={ props.ariaLabel }
-      className={ css(SignalStyles.signal, SignalsStyles.awaitingApproval) }
+    <IconSignal
+      { ...props }
+      signalClass={ SignalsStyles.awaitingApproval }
       iconName='clock'
     />
   );
 };
 
 export const TrendingSignal: Signal = (props: ISignalProps): JSX.Element => {
   return (
-    <Icon
-      ariaLabel={ props.ariaLabel }
-      className={ css(SignalStyles.signal, SignalsStyles.trending) }
+    <IconSignal
+      { ...props }
+      signalClass={ SignalsStyles.trending }
       iconName='market'
     />
   );
 };
 
 export const SomeoneCheckedOutSignal: Signal = (props: ISignalProps): JSX.Element => {
   return (
-    <Icon
-      ariaLabel={ props.ariaLabel }
-      className={ css(SignalStyles.signal, SignalsStyles.someoneCheckedOut) }
+    <IconSignal
+      { ...props }
+      signalClass={ SignalsStyles.someoneCheckedOut }
       iconName='checkedoutbyother12'
     />
   );
 };
 
 export const RecordSignal: Signal = (props: ISignalProps): JSX.Element => {
   return (
-    <Icon
-      ariaLabel={ props.ariaLabel }
-      className={ css(SignalStyles.signal, SignalsStyles.record) }
+    <IconSignal
+      { ...props }
+      signalClass={ SignalsStyles.record }
       iconName='lock'
     />
   );
@@ -131,9 +131,9 @@ export const LiveEditSignal: Signal = (props: ISignalProps): JSX.Element => {
 
 export const MentionSignal: Signal = (props: ISignalProps): JSX.Element => {
   return (
-    <Icon
-      ariaLabel={ props.ariaLabel }
-      className={ css(SignalStyles.signal, SignalsStyles.mention) }
+    <IconSignal
+      { ...props }
+      signalClass={ SignalsStyles.mention }
       iconName='accounts'
     />
   );
@@ -176,59 +176,59 @@ export const CommentsSignal: Signal = (props: ISignalProps): JSX.Element => {
  */
 export const UnseenReplySignal: Signal = (props: ISignalProps): JSX.Element => {
   return (
-    <Icon
-      ariaLabel={ props.ariaLabel }
-      className={ css(SignalStyles.signal, SignalsStyles.unseenReply) }
+    <IconSignal
+      { ...props }
+      signalClass={ SignalsStyles.unseenReply }
       iconName='commentprevious'
     />
   );
 };
 
 export const UnseenEditSignal: Signal = (props: ISignalProps): JSX.Element => {
   return (
-    <Icon
-      ariaLabel={ props.ariaLabel }
-      className={ css(SignalStyles.signal, SignalsStyles.unseenEdit) }
+    <IconSignal
+      { ...props }
+      signalClass={ SignalsStyles.unseenEdit }
       iconName='edit'
     />
   );
 };
 
 export const ReadOnlySignal: Signal = (props: ISignalProps): JSX.Element => {
   return (
-    <Icon
-      ariaLabel={ props.ariaLabel }
-      className={ css(SignalStyles.signal, SignalsStyles.readOnly) }
+    <IconSignal
+      { ...props }
+      signalClass={ SignalsStyles.readOnly }
       iconName='uneditablesolid12'
     />
   );
 };
 
 export const EmailedSignal: Signal = (props: ISignalProps): JSX.Element => {
   return (
-    <Icon
-      ariaLabel={ props.ariaLabel }
-      className={ css(SignalStyles.signal, SignalsStyles.emailed) }
+    <IconSignal
+      { ...props }
+      signalClass={ SignalsStyles.emailed }
       iconName='mail'
     />
   );
 };
 
 export const SharedSignal: Signal = (props: ISignalProps): JSX.Element => {
   return (
-    <Icon
-      ariaLabel={ props.ariaLabel }
-      className={ css(SignalStyles.signal, SignalsStyles.shared) }
+    <IconSignal
+      { ...props }
+      signalClass={ SignalsStyles.shared }
       iconName='people'
     />
   );
 };
 
 export const MalwareDetectedSignal: Signal = (props: ISignalProps): JSX.Element => {
   return (
-    <Icon
-      ariaLabel={ props.ariaLabel }
-      className={ css(SignalStyles.signal, SignalsStyles.malwareDetected) }
+    <IconSignal
+      { ...props }
+      signalClass={ SignalsStyles.malwareDetected }
       iconName='BlockedSite'
     />
   );
@@ -241,10 +241,37 @@ export const ATPSignal: Signal = MalwareDetectedSignal; // TODO Delete on next m
  */
 export const ExternalSignal: Signal = (props: ISignalProps): JSX.Element => {
   return (
-    <Icon
-      ariaLabel={ props.ariaLabel }
-      className={ css(SignalStyles.signal, SignalsStyles.external) }
+    <IconSignal
+      { ...props }
+      signalClass={ SignalsStyles.external }
       iconName='Globe'
     />
   );
 };
+
+type IIconSignalProps = ISignalProps & Pick<IIconProps, 'iconName'> & {
+  /**
+   * The class name to use for the Signal type.
+   */
+  signalClass: string;
+};
+
+/**
+ * Renders a signal as just an Icon. This is the simplest Signal case.
+ */
+function IconSignal(props: IIconSignalProps): JSX.Element { // tslint:disable-line:function-name
+  const {
+    ariaLabel,
+    className,
+    signalClass,
+    ...spanProps
+  } = props;
+
+  return (
+    <Icon
+      { ...spanProps }
+      ariaLabel={ props.ariaLabel }
+      className={ css(SignalStyles.signal, signalClass, className) }
+    />
+  );
+}