Oh and another thing - I am not able to run tests because of following error:

$ yarn test:unit --grep Collapse
...
✖ ERROR: No valid exports main found for '/home/darkowic/projects/github/material-ui/node_modules/dom-accessibility-api'

@material-ui/core: parsed: +0.13% , gzip: +0.20%
@material-ui/lab: parsed: +0.20% , gzip: +0.27%

Details of bundle changes

Generated by 🚫 dangerJS against 24c0cec

There are still 2 things I am not sure about the collapse:

• Why this component needs 2 wrappers?
• IMHO the wrapper should set width and height to 100% to fill the whole root space:
  
  after setting the wrapper's height to 100% (the content has height 100%):
  

Oh and another thing - I am not able to run tests because of following error:

What OS are you using and what's the output of node -v?

Oh and another thing - I am not able to run tests because of following error:

What OS are you using and what's the output of node -v?

@eps1lon

$ uname -a
Linux pop-os 5.3.0-7648-generic #41~1586789791~19.10~9593806-Ubuntu SMP Mon Apr 13 17:50:40 UTC  x86_64 x86_64 x86_64 GNU/Linux
$ node -v
v13.5.0

@oliviertassinari I see you added v5 label - when do you think we can release it?. Why not release it in some 4.x version? I would love to use it (I use it now - I copied the whole component into my source). I tried to not introduce any breaking changes.

@darkowic We are freezing all new features from the v4 branch.

😒 Well, then I'm waiting for v5-alpha.1 🚀

@darkowic You can target the next branch with this.

Updated ;) One unit tests is failing:

  it('can fallback to findDOMNode in a StrictMode theme', () => {

with TypeError: Cannot read property 'style' of null when trying to get wrapperRef.current and some browser tests are failing with similar error - any tips?

Marked as breaking in anticipation of the removal of collapsedHeight...

btw yarn prettier command from contribution guide doesn't work

@darkowic What error are you getting?

@mbrookes

[darkowic@pop-os] ~/projects/github/material-ui (10051_horizontal_collapse)
$ yarn prettier
yarn run v1.22.4
$ node ./scripts/prettier.js
prettier.js [mode]

formats codebase

Positionals:
  mode  "write" | "check-changed" | "write-changed"
                                             [string] [default: "write-changed"]

Options:
  --help  Show help                                                    [boolean]

Error: Command failed: git rev-parse next
fatal: ambiguous argument 'next': unknown revision or path not in the working tree.
Use '--' to separate paths from revisions, like this:
'git <command> [<revision>...] -- [<file>...]'

    at ChildProcess.exithandler (child_process.js:303:12)
    at ChildProcess.emit (events.js:315:20)
    at maybeClose (internal/child_process.js:1051:16)
    at Socket.<anonymous> (internal/child_process.js:442:11)
    at Socket.emit (events.js:315:20)
    at Pipe.<anonymous> (net.js:670:12) {
  killed: false,
  code: 128,
  signal: null,
  cmd: 'git rev-parse next',
  stdout: 'next\n',
  stderr: "fatal: ambiguous argument 'next': unknown revision or path not in the working tree.\n" +
    "Use '--' to separate paths from revisions, like this:\n" +
    "'git <command> [<revision>...] -- [<file>...]'\n"
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Fortunately, yarn prettier:all works ;)

Looks like you don't have a local next branch for listChangedFiles() to compare with. (Which pretter:all doesn't require.) Should probably have a defensive check...

Something's off with the horizontal collapse - it slides to the right rather than collapsing to the left when collapsedSize is set.

@darkowic Fetch to upstream remote again i.e. git fetch upstream if upstream is pointing to https://github.com/mui-org/material-ui.

Something's off with the horizontal collapse - it slides to the right rather than collapsing to the left when collapsedSize is set.

@mbrookes hmm how it should work? Do we want to add some prop that defines which direction it is animated?

It should behave the same as without collapsedSize, but stop collapsing at collapsedSize width (as it does with vertical).

@darkowic Could you update this PR please with the latest version of the next branch?

Yes, I will do it together with the fix/solution for collapse animation orientation

Rebased and improved demo. Actually it was looking weird because of space-between ;)

🚢 🎉

@darkowic Great work, thanks!

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.

@zachsa Please open a new issue and fill out the template. PRs are not monitored for potential issues.

Thank you @eps1lon - I've written up an issue here: #21971