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

Sorry for the delay, My comments were in pending state since few days I don't know why 🫣

Basically tests are not an issue, we can fix them after agreeing on the new DOM structure 👍

@alexfauquette so am i suppose to leave this tests on you guys ?

alexfauquette

Could you do the same modification to ClassesSection, CSSSection, PropertiesSection and SlotSection which are the same kind of title but for API page rendering

https://github.com/mui/material-ui/blob/master/docs/src/modules/components/ApiPage/sections/ClassesSection.tsx/#L72-L84

Basically the idea would be that all the "anchor-link" of the codebase get modified the same way

docs/src/modules/components/MarkdownElement.js

packages/markdown/parseMarkdown.js

alexfauquette · 2023-10-30T11:19:27Z

so am i suppose to leave this tests on you guys ?

Yes, we can fix them when PR is ready to be merged

danilo-leal

Quick design note, though — Ideally, we'd be able to pull this off without any design changes (like adding an underline or removing styles from the anchor button). 😬

oliviertassinari · 2023-11-04T12:49:01Z

In terms of UX, I would be in favor of implementing this in a way that doesn't impact the header text selection experience. I feel that selecting a header as a text copy is as much a frequent use case as wanting to copy the header anchor.

…clickable

alexfauquette · 2024-04-05T09:31:58Z

@danilo-leal I moved forward this PR

I've modified 3 kind of pages:

the markdown docs: https://deploy-preview-39603--material-ui-apps.netlify.app/material-ui/react-button/
the API pages: https://deploy-preview-39603--material-ui-apps.netlify.app/joy-ui/api/button/
The API pages specific to base-ui: https://deploy-preview-39603--material-ui-apps.netlify.app/base-ui/react-button/hooks-api/

The design should be unchanged, except that:

titles are now links to the hash
it's harder to copy-past because it's a link 😅

danilo-leal

Looking great! 👍 Sorry it took me a few days to look at your latest iteration.

oliviertassinari

