build(aio): compute and display short descriptions in methods (#22583)

Previously only export docs were displaying a short description.
Now methods in classes and interfaces also compute and render
the short description.

Closes #22500

PR Close #22583

aio/tools/transforms/angular-api-package/index.js

@@ -94,7 +94,7 @@ module.exports = new Package('angular-api', [basePackage, typeScriptPackage])
 
   .config(function(splitDescription, EXPORT_DOC_TYPES) {
     // Only split the description on the API docs
-    splitDescription.docTypes = EXPORT_DOC_TYPES;
+    splitDescription.docTypes = EXPORT_DOC_TYPES.concat(['member', 'function-overload']);
   })
 
   .config(function(computePathsProcessor, EXPORT_DOC_TYPES, generateApiListDoc) {
@@ -130,6 +130,6 @@ module.exports = new Package('angular-api', [basePackage, typeScriptPackage])
     ]);
     convertToJsonProcessor.docTypes = convertToJsonProcessor.docTypes.concat(DOCS_TO_CONVERT);
     postProcessHtml.docTypes = convertToJsonProcessor.docTypes.concat(DOCS_TO_CONVERT);
-    autoLinkCode.docTypes = DOCS_TO_CONVERT.concat(['member']);
+    autoLinkCode.docTypes = DOCS_TO_CONVERT.concat(['member', 'function-overload']);
     autoLinkCode.codeElements = ['code', 'code-example', 'code-pane'];
   });

aio/tools/transforms/templates/api/lib/memberHelpers.html

@@ -38,10 +38,14 @@
 {%- endmacro -%}
 
 {%- macro renderOverloadInfo(overload, cssClass, method) -%}
-  {% if overload.description and (overload.description != method.description) %}{$ overload.description | marked $}{% endif %}
 
 <code-example language="ts" hideCopy="true" class="no-box api-heading">{$ renderMemberSyntax(overload) $}</code-example>
 
+{% if overload.shortDescription and (overload.shortDescription != method.shortDescription) %}
+<div class="short-description">
+  {$ overload.shortDescription | marked $}
+</div>{% endif %}
+
 <h4 class="no-anchor">Parameters</h4>
 {$ params.renderParameters(overload.parameterDocs, cssClass + '-parameters', cssClass + '-parameter') $}
 
@@ -50,12 +54,19 @@
 {% marked %}`{$ (overload.type or overload.returns.type) $}`{% if overload.returns %}: {$ overload.returns.description $}{% endif %}{% endmarked %}
 {% endif %}
 
+
 {% if overload.throws.length %}
 <h4 class="no-anchor">Throws</h4>
 {% for error in overload.throws %}
 {% marked %}`{$ (error.typeList or 'Error') $}` {$ error.description $}{% endmarked %}
 {% endfor %}
 {% endif %}
+
+{% if overload.description and (overload.description != method.description) -%}
+<div class="description">
+  {$ overload.description | marked $}
+</div>
+{%- endif %}
 {%- endmacro -%}
 
 {%- macro renderMethodDetail(method, cssClass) -%}
@@ -68,9 +79,9 @@
     {% endif %}
   </h3></th></tr></thead>{% endif %}
   <tbody>
-    {% if method.description %}<tr>
+    {% if method.shortDescription %}<tr>
-      <td>
+      <td class="short-description">
-        {$ method.description | marked $}
+        {$ method.shortDescription | marked $}
       </td>
     </tr>{% endif %}
   {% if method.overloads.length == 0 %}
@@ -102,6 +113,11 @@
       </td>
     </tr>
   {% endif %}
+  {% if method.description %}<tr>
+      <td class="description">
+        {$ method.description | marked $}
+      </td>
+    </tr>{% endif %}
   </tbody>
 </table>
 {% endmacro -%}
@@ -135,6 +151,7 @@
         <td><label class="property-type-label"><code>{$ property.type | escape $}</code></label></td>
         <td>
           {%- if (property.isGetAccessor or property.isReadonly) and not property.isSetAccessor %}<span class='read-only-property'>Read-only.</span>{% endif %}
+          {% if property.shortDescription %}{$ property.shortDescription | marked $}{% endif %}
           {$ (property.description or property.constructorParamDoc.description) | marked $}
           {% if property.constructorParamDoc %} <span class='from-constructor'>Declared in constructor.</span>{% endif %}
         </td>