Merge branch 'master' into fix/js-anim

Signed-off-by: atomiks <[email protected]>
mui · Feb 18, 2025 · b7a095f · b7a095f
2 parents e69ca40 + 7db5bed
commit b7a095f
Show file tree

Hide file tree

Showing 62 changed files with 1,618 additions and 1,335 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -269,7 +269,7 @@ jobs:
     <<: *default-job
     resource_class: 'medium+'
     docker:
-      - image: mcr.microsoft.com/playwright:v1.50.0-noble
+      - image: mcr.microsoft.com/playwright:v1.50.1-noble
     steps:
       - checkout
       - install_js:
@@ -294,7 +294,7 @@ jobs:
   test_regressions:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.50.0-noble
+      - image: mcr.microsoft.com/playwright:v1.50.1-noble
     steps:
       - checkout
       - install_js:
@@ -309,7 +309,7 @@ jobs:
   test_e2e:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.50.0-noble
+      - image: mcr.microsoft.com/playwright:v1.50.1-noble
     steps:
       - checkout
       - install_js:

diff --git a/babel.config.js b/babel.config.js
@@ -99,9 +99,6 @@ module.exports = function getBabelConfig(api) {
       },
     ],
     env: {
-      coverage: {
-        plugins: ['babel-plugin-istanbul', ...devPlugins],
-      },
       development: {
         plugins: devPlugins,
       },

diff --git a/docs/package.json b/docs/package.json
@@ -25,7 +25,7 @@
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/mdx": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
-    "@mui/system": "6.4.2",
+    "@mui/system": "6.4.3",
     "@next/mdx": "^15.1.6",
     "@react-spring/web": "^9.7.5",
     "@stefanprobst/rehype-extract-toc": "^2.2.1",

diff --git a/docs/src/app/(private)/experiments/accordion/accordion.horizontal.module.css b/docs/src/app/(private)/experiments/accordion/accordion.horizontal.module.css
@@ -7,12 +7,12 @@
 }
 
 .root {
-  --shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
-    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+  --shadow: 0px 2px 1px -1px rgb(0 0 0 / 0.2), 0px 1px 1px 0px rgb(0 0 0 / 0.14),
+    0px 1px 3px 0px rgb(0 0 0 / 0.12);
 
   font-family: system-ui, sans-serif;
   box-shadow: var(--shadow);
-  background-color: rgba(0, 0, 0, 0.12);
+  background-color: rgb(0 0 0 / 0.12);
   border-radius: 0.3rem;
   height: 40rem;
   display: inline-flex;
@@ -21,7 +21,7 @@
 .item {
   position: relative;
   background-color: #fff;
-  color: rgba(0, 0, 0, 0.87);
+  color: rgb(0 0 0 / 0.87);
   display: flex;
 }
 
@@ -73,7 +73,7 @@
 
 .trigger:focus-visible {
   outline: 0;
-  background-color: rgba(0, 0, 0, 0.88);
+  background-color: rgb(0 0 0 / 0.88);
   color: #eee;
 }
 

diff --git a/docs/src/app/(private)/experiments/accordion/accordion.module.css b/docs/src/app/(private)/experiments/accordion/accordion.module.css
@@ -1,16 +1,18 @@
-@keyframes slideDown {
+@keyframes slide-down {
   from {
     height: 0;
   }
+
   to {
     height: var(--accordion-panel-height);
   }
 }
 
-@keyframes slideUp {
+@keyframes slide-up {
   from {
     height: var(--accordion-panel-height);
   }
+
   to {
     height: 0;
   }
@@ -26,19 +28,19 @@
 
 .root {
   --duration: 300ms;
-  --shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
-    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+  --shadow: 0px 2px 1px -1px rgb(0 0 0 / 0.2), 0px 1px 1px 0px rgb(0 0 0 / 0.14),
+    0px 1px 3px 0px rgb(0 0 0 / 0.12);
 
   font-family: system-ui, sans-serif;
   box-shadow: var(--shadow);
-  background-color: rgba(0, 0, 0, 0.12);
+  background-color: rgb(0 0 0 / 0.12);
   border-radius: 0.3rem;
 }
 
 .item {
   position: relative;
   background-color: #fff;
-  color: rgba(0, 0, 0, 0.87);
+  color: rgb(0 0 0 / 0.87);
 }
 
 .item:not(:first-of-type) {
@@ -75,7 +77,7 @@
 
 .trigger:focus-visible {
   outline: 0;
-  background-color: rgba(0, 0, 0, 0.12);
+  background-color: rgb(0 0 0 / 0.12);
 }
 
 .trigger .triggerText {
@@ -102,11 +104,11 @@
 }
 
 .panel.cssanimation[data-open] {
-  animation: slideDown var(--duration) ease-out;
+  animation: slide-down var(--duration) ease-out;
 }
 
 .panel.cssanimation {
-  animation: slideUp var(--duration) ease-out;
+  animation: slide-up var(--duration) ease-out;
 }
 
 .panel.csstransition[data-open] {

diff --git a/docs/src/app/(private)/experiments/collapsible/collapsible.module.css b/docs/src/app/(private)/experiments/collapsible/collapsible.module.css
@@ -83,11 +83,11 @@
 
 .animation {
   & .panel[data-open] {
-    animation: slideDown var(--duration) ease-out;
+    animation: slide-down var(--duration) ease-out;
   }
 
   & .panel {
-    animation: slideUp var(--duration) ease-in;
+    animation: slide-up var(--duration) ease-in;
   }
 }
 
@@ -98,19 +98,21 @@
   }
 }
 
-@keyframes slideDown {
+@keyframes slide-down {
   from {
     height: 0;
   }
+
   to {
     height: var(--collapsible-panel-height);
   }
 }
 
-@keyframes slideUp {
+@keyframes slide-up {
   from {
     height: var(--collapsible-panel-height);
   }
+
   to {
     height: 0;
   }

diff --git a/docs/src/app/(private)/experiments/dialog.module.css b/docs/src/app/(private)/experiments/dialog.module.css
@@ -2,6 +2,7 @@
   from {
     transform: translate(-50%, -35%) scale(0.8) translateY(0);
   }
+
   to {
     transform: translate(-50%, -50%) scale(calc(pow(0.95, var(--nested-dialogs))))
       translateY(calc(-30px * var(--nested-dialogs)));
@@ -12,6 +13,7 @@
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
     visibility: visible;
@@ -68,12 +70,12 @@
   min-width: 300px;
   max-width: 500px;
   border-radius: 4px;
-  box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
+  box-shadow: rgb(0 0 0 / 0.2) 0 18px 50px -10px;
   position: fixed;
   top: 50%;
   left: 50%;
   padding: 16px;
-  font-family: IBM Plex Sans;
+  font-family: 'IBM Plex Sans', sans-serif;
   z-index: 1;
   transform: translate(-50%, -50%);
   opacity: calc(pow(0.95, var(--nested-dialogs)));
@@ -175,10 +177,10 @@
   max-width: 1000px;
   margin: 0 auto;
   padding: 16px;
-  font-family: IBM Plex Sans;
+  font-family: 'IBM Plex Sans', sans-serif;
 
   & h1 {
-    font-family: General Sans;
+    font-family: 'General Sans', sans-serif;
     font-weight: 600;
     font-size: 2rem;
   }

diff --git a/docs/src/app/(private)/experiments/menu/menu-nested.tsx b/docs/src/app/(private)/experiments/menu/menu-nested.tsx
@@ -162,7 +162,7 @@ const MenuPopup = styled(Menu.Popup)(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
+  box-shadow: 0 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
   z-index: 1;
   transform-origin: var(--transform-origin);
   opacity: 1;
@@ -174,10 +174,8 @@ const MenuPopup = styled(Menu.Popup)(
   }
 
   &[data-starting-style] {
-    & {
-      opacity: 0;
-      transform: scale(0.8);
-    }
+    opacity: 0;
+    transform: scale(0.8);
   }
 
   &[data-ending-style] {
@@ -262,7 +260,6 @@ const MenuButton = styled(Menu.Trigger)(
   line-height: 1.5;
   padding: 8px 16px;
   border-radius: 8px;
-  color: white;
   transition: all 150ms ease;
   cursor: pointer;
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};

diff --git a/docs/src/app/(private)/experiments/modality.tsx b/docs/src/app/(private)/experiments/modality.tsx
@@ -271,7 +271,7 @@ const MenuPopup = styled(Menu.Popup)(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
+  box-shadow: 0 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
   z-index: 1;
   transform-origin: var(--transform-origin);
   opacity: 1;
@@ -323,7 +323,7 @@ const DialogPopup = styled(Dialog.Popup)(
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
   min-width: 400px;
   border-radius: 4px;
-  box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
+  box-shadow: rgb(0 0 0 / 0.2) 0 18px 50px -10px;
   position: fixed;
   top: 50%;
   left: 50%;

diff --git a/docs/src/app/(private)/experiments/popups/popups-in-popups.tsx b/docs/src/app/(private)/experiments/popups/popups-in-popups.tsx
@@ -381,7 +381,7 @@ const MenuPopup = styled(Menu.Popup)(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
+  box-shadow: 0 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
   transform-origin: var(--transform-origin);
   opacity: 1;
   transform: scale(1, 1);
@@ -470,7 +470,7 @@ const DialogPopup = styled(Dialog.Popup)(
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
   min-width: 400px;
   border-radius: 4px;
-  box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
+  box-shadow: rgb(0 0 0 / 0.2) 0 18px 50px -10px;
   position: fixed;
   top: 50%;
   left: 50%;

diff --git a/docs/src/app/(private)/experiments/rtl.module.css b/docs/src/app/(private)/experiments/rtl.module.css
@@ -21,7 +21,7 @@
   background: #fff;
   border: 1px solid var(--color-gray-200);
   color: black;
-  box-shadow: 0px 4px 30px var(--color-gray-200);
+  box-shadow: 0 4px 30px var(--color-gray-200);
   z-index: 1;
   transform-origin: var(--transform-origin);
   opacity: 1;

diff --git a/docs/src/app/(private)/experiments/toggle.module.css b/docs/src/app/(private)/experiments/toggle.module.css
@@ -29,6 +29,11 @@
   cursor: not-allowed;
 }
 
+.button:focus-visible {
+  outline: 2px solid black;
+  z-index: 1;
+}
+
 .button:first-child {
   border-radius: var(--border-radius-left);
   border-inline-end-color: transparent;
@@ -56,11 +61,6 @@
   z-index: 1;
 }
 
-.button:focus-visible {
-  outline: 2px solid black;
-  z-index: 1;
-}
-
 .button svg {
   fill: none;
   stroke: currentColor;

diff --git a/...p/(public)/(content)/react/components/collapsible/demos/hero/css-modules/index.module.css b/...p/(public)/(content)/react/components/collapsible/demos/hero/css-modules/index.module.css
@@ -7,6 +7,12 @@
   color: var(--color-gray-900);
 }
 
+.Icon {
+  width: 0.75rem;
+  height: 0.75rem;
+  transition: transform 150ms ease-out;
+}
+
 .Trigger {
   display: flex;
   align-items: center;
@@ -42,12 +48,6 @@
   }
 }
 
-.Icon {
-  width: 0.75rem;
-  height: 0.75rem;
-  transition: transform 150ms ease-out;
-}
-
 .Panel {
   display: flex;
   height: var(--collapsible-panel-height);

diff --git a/...)/(content)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css b/...)/(content)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
@@ -99,7 +99,6 @@
   position: fixed;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
   width: 24rem;
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;

diff --git a/.../app/(public)/(content)/react/components/dialog/demos/nested/css-modules/index.module.css b/.../app/(public)/(content)/react/components/dialog/demos/nested/css-modules/index.module.css
@@ -99,7 +99,6 @@
   position: fixed;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
   width: 24rem;
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;

diff --git a/...public)/(content)/react/components/menu/demos/checkbox-items/css-modules/index.module.css b/...public)/(content)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
@@ -66,8 +66,8 @@
   @media (prefers-color-scheme: light) {
     outline: 1px solid var(--color-gray-200);
     box-shadow:
-      0px 10px 15px -3px var(--color-gray-200),
-      0px 4px 6px -4px var(--color-gray-200);
+      0 10px 15px -3px var(--color-gray-200),
+      0 4px 6px -4px var(--color-gray-200);
   }
 
   @media (prefers-color-scheme: dark) {
@@ -83,6 +83,7 @@
     bottom: -8px;
     rotate: 180deg;
   }
+
   &[data-side='bottom'] {
     top: -8px;
     rotate: 0deg;