content/static: deprecated symbols ui updates

Deprecated symbol sections are updated to match UX design. Deprecated sections will expand when navigated to from the index or a direct link. For golang/go#40850 Change-Id: I2108a28d8a4c1655fcad414a239f46605a725673 Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/323969 Trust: Jamal Carvalho <jamal@golang.org> Run-TryBot: Jamal Carvalho <jamal@golang.org> TryBot-Result: kokoro <noreply+kokoro@google.com> Reviewed-by: Jonathan Amsterdam <jba@google.com>
golang · Jun 1, 2021 · b5f5aef · b5f5aef
1 parent 7ed6ba0
commit b5f5aef
Show file tree

Hide file tree

Showing 9 changed files with 216 additions and 91 deletions.
diff --git a/content/static/css/stylesheet.css b/content/static/css/stylesheet.css
@@ -28,6 +28,7 @@
   --slate: #253443; /* Footer background. */
   --white: #fff;
   --yellow: #fddd00;
+  --yellow-light: #fff8cc;
 
   --header-height: 3.5rem;
 }

diff --git a/content/static/css/unit_doc.css b/content/static/css/unit_doc.css
@@ -299,28 +299,50 @@
 }
 
 .Documentation-indexDeprecated {
-  color: var(--gray-3);
-  font-size: 0.875rem;
-  font-style: italic;
   margin-left: 0.5rem;
 }
 .Documentation-deprecatedBody {
   color: var(--gray-3);
-  font-size: 1rem;
-  font-style: italic;
+  font-size: 0.875rem;
   font-weight: 400;
-  margin-left: 0.5rem;
+  margin-left: 0.25rem;
   margin-right: 0.5rem;
 }
