[Collapsible] Fix collapsible transition behaviour

[spencercanner]

WHY are these changes introduced?

• Fix a bug where transitions of elements inside the collapsible would trigger the component's transition end event logic (codesandbox example)

• In the example above, using the button outside of the collapsible opens and closes it as expected. However, if a toggle button inside the collapsible is clicked, its transition is prematurely triggering the onTransitionEnd logic which fully closes the collapsible

WHAT is this pull request doing?

• Add a check to the onTransitionEnd event that ensures it's coming from the container target, and not an element within it
  
• This check used to exist before Collapsible was converted to a functional component

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React, {useCallback, useState} from 'react';

import {Button, Card, Collapsible, Page, Stack, TextContainer} from '../src';

export function Playground() {
  const [open, setOpen] = useState(true);

  const handleToggle = useCallback(() => {
    setOpen((open) => !open);
  }, []);

  return (
    <Page title="Playground">
      <div style={{height: '200px'}}>
        <Card sectioned>
          <Stack vertical>
            <Button
              onClick={handleToggle}
              ariaExpanded={open}
              ariaControls="basic-collapsible"
            >
              Toggle
            </Button>
            <Collapsible
              open={open}
              id="basic-collapsible"
              transition={{duration: '1000ms', timingFunction: 'ease-in-out'}}
            >
              <TextContainer>
                <p>
                  Your mailing list lets you contact customers or visitors who
                  have shown an interest in your store. Reach out to them with
                  exclusive offers or updates about your products.
                </p>
                <Button onClick={handleToggle}>Test button</Button>
              </TextContainer>
            </Collapsible>
          </Stack>
        </Card>
      </div>
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

[github-actions]

🟡 This pull request modifies 3 files and might impact 5 other files. This is an average splash zone for a change, remember to tophat areas that could be affected.

Details:

All files potentially affected (total: 5)

• /src/components/Filters/Filters.tsx
• /src/components/Navigation/components/Item/components/Secondary/Secondary.tsx
• /src/components/Navigation/components/Item/Item.tsx
• /src/components/Navigation/components/Section/Section.tsx
• /src/components/Navigation/Navigation.tsx

📄 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

🧩 src/components/Collapsible/Collapsible.tsx (total: 5)

Files potentially affected (total: 5)

• /src/components/Filters/Filters.tsx
• /src/components/Navigation/components/Item/components/Secondary/Secondary.tsx
• /src/components/Navigation/components/Item/Item.tsx
• /src/components/Navigation/components/Section/Section.tsx
• /src/components/Navigation/Navigation.tsx

🧩 src/components/Collapsible/tests/Collapsible.test.tsx (total: 0)

Files potentially affected (total: 0)

[spencercanner]

Percy is flagging a visual regression in the loading component but I can't trace this change to any updates in that component, so everything should be okay.

[kyledurand]

Thanks for catching this @spencercanner. The dangers of re-writing a component from scratch without full test coverage. Nice work on the tests too ❤️

I left a comment around not setting props directly in tests but it looks like we do that in quite a few other places so I'll leave that up to you.

[kyledurand]

My opinion is that we should avoid setting props directly. You can create a composed component with a button and trigger on click to change the state internally.

[spencercanner]

Updated!
created a separate component in the test file to handle the prop updates by triggering a button

[kyledurand]

👍 Thanks again!