material-ui
material-ui copied to clipboard
[wip][base-ui] Remove link logic from Button
TODOs
- [ ] Add useLink usage in MenuItem & Tab (useSelect, useOption, useMenuButton should be ok with using only useButton)
- [ ] Update Joy UI components to use the useLink hook (Button, Chip etc)
- [ ] Add tests if the link logic is not covered in these components/hooks
- [ ] Decide if we want to expose a Link component
The idea behind the useLink hook was to reuse the features from the useButton hook that makes sense for links, like:
- supporting
disabledprop - rendering different DOM nodes (e.g. via component prop)
- returning the
activestate
As an example I updated the ButtonBase component inside the @mui/material-next package to show how the implementation on the styled layer would look like, unless we want to provide a custom hook similar to the previous version of the useButton hook in the styled libraries to avoid unnecessary runtime - the duplicated logic needs to run two times for each of the hooks. Another thing that this custom hook could take care of is making sure the event handlers are propagated to the right hook.
Netlify deploy preview
https://deploy-preview-40976--material-ui.netlify.app/
@material-ui/unstyled: parsed: +0.53% , gzip: +0.54% @mui/material-next: parsed: +0.37% , gzip: +0.24%
Bundle size report
Details of bundle changes (Toolpad) Details of bundle changes
Generated by :no_entry_sign: dangerJS against 6abe1eb86f56860f0c975e521cc831ccc3214648
My thinking atm is that we should have separate hooks for link and button, but not provide either as a component, since we're no longer supporting custom events, for now at least.
People can use router links for their link component, and just <button> for their button components.
We decided to remove the logic around hover, focus and active state from both hooks, and see what we end up with. Based on that we can decide what's going to be left.
@colmtuite I am closing this PR, I don't have a bandwidth to push it forward. The last discussion we had regarding this was to remove the logic for the pseudo-elements and see what's left in order to make a decision on whether the useLink hook should exist at all.
I would recommend whoever tackles this, to open pull request on the Base UI repository directly, so that you don't have to update all Material UI components that depend on this logic :)