From 63319ac8a4ebb9bd9d62b5c55b82c8cecf6e2ac2 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Thu, 6 Oct 2022 11:26:13 +0200 Subject: [PATCH 01/54] first try --- docs/packages/markdown/parseMarkdown.js | 1 + docs/pages/_app.js | 15 ++-- docs/src/modules/components/AppLayoutDocs.js | 2 +- .../modules/components/AppLayoutDocsFooter.js | 69 ++++++++++++++++- .../modules/components/FeedbackContext.tsx | 76 +++++++++++++++++++ docs/translations/translations.json | 3 + 6 files changed, 157 insertions(+), 9 deletions(-) create mode 100644 docs/src/modules/components/FeedbackContext.tsx diff --git a/docs/packages/markdown/parseMarkdown.js b/docs/packages/markdown/parseMarkdown.js index 63094b71c813bc..dd55ea56b37606 100644 --- a/docs/packages/markdown/parseMarkdown.js +++ b/docs/packages/markdown/parseMarkdown.js @@ -249,6 +249,7 @@ function createRender(context) { ``, '', '', + ``, ``, ].join(''); }; diff --git a/docs/pages/_app.js b/docs/pages/_app.js index 9e157c4505185c..6a0ccc23a3de71 100644 --- a/docs/pages/_app.js +++ b/docs/pages/_app.js @@ -13,6 +13,7 @@ import materialPages from 'docs/data/material/pages'; import joyPages from 'docs/data/joy/pages'; import systemPages from 'docs/data/system/pages'; import PageContext from 'docs/src/modules/components/PageContext'; +import { FeedbackProvider } from 'docs/src/modules/components/FeedbackContext'; import GoogleAnalytics from 'docs/src/modules/components/GoogleAnalytics'; import { CodeCopyProvider } from 'docs/src/modules/utils/CodeCopy'; import { ThemeProvider } from 'docs/src/modules/components/ThemeContext'; @@ -220,12 +221,14 @@ function AppWrapper(props) { - - - {children} - - - + + + + {children} + + + + diff --git a/docs/src/modules/components/AppLayoutDocs.js b/docs/src/modules/components/AppLayoutDocs.js index c0b4b9887093ef..78c059d9b91409 100644 --- a/docs/src/modules/components/AppLayoutDocs.js +++ b/docs/src/modules/components/AppLayoutDocs.js @@ -130,7 +130,7 @@ function AppLayoutDocs(props) { {location && } {children} - + diff --git a/docs/src/modules/components/AppLayoutDocsFooter.js b/docs/src/modules/components/AppLayoutDocsFooter.js index 726e8cd6774b25..012343b88ab9cd 100644 --- a/docs/src/modules/components/AppLayoutDocsFooter.js +++ b/docs/src/modules/components/AppLayoutDocsFooter.js @@ -1,5 +1,6 @@ /* eslint-disable no-restricted-globals */ import * as React from 'react'; +import PropTypes from 'prop-types'; import { styled } from '@mui/material/styles'; import DialogActions from '@mui/material/DialogActions'; import TextField from '@mui/material/TextField'; @@ -10,6 +11,7 @@ import Grid from '@mui/material/Grid'; import Typography from '@mui/material/Typography'; import Tooltip from '@mui/material/Tooltip'; import IconButton from '@mui/material/IconButton'; +import MenuItem from '@mui/material/MenuItem'; import ThumbUpIcon from '@mui/icons-material/ThumbUpAlt'; import ThumbDownIcon from '@mui/icons-material/ThumbDownAlt'; import ChevronRightIcon from '@mui/icons-material/ChevronRight'; @@ -19,6 +21,7 @@ import { getCookie, pageToTitleI18n } from 'docs/src/modules/utils/helpers'; import PageContext from 'docs/src/modules/components/PageContext'; import Link from 'docs/src/modules/components/Link'; import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n'; +import { useFeedbackState } from 'docs/src/modules/components/FeedbackContext'; const Footer = styled('footer')(({ theme }) => { return { @@ -242,19 +245,38 @@ function usePageNeighbours() { return { prevPage, nextPage }; } -export default function AppLayoutDocsFooter() { +export default function AppLayoutDocsFooter(props) { + const { tableOfContents = [] } = props; + const t = useTranslate(); const userLanguage = useUserLanguage(); const { activePage } = React.useContext(PageContext); const [rating, setRating] = React.useState(); const [comment, setComment] = React.useState(''); - const [commentOpen, setCommentOpen] = React.useState(false); const [snackbarOpen, setSnackbarOpen] = React.useState(false); const [snackbarMessage, setSnackbarMessage] = React.useState(false); const inputRef = React.useRef(); + const { + section: commentedSection, + isOpen: commentOpen, + setIsOpen: setCommentOpen, + updateSection, + } = useFeedbackState(); const { nextPage, prevPage } = usePageNeighbours(); + const sectionOptions = React.useMemo( + () => + tableOfContents.flatMap((section) => [ + { + hash: section.hash, + text: section.text, + }, + ...section.children.map(({ hash, text }) => ({ hash, text })), + ]), + [tableOfContents], + ); + const setCurrentRatingFromCookie = React.useCallback(() => { if (activePage !== null) { setRating(getCurrentRating(activePage.pathname)); @@ -291,6 +313,10 @@ export default function AppLayoutDocsFooter() { setComment(event.target.value); }; + const handleChangeSection = (event) => { + updateSection(event.target.value); + }; + const handleSubmitComment = (event) => { event.preventDefault(); setCommentOpen(false); @@ -310,6 +336,23 @@ export default function AppLayoutDocsFooter() { setSnackbarOpen(false); }; + React.useEffect(() => { + const eventListener = (event) => { + const feedbackHash = event.target.getAttribute('data-feedback-hash'); + if (feedbackHash) { + const section = sectionOptions.find((item) => item.hash === feedbackHash); + updateSection(section); + if (inputRef.current) { + inputRef.current.focus(); + } + } + }; + document.addEventListener('click', eventListener); + return () => { + document.removeEventListener('click', eventListener); + }; + }, [sectionOptions, updateSection]); + const hidePagePagination = activePage === null || activePage.ordered === false; return ( @@ -389,6 +432,24 @@ export default function AppLayoutDocsFooter() { {rating === 1 ? t('feedbackMessageUp') : t('feedbackMessageDown')} + + {t('feedbackNoSectionSelected')} + {sectionOptions.map((section) => ( + {section.text} + ))} + ); } + +AppLayoutDocsFooter.propTypes = { + tableOfContents: PropTypes.array, +}; diff --git a/docs/src/modules/components/FeedbackContext.tsx b/docs/src/modules/components/FeedbackContext.tsx new file mode 100644 index 00000000000000..274f59d46d6f57 --- /dev/null +++ b/docs/src/modules/components/FeedbackContext.tsx @@ -0,0 +1,76 @@ +import * as React from 'react'; + +type Section = { + hash: string; + text: string; +}; + +interface FeedbackState { + section: Section | null; + isOpen: boolean; +} + +type Actions = + | { type: 'SET_SECTION'; payload: Section } + | { type: 'UPDATE_OPEN'; payload: boolean }; + +const FeedbackContext = React.createContext<{ + state: FeedbackState; + dispatch: React.Dispatch; +}>({ + state: { section: null, isOpen: false }, + dispatch: () => { + throw new Error('Forgot to wrap component in `FeedbackProvider`'); + }, +}); + +if (process.env.NODE_ENV !== 'production') { + FeedbackContext.displayName = 'FeedbackContext'; +} + +export const FeedbackProvider = (props: any) => { + const { children } = props; + + const [state, dispatch] = React.useReducer( + (prevState: FeedbackState, action: Actions): FeedbackState => { + switch (action.type) { + case 'SET_SECTION': + return { + section: action.payload, + isOpen: true, + }; + case 'UPDATE_OPEN': + return { ...prevState, isOpen: action.payload }; + default: + throw new Error(`Unrecognized type ${(action as any).type}`); + } + }, + { section: null, isOpen: false }, + ); + + return ( + {children} + ); +}; + +export function useOpenSectionFeedback() { + const { dispatch } = React.useContext(FeedbackContext); + return React.useCallback( + (section: Section) => dispatch({ type: 'SET_SECTION', payload: section }), + [dispatch], + ); +} + +export function useFeedbackState() { + const { state, dispatch } = React.useContext(FeedbackContext); + const setIsOpen = React.useCallback( + (newIsOpen: boolean) => dispatch({ type: 'UPDATE_OPEN', payload: newIsOpen }), + [dispatch], + ); + const updateSection = React.useCallback( + (section: Section) => dispatch({ type: 'SET_SECTION', payload: section }), + [dispatch], + ); + + return { ...state, setIsOpen, updateSection }; +} diff --git a/docs/translations/translations.json b/docs/translations/translations.json index 68b8fe653edb1a..b4794dba520cd4 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -66,6 +66,9 @@ "emoojiWarning": "Warning", "expandAll": "Expand all", "feedbackCommentLabel": "Comment", + "feedbackSectionLabel": "Section concerned by the comment", + "feedbackSectionPlaceholder": "Comment about the section ...", + "feedbackNoSectionSelected": "The all page", "feedbackFailed": "Couldn't submit feedback. Please try again later.", "feedbackMessage": "Was this page helpful?", "feedbackMessageDown": "Please let us know what we could do to improve this page.", From acd727e72937c2a429341b9588bcb9026f96f56b Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Mon, 10 Oct 2022 18:15:25 +0200 Subject: [PATCH 02/54] customize a bit --- docs/packages/markdown/parseMarkdown.js | 9 ++++++- .../src/modules/components/MarkdownElement.js | 26 +++++++++++++++++++ 2 files changed, 34 insertions(+), 1 deletion(-) diff --git a/docs/packages/markdown/parseMarkdown.js b/docs/packages/markdown/parseMarkdown.js index dd55ea56b37606..6a5a6b0b1af030 100644 --- a/docs/packages/markdown/parseMarkdown.js +++ b/docs/packages/markdown/parseMarkdown.js @@ -249,7 +249,9 @@ function createRender(context) { ``, '', '', - ``, + ``, ``, ].join(''); }; @@ -459,6 +461,11 @@ ${headers.components +`); + rendered.unshift(` + + + `); docs[userLanguage] = { diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js index ed4ccadb95f946..0af61f8b1e8d5c 100644 --- a/docs/src/modules/components/MarkdownElement.js +++ b/docs/src/modules/components/MarkdownElement.js @@ -140,6 +140,32 @@ const Root = styled('div')(({ theme }) => ({ fill: 'currentColor', }, }, + '& .comment-link-style': { + display: 'inline-block', + verticalAlign: 'middle', + textAlign: 'center', + lineHeight: '21.5px', + marginLeft: 10, + height: '26px', + width: '26px', + background: theme.palette.mode === 'dark' ? alpha(blue[800], 0.3) : theme.palette.primary[50], + border: '1px solid', + borderColor: theme.palette.mode === 'dark' ? blueDark[500] : theme.palette.grey[200], + borderRadius: 8, + color: theme.palette.text.secondary, + float: 'right', + marginRight: '16px', + cursor: 'pointer', + '&:hover': { + color: theme.palette.text.primary, + }, + '& svg': { + verticalAlign: 'middle', + width: '0.875rem', + height: '0.875rem', + fill: 'currentColor', + }, + }, }, '& h1 code': { fontWeight: theme.typography.fontWeightSemiBold, From f0005598024ddfd752ec327ffe2b2f8a532b2324 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Tue, 11 Oct 2022 16:33:15 +0200 Subject: [PATCH 03/54] remove context, only rely on event dispatch --- docs/pages/_app.js | 15 ++-- .../modules/components/AppLayoutDocsFooter.js | 22 +++--- .../modules/components/FeedbackContext.tsx | 76 ------------------- .../src/modules/components/MarkdownElement.js | 1 + 4 files changed, 18 insertions(+), 96 deletions(-) delete mode 100644 docs/src/modules/components/FeedbackContext.tsx diff --git a/docs/pages/_app.js b/docs/pages/_app.js index 6a0ccc23a3de71..9e157c4505185c 100644 --- a/docs/pages/_app.js +++ b/docs/pages/_app.js @@ -13,7 +13,6 @@ import materialPages from 'docs/data/material/pages'; import joyPages from 'docs/data/joy/pages'; import systemPages from 'docs/data/system/pages'; import PageContext from 'docs/src/modules/components/PageContext'; -import { FeedbackProvider } from 'docs/src/modules/components/FeedbackContext'; import GoogleAnalytics from 'docs/src/modules/components/GoogleAnalytics'; import { CodeCopyProvider } from 'docs/src/modules/utils/CodeCopy'; import { ThemeProvider } from 'docs/src/modules/components/ThemeContext'; @@ -221,14 +220,12 @@ function AppWrapper(props) { - - - - {children} - - - - + + + {children} + + + diff --git a/docs/src/modules/components/AppLayoutDocsFooter.js b/docs/src/modules/components/AppLayoutDocsFooter.js index 012343b88ab9cd..b6dad2c2fa10bc 100644 --- a/docs/src/modules/components/AppLayoutDocsFooter.js +++ b/docs/src/modules/components/AppLayoutDocsFooter.js @@ -21,7 +21,6 @@ import { getCookie, pageToTitleI18n } from 'docs/src/modules/utils/helpers'; import PageContext from 'docs/src/modules/components/PageContext'; import Link from 'docs/src/modules/components/Link'; import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n'; -import { useFeedbackState } from 'docs/src/modules/components/FeedbackContext'; const Footer = styled('footer')(({ theme }) => { return { @@ -245,6 +244,8 @@ function usePageNeighbours() { return { prevPage, nextPage }; } +const EMPTY_SECTION = { hash: '', text: '' }; + export default function AppLayoutDocsFooter(props) { const { tableOfContents = [] } = props; @@ -256,12 +257,8 @@ export default function AppLayoutDocsFooter(props) { const [snackbarOpen, setSnackbarOpen] = React.useState(false); const [snackbarMessage, setSnackbarMessage] = React.useState(false); const inputRef = React.useRef(); - const { - section: commentedSection, - isOpen: commentOpen, - setIsOpen: setCommentOpen, - updateSection, - } = useFeedbackState(); + const [commentOpen, setCommentOpen] = React.useState(false); + const [commentedSection, setCommentedSection] = React.useState(EMPTY_SECTION); const { nextPage, prevPage } = usePageNeighbours(); @@ -314,7 +311,9 @@ export default function AppLayoutDocsFooter(props) { }; const handleChangeSection = (event) => { - updateSection(event.target.value); + const section = + sectionOptions.find((item) => item.hash === event.target.value) || EMPTY_SECTION; + setCommentedSection(section); }; const handleSubmitComment = (event) => { @@ -340,8 +339,9 @@ export default function AppLayoutDocsFooter(props) { const eventListener = (event) => { const feedbackHash = event.target.getAttribute('data-feedback-hash'); if (feedbackHash) { - const section = sectionOptions.find((item) => item.hash === feedbackHash); - updateSection(section); + const section = sectionOptions.find((item) => item.hash === feedbackHash) || EMPTY_SECTION; + setCommentOpen(true); + setCommentedSection(section); if (inputRef.current) { inputRef.current.focus(); } @@ -351,7 +351,7 @@ export default function AppLayoutDocsFooter(props) { return () => { document.removeEventListener('click', eventListener); }; - }, [sectionOptions, updateSection]); + }, [sectionOptions]); const hidePagePagination = activePage === null || activePage.ordered === false; diff --git a/docs/src/modules/components/FeedbackContext.tsx b/docs/src/modules/components/FeedbackContext.tsx deleted file mode 100644 index 274f59d46d6f57..00000000000000 --- a/docs/src/modules/components/FeedbackContext.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import * as React from 'react'; - -type Section = { - hash: string; - text: string; -}; - -interface FeedbackState { - section: Section | null; - isOpen: boolean; -} - -type Actions = - | { type: 'SET_SECTION'; payload: Section } - | { type: 'UPDATE_OPEN'; payload: boolean }; - -const FeedbackContext = React.createContext<{ - state: FeedbackState; - dispatch: React.Dispatch; -}>({ - state: { section: null, isOpen: false }, - dispatch: () => { - throw new Error('Forgot to wrap component in `FeedbackProvider`'); - }, -}); - -if (process.env.NODE_ENV !== 'production') { - FeedbackContext.displayName = 'FeedbackContext'; -} - -export const FeedbackProvider = (props: any) => { - const { children } = props; - - const [state, dispatch] = React.useReducer( - (prevState: FeedbackState, action: Actions): FeedbackState => { - switch (action.type) { - case 'SET_SECTION': - return { - section: action.payload, - isOpen: true, - }; - case 'UPDATE_OPEN': - return { ...prevState, isOpen: action.payload }; - default: - throw new Error(`Unrecognized type ${(action as any).type}`); - } - }, - { section: null, isOpen: false }, - ); - - return ( - {children} - ); -}; - -export function useOpenSectionFeedback() { - const { dispatch } = React.useContext(FeedbackContext); - return React.useCallback( - (section: Section) => dispatch({ type: 'SET_SECTION', payload: section }), - [dispatch], - ); -} - -export function useFeedbackState() { - const { state, dispatch } = React.useContext(FeedbackContext); - const setIsOpen = React.useCallback( - (newIsOpen: boolean) => dispatch({ type: 'UPDATE_OPEN', payload: newIsOpen }), - [dispatch], - ); - const updateSection = React.useCallback( - (section: Section) => dispatch({ type: 'SET_SECTION', payload: section }), - [dispatch], - ); - - return { ...state, setIsOpen, updateSection }; -} diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js index 0af61f8b1e8d5c..f6d770111a26e3 100644 --- a/docs/src/modules/components/MarkdownElement.js +++ b/docs/src/modules/components/MarkdownElement.js @@ -164,6 +164,7 @@ const Root = styled('div')(({ theme }) => ({ width: '0.875rem', height: '0.875rem', fill: 'currentColor', + pointerEvents: 'none', }, }, }, From 8bd78cd6b57e4a1c88539003dc2bc6dccd394bb7 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Tue, 11 Oct 2022 16:44:20 +0200 Subject: [PATCH 04/54] Only display buttons when feedback footer is available --- docs/src/modules/components/AppLayoutDocs.js | 7 +++++++ docs/src/modules/components/MarkdownElement.js | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/docs/src/modules/components/AppLayoutDocs.js b/docs/src/modules/components/AppLayoutDocs.js index 78c059d9b91409..3f2964a30e72d6 100644 --- a/docs/src/modules/components/AppLayoutDocs.js +++ b/docs/src/modules/components/AppLayoutDocs.js @@ -30,6 +30,13 @@ const Main = styled('main', { [theme.breakpoints.up('lg')]: { width: 'calc(100% - var(--MuiDocs-navDrawer-width))', }, + '& .markdown-body': { + '& h1, & h2, & h3, & h4': { + '& .comment-link-style': { + display: 'inline-block', + }, + }, + }, })); const StyledAppContainer = styled(AppContainer, { diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js index f6d770111a26e3..dac422b7e0a1f8 100644 --- a/docs/src/modules/components/MarkdownElement.js +++ b/docs/src/modules/components/MarkdownElement.js @@ -141,7 +141,7 @@ const Root = styled('div')(({ theme }) => ({ }, }, '& .comment-link-style': { - display: 'inline-block', + display: 'none', verticalAlign: 'middle', textAlign: 'center', lineHeight: '21.5px', From 3141e6d48157a549d1f283dbc312df632397197d Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Tue, 11 Oct 2022 16:51:10 +0200 Subject: [PATCH 05/54] add the hash to the slack message --- .../modules/components/AppLayoutDocsFooter.js | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/docs/src/modules/components/AppLayoutDocsFooter.js b/docs/src/modules/components/AppLayoutDocsFooter.js index b6dad2c2fa10bc..c6f82d803b04b0 100644 --- a/docs/src/modules/components/AppLayoutDocsFooter.js +++ b/docs/src/modules/components/AppLayoutDocsFooter.js @@ -111,7 +111,7 @@ async function postFeedback(data) { } async function postFeedbackOnSlack(data) { - const { rating, comment } = data; + const { rating, comment, commentedSection } = data; if (!comment || comment.length < 10) { return; @@ -162,7 +162,9 @@ async function postFeedbackOnSlack(data) { const simpleSlackMessage = [ `New comment ${rating > 0 ? '👍' : '👎'}`, `>${comment.split('\n').join('\n>')}`, - `sent from ${window.location.href}`, + `sent from ${window.location.href}${commentedSection.hash ? `#${commentedSection.hash}` : ''}${ + commentedSection.text ? ` (section ${commentedSection.text})` : '' + }`, ].join('\n\n'); try { @@ -193,7 +195,7 @@ async function getUserFeedback(id) { } } -async function submitFeedback(page, rating, comment, language) { +async function submitFeedback(page, rating, comment, language, commentedSection) { const data = { id: getCookie('feedbackId'), page, @@ -203,7 +205,7 @@ async function submitFeedback(page, rating, comment, language) { language, }; - await postFeedbackOnSlack(data); + await postFeedbackOnSlack({ ...data, commentedSection }); const result = await postFeedback(data); if (result) { document.cookie = `feedbackId=${result.id};path=/;max-age=31536000`; @@ -289,7 +291,13 @@ export default function AppLayoutDocsFooter(props) { setSnackbarMessage(t('feedbackFailed')); } - const result = await submitFeedback(activePage.pathname, rating, comment, userLanguage); + const result = await submitFeedback( + activePage.pathname, + rating, + comment, + userLanguage, + commentedSection, + ); if (result) { setSnackbarMessage(t('feedbackSubmitted')); } else { From 56dfe0213b1098fccdcb6b2756b18a3aaf5b6c32 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Tue, 11 Oct 2022 17:02:53 +0200 Subject: [PATCH 06/54] manage undefined up/down vote --- .../modules/components/AppLayoutDocsFooter.js | 32 +++++++++++-------- 1 file changed, 19 insertions(+), 13 deletions(-) diff --git a/docs/src/modules/components/AppLayoutDocsFooter.js b/docs/src/modules/components/AppLayoutDocsFooter.js index c6f82d803b04b0..ccfe005572f492 100644 --- a/docs/src/modules/components/AppLayoutDocsFooter.js +++ b/docs/src/modules/components/AppLayoutDocsFooter.js @@ -114,7 +114,7 @@ async function postFeedbackOnSlack(data) { const { rating, comment, commentedSection } = data; if (!comment || comment.length < 10) { - return; + return 'ignored'; } /** @@ -160,7 +160,7 @@ async function postFeedbackOnSlack(data) { */ const simpleSlackMessage = [ - `New comment ${rating > 0 ? '👍' : '👎'}`, + `New comment ${rating === 1 ? '👍' : ''}${rating === 0 ? '👎' : ''}`, `>${comment.split('\n').join('\n>')}`, `sent from ${window.location.href}${commentedSection.hash ? `#${commentedSection.hash}` : ''}${ commentedSection.text ? ` (section ${commentedSection.text})` : '' @@ -173,8 +173,10 @@ async function postFeedbackOnSlack(data) { headers: { 'content-type': 'application/x-www-form-urlencoded' }, body: JSON.stringify({ text: simpleSlackMessage }), }); + return 'sent'; } catch (error) { console.error(error); + return null; } } @@ -205,18 +207,22 @@ async function submitFeedback(page, rating, comment, language, commentedSection) language, }; - await postFeedbackOnSlack({ ...data, commentedSection }); - const result = await postFeedback(data); - if (result) { - document.cookie = `feedbackId=${result.id};path=/;max-age=31536000`; - setTimeout(async () => { - const userFeedback = await getUserFeedback(result.id); - if (userFeedback) { - document.cookie = `feedback=${JSON.stringify(userFeedback)};path=/;max-age=31536000`; - } - }); + const resultSlack = await postFeedbackOnSlack({ ...data, commentedSection }); + if (rating !== undefined) { + const resultVote = await postFeedback(data); + if (resultVote) { + document.cookie = `feedbackId=${resultVote.id};path=/;max-age=31536000`; + setTimeout(async () => { + const userFeedback = await getUserFeedback(resultVote.id); + if (userFeedback) { + document.cookie = `feedback=${JSON.stringify(userFeedback)};path=/;max-age=31536000`; + } + }); + } + return resultSlack && resultVote; } - return result; + + return resultSlack; } function getCurrentRating(pathname) { From 317907db4cfc4ec2dfa9307f1d5dbecb4bcfc976 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Wed, 2 Nov 2022 10:58:15 +0100 Subject: [PATCH 07/54] remove early thanks --- docs/src/modules/components/AppLayoutDocsFooter.js | 3 --- docs/translations/translations.json | 1 - 2 files changed, 4 deletions(-) diff --git a/docs/src/modules/components/AppLayoutDocsFooter.js b/docs/src/modules/components/AppLayoutDocsFooter.js index ccfe005572f492..1261f05c769796 100644 --- a/docs/src/modules/components/AppLayoutDocsFooter.js +++ b/docs/src/modules/components/AppLayoutDocsFooter.js @@ -439,9 +439,6 @@ export default function AppLayoutDocsFooter(props) { onReset={handleCancelComment} onSubmit={handleSubmitComment} > - - {t('feedbackTitle')} -
{rating === 1 ? t('feedbackMessageUp') : t('feedbackMessageDown')} diff --git a/docs/translations/translations.json b/docs/translations/translations.json index b4794dba520cd4..4c9602ec8cac40 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -75,7 +75,6 @@ "feedbackMessageUp": "Please let us know what we should keep doing more of.", "feedbackNo": "No", "feedbackSubmitted": "Feedback submitted", - "feedbackTitle": "Thanks for your feedback!", "feedbackYes": "Yes", "footerCompany": "Company", "goToHome": "go to homepage", From 3fff812b1b8dd02c20e70841f4e114874320f97d Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Wed, 2 Nov 2022 11:04:16 +0100 Subject: [PATCH 08/54] remove section selector --- .../modules/components/AppLayoutDocsFooter.js | 29 ++----------------- docs/translations/translations.json | 9 ++---- 2 files changed, 5 insertions(+), 33 deletions(-) diff --git a/docs/src/modules/components/AppLayoutDocsFooter.js b/docs/src/modules/components/AppLayoutDocsFooter.js index 1261f05c769796..d10756983efa19 100644 --- a/docs/src/modules/components/AppLayoutDocsFooter.js +++ b/docs/src/modules/components/AppLayoutDocsFooter.js @@ -11,7 +11,6 @@ import Grid from '@mui/material/Grid'; import Typography from '@mui/material/Typography'; import Tooltip from '@mui/material/Tooltip'; import IconButton from '@mui/material/IconButton'; -import MenuItem from '@mui/material/MenuItem'; import ThumbUpIcon from '@mui/icons-material/ThumbUpAlt'; import ThumbDownIcon from '@mui/icons-material/ThumbDownAlt'; import ChevronRightIcon from '@mui/icons-material/ChevronRight'; @@ -162,8 +161,8 @@ async function postFeedbackOnSlack(data) { const simpleSlackMessage = [ `New comment ${rating === 1 ? '👍' : ''}${rating === 0 ? '👎' : ''}`, `>${comment.split('\n').join('\n>')}`, - `sent from ${window.location.href}${commentedSection.hash ? `#${commentedSection.hash}` : ''}${ - commentedSection.text ? ` (section ${commentedSection.text})` : '' + `sent from ${window.location.href}${ + commentedSection.text ? ` (from section ${commentedSection.text})` : '' }`, ].join('\n\n'); @@ -324,12 +323,6 @@ export default function AppLayoutDocsFooter(props) { setComment(event.target.value); }; - const handleChangeSection = (event) => { - const section = - sectionOptions.find((item) => item.hash === event.target.value) || EMPTY_SECTION; - setCommentedSection(section); - }; - const handleSubmitComment = (event) => { event.preventDefault(); setCommentOpen(false); @@ -443,24 +436,6 @@ export default function AppLayoutDocsFooter(props) { {rating === 1 ? t('feedbackMessageUp') : t('feedbackMessageDown')} - - {t('feedbackNoSectionSelected')} - {sectionOptions.map((section) => ( - {section.text} - ))} - Date: Wed, 2 Nov 2022 11:04:40 +0100 Subject: [PATCH 09/54] make the submit more visible --- docs/src/modules/components/AppLayoutDocsFooter.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/src/modules/components/AppLayoutDocsFooter.js b/docs/src/modules/components/AppLayoutDocsFooter.js index d10756983efa19..7d3963a21fa2e6 100644 --- a/docs/src/modules/components/AppLayoutDocsFooter.js +++ b/docs/src/modules/components/AppLayoutDocsFooter.js @@ -453,7 +453,9 @@ export default function AppLayoutDocsFooter(props) {
- + From 27fc4699207f2ee9f3e377d58c9cddb1082f020e Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Wed, 2 Nov 2022 11:20:15 +0100 Subject: [PATCH 10/54] fix accessibility --- docs/packages/markdown/parseMarkdown.js | 2 +- docs/src/modules/components/AppLayoutDocsFooter.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/packages/markdown/parseMarkdown.js b/docs/packages/markdown/parseMarkdown.js index 6a5a6b0b1af030..8c017a855a8bd9 100644 --- a/docs/packages/markdown/parseMarkdown.js +++ b/docs/packages/markdown/parseMarkdown.js @@ -249,7 +249,7 @@ function createRender(context) { ``, '', '', - ``, ``, diff --git a/docs/src/modules/components/AppLayoutDocsFooter.js b/docs/src/modules/components/AppLayoutDocsFooter.js index 7d3963a21fa2e6..945de4c965e325 100644 --- a/docs/src/modules/components/AppLayoutDocsFooter.js +++ b/docs/src/modules/components/AppLayoutDocsFooter.js @@ -445,7 +445,6 @@ export default function AppLayoutDocsFooter(props) { value={comment} onChange={handleChangeTextfield} inputProps={{ - 'aria-label': t('feedbackCommentLabel'), 'aria-describedby': 'feedback-description', ref: inputRef, }} From ef60d25cb7d54474f5e9f6bc3ae2b9bffa3ab0fb Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Wed, 2 Nov 2022 11:34:20 +0100 Subject: [PATCH 11/54] inline CSS --- docs/src/modules/components/AppLayoutDocs.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/docs/src/modules/components/AppLayoutDocs.js b/docs/src/modules/components/AppLayoutDocs.js index 3f2964a30e72d6..dfe039f798ba56 100644 --- a/docs/src/modules/components/AppLayoutDocs.js +++ b/docs/src/modules/components/AppLayoutDocs.js @@ -30,12 +30,8 @@ const Main = styled('main', { [theme.breakpoints.up('lg')]: { width: 'calc(100% - var(--MuiDocs-navDrawer-width))', }, - '& .markdown-body': { - '& h1, & h2, & h3, & h4': { - '& .comment-link-style': { - display: 'inline-block', - }, - }, + '& .markdown-body .comment-link-style': { + display: 'inline-block', }, })); From fa2da763206ab6240b490571e226bf779d1a2bec Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Wed, 2 Nov 2022 12:27:14 +0100 Subject: [PATCH 12/54] prettier --- docs/translations/translations.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/translations/translations.json b/docs/translations/translations.json index a34aa4454bcf1e..5315df80a6c613 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -359,4 +359,4 @@ "/material-ui/migration/migration-v0x": "Migration from v0.x to v1", "https://mui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=sidenav": "Templates" } -} \ No newline at end of file +} From 6940285a9ad2b5a12066db87944473889062d03c Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Wed, 2 Nov 2022 14:00:44 +0100 Subject: [PATCH 13/54] add a link to github issue --- .github/ISSUE_TEMPLATE/4.docs-feedback.yml | 52 +++++++++++++++++++ .../modules/components/AppLayoutDocsFooter.js | 13 ++++- docs/translations/translations.json | 4 ++ 3 files changed, 68 insertions(+), 1 deletion(-) create mode 100644 .github/ISSUE_TEMPLATE/4.docs-feedback.yml diff --git a/.github/ISSUE_TEMPLATE/4.docs-feedback.yml b/.github/ISSUE_TEMPLATE/4.docs-feedback.yml new file mode 100644 index 00000000000000..e112609ddba4c2 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/4.docs-feedback.yml @@ -0,0 +1,52 @@ +name: Docs feedback +description: Improve documentation about MUI Core. +labels: ['status: needs triage', 'docs'] +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 concerned? + placeholder: https://mui.com/material-ui/react-badge/ + validations: + required: true + + - type: dropdown + attributes: + label: Kind of issue + description: What version of our software are you running? + options: + - Unclear explanations + - Missing information + - Broken demonstration + - Other + validations: + required: true + + - type: textarea + attributes: + label: Issue description + description: | + Describe as precisely, what went wrong during your experience with this documentation page and what could we 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? Why were you browsing this documentation page? Providing context helps us come up with a solution that is more useful in the real world. diff --git a/docs/src/modules/components/AppLayoutDocsFooter.js b/docs/src/modules/components/AppLayoutDocsFooter.js index 2d68771caa4e41..196aa7b4244535 100644 --- a/docs/src/modules/components/AppLayoutDocsFooter.js +++ b/docs/src/modules/components/AppLayoutDocsFooter.js @@ -436,7 +436,7 @@ export default function AppLayoutDocsFooter(props) { margin="dense" name="comment" fullWidth - rows={6} + rows={4} value={comment} onChange={handleChangeTextfield} inputProps={{ @@ -444,6 +444,17 @@ export default function AppLayoutDocsFooter(props) { ref: inputRef, }} /> + {rating !== 1 && ( + + {t('feedbackMessageToGithub.main')}{' '} + + {t('feedbackMessageToGithub.link')} + + + )} diff --git a/docs/translations/translations.json b/docs/translations/translations.json index 16577e2a5d7392..d2cbe7e829a00a 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -70,6 +70,10 @@ "feedbackMessage": "Was this page helpful?", "feedbackMessageDown": "Please let us know what we could do to improve this page (optional)", "feedbackMessageUp": "Please let us know what we should keep doing more of (optional)", + "feedbackMessageToGithub": { + "main": "If you need an reply, or want to follow progress on the topic, please", + "link": "open an issue" + }, "feedbackNo": "No", "feedbackSubmitted": "Feedback submitted", "feedbackYes": "Yes", From 929eb2ce92d69fbd316ae6fa8de86d915aba34eb Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Wed, 2 Nov 2022 18:20:16 +0100 Subject: [PATCH 14/54] Apply suggestions from code review Co-authored-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Signed-off-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> --- .github/ISSUE_TEMPLATE/4.docs-feedback.yml | 6 +++--- docs/translations/translations.json | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/4.docs-feedback.yml b/.github/ISSUE_TEMPLATE/4.docs-feedback.yml index e112609ddba4c2..8b72a9bc1f5c8c 100644 --- a/.github/ISSUE_TEMPLATE/4.docs-feedback.yml +++ b/.github/ISSUE_TEMPLATE/4.docs-feedback.yml @@ -21,7 +21,7 @@ body: id: page-url attributes: label: Related page - description: Which page of the documentation is concerned? + description: Which page of the documentation is this about? placeholder: https://mui.com/material-ui/react-badge/ validations: required: true @@ -29,7 +29,7 @@ body: - type: dropdown attributes: label: Kind of issue - description: What version of our software are you running? + description: What kind of problem are you facing? options: - Unclear explanations - Missing information @@ -49,4 +49,4 @@ body: - type: textarea attributes: label: Context 🔦 - description: What are you trying to accomplish? Why were you browsing this documentation page? Providing context helps us come up with a solution that is more useful in the real world. + 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. diff --git a/docs/translations/translations.json b/docs/translations/translations.json index d2cbe7e829a00a..6852dbebd5f380 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -68,11 +68,11 @@ "feedbackCommentLabel": "Comment", "feedbackFailed": "Couldn't submit feedback. Please try again later.", "feedbackMessage": "Was this page helpful?", - "feedbackMessageDown": "Please let us know what we could do to improve this page (optional)", + "feedbackMessageDown": "How can we improve this page? (optional)", "feedbackMessageUp": "Please let us know what we should keep doing more of (optional)", "feedbackMessageToGithub": { - "main": "If you need an reply, or want to follow progress on the topic, please", - "link": "open an issue" + "main": "Is something broken? Do you need a reply to a problem you've encountered? Please", + "link": "open an issue." }, "feedbackNo": "No", "feedbackSubmitted": "Feedback submitted", From 11f33adeba403d1ae21e1e07138eb2f3ae54fe17 Mon Sep 17 00:00:00 2001 From: Alexandre Date: Wed, 9 Nov 2022 11:37:18 +0100 Subject: [PATCH 15/54] wordings --- .github/ISSUE_TEMPLATE/4.docs-feedback.yml | 2 +- docs/packages/markdown/parseMarkdown.js | 2 +- docs/translations/translations.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/4.docs-feedback.yml b/.github/ISSUE_TEMPLATE/4.docs-feedback.yml index 8b72a9bc1f5c8c..118b4d8274bd0c 100644 --- a/.github/ISSUE_TEMPLATE/4.docs-feedback.yml +++ b/.github/ISSUE_TEMPLATE/4.docs-feedback.yml @@ -42,7 +42,7 @@ body: attributes: label: Issue description description: | - Describe as precisely, what went wrong during your experience with this documentation page and what could we do to improve it. + 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 ... diff --git a/docs/packages/markdown/parseMarkdown.js b/docs/packages/markdown/parseMarkdown.js index e33444de672f17..34b72852f7b089 100644 --- a/docs/packages/markdown/parseMarkdown.js +++ b/docs/packages/markdown/parseMarkdown.js @@ -249,7 +249,7 @@ function createRender(context) { ``, '', '', - ``, ``, diff --git a/docs/translations/translations.json b/docs/translations/translations.json index 6852dbebd5f380..ce5457a63a8787 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -69,7 +69,7 @@ "feedbackFailed": "Couldn't submit feedback. Please try again later.", "feedbackMessage": "Was this page helpful?", "feedbackMessageDown": "How can we improve this page? (optional)", - "feedbackMessageUp": "Please let us know what we should keep doing more of (optional)", + "feedbackMessageUp": "What did you like about this page? (optional)", "feedbackMessageToGithub": { "main": "Is something broken? Do you need a reply to a problem you've encountered? Please", "link": "open an issue." From 36fd434edb7ca50507264c8fac0eeeeaca653576 Mon Sep 17 00:00:00 2001 From: Alexandre Date: Wed, 9 Nov 2022 11:37:29 +0100 Subject: [PATCH 16/54] button alignments --- docs/src/modules/components/MarkdownElement.js | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js index 05ff77b4e4e6e5..13462670a34f60 100644 --- a/docs/src/modules/components/MarkdownElement.js +++ b/docs/src/modules/components/MarkdownElement.js @@ -152,7 +152,6 @@ const Root = styled('div')(({ theme }) => ({ borderRadius: 8, color: theme.palette.text.secondary, float: 'right', - marginRight: '16px', cursor: 'pointer', '&:hover': { color: theme.palette.text.primary, From 0ea5e20ea9bb43fc940b2b8c97861d91ea8c0f62 Mon Sep 17 00:00:00 2001 From: Alexandre Date: Tue, 15 Nov 2022 13:38:01 +0100 Subject: [PATCH 17/54] vertically align --- docs/src/modules/components/MarkdownElement.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js index e1dda4de700820..7a5c091439c448 100644 --- a/docs/src/modules/components/MarkdownElement.js +++ b/docs/src/modules/components/MarkdownElement.js @@ -105,6 +105,7 @@ const Root = styled('div')( paddingLeft: 30, }, '& h1, & h2, & h3, & h4': { + position: 'relative', '& code': { fontSize: 'inherit', lineHeight: 'inherit', @@ -149,6 +150,9 @@ const Root = styled('div')( marginLeft: 10, height: '26px', width: '26px', + position: 'absolute', + top: `calc(50% - ${26/2}px)`, + right: 0, background: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`, border: '1px solid', borderColor: `var(--muidocs-palette-grey-200, ${lightTheme.palette.grey[200]})`, From bf5c0c199b49cdd5e203fd1ce48957dae57fc87b Mon Sep 17 00:00:00 2001 From: Alexandre Date: Tue, 15 Nov 2022 14:42:25 +0100 Subject: [PATCH 18/54] feedbacks --- .github/ISSUE_TEMPLATE/4.docs-feedback.yml | 2 +- .../modules/components/AppLayoutDocsFooter.js | 30 ++++++++++++++----- .../src/modules/components/MarkdownElement.js | 6 ++-- docs/translations/translations.json | 8 +++-- 4 files changed, 33 insertions(+), 13 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/4.docs-feedback.yml b/.github/ISSUE_TEMPLATE/4.docs-feedback.yml index 118b4d8274bd0c..88fac0f863eb2e 100644 --- a/.github/ISSUE_TEMPLATE/4.docs-feedback.yml +++ b/.github/ISSUE_TEMPLATE/4.docs-feedback.yml @@ -1,6 +1,6 @@ name: Docs feedback description: Improve documentation about MUI Core. -labels: ['status: needs triage', 'docs'] +labels: ['status: needs triage', 'support: docs-feedback'] title: '[docs] ' body: - type: markdown diff --git a/docs/src/modules/components/AppLayoutDocsFooter.js b/docs/src/modules/components/AppLayoutDocsFooter.js index 196aa7b4244535..0598ce8ef491ef 100644 --- a/docs/src/modules/components/AppLayoutDocsFooter.js +++ b/docs/src/modules/components/AppLayoutDocsFooter.js @@ -428,9 +428,22 @@ export default function AppLayoutDocsFooter(props) { onSubmit={handleSubmitComment} >
- - {rating === 1 ? t('feedbackMessageUp') : t('feedbackMessageDown')} - + {commentedSection.text ? ( + + ) : ( + + {rating === 1 ? t('feedbackMessageUp') : t('feedbackMessageDown')} + + )} {rating !== 1 && ( - - {t('feedbackMessageToGithub.main')}{' '} + + {t('feedbackMessageToGithub.usecases')} +
+ {t('feedbackMessageToGithub.callToAction.text')} - {t('feedbackMessageToGithub.link')} + {t('feedbackMessageToGithub.callToAction.link')} )}
- + + + {rating !== 1 && ( - + {t('feedbackMessageToGithub.usecases')}
{t('feedbackMessageToGithub.callToAction.text')} @@ -471,13 +478,7 @@ export default function AppLayoutDocsFooter(props) { )} - - - - - + From 26de531acfde0f8eb8f36e69cae2f388255b0a60 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 20 Nov 2022 20:44:38 +0100 Subject: [PATCH 20/54] tweak layout --- docs/src/modules/components/AppLayoutDocsFooter.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/modules/components/AppLayoutDocsFooter.js b/docs/src/modules/components/AppLayoutDocsFooter.js index 84803bd0d4cf99..4bd91b48130490 100644 --- a/docs/src/modules/components/AppLayoutDocsFooter.js +++ b/docs/src/modules/components/AppLayoutDocsFooter.js @@ -428,7 +428,7 @@ export default function AppLayoutDocsFooter(props) { onReset={handleCancelComment} onSubmit={handleSubmitComment} > - + {commentedSection.text ? ( - +