Merge branch 'master' into form-control-label-required

emlai · Apr 12, 2023 · 266d09f · 266d09f
2 parents 897b142 + 1a4263a
commit 266d09f
Show file tree

Hide file tree

Showing 217 changed files with 8,286 additions and 5,423 deletions.
diff --git a/docs/data/base/components/badge/AccessibleBadges.js b/docs/data/base/components/badge/AccessibleBadges.js
@@ -3,6 +3,25 @@ import { styled } from '@mui/system';
 import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled';
 import MailIcon from '@mui/icons-material/Mail';
 
+function notificationsLabel(count) {
+  if (count === 0) {
+    return 'no notifications';
+  }
+  if (count > 99) {
+    return 'more than 99 notifications';
+  }
+  return `${count} notifications`;
+}
+
+export default function AccessibleBadges() {
+  return (
+    <div aria-label={notificationsLabel(100)}>
+      <StyledBadge badgeContent={100}>
+        <MailIcon />
+      </StyledBadge>
+    </div>
+  );
+}
 const blue = {
   500: '#007FFF',
 };
@@ -46,23 +65,3 @@ const StyledBadge = styled(BadgeUnstyled)(
   }
   `,
 );
-
-function notificationsLabel(count) {
-  if (count === 0) {
-    return 'no notifications';
-  }
-  if (count > 99) {
-    return 'more than 99 notifications';
-  }
-  return `${count} notifications`;
-}
-
-export default function AccessibleBadges() {
-  return (
-    <div aria-label={notificationsLabel(100)}>
-      <StyledBadge badgeContent={100}>
-        <MailIcon />
-      </StyledBadge>
-    </div>
-  );
-}
diff --git a/docs/data/base/components/badge/AccessibleBadges.tsx b/docs/data/base/components/badge/AccessibleBadges.tsx
@@ -3,6 +3,25 @@ import { styled } from '@mui/system';
 import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled';
 import MailIcon from '@mui/icons-material/Mail';
 
+function notificationsLabel(count: number) {
+  if (count === 0) {
+    return 'no notifications';
+  }
+  if (count > 99) {
+    return 'more than 99 notifications';
+  }
+  return `${count} notifications`;
+}
+
+export default function AccessibleBadges() {
+  return (
+    <div aria-label={notificationsLabel(100)}>
+      <StyledBadge badgeContent={100}>
+        <MailIcon />
+      </StyledBadge>
+    </div>
+  );
+}
 const blue = {
   500: '#007FFF',
 };
@@ -46,23 +65,3 @@ const StyledBadge = styled(BadgeUnstyled)(
   }
   `,
 );
-
-function notificationsLabel(count: number) {
-  if (count === 0) {
-    return 'no notifications';
-  }
-  if (count > 99) {
-    return 'more than 99 notifications';
-  }
-  return `${count} notifications`;
-}
-
-export default function AccessibleBadges() {
-  return (
-    <div aria-label={notificationsLabel(100)}>
-      <StyledBadge badgeContent={100}>
-        <MailIcon />
-      </StyledBadge>
-    </div>
-  );
-}
diff --git a/docs/data/base/components/badge/BadgeMax.js b/docs/data/base/components/badge/BadgeMax.js
@@ -4,6 +4,21 @@ import { styled } from '@mui/system';
 import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled';
 import MailIcon from '@mui/icons-material/Mail';
 
+export default function BadgeMax() {
+  return (
+    <Stack spacing={4} direction="row">
+      <StyledBadge badgeContent={99}>
+        <MailIcon />
+      </StyledBadge>
+      <StyledBadge badgeContent={100}>
+        <MailIcon />
+      </StyledBadge>
+      <StyledBadge badgeContent={1000} max={999}>
+        <MailIcon />
+      </StyledBadge>
+    </Stack>
+  );
+}
 const blue = {
   500: '#007FFF',
 };
