experimental: Use collapsible section in animations (#5026)

## Description

1. What is this PR about (link the issue and add a short description)

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: kof

apps/builder/app/builder/features/settings-panel/props-section/animation/animation-section.tsx

@@ -178,7 +178,7 @@ const animationSources = Object.keys(
   animationSourceDescriptions
 ) as NonNullable<AnimationActionScroll["source"]>[];
 
-export const AnimateSection = ({
+export const AnimationSection = ({
   animationAction,
   onChange,
   isAnimationEnabled,
@@ -221,11 +221,7 @@ export const AnimateSection = ({
   };
 
   return (
-    <Grid
-      css={{
-        paddingBottom: theme.panel.paddingBlock,
-      }}
-    >
+    <Grid css={{ paddingBottom: theme.panel.paddingBlock }}>
       <Box css={{ height: theme.panel.paddingBlock }} />
 
       <Separator />
@@ -417,7 +413,8 @@ export const AnimateSection = ({
             />
           </Grid>
         )}
-
+      </Grid>
+      <Grid gap={2}>
         <AnimationsSelect
           value={value}
           onChange={handleChange}

apps/builder/app/builder/features/settings-panel/props-section/animation/animations-select.tsx

@@ -1,7 +1,6 @@
 import { useState, useMemo } from "react";
 import {
   theme,
-  IconButton,
   DropdownMenu,
   DropdownMenuTrigger,
   DropdownMenuContent,
@@ -12,7 +11,6 @@ import {
   SmallToggleButton,
   SmallIconButton,
   Box,
-  Text,
   Label,
   Grid,
   useSortable,
@@ -21,6 +19,9 @@ import {
   InputField,
   DialogTitle,
   Tooltip,
+  SectionTitleButton,
+  SectionTitle,
+  SectionTitleLabel,
 } from "@webstudio-is/design-system";
 import {
   EyeClosedIcon,
@@ -37,6 +38,7 @@ import { newScrollAnimations } from "./new-scroll-animations";
 import { newViewAnimations } from "./new-view-animations";
 import { useIds } from "~/shared/form-utils";
 import { AnimationPanelContent } from "./animation-panel-content";
+import { CollapsibleSectionRoot } from "~/builder/shared/collapsible-section";
 
 const newAnimationsPerType: {
   scroll: ScrollAnimation[];
@@ -93,66 +95,76 @@ export const AnimationsSelect = ({
   };
 
   return (
-    <Grid gap={1} align={"center"} css={{ gridTemplateColumns: "1fr auto" }}>
-      <Label htmlFor={fieldIds.addAnimation}>
-        <Text variant={"titles"}>Animations</Text>
-      </Label>
-
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <IconButton id={fieldIds.addAnimation}>
-            <PlusIcon />
-          </IconButton>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent
-          sideOffset={Number.parseFloat(rawTheme.spacing[5])}
-          css={{ width: theme.spacing[25] }}
-        >
-          {newAnimations.map((animation, index) => (
-            <DropdownMenuItem
-              key={index}
-              onSelect={() => {
-                handleChange(
-                  {
-                    ...value,
-                    animations: value.animations.concat(animation),
-                  },
-                  false
-                );
-              }}
-              onFocus={() => setNewAnimationHint(animation.description)}
-              onBlur={() => setNewAnimationHint(undefined)}
-            >
-              {animation.name}
-            </DropdownMenuItem>
-          ))}
+    <CollapsibleSectionRoot
+      isOpen
+      fullWidth
+      trigger={
+        <SectionTitle
+          collapsible={false}
+          suffix={
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SectionTitleButton
+                  prefix={<PlusIcon />}
+                  tabIndex={0}
+                  id={fieldIds.addAnimation}
+                />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                sideOffset={Number.parseFloat(rawTheme.spacing[5])}
+                css={{ width: theme.spacing[25] }}
+              >
+                {newAnimations.map((animation, index) => (
+                  <DropdownMenuItem
+                    key={index}
+                    onSelect={() => {
+                      handleChange(
+                        {
+                          ...value,
+                          animations: value.animations.concat(animation),
+                        },
+                        false
+                      );
+                    }}
+                    onFocus={() => setNewAnimationHint(animation.description)}
+                    onBlur={() => setNewAnimationHint(undefined)}
+                  >
+                    {animation.name}
+                  </DropdownMenuItem>
+                ))}
 
-          <DropdownMenuSeparator />
+                <DropdownMenuSeparator />
 
-          <DropdownMenuItem css={{ display: "grid" }} hint>
-            {newAnimations.map(({ description }, index) => (
-              <Box
-                css={{
-                  gridColumn: "1",
-                  gridRow: "1",
-                  visibility: "hidden",
-                }}
-                key={index}
-              >
-                {description}
-              </Box>
-            ))}
-            <Box
-              css={{
-                gridColumn: "1",
-                gridRow: "1",
-              }}
-            >
-              {newAnimationHint ?? "Add new or select existing animation"}
-            </Box>
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
+                <DropdownMenuItem css={{ display: "grid" }} hint>
+                  {newAnimations.map(({ description }, index) => (
+                    <Box
+                      css={{
+                        gridColumn: "1",
+                        gridRow: "1",
+                        visibility: "hidden",
+                      }}
+                      key={index}
+                    >
+                      {description}
+                    </Box>
+                  ))}
+                  <Box
+                    css={{
+                      gridColumn: "1",
+                      gridRow: "1",
+                    }}
+                  >
+                    {newAnimationHint ?? "Add new or select existing animation"}
+                  </Box>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          }
+        >
+          <SectionTitleLabel>Animations</SectionTitleLabel>
+        </SectionTitle>
+      }
+    >
       <CssValueListArrowFocus dragItemId={dragItemId}>
         <Grid gap={1} css={{ gridColumn: "span 2" }} ref={sortableRefCallback}>
           {value.animations.map((animation, index) => {
@@ -286,6 +298,6 @@ export const AnimationsSelect = ({
           {placementIndicator}
         </Grid>
       </CssValueListArrowFocus>
-    </Grid>
+    </CollapsibleSectionRoot>
   );
 };

apps/builder/app/builder/features/settings-panel/props-section/props-section.tsx

@@ -26,7 +26,7 @@ import { renderControl } from "../controls/combined";
 import { usePropsLogic, type PropAndMeta } from "./use-props-logic";
 import { serverSyncStore } from "~/shared/sync";
 import { $selectedInstanceKey } from "~/shared/awareness";
-import { AnimateSection } from "./animation/animation-section";
+import { AnimationSection } from "./animation/animation-section";
 import { nanoid } from "nanoid";
 import { $matchingBreakpoints } from "../../style-panel/shared/model";
 import { matchMediaBreakpoints } from "./match-media-breakpoints";
@@ -171,7 +171,7 @@ export const PropsSection = (props: PropsSectionProps) => {
 
   return hasAnimation && selectedBreakpoint?.id !== undefined ? (
     <>
-      <AnimateSection
+      <AnimationSection
         animationAction={animationAction}
         isAnimationEnabled={matchMediaValue}
         selectedBreakpointId={selectedBreakpoint?.id}
@@ -213,7 +213,6 @@ export const PropsSection = (props: PropsSectionProps) => {
           });
         }}
       />
-      <Separator />
     </>
   ) : (
     <>