-
-
Notifications
You must be signed in to change notification settings - Fork 32.7k
[Stack] Changing order of first item breaks spacing #33810
Copy link
Copy link
Closed
Labels
component: StackThe React component.The React component.type: new featureExpand the scope of the product to solve a new problem.Expand the scope of the product to solve a new problem.
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
The Stack item that is listed first in the source code does not have any spacing above it if its order is changed to be anything other than first in the stack. In the example A doesn't have spacing, but it should.
It's not just the first one that is messed up, it's also the one that ends up in first position. In the example B has spacing above it, but it shouldn't.
Expected behavior 🤔
The stack should apply spacing with respect to changes in order.

Steps to reproduce 🕹
Here is a minimal example:
<Stack spacing={20}>
<Box order={3}>
A
</Box>
<Box order={1}>
B
</Box>
<Box order={2}>
C
</Box>
</Stack>Context 🔦
This is the recommended solution for changing the order of items in a Stack as far as I can tell. It is recommended in this mui git issue and in this stack overflow, both of which came up near the top of my google searches.
Your environment 🌎
npx @mui/envinfo
System:
OS: macOS 11.4
CPU: (8) x64 Apple M1
Memory: 166.34 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.17.3 - ~/.nvm/versions/node/v14.17.3/bin/node
npm: 6.14.13 - ~/.nvm/versions/node/v14.17.3/bin/npm
Managers:
Homebrew: 3.5.4 - /usr/local/bin/brew
pip3: 22.0.4 - ~/.venvs/scheduler/bin/pip3
RubyGems: 3.0.3 - /usr/bin/gem
Utilities:
Make: 3.81 - /usr/bin/make
GCC: 4.2.1 - /usr/bin/gcc
Git: 2.33.1 - /usr/local/bin/git
Clang: 12.0.5 - /usr/bin/clang
Servers:
Apache: 2.4.46 - /usr/sbin/apachectl
Virtualization:
Docker: 20.10.7 - /usr/local/bin/docker
IDEs:
Nano: 2.0.6 - /usr/bin/nano
Vim: 8.2 - /usr/bin/vim
Xcode: /undefined - /usr/bin/xcodebuild
Languages:
Bash: 3.2.57 - /bin/bash
Perl: 5.30.2 - /usr/bin/perl
PHP: 7.3.24 - /usr/bin/php
Python: 3.10.5 - /Users/max/.venvs/scheduler/bin/python
Python3: 3.10.5 - /Users/max/.venvs/scheduler/bin/python3
Ruby: 2.6.3 - /usr/bin/ruby
Databases:
PostgreSQL: 14.4 - /usr/local/bin/postgres
SQLite: 3.32.3 - /usr/bin/sqlite3
Browsers:
Chrome: 103.0.5060.134
Safari: 14.1.1
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
component: StackThe React component.The React component.type: new featureExpand the scope of the product to solve a new problem.Expand the scope of the product to solve a new problem.
