Disables transition on AvatarStack children that are added after initial render

[mperrotti]

Only applies transition property when disableExpand is not passed.

Closes #3688

Screenshots

Kapture.2023-09-05.at.13.49.32.mp4

Merge checklist

• Added/updated tests
• [n/a] Added/updated documentation
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot]

🦋 Changeset detected

Latest commit: ab19031

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[mperrotti]

If you want to test these changes locally, you can replace the DisableExpandOnHover story with this:

export const DisableExpandOnHover = () => {
  const srcArr = [
    'https://avatars.githubusercontent.com/primer',
    'https://avatars.githubusercontent.com/github',
    'https://avatars.githubusercontent.com/atom',
    'https://avatars.githubusercontent.com/desktop',
  ]
  const [avatarSrcs, setAvatarSrcs] = React.useState([])
  const addAvatar = () => {
    setAvatarSrcs([...avatarSrcs, srcArr[avatarSrcs.length % srcArr.length]])
  }
  const removeAvatar = () => {
    setAvatarSrcs(avatarSrcs.slice(0, avatarSrcs.length - 1))
  }

  return (
    <div style={{display: 'flex', flexDirection: 'column', gap: '1em', alignItems: 'flex-start'}}>
      <div style={{display: 'flex', gap: '0.5em'}}>
        <Button onClick={addAvatar}>Add avatar</Button>
        <Button onClick={removeAvatar}>Remove avatar</Button>
      </div>
      <div>
        <AvatarStack disableExpand>
          {avatarSrcs.map(src => (
            <Avatar alt="Some avatar" src={src} key={src} />
          ))}
        </AvatarStack>
      </div>
    </div>
  )
}

[github-actions]

size-limit report 📦

Path	Size
dist/browser.esm.js	100.62 KB (-0.01% 🔽)
dist/browser.umd.js	101.19 KB (-0.01% 🔽)