+.Documentation-deprecatedTag {
+  background-color: var(--gray-6);
+  border-radius: 0.125rem;
+  color: var(--white);
+  font-size: 0.75rem;
+  font-weight: normal;
+  line-height: 1.375;
+  padding: 0.125rem 0.25rem;
+  text-transform: uppercase;
+  vertical-align: middle;
+}
+.Documentation-deprecatedTitle {
+  align-items: center;
+  display: flex;
+  gap: 0.5rem;
+}
+.Documentation-deprecatedDetails {
+  color: var(--gray-4);
+}
+.Documentation-deprecatedDetails a {
+  color: var(--gray-4);
+}
+.Documentation-deprecatedDetails[open] {
+  color: var(--gray-1);
+}
+.Documentation-deprecatedDetails[open] a {
+  color: var(--turq-dark);
+}
 .Documentation-deprecatedDetails .Documentation-deprecatedBody::after {
   color: var(--turq-dark);
   content: 'Show';
-  margin-left: 1rem;
 }
 .Documentation-deprecatedDetails[open] .Documentation-deprecatedBody::after {
   color: var(--turq-dark);
   content: 'Hide';
-  margin-left: 1rem;
 }
 .Documentation-deprecatedDetails > summary {
   list-style: none;
@@ -329,3 +351,13 @@
 .Documentation-deprecatedDetails .Documentation-source {
   opacity: 1;
 }
+.Documentation-deprecatedItemBody {
+  background-color: var(--yellow-light);
+  padding: 1rem 1rem 0.5rem 1rem;
+}
+.Documentation-deprecatedMessage {
+  align-items: center;
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
diff --git a/content/static/html/doc/body.tmpl b/content/static/html/doc/body.tmpl
@@ -21,41 +21,36 @@
 
       {{- range .Funcs -}}
       <li class="Documentation-indexFunction">
-        <a href="#{{.Name}}">{{render_synopsis .Decl}}</a>
+        <a {{if .IsDeprecated}}class="js-deprecatedTagLink" {{end}}href="#{{.Name}}">{{render_synopsis .Decl}}</a>
         {{- if .IsDeprecated -}}
-          <span class="Documentation-indexDeprecated">deprecated</span>
+          <span class="Documentation-indexDeprecated Documentation-deprecatedTag">deprecated</span>
         {{- end -}}
       </li>{{"\n"}}
       {{- end -}}
 
       {{- range .Types -}}
         {{- $tname := .Name -}}
-        <li class="Documentation-indexType"><a href="#{{$tname}}">type {{$tname}}</a>
-        {{- if .IsDeprecated -}}
-          <span class="Documentation-indexDeprecated">deprecated</span>
-        {{- end -}}
-	</li>{{"\n"}}
+        <li class="Documentation-indexType">
+          <a {{if .IsDeprecated}}class="js-deprecatedTagLink" {{end}}href="#{{$tname}}">type {{$tname}}</a>
+          {{- if .IsDeprecated -}}
+            <span class="Documentation-indexDeprecated Documentation-deprecatedTag">deprecated</span>
+          {{- end -}}
+        </li>{{"\n"}}
         {{- with .Funcs -}}
-          <li><ul class="Documentation-indexTypeFunctions">{{"\n" -}}
-          {{range .}}
-	    <li><a href="#{{.Name}}">{{render_synopsis .Decl}}</a>
+          <li><ul class="Documentation-indexTypeFunctions">{{"\n" -}}{{- range . -}}<li>
+            <a {{if .IsDeprecated}}class="js-deprecatedTagLink" {{end}}href="#{{.Name}}">{{render_synopsis .Decl}}</a>
             {{- if .IsDeprecated -}}
-              <span class="Documentation-indexDeprecated">deprecated</span>
+              <span class="Documentation-indexDeprecated Documentation-deprecatedTag">deprecated</span>
             {{- end -}}
-	    </li>{{"\n"}}
-	  {{end}}
-          </ul></li>{{"\n" -}}
+          </li>{{"\n"}}{{- end -}}</ul></li>{{"\n" -}}
         {{- end -}}
         {{- with .Methods -}}
-          <li><ul class="Documentation-indexTypeMethods">{{"\n" -}}
-          {{range .}}
-	    <li><a href="#{{$tname}}.{{.Name}}">{{render_synopsis .Decl}}</a>
+          <li><ul class="Documentation-indexTypeMethods">{{"\n" -}}{{range .}}<li>
+            <a {{if .IsDeprecated}}class="js-deprecatedTagLink" {{end}}href="#{{$tname}}.{{.Name}}">{{render_synopsis .Decl}}</a>
             {{- if .IsDeprecated -}}
-              <span class="Documentation-indexDeprecated">deprecated</span>
+              <span class="Documentation-indexDeprecated Documentation-deprecatedTag">deprecated</span>
             {{- end -}}
-	    </li>{{"\n"}}
-	  {{end}}
-          </ul></li>{{"\n" -}}
+          </li>{{"\n"}}{{end}}</ul></li>{{"\n" -}}
         {{- end -}}
       {{- end -}}
 
@@ -145,17 +140,24 @@
 {{define "item"}}
   {{$id := safe_id .FullName}}
   {{if .IsDeprecated}}
-    <details class="Documentation-deprecatedDetails">
+    <details class="Documentation-deprecatedDetails js-deprecatedDetails">
       <summary>
         <h4 tabindex="-1" id="{{$id}}" data-kind="{{.Kind}}" class="{{.HeaderClass}}">
-          <span>
-            {{.HeaderStart}} {{source_link .Name .Decl}} <a class="Documentation-idLink" href="#{{$id}}">¶</a>
-              <span class="Documentation-deprecatedBody">deprecated</span>
+          <span class="Documentation-deprecatedTitle">
+            {{.HeaderStart}} {{source_link .Name .Decl}}
+            <span class="Documentation-deprecatedTag">deprecated</span>
+            <span class="Documentation-deprecatedBody"></span>
           </span>
           {{- template "since_version" .FullName -}}
         </h4>{{"\n"}}
       </summary>
-      {{template "item_body" .}}
+      <div class="Documentation-deprecatedItemBody">
+        <div class="Documentation-deprecatedMessage">
+          <img class="go-Icon" height="24" width="24" src="/static/icon/alert_gm_grey_24dp.svg" alt="">
+          This {{.Kind}} has been deprecated.
+        </div>
+        {{template "item_body" .}}
+      </div>
     </details>
   {{else}}
     <h4 tabindex="-1" id="{{$id}}" data-kind="{{.Kind}}" class="{{.HeaderClass}}">

diff --git a/content/static/js/unit.js b/content/static/js/unit.js