(I'm landing here from a bug I noticed on the docs, trying to find the origin).

It's great to have the headers clickable, it saves time. But I think that it's too eager, I think that we should:

Be able to use double click to select the whole header
Be able to select any words of a header
When selecting any words of a header not triggering the header anchor

I feel like I frequently copy and paste content in the headers to search. It's impossible now if the content is in the middle:

Screen.Recording.2024-04-21.at.01.52.15.mov

https://deploy-preview-39603--material-ui.netlify.app/material-ui/react-button/#cursor-not-allowed

Stripe docs is the closest to a great execution that I could find (do 1 and 2 well), the only thing I would fix there is click to select shouldn't click if some text is selected (fail at 3).

In our case, we fail at 1, 2, and 3. Can we fix this? Thanks

Also see the invalid HTML structure: #39603 (comment).

oliviertassinari · 2024-04-20T23:26:34Z

docs/src/modules/components/ApiPage.js

-        </svg>
+      <a aria-labelledby={hash} className="title-link-to-anchor" href={`#${hash}`} tabIndex={-1}>
+        {getTranslatedHeader(t, hash)}
+        <div className="anchor-icon">


We can't do this: https://validator.w3.org/nu/?doc=https%3A%2F%2Fnext--material-ui.netlify.app%2Fmaterial-ui%2Fgetting-started%2F

I guess this would fix the regression:

Suggested change

<div className="anchor-icon">

<span className="anchor-icon">

Fixing this in #42085.

oliviertassinari · 2024-06-23T21:14:12Z

docs/src/modules/components/MarkdownElement.js

-      '& a, & a code': {
+      '& a:not(.title-link-to-anchor), & a:not(.title-link-to-anchor) code': {


I'm reverting this approach, it increased the specificity, leading to overrides other styles: #42735. It seems that we don't need this more complex CSS selector, we can solve the same problem with the CSS injection order.

clickable header

51fa8fd

MoazMirza-13 changed the title ~~[docs-infra] feat: clickable header issue#39350~~ [docs-infra] feat: clickable header Oct 25, 2023

MoazMirza-13 changed the title ~~[docs-infra] feat: clickable header~~ [docs-infra] fix clickable header Oct 25, 2023

MoazMirza-13 changed the title ~~[docs-infra] fix clickable header~~ [docs-infra] Make the whole header clickable Oct 25, 2023

MoazMirza-13 added 2 commits October 25, 2023 13:51

parseMarkdown.test.js

86cdcce

ci tests

2fbf124

danilo-leal added the scope: docs-infra Specific to the docs-infra product label Oct 25, 2023

danilo-leal requested a review from a team October 25, 2023 12:05

alexfauquette reviewed Oct 25, 2023

View reviewed changes

packages/markdown/parseMarkdown.js Outdated Show resolved Hide resolved

testing checks

4fecc84

danilo-leal requested a review from alexfauquette October 27, 2023 13:16

alexfauquette reviewed Oct 27, 2023

View reviewed changes

requested changes

549402b

svg dark mode bug fix

d3b8e70

MoazMirza-13 requested a review from alexfauquette October 28, 2023 01:09

alexfauquette reviewed Oct 30, 2023

View reviewed changes

docs/src/modules/components/MarkdownElement.js Outdated Show resolved Hide resolved

docs/src/modules/components/MarkdownElement.js Outdated Show resolved Hide resolved

packages/markdown/parseMarkdown.js Outdated Show resolved Hide resolved

danilo-leal reviewed Oct 30, 2023

View reviewed changes

oliviertassinari added the enhancement This is not a bug, nor a new feature label Nov 4, 2023

oliviertassinari mentioned this pull request Nov 5, 2023

[docs-infra] Fix bug on API prop copy experience #39707

Merged

alexfauquette added 3 commits April 4, 2024 17:19

Merge remote-tracking branch 'upstream/next' into issue#39350-header-…

9b80a58

…clickable

rework the naming

88f1128

addapt API sections

96f2156

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Apr 5, 2024

alexfauquette self-assigned this Apr 5, 2024

alexfauquette changed the base branch from master to next April 5, 2024 09:04

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Apr 5, 2024

alexfauquette requested a review from danilo-leal April 5, 2024 09:32

alexfauquette and others added 2 commits April 8, 2024 11:01

fix test

e506793

bump up the anchor spacing a bit

eeccac5

danilo-leal approved these changes Apr 11, 2024

View reviewed changes

trigger ci

2e79c3a

alexfauquette merged commit 48191a8 into mui:next Apr 12, 2024
22 checks passed

alexfauquette added a commit to Janpot/material-ui that referenced this pull request Apr 12, 2024

bring diff from mui#39603

497dd32

alexfauquette mentioned this pull request Apr 12, 2024

[code-infra] Move the HighlightedCode component to @mui/docs #41859

Merged

Janpot mentioned this pull request Apr 15, 2024

[docs] Revert monorepo update mui/toolpad#3403

Merged

alexfauquette mentioned this pull request Apr 19, 2024

[docs-infra] Use the @mui/docs/HighlightedCode mui/mui-x#12848

Merged

oliviertassinari reviewed Apr 20, 2024

View reviewed changes

oliviertassinari added the design This is about UI or UX design, please involve a designer label Apr 20, 2024

oliviertassinari mentioned this pull request Apr 21, 2024

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

Closed

This was referenced May 1, 2024

[docs-infra] Prevent link anchor when selecting text #41994

Merged

[docs-infra] Fix HTML structure violations #42085

Merged

oliviertassinari mentioned this pull request Jun 23, 2024

[docs-infra] Fix visual look of in-house ad #42735

Merged

oliviertassinari reviewed Jun 23, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

MoazMirza-13 commented Oct 25, 2023 •

edited by oliviertassinari

Loading

mui-bot commented Oct 25, 2023 •

edited

Loading

alexfauquette left a comment

MoazMirza-13 commented Oct 27, 2023

alexfauquette left a comment

alexfauquette commented Oct 30, 2023

danilo-leal left a comment

oliviertassinari commented Nov 4, 2023 •

edited

Loading

alexfauquette commented Apr 5, 2024

danilo-leal left a comment

oliviertassinari left a comment •

edited

Loading

oliviertassinari Apr 20, 2024 •

edited

Loading

oliviertassinari Jun 23, 2024

		'& a, & a code': {
		'& a:not(.title-link-to-anchor), & a:not(.title-link-to-anchor) code': {

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

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

Conversation

MoazMirza-13 commented Oct 25, 2023 • edited by oliviertassinari Loading

mui-bot commented Oct 25, 2023 • edited Loading

Netlify deploy preview

Bundle size report

alexfauquette left a comment

Choose a reason for hiding this comment

MoazMirza-13 commented Oct 27, 2023

alexfauquette left a comment

Choose a reason for hiding this comment

alexfauquette commented Oct 30, 2023

danilo-leal left a comment

Choose a reason for hiding this comment

oliviertassinari commented Nov 4, 2023 • edited Loading

alexfauquette commented Apr 5, 2024

danilo-leal left a comment

Choose a reason for hiding this comment

oliviertassinari left a comment • edited Loading

Choose a reason for hiding this comment

oliviertassinari Apr 20, 2024 • edited Loading

Choose a reason for hiding this comment

oliviertassinari Jun 23, 2024

Choose a reason for hiding this comment

MoazMirza-13 commented Oct 25, 2023 •

edited by oliviertassinari

Loading

mui-bot commented Oct 25, 2023 •

edited

Loading

oliviertassinari commented Nov 4, 2023 •

edited

Loading

oliviertassinari left a comment •

edited

Loading

oliviertassinari Apr 20, 2024 •

edited

Loading