Merge branch 'master' into issue/32214-custom-breakpoint-named-small

mui · Jun 3, 2022 · eae09c5 · eae09c5
2 parents 59dbfb7 + 0fa01ac
commit eae09c5
Show file tree

Hide file tree

Showing 248 changed files with 4,250 additions and 1,767 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,62 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.8.2
+
+<!-- generated comparing v5.8.1..master -->
+
+_May 30, 2022_
+
+A big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/system@5.8.2`
+
+- &#8203;<!-- 04 -->[system] Add `getColorSchemeSelector` util (#32868) @siriwatknp
+
+### `@mui/lab@5.0.0-alpha.84`
+
+- &#8203;<!-- 07 -->[Masonry] Place items to the left when there are less objects than specified in `column` prop (#32873) @hbjORbj
+
+### `@mui/base@5.0.0-alpha.83`
+
+- &#8203;<!-- 24 -->[BadgeUnstyled] Define ownerState and slot props' types (#32750) @michaldudak
+- &#8203;<!-- 06 -->[SliderUnstyled] Define ownerState and slot props' types (#32739) @michaldudak
+- &#8203;<!-- 05 -->[SwitchUnstyled] Define ownerState and slot props' types (#32573) @michaldudak
+- &#8203;<!-- 03 -->[TabsUnstyled] Define ownerState and slot props' types (#32918) @michaldudak
+- &#8203;<!-- 02 -->[TabUnstyled] Define ownerState and slot props' types (#32915) @michaldudak
+
+### `@mui/joy@5.0.0-alpha.30`
+
+- &#8203;<!-- 13 -->[Joy] use `textColor` prop for Typography and Link (#32938) @siriwatknp
+- &#8203;<!-- 12 -->[Joy] Make variants for more flexible (#32931) @siriwatknp
+- &#8203;<!-- 11 -->[Joy] Improve automatic adjustment (#32923) @siriwatknp
+- &#8203;<!-- 10 -->[Joy] Add `Chip` doc (#32819) @hbjORbj
+- &#8203;<!-- 09 -->[Joy] Add `AspectRatio` demos (#32848) @siriwatknp
+- &#8203;<!-- 08 -->[Joy] Fix wrong urls (#32883) @siriwatknp
+
+### Docs
+
+- &#8203;<!-- 24 -->[docs] Iterate on the job ad for React engineer in Core (#32900) @mnajdova
+- &#8203;<!-- 23 -->[blog] Fix avatar image resolution (#32890) @oliviertassinari
+- &#8203;<!-- 19 -->[docs] Link the first page of the product (#32943) @oliviertassinari
+- &#8203;<!-- 18 -->[docs] Batch small changes (#32170) @michaldudak
+- &#8203;<!-- 17 -->[docs] Allow function prop to return undefined (#32766) @m4theushw
+- &#8203;<!-- 16 -->[docs] Fix wrong link to Material Icons (#32847) @oliviertassinari
+- &#8203;<!-- 15 -->[docs] Fix ClassNameGenerator content (#32800) @siriwatknp
+- &#8203;<!-- 14 -->[docs] Fix navigation links (#32851) @oliviertassinari
+- &#8203;<!-- 14 -->[docs] Document the `size` prop for InputLabel (#32936) @romelperez
+- &#8203;<!-- 21 -->[docs] Add note about transparent background on the outlined Alert variant (#32810) @aaarichter
+- &#8203;<!-- 01 -->[website] Update the careers's page with the new roles (#32535) @oliviertassinari
+
+### Core
+
+- &#8203;<!-- 22 -->[core] Improve the incomplete issues workflow (#32878) @mnajdova
+- &#8203;<!-- 21 -->[core] Add CI check that the PR has label (#32886) @mnajdova
+- &#8203;<!-- 20 -->[core] Avoid leaking @babel/runtime (#32874) @oliviertassinari
+
+All contributors of this release in alphabetical order: @aaarichter, @hbjORbj, @m4theushw, @michaldudak, @mnajdova, @oliviertassinari, @romelperez, @siriwatknp
+
 ## 5.8.1
 
 <!-- generated comparing v5.8.0..master -->

diff --git a/benchmark/package.json b/benchmark/package.json
@@ -15,9 +15,9 @@
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mdx-js/react": "^2.1.1",
-    "@mui/material": "^5.8.1",
+    "@mui/material": "^5.8.2",
     "@mui/styles": "^5.8.0",
-    "@mui/system": "^5.8.1",
+    "@mui/system": "^5.8.2",
     "@styled-system/css": "^5.1.5",
     "benchmark": "^2.1.4",
     "playwright": "^1.17.1",
@@ -30,7 +30,7 @@
     "serve-handler": "^6.1.3",
     "styled-components": "^5.3.5",
     "theme-ui": "^0.14.5",
-    "webpack": "^5.72.0",
+    "webpack": "^5.72.1",
     "webpack-cli": "^4.9.2"
   }
 }
diff --git a/docs/data/base/components/badge/AccessibleBadges.js b/docs/data/base/components/badge/AccessibleBadges.js
@@ -7,7 +7,6 @@ const StyledBadge = styled(BadgeUnstyled)`
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  color: rgba(0, 0, 0, 0.85);
   font-size: 14px;
   list-style: none;
   font-family: IBM Plex Sans, sans-serif;

