refactor: various tags improvements (#5386)

* refactor: various tags improvements

* Fixes after review

* Better styling with Infima

packages/docusaurus-theme-classic/src/theme/DocTagDocListPage/index.tsx

@@ -14,7 +14,7 @@ import type {
   PropTagDocList,
   PropTagDocListDoc,
 } from '@docusaurus/plugin-content-docs-types';
-import {translate} from '@docusaurus/Translate';
+import Translate, {translate} from '@docusaurus/Translate';
 
 type Props = {
   tag: PropTagDocList;
@@ -40,12 +40,12 @@ function useNDocsTaggedPlural() {
 
 function DocItem({doc}: {doc: PropTagDocListDoc}): JSX.Element {
   return (
-    <div className="margin-vert--lg">
+    <article className="margin-vert--lg">
       <Link to={doc.permalink}>
         <h2>{doc.title}</h2>
       </Link>
       {doc.description && <p>{doc.description}</p>}
-    </div>
+    </article>
   );
 }
 
@@ -74,13 +74,19 @@ export default function DocTagDocListPage({tag}: Props): JSX.Element {
           <main className="col col--8 col--offset-2">
             <header className="margin-bottom--xl">
               <h1>{title}</h1>
-              <Link href={tag.allTagsPath}>View All Tags</Link>
+              <Link href={tag.allTagsPath}>
+                <Translate
+                  id="theme.tags.tagsPageLink"
+                  description="The label of the link targeting the tag list page">
+                  View All Tags
+                </Translate>
+              </Link>
             </header>
-            <div className="margin-vert--lg">
+            <section className="margin-vert--lg">
               {tag.docs.map((doc) => (
                 <DocItem key={doc.id} doc={doc} />
               ))}
-            </div>
+            </section>
           </main>
         </div>
       </div>

packages/docusaurus-theme-classic/src/theme/Tag/index.tsx

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import type {Props} from '@theme/Tag';
+
+import styles from './styles.module.css';
+
+function Tag(props: Props): JSX.Element {
+  const {permalink, name, count} = props;
+
+  return (
+    <Link
+      href={permalink}
+      className={clsx(styles.tag, {
+        [styles.tagRegular]: !count,
+        [styles.tagWithCount]: count,
+      })}>
+      {name}
+      {count && <span>{count}</span>}
+    </Link>
+  );
+}
+
+export default Tag;

packages/docusaurus-theme-classic/src/theme/Tag/styles.module.css

@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+:root {
+  --docusaurus-tag-list-border: var(--ifm-color-emphasis-300);
+}
+
+.tag {
+  border: 1px solid var(--docusaurus-tag-list-border);
+  transition: border var(--ifm-transition-fast);
+}
+
+.tag:hover {
+  --docusaurus-tag-list-border: var(--ifm-link-color);
+  text-decoration: none;
+}
+
+.tagRegular {
+  border-radius: 0.5rem;
+  padding: 0.3rem 0.5rem;
+  font-size: 90%;
+}
+
+.tagWithCount {
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 0 0.5rem 0 1rem;
+  border-left: 0;
+}
+
+.tagWithCount:before,
+.tagWithCount:after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  border: 1px solid var(--docusaurus-tag-list-border);
+  transition: inherit;
+}
+
+.tagWithCount:before {
+  right: 100%;
+  transform: translate(50%, -50%) rotate(-45deg);
+  width: 1.18rem;
+  height: 1.18rem;
+  border-right: 0;
+  border-bottom: 0;
+}
+
+.tagWithCount:after {
+  left: 0;
+  transform: translateY(-50%);
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+}
+
+.tagWithCount span {
+  background: var(--ifm-color-secondary);
+  color: var(--ifm-color-black);
+  font-size: 0.7rem;
+  line-height: 1.2;
+  border-radius: var(--ifm-global-radius);
+  padding: 0.1rem 0.4rem;
+  margin-left: 0.3rem;
+}

packages/docusaurus-theme-classic/src/theme/TagsListByLetter/index.tsx

@@ -6,24 +6,25 @@
  */
 
 import React from 'react';
-import Link from '@docusaurus/Link';
+import Tag from '@theme/Tag';
 import type {Props} from '@theme/TagsListByLetter';
 import {listTagsByLetters, TagLetterEntry} from '@docusaurus/theme-common';
 
+import styles from './styles.module.css';
+
 function TagLetterEntryItem({letterEntry}: {letterEntry: TagLetterEntry}) {
   return (
-    <div>
+    <article>
       <h2>{letterEntry.letter}</h2>
-      {letterEntry.tags.map((tag) => (
-        <Link
-          className="padding-right--md"
-          href={tag.permalink}
-          key={tag.permalink}>
-          {tag.name} ({tag.count})
-        </Link>
-      ))}
+      <ul className="padding--none">
+        {letterEntry.tags.map((tag) => (
+          <li key={tag.permalink} className={styles.tag}>
+            <Tag {...tag} />
+          </li>
+        ))}
+      </ul>
       <hr />
-    </div>
+    </article>
   );
 }
 

packages/docusaurus-theme-classic/src/theme/TagsListByLetter/styles.module.css

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.tag {
+  display: inline-block;
+  margin: 0.5rem 0.5rem 0 1rem;
+}

packages/docusaurus-theme-classic/src/theme/TagsListInline/index.tsx

@@ -6,10 +6,13 @@
  */
 
 import React from 'react';
-import Link from '@docusaurus/Link';
+import clsx from 'clsx';
 import Translate from '@docusaurus/Translate';
+import Tag from '@theme/Tag';
 import type {Props} from '@theme/TagsListInline';
 
+import styles from './styles.module.css';
+
 export default function TagsListInline({tags}: Props) {
   return (
     <>
@@ -20,11 +23,13 @@ export default function TagsListInline({tags}: Props) {
           Tags:
         </Translate>
       </b>
-      {tags.map(({label, permalink: tagPermalink}) => (
-        <Link key={tagPermalink} className="margin-horiz--sm" to={tagPermalink}>
-          {label}
-        </Link>
-      ))}
+      <ul className={clsx(styles.tags, 'padding--none', 'margin-left--sm')}>
+        {tags.map(({label, permalink: tagPermalink}) => (
+          <li key={tagPermalink} className={styles.tag}>
+            <Tag name={label} permalink={tagPermalink} />
+          </li>
+        ))}
+      </ul>
     </>
   );
 }

packages/docusaurus-theme-classic/src/theme/TagsListInline/styles.module.css

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.tags {
+  list-style: none;
+  display: inline-flex;
+}
+
+.tag {
+  margin-right: 0.4rem;
+}

packages/docusaurus-theme-classic/src/types.d.ts

@@ -723,3 +723,11 @@ declare module '@theme/TagsListInline' {
   }>;
   export default function TagsListInline(props: Props): JSX.Element;
 }
+
+declare module '@theme/Tag' {
+  import type {TagsListItem} from '@theme/TagsListByLetter';
+
+  export type Props = Optional<TagsListItem, 'count'>;
+
+  export default function Tag(props: Props): JSX.Element;
+}