search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
3.92k stars 1.19k forks source link

Add Splitter component #512

Open josgraha opened 5 years ago

josgraha commented 5 years ago

As an MUI developer, I would like a Splitter component so I can create draggable dividers in UI regions as per the Material Design spec below. https://material.io/design/layout/responsive-layout-grid.html#ui-regions

Expected Behavior 🤔

The expected behavior should be a draggable divider where the panes adhere to the Material spec responsive patterns. https://material.io/design/layout/component-behavior.html#responsive-patterns

The draggable divider should adhere to the Material design standards for "Drag" gesture https://material.io/design/interaction/gestures.html#types-of-gestures

Current Behavior 😯

Currently there is not a splitter component in the component list or roadmap so this will be a "Labs" component.

Examples 🌈

This component will be a fork of the react-split-pane component as a starting point. The examples can be found here.

Context 🔦

We hope that by forking the react-split-pane component and supporting desktop use cases for interacting with UI regions we can join the Responsive Patterns and the Drag Gesture Material Designs into a cohesive experience for users with large screen sizes, 7+ (greater than 7 inch diagonal) as it is referred to in the USA. We also hope to combine the API of the m-react-splitters with the stability and quality of react-split-pane but by initially forking the stable react-split-pane we will have a good starting point to evolve future requirements. We also feel that the exceptional quality of the MUI project configuration and build tooling will be a great platform for future exploration and evolution of this API.

Benchmark

Related

mbrookes commented 5 years ago

so I can create draggable dividers in UI regions as per the Material Design spec below.

The page you linked to doesn't show a draggable divider, it shows "Layout changes on different-sized screens". Material-UI already provides multiple ways to achieve responsive layouts.

material.io/design/interaction/gestures.html#types-of-gestures

That is something entirely different.

@oliviertassinari You piled on to the 👍. What am I missing here?

oliviertassinari commented 5 years ago

@mbrookes I upvote to give a room for people to express themselves. I upvote to show that I care about people need. @josgraha Could you answer to Matt concerns?

We have issues with more than 50 upvotes.

oliviertassinari commented 5 years ago

@josgraha Do you have something like this in mind https://v1.quasar-framework.org/vue-components/splitter?

sjlongland commented 5 years ago

I just dropped the current stable release of react-split-pane in and it worked like a charm… is much more really needed?

josgraha commented 5 years ago

so I can create draggable dividers in UI regions as per the Material Design spec below.

The page you linked to doesn't show a draggable divider, it shows "Layout changes on different-sized screens". Material-UI already provides multiple ways to achieve responsive layouts.

material.io/design/interaction/gestures.html#types-of-gestures

That is something entirely different.

@oliviertassinari You piled on to the 👍. What am I missing here?

@oliviertassinari @mbrookes I'm going to raise a PR for this, it will be based on react-split-pane, it seems they're not a fan of hooks or mono-repo but it seems like an essential addition given the Material Design specs referenced. From an API standpoint m-react-splitters seems a bit more ambitious but the algo in react-split-pane is a solid starting point.

josgraha commented 5 years ago

@mbrookes @oliviertassinari I am going to raise a PR on this. The idea is to fork react-split-pane because they are not a fan of hooks or mono-repos and it would be nice to evolve to a more ambitious API in the future. I also think the demos are easier to follow here and certainly easier to get up and running. I think react-split-pane was brilliantly executed but prior to the last release the site was down and it was poor DX to run the examples. I don't blame react-split-pane and given how much effort it is to maintain a public repo like this a tooling pivot or uplifting tech would require a lot of resources on an already under-resourced project.

oliviertassinari commented 5 years ago

@josgraha react-split-pane seems to be decent enough. Given the number of stars, we will probably not accept any pull request on our lab until people upvote this issue in a significant way. We have different priorities, for now :).

mbrookes commented 5 years ago

@josgraha This is so far removed from our core mission, I don't see us ever accepting a PR for it, votes or no votes.

What you could do however is fork it, make the changes you desire, and use a subset of our docs infrastructure to document it. You might find it easier to start with @dmtrKovalenko's material-ui-pickers docs site, as he has already done the work of simplifying it for a smaller project.

If something in the Material Design spec changes in the future to require something like this, we could then consider hosting it under the @material-ui umbrella.

oliviertassinari commented 5 years ago

I have added the waiting for users upvotes tag. I'm closing the issue as we are not sure people are looking for such abstraction. So please upvote this issue if you are. We will prioritize our effort based on the number of upvotes.

josgraha commented 5 years ago

thanks so much for the discussion, great suggestions too.

josgraha commented 5 years ago

@josgraha Do you have something like this in mind v1.quasar-framework.org/vue-components/splitter?

nice api, thanks!

mbrookes commented 2 years ago

Another alternative: https://github.com/DevbookHQ/splitter