Fix errors in Signal styles (#4367)

microsoft · Mar 27, 2018 · 2028890 · 2028890
1 parent 9ad6945
commit 2028890
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 32 deletions.
diff --git a/packages/experiments/src/components/signals/Signal.tsx b/packages/experiments/src/components/signals/Signal.tsx
@@ -1,10 +1,7 @@
 
 import * as React from 'react';
 import { css } from 'office-ui-fabric-react/lib/Utilities';
-import * as SignalStylesModule from './Signal.scss';
-
-// tslint:disable-next-line:no-any
-const SignalStyles: any = SignalStylesModule;
+import * as SignalStyles from './Signal.scss';
 
 export interface ISignalProps extends React.HTMLAttributes<HTMLSpanElement> {
   ariaLabel?: string;

diff --git a/packages/experiments/src/components/signals/SignalField.tsx b/packages/experiments/src/components/signals/SignalField.tsx
@@ -1,10 +1,7 @@
 
 import * as React from 'react';
 import { css } from 'office-ui-fabric-react/lib/Utilities';
-import * as SignalFieldStylesModule from './SignalField.scss';
-
-// tslint:disable-next-line:no-any
-const SignalFieldStyles: any = SignalFieldStylesModule;
+import * as SignalFieldStyles from './SignalField.scss';
 
 export type SignalFieldMode = 'wide' | 'compact';
 

diff --git a/packages/experiments/src/components/signals/Signals.scss b/packages/experiments/src/components/signals/Signals.scss
@@ -157,3 +157,15 @@ i.emailed {
     color: $ms-color-black;
   }
 }
+
+.record {
+  color: $ms-color-neutralSecondary;
+
+  .selected & {
+    color: $ms-color-black;
+  }
+}
+
+.liveEdit {
+  display: none; // Not implemented.
+}
diff --git a/packages/experiments/src/components/signals/Signals.tsx b/packages/experiments/src/components/signals/Signals.tsx
@@ -3,13 +3,8 @@ import * as React from 'react';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
 import { css } from 'office-ui-fabric-react/lib/Utilities';
 import { Signal, ISignalProps } from './Signal';
-import * as SignalsStylesModule from './Signals.scss';
-import * as SignalStylesModule from './Signal.scss';
-
-// tslint:disable-next-line:no-any
-const SignalsStyles = SignalsStylesModule as any;
-// tslint:disable-next-line:no-any
-const SignalStyles = SignalStylesModule as any;
+import * as SignalsStyles from './Signals.scss';
+import * as SignalStyles from './Signal.scss';
 
 export * from './Signal';
 export * from './SignalField';
@@ -18,9 +13,9 @@ export const YouCheckedOutSignal: Signal = (props: ISignalProps): JSX.Element =>
   return (
     <Icon
       ariaLabel={ props.ariaLabel }
-      className={ css(SignalStyles.signal, SignalsStyles.youCheckedOutl) }
+      className={ css(SignalStyles.signal, SignalsStyles.youCheckedOut) }
       iconName='checkedoutbyyou12'
-    /> // TODO get correct icon
+    />
   );
 };
 
@@ -245,21 +240,11 @@ export const ATPSignal: Signal = MalwareDetectedSignal; // TODO Delete on next m
  * Renders a signal for an external item.
  */
 export const ExternalSignal: Signal = (props: ISignalProps): JSX.Element => {
-  const {
-    ariaLabel,
-    ...spanProps
-  } = props;
-
   return (
-    <span
-      { ...spanProps }
-      className={ css(SignalStyles.signal, SignalStyles.centeredSignal) }
-    >
-      <Icon
-        ariaLabel={ props.ariaLabel }
-        className={ css(SignalStyles.signal, SignalStyles.external) }
-        iconName='Globe'
-      />
-    </span>
+    <Icon
+      ariaLabel={ props.ariaLabel }
+      className={ css(SignalStyles.signal, SignalsStyles.external) }
+      iconName='Globe'
+    />
   );
 };