🚀 Major Release Notes:
This major release introduces key improvements, including rewritten components, new features, enhanced functionalities, and dependency updates in order to ensure a more efficient and consistent experience.
✨ Enhancements
- Material UI Upgrade
- DateTime component has been rewritten
- Autocomplete component has been rewritten
- Added new Mui X Stats Chart component
- Added DisplayTags and TagsInput components
- Added action button integration for Toast component
- Upgraded react-router-dom
- Theme Update
- ESLint Configuration Update
🚨 Breaking chages
Note: To use the new components, the following packages must be upgraded:
@emotion/react
@emotion/styled
@mui/icons-material
@mui/material
-
Typography:
- The
color
prop in the Typography component is not a system prop anymore. You can use the sx prop instead.
You still can access some theme colors directly using the color prop. Check the list here: https://mui.com/material-ui/api/typography/#typography-prop-color
Example:<Typography color="textSecondary">Secondary text</Typography>
- The
-
DateTime:
components
property have been replaced withslots
property.format
property is now used to format the date when rendered in the input andlocaleFormat
to choose ISO format names.
-
Autocomplete
- The value provided to the Autocomplete should always have a default. Example:
<Autocomplete value = {myValue || null} /> <Autocomplete withCheckboxes={true} value = {myValue || []} />
- Add
<CssBaseline/>
to the theme provider in your project:
<ThemeProvider theme={getTheme()}> <CssBaseline /> {children} </ThemeProvider>
-
The onChange behavior of the Creatable Autocomplete component has been updated. When a new value is created, the format of the value passed to the onChange callback has changed.
Old behavior: When creating a new value, the onChange callback provided an object with the new value text stored in the name property. Example:{ label: "New Text", value: "New Text", name: "New Text"}
New behavior: Now, the onChange callback provides the new value as a primitive string, instead of an object. Example:
"New Text"
-
The onChange behavior of the simpleValue Autocomplete has been updated. When using the Autocomplete with simpleValue mode enabled and options represented as a list of objects, the onChange event no longer automatically retrieves the desired value using the valueKey. You must now manually handle the event to extract the desired value from the selected option.
Old behavior: When the simpleValue prop was enabled, the onChange event would automatically return the value corresponding to the specified valueKey from the selected option.
New behavior: With the updated behavior, the onChange event now provides the full selected object. You are responsible for manually extracting the desired value based on the specified valueKey.const handleChange = useCallback(key=>selected=> prop(key, selected)) <Autocomplete simpleValue valueKey="myKey" onChange={handleChange("myKey")} />
-
Toast
- Now, the
autoClose
istrue
by default.
- Now, the
❌ Deprecations
Chart
was deprecated and renamed toDeprecatedChart
. We recommend using the newStatsChart
which is now based on@mui/x-charts
libraryStatsChart
was deprecated and renamed toDeprecatedStatsChart
Autocomplete
was deprecated and renamed toDeprecatedAutocomplete
. We recommend using the newAutocomplete
component
📦 Dependency Updates
All the dependencies have been updated and the following have been removed:
- @nx/js: ^20.0.8
- dedent: ^1.5.3
- sort-package-json: ^2.10.1
Changes
- Update DateTime component @andra-sava (#152)
- Storybook controls and examples updates @alexandra-c (#151)
- Feature/fix lazy loading on autocomplete @andra-sava (#150)
- restored Old Autocomplete into DeprecatedAutocomplete @andra-sava (#148)
- Optimizations on Toast Component @elena-dumitrescu (#143)
- cahnges on Autocomplete @andra-sava (#147)
- Added DisplayTags and TagsInput components @alexandra-c (#146)
- Feature/Remake Autocomplete @dragos-rosca (#145)
- upgrade react-router-dom @DCosti (#144)
- added new Mui X stats charts @andra-sava (#142)
- update packages and refactor DateTime component @DCosti (#140)
- update sideMenu background color in themes @alexandra-c (#139)
- upgrade material UI @andra-sava (#138)
- upgrade eslint config file @alexandra-c (#137)
- upgrade packages and revert to webpack @andra-sava (#136)
- Feature/improvements @DCosti (#135)