Material-ui: [Collapse] Transition for width instead of height?

[xaviergonz]

Is there a collapse transition for width instead of height? If not, that would be cool :)

[oliviertassinari]

Do you have a use case example?

[xaviergonz]

The use case would be a horizontal expander, a paper div with an icon button that once clicked expands the paper div horizontally to show/hide extra actions to its side, but unlike a popover they'd stick to the screen.

[oliviertassinari]

I have added the waiting for users upvotes tag. I'm closing the issue as I'm 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.

[jmcpeak]

A perfect example would be closing a Tab - I want the Tab element being closed to collapse from right to left. Watch Safari or Chrome Canary when you close a Tab - I want the same feel.

[IceMaD]

I have an other use case. To hide the menu button which opens the drawer like here

[tonymckendry]

+1 - would definitely use this for a riff on the permanent mini-variant navigation drawer example

[juddey]

I'd use this to extend a search dialog to the available width of the menubar. That would give more room for the user to type in a search query.

[fokouasteven]

It has a lot of uses and could be very cool, changes from traditional drawers

[Smarello]

+1 It'd be very useful in a "power BI like" application

[oliviertassinari]

We would appreciate if examples of the problem to solve could be shared. Thanks.

[syntaxbliss]

That's exactly what I need (:

Currently, I have a container that shows some information to the user. I need that container to be collapsed horizontally, so the container next to it can take over and occupy the space left behind.

[Ecneics36]

I am also trying to do the mini variant drawer:
https://material-ui.com/components/drawers/#mini-variant-drawer
but by using a Collapse component instead of class changes. It would be much easier with our code base. Having a horizontally collapsible container would be perfect.

[Hivemind9000]

I would like this also for collapsing columns horizontally on a Kanban board (which is common in Kanban applications). Have upvoted (op now has 77 votes). How many are needed @oliviertassinari for this to become a thing?

[Janpot]

Another use case, with a row of Chip components. Would like to animate adding one in the middle of the row and have the chips to the right of it slide over. This would make it clearer visually where the new chip was added.

[oliviertassinari]

@Janpot should it be handling with a lower level animation lib?

[Janpot]

@oliviertassinari probably, I'm not very up-to-date on how to animate with react and my first instinct was to check what's available in the libs I'm already using. To me it just seems a bit strange to have a direction on the Slide but not on the Collapse, but I don't have all the context for this decision ofcourse.

[shivam-kantival-mt]

@oliviertassinari How about thinking of a search button which horizontally expands an input field when clicked. Sort of CollapsibleSearch. Might be a good use case.

[tomasshaw]

Bumping thread.
A direction tag would be a welcome addition, both adding more flexibility to Collapse itself, and going hand in hand with the Slide component functionability

[EngPeterShaker]

as a temporary workaround , you can just add this .css code to your project :

.MuiCollapse-container {
  width: 0px;
 transition-property: width;
}

.MuiCollapse-entered {
  width: 100%
}

.MuiCollapse-hidden {
  width: 0px
}

[LucianHij]

When will be this implemented? It will be very helpful if we could specify for the Collapse element an in and out direction left right top bottom.

[darkowic]

Is this what you expect folks :) PR :soon:

[zachsa]

Hi, I've been experimenting with this and I have found that the <Collapse /> component takes up the whole horizontal space with this structure:

<Grid container>
  <Collapse orientation="horizontal" in={showSidebar}>
    <Grid item xs={4}>
      <Sidebar />
    </Grid>
  </Collapse>

  <Grid item xs>
    <ResultList />
  </Grid>
</Grid>

In this case the Collapse component, when in = true, renders as 100% the width of the <Grid container>. I'm not actually sure that I'm using Grid correctly... But when I use any other Transition this is NOT the case. For example, replacing Collapse with

<Slide direction="right" unmountOnExit in={showSidebar}>
  ...
</Slide>

Then the layout behaves correctly (in that the slide component renders 'transparently', with the child Grid component sizing working as expected).

Looking at the HTML.

The Slide component gets classNames associated with the Grid (which I assume is the children?):

<div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-4" style="transform: none; transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;" />

Whereas with the Collapse component, unlike with the Slide, no inline styles are giving, and the classes don't include any classes from the children:

<div class="MuiCollapse-container MuiCollapse-horizontal MuiCollapse-entered" style="min-width: 0px;">
  <div class="MuiCollapse-wrapper MuiCollapse-horizontal">
    <div class="MuiCollapse-wrapperInner MuiCollapse-horizontal">
...

Is this intended?

Rewriting my JSX:

<Grid container>
  <Collapse
    timeout={3000}
    className={clsx({
      'MuiGrid-root': true,
      'MuiGrid-item': true,
      'MuiGrid-grid-xs-4': showSidebar ? true : false,
    })}
    orientation="horizontal"
    in={showSidebar}
  >
    <Grid item xs={showSidebar ? 12 : 4}>
      <Sidebar />
    </Grid>
  </Collapse>

  <Grid item xs>
    <ResultList />
  </Grid>
</Grid>

This somewhat achieves what I'm looking for but in a very jumpy, unsatisfactory way (the timout={3000} allows me to see where the problems are).

I apologise if I'm misusing the Transition component in this case! If so, I would be super grateful for pointers in the correct direction.