Merge branch 'master' into remove-design-feedback-alert

danilo-leal · Nov 1, 2023 · bef1807 · bef1807
2 parents f8ec395 + b601521
commit bef1807
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 16 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -39,8 +39,6 @@ jobs:
           # Don't need playwright in this job
           PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
       - run: yarn release:build
-      # double run to check if cleanup works
-      - run: yarn release:build
       - run: yarn release:changelog
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

diff --git a/docs/src/modules/components/ApiPage.js b/docs/src/modules/components/ApiPage.js
@@ -6,6 +6,9 @@ import { exactProp } from '@mui/utils';
 import Typography from '@mui/material/Typography';
 import Divider from '@mui/material/Divider';
 import Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
+import ReviewsRoundedIcon from '@mui/icons-material/ReviewsRounded';
+import VerifiedRoundedIcon from '@mui/icons-material/VerifiedRounded';
 import { alpha } from '@mui/material/styles';
 import { useTranslate, useUserLanguage } from 'docs/src/modules/utils/i18n';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
@@ -193,12 +196,45 @@ export default function ApiPage(props) {
           {disableAd ? null : <Ad />}
         </Typography>
         <Heading hash="demos" />
-        <div
-          dangerouslySetInnerHTML={{
-            __html: `<p>For examples and details on the usage of this React component, visit the component demo pages:</p>
+        <Alert
+          severity="success"
+          variant="outlined"
+          icon={<VerifiedRoundedIcon sx={{ fontSize: 20 }} />}
+          sx={[
+            (theme) => ({
+              mt: 1.5,
+              pt: 1,
+              px: 2,
+              pb: 0,
+              fontSize: theme.typography.pxToRem(16),
+              backgroundColor: (theme.vars || theme).palette.success[50],
+              borderColor: (theme.vars || theme).palette.success[100],
+              '& * p': {
+                mb: 1,
+              },
+              '& * a': {
+                fontWeight: theme.typography.fontWeightMedium,
+                color: (theme.vars || theme).palette.success[900],
+                textDecorationColor: alpha(theme.palette.success[600], 0.3),
+              },
+              ...theme.applyDarkStyles({
+                '& * a': {
+                  color: (theme.vars || theme).palette.success[100],
+                  textDecorationColor: alpha(theme.palette.success[100], 0.3),
+                },
+                backgroundColor: alpha(theme.palette.success[700], 0.15),
+                borderColor: alpha(theme.palette.success[600], 0.3),
+              }),
+            }),
+          ]}
+        >
+          <span
+            dangerouslySetInnerHTML={{
+              __html: `<p>For examples and details on the usage of this React component, visit the component demo pages:</p>
               ${demos}`,
-          }}
-        />
+            }}
+          />
+        </Alert>
         <Heading hash="import" />
         <HighlightedCode
           code={pageContent.imports.join(`

diff --git a/docs/src/modules/components/DiamondSponsors.js b/docs/src/modules/components/DiamondSponsors.js
@@ -121,7 +121,7 @@ export default function DiamondSponsors() {
           />
         </StyledAnchor>
         <Link
-          aria-label={t('diamondSponsors')}
+          aria-label={`${t('becomeADiamondSponsor')}${t('diamondSponsorVacancies')}`}
           rel="noopener noreferrer"
           href="/material-ui/discover-more/backers/#diamond"
           sx={(theme) => ({
@@ -157,12 +157,10 @@ export default function DiamondSponsors() {
           })}
         >
           <Typography variant="caption" fontWeight="semiBold" textAlign="center">
-            {/* eslint-disable-next-line material-ui/no-hardcoded-labels */}
-            {'Become a diamond sponsor!'}
+            {t('becomeADiamondSponsor')}
           </Typography>
           <Typography variant="caption" fontWeight="regular" color="text.secondary">
-            {/* eslint-disable-next-line material-ui/no-hardcoded-labels */}
-            {'One spot left'}
+            {t('diamondSponsorVacancies')}
           </Typography>
         </Link>
       </Stack>

diff --git a/docs/src/modules/components/Notifications.js b/docs/src/modules/components/Notifications.js
@@ -31,21 +31,25 @@ const Paper = styled(MuiPaper)({
   transformOrigin: 'top right',
   backgroundImage: 'none',
 });
+
 const List = styled(MuiList)(({ theme }) => ({
   width: theme.spacing(40),
   maxHeight: 540,
   overflow: 'auto',
   padding: theme.spacing(1, 0),
 }));
+
 const ListItem = styled(MuiListItem)({
   display: 'flex',
   flexDirection: 'column',
 });
+
 const Loading = styled('div')(({ theme }) => ({
   display: 'flex',
   justifyContent: 'center',
   margin: theme.spacing(3, 0),
 }));
+
 const Divider = styled(MuiDivider)(({ theme }) => ({
   margin: theme.spacing(1, 0),
 }));
@@ -152,23 +156,31 @@ export default function Notifications() {
     <React.Fragment>
       <Tooltip
         open={tooltipOpen}
+        title={t('toggleNotifications')}
+        enterDelay={300}
         onOpen={() => {
           setTooltipOpen(!open);
         }}
         onClose={() => {
           setTooltipOpen(false);
         }}
-        title={t('toggleNotifications')}
-        enterDelay={300}
       >
         <IconButton
           color="primary"
           ref={anchorRef}
           aria-controls={open ? 'notifications-popup' : undefined}
           aria-haspopup="true"
-          onClick={handleToggle}
+          aria-label={`${
+            messageList
+              ? messageList.reduce(
+                  (count, message) => (message.id > lastSeen ? count + 1 : count),
+                  0,
+                )
+              : 0
+          } ${t('toggleNotifications')}`}
           data-ga-event-category="AppBar"
           data-ga-event-action="toggleNotifications"
+          onClick={handleToggle}
         >
           <Badge
             color="error"

diff --git a/docs/translations/translations.json b/docs/translations/translations.json
@@ -13,7 +13,7 @@
     "default": "Default",
     "defaultValue": "Default value",
     "defaultHTMLTag": "Default HTML tag",
-    "demos": "Demos",
+    "demos": "Component demos",
     "deprecated": "Deprecated",
     "description": "Description",
     "globalClass": "Global class",
@@ -93,6 +93,8 @@
   "demoStylingSelectTailwind": "Tailwind CSS",
   "demoStylingSelectCSS": "Plain CSS",
   "diamondSponsors": "Diamond Sponsors",
+  "becomeADiamondSponsor": "Become a Diamond Sponsor",
+  "diamondSponsorVacancies": "One spot left!",
   "editorHint": "Press <kbd>Enter</kbd> to start editing",
   "editPage": "Edit this page",
   "emojiLove": "Love",
@@ -192,6 +194,7 @@
   "v5IsOut": "🎉 v5 release candidate is out! Head to the",
   "v5docsLink": "v5 documentation",
   "v5startAdoption": "to get started.",
+  "unreadNotifications": "unread notifications",
   "usage": "Usage",
   "usageButton": "Explore the docs",
   "usageDescr": "MUI components work without any additional setup, and don't pollute the global scope.",