Show title tooltips for icons

Summary:
This creates an `Atomicon` component which accepts a type which currently overlaps with Outline's types and maps them to the correct class.

It also includes an `aria-label` and `title` which display a more readable version (capitalized in this case) of the type

Reviewed By: Goom11

Differential Revision: D7073310

fbshipit-source-id: db5bfc99c8fe3eb7b70ba55938f260c7da29fbc2

modules/atom-ide-ui/pkg/atom-ide-outline-view/lib/OutlineView.js

@@ -14,6 +14,7 @@ import type {OutlineForUi, OutlineTreeForUi} from './createOutlines';
 import type {TextToken} from 'nuclide-commons/tokenized-text';
 import type {TreeNode, NodePath} from 'nuclide-commons-ui/SelectableTree';
 
+import Atomicon from 'nuclide-commons-ui/Atomicon';
 import HighlightedText from 'nuclide-commons-ui/HighlightedText';
 import {arrayEqual} from 'nuclide-commons/collection';
 import memoizeUntilChanged from 'nuclide-commons/memoizeUntilChanged';
@@ -410,12 +411,9 @@ function renderItem(
   searchResult: ?SearchResult,
 ): React.Element<string> | string {
   const r = [];
-  const icon =
-    // flowlint-next-line sketchy-null-string:off
-    outline.icon || (outline.kind && OUTLINE_KIND_TO_ICON[outline.kind]);
 
-  if (icon != null) {
-    r.push(<span key={`icon-${icon}`} className={`icon icon-${icon}`} />);
+  if (outline.kind != null) {
+    r.push(<Atomicon key="type-icon" type={outline.kind} />);
     // Note: icons here are fixed-width, so the text lines up.
   }
 
@@ -485,24 +483,3 @@ function selectNodeFromPath(
   }
   return node;
 }
-
-const OUTLINE_KIND_TO_ICON = {
-  array: 'type-array',
-  boolean: 'type-boolean',
-  class: 'type-class',
-  constant: 'type-constant',
-  constructor: 'type-constructor',
-  enum: 'type-enum',
-  field: 'type-field',
-  file: 'type-file',
-  function: 'type-function',
-  interface: 'type-interface',
-  method: 'type-method',
-  module: 'type-module',
-  namespace: 'type-namespace',
-  number: 'type-number',
-  package: 'type-package',
-  property: 'type-property',
-  string: 'type-string',
-  variable: 'type-variable',
-};

modules/nuclide-commons-ui/Atomicon.js

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @flow
+ * @format
+ */
+
+import * as React from 'react';
+import {capitalize} from 'nuclide-commons/string';
+import classnames from 'classnames';
+
+const TYPE_TO_CLASSNAME_SUFFIX = {
+  array: 'type-array',
+  boolean: 'type-boolean',
+  class: 'type-class',
+  constant: 'type-constant',
+  constructor: 'type-constructor',
+  enum: 'type-enum',
+  field: 'type-field',
+  file: 'type-file',
+  function: 'type-function',
+  interface: 'type-interface',
+  method: 'type-method',
+  module: 'type-module',
+  namespace: 'type-namespace',
+  number: 'type-number',
+  package: 'type-package',
+  property: 'type-property',
+  string: 'type-string',
+  variable: 'type-variable',
+};
+
+type AtomiconName = $Keys<typeof TYPE_TO_CLASSNAME_SUFFIX>;
+
+export default function Atomicon({type}: {type: AtomiconName}) {
+  const displayName = capitalize(type);
+  return (
+    <span
+      aria-label={displayName}
+      className={classnames('icon', 'icon-' + TYPE_TO_CLASSNAME_SUFFIX[type])}
+      role="presentation"
+      title={displayName}
+    />
+  );
+}