eliofreitas
commented
5 years ago Positive points
Features
-
New prop "injectfirst": allows styling directly into a component overriding material styles
-
Css classname overhaul: allows defining global class and having deterministic classnames when necessary
-
More pseudo-classes: support of eight different custom pseudo-classes.
-
Dynamic styling: added the support for style functions
Performance
- Tree shaking: you can now use destructured imports when importing multiple components
- Bundle size reduction: from 95 kB gzipped to below 80 kB
- Runtime performance: 15% on clients
Future React compatibility
- Ref forwarding: ability to retrieve a reference to the DOM node like you would do with a built-in component
- Hooks migration: Most material-ui components have been rewritten from class to hooks
- Concurrent mode: allows speeding up rendering
- Shallow unit test elimination: Material ui now preferes full mount test
Misc
- Responsive font sizes
- Box component utility: Box component serves as a wrapper component for most of the CSS utility needs
- spacing helper
- new date picker
- styling is separated from core
Negative points/impacts
- Snapshots will break because of the forward ref
- We must clean node modules because material is now using jss10 and not jss9 if jss9 is present it might break
Must eliminate first argument of withTheme, should not be a problem could not find withTheme being used in ui-kitAnimations in jss are different, we are not using animations yettheme.palette.augmentColor() now returns a value so its a pure function, we are not using augment color- We must remove useNextVariants from typography
- theme.spacing.unit is no longer a value, so we must use instead theme.spacing(value)
- spacing api is change spacing: PropTypes.oneOf([0, 8, 15, 16, 24, 30, 32, 40]), to spacing: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
typescript some values are now unknown type, we are not using typescript for now- Button -- removed 3 variants that we were not using
- Card -- removed disableActionSpacing to disableSpacing -- card action css class changed to spacing
- ClickAwayListener -- Hide react-event-listener props.
- Dialog -- Rename the disableActionSpacing prop to disableSpacing. -- Rename the action CSS class to spacing -- Use typography variant body1 instead of subtitle1 -- Edge property should be set on the icon buttons -- The child needs to be able to hold a ref. The composition guide explains the migration strategy.
- Modal -- The child needs to be able to hold a ref. The composition guide explains the migration strategy -- Remove the classes customization API for the Modal component
- Paper -- Default elevation changed to achieve previous values elevation = 2
- Portal -- The child needs to be able to hold a ref. The composition guide explains the migration strategy.
- Slide -- The child needs to be able to hold a ref. The composition guide explains the migration strategy.
- Snackbar -- Snackbar dimensions were altered
- Transition slide was changed to grow we are not using transitions
- Tab -- Remove the labelContainer, label and labelWrapped class keys for simplicity. This has allowed us to ---- Remove 2 intermediary DOM elements. You should be able to move the custom styles to the root class key. -- Remove fullwidth
- TextField -- You should be able to override all the styles of the FormLabel component using the CSS API of the InputLabel component. The FormLabelClasses property has been removed. -- Change the default box sizing model. It uses the following CSS now -- Remove the inputType class from InputBase
Child needs to be able to hold a ref
This is the most delicate point because we might not be able to control the childrens that were added by users
Some of the components need access to the DOM node. This was previously possible by using ReactDOM.findDOMNode. This function is deprecated in favor of ref and ref forwarding. However, only the following component types can be given a ref:
- Any Material-UI component
- class components i.e. React.Component or React.PureComponent
- DOM (or host) components e.g. div or button
- React.forwardRef components
- React.lazy components
- React.memo components
if we have this problem we will see a warning like this:
Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Invalid prop component supplied to ComponentName. Expected an element type that can hold a ref.
the solution is:
const MyButton = props => <div role="button" {...props} />;
const MyButton = React.forwardRef((props, ref) => <div role="button" {...props} ref={ref} />);
<Button component={MyButton} />;
diogofscmariano
Description:
Material released their 4.x version and since we will be reviewing all our components we should evaluate if we should move from 3.x to 4.x version.
Important notes:
Estimation: 2 days
Expected outcome: