From 46729c76a0e8afd74ec67d0be6729790cb322bcb Mon Sep 17 00:00:00 2001
From: Pete Bacon Darwin <pete@bacondarwin.com>
Date: Wed, 19 Sep 2018 14:28:23 +0100
Subject: [PATCH] build(docs-infra): improve directive selector rendering
 (#25768)

If the documentation contains a `@selectors` tag then the content of that
is used to describe the selectors of a directive.

Otherwise the selector string is split and each selector is listed as
a list item in an unordered list.

PR Close #25768
---
 aio/src/styles/2-modules/_api-pages.scss      |  9 +++++++
 .../angular-api-package/tag-defs/selectors.js |  3 +++
 .../templates/api/includes/selectors.html     | 25 ++++++++-----------
 3 files changed, 22 insertions(+), 15 deletions(-)
 create mode 100644 aio/tools/transforms/angular-api-package/tag-defs/selectors.js

diff --git a/aio/src/styles/2-modules/_api-pages.scss b/aio/src/styles/2-modules/_api-pages.scss
index e664178343..4f304e32bb 100644
--- a/aio/src/styles/2-modules/_api-pages.scss
+++ b/aio/src/styles/2-modules/_api-pages.scss
@@ -116,6 +116,15 @@
   .ngmodule-list {
     list-style: none;
     padding: 0;
+
+  .selector-list {
+    ul {
+      padding: 0;
+      li {
+        list-style: none;
+        margin-bottom: 12px;
+      }
+    }
   }
 }
 
diff --git a/aio/tools/transforms/angular-api-package/tag-defs/selectors.js b/aio/tools/transforms/angular-api-package/tag-defs/selectors.js
new file mode 100644
index 0000000000..e80cbf18af
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/tag-defs/selectors.js
@@ -0,0 +1,3 @@
+module.exports = function() {
+  return {name: 'selectors'};
+};
diff --git a/aio/tools/transforms/templates/api/includes/selectors.html b/aio/tools/transforms/templates/api/includes/selectors.html
index c28f0ed9d9..f0787340dd 100644
--- a/aio/tools/transforms/templates/api/includes/selectors.html
+++ b/aio/tools/transforms/templates/api/includes/selectors.html
@@ -1,19 +1,14 @@
 {%- if doc.selector %}
-<section class="selectors">
+<section class="selector-list">
   <h2>Selectors</h2>
-  <table class="is-full-width list-table selector-table">
-      <thead>
-        <tr>
-          <th>Selector</th>
-        </tr>
-      </thead>
-      <tbody>
-      {%- for selector in doc.selectorArray %}
-      <tr class="selector">
-        <td><code>{$ selector $}</code></td>
-      </tr>
-      {% endfor %}
-    </tbody>
-  </table>
+  {% if doc.selectors %}
+    {$ doc.selectors | marked $}
+  {% else %}
+  <ul>
+    {%- for selector in doc.selectorArray %}
+    <li><code>{$ selector $}</code></li>
+    {% endfor %}
+  </ul>
+  {% endif %}
 </section>
 {% endif %}