Merge branch 'master' into pr/41383

mui · Mar 8, 2024 · 7f3bd71 · 7f3bd71
2 parents dc4237d + 91193fa
commit 7f3bd71
Show file tree

Hide file tree

Showing 123 changed files with 2,353 additions and 551 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -385,6 +385,7 @@ jobs:
           name: Test umd release
           command: pnpm test:umd
   test_e2e_website:
+    # NOTE: This workflow runs after successful docs deploy. See /test/e2e-website/README.md#ci
     <<: *defaults
     docker:
       - image: mcr.microsoft.com/playwright:v1.42.1-focal

diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -9,6 +9,7 @@
     "packages/mui-base",
     "packages/mui-codemod",
     "packages/mui-core-downloads-tracker",
+    "packages/mui-docs",
     "packages/mui-icons-material",
     "packages/mui-joy",
     "packages/mui-lab",
@@ -28,6 +29,7 @@
     "@mui/base": "packages/mui-base/build",
     "@mui/codemod": "packages/mui-codemod/build",
     "@mui/core-downloads-tracker": "packages/mui-core-downloads-tracker/build",
+    "@mui/docs": "packages/mui-docs/build",
     "@mui/icons-material": "packages/mui-icons-material/build",
     "@mui/internal-babel-macros": "packages/mui-babel-macros",
     "@mui/internal-markdown": "packages/markdown",

diff --git a/.eslintignore b/.eslintignore
@@ -23,7 +23,7 @@
 /packages/pigment-react/processors/
 /packages/pigment-react/exports/
 /packages/pigment-react/theme/