diff --git a/docs/data/base/components/badge/AccessibleBadges.tsx b/docs/data/base/components/badge/AccessibleBadges.tsx
@@ -7,7 +7,6 @@ const StyledBadge = styled(BadgeUnstyled)`
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  color: rgba(0, 0, 0, 0.85);
   font-size: 14px;
   list-style: none;
   font-family: IBM Plex Sans, sans-serif;

diff --git a/docs/data/base/components/badge/BadgeMax.js b/docs/data/base/components/badge/BadgeMax.js
@@ -8,7 +8,6 @@ const StyledBadge = styled(BadgeUnstyled)`
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  color: rgba(0, 0, 0, 0.85);
   font-size: 14px;
   list-style: none;
   font-family: IBM Plex Sans, sans-serif;

diff --git a/docs/data/base/components/badge/BadgeMax.tsx b/docs/data/base/components/badge/BadgeMax.tsx
@@ -8,7 +8,6 @@ const StyledBadge = styled(BadgeUnstyled)`
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  color: rgba(0, 0, 0, 0.85);
   font-size: 14px;
   list-style: none;
   font-family: IBM Plex Sans, sans-serif;

diff --git a/docs/data/base/components/badge/BadgeVisibility.js b/docs/data/base/components/badge/BadgeVisibility.js
@@ -14,7 +14,6 @@ const StyledBadge = styled(BadgeUnstyled)`
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  color: rgba(0, 0, 0, 0.85);
   font-size: 14px;
   list-style: none;
   font-family: IBM Plex Sans, sans-serif;

diff --git a/docs/data/base/components/badge/BadgeVisibility.tsx b/docs/data/base/components/badge/BadgeVisibility.tsx
@@ -14,7 +14,6 @@ const StyledBadge = styled(BadgeUnstyled)`
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  color: rgba(0, 0, 0, 0.85);
   font-size: 14px;
   list-style: none;
   font-family: IBM Plex Sans, sans-serif;

diff --git a/docs/data/base/components/badge/ShowZeroBadge.js b/docs/data/base/components/badge/ShowZeroBadge.js
@@ -8,7 +8,6 @@ const StyledBadge = styled(BadgeUnstyled)`
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  color: rgba(0, 0, 0, 0.85);
   font-size: 14px;
   list-style: none;
   font-family: IBM Plex Sans, sans-serif;

diff --git a/docs/data/base/components/badge/ShowZeroBadge.tsx b/docs/data/base/components/badge/ShowZeroBadge.tsx
@@ -8,7 +8,6 @@ const StyledBadge = styled(BadgeUnstyled)`
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  color: rgba(0, 0, 0, 0.85);
   font-size: 14px;
   list-style: none;
   font-family: IBM Plex Sans, sans-serif;

diff --git a/docs/data/base/components/badge/UnstyledBadge.js b/docs/data/base/components/badge/UnstyledBadge.js
@@ -6,7 +6,6 @@ const StyledBadge = styled(BadgeUnstyled)`
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  color: rgba(0, 0, 0, 0.85);
   font-size: 14px;
   font-variant: tabular-nums;
   list-style: none;

