Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[docs-infra] Make the whole header clickable #39603

Merged
merged 12 commits into from
Apr 12, 2024
Merged

[docs-infra] Make the whole header clickable #39603

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
51fa8fd
clickable header
MoazMirza-13 Oct 25, 2023
86cdcce
parseMarkdown.test.js
MoazMirza-13 Oct 25, 2023
2fbf124
ci tests
MoazMirza-13 Oct 25, 2023
4fecc84
testing checks
MoazMirza-13 Oct 25, 2023
549402b
requested changes
MoazMirza-13 Oct 27, 2023
d3b8e70
svg dark mode bug fix
MoazMirza-13 Oct 28, 2023
9b80a58
Merge remote-tracking branch 'upstream/next' into issue#39350-header-…
alexfauquette Apr 4, 2024
88f1128
rework the naming
alexfauquette Apr 5, 2024
96f2156
addapt API sections
alexfauquette Apr 5, 2024
e506793
fix test
alexfauquette Apr 8, 2024
eeccac5
bump up the anchor spacing a bit
danilo-leal Apr 11, 2024
2e79c3a
trigger ci
alexfauquette Apr 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions docs/src/modules/components/MarkdownElement.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,26 @@ const Root = styled('div')(
color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
margin: '40px 0 4px',
},
'& .h2-heading': {
danilo-leal marked this conversation as resolved.
Show resolved Hide resolved
color: 'inherit',
textDecoration: 'none',
position: 'relative',
display: 'flex',
alignItems: 'center',
},

'& .h2-heading svg': {
display: 'none',
height: '0.6rem',
width: '2rem',
},

'& .h2-heading:hover svg': {
display: 'inline-block',
},
[`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) & .h2-heading svg`]: {
fill: 'white',
},
danilo-leal marked this conversation as resolved.
Show resolved Hide resolved
'& h3': {
...lightTheme.typography.h6,
fontFamily: `"General Sans", ${lightTheme.typography.fontFamilySystem}`,
Expand Down
5 changes: 1 addition & 4 deletions packages/markdown/parseMarkdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -348,10 +348,7 @@ function createRender(context) {

return [
`<h${level} id="${hash}">`,
headingHtml,
`<a aria-labelledby="${hash}" class="anchor-link" href="#${hash}" tabindex="-1">`,
'<svg><use xlink:href="#anchor-link-icon" /></svg>',
'</a>',
`<a href="#${hash}" class="h2-heading">${headingHtml}<svg><use xlink:href="#anchor-link-icon" /></svg></a>`,
danilo-leal marked this conversation as resolved.
Show resolved Hide resolved
`<button title="Post a comment" class="comment-link" data-feedback-hash="${hash}">`,
'<svg><use xlink:href="#comment-link-icon" /></svg>',
`</button>`,
Expand Down
2 changes: 1 addition & 1 deletion packages/markdown/parseMarkdown.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -295,7 +295,7 @@ authors:
).to.equal(
[
`<h1>Accordion</h1>`,
`<h2 id="basic-features">Basic features 🧪<a aria-labelledby="basic-features" class="anchor-link" href="#basic-features" tabindex="-1"><svg><use xlink:href="#anchor-link-icon" /></svg></a><button title="Post a comment" class="comment-link" data-feedback-hash="basic-features"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2>`,
`<h2 id="basic-features"><a href="#basic-features" class="h2-heading">Basic features 🧪<button title="Post a comment" class="comment-link" data-feedback-hash="basic-features"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2>`,
`<h2 id="using-slots-and-slotprops">Using <code>slots</code> and <code>slotProps</code><a aria-labelledby="using-slots-and-slotprops" class="anchor-link" href="#using-slots-and-slotprops" tabindex="-1"><svg><use xlink:href="#anchor-link-icon" /></svg></a><button title="Post a comment" class="comment-link" data-feedback-hash="using-slots-and-slotprops"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2>`,
`<h3 id="specific-example">Specific example<a aria-labelledby="specific-example" class="anchor-link" href="#specific-example" tabindex="-1"><svg><use xlink:href="#anchor-link-icon" /></svg></a><button title="Post a comment" class="comment-link" data-feedback-hash="specific-example"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3>`,
].join(''),
Expand Down
Loading