[docs] Improve feedback precision (#34641)

Co-authored-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
Co-authored-by: Siriwat K <siriwatkunaporn@gmail.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Co-authored-by: Michał Dudak <michal@dudak.me>
Co-authored-by: Bilal Shafi <bilalshafidev@gmail.com>
Co-authored-by: Marija Najdova <mnajdova@gmail.com>
Co-authored-by: Jan Potoms <2109932+Janpot@users.noreply.github.com>
Co-authored-by: sai6855 <60743144+sai6855@users.noreply.github.com>

.github/ISSUE_TEMPLATE/4.docs-feedback.yml

@@ -0,0 +1,52 @@
+name: Docs feedback
+description: Improve documentation about MUI Core.
+labels: ['status: needs triage', 'support: docs-feedback']
+title: '[docs] '
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Please provide a searchable summary of the issue in the title above ⬆️.
+
+        Thanks for contributing by creating an issue! ❤️
+  - type: checkboxes
+    attributes:
+      label: Duplicates
+      description: Please [search the history](https://github.com/mui/material-ui/issues) to see if an issue already exists for the same problem.
+      options:
+        - label: I have searched the existing issues
+          required: true
+
+  - type: input
+    id: page-url
+    attributes:
+      label: Related page
+      description: Which page of the documentation is this about?
+      placeholder: https://mui.com/material-ui/react-badge/
+    validations:
+      required: true
+
+  - type: dropdown
+    attributes:
+      label: Kind of issue
+      description: What kind of problem are you facing?
+      options:
+        - Unclear explanations
+        - Missing information
+        - Broken demonstration
+        - Other
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Issue description
+      description: |
+        Let us know what went wrong when you were using this documentation and what we could do to improve it.
+      value: |
+        I was looking for ... and it appears that ...
+
+  - type: textarea
+    attributes:
+      label: Context 🔦
+      description: What are you trying to accomplish? What brought you to this page? Your context can help us to come up with solutions that benefit the community as a whole.

docs/data/material/guides/pickers-migration/pickers-migration.md

@@ -3,7 +3,7 @@
 <p class="description">@material-ui/pickers was moved to the @mui/lab.</p>
 
 :::info
-**Stable package available**: The pickers are not available in `@mui/lab`after `v5.0.0-alpha.89`.
+**Stable package available**: The pickers are not available in `@mui/lab` after `v5.0.0-alpha.89`.
 They have been moved from `@mui/lab` to the MUI X packages `@mui/x-date-pickers` and `@mui/x-date-pickers-pro`.
 To migrate from `@mui/lab` to `@mui/x-date-pickers` you can follow the dedicated [migration guide](/x/react-date-pickers/migration-lab/).
 :::

docs/next.config.js

@@ -158,6 +158,7 @@ module.exports = withDocsInfra({
     SLACK_FEEDBACKS_TOKEN: process.env.SLACK_FEEDBACKS_TOKEN,
     SOURCE_CODE_ROOT_URL: 'https://github.com/mui/material-ui/blob/master', // #default-branch-switch
     SOURCE_CODE_REPO: 'https://github.com/mui/material-ui',
+    GITHUB_TEMPLATE_DOCS_FEEDBACK: '4.docs-feedback.yml',
     BUILD_ONLY_ENGLISH_LOCALE: buildOnlyEnglishLocale,
   },
   // Next.js provides a `defaultPathMap` argument, we could simplify the logic.

docs/packages/markdown/parseMarkdown.js

@@ -249,6 +249,9 @@ function createRender(context) {
         `<a aria-labelledby="${hash}" class="anchor-link-style" href="#${hash}" tabindex="-1">`,
         '<svg><use xlink:href="#anchor-link-icon" /></svg>',
         '</a>',
+        `<button title="Post a comment" class="comment-link-style" data-feedback-hash="${hash}">`,
+        '<svg><use xlink:href="#comment-link-icon" /></svg>',
+        `</button>`,
         `</h${level}>`,
       ].join('');
     };
@@ -458,6 +461,11 @@ ${headers.components
   <symbol id="anchor-link-icon" viewBox="0 0 16 16">
     <path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z" />
   </symbol>
+</svg>`);
+      rendered.unshift(`<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
+<symbol id="comment-link-icon" viewBox="0 0 24 24">
+  <path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 14v-2.47l6.88-6.88c.2-.2.51-.2.71 0l1.77 1.77c.2.2.2.51 0 .71L8.47 14H6zm12 0h-7.5l2-2H18v2z" />
+</symbol>
 </svg>`);
 
       docs[userLanguage] = {

docs/src/modules/components/AppLayoutDocs.js

@@ -30,6 +30,9 @@ const Main = styled('main', {
   [theme.breakpoints.up('lg')]: {
     width: 'calc(100% - var(--MuiDocs-navDrawer-width))',
   },
+  '& .markdown-body .comment-link-style': {
+    display: 'inline-block',
+  },
 }));
 
 const StyledAppContainer = styled(AppContainer, {
@@ -130,7 +133,7 @@ function AppLayoutDocs(props) {
             <ActionsDiv>{location && <EditPage markdownLocation={location} />}</ActionsDiv>
             {children}
             <NoSsr>
-              <AppLayoutDocsFooter />
+              <AppLayoutDocsFooter tableOfContents={toc} />
             </NoSsr>
           </StyledAppContainer>
         </Main>