Skip to content

Commit 3a312d9

Browse files
slorberslorber
authored
feat: Add docs-related stable classnames (facebook#5445)
1 parent 280a8ab commit 3a312d9

File tree

12 files changed

+96
-22
lines changed

12 files changed

+96
-22
lines changed

‎packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import TOCCollapsible from '@theme/TOCCollapsible';
2020
import {MainHeading} from '@theme/Heading';
2121

2222
import styles from './styles.module.css';
23+
import {ThemeClassNames} from '@docusaurus/theme-common';
2324

2425
export default function DocItem(props: Props): JSX.Element {
2526
const {content: DocContent, versionMetadata} = props;
@@ -67,19 +68,27 @@ export default function DocItem(props: Props): JSX.Element {
6768
<div className={styles.docItemContainer}>
6869
<article>
6970
{showVersionBadge && (
70-
<span className="badge badge--secondary">
71+
<span
72+
className={clsx(
73+
ThemeClassNames.docs.docVersionBadge,
74+
'badge badge--secondary',
75+
)}>
7176
Version: {versionMetadata.label}
7277
</span>
7378
)}
7479

7580
{canRenderTOC && (
7681
<TOCCollapsible
7782
toc={DocContent.toc}
78-
className={styles.tocMobile}
83+
className={clsx(
84+
ThemeClassNames.docs.docTocMobile,
85+
styles.tocMobile,
86+
)}
7987
/>
8088
)}
8189

82-
<div className="markdown">
90+
<div
91+
className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>
8392
{/*
8493
Title can be declared inside md content or declared through frontmatter and added manually
8594
To make both cases consistent, the added title is added under the same div.markdown block
@@ -98,7 +107,10 @@ export default function DocItem(props: Props): JSX.Element {
98107
</div>
99108
{renderTocDesktop && (
100109
<div className="col col--3">
101-
<TOC toc={DocContent.toc} />
110+
<TOC
111+
toc={DocContent.toc}
112+
className={ThemeClassNames.docs.docTocDesktop}
113+
/>
102114
</div>
103115
)}
104116
</div>

‎packages/docusaurus-theme-classic/src/theme/DocItemFooter/index.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,15 @@ import TagsListInline, {
1616
} from '@theme/TagsListInline';
1717

1818
import styles from './styles.module.css';
19+
import {ThemeClassNames} from '@docusaurus/theme-common';
1920

2021
function TagsRow(props: TagsListInlineProps) {
2122
return (
22-
<div className="row margin-bottom--sm">
23+
<div
24+
className={clsx(
25+
ThemeClassNames.docs.docFooterTagsRow,
26+
'row margin-bottom--sm',
27+
)}>
2328
<div className="col">
2429
<TagsListInline {...props} />
2530
</div>
@@ -38,7 +43,7 @@ function EditMetaRow({
3843
formattedLastUpdatedAt,
3944
}: EditMetaRowProps) {
4045
return (
41-
<div className="row">
46+
<div className={clsx(ThemeClassNames.docs.docFooterEditMetaRow, 'row')}>
4247
<div className="col">{editUrl && <EditThisPage editUrl={editUrl} />}</div>
4348

4449
<div className={clsx('col', styles.lastUpdated)}>
@@ -75,7 +80,8 @@ export default function DocItemFooter(props: Props): JSX.Element {
7580
}
7681

7782
return (
78-
<footer className="docusaurus-mt-lg">
83+
<footer
84+
className={clsx(ThemeClassNames.docs.docFooter, 'docusaurus-mt-lg')}>
7985
{canDisplayTagsRow && <TagsRow tags={tags} />}
8086
{canDisplayEditMetaRow && (
8187
<EditMetaRow

‎packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ function DocPageContent({
5555

5656
return (
5757
<Layout
58-
wrapperClassName={ThemeClassNames.wrapper.docPages}
58+
wrapperClassName={ThemeClassNames.wrapper.docsPages}
5959
pageClassName={ThemeClassNames.page.docsDocPage}
6060
searchMetadatas={{
6161
version,

‎packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
useAnnouncementBar,
1313
MobileSecondaryMenuFiller,
1414
MobileSecondaryMenuComponent,
15+
ThemeClassNames,
1516
} from '@docusaurus/theme-common';
1617
import useWindowSize from '@theme/hooks/useWindowSize';
1718
import useScrollPosition from '@theme/hooks/useScrollPosition';
@@ -78,7 +79,7 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}: Props) {
7879
[styles.menuWithAnnouncementBar]:
7980
!isAnnouncementBarClosed && showAnnouncementBar,
8081
})}>
81-
<ul className="menu__list">
82+
<ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
8283
<DocSidebarItems items={sidebar} activePath={path} />
8384
</ul>
8485
</nav>
@@ -93,7 +94,7 @@ const DocSidebarMobileSecondaryMenu: MobileSecondaryMenuComponent<Props> = ({
9394
path,
9495
}) => {
9596
return (
96-
<ul className="menu__list">
97+
<ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
9798
<DocSidebarItems
9899
items={sidebar}
99100
activePath={path}

‎packages/docusaurus-theme-classic/src/theme/DocSidebarItem/index.tsx

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
usePrevious,
1313
Collapsible,
1414
useCollapsible,
15+
ThemeClassNames,
1516
} from '@docusaurus/theme-common';
1617
import Link from '@docusaurus/Link';
1718
import isInternalUrl from '@docusaurus/isInternalUrl';
@@ -117,9 +118,13 @@ function DocSidebarItemCategory({
117118

118119
return (
119120
<li
120-
className={clsx('menu__list-item', {
121-
'menu__list-item--collapsed': collapsed,
122-
})}>
121+
className={clsx(
122+
ThemeClassNames.docs.docSidebarItemCategory,
123+
'menu__list-item',
124+
{
125+
'menu__list-item--collapsed': collapsed,
126+
},
127+
)}>
123128
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
124129
<a
125130
className={clsx('menu__link', {
@@ -161,7 +166,12 @@ function DocSidebarItemLink({
161166
const {href, label} = item;
162167
const isActive = isActiveSidebarItem(item, activePath);
163168
return (
164-
<li className="menu__list-item" key={label}>
169+
<li
170+
className={clsx(
171+
ThemeClassNames.docs.docSidebarItemLink,
172+
'menu__list-item',
173+
)}
174+
key={label}>
165175
<Link
166176
className={clsx('menu__link', {
167177
'menu__link--active': isActive,

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export default function DocTagDocListPage({tag}: Props): JSX.Element {
6363
return (
6464
<Layout
6565
title={title}
66-
wrapperClassName={ThemeClassNames.wrapper.docPages}
66+
wrapperClassName={ThemeClassNames.wrapper.docsPages}
6767
pageClassName={ThemeClassNames.page.docsTagDocListPage}
6868
searchMetadatas={{
6969
// assign unique search tag to exclude this page from search results!

‎packages/docusaurus-theme-classic/src/theme/DocTagsListPage/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ function DocTagsListPage({tags}: Props): JSX.Element {
2020
return (
2121
<Layout
2222
title={title}
23-
wrapperClassName={ThemeClassNames.wrapper.docPages}
23+
wrapperClassName={ThemeClassNames.wrapper.docsPages}
2424
pageClassName={ThemeClassNames.page.docsTagsListPage}
2525
searchMetadatas={{
2626
// assign unique search tag to exclude this page from search results!

‎packages/docusaurus-theme-classic/src/theme/DocVersionBanner/index.tsx

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,13 @@ import {
1414
useDocVersionSuggestions,
1515
GlobalVersion,
1616
} from '@theme/hooks/useDocs';
17-
import {useDocsPreferredVersion} from '@docusaurus/theme-common';
17+
import {
18+
ThemeClassNames,
19+
useDocsPreferredVersion,
20+
} from '@docusaurus/theme-common';
1821

1922
import type {Props} from '@theme/DocVersionBanner';
23+
import clsx from 'clsx';
2024

2125
type BannerLabelComponentProps = {
2226
siteTitle: string;
@@ -131,7 +135,12 @@ function DocVersionBannerEnabled({versionMetadata}: Props): JSX.Element {
131135
latestDocSuggestion ?? getVersionMainDoc(latestVersionSuggestion);
132136

133137
return (
134-
<div className="alert alert--warning margin-bottom--md" role="alert">
138+
<div
139+
className={clsx(
140+
ThemeClassNames.docs.docVersionBanner,
141+
'alert alert--warning margin-bottom--md',
142+
)}
143+
role="alert">
135144
<div>
136145
<BannerLabel siteTitle={siteTitle} versionMetadata={versionMetadata} />
137146
</div>

‎packages/docusaurus-theme-classic/src/theme/EditThisPage/index.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,15 @@ import Translate from '@docusaurus/Translate';
1010

1111
import type {Props} from '@theme/EditThisPage';
1212
import IconEdit from '@theme/IconEdit';
13+
import {ThemeClassNames} from '@docusaurus/theme-common';
1314

1415
export default function EditThisPage({editUrl}: Props): JSX.Element {
1516
return (
16-
<a href={editUrl} target="_blank" rel="noreferrer noopener">
17+
<a
18+
href={editUrl}
19+
target="_blank"
20+
rel="noreferrer noopener"
21+
className={ThemeClassNames.common.editThisPage}>
1722
<IconEdit />
1823
<Translate
1924
id="theme.common.editThisPage"

‎packages/docusaurus-theme-classic/src/theme/LastUpdated/index.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
import React from 'react';
99
import Translate from '@docusaurus/Translate';
1010
import type {Props} from '@theme/LastUpdated';
11+
import {ThemeClassNames} from '@docusaurus/theme-common';
1112

1213
function LastUpdatedAtDate({
1314
lastUpdatedAt,
@@ -57,7 +58,7 @@ export default function LastUpdated({
5758
lastUpdatedBy,
5859
}: Props): JSX.Element {
5960
return (
60-
<>
61+
<span className={ThemeClassNames.common.lastUpdated}>
6162
<Translate
6263
id="theme.lastUpdated.lastUpdatedAtBy"
6364
description="The sentence used to display when a page has been last updated, and by who"
@@ -84,6 +85,6 @@ export default function LastUpdated({
8485
<small> (Simulated during dev for better perf)</small>
8586
</div>
8687
)}
87-
</>
88+
</span>
8889
);
8990
}

0 commit comments

Comments
 (0)