[Collapsible] Add animateIn prop value (#11979)

### WHY are these changes introduced?

Part of Shopify/archive-polaris-backlog-2024#1606

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

  Include a video if your changes include interactive content.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

  <details>
    <summary>Summary of your gif(s)</summary>
    <img src="..." alt="Description of what the gif shows">
  </details>
-->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

### 🎩 checklist

- [ ] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

.changeset/pink-brooms-own.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added `animateIn` transition option to Collapsible

polaris-react/src/components/Collapsible/Collapsible.module.css

@@ -27,4 +27,8 @@
 .inline {
   max-height: none;
   transition-property: max-width;
+
+  &.animateIn {
+    max-width: 0;
+  }
 }

polaris-react/src/components/Collapsible/Collapsible.stories.tsx

@@ -8,6 +8,8 @@ import {
   LegacyStack,
   TextContainer,
   Text,
+  InlineStack,
+  Box,
 } from '@shopify/polaris';
 
 export default {
@@ -35,7 +37,7 @@ export const Default = {
               open={open}
               id="basic-collapsible"
               transition={{
-                duration: 'var(--p-motion-duration-150)',
+                duration: 'var(--p-motion-duration-250)',
                 timingFunction: 'var(--p-motion-ease-in-out)',
               }}
               expandOnPrint
@@ -83,3 +85,96 @@ export const Inline = {
     );
   },
 };
+
+export const AnimateIn = {
+  render() {
+    const [open, setOpen] = useState(true);
+    const [open2, setOpen2] = useState(true);
+    const [openInline, setOpenInline] = useState(true);
+
+    const handleToggle = useCallback(() => setOpen((open) => !open), []);
+    const handleToggle2 = useCallback(() => setOpen2((open2) => !open2), []);
+    const handleToggleInline = useCallback(
+      () => setOpenInline((openInline) => !openInline),
+      [],
+    );
+
+    return (
+      <div style={{height: '200px'}}>
+        <LegacyCard sectioned>
+          <InlineStack>
+            <Button
+              onClick={handleToggleInline}
+              ariaExpanded={openInline}
+              ariaControls="inline-collapsible"
+            >
+              Toggle Inline
+            </Button>
+            <Collapsible
+              open={openInline}
+              id="inline-collapsible"
+              variant="inline"
+              transition={{
+                animateIn: true,
+                duration: 'var(--p-motion-duration-250)',
+              }}
+            >
+              <p style={{whiteSpace: 'nowrap', backgroundColor: 'red'}}>
+                Non breaking text
+              </p>
+            </Collapsible>
+
+            <Button
+              onClick={handleToggle}
+              ariaExpanded={open}
+              ariaControls="basic-collapsible"
+            >
+              Toggle
+            </Button>
+            <Button
+              onClick={handleToggle2}
+              ariaExpanded={open2}
+              ariaControls="basic-collapsible-2"
+            >
+              Toggle 2
+            </Button>
+            <Box maxWidth="20%">
+              <Collapsible
+                open={open}
+                id="inline-collapsible"
+                transition={{
+                  animateIn: true,
+                  duration: 'var(--p-motion-duration-250)',
+                }}
+              >
+                <Box background="avatar-bg-fill">
+                  <Text as="p" variant="bodyMd">
+                    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.
+                  </Text>
+                </Box>
+              </Collapsible>
+              <Collapsible
+                open={open2}
+                id="basic-collapsible-2"
+                transition={{
+                  animateIn: true,
+                  duration: 'var(--p-motion-duration-250)',
+                }}
+              >
+                <Box background="avatar-bg-fill">
+                  <Text as="p" variant="bodyMd">
+                    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.
+                  </Text>
+                </Box>
+              </Collapsible>
+            </Box>
+          </InlineStack>
+        </LegacyCard>
+      </div>
+    );
+  },
+};

polaris-react/src/components/Collapsible/Collapsible.tsx

@@ -5,6 +5,8 @@ import {classNames} from '../../utilities/css';
 import styles from './Collapsible.module.css';
 
 interface Transition {
+  /** Expand the collpsible on render. */
+  animateIn?: boolean;
   /** Assign a transition duration to the collapsible animation. */
   duration?: string;
   /** Assign a transition timing function to the collapsible animation */
@@ -45,8 +47,11 @@ export function Collapsible({
 }: CollapsibleProps) {
   const [size, setSize] = useState(0);
   const [isOpen, setIsOpen] = useState(open);
-  const [animationState, setAnimationState] = useState<AnimationState>('idle');
   const collapsibleContainer = useRef<HTMLDivElement>(null);
+  const animateIn = typeof transition === 'object' && transition.animateIn;
+  const [animationState, setAnimationState] = useState<AnimationState>(
+    animateIn ? 'measuring' : 'idle',
+  );
 
   const isFullyOpen = animationState === 'idle' && open && isOpen;
   const isFullyClosed = animationState === 'idle' && !open && !isOpen;
@@ -58,6 +63,7 @@ export function Collapsible({
     isFullyClosed && styles.isFullyClosed,
     expandOnPrint && styles.expandOnPrint,
     variant === 'inline' && styles.inline,
+    animateIn && styles.animateIn,
   );
 
   const transitionDisabled = isTransitionDisabled(transition);