From f8e820af2e3ff1adb4845650e3bd203f7fb8beca Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 8 Jan 2024 13:56:02 +0100 Subject: [PATCH] [docs-infra] Fix anchor links in API pages (#40450) Co-authored-by: alexandre --- docs/src/modules/components/ApiPage.js | 2 +- .../components/ApiPage/list/ClassesList.tsx | 12 +++++++----- .../components/ApiPage/list/PropertiesList.tsx | 13 +++++++------ .../modules/components/ApiPage/list/SlotsList.tsx | 14 +++++++------- .../ApiPage/sections/PropertiesSection.js | 8 ++++---- .../components/ApiPage/sections/SlotsSection.tsx | 5 ++--- .../components/ApiPage/table/PropertiesTable.tsx | 4 ++-- .../src/modules/components/ComponentsApiContent.js | 2 +- 8 files changed, 31 insertions(+), 29 deletions(-) diff --git a/docs/src/modules/components/ApiPage.js b/docs/src/modules/components/ApiPage.js index 4eda17e5298d4f..568496a14bf8ce 100644 --- a/docs/src/modules/components/ApiPage.js +++ b/docs/src/modules/components/ApiPage.js @@ -255,7 +255,7 @@ export default function ApiPage(props) { {cssComponent && ( diff --git a/docs/src/modules/components/ApiPage/list/ClassesList.tsx b/docs/src/modules/components/ApiPage/list/ClassesList.tsx index f4ddc361e5e649..45136bd89b2333 100644 --- a/docs/src/modules/components/ApiPage/list/ClassesList.tsx +++ b/docs/src/modules/components/ApiPage/list/ClassesList.tsx @@ -1,6 +1,7 @@ /* eslint-disable react/no-danger */ import * as React from 'react'; import { styled } from '@mui/material/styles'; +import kebabCase from 'lodash/kebabCase'; import { ComponentClassDefinition } from '@mui-internal/docs-utilities'; import { useTranslate } from 'docs/src/modules/utils/i18n'; import ExpandableApiItem, { @@ -34,17 +35,18 @@ const StyledApiItem = styled(ExpandableApiItem)( }), ); +type HashParams = { componentName: string; className: string }; + +export function getHash({ componentName, className }: HashParams) { + return `${kebabCase(componentName)}-classes-${className}`; +} + type ClassesListProps = { componentName: string; classes: ComponentClassDefinition[]; displayOption: 'collapsed' | 'expanded'; displayClassKeys?: boolean; }; -type HashParams = { componentName?: string; className: string }; - -export function getHash({ componentName, className }: HashParams) { - return `${componentName ? `${componentName}-` : ''}classes-${className}`; -} export default function ClassesList(props: ClassesListProps) { const { classes, displayOption, componentName, displayClassKeys } = props; diff --git a/docs/src/modules/components/ApiPage/list/PropertiesList.tsx b/docs/src/modules/components/ApiPage/list/PropertiesList.tsx index e232a180ba023f..934640aa20a671 100644 --- a/docs/src/modules/components/ApiPage/list/PropertiesList.tsx +++ b/docs/src/modules/components/ApiPage/list/PropertiesList.tsx @@ -3,6 +3,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Alert from '@mui/material/Alert'; import WarningRoundedIcon from '@mui/icons-material/WarningRounded'; +import kebabCase from 'lodash/kebabCase'; import { useTranslate } from 'docs/src/modules/utils/i18n'; import { brandingDarkTheme as darkTheme, @@ -99,12 +100,12 @@ function PropDescription(props: { description: string }) { } export function getHash({ - targetName, + componentName, propName, hooksParameters, hooksReturnValue, }: { - targetName: string; + componentName: string; propName: string; hooksParameters?: boolean; hooksReturnValue?: boolean; @@ -115,11 +116,11 @@ export function getHash({ } else if (hooksReturnValue) { sectionName = 'return-value'; } - return `${targetName ? `${targetName}-` : ''}${sectionName}-${propName}`; + return `${kebabCase(componentName)}-${sectionName}-${propName}`; } export interface PropDescriptionParams { - targetName: string; + componentName: string; propName: string; description?: string; requiresRef?: string; @@ -149,7 +150,7 @@ export default function PropertiesList(props: PropertiesListProps) { {properties.map((params) => { const { - targetName, + componentName, propName, description, requiresRef, @@ -169,7 +170,7 @@ export default function PropertiesList(props: PropertiesListProps) { return ( propData.description !== '@ignore') .map(([propName]) => ({ text: propName, - hash: getHash({ propName, targetName: componentName }), + hash: getHash({ propName, componentName }), children: [], })), ...(inheritance @@ -43,7 +43,7 @@ export default function PropertiesSection(props) { const { properties, propertiesDescriptions, - targetName = '', + componentName = '', showOptionalAbbr = false, title = 'api-docs.props', titleHash = 'props', @@ -87,7 +87,7 @@ export default function PropertiesSection(props) { propertiesDescriptions[propName].typeDescriptions[propData.signature.returned]; return { - targetName, + componentName, propName, description: propDescription?.description, requiresRef: propDescription?.requiresRef, @@ -135,6 +135,7 @@ export default function PropertiesSection(props) { } PropertiesSection.propTypes = { + componentName: PropTypes.string, hooksParameters: PropTypes.bool, hooksReturnValue: PropTypes.bool, level: PropTypes.string, @@ -142,7 +143,6 @@ PropertiesSection.propTypes = { propertiesDescriptions: PropTypes.object.isRequired, showOptionalAbbr: PropTypes.bool, spreadHint: PropTypes.string, - targetName: PropTypes.string, title: PropTypes.string, titleHash: PropTypes.string, }; diff --git a/docs/src/modules/components/ApiPage/sections/SlotsSection.tsx b/docs/src/modules/components/ApiPage/sections/SlotsSection.tsx index 00a2245f6b69c2..966f578855f484 100644 --- a/docs/src/modules/components/ApiPage/sections/SlotsSection.tsx +++ b/docs/src/modules/components/ApiPage/sections/SlotsSection.tsx @@ -12,7 +12,7 @@ import SlotsTable from 'docs/src/modules/components/ApiPage/table/SlotsTable'; export type SlotsSectionProps = { componentSlots: { class: string; name: string; default: string }[]; slotDescriptions: { [key: string]: string }; - componentName?: string; + componentName: string; title?: string; titleHash?: string; level?: 'h2' | 'h3' | 'h4'; @@ -38,9 +38,8 @@ export default function SlotsSection(props: SlotsSectionProps) { } const formatedSlots = componentSlots?.map(({ class: className, name, default: defaultValue }) => { - const description = slotDescriptions[name]; return { - description, + description: slotDescriptions[name], className, name, defaultValue, diff --git a/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx b/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx index 12db811303764d..88e11d4a2d7021 100644 --- a/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx +++ b/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx @@ -180,7 +180,7 @@ export default function PropertiesTable(props: PropertiesTableProps) { {properties.map((params) => { const { - targetName, + componentName, propName, description, requiresRef, @@ -201,7 +201,7 @@ export default function PropertiesTable(props: PropertiesTableProps) { return ( {propName} diff --git a/docs/src/modules/components/ComponentsApiContent.js b/docs/src/modules/components/ComponentsApiContent.js index 6e0031494cb80c..d76390a243fd48 100644 --- a/docs/src/modules/components/ComponentsApiContent.js +++ b/docs/src/modules/components/ComponentsApiContent.js @@ -146,7 +146,7 @@ export default function ComponentsApiContent(props) {