From cc13b374465dd2d0565f33efb4a7c92bd786a7c5 Mon Sep 17 00:00:00 2001
From: Pete Bacon Darwin <pete@bacondarwin.com>
Date: Wed, 7 Oct 2020 20:56:53 +0100
Subject: [PATCH] build(docs-infra): render optional decorator options with a ?
 (#39167)

Decorator API pages list all their available options in an overview
table and also in a detailed view. Now the rendered syntax of each
option will show a `?` after the name if the option is not required.
This is inline with how class and interface members are rendered.

PR Close #39167
---
 .../templates/api/decorator.template.html     | 23 +++++++++++--------
 .../api/includes/decorator-overview.html      |  2 +-
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/aio/tools/transforms/templates/api/decorator.template.html b/aio/tools/transforms/templates/api/decorator.template.html
index 4212a37166..7c24766dd6 100644
--- a/aio/tools/transforms/templates/api/decorator.template.html
+++ b/aio/tools/transforms/templates/api/decorator.template.html
@@ -12,12 +12,16 @@
   {% for option in doc.members %}
   <a id="{$ option.anchor $}"></a>
   <table class="is-full-width option-table">
-    <thead><tr><th>
-      <div class="with-github-links">
-        <h3>{$ option.name $}</h3>
-        {$ github.githubLinks(option, versionInfo) $}
-      </div>
-    </th></tr></thead>
+    <thead>
+      <tr>
+        <th>
+          <div class="with-github-links">
+            <h3>{$ option.name $}</h3>
+            {$ github.githubLinks(option, versionInfo) $}
+          </div>
+        </th>
+      </tr>
+    </thead>
     <tbody>
       <tr>
         <td>
@@ -26,8 +30,9 @@
       </tr>
       <tr>
         <td>
-          <code-example language="ts" hideCopy="true" class="no-box api-heading{% if option.deprecated %} deprecated-api-item{% endif %}">
-          {$ option.name $}: {$ option.type | escape $}
+          <code-example language="ts" hideCopy="true"
+            class="no-box api-heading{% if option.deprecated %} deprecated-api-item{% endif %}">
+            {$ option.name $}{%- if option.isOptional  %}?{% endif -%}: {$ option.type | escape $}
           </code-example>
         </td>
       </tr>
@@ -46,4 +51,4 @@
   </table>
   {% endfor %}
 </section>
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/aio/tools/transforms/templates/api/includes/decorator-overview.html b/aio/tools/transforms/templates/api/includes/decorator-overview.html
index 657a4933d1..20d20db6c4 100644
--- a/aio/tools/transforms/templates/api/includes/decorator-overview.html
+++ b/aio/tools/transforms/templates/api/includes/decorator-overview.html
@@ -10,7 +10,7 @@
     <tr class="option">
       <td>
         <a class="code-anchor" href="{$ doc.path $}#{$ option.anchor | urlencode $}">
-          <code>{$ option.name $}</code>
+          <code>{$ option.name $}{%- if option.isOptional  %}?{% endif -%}</code>
         </a>
       </td>
       <td>{$ option.shortDescription | marked $}</td>