From e80e43d0a3f53674a4ee98e3869007cc1533eec6 Mon Sep 17 00:00:00 2001
From: Matthieu Riegler <kyro38@gmail.com>
Date: Sun, 14 May 2023 11:10:38 +0200
Subject: [PATCH] docs(docs-infra): Add a deprecated label to APIs

This adds a deprecated label next to the other labels on the API pages for methods & properties.

Fixes #44265
---
 aio/src/styles/2-modules/label/_label.scss                | 1 +
 aio/tools/transforms/templates/api/lib/memberHelpers.html | 8 +++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/aio/src/styles/2-modules/label/_label.scss b/aio/src/styles/2-modules/label/_label.scss
index af806d4bebebd..c8466ccd8719e 100644
--- 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
index b416644ccca40..13531666b512d 100644
--- 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 %}