docs(docs-infra): Add a deprecated label to APIs (#50287)

JeanMeche · AndrewKushnir · commit 3e025d9d3b5d · 2023-05-15T09:31:00.000-07:00
This adds a deprecated label next to the other labels on the API pages for methods & properties. Fixes #44265 PR Close #50287
diff --git a/aio/src/styles/2-modules/label/_label.scss b/aio/src/styles/2-modules/label/_label.scss
@@ -9,6 +9,7 @@ label.api-status-label {
   margin-right: 8px;
   font-weight: 500;
   text-transform: uppercase;
+  line-height: initial;
 
   @media screen and (max-width: 600px) {
     display: block;
diff --git a/aio/tools/transforms/templates/api/lib/memberHelpers.html b/aio/tools/transforms/templates/api/lib/memberHelpers.html
@@ -83,7 +83,7 @@ <h6 class="no-anchor">Throws</h6>
   {%- if method.name !== 'constructor' %}
   <thead><tr><th>
     <div class="with-github-links">
-      <h3>
+      <h3 {% if method.deprecated %} class="deprecated-api-item"{% endif %}>
         {%- if method.isCallMember %}<i>call signature</i>
         {%- elseif method.isNewMember %}<i>construct signature</i>
         {%- else %}{$ method.name $}()
@@ -94,6 +94,9 @@ <h3>
         <a href="guide/releases#developer-preview">developer preview</a>
       </label>
       {% endif %}
+      {%- if method.deprecated %}
+      <label class="api-status-label deprecated" title="This API is deprecated">Deprecated</label>
+      {% endif %}
       {$ github.githubLinks(method, versionInfo) $}
     </div>
   </th></tr></thead>
@@ -231,6 +234,9 @@ <h2>{$ headingText $}</h2>
             <a href="guide/releases#developer-preview">developer preview</a>
           </label>
           {% endif %}
+          {%- if property.deprecated %}
+          <label class="api-status-label deprecated" title="This API is deprecated">Deprecated</label>
+          {% endif %}
 
           {%- if (property.isGetAccessor or property.isReadonly) and not property.isSetAccessor %}
           <span class='read-only-property'>Read-Only</span>{% endif %}