diff --git a/docs/data/base/components/badge/UnstyledBadge.tsx b/docs/data/base/components/badge/UnstyledBadge.tsx
@@ -6,7 +6,6 @@ const StyledBadge = styled(BadgeUnstyled)`
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  color: rgba(0, 0, 0, 0.85);
   font-size: 14px;
   font-variant: tabular-nums;
   list-style: none;

diff --git a/docs/data/base/components/click-away-listener/click-away-listener-pt.md b/docs/data/base/components/click-away-listener/click-away-listener-pt.md
@@ -10,7 +10,7 @@ packageName: '@mui/base'
 
 <p class="description">Detecta se um evento de clique ocorreu fora de um elemento. Ele ouve cliques que ocorrem em algum lugar no documento.</p>
 
-- 📦 [1.5 kB gzipped](/size-snapshot).
+- 📦 [1.5 kB gzipped](/size-snapshot/).
 - ⚛️ Suporte para portais
 
 [A paleta](/system/palette/) com funções de estilo.

diff --git a/docs/data/base/components/click-away-listener/click-away-listener-zh.md b/docs/data/base/components/click-away-listener/click-away-listener-zh.md
@@ -10,7 +10,7 @@ packageName: '@mui/base'
 
 <p class="description">用于检测点击事件是否发生在元素之外。 它可以监听文档中某处发生的点击事件。</p>
 
-- 📦 [1.5kB 已压缩的包](/size-snapshot)。
+- 📦 [1.5kB 已压缩的包](/size-snapshot/)。
 - ⚛️ 支持传送门组件
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}

diff --git a/docs/data/base/components/click-away-listener/click-away-listener.md b/docs/data/base/components/click-away-listener/click-away-listener.md
@@ -63,4 +63,4 @@ This is also required to fix a known issue in NVDA when using Firefox that preve
 
 ## Bundle size
 
-📦 [981 B gzipped](/size-snapshot).
+📦 [981 B gzipped](/size-snapshot/).
diff --git a/docs/data/base/components/popper/popper-pt.md b/docs/data/base/components/popper/popper-pt.md
@@ -22,7 +22,7 @@ githubLabel: 'component: Popper'
 
 - Clicking away does not hide the `Popper` component. If you need this behavior, you can use [`ClickAwayListener`](/base/react-click-away-listener/)
 
-**Bundle size**: 📦 [8 kB gzipped](/size-snapshot).
+**Bundle size**: 📦 [8 kB gzipped](/size-snapshot/).
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 

diff --git a/docs/data/base/components/popper/popper-zh.md b/docs/data/base/components/popper/popper-zh.md
@@ -22,7 +22,7 @@ githubLabel: 'component: Popper'
 
 - Clicking away does not hide the `Popper` component. If you need this behavior, you can use [`ClickAwayListener`](/base/react-click-away-listener/)
 
-**Bundle size**: 📦 [8 kB gzipped](/size-snapshot).
+**Bundle size**: 📦 [8 kB gzipped](/size-snapshot/).
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 

diff --git a/docs/data/base/components/popper/popper.md b/docs/data/base/components/popper/popper.md
@@ -49,4 +49,4 @@ These two callbacks allow the popper to unmount the child content when closed an
 
 ## Bundle size
 
-📦 [8 kB gzipped](/size-snapshot).
+📦 [8.1 kB gzipped](/size-snapshot/).
diff --git a/docs/data/base/components/textarea-autosize/textarea-autosize-pt.md b/docs/data/base/components/textarea-autosize/textarea-autosize-pt.md
@@ -10,7 +10,7 @@ packageName: '@mui/base'
 
 <p class="description">Um componente de texto para React que se ajusta conforme o conteúdo.</p>
 
-- 📦 [2.1 kB gzipped](/size-snapshot)
+- 📦 [2.1 kB gzipped](/size-snapshot/)
 
 O componente `TextareaAutosize` ajusta automaticamente a altura do textarea em eventos de teclado e redimensionamento de janela.
 

diff --git a/docs/data/base/components/textarea-autosize/textarea-autosize-zh.md b/docs/data/base/components/textarea-autosize/textarea-autosize-zh.md
@@ -10,7 +10,7 @@ packageName: '@mui/base'
 
 <p class="description">一个自适应内容大小的 React 文本框组件。</p>
 
-- 📦 [2.1kB 的压缩包](/size-snapshot)
+- 📦 [2.1kB 的压缩包](/size-snapshot/)
 
 当触发键盘和窗口大小事件的时候，`TextareaAutosize` 组件将自动调整的文本框的高度。
 

diff --git a/docs/data/base/components/textarea-autosize/textarea-autosize.md b/docs/data/base/components/textarea-autosize/textarea-autosize.md
@@ -42,4 +42,4 @@ Use the `maxRows` prop to define the maximum height of the component:
 
 ## Bundle size
 
-📦 [1.5 kB gzipped](/size-snapshot).
+📦 [1.5 kB gzipped](/size-snapshot/).
diff --git a/docs/data/base/getting-started/overview/overview.md b/docs/data/base/getting-started/overview/overview.md
@@ -5,31 +5,31 @@
 ## Introduction
 
 MUI Base is a library of unstyled React UI components.
-It features the same robust engineering as Material UI, but without implementing Material Design.
+It features the same robust engineering as [Material UI](/material-ui/getting-started/overview/), but without implementing Material Design.
 
 It includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components.
 
-With MUI Base, you can rapidly build on top of our foundational components using any styling solution you choose—no need to override any default style engines or settings.
+With MUI Base, you can rapidly build on top of our foundational components using any styling solution you choose—no need to override any default style engine or theme.
 
-> **Note:** _as of Q2 2022, Base is currently still in alpha._
->
-> We're adding new components regularly, and you're welcome to contribute!
->
-> Look for the [`package: base` label](https://github.com/mui/material-ui/labels/package%3A%20base) on open [issues](https://github.com/mui/material-ui/issues) and [pull requests](https://github.com/mui/material-ui/pulls) in the `@mui/material-ui` repository on GitHub to see what other community members are working on, and feel free to submit your own.
+:::info
+**Note:** _as of Q2 2022, Base is currently still in alpha._
+
+We're adding new components regularly, and you're welcome to contribute!
+
+Look for the [`package: base` label](https://github.com/mui/material-ui/labels/package%3A%20base) on open [issues](https://github.com/mui/material-ui/issues) and [pull requests](https://github.com/mui/material-ui/pulls) in the `@mui/material-ui` GitHub repository to see what other community members are working on, and feel free to submit your own.
+:::
 
 ## Advantages of MUI Base
 
 - **Ship faster:** MUI Base gives you the foundational building blocks you need to assemble a sleek and sophisticated user interface in a fraction of the time that it would take to do it all from scratch.
-
-- **You own the CSS:** unlike Material UI, which uses Emotion as a default style engine, MUI Base has no built-in styling solution.
+- **You own the CSS:** unlike Material UI, which uses emotion as a default style engine, MUI Base has no built-in styling solution.
   This means you have complete control over your app's CSS.
-
 - **Accessibility:** MUI Base components are built with accessibility in mind.
   We do our best to make all components screen reader-friendly, and offer suggestions for optimizing accessibility throughout our documentation.
 
-### MUI Base vs. Material UI
+## MUI Base vs. Material UI
 
-MUI Base features many of the same components as Material UI, but _without the Material Design implementation_.
+MUI Base features many of the same components as [Material UI](/material-ui/getting-started/overview/), but _without the Material Design implementation_.
 
 Base is not packaged with any default theme or built-in style engine.
 This makes it a great choice if you need complete control over how your app's CSS is implemented.

diff --git a/docs/data/joy/components/avatar/AvatarGroupVariables.js b/docs/data/joy/components/avatar/AvatarGroupVariables.js
@@ -113,7 +113,7 @@ export default function GroupedAvatars() {
               }}
               sx={{
                 maxWidth: 160,
-                '& .JoyInput-root': { '--Input-gutter': '1rem' },
+                '& .JoyInput-root': { '--Input-paddingInline': '1rem' },
               }}
             />
           ))}

diff --git a/docs/data/joy/components/avatar/AvatarGroupVariables.tsx b/docs/data/joy/components/avatar/AvatarGroupVariables.tsx
@@ -113,7 +113,7 @@ export default function GroupedAvatars() {
               }}
               sx={{
                 maxWidth: 160,
-                '& .JoyInput-root': { '--Input-gutter': '1rem' },
+                '& .JoyInput-root': { '--Input-paddingInline': '1rem' },
               }}
             />
           ))}

diff --git a/docs/data/joy/components/badge/NumberBadge.js b/docs/data/joy/components/badge/NumberBadge.js
@@ -21,7 +21,7 @@ export default function ColorBadge() {
         <IconButton size="sm" onClick={() => setCount((c) => c - 1)}>
           <Remove />
         </IconButton>
-        <Typography fontWeight="md" color="text.secondary">
+        <Typography fontWeight="md" textColor="text.secondary">
           {count}
         </Typography>
         <IconButton size="sm" onClick={() => setCount((c) => c + 1)}>

diff --git a/docs/data/joy/components/badge/NumberBadge.tsx b/docs/data/joy/components/badge/NumberBadge.tsx
@@ -21,7 +21,7 @@ export default function ColorBadge() {
         <IconButton size="sm" onClick={() => setCount((c) => c - 1)}>
           <Remove />
         </IconButton>
-        <Typography fontWeight="md" color="text.secondary">
+        <Typography fontWeight="md" textColor="text.secondary">
           {count}
         </Typography>
         <IconButton size="sm" onClick={() => setCount((c) => c + 1)}>

diff --git a/docs/data/joy/components/card/BasicCard.js b/docs/data/joy/components/card/BasicCard.js
@@ -26,7 +26,7 @@ export default function BasicCard() {
         <BookmarkAdd />
       </IconButton>
 
-      <AspectRatio min="120px" max="200px" sx={{ my: 2 }}>
+      <AspectRatio minHeight="120px" maxHeight="200px" sx={{ my: 2 }}>
         <img
           src="https://images.unsplash.com/photo-1527549993586-dff825b37782?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270"
           alt=""

diff --git a/docs/data/joy/components/card/BasicCard.tsx b/docs/data/joy/components/card/BasicCard.tsx
@@ -0,0 +1,54 @@
+import * as React from 'react';
+import AspectRatio from '@mui/joy/AspectRatio';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import Card from '@mui/joy/Card';
+import IconButton from '@mui/joy/IconButton';
+import Typography from '@mui/joy/Typography';
+import BookmarkAdd from '@mui/icons-material/BookmarkAddOutlined';
+
+export default function BasicCard() {
+  return (
+    <Card variant="outlined" sx={{ minWidth: '320px' }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
+        <Typography level="h2" fontSize="md" sx={{ alignSelf: 'flex-start' }}>
+          Yosemite National Park
+        </Typography>
+        <Typography level="body2">April 24 to May 02, 2021</Typography>
+      </Box>
+      <IconButton
+        aria-label="bookmark Bahamas Islands"
+        variant="plain"
+        color="neutral"
+        size="sm"
+        sx={{ position: 'absolute', top: '0.5rem', right: '0.5rem' }}
+      >
+        <BookmarkAdd />
+      </IconButton>
+
+      <AspectRatio minHeight="120px" maxHeight="200px" sx={{ my: 2 }}>
+        <img
+          src="https://images.unsplash.com/photo-1527549993586-dff825b37782?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270"
+          alt=""
+        />
+      </AspectRatio>
+      <Box sx={{ display: 'flex' }}>
+        <div>
+          <Typography level="body3">Total price:</Typography>
+          <Typography fontSize="lg" fontWeight="lg">
+            $2900
+          </Typography>
+        </div>
+        <Button
+          variant="solid"
+          size="sm"
+          color="primary"
+          aria-label="Explore Bahamas Islands"
+          sx={{ ml: 'auto', fontWeight: 600 }}
+        >
+          Explore
+        </Button>
+      </Box>
+    </Card>
+  );
+}