[Card] Fix CardActions spacing for different button components

[Janpot]

Noticed that the spacing was off when different components are used for Card actions. See the spacing between second and third action here.

Also fixes #29819

[mui-bot]

Netlify deploy preview

https://deploy-preview-31885--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against a09afec

[Janpot]

Just noticed AccordionActions and DialogActions use a similar implementation for their spacing

[siriwatknp]

Using gap is perfect but due to browser support being at 88% (at least, I think it should be 90%), I don't think it is safe to use gap at this point. I propose to not do anything at this point because I don't see a better approach at this point because using margin always stuck in some cases and developers can use sx to add the margin on their own.

'& > * + *': {
  marginLeft: 8, // only works in row, but not the column direction
},

[Janpot]

@siriwatknp Understood, I added this PR on the list of #30660

[siriwatknp]

We can merge this in v7.

[Janpot]

@siriwatknp I've merged master and replaced the tests with integration tests. The tests were testing implementation details and that's rather useless in this case (i.e. the computed styles don't necessarily guarantee the gap is correct visually, other properties may affect it).

[siriwatknp]

@siriwatknp I've merged master and replaced the tests with integration tests. The tests were testing implementation details and that's rather useless in this case (i.e. the computed styles don't necessarily guarantee the gap is correct visually, other properties may affect it).

I think it's fine to not have extra tests for this (the demos' visual regression should be enough). Feel free to remove them.

[Janpot]

Feel free to remove them.

It can't find any demo that covers this specific case. Perhaps it's best to keep them?