material-ui icon indicating copy to clipboard operation
material-ui copied to clipboard

[wip][base-ui] Remove link logic from Button

Open mnajdova opened this issue 1 year ago • 1 comments

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 disabled prop
  • rendering different DOM nodes (e.g. via component prop)
  • returning the active state

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.

mnajdova avatar Feb 07 '24 10:02 mnajdova

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

mui-bot avatar Feb 07 '24 10:02 mui-bot

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.

colmtuite avatar Feb 23 '24 09:02 colmtuite

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.

mnajdova avatar Feb 23 '24 13:02 mnajdova

@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 :)

mnajdova avatar Mar 13 '24 14:03 mnajdova