@@ -47,19 +62,3 @@ const StyledBadge = styled(BadgeUnstyled)(
   }
   `,
 );
-
-export default function BadgeMax() {
-  return (
-    <Stack spacing={4} direction="row">
-      <StyledBadge badgeContent={99}>
-        <MailIcon />
-      </StyledBadge>
-      <StyledBadge badgeContent={100}>
-        <MailIcon />
-      </StyledBadge>
-      <StyledBadge badgeContent={1000} max={999}>
-        <MailIcon />
-      </StyledBadge>
-    </Stack>
-  );
-}
diff --git a/docs/data/base/components/badge/BadgeMax.tsx b/docs/data/base/components/badge/BadgeMax.tsx
@@ -4,6 +4,21 @@ import { styled } from '@mui/system';
 import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled';
 import MailIcon from '@mui/icons-material/Mail';
 
+export default function BadgeMax() {
+  return (
+    <Stack spacing={4} direction="row">
+      <StyledBadge badgeContent={99}>
+        <MailIcon />
+      </StyledBadge>
+      <StyledBadge badgeContent={100}>
+        <MailIcon />
+      </StyledBadge>
+      <StyledBadge badgeContent={1000} max={999}>
+        <MailIcon />
+      </StyledBadge>
+    </Stack>
+  );
+}
 const blue = {
   500: '#007FFF',
 };
@@ -47,19 +62,3 @@ const StyledBadge = styled(BadgeUnstyled)(
   }
   `,
 );
-
-export default function BadgeMax() {
-  return (
-    <Stack spacing={4} direction="row">
-      <StyledBadge badgeContent={99}>
-        <MailIcon />
-      </StyledBadge>
-      <StyledBadge badgeContent={100}>
-        <MailIcon />
-      </StyledBadge>
-      <StyledBadge badgeContent={1000} max={999}>
-        <MailIcon />
-      </StyledBadge>
-    </Stack>
-  );
-}
diff --git a/docs/data/base/components/badge/BadgeVisibility.js b/docs/data/base/components/badge/BadgeVisibility.js
@@ -10,55 +10,6 @@ import MailIcon from '@mui/icons-material/Mail';
 import Switch from '@mui/material/Switch';
 import FormControlLabel from '@mui/material/FormControlLabel';
 
-const blue = {
-  500: '#007FFF',
-};
-
-const grey = {
-  300: '#afb8c1',
-  900: '#24292f',
-};
-
-const StyledBadge = styled(BadgeUnstyled)(
-  ({ theme }) => `
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  font-size: 14px;
-  list-style: none;
-  font-family: IBM Plex Sans, sans-serif;
-  position: relative;
-  display: inline-block;
-  line-height: 1;
-
-  & .${badgeUnstyledClasses.badge} {
-    z-index: auto;
-    position: absolute;
-    top: 0;
-    right: 0;
-    min-width: 22px;
-    height: 22px;
-    padding: 0 6px;
-    color: #fff;
-    font-weight: 600;
-    font-size: 12px;
-    line-height: 22px;
-    white-space: nowrap;
-    text-align: center;
-    border-radius: 12px;
-    background: ${blue[500]};
-    box-shadow: 0px 4px 6x ${theme.palette.mode === 'dark' ? grey[900] : grey[300]};
-    transform: translate(50%, -50%);
-    transform-origin: 100% 0; 
-  }
-
-  & .${badgeUnstyledClasses.invisible} {
-    opacity: 0;
-    pointer-events: none;
-  }
-  `,
-);
-
 export default function BadgeVisibility() {
   const [count, setCount] = React.useState(1);
   const [invisible, setInvisible] = React.useState(false);
@@ -117,3 +68,51 @@ export default function BadgeVisibility() {
     </Box>
   );
 }