-/packages/pigment-react/tests/fixtures/
+/packages/pigment-react/tests/**/fixtures
 /packages/pigment-nextjs-plugin/loader.js
 # Ignore fixtures
 /packages-internal/scripts/typescript-to-proptypes/test/*/*

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,10 @@ _Mar 5, 2024_
 A big thanks to the 21 contributors who made this release possible.
 This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
 
+### `@pigment-css/[email protected]`, `@pigment-css/[email protected]`, `@pigment-css/[email protected]`, & `@pigment-css/[email protected]`
+
+- This is the first public release of our new zero-runtime CSS-in-JS library, Pigment CSS.
+
 ### `@mui/[email protected]`
 
 - &#8203;<!-- 52 -->Support props callback type in theme variants (#40946) @ZeeshanTamboli

diff --git a/docs/data/base/components/snackbar/TransitionComponentSnackbar.tsx b/docs/data/base/components/snackbar/TransitionComponentSnackbar.tsx
@@ -10,7 +10,7 @@ export default function TransitionComponentSnackbar() {
   const [exited, setExited] = React.useState(true);
   const nodeRef = React.useRef(null);
 
-  const handleClose = (_: any, reason: SnackbarCloseReason) => {
+  const handleClose = (_: any, reason?: SnackbarCloseReason) => {
     if (reason === 'clickaway') {
       return;
     }

diff --git a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.tsx b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.tsx
@@ -11,7 +11,7 @@ export default function UnstyledSnackbarIntroduction() {
   const [exited, setExited] = React.useState(true);
   const nodeRef = React.useRef(null);
 
-  const handleClose = (_: any, reason: SnackbarCloseReason) => {
+  const handleClose = (_: any, reason?: SnackbarCloseReason) => {
     if (reason === 'clickaway') {
       return;
     }

diff --git a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/system/index.tsx b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/system/index.tsx
@@ -11,7 +11,7 @@ export default function UnstyledSnackbarIntroduction() {
   const [exited, setExited] = React.useState(true);
   const nodeRef = React.useRef(null);
 
-  const handleClose = (_: any, reason: SnackbarCloseReason) => {
+  const handleClose = (_: any, reason?: SnackbarCloseReason) => {
     if (reason === 'clickaway') {
       return;
     }

diff --git a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/tailwind/index.tsx b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/tailwind/index.tsx
@@ -18,7 +18,7 @@ export default function UnstyledSnackbarIntroduction() {
   const [exited, setExited] = React.useState(true);
   const nodeRef = React.useRef(null);
 
-  const handleClose = (_: any, reason: SnackbarCloseReason) => {
+  const handleClose = (_: any, reason?: SnackbarCloseReason) => {
     if (reason === 'clickaway') {
       return;
     }

diff --git a/docs/data/joy/integrations/icon-libraries/IconFontSizes.js b/docs/data/joy/integrations/icon-libraries/IconFontSizes.js
@@ -1,19 +1,22 @@
 import * as React from 'react';
-import { useTheme } from '@mui/joy/styles';
 import Stack from '@mui/joy/Stack';
 import Person from '@mui/icons-material/Person';
 
 export default function IconFontSizes() {
-  const theme = useTheme();
   return (
     <Stack
       spacing={2}
       direction="row"
       sx={{ gridColumn: '1 / -1', alignItems: 'center', justifyContent: 'center' }}
     >
-      {Object.keys(theme.fontSize).map((size) => (
-        <Person key={size} fontSize={size} />
-      ))}
+      <Person fontSize="xs" />
+      <Person fontSize="sm" />
+      <Person fontSize="md" />
+      <Person fontSize="lg" />
+      <Person fontSize="xl" />
+      <Person fontSize="xl2" />
+      <Person fontSize="xl3" />
+      <Person fontSize="xl4" />
     </Stack>
   );
 }
diff --git a/docs/data/joy/integrations/icon-libraries/IconFontSizes.tsx b/docs/data/joy/integrations/icon-libraries/IconFontSizes.tsx
@@ -1,19 +1,22 @@
 import * as React from 'react';
-import { useTheme } from '@mui/joy/styles';
 import Stack from '@mui/joy/Stack';
 import Person from '@mui/icons-material/Person';
 
 export default function IconFontSizes() {
-  const theme = useTheme();
   return (
     <Stack
       spacing={2}
       direction="row"
       sx={{ gridColumn: '1 / -1', alignItems: 'center', justifyContent: 'center' }}
     >
-      {Object.keys(theme.fontSize).map((size) => (
-        <Person key={size} fontSize={size} />
-      ))}
+      <Person fontSize="xs" />
+      <Person fontSize="sm" />
+      <Person fontSize="md" />
+      <Person fontSize="lg" />
+      <Person fontSize="xl" />
+      <Person fontSize="xl2" />
+      <Person fontSize="xl3" />
+      <Person fontSize="xl4" />
     </Stack>
   );
 }
diff --git a/docs/data/joy/integrations/icon-libraries/IconFontSizes.tsx.preview b/docs/data/joy/integrations/icon-libraries/IconFontSizes.tsx.preview
@@ -1,3 +1,8 @@
-{Object.keys(theme.fontSize).map((size) => (
-  <Person key={size} fontSize={size} />
-))}
+<Person fontSize="xs" />
+<Person fontSize="sm" />
+<Person fontSize="md" />
+<Person fontSize="lg" />
+<Person fontSize="xl" />
+<Person fontSize="xl2" />
+<Person fontSize="xl3" />
+<Person fontSize="xl4" />
diff --git a/docs/data/joy/main-features/color-inversion/color-inversion.md b/docs/data/joy/main-features/color-inversion/color-inversion.md
@@ -35,7 +35,7 @@ The color inversion feature is only available for `soft` and `solid` variants be
 - It works for both light and dark mode.
 - It can be disabled at any time without impacting the structure of the components.
 - It is an opt-in feature. If you don't use it, the extra CSS variables won't be included in the production style sheet.
-- Some children can be excluded from the color inversion, see ["skip color inversion on a child"](#skip-color-inversion-on-a-child) section.
+- Some children can be excluded from the color inversion, see ["skip color inversion on a child"](#skip-inversion-on-a-child) section.
 
 ### Trade-offs
 

diff --git a/docs/notifications.json b/docs/notifications.json
@@ -1,22 +1,22 @@
 [
   {
     "id": 68,
-    "title": "<b>Check out Base UI today</b> 💥",
+    "title": "Check out Base UI today 💥",
     "text": "Love Material UI, but don't need Material Design? Try Base UI, the new \"unstyled\" alternative. <a style=\"color: inherit;\" data-ga-event-category=\"Blog\" data-ga-event-action=\"notification\" data-ga-event-label=\"introducing-base-ui\" href=\"/blog/introducing-base-ui/\">Read more in this announcement</a>."
   },
   {
     "id": 78,
-    "title": "<b>MUI X v6.18.x and the latest improvements before the next major</b>",
+    "title": "MUI X v6.18.x and the latest improvements before the next major",
     "text": "New stable components, polished features, better performance and more. Check out the details in our <a style=\"color: inherit;\" data-ga-event-category=\"Announcement\" data-ga-event-action=\"notification\" data-ga-event-label=\"mui-x-end-v6\" href=\"https://mui.com/blog/mui-x-end-v6-features/\">recent blog post</a>."
   },
   {
     "id": 79,
-    "title": "<b>A new Developer Survey is open</b>",
+    "title": "A new Developer Survey is open",
     "text": "Take a few minutes to share your feedback and expectations in the <a style=\"color: inherit;\" data-ga-event-category=\"Announcement\" data-ga-event-action=\"notification\" data-ga-event-label=\"mui-survey\" href=\"https://tally.so/r/3Ex4PN?source=docs-notification\">Developer Survey</a>."
   },
   {
     "id": 80,
-    "title": "<b>MUI X v7.0.0-beta.0</b>",
+    "title": "MUI X v7.0.0-beta.0",
     "text": "Featuring new components and multiple enhancements for both developers and end-users. Discover all the specifics in the <a style=\"color: inherit;\" data-ga-event-category=\"Announcement\" data-ga-event-action=\"notification\" data-ga-event-label=\"mui-x-v7-beta\" href=\"https://mui.com/blog/mui-x-v7-beta/\">announcement blog post</a>."
   }
 ]
diff --git a/docs/pages/blog/base-ui-2024-plans.md b/docs/pages/blog/base-ui-2024-plans.md
@@ -10,7 +10,7 @@ card: true
 The [story of Base UI](/blog/introducing-base-ui/) began several years ago—long before headless React component libraries skyrocketed in popularity—when we started to imagine a world in which Material UI could exist without Material Design.
 
 We're super excited to share that this dream is becoming a reality!
-This year will see a lot of investment in Base UI as we expand the team ([we're hiring!](/careers/staff-ui-engineer-base-ui/)) and focus hard on a stable release (tentatively planned for late 2024), which will come full of new components, features, and improvements.
+This year will see a lot of investment in Base UI as we expand the team and focus hard on a stable release (tentatively planned for late 2024), which will come full of new components, features, and improvements.
 
 Let's walk through some of the things we're cooking up.
 
@@ -97,11 +97,9 @@ To acknowledge that Base UI has the potential to outgrow Material UI, we plan
 The new repository is live－[check it out on GitHub](https://github.com/mui/base-ui)!
 :::
 
-## Join us on the ride
+## Help us on the ride
 
-If you're passionate about extending the web platform with powerful, accessible, unstyled components, [we're hiring UI Engineers](/careers/staff-ui-engineer-base-ui/) to work on the Base UI team and help us accelerate its growth.
-
-Lastly, we'd love to hear your feedback.
+We'd love to hear your feedback.
 The best place to share your ideas and requests is in [the GitHub repository](https://github.com/mui/base-ui/issues).
 Check out the existing issues and add your thoughts, and feel free to open your own issue if you don't see your concerns addressed elsewhere.
 

diff --git a/docs/pages/careers.tsx b/docs/pages/careers.tsx
@@ -158,12 +158,6 @@ const openRolesData = [
       //     'You will strengthen the MUI X product, build ambitious and complex new features, work on strategic problems, and help grow adoption.',
       //   url: '/careers/react-engineer-x/',
       // },
-      {
-        title: 'Staff UI Engineer — Base UI',
-        description:
-          'Research, build, document, and ship high-quality, unstyled UI components with a focus on a11y.',
-        url: '/careers/staff-ui-engineer-base-ui/',
-      },
     ],
   },
   {

diff --git a/docs/pages/experiments/base/components-gallery.tsx b/docs/pages/experiments/base/components-gallery.tsx
@@ -143,7 +143,7 @@ export default function ComponentsGallery() {
   const [exited, setExited] = React.useState(true);
   const nodeRef = React.useRef(null);
 
-  const handleClose = (_: any, reason: SnackbarCloseReason) => {
+  const handleClose = (_: any, reason?: SnackbarCloseReason) => {
     if (reason === 'clickaway') {
       return;
     }
@@ -208,7 +208,7 @@ export default function ComponentsGallery() {
     setCopySnackbarOpen(true);
   }
 
-  const handleCopyClose = (_: any, reason: SnackbarCloseReason) => {
+  const handleCopyClose = (_: any, reason?: SnackbarCloseReason) => {
     if (reason === 'clickaway') {
       return;
     }

diff --git a/docs/src/components/productBaseUI/BaseUIThemesDemo.tsx b/docs/src/components/productBaseUI/BaseUIThemesDemo.tsx
@@ -785,7 +785,7 @@ export default function BaseUIThemesDemo() {
   // Snackbar
   const [openSnackbar, setOpenSnackbar] = React.useState(false);
 
-  const handleCloseSnackbar = (_: any, reason: SnackbarCloseReason) => {
+  const handleCloseSnackbar = (_: any, reason?: SnackbarCloseReason) => {
     if (reason === 'clickaway') {
       return;
     }

diff --git a/docs/src/components/showcase/TaskCard.tsx b/docs/src/components/showcase/TaskCard.tsx
@@ -33,7 +33,7 @@ export default function TaskCard() {
           </Typography>
         </Box>
         <Box sx={{ my: 'auto' }}>
-          <CodeRounded color="white" />
+          <CodeRounded />
           <Typography fontSize={18} component="div" fontWeight="semiBold" sx={{ lineHeight: 1.4 }}>
             Customize every button and chip instance primary color
           </Typography>

diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts
@@ -65,6 +65,22 @@ declare module '@mui/material/Chip' {
   }
 }
 
+declare module '@mui/material/SvgIcon' {
+  interface SvgIconPropsColorOverrides {
+    danger: true;
+  }
+  interface SvgIconPropsSizeOverrides {
+    xs: true;
+    sm: true;
+    md: true;
+    lg: true;
+    xl: true;
+    xl2: true;
+    xl3: true;
+    xl4: true;
+  }
+}
+
 // TODO: enable this once types conflict is fixed
 // declare module '@mui/material/Button' {
 //   interface ButtonPropsVariantOverrides {
@@ -505,7 +521,7 @@ export function getThemedComponents(): ThemeOptions {
                 borderColor: (theme.vars || theme).palette.primaryDark[100],
                 boxShadow: `${alpha(theme.palette.grey[50], 0.5)} 0 2px 0.5px inset, ${alpha(
                   theme.palette.grey[100],
-                  0.8,
+                  0.5,
                 )} 0 -2px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
                 '&:hover': {
                   backgroundColor: (theme.vars || theme).palette.primaryDark[50],
@@ -514,10 +530,7 @@ export function getThemedComponents(): ThemeOptions {
                   color: (theme.vars || theme).palette.primaryDark[100],
                   borderColor: alpha(theme.palette.primaryDark[600], 0.5),
                   backgroundColor: alpha(theme.palette.primaryDark[700], 0.4),
-                  boxShadow: `${alpha(theme.palette.primaryDark[600], 0.2)} 0 2px 0 inset, ${alpha(
-                    theme.palette.primaryDark[900],
-                    0.5,
-                  )} 0 -3px 1px inset, ${theme.palette.common.black} 0 1px 2px 0`,
+                  boxShadow: `${alpha(theme.palette.primaryDark[600], 0.1)} 0 2px 0 inset, ${alpha(theme.palette.primaryDark[900], 0.5)} 0 -2px 1px inset, ${theme.palette.common.black} 0 1px 2px 0`,
                   '&:hover': {
                     backgroundColor: (theme.vars || theme).palette.primaryDark[700],
                   },
@@ -790,6 +803,9 @@ export function getThemedComponents(): ThemeOptions {
                 '&:hover, &:focus': {
                   backgroundColor: (theme.vars || theme).palette.grey[50],
                 },
+                '&:focus-visible': {
+                  outline: 'none',
+                },
                 '&.Mui-selected': {
                   fontWeight: 500,
                   color: (theme.vars || theme).palette.primary[600],

diff --git a/docs/src/modules/components/ApiPage.js b/docs/src/modules/components/ApiPage.js
@@ -247,7 +247,7 @@ export default function ApiPage(props) {
 `)}
           language="jsx"
         />
-        <span dangerouslySetInnerHTML={{ __html: t('api-docs.importDifference') }} />
+        <p dangerouslySetInnerHTML={{ __html: t('api-docs.importDifference') }} />
         {componentDescription ? (
           <React.Fragment>
             <br />

diff --git a/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx b/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx
@@ -56,8 +56,8 @@ const Root = styled('div')<{ ownerState: { type?: DescriptionType } }>(
       p: { marginBottom: theme.spacing(1.5) },
     },
     '& .MuiApi-item-note': {
-      fontSize: 11,
-      marginLeft: 6,
+      fontSize: 12,
+      marginLeft: 2,
       letterSpacing: '1px',
       textTransform: 'uppercase',
       color: `var(--muidocs-palette-success-800, ${lightTheme.palette.success[800]})`,