Keep up with ongoing projects and help shape the future of Base UI.
+
+## How we prioritize
+
+Base UI is a community-driven project, meaning we usually pick the issues and suggestions that resonate the most with the community.
+Therefore, make sure to leave an upvote ๐ on [the GitHub issues](https://github.com/mui/base-ui/issues) you are most interested in.
+
+Additionally, we conduct annual [developer surveys](/blog/?tags=Developer+survey/) which also serve as key inputs for Base UI's roadmap.
+Your participation is invaluableโkeep an eye on MUI's social media to catch the next survey and help shape the future of the library!
+
+## Keeping track of the roadmap
+
+### GitHub project
+
+The Base UI GitHub project is where you can see the ongoing priorities for the library.
+We typically add umbrella issues to the project board after discussing them internally.
+
+**[Visit the Base UI project board ๐](https://github.com/orgs/mui/projects/1/views/13)**
+
+
diff --git a/docs/data/base/getting-started/support/support.md b/docs/data/base/getting-started/support/support.md
index 93c069adfc4c65..515a72b1d914e4 100644
--- a/docs/data/base/getting-started/support/support.md
+++ b/docs/data/base/getting-started/support/support.md
@@ -8,9 +8,9 @@ We use GitHub issues as a bug and feature request tracker.
If you think you've found a bug, or you have a new feature idea:
-1. Please start by [making sure it hasn't already been reported or fixed](https://github.com/mui/material-ui/issues?utf8=%E2%9C%93&q=is%3Aopen+is%3Aclosed).
+1. Please start by [making sure it hasn't already been reported or fixed](https://github.com/mui/base-ui/issues?q=is%3Aopen+is%3Aclosed).
You can search through existing issues and pull requests to see if someone has reported one similar to yours.
-2. Then, if no duplicates exist, [open an issue](https://github.com/mui/material-ui/issues/new/choose) in the Baseย UI repository.
+2. Then, if no duplicates exist, [open an issue](https://github.com/mui/base-ui/issues/new/choose) in the Baseย UI repository.
### New issue guidelines
@@ -78,7 +78,7 @@ This includes issues introduced by external sources, like browser upgrades or ch
### Social media
-The Baseย UI community is active on both [X/Twitter](https://twitter.com/MaterialUI) and [LinkedIn](https://www.linkedin.com/company/mui/).
+The Baseย UI community is active on both [X/Twitter](https://twitter.com/MUI_hq) and [LinkedIn](https://www.linkedin.com/company/mui/).
These are great platforms to share what you're working on and connect with other developers.
### Discord
diff --git a/docs/data/base/pages.ts b/docs/data/base/pages.ts
index cc7e0c556b4529..ee24d0826d97df 100644
--- a/docs/data/base/pages.ts
+++ b/docs/data/base/pages.ts
@@ -11,6 +11,7 @@ const pages: readonly MuiPage[] = [
{ pathname: '/base-ui/getting-started/usage', title: 'Usage' },
{ pathname: '/base-ui/getting-started/customization', title: 'Customization' },
{ pathname: '/base-ui/getting-started/accessibility', title: 'Accessibility' },
+ { pathname: '/base-ui/getting-started/roadmap', title: 'Roadmap' },
{ pathname: '/base-ui/getting-started/support' },
],
},
diff --git a/docs/data/joy/components/autocomplete/CustomTags.js b/docs/data/joy/components/autocomplete/CustomTags.js
index 1b83a19a03b900..edcdc0edef35ce 100644
--- a/docs/data/joy/components/autocomplete/CustomTags.js
+++ b/docs/data/joy/components/autocomplete/CustomTags.js
@@ -18,6 +18,7 @@ export default function CustomTags() {
variant="solid"
color="primary"
endDecorator={}
+ sx={{ minWidth: 0 }}
{...getTagProps({ index })}
>
{item.title}
diff --git a/docs/data/joy/components/autocomplete/CustomTags.tsx b/docs/data/joy/components/autocomplete/CustomTags.tsx
index 1b83a19a03b900..edcdc0edef35ce 100644
--- a/docs/data/joy/components/autocomplete/CustomTags.tsx
+++ b/docs/data/joy/components/autocomplete/CustomTags.tsx
@@ -18,6 +18,7 @@ export default function CustomTags() {
variant="solid"
color="primary"
endDecorator={}
+ sx={{ minWidth: 0 }}
{...getTagProps({ index })}
>
{item.title}
diff --git a/docs/data/joy/components/autocomplete/FixedTags.js b/docs/data/joy/components/autocomplete/FixedTags.js
index 17e80d30b5ddf8..91744804a2f22e 100644
--- a/docs/data/joy/components/autocomplete/FixedTags.js
+++ b/docs/data/joy/components/autocomplete/FixedTags.js
@@ -28,6 +28,7 @@ export default function FixedTags() {
diff --git a/docs/data/joy/components/autocomplete/FixedTags.tsx b/docs/data/joy/components/autocomplete/FixedTags.tsx
index 17e80d30b5ddf8..91744804a2f22e 100644
--- a/docs/data/joy/components/autocomplete/FixedTags.tsx
+++ b/docs/data/joy/components/autocomplete/FixedTags.tsx
@@ -28,6 +28,7 @@ export default function FixedTags() {
diff --git a/docs/data/joy/getting-started/support/support.md b/docs/data/joy/getting-started/support/support.md
index 09c5049750f2bc..ca2d02212f96cc 100644
--- a/docs/data/joy/getting-started/support/support.md
+++ b/docs/data/joy/getting-started/support/support.md
@@ -8,7 +8,7 @@ We use GitHub issues as a bug and feature request tracker.
If you think you've found a bug, or you have a new feature idea:
-1. Please start by [making sure it hasn't already been reported or fixed](https://github.com/mui/material-ui/issues?utf8=%E2%9C%93&q=is%3Aopen+is%3Aclosed).
+1. Please start by [making sure it hasn't already been reported or fixed](https://github.com/mui/material-ui/issues?q=is%3Aopen+is%3Aclosed).
You can search through existing issues and pull requests to see if someone has reported one similar to yours.
2. Then, if no duplicates exist, [open an issue](https://github.com/mui/material-ui/issues/new/choose) in the Joyย UI repository.
diff --git a/docs/data/joy/integrations/icon-libraries/IconFontSizes.js b/docs/data/joy/integrations/icon-libraries/IconFontSizes.js
index b8bcc044becadb..72a86184653993 100644
--- 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 (
- {Object.keys(theme.fontSize).map((size) => (
-
- ))}
+
+
+
+
+
+
+
+
);
}
diff --git a/docs/data/joy/integrations/icon-libraries/IconFontSizes.tsx b/docs/data/joy/integrations/icon-libraries/IconFontSizes.tsx
index b8bcc044becadb..72a86184653993 100644
--- 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 (
- {Object.keys(theme.fontSize).map((size) => (
-
- ))}
+
+
+
+
+
+
+
+
);
}
diff --git a/docs/data/joy/integrations/icon-libraries/IconFontSizes.tsx.preview b/docs/data/joy/integrations/icon-libraries/IconFontSizes.tsx.preview
index a94d346b70bd0c..bccdfe423278bf 100644
--- 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) => (
-
-))}
\ No newline at end of file
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/data/material/discover-more/roadmap/roadmap.md b/docs/data/material/discover-more/roadmap/roadmap.md
index 61aeadd60a29a2..2cba0d105d72c6 100644
--- a/docs/data/material/discover-more/roadmap/roadmap.md
+++ b/docs/data/material/discover-more/roadmap/roadmap.md
@@ -12,14 +12,14 @@ Your participation is invaluableโkeep an eye on MUI's social media to catch th
## Keeping track of the roadmap
-### Public GitHub project
+### GitHub project
-The Materialย UI public GitHub project is where you can see the ongoing priorities for the library.
+The Materialย UI GitHub project is where you can see the ongoing priorities for the library.
We typically add umbrella issues to the project board after discussing them internally.
-**[Visit the public Materialย UI project board ๐](https://github.com/mui/material-ui/projects/26)**
+**[Visit the Materialย UI project board ๐](https://github.com/orgs/mui/projects/23/views/12)**
-
+
### Milestones
@@ -28,4 +28,4 @@ Check it out to keep up with ongoing progress and see which issues have been pic
**[Visit the Materialย UI milestones page ๐](https://github.com/mui/material-ui/milestone/42)**
-
+
diff --git a/docs/data/material/getting-started/example-projects/example-projects.md b/docs/data/material/getting-started/example-projects/example-projects.md
index 2fb1e57bb55088..ee15e9aefa966a 100644
--- a/docs/data/material/getting-started/example-projects/example-projects.md
+++ b/docs/data/material/getting-started/example-projects/example-projects.md
@@ -48,7 +48,7 @@ They're great resources for learning more about real-world usage of Materialย UI
### Paid
-- [ScaffoldHub](https://v2.scaffoldhub.io/scaffolds/react-material-ui):
+- [ScaffoldHub](https://v2.scaffoldhub.io/scaffolds/react-material-ui?partner=1):
- Tool for building web applications.
- Choose your framework and library (React with Materialย UI).
diff --git a/docs/data/material/getting-started/faq/faq.md b/docs/data/material/getting-started/faq/faq.md
index b756cafbf70a9b..78beedd8ca101b 100644
--- a/docs/data/material/getting-started/faq/faq.md
+++ b/docs/data/material/getting-started/faq/faq.md
@@ -16,7 +16,7 @@ There are many ways to support us:
- **Make changes happen**.
- Edit the documentation. At the bottom of every page, you can find an "Edit this page" button.
- Report bugs or missing features by [creating an issue](https://github.com/mui/material-ui/issues/new).
- - Review and comment on existing [pull requests](https://github.com/mui/material-ui/pulls) and [issues](https://github.com/mui/material-ui/issues).
+ - Review and comment on existing [pull requests](https://github.com/mui/material-ui/pulls?q=is%3Apr) and [issues](https://github.com/mui/material-ui/issues?q=is%3Aopen+is%3Aclosed).
- [Improve our documentation](https://github.com/mui/material-ui/tree/HEAD/docs), fix bugs, or add features by [submitting a pull request](https://github.com/mui/material-ui/pulls).
- **Support us financially on [Openย Collective](https://opencollective.com/mui-org)**.
If you use Materialย UI in a commercial project and would like to support its continued development by becoming a Sponsor, or in a side or hobby project and would like to become a Backer, you can do so through Openย Collective.
@@ -138,7 +138,7 @@ const element = ref.current;
```
If you're not sure if the Materialย UI component in question forwards its ref you can check the API documentation under "Props."
-You should find the message below, like in the [Button API](/material-ui/api/button/#props), [Button API](/material-ui/api/button/#props)
+You should find the message below, like in the [Button API](/material-ui/api/button/#props).
> The ref is forwarded to the root element.
diff --git a/docs/data/material/getting-started/support/support.md b/docs/data/material/getting-started/support/support.md
index b4a3591f87d034..a1ac63363746be 100644
--- a/docs/data/material/getting-started/support/support.md
+++ b/docs/data/material/getting-started/support/support.md
@@ -8,7 +8,7 @@ We use GitHub issues as a bug and feature request tracker.
If you think you've found a bug, or you have a new feature idea:
-1. Please start by [making sure it hasn't already been reported or fixed](https://github.com/mui/material-ui/issues?utf8=%E2%9C%93&q=is%3Aopen+is%3Aclosed).
+1. Please start by [making sure it hasn't already been reported or fixed](https://github.com/mui/material-ui/issues?q=is%3Aopen+is%3Aclosed).
You can search through existing issues and pull requests to see if someone has reported one similar to yours.
2. Then, if no duplicates exist, [open an issue](https://github.com/mui/material-ui/issues/new/choose) in the Materialย UI repository.
diff --git a/docs/data/material/getting-started/supported-components/supported-components.md b/docs/data/material/getting-started/supported-components/supported-components.md
index 14ebd7bb7ce3a8..defae379f9fb5a 100644
--- a/docs/data/material/getting-started/supported-components/supported-components.md
+++ b/docs/data/material/getting-started/supported-components/supported-components.md
@@ -9,7 +9,7 @@ feature of every component, but rather to provide the building blocks to
allow developers to create compelling user interfaces and experiences.
If you wish to add support for a component or feature not highlighted
-here, please search for the relevant [GitHub Issue](https://github.com/mui/material-ui/issues), or create a new one
+here, please search for the relevant [GitHub Issue](https://github.com/mui/material-ui/issues?q=is%3Aopen+is%3Aclosed), or create a new one
to discuss the approach before submitting a pull request.
{{"demo": "MaterialUIComponents.js", "hideToolbar": true, "bg": true}}
diff --git a/docs/data/system/getting-started/support/support.md b/docs/data/system/getting-started/support/support.md
index 64ecfd87848a11..2c39e0f61039d3 100644
--- a/docs/data/system/getting-started/support/support.md
+++ b/docs/data/system/getting-started/support/support.md
@@ -8,7 +8,7 @@ We use GitHub issues as a bug and feature request tracker.
If you think you've found a bug, or you have a new feature idea:
-1. Please start by [making sure it hasn't already been reported or fixed](https://github.com/mui/material-ui/issues?utf8=%E2%9C%93&q=is%3Aopen+is%3Aclosed).
+1. Please start by [making sure it hasn't already been reported or fixed](https://github.com/mui/material-ui/issues?q=is%3Aopen+is%3Aclosed).
You can search through existing issues and pull requests to see if someone has reported one similar to yours.
2. Then, if no duplicates exist, [open an issue](https://github.com/mui/material-ui/issues/new/choose) in the MUIย System repository.
diff --git a/docs/data/system/getting-started/usage/Demo.js b/docs/data/system/getting-started/usage/Demo.js
index 1a667fb6092020..f07c23b3a7cc45 100644
--- a/docs/data/system/getting-started/usage/Demo.js
+++ b/docs/data/system/getting-started/usage/Demo.js
@@ -1,7 +1,5 @@
import * as React from 'react';
-import Box from '@mui/material/Box';
-import { alpha } from '@mui/material/styles';
-import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import Box from '@mui/system/Box';
export default function Demo() {
return (
@@ -10,11 +8,11 @@ export default function Demo() {
display: 'flex',
flexDirection: { xs: 'column', md: 'row' },
alignItems: 'center',
- bgcolor: 'background.paper',
- overflow: 'hidden',
- borderRadius: '12px',
- boxShadow: 1,
- fontWeight: 'bold',
+ bgcolor: 'background.default',
+ border: '1px solid',
+ borderColor: 'divider',
+ borderRadius: 2,
+ overflow: 'clip',
}}
>
-
+
123 Main St, Phoenix AZ
-
+
$280,000 โ $310,000
alpha(theme.palette.primary.main, 0.1),
- borderRadius: '5px',
- color: 'primary.main',
- fontWeight: 'medium',
+ py: 0.5,
+ px: 1,
+ backgroundColor: 'rgba(46, 125, 50, 0.1)',
+ borderRadius: 10,
display: 'flex',
- fontSize: 12,
alignItems: 'center',
- '& svg': {
- fontSize: 21,
- mr: 0.5,
- },
+ gap: 0.5,
+ border: '1px solid',
+ borderColor: 'rgba(46, 125, 50, 0.1)',
+ fontSize: '0.7rem',
+ fontWeight: 'bold',
+ letterSpacing: '.05rem',
+ textTransform: 'uppercase',
+ color: 'success.main',
}}
>
-
- CONFIDENCE SCORE 85%
+ Confidence score: 85%
diff --git a/docs/data/system/getting-started/usage/Demo.tsx b/docs/data/system/getting-started/usage/Demo.tsx
index 1a667fb6092020..f07c23b3a7cc45 100644
--- a/docs/data/system/getting-started/usage/Demo.tsx
+++ b/docs/data/system/getting-started/usage/Demo.tsx
@@ -1,7 +1,5 @@
import * as React from 'react';
-import Box from '@mui/material/Box';
-import { alpha } from '@mui/material/styles';
-import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import Box from '@mui/system/Box';
export default function Demo() {
return (
@@ -10,11 +8,11 @@ export default function Demo() {
display: 'flex',
flexDirection: { xs: 'column', md: 'row' },
alignItems: 'center',
- bgcolor: 'background.paper',
- overflow: 'hidden',
- borderRadius: '12px',
- boxShadow: 1,
- fontWeight: 'bold',
+ bgcolor: 'background.default',
+ border: '1px solid',
+ borderColor: 'divider',
+ borderRadius: 2,
+ overflow: 'clip',
}}
>
-
+
123 Main St, Phoenix AZ
-
+
$280,000 โ $310,000
alpha(theme.palette.primary.main, 0.1),
- borderRadius: '5px',
- color: 'primary.main',
- fontWeight: 'medium',
+ py: 0.5,
+ px: 1,
+ backgroundColor: 'rgba(46, 125, 50, 0.1)',
+ borderRadius: 10,
display: 'flex',
- fontSize: 12,
alignItems: 'center',
- '& svg': {
- fontSize: 21,
- mr: 0.5,
- },
+ gap: 0.5,
+ border: '1px solid',
+ borderColor: 'rgba(46, 125, 50, 0.1)',
+ fontSize: '0.7rem',
+ fontWeight: 'bold',
+ letterSpacing: '.05rem',
+ textTransform: 'uppercase',
+ color: 'success.main',
}}
>
-
- CONFIDENCE SCORE 85%
+ Confidence score: 85%
diff --git a/docs/data/system/getting-started/usage/Why.js b/docs/data/system/getting-started/usage/Why.js
index a2dc74962d8e61..dd6d81e8faa518 100644
--- a/docs/data/system/getting-started/usage/Why.js
+++ b/docs/data/system/getting-started/usage/Why.js
@@ -1,37 +1,41 @@
import * as React from 'react';
import TrendingUpIcon from '@mui/icons-material/TrendingUp';
-import Box from '@mui/material/Box';
+import Box from '@mui/system/Box';
export default function Why() {
return (
Sessions
-
+
98.3 K
- 18.77%
+ 18.7%
-
+
vs. last week
diff --git a/docs/data/system/getting-started/usage/Why.tsx b/docs/data/system/getting-started/usage/Why.tsx
index a2dc74962d8e61..dd6d81e8faa518 100644
--- a/docs/data/system/getting-started/usage/Why.tsx
+++ b/docs/data/system/getting-started/usage/Why.tsx
@@ -1,37 +1,41 @@
import * as React from 'react';
import TrendingUpIcon from '@mui/icons-material/TrendingUp';
-import Box from '@mui/material/Box';
+import Box from '@mui/system/Box';
export default function Why() {
return (
Sessions
-
+
98.3 K
- 18.77%
+ 18.7%
-
+
vs. last week
diff --git a/docs/data/system/getting-started/usage/usage.md b/docs/data/system/getting-started/usage/usage.md
index fe9bc02ec89078..611d8a91a22eba 100644
--- a/docs/data/system/getting-started/usage/usage.md
+++ b/docs/data/system/getting-started/usage/usage.md
@@ -152,18 +152,18 @@ It works with both Emotion and styled-components.
#### Cons
-- Runtime performance takes a hit.
+Runtime performance takes a hit.
- | Benchmark case | Code snippet | Time normalized |
- | :-------------------------------- | :-------------------- | --------------: |
- | a. Render 1,000 primitives | `
` | 112ms |
+| c. Render 1,000 styled components | `` | 181ms |
+| d. Render 1,000 Box | `` | 296ms |
-_Head to the [benchmark folder](https://github.com/mui/material-ui/tree/master/benchmark/browser) for a reproduction of these metrics._
+Visit the [benchmark folder](https://github.com/mui/material-ui/tree/master/benchmark/browser) for a reproduction of the metrics above.
We believe that for most use cases it's fast enough, but there are simple workarounds when performance becomes critical.
For instance, when rendering a list with many items, you can use a CSS child selector to have a single "style injection" point (using d. for the wrapper and a. for each item).
@@ -183,7 +183,7 @@ The `sx` prop can be used in four different locations:
### Core components
-All Materialย UI, and Joyย UI components support the `sx` prop.
+All Materialย UI and Joy UI components support the `sx` prop.
### Box
@@ -202,7 +202,7 @@ const Div = styled('div')``;
### Any element with the babel plugin
-TODO [#23220](https://github.com/mui/material-ui/issues/23220).
+Visit [the open GitHub issue](https://github.com/mui/material-ui/issues/23220) regarding this topic to learn more.
## How to use MUIย System
diff --git a/docs/lib/sourcing.ts b/docs/lib/sourcing.ts
index 3c3678f9810ea4..7ade883964584f 100644
--- a/docs/lib/sourcing.ts
+++ b/docs/lib/sourcing.ts
@@ -43,6 +43,7 @@ const ALLOWED_TAGS = [
'Joy UI',
'MUI X',
'MUI System',
+ 'Toolpad',
];
export const getAllBlogPosts = () => {
diff --git a/docs/notifications.json b/docs/notifications.json
index 4b3431c0de8f13..2a2e958a32fb42 100644
--- a/docs/notifications.json
+++ b/docs/notifications.json
@@ -1,22 +1,22 @@
[
{
"id": 68,
- "title": "Check out Baseย UI today ๐ฅ",
+ "title": "Check out Baseย UI today ๐ฅ",
"text": "Love Material UI, but don't need Material Design? Try Baseย UI, the new \"unstyled\" alternative. Read more in this announcement."
},
{
"id": 78,
- "title": "MUI X v6.18.x and the latest improvements before the next major",
+ "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 recent blog post."
},
{
"id": 79,
- "title": "A new Developer Survey is open",
+ "title": "A new Developer Survey is open",
"text": "Take a few minutes to share your feedback and expectations in the Developerย Survey."
},
{
"id": 80,
- "title": "MUI X v7.0.0-beta.0",
+ "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 announcement blog post."
}
]
diff --git a/docs/package.json b/docs/package.json
index de772dd1016c48..b70ec2b2d37c59 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -25,7 +25,7 @@
"@babel/runtime-corejs2": "^7.23.9",
"@docsearch/react": "^3.5.2",
"@emotion/cache": "^11.11.0",
- "@emotion/react": "^11.11.3",
+ "@emotion/react": "^11.11.4",
"@emotion/server": "^11.11.0",
"@emotion/styled": "^11.11.0",
"@fortawesome/fontawesome-svg-core": "^6.5.1",
@@ -45,18 +45,18 @@
"@mui/system": "workspace:^",
"@mui/types": "workspace:^",
"@mui/utils": "workspace:^",
- "@mui/x-charts": "6.19.4",
- "@mui/x-data-grid": "6.19.4",
- "@mui/x-data-grid-generator": "6.19.4",
- "@mui/x-data-grid-premium": "6.19.4",
- "@mui/x-data-grid-pro": "6.19.4",
- "@mui/x-date-pickers": "6.19.4",
- "@mui/x-date-pickers-pro": "6.19.4",
+ "@mui/x-charts": "6.19.5",
+ "@mui/x-data-grid": "6.19.6",
+ "@mui/x-data-grid-generator": "6.19.6",
+ "@mui/x-data-grid-premium": "6.19.6",
+ "@mui/x-data-grid-pro": "6.19.6",
+ "@mui/x-date-pickers": "6.19.6",
+ "@mui/x-date-pickers-pro": "6.19.6",
"@mui/x-license-pro": "6.10.2",
"@mui/x-tree-view": "6.17.0",
"@popperjs/core": "^2.11.8",
"@react-spring/web": "^9.7.3",
- "autoprefixer": "^10.4.17",
+ "autoprefixer": "^10.4.18",
"autosuggest-highlight": "^3.3.4",
"babel-plugin-module-resolver": "^5.0.0",
"babel-plugin-optimize-clsx": "^2.6.2",
@@ -96,7 +96,7 @@
"react-imask": "^7.3.0",
"react-intersection-observer": "^9.5.3",
"react-is": "^18.2.0",
- "react-number-format": "^5.3.1",
+ "react-number-format": "^5.3.3",
"react-router-dom": "^6.21.3",
"react-runner": "^1.0.3",
"react-simple-code-editor": "^0.13.1",
@@ -123,7 +123,7 @@
"@types/chai": "^4.3.12",
"@types/css-mediaquery": "^0.1.4",
"@types/json2mq": "^0.2.2",
- "@types/node": "^18.19.19",
+ "@types/node": "^18.19.21",
"@types/prop-types": "^15.7.11",
"@types/react": "^18.2.55",
"@types/react-dom": "^18.2.19",
@@ -136,7 +136,7 @@
"cross-fetch": "^4.0.0",
"gm": "^1.25.0",
"marked": "^5.1.2",
- "playwright": "^1.41.2",
+ "playwright": "^1.42.1",
"prettier": "^3.2.5",
"tailwindcss": "^3.4.1",
"yargs": "^17.7.2"
diff --git a/docs/pages/base-ui.tsx b/docs/pages/base-ui.tsx
index 8ee2c44afd28d4..fd4b84b8965375 100644
--- a/docs/pages/base-ui.tsx
+++ b/docs/pages/base-ui.tsx
@@ -27,7 +27,7 @@ export default function BaseUI() {
/>
-
+
diff --git a/docs/pages/base-ui/api/form-control.json b/docs/pages/base-ui/api/form-control.json
index 5c6df584fe21b6..348977e689415a 100644
--- a/docs/pages/base-ui/api/form-control.json
+++ b/docs/pages/base-ui/api/form-control.json
@@ -22,6 +22,14 @@
"import { FormControl } from '@mui/base/FormControl';",
"import { FormControl } from '@mui/base';"
],
+ "slots": [
+ {
+ "name": "root",
+ "description": "The component that renders the root.",
+ "default": "'div'",
+ "class": "base-FormControl-root"
+ }
+ ],
"classes": [
{
"key": "disabled",
@@ -52,12 +60,6 @@
"className": "base--required",
"description": "State class applied to the root element if `required={true}`.",
"isGlobal": true
- },
- {
- "key": "root",
- "className": "base-FormControl-root",
- "description": "Class applied to the root element.",
- "isGlobal": false
}
],
"spread": true,
diff --git a/docs/pages/base-ui/getting-started/roadmap.js b/docs/pages/base-ui/getting-started/roadmap.js
new file mode 100644
index 00000000000000..1e515d70f47afb
--- /dev/null
+++ b/docs/pages/base-ui/getting-started/roadmap.js
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
+import * as pageProps from 'docs/data/base/getting-started/roadmap/roadmap.md?muiMarkdown';
+
+export default function Page() {
+ return ;
+}
+
+Page.getLayout = (page) => {
+ return {page};
+};
diff --git a/docs/pages/blog/2020-q3-update.md b/docs/pages/blog/2020-q3-update.md
index 766def6092af2c..54e67b4bcb6b8b 100644
--- a/docs/pages/blog/2020-q3-update.md
+++ b/docs/pages/blog/2020-q3-update.md
@@ -118,7 +118,7 @@ Here are the most significant improvements since June 2020. This was a dense qua
Slider powered by styled-components
- โฟ๏ธ We have kept investing in accessibility, we have fixed [13 bugs](https://github.com/mui/material-ui/pulls?q=is%3Apr+label%3Aaccessibility+is%3Aclosed+sort%3Aupdated-desc).
-- ๐ We have introduced public quarterly roadmaps, both for [MUIย Core](https://github.com/orgs/mui/projects/18/views/1) and [MUIย X](https://github.com/mui/mui-x/projects/1).
+- ๐ We have introduced public quarterly roadmaps, both for each [MUIย Core](https://github.com/mui/material-ui/projects?query=is%3Aopen) product and [MUIย X](https://github.com/mui/mui-x/projects/1).
## Company
@@ -151,7 +151,7 @@ We'll do our best, no guarantee!
### Community
-- ๐ Execute on all the items of the [public roadmap](https://github.com/orgs/mui/projects/18/views/1).
+- ๐ Execute on all the items of the [public roadmap](https://github.com/orgs/mui/projects/23/views/12).
- ๐ฉโ๐จ Simplify the migration experience from v4 to v5.
- โ Please upvote [GitHub issues](https://github.com/mui/material-ui/issues) if you want us to focus on a specific problem. The number of ๐ helps us to prioritize.
diff --git a/docs/pages/blog/2021-q1-update.md b/docs/pages/blog/2021-q1-update.md
index 299b77649072b3..02be67b4f9947d 100644
--- a/docs/pages/blog/2021-q1-update.md
+++ b/docs/pages/blog/2021-q1-update.md
@@ -205,7 +205,7 @@ We have the following objectives:
- ๐ Get v5-beta (no more breaking changes) out! The development of this new version started almost a year ago. It's time to aim for the stable release.
- ๐ Start handling the issues with the date picker reported by developers.
-- ๐ Execute on all the items of the [public roadmap](https://github.com/orgs/mui/projects/18/views/1).
+- ๐ Execute on all the items of the [public roadmap](https://github.com/orgs/mui/projects/23/views/12).
- โ Please upvote [GitHub issues](https://github.com/mui/material-ui/issues?q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc) if you want us to focus on a specific problem. The number of ๐ helps us to prioritize.
### Advanced components
diff --git a/docs/pages/blog/2021-q2-update.md b/docs/pages/blog/2021-q2-update.md
index 064857eacfbe39..a7650185843a22 100644
--- a/docs/pages/blog/2021-q2-update.md
+++ b/docs/pages/blog/2021-q2-update.md
@@ -220,7 +220,7 @@ We have the following objectives:
You can follow our progress in the [umbrella issue](https://github.com/mui/material-ui/issues/27170).
- ๐ Do a proof of concept on supporting a second design system.
Some of our users (and potential users) dislike Material Design. We will try to make the second design system one that they love!
-- ๐ Execute on all of the items in the [public roadmap](https://github.com/orgs/mui/projects/18/views/1).
+- ๐ Execute on all of the items in the [public roadmap](https://github.com/orgs/mui/projects/23/views/12).
- โ Please upvote [GitHub issues](https://github.com/mui/material-ui/issues?q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc) if you want us to focus on a specific problem. The number of ๐ helps us to prioritize.
### Advanced components
diff --git a/docs/pages/blog/2021-q3-update.md b/docs/pages/blog/2021-q3-update.md
index 7268ab69dc23ca..5c5e582482b0db 100644
--- a/docs/pages/blog/2021-q3-update.md
+++ b/docs/pages/blog/2021-q3-update.md
@@ -200,7 +200,7 @@ We'll do our best, no guarantee!
Since v5, Materialย UI is no longer actively supporting IE 11. Dropping this browser requirement unlocks new capabilities of the web platform.
- ๐ Resume work on the second design system.
Some users (and potential users) dislike Material Design. We'll try to make the second design system one that they love! You can check our [first RFC](https://github.com/mui/material-ui/discussions/29024).
-- ๐ Execute on all of the items in the [public roadmap](https://github.com/orgs/mui/projects/18/views/1).
+- ๐ Execute on all of the items in the [public roadmap](https://github.com/orgs/mui/projects/23/views/12).
- โ Please upvote [GitHub issues](https://github.com/mui/material-ui/issues?q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc) if you want us to focus on a specific problem. The number of ๐ helps us to prioritize.
### MUIย X
diff --git a/docs/pages/blog/2023-toolpad-beta-announcement.md b/docs/pages/blog/2023-toolpad-beta-announcement.md
index cb0522038237f4..318dfe94bfe1e9 100644
--- a/docs/pages/blog/2023-toolpad-beta-announcement.md
+++ b/docs/pages/blog/2023-toolpad-beta-announcement.md
@@ -4,18 +4,18 @@ description: Assemble admin panels and internal tools faster than ever before wi
date: 2023-07-24T00:00:00.000Z
authors: ['prakhargupta']
card: true
-tags: ['Product']
+tags: ['Product', 'Toolpad']
---
-It's been over a year since we released the first version of Toolpad. Today, we're excited to take the next step on that journey with the release of Toolpad Beta. If you aren't familiar with Toolpad yet, it's an admin panel builder catering to the internal tooling needs of an organization, designed for developers who want to build a functional application quickly. It harnesses the speed of a UI builder for the front-end and closely integrates into your back-end. If this excites you, then read on!
+It's been over a year since we released the first version of Toolpad. Today, we're excited to take the next step on that journey with the release of Toolpad Beta. If you aren't familiar with Toolpad yet, it's an admin panel builder catering to the internal tooling needs of an organization, designed for developers who want to build a functional application quickly. It harnesses the speed of a UI builder for the front end and closely integrates into your back end. If this excites you, then read on!
-
+
## Why did we decide to build Toolpad?
-Toolpad was created to meet the needs of the Materialย UI community. As a result of surveys we conducted, and market research we undertook, we decided to develop an internal tool builder because the idea resonates with MUI's mission of empowering developers to build apps faster and more efficiently.
+Toolpad was created to meet the needs of the Materialย UI community. As a result of the surveys we conducted, and the market research we undertook, we decided to develop an internal tool builder because the idea resonates with MUI's mission of empowering developers to build apps faster and more efficiently.
Internal tools are software applications that are developed and used within an organization itself. They can automate tasks, manage data, and help foster collaboration. Internal tools are a valuable asset for businesses of all sizes, as they help to improve efficiency, productivity, and communication.
@@ -28,16 +28,16 @@ Toolpad is an open-source, low-code, drag-and-drop admin builder. The primary pu
Toolpad is not ideal for building static web pages, mobile apps, or customer-facing custom-designed front-ends. It's for building admin applications, CRUD interfaces, custom internal tools, and analytics dashboards.
-
+
## Who is Toolpad for?
Before the arrival of Toolpad, the MUI organization primarily catered to the front-end needs of the development process. Our products were mostly useful for React engineers or designers, but we saw many full-stack engineers use our advanced components for data-intensive apps. These highly customizable components are well-suited for complex apps, but not all apps require the same level of customization: for example, internal tools just need basic theming.
-
+
-Toolpad is for you if you're a full-stack or back-end developers who builds, manages, and integrate data pipelines, server-side logic, databases, microservices, and APIsโand knows the most about them. Sharing these endpoints with and maintaining the internal documentation for the front-end teams is a hassle that lasts forever. Toolpad empowers you to take the next step and build the UI you need using our drag-and-drop editor, without losing any part of your normal development workflow.
+Toolpad is for you if you're a full-stack or back-end developer who builds, manages, and integrates data pipelines, server-side logic, databases, microservices, and APIsโand knows the most about them. Sharing these endpoints with and maintaining the internal documentation for the front-end teams is a hassle that lasts forever. Toolpad empowers you to take the next step and build the UI you need using our drag-and-drop editor, without losing any part of your normal development workflow.
## What are the main features available today?
@@ -46,15 +46,15 @@ Toolpad is for you if you're a full-stack or back-end developers who builds, man
Easily create user interfaces by dragging and dropping pre-built components onto the canvas. Utilize constraints to speed up the building process.
-
+
### 2. Query builder UI
-A Postman-like query builder allows you to integrate any REST API quickly. A binding editor, which supports JavaScript, allows you to wire query response directly to the components.
+A Postman-like query builder allows you to integrate any REST API quickly. A binding editor, which supports JavaScript, allows you to wire query responses directly to the components.
-
+
### 3. Bring your own components
@@ -70,7 +70,7 @@ Directly integrate with your Node.js back-end and have your data available on th
Toolpad runs completely locally. You're not stuck with an online code editor or a suboptimal GitHub integration. All configuration is stored in local files which you can version-control, edit, and deploy in any way you want.
-
+
### 6. A catalog of components powered by Materialย UI
@@ -78,33 +78,38 @@ Toolpad runs completely locally. You're not stuck with an online code editor or
Materialย UI provides production-ready React components; a chosen few are currently available inside Toolpad, and we're adding more all the time.
-
+
## How is Toolpad different from similar products on the market?
In this domain, there are two categories of products:
-1. **Visual first**: Retool, Appsmith, Budibase and the likes. While these are great tools, they don't integrate with the developer's local IDE nor offer a good git version control mechanism. Providing features that could have been hand-coded on a need basis makes the application heavy, and reports of slowness at runtime are common.
+1. **Visual first**: Retool, Appsmith, Budibase and the like. While these are great tools, they don't integrate with the developer's local IDE nor offer a good git version control mechanism. Providing features that could have been hand-coded on a need basis makes the application heavy, and reports of slowness at runtime are common.
-2. **Code first**: Airplane.dev, Interval and others. They also allow building internal tools but don't support a drag-and-drop UI builder. The components must be coded using their APIs, which comes with some learning curve.
+2. **Code first**: Airplane.dev, Interval and others. They also allow building internal tools but don't support a drag-and-drop UI builder.
+ The components must be coded using their APIs, which comes with some learning curve.
-Toolpad is solely focused on professional developers. As much as we are low-code, we are equally code-friendly. Providing the basic functionality that you expect from an open-source tool is non-negotiable for usโwe will always prioritize your best interests over all else. With nearly a decade of experience building developer tools, we understand the long-term benefits of cultivating a close relationship with our community of users.
+Toolpad is solely focused on professional developers. As much as we are low-code, we are equally code-friendly. Providing the basic functionality that you expect from an open-source tool is non-negotiable for usโwe will always prioritize your best interests over all else.
+With nearly a decade of experience building developer tools, we understand the long-term benefits of cultivating a close relationship with our community of users.
Lastly, Toolpad is the only product that offers a drag-and-drop UI builder closely integrated with your favorite IDE, such as VSCode. It's the best of both worlds!
## How can I use Toolpad?
-Toolpad is available as an npm package. Follow the [Installation guide](https://mui.com/toolpad/getting-started/installation/) in the docs to get started. You can learn more about Toolpad by visiting the [home page](https://mui.com/toolpad/).
+Toolpad is available as an npm package. Follow the [Installation guide](https://mui.com/toolpad/getting-started/installation/) in the docs to get started.
+You can learn more about Toolpad by visiting the [home page](https://mui.com/toolpad/).
-
+
## What's next?
-We plan to continue to iterate on our vision of helping you as a developer to increase the speed and efficiency of your workflow. We want to optimize for the biggest pains that you face when building admin apps. Your input is crucial to helping us shape the roadmap from here.
+We plan to continue to iterate on our vision of helping you as a developer to increase the speed and efficiency of your workflow. We want to optimize for the biggest pains that you face when building admin apps.
+Your input is crucial to helping us shape the roadmap from here.
The best places to stay up-to-date about what we're currently working on are [GitHub issues](https://github.com/mui/mui-toolpad) and our [public roadmap](https://github.com/orgs/mui/projects/9/views/1).
-If you have any questions or would like to share feedback, you can directly contact the team at toolpad@mui.com or reach us on [X](https://twitter.com/MUI_Toolpad). You can also engage in conversation in our [Discord](https://mui.com/r/discord/) server.
+If you have any questions or would like to share feedback, you can directly contact the team at toolpad@mui.com or reach us on [X/Twitter](https://twitter.com/MUI_Toolpad).
+You can also engage in conversation on our [Discord](https://mui.com/r/discord/) server.
If you'd like an in-depth demo to discuss your use case, please feel free to [schedule a meeting with me on Calendly](https://calendly.com/prakhar-mui).
diff --git a/docs/pages/blog/base-ui-2024-plans.md b/docs/pages/blog/base-ui-2024-plans.md
index f1c1dd0cc76ccf..ede47e3ba5611f 100644
--- 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](https://github.com/mui/material-ui/milestone/46) (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.
@@ -20,18 +20,18 @@ Baseย UI today offers a modest set of components and hooks, including some sligh
However, we're aware that the package is still missing many primitive components that developers would need in order to adopt it for real-world applications.
Fear not, because we're working hard to ship more components with the stable release, including:
-| Components to be added | |
-| :--------------------- | ---------------------------------------------------------------------------------------------: |
-| Accordion | [View the GitHub issue โ](https://github.com/mui/material-ui/issues/38037) |
-| Alert Dialog | [View the GitHub issue โ](https://github.com/mui/material-ui/issues/40886) |
-| Checkbox | [View the GitHub issue โ](https://github.com/mui/material-ui/issues/38036) |
-| Collapsible | [View the GitHub issue โ](https://github.com/mui/material-ui/issues/40959) |
-| Drawer | [View the GitHub issue โ](https://github.com/mui/material-ui/issues/38181) |
-| Radio Group | [View the GitHub issue โ](https://github.com/mui/material-ui/issues/38038) |
-| Tooltip | [View the GitHub issue โ](https://github.com/mui/material-ui/issues/38045) |
+| Components to be added | |
+| :--------------------- | --------------------------------------------------------------------------------------: |
+| Accordion | [View the GitHub issue โ](https://github.com/mui/base-ui/issues/25) |
+| Alert Dialog | [View the GitHub issue โ](https://github.com/mui/base-ui/issues/83) |
+| Checkbox | [View the GitHub issue โ](https://github.com/mui/base-ui/issues/24) |
+| Collapsible | [View the GitHub issue โ](https://github.com/mui/base-ui/issues/84) |
+| Drawer | [View the GitHub issue โ](https://github.com/mui/base-ui/issues/38) |
+| Radio Group | [View the GitHub issue โ](https://github.com/mui/base-ui/issues/26) |
+| Tooltip | [View the GitHub issue โ](https://github.com/mui/base-ui/issues/32) |
And potentially more!
-We'd love for you to chime in and help us prioritize, so keep an eye on open issues marked with the [`package: base-ui` and `waiting for ๐`](https://github.com/mui/material-ui/issues?q=is:open+is:issue+label:%22package:+base-ui%22+label:%22waiting+for+%F0%9F%91%8D%22) labels.
+We'd love for you to chime in and help us prioritize, so keep an eye on [the open issues](https://github.com/mui/base-ui/issues).
## Improved customization API
@@ -57,7 +57,7 @@ To address these issues, we're considering adopting a new API that would assign
This pattern has the potential to radically improve the customization experience, both for styles and structure.
We are still fleshing out the API and implementation details.
-If you have any questions or remarks about this change, chime in on [the RFC on GitHub](https://github.com/mui/material-ui/discussions/41085).
+If you have any questions or remarks about this change, chime in on [the RFC on GitHub](https://github.com/mui/base-ui/discussions/157).
We know that a significant number of projects depend on the existing API, and we want to assure you that one of our top priorities is to provide a smooth migration experience.
@@ -81,10 +81,6 @@ They're currently available for use with the Popup, Menu, and Select, and the pl
The core of what Baseย UI strives to deliver out of the box is first-class accessibility and an intuitive API for extensive customization.
We've earmarked several issues we want to tackle before the stable release in areas such as keyboard navigation, better ARIA support, focus styles, and more.
-
-
-You can track our progress fixing any specific issues by checking out the list of [Baseย UI stable release milestones on GitHub](https://github.com/mui/material-ui/milestone/46).
-
## A more independent product
So far, all Baseย UI-related development has happened within the [Materialย UI GitHub repository](https://github.com/mui/material-ui).
@@ -97,12 +93,14 @@ Rest assured that Baseย UI _is_ a standalone library, and it doesn't come packag
Baseย UI is no longer _merely_ "Materialย UI without the styles"โas we've seen with developer trends over the last few years, the potential for growth and adoption of headless components could actually dwarf Materialย UI in the near future.
To acknowledge that Baseย UI has the potential to outgrow Materialย UI, we plan to move it to its own dedicated GitHub repository for more focused communication and collaboration with the community that's growing around it.
-## Join us on the ride
+:::success
+The new repository is live๏ผ[check it out on GitHub](https://github.com/mui/base-ui)!
+:::
-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.
+## Help us on the ride
-Lastly, 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/material-ui/issues?q=is:open+is:issue+label:%22package:+base-ui%22).
+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.
Happy development! ๐
diff --git a/docs/pages/blog/benny-joo-joining.md b/docs/pages/blog/benny-joo-joining.md
index 13b160e2f0955f..4fac8d9b5f4338 100644
--- a/docs/pages/blog/benny-joo-joining.md
+++ b/docs/pages/blog/benny-joo-joining.md
@@ -17,6 +17,6 @@ He had a great start with his internship, implementing the [Masonry component](h
As part of the Core team, he will help with the community support, as well as work on some of the new features we plan for the community version of the library, like the unstyled components and the second design system.
I am excited to see what other valuable contributions he will make in the future.
-The Core team will continue developing the foundations on which to build great design systems. Here's a quick view of [the community roadmap](https://github.com/orgs/mui/projects/18/views/1).
+The Core team will continue developing the foundations on which to build great design systems.
We couldn't be more excited to have Benny on the team!
diff --git a/docs/pages/blog/marija-najdova-joining.md b/docs/pages/blog/marija-najdova-joining.md
index 55ac7f80d567c0..344a665e26b27e 100644
--- a/docs/pages/blog/marija-najdova-joining.md
+++ b/docs/pages/blog/marija-najdova-joining.md
@@ -15,6 +15,6 @@ Marija is off to a running start, having made important changes happen during he
She is now actively working on the unstyled components and [the update of the style engine](https://github.com/mui/material-ui/issues/22342). These are two items we've been eager to push forward since the release of v1 but that required someone to be dedicated to tackling them.
-The community team will continue developing the foundations on which to build great design systems. Here's a quick view of [the community roadmap](https://github.com/orgs/mui/projects/18/views/1).
+The community team will continue developing the foundations on which to build great design systems.
We couldn't be more excited to have Marija on the team! You can follow her on [X](https://twitter.com/marijanajdova).
diff --git a/docs/pages/blog/toolpad-use-cases.js b/docs/pages/blog/toolpad-use-cases.js
new file mode 100644
index 00000000000000..3aeea7aec33f3d
--- /dev/null
+++ b/docs/pages/blog/toolpad-use-cases.js
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
+import { docs } from './toolpad-use-cases.md?muiMarkdown';
+
+export default function Page() {
+ return ;
+}
diff --git a/docs/pages/blog/toolpad-use-cases.md b/docs/pages/blog/toolpad-use-cases.md
new file mode 100644
index 00000000000000..3c6d2a307fe899
--- /dev/null
+++ b/docs/pages/blog/toolpad-use-cases.md
@@ -0,0 +1,108 @@
+---
+title: How does MUI use Toolpad?
+description: Explore how we use Toolpad for production use cases at MUI.
+date: 2024-03-04T00:00:00.000Z
+authors: ['prakhargupta']
+card: true
+tags: ['Product', 'Toolpad']
+---
+
+Toolpad helps full-stack engineers build internal tools quickly.
+Internal tools encompass data-intensive CRUD interfaces, analytics dashboards, or custom apps that make teams productive.
+Toolpad offers a low-code, GUI-based, code-friendly way of building apps and comes as an npm package that can be imported into an existing codebase.
+
+We've been dogfooding [Toolpad](https://mui.com/toolpad/) at MUI to build our internal tools, and it has proven beneficial for us to easily assemble well-organized, centrally located KPI dashboards and operations apps.
+In this blog post, we'll discuss four such apps, and explain how we used Toolpad to turn our ideas into reality.
+
+
+
+
+
+## Problems tackled through Toolpad
+
+Our internal tooling is easier to use and less prone to errors now; before we built these apps, some of these necessary functions were no more than a set of instructions in a Google doc or on Notion.
+A user had to log into multiple services to manage their day-to-day chores. Now, one interface does it all.
+We utilized Pipedream, Metabase, Google Sheets, and other tools to streamline our day-to-day operations.
+This meant we had distributed code in multiple places, accessible to only a few.
+Now we have everything on GitHub and collaboration is much simpler.
+
+Let's delve into four scenarios that Toolpad has successfully addressed:
+
+## 1. Support key validator
+
+We offer a priority support service to our MUI X premium customers: their queries get an expedited response within 24 hours.
+They share their issue through a Priority Support template in our repository where they're directed to validate their license key, and once it's validated, the 24-hour countdown starts.
+
+
+
+
+
+Here's how we built an app for this:
+
+The [`updateMuiPaidSupport.ts`](https://github.com/mui/mui-public/blob/master/tools-public/toolpad/resources/updateMuiPaidSupport.ts) file hosts all functions that are called from Toolpad.
+It uses the [custom function](https://mui.com/toolpad/concepts/custom-functions/) feature and combines GitHub Actions, Google Sheets, and Octokit to read and verify user information.
+The fetched data is then bound to the UI components.
+It uses Toolpad's [page parameters](https://mui.com/toolpad/concepts/page-properties/#page-parameters), [secrets handling](https://mui.com/toolpad/concepts/custom-functions/#secrets-handling), [shell removal](https://mui.com/toolpad/concepts/page-properties/#display-mode), and custom styling features.
+This app took one developer just a few hours to build which otherwise would have taken much longer.
+
+## 2. Customer support KPI tracker
+
+The read-only page illustrated below uses [HTTP requests](https://mui.com/toolpad/concepts/http-requests/) for its data source.
+Through the query builder UI we fetch the 100 latest support tickets from Zendesk to calculate the average time it takes us to respond to and resolve customer requests.
+It uses a [custom component](https://mui.com/toolpad/concepts/custom-components/) which we call the "health badge."
+Based on the metric value, the component shows three color-coded states: Problem (red), Warning (yellow), and OK (green).
+Other KPI pages also use this health badge and pre-built Chart components to compare stats, observe trends, and spot anomalies.
+
+The video below demonstrates the usage of this app in dev mode:
+
+
+
+We opted for Toolpad since Metabase doesn't support importing data from REST APIs.
+This is possible in Google Sheets but it requires writing a lot of JS code, and since we wanted to embed it in a [Notion page](https://mui-org.notion.site/KPIs-1ce9658b85ce4628a2a2ed2ae74ff69c?pvs=4#3974cb6ed12b4c5a9013bac63113e3bc), Toolpad was the ideal choice.
+Toolpad handles state management and routing, and simplifies query building and data binding, removing the need to write glue code.
+
+You can explore both of the aforementioned apps in dev mode on your device by running the underlying [Node application](https://github.com/mui/mui-public/tree/HEAD/tools-public).
+The next two apps discussed are internal to MUI.
+
+## 3. Manage overdue invoices
+
+We have an internal operations process to remind customers about overdue invoices: reminder emails are sent out at regular intervals following the due date.
+In the Toolpad app, the operations team can view a table of all customers who need to be contacted.
+They select one, email them from Zendesk, and update the status to `CONTACTED`, which is then written back to the database.
+This is a private app for internal use that can't be shared, but the following video gives a quick demo:
+
+
+
+Before this, we relied on a combination of Metabase and Google Sheets to fetch and edit recordsโbut this was cumbersome to operate and sometimes caused data inconsistency issues.
+Thanks to Toolpad we've managed to bring it all under one roof, dramatically improving our operations team's efficiency and productivity.
+
+## 4. Contributor payout
+
+We have a script to fetch monthly payout data for contributors to the MUI Store.
+Our operations team is responsible for paying contributors, but the script proved too technically challenging for them to run without help from our engineers.
+We solved this problem by importing the script into Toolpad and creating a UI for it.
+The video below shows how a user can select the dates, run the script, and receive text that's properly formatted to copy and paste directly into Slack communications:
+
+
+
+## Conclusion
+
+As you've seen, at MUI we have streamlined our internal tooling through Toolpad, helping us stay lean and move fast.
+Internal apps are often very specific to the needs of the organization, but hopefully, you've been inspired by some of our use cases here:
+
+- Have you come across any similar needs within your org regarding operations, administration, or analytics?
+- Do you have existing code that you wish you could reuse in a low-code builder instead of starting fresh?
+- Do you wish you didn't have to do any maintenance on the front ends of your internal tools?
+
+Toolpad handles state management, data fetching, routing, and UI creation, and it can be imported directly into your code base to save you time.
+I encourage you to check out more [examples](https://mui.com/toolpad/examples/) and visit our [GitHub repository](https://github.com/mui/mui-toolpad/) to evaluate the product.
+In case you need any further information, feel free to reach out to the team at toolpad@mui.com.
diff --git a/docs/pages/careers.tsx b/docs/pages/careers.tsx
index 0f1e1d90e3210c..dc3aeb54857037 100644
--- a/docs/pages/careers.tsx
+++ b/docs/pages/careers.tsx
@@ -146,24 +146,18 @@ const openRolesData = [
{
title: 'Engineering',
roles: [
- {
- title: 'React Engineer โ xCharts',
- description:
- 'You will help form the xCharts team, build ambitious and complex new features, work on strategic problems, and help grow adoption.',
- url: '/careers/react-engineer-x-charts/',
- },
// {
- // title: 'React Engineer - X',
+ // title: 'React Engineer โ xCharts',
+ // description:
+ // 'You will help form the xCharts team, build ambitious and complex new features, work on strategic problems, and help grow adoption.',
+ // url: '/careers/react-engineer-x-charts/',
+ // },
+ // {
+ // title: 'React Engineer โ X',
// description:
// '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/',
- },
],
},
{
@@ -223,6 +217,12 @@ const nextRolesData = [
'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: 'React Engineer โ xCharts',
+ description:
+ 'You will help form the xCharts team, build ambitious and complex new features, work on strategic problems, and help grow adoption.',
+ url: '/careers/react-engineer-x-charts/',
+ },
{
title: 'React Tech Lead โ Core',
description:
diff --git a/docs/pages/careers/react-engineer-x-charts.md b/docs/pages/careers/react-engineer-x-charts.md
index 3f5d58fd3af65f..49632707feefee 100644
--- a/docs/pages/careers/react-engineer-x-charts.md
+++ b/docs/pages/careers/react-engineer-x-charts.md
@@ -1,4 +1,4 @@
-# React Engineer โ xCharts
+# React Engineer โ xCharts (future role)
You will help form the xCharts team, build ambitious and complex new features, work on strategic problems, and help grow adoption.
diff --git a/docs/data/base/getting-started/support/support.md b/docs/data/base/getting-started/support/support.md
index 93c069adfc4c65..515a72b1d914e4 100644
--- a/docs/data/base/getting-started/support/support.md
+++ b/docs/data/base/getting-started/support/support.md
@@ -8,9 +8,9 @@ We use GitHub issues as a bug and feature request tracker.
If you think you've found a bug, or you have a new feature idea:
-1. Please start by [making sure it hasn't already been reported or fixed](https://github.com/mui/material-ui/issues?utf8=%E2%9C%93&q=is%3Aopen+is%3Aclosed).
+1. Please start by [making sure it hasn't already been reported or fixed](https://github.com/mui/base-ui/issues?q=is%3Aopen+is%3Aclosed).
You can search through existing issues and pull requests to see if someone has reported one similar to yours.
-2. Then, if no duplicates exist, [open an issue](https://github.com/mui/material-ui/issues/new/choose) in the Baseย UI repository.
+2. Then, if no duplicates exist, [open an issue](https://github.com/mui/base-ui/issues/new/choose) in the Baseย UI repository.
### New issue guidelines
@@ -78,7 +78,7 @@ This includes issues introduced by external sources, like browser upgrades or ch
### Social media
-The Baseย UI community is active on both [X/Twitter](https://twitter.com/MaterialUI) and [LinkedIn](https://www.linkedin.com/company/mui/).
+The Baseย UI community is active on both [X/Twitter](https://twitter.com/MUI_hq) and [LinkedIn](https://www.linkedin.com/company/mui/).
These are great platforms to share what you're working on and connect with other developers.
### Discord
diff --git a/docs/data/base/pages.ts b/docs/data/base/pages.ts
index cc7e0c556b4529..ee24d0826d97df 100644
--- a/docs/data/base/pages.ts
+++ b/docs/data/base/pages.ts
@@ -11,6 +11,7 @@ const pages: readonly MuiPage[] = [
{ pathname: '/base-ui/getting-started/usage', title: 'Usage' },
{ pathname: '/base-ui/getting-started/customization', title: 'Customization' },
{ pathname: '/base-ui/getting-started/accessibility', title: 'Accessibility' },
+ { pathname: '/base-ui/getting-started/roadmap', title: 'Roadmap' },
{ pathname: '/base-ui/getting-started/support' },
],
},
diff --git a/docs/data/joy/components/autocomplete/CustomTags.js b/docs/data/joy/components/autocomplete/CustomTags.js
index 1b83a19a03b900..edcdc0edef35ce 100644
--- a/docs/data/joy/components/autocomplete/CustomTags.js
+++ b/docs/data/joy/components/autocomplete/CustomTags.js
@@ -18,6 +18,7 @@ export default function CustomTags() {
variant="solid"
color="primary"
endDecorator={
+
+
+
+ 
+
+ 
+ 
+ 
+ 
+
-
-You can track our progress fixing any specific issues by checking out the list of [Baseย UI stable release milestones on GitHub](https://github.com/mui/material-ui/milestone/46).
-
## A more independent product
So far, all Baseย UI-related development has happened within the [Materialย UI GitHub repository](https://github.com/mui/material-ui).
@@ -97,12 +93,14 @@ Rest assured that Baseย UI _is_ a standalone library, and it doesn't come packag
Baseย UI is no longer _merely_ "Materialย UI without the styles"โas we've seen with developer trends over the last few years, the potential for growth and adoption of headless components could actually dwarf Materialย UI in the near future.
To acknowledge that Baseย UI has the potential to outgrow Materialย UI, we plan to move it to its own dedicated GitHub repository for more focused communication and collaboration with the community that's growing around it.
-## Join us on the ride
+:::success
+The new repository is live๏ผ[check it out on GitHub](https://github.com/mui/base-ui)!
+:::
-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.
+## Help us on the ride
-Lastly, 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/material-ui/issues?q=is:open+is:issue+label:%22package:+base-ui%22).
+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.
Happy development! ๐
diff --git a/docs/pages/blog/benny-joo-joining.md b/docs/pages/blog/benny-joo-joining.md
index 13b160e2f0955f..4fac8d9b5f4338 100644
--- a/docs/pages/blog/benny-joo-joining.md
+++ b/docs/pages/blog/benny-joo-joining.md
@@ -17,6 +17,6 @@ He had a great start with his internship, implementing the [Masonry component](h
As part of the Core team, he will help with the community support, as well as work on some of the new features we plan for the community version of the library, like the unstyled components and the second design system.
I am excited to see what other valuable contributions he will make in the future.
-The Core team will continue developing the foundations on which to build great design systems. Here's a quick view of [the community roadmap](https://github.com/orgs/mui/projects/18/views/1).
+The Core team will continue developing the foundations on which to build great design systems.
We couldn't be more excited to have Benny on the team!
diff --git a/docs/pages/blog/marija-najdova-joining.md b/docs/pages/blog/marija-najdova-joining.md
index 55ac7f80d567c0..344a665e26b27e 100644
--- a/docs/pages/blog/marija-najdova-joining.md
+++ b/docs/pages/blog/marija-najdova-joining.md
@@ -15,6 +15,6 @@ Marija is off to a running start, having made important changes happen during he
She is now actively working on the unstyled components and [the update of the style engine](https://github.com/mui/material-ui/issues/22342). These are two items we've been eager to push forward since the release of v1 but that required someone to be dedicated to tackling them.
-The community team will continue developing the foundations on which to build great design systems. Here's a quick view of [the community roadmap](https://github.com/orgs/mui/projects/18/views/1).
+The community team will continue developing the foundations on which to build great design systems.
We couldn't be more excited to have Marija on the team! You can follow her on [X](https://twitter.com/marijanajdova).
diff --git a/docs/pages/blog/toolpad-use-cases.js b/docs/pages/blog/toolpad-use-cases.js
new file mode 100644
index 00000000000000..3aeea7aec33f3d
--- /dev/null
+++ b/docs/pages/blog/toolpad-use-cases.js
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
+import { docs } from './toolpad-use-cases.md?muiMarkdown';
+
+export default function Page() {
+ return 
+
+
+## Problems tackled through Toolpad
+
+Our internal tooling is easier to use and less prone to errors now; before we built these apps, some of these necessary functions were no more than a set of instructions in a Google doc or on Notion.
+A user had to log into multiple services to manage their day-to-day chores. Now, one interface does it all.
+We utilized Pipedream, Metabase, Google Sheets, and other tools to streamline our day-to-day operations.
+This meant we had distributed code in multiple places, accessible to only a few.
+Now we have everything on GitHub and collaboration is much simpler.
+
+Let's delve into four scenarios that Toolpad has successfully addressed:
+
+## 1. Support key validator
+
+We offer a priority support service to our MUI X premium customers: their queries get an expedited response within 24 hours.
+They share their issue through a Priority Support template in our repository where they're directed to validate their license key, and once it's validated, the 24-hour countdown starts.
+
+
+ 
+
+
+Here's how we built an app for this:
+
+The [`updateMuiPaidSupport.ts`](https://github.com/mui/mui-public/blob/master/tools-public/toolpad/resources/updateMuiPaidSupport.ts) file hosts all functions that are called from Toolpad.
+It uses the [custom function](https://mui.com/toolpad/concepts/custom-functions/) feature and combines GitHub Actions, Google Sheets, and Octokit to read and verify user information.
+The fetched data is then bound to the UI components.
+It uses Toolpad's [page parameters](https://mui.com/toolpad/concepts/page-properties/#page-parameters), [secrets handling](https://mui.com/toolpad/concepts/custom-functions/#secrets-handling), [shell removal](https://mui.com/toolpad/concepts/page-properties/#display-mode), and custom styling features.
+This app took one developer just a few hours to build which otherwise would have taken much longer.
+
+## 2. Customer support KPI tracker
+
+The read-only page illustrated below uses [HTTP requests](https://mui.com/toolpad/concepts/http-requests/) for its data source.
+Through the query builder UI we fetch the 100 latest support tickets from Zendesk to calculate the average time it takes us to respond to and resolve customer requests.
+It uses a [custom component](https://mui.com/toolpad/concepts/custom-components/) which we call the "health badge."
+Based on the metric value, the component shows three color-coded states: Problem (red), Warning (yellow), and OK (green).
+Other KPI pages also use this health badge and pre-built Chart components to compare stats, observe trends, and spot anomalies.
+
+The video below demonstrates the usage of this app in dev mode:
+
+
+
+We opted for Toolpad since Metabase doesn't support importing data from REST APIs.
+This is possible in Google Sheets but it requires writing a lot of JS code, and since we wanted to embed it in a [Notion page](https://mui-org.notion.site/KPIs-1ce9658b85ce4628a2a2ed2ae74ff69c?pvs=4#3974cb6ed12b4c5a9013bac63113e3bc), Toolpad was the ideal choice.
+Toolpad handles state management and routing, and simplifies query building and data binding, removing the need to write glue code.
+
+You can explore both of the aforementioned apps in dev mode on your device by running the underlying [Node application](https://github.com/mui/mui-public/tree/HEAD/tools-public).
+The next two apps discussed are internal to MUI.
+
+## 3. Manage overdue invoices
+
+We have an internal operations process to remind customers about overdue invoices: reminder emails are sent out at regular intervals following the due date.
+In the Toolpad app, the operations team can view a table of all customers who need to be contacted.
+They select one, email them from Zendesk, and update the status to `CONTACTED`, which is then written back to the database.
+This is a private app for internal use that can't be shared, but the following video gives a quick demo:
+
+
+
+Before this, we relied on a combination of Metabase and Google Sheets to fetch and edit recordsโbut this was cumbersome to operate and sometimes caused data inconsistency issues.
+Thanks to Toolpad we've managed to bring it all under one roof, dramatically improving our operations team's efficiency and productivity.
+
+## 4. Contributor payout
+
+We have a script to fetch monthly payout data for contributors to the MUI Store.
+Our operations team is responsible for paying contributors, but the script proved too technically challenging for them to run without help from our engineers.
+We solved this problem by importing the script into Toolpad and creating a UI for it.
+The video below shows how a user can select the dates, run the script, and receive text that's properly formatted to copy and paste directly into Slack communications:
+
+
+
+## Conclusion
+
+As you've seen, at MUI we have streamlined our internal tooling through Toolpad, helping us stay lean and move fast.
+Internal apps are often very specific to the needs of the organization, but hopefully, you've been inspired by some of our use cases here:
+
+- Have you come across any similar needs within your org regarding operations, administration, or analytics?
+- Do you have existing code that you wish you could reuse in a low-code builder instead of starting fresh?
+- Do you wish you didn't have to do any maintenance on the front ends of your internal tools?
+
+Toolpad handles state management, data fetching, routing, and UI creation, and it can be imported directly into your code base to save you time.
+I encourage you to check out more [examples](https://mui.com/toolpad/examples/) and visit our [GitHub repository](https://github.com/mui/mui-toolpad/) to evaluate the product.
+In case you need any further information, feel free to reach out to the team at toolpad@mui.com.
diff --git a/docs/pages/careers.tsx b/docs/pages/careers.tsx
index 0f1e1d90e3210c..dc3aeb54857037 100644
--- a/docs/pages/careers.tsx
+++ b/docs/pages/careers.tsx
@@ -146,24 +146,18 @@ const openRolesData = [
{
title: 'Engineering',
roles: [
- {
- title: 'React Engineer โ xCharts',
- description:
- 'You will help form the xCharts team, build ambitious and complex new features, work on strategic problems, and help grow adoption.',
- url: '/careers/react-engineer-x-charts/',
- },
// {
- // title: 'React Engineer - X',
+ // title: 'React Engineer โ xCharts',
+ // description:
+ // 'You will help form the xCharts team, build ambitious and complex new features, work on strategic problems, and help grow adoption.',
+ // url: '/careers/react-engineer-x-charts/',
+ // },
+ // {
+ // title: 'React Engineer โ X',
// description:
// '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/',
- },
],
},
{
@@ -223,6 +217,12 @@ const nextRolesData = [
'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: 'React Engineer โ xCharts',
+ description:
+ 'You will help form the xCharts team, build ambitious and complex new features, work on strategic problems, and help grow adoption.',
+ url: '/careers/react-engineer-x-charts/',
+ },
{
title: 'React Tech Lead โ Core',
description:
diff --git a/docs/pages/careers/react-engineer-x-charts.md b/docs/pages/careers/react-engineer-x-charts.md
index 3f5d58fd3af65f..49632707feefee 100644
--- a/docs/pages/careers/react-engineer-x-charts.md
+++ b/docs/pages/careers/react-engineer-x-charts.md
@@ -1,4 +1,4 @@
-# React Engineer โ xCharts
+# React Engineer โ xCharts (future role)