+const blue = {
+  500: '#007FFF',
+};
+
+const grey = {
+  300: '#afb8c1',
+  900: '#24292f',
+};
+
+const StyledBadge = styled(BadgeUnstyled)(
+  ({ theme }) => `
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-size: 14px;
+  list-style: none;
+  font-family: IBM Plex Sans, sans-serif;
+  position: relative;
+  display: inline-block;
+  line-height: 1;
+
+  & .${badgeUnstyledClasses.badge} {
+    z-index: auto;
+    position: absolute;
+    top: 0;
+    right: 0;
+    min-width: 22px;
+    height: 22px;
+    padding: 0 6px;
+    color: #fff;
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 22px;
+    white-space: nowrap;
+    text-align: center;
+    border-radius: 12px;
+    background: ${blue[500]};
+    box-shadow: 0px 4px 6x ${theme.palette.mode === 'dark' ? grey[900] : grey[300]};
+    transform: translate(50%, -50%);
+    transform-origin: 100% 0; 
+  }
+
+  & .${badgeUnstyledClasses.invisible} {
+    opacity: 0;
+    pointer-events: none;
+  }
+  `,
+);
diff --git a/docs/data/base/components/badge/BadgeVisibility.tsx b/docs/data/base/components/badge/BadgeVisibility.tsx
@@ -10,55 +10,6 @@ import MailIcon from '@mui/icons-material/Mail';
 import Switch from '@mui/material/Switch';
 import FormControlLabel from '@mui/material/FormControlLabel';
 
-const blue = {
-  500: '#007FFF',
-};
-
-const grey = {
-  300: '#afb8c1',
-  900: '#24292f',
-};
-
-const StyledBadge = styled(BadgeUnstyled)(
-  ({ theme }) => `
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  font-size: 14px;
-  list-style: none;
-  font-family: IBM Plex Sans, sans-serif;
-  position: relative;
-  display: inline-block;
-  line-height: 1;
-
-  & .${badgeUnstyledClasses.badge} {
-    z-index: auto;
-    position: absolute;
-    top: 0;
-    right: 0;
-    min-width: 22px;
-    height: 22px;
-    padding: 0 6px;
-    color: #fff;
-    font-weight: 600;
-    font-size: 12px;
-    line-height: 22px;
-    white-space: nowrap;
-    text-align: center;
-    border-radius: 12px;
-    background: ${blue[500]};
-    box-shadow: 0px 4px 6x ${theme.palette.mode === 'dark' ? grey[900] : grey[300]};
-    transform: translate(50%, -50%);
-    transform-origin: 100% 0; 
-  }
-
-  & .${badgeUnstyledClasses.invisible} {
-    opacity: 0;
-    pointer-events: none;
-  }
-  `,
-);
-
 export default function BadgeVisibility() {
   const [count, setCount] = React.useState(1);
   const [invisible, setInvisible] = React.useState(false);
@@ -117,3 +68,51 @@ export default function BadgeVisibility() {
     </Box>
   );
 }
+const blue = {
+  500: '#007FFF',
+};
+
+const grey = {
+  300: '#afb8c1',
+  900: '#24292f',
+};
+
+const StyledBadge = styled(BadgeUnstyled)(
+  ({ theme }) => `
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-size: 14px;
+  list-style: none;
+  font-family: IBM Plex Sans, sans-serif;
+  position: relative;
+  display: inline-block;
+  line-height: 1;
+
+  & .${badgeUnstyledClasses.badge} {
+    z-index: auto;
+    position: absolute;
+    top: 0;
+    right: 0;
+    min-width: 22px;
+    height: 22px;
+    padding: 0 6px;
+    color: #fff;
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 22px;
+    white-space: nowrap;
+    text-align: center;
+    border-radius: 12px;
+    background: ${blue[500]};
+    box-shadow: 0px 4px 6x ${theme.palette.mode === 'dark' ? grey[900] : grey[300]};
+    transform: translate(50%, -50%);
+    transform-origin: 100% 0; 
+  }
+
+  & .${badgeUnstyledClasses.invisible} {
+    opacity: 0;
+    pointer-events: none;
+  }
+  `,
+);