Releases: mui/mui-design-kits
Design Kits v6.1.0
Design Kits v5.17.0
Aug 23, 2024
Figma
Material UI
- Add Typography variables
- Add new Image List components
- Add new Popover component
- Add metadata version variable so the Material UI Sync plugin can support multiple versions of the Figma Kit.
- Fix a couple of issues; find them in this GitHub milestone.
Joy UI
No updates.
Design Kits v5.16.0
Feb 19, 2024
Figma
Material UI
- Sync with @mui/icons-material
- Added the MUI X Charts
- Updated the MUI X Data Grid
- Updated the MUI X Date Picker
- Updated to Figma Variables
- Fixed a couple of issues; find them in this GitHub milestone.
Joy UI
No updates.
Material UI Sync v0.1
Design Kits v5.15.0
Oct 8, 2023
Figma
Material UI
No updates.
Joy UI
This version was built around Joy UI v5.0.0-beta.8. The changes:
- Update the look & feel to better match the latest Joy UI release
Design Kits v5.14.0
Jul 26, 2023
Figma
Material UI
This version was built around Material UI v5.14.3.
The library is now fully designed with local variables.
- Added variables
- Fixed a couple of issues; find them in this GitHub milestone.
- Improved the Data Grid support
Joy UI
No updates.
Design Kits v5.11.1
Mar 1, 2023
Figma
Material UI
This is a small release to fix a couple of small bugs reported by designers in v5.11.0.
- Fixed a couple of issues, find them in this GitHub milestone.
- Improved the
<Typography>
component to have the font style changes with all the typography variants. - Improved the support of the data grid, with more features like toolbar actions, tree data, and column panels.
- Fixed a couple of typos in the name of the design tokens for Token Studio.
Joy UI
No updates.
Design Kits v5.11.0
Jan 5, 2023
Figma
Material UI
Get an overview of the changes on this video! Given this release includes many changes, we suggest designing new screens using this new version instead of swapping instances to update existing screens.
Breaking changes
- Components have been separated into smaller APIs — which means the Figma component names have been changed as well. This naming also helps to filter more accurately. (e.g., searching <Button> will give you the first result of the component itself). It's easier to identify a Figma component vs. a regular element.
Changes
- Fixed a couple of issues; find them in this GitHub milestone.
- Add support for the Tokens Studio plugin. With a single click, you can now switch a group from the light to the dark mode.
- Add early preview for the Joy UI React library #71.
- Add support for slots with nested instances and subcomponents. More details in this Figma 22 Schema talk #112.
- Add new Space and Stack components.
- Add support for text properties #114
- Fix small bugs, thanks to your reports on GitHub.
- Redesign components documentation.
- Fix outdated links in the docs.
Joy UI
No updates.
Design Kits v5.4.1
Dec 14, 2022
Sketch
- Fix TextField and Select resize regression with the latest version of Sketch
- Add all shadows
Design Kits v5.9.0
Jul 25, 2022
Figma
Breaking changes
Some names have been changed in 5.9.0 to quickly distinguish between elements and components. Since Swap Library identifies the components based on their names you need to make sure the current component library matches the names of the new library. Skipping this step will leave the old components in your file. You can learn more about it in the migration introduction video.
-
Badge
- Name change from Badge W. Icon to Badge with Component
Bottom Navigation
-
Name change from BottomNavigationAction to BottomNavigation/Elements/Action
-
Card
- Name change from CardHeader to Card/Elements/CardHeader
- Name change from CardActions to Card/Elements/CardActions
- Name change from CardMedia to Card/Elements/CardMedia
- Name change from CardContent to Card/Elements/CardContent
-
Checkbox
- Name change from CheckboxWformGroup to Checkbox/with Form Group
-
DataGrid
- Name change from DataGridHeader to DataGrid/Elements/Header
- Name change from DataGridCell to DataGrid/Elements/Cell
- Separate component DataGridRow to DataGrid/Elements/Row Header and DataGrid/Elements/Row Cell
- Name change from DataGrid to DataGrid Table
-
Dialog
- Name change from DialogTitle to Dialog/Elements/DialogTitle
- Name change from DialogContent to Dialog/Elements/DialogContent
- Name change from DialogActions to Dialog/Elements/DialogActions
-
Pagination
- Name change from UnstyledPaginationItem to Pagination/Elements/UnstyledPaginationItem
- Name change from PaginationItem to Pagination/Elements/PaginationItem
-
Radio
- Name change from Radio W. Form Group to Radio/with Form Group
-
Rating
- Name change from Star to Rating/Elements/Star
-
Slider
- Name change from Slider Track to Slider/Elements/Slider Track
- Name change from Slider Rail to Slider/Elements/Slider Rail
- Name change from Slider Mark to Slider/Elements/Slider Mark
- Name change from Slider Thumb to Slider/Elements/Slider Thumb
- Name change from Slider Value Label to Slider/Elements/Slider Value Label
- Name change from Slider Label to Slider/Elements/Slider Label
-
SpeedDial
- Name change from SpeedDialItem to SpeedDial/Elements/SpeedDialItem
-
Stepper
- Name change from Step Elements to Stepper/Elements/Step Elements
- Name change from Step to Stepper/Elements/Step
-
Table
- Name change from TableHead to Table/Elements/TableHead
- Name change from TableCell to Table/Elements/TableCell
- Name change from TableFooter to Table/Elements/TableFooter
- Name change from TableHeadRow to Table/Elements/TableHeadRow
- Name change from TableCellRow to Table/Elements/TableCellRow
-
Tabs
- Name change from TabItem to Tab
-
Timeline
- Name change from TimelineDot to Timeline/Elements/TimelineDot
- Name change from TimelineItem to Timeline/Elements/TimelineItem
-
Toggle Button
- Name change from ToggleButton to ToggleButton/Elements/Button
- Name change from ToggleButtonGroup to ToggleButton
Changes
- Fixed a couple of issues, find them in this GitHub milestone.
- Reduce the number of variants using the Boolean property
- Remove all click interactions inside components as they would interfere with the ability to add new click interactions
- Change all interaction animation to ‘Instant’ for better performance
- Add usage examples on each component’s page
- Add ‘Large’ variant to Checkbox and Radio components
- Add ‘Instance swap’ property to relevant components like Button, Icon, IconButton, etc.
- Add Spacer component
- Fix inconsistent padding
Adobe XD
- Merge the light and dark theme into the same Adobe XD file
- Add dark examples for all components
- Add “default“ and “inherit“ color variables for relevant components
- Add Card multiline component
- Update and polish all components
- Remove master components to improve the design experience and performance
- Remove severity colors to improve performance
- Add interactions to relevant components
- Match components variant names with the React components