Skip to content

[Stack] Changing order of first item breaks spacing #33810

@max-two

Description

@max-two

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.

image

Expected behavior 🤔

The stack should apply spacing with respect to changes in order.
image

Steps to reproduce 🕹

Code Sandbox

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    component: StackThe React component.type: new featureExpand the scope of the product to solve a new problem.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions