feat(scraps): Add documentation for SlideOverPanel

static/app/components/core/slideOverPanel/index.tsx

@@ -0,0 +1 @@
+export {SlideOverPanel} from './slideOverPanel';

static/app/components/core/slideOverPanel/slideOverPanel.mdx

@@ -0,0 +1,38 @@
+---
+title: SlideOverPanel
+description: A multi-purpose panel that can be used to reveal more information in a UI without directing to another page.
+source: 'sentry/components/core/slideOverPanel'
+resources:
+  js: https://github.com/getsentry/sentry/blob/master/static/app/components/slideOverPanel.tsx
+---
+
+import * as Storybook from 'sentry/stories';
+
+import {SlideOverPanelPlayground} from 'sentry/stories/playground/slideOverPanel';
+
+import SlideOverDocumentation from '!!type-loader!@sentry/scraps/slideOverPanel';
+
+export const documentation = SlideOverDocumentation;
+
+The `SlideOverPanel` component is a panel that can appear on the right, left, or bottom of the page content to reveal more information. It's commonly used for UIs like the Widget Builder to open panels that provide more details or supplementary UIs.
+
+<Storybook.Demo>
+  <SlideOverPanelPlayground />
+</Storybook.Demo>
+
+<br />
+
+## Basic Usage
+
+```jsx
+<Button onClick={() => setIsPanelOpen(true)}>Open Panel</Button>
+
+<SlideOverPanel collapsed={!isPanelOpen} slidePosition="right">
+  <Container border="primary" height="100%" padding="md">
+    <Button onClick={() => setIsPanelOpen(false)}>Close Panel</Button>
+  </Container>
+</SlideOverPanel>
+```
+
+> [!NOTE]
+> To enable exit animations, you'll need to wrap `<SlideOverPanel />` in an `<AnimatePresence />` component, and render the panel conditionally (e.g., `{isPanelOpen &&}`) instead of using the `collapsed` prop.

static/app/components/slideOverPanel.tsx → static/app/components/core/slideOverPanel/slideOverPanel.tsx

@@ -24,20 +24,27 @@ const COLLAPSED_STYLES = {
 
 type SlideOverPanelProps = {
   children: React.ReactNode;
+  /**
+   * Whether the panel is visible. In most cases it's better to conditionally render this component rather than use this prop, since it'll defer rendering the panel contents until they're needed.
+   */
   collapsed: boolean;
   ariaLabel?: string;
   className?: string;
   'data-test-id'?: string;
+  /**
+   * Callback that fires every time the panel opens.
+   */
   onOpen?: () => void;
   panelWidth?: string;
   ref?: React.Ref<HTMLDivElement>;
   slidePosition?: 'right' | 'bottom' | 'left';
+  /**
+   * A Framer Motion `Transition` object that specifies the transition properties that apply when the panel opens and closes.
+   */
   transitionProps?: Transition;
 };
 
-export default SlideOverPanel;
-
-function SlideOverPanel({
+export function SlideOverPanel({
   'data-test-id': testId,
   ariaLabel,
   collapsed,

static/app/components/globalDrawer/components.tsx

@@ -3,9 +3,10 @@ import styled from '@emotion/styled';
 import {mergeRefs} from '@react-aria/utils';
 import type {Transition} from 'framer-motion';
 
+import {SlideOverPanel} from '@sentry/scraps/slideOverPanel';
+
 import {Button} from 'sentry/components/core/button';
 import type {DrawerOptions} from 'sentry/components/globalDrawer';
-import SlideOverPanel from 'sentry/components/slideOverPanel';
 import {IconClose} from 'sentry/icons/iconClose';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';

static/app/stories/playground/slideOverPanel.tsx

@@ -0,0 +1,26 @@
+import {Fragment, useState} from 'react';
+import {AnimatePresence} from 'framer-motion';
+
+import {Button} from '@sentry/scraps/button';
+import {Container} from '@sentry/scraps/layout';
+import {SlideOverPanel} from '@sentry/scraps/slideOverPanel';
+
+export function SlideOverPanelPlayground() {
+  const [isPanelOpen, setIsPanelOpen] = useState<boolean>(false);
+
+  return (
+    <Fragment>
+      <Button onClick={() => setIsPanelOpen(true)}>Open Panel</Button>
+
+      <AnimatePresence>
+        {isPanelOpen && (
+          <SlideOverPanel collapsed={false} slidePosition="right">
+            <Container border="primary" height="100%" padding="md">
+              <Button onClick={() => setIsPanelOpen(false)}>Close Panel</Button>
+            </Container>
+          </SlideOverPanel>
+        )}
+      </AnimatePresence>
+    </Fragment>
+  );
+}

static/app/views/dashboards/widgetBuilder/components/widgetBuilderSlideout.tsx

@@ -3,13 +3,14 @@ import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 import isEqual from 'lodash/isEqual';
 
+import {SlideOverPanel} from '@sentry/scraps/slideOverPanel';
+
 import {Breadcrumbs} from 'sentry/components/breadcrumbs';
 import {openConfirmModal} from 'sentry/components/confirm';
 import {Alert} from 'sentry/components/core/alert';
 import {Button} from 'sentry/components/core/button';
 import {ExternalLink, Link} from 'sentry/components/core/link';
 import ErrorBoundary from 'sentry/components/errorBoundary';
-import SlideOverPanel from 'sentry/components/slideOverPanel';
 import {IconClose} from 'sentry/icons';
 import {t, tctCode} from 'sentry/locale';
 import {space} from 'sentry/styles/space';

static/app/views/preprod/buildDetails/main/insights/appSizeInsightsSidebar.tsx

@@ -4,10 +4,10 @@ import {AnimatePresence, motion} from 'framer-motion';
 
 import {Button} from '@sentry/scraps/button';
 import {Flex} from '@sentry/scraps/layout';
+import {SlideOverPanel} from '@sentry/scraps/slideOverPanel';
 import {Heading} from '@sentry/scraps/text/heading';
 
 import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionTooltip';
-import SlideOverPanel from 'sentry/components/slideOverPanel';
 import {IconClose, IconGrabbable} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {useResizableDrawer} from 'sentry/utils/useResizableDrawer';

static/app/views/prevent/preventAI/manageReposPanel.tsx

@@ -1,5 +1,7 @@
 import {Fragment} from 'react';
 
+import {SlideOverPanel} from '@sentry/scraps/slideOverPanel';
+
 import {Alert} from 'sentry/components/core/alert';
 import {Button} from 'sentry/components/core/button';
 import {CompactSelect} from 'sentry/components/core/compactSelect';
@@ -9,7 +11,6 @@ import {Switch} from 'sentry/components/core/switch';
 import {Heading, Text} from 'sentry/components/core/text';
 import FieldGroup from 'sentry/components/forms/fieldGroup';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
-import SlideOverPanel from 'sentry/components/slideOverPanel';
 import {IconClose} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import type {OrganizationIntegration, Repository} from 'sentry/types/integrations';