From c6148cb98d4c7c216d7d0c8184fe979e00ebc542 Mon Sep 17 00:00:00 2001 From: George Gritsouk <989898+gggritso@users.noreply.github.com> Date: Fri, 7 Nov 2025 15:56:34 -0500 Subject: [PATCH 1/4] Move files over --- static/app/components/{ => core}/slideOverPanel.tsx | 0 static/app/components/globalDrawer/components.tsx | 3 ++- .../widgetBuilder/components/widgetBuilderSlideout.tsx | 3 ++- .../buildDetails/main/insights/appSizeInsightsSidebar.tsx | 2 +- static/app/views/prevent/preventAI/manageReposPanel.tsx | 3 ++- 5 files changed, 7 insertions(+), 4 deletions(-) rename static/app/components/{ => core}/slideOverPanel.tsx (100%) diff --git a/static/app/components/slideOverPanel.tsx b/static/app/components/core/slideOverPanel.tsx similarity index 100% rename from static/app/components/slideOverPanel.tsx rename to static/app/components/core/slideOverPanel.tsx diff --git a/static/app/components/globalDrawer/components.tsx b/static/app/components/globalDrawer/components.tsx index e910255acd515d..25d31c14dec429 100644 --- a/static/app/components/globalDrawer/components.tsx +++ b/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'; diff --git a/static/app/views/dashboards/widgetBuilder/components/widgetBuilderSlideout.tsx b/static/app/views/dashboards/widgetBuilder/components/widgetBuilderSlideout.tsx index 6df5704a393329..248c56759b7e36 100644 --- a/static/app/views/dashboards/widgetBuilder/components/widgetBuilderSlideout.tsx +++ b/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'; diff --git a/static/app/views/preprod/buildDetails/main/insights/appSizeInsightsSidebar.tsx b/static/app/views/preprod/buildDetails/main/insights/appSizeInsightsSidebar.tsx index 5444bb31a6735d..4187238068b97a 100644 --- a/static/app/views/preprod/buildDetails/main/insights/appSizeInsightsSidebar.tsx +++ b/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'; diff --git a/static/app/views/prevent/preventAI/manageReposPanel.tsx b/static/app/views/prevent/preventAI/manageReposPanel.tsx index 82d8abc5ed661b..895a66d92e76b7 100644 --- a/static/app/views/prevent/preventAI/manageReposPanel.tsx +++ b/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'; From 06b2a38a7a5f18a94f09799384cb56d76eeeef74 Mon Sep 17 00:00:00 2001 From: George Gritsouk <989898+gggritso@users.noreply.github.com> Date: Fri, 7 Nov 2025 16:09:32 -0500 Subject: [PATCH 2/4] Named export --- static/app/components/core/slideOverPanel.tsx | 4 +--- static/app/components/globalDrawer/components.tsx | 2 +- .../widgetBuilder/components/widgetBuilderSlideout.tsx | 2 +- .../buildDetails/main/insights/appSizeInsightsSidebar.tsx | 2 +- static/app/views/prevent/preventAI/manageReposPanel.tsx | 2 +- 5 files changed, 5 insertions(+), 7 deletions(-) diff --git a/static/app/components/core/slideOverPanel.tsx b/static/app/components/core/slideOverPanel.tsx index a146ab8c6e4655..173985fa52630d 100644 --- a/static/app/components/core/slideOverPanel.tsx +++ b/static/app/components/core/slideOverPanel.tsx @@ -35,9 +35,7 @@ type SlideOverPanelProps = { transitionProps?: Transition; }; -export default SlideOverPanel; - -function SlideOverPanel({ +export function SlideOverPanel({ 'data-test-id': testId, ariaLabel, collapsed, diff --git a/static/app/components/globalDrawer/components.tsx b/static/app/components/globalDrawer/components.tsx index 25d31c14dec429..13a9ade6395a52 100644 --- a/static/app/components/globalDrawer/components.tsx +++ b/static/app/components/globalDrawer/components.tsx @@ -3,7 +3,7 @@ import styled from '@emotion/styled'; import {mergeRefs} from '@react-aria/utils'; import type {Transition} from 'framer-motion'; -import SlideOverPanel from '@sentry/scraps/slideOverPanel'; +import {SlideOverPanel} from '@sentry/scraps/slideOverPanel'; import {Button} from 'sentry/components/core/button'; import type {DrawerOptions} from 'sentry/components/globalDrawer'; diff --git a/static/app/views/dashboards/widgetBuilder/components/widgetBuilderSlideout.tsx b/static/app/views/dashboards/widgetBuilder/components/widgetBuilderSlideout.tsx index 248c56759b7e36..be705c81d11166 100644 --- a/static/app/views/dashboards/widgetBuilder/components/widgetBuilderSlideout.tsx +++ b/static/app/views/dashboards/widgetBuilder/components/widgetBuilderSlideout.tsx @@ -3,7 +3,7 @@ import {useTheme} from '@emotion/react'; import styled from '@emotion/styled'; import isEqual from 'lodash/isEqual'; -import SlideOverPanel from '@sentry/scraps/slideOverPanel'; +import {SlideOverPanel} from '@sentry/scraps/slideOverPanel'; import {Breadcrumbs} from 'sentry/components/breadcrumbs'; import {openConfirmModal} from 'sentry/components/confirm'; diff --git a/static/app/views/preprod/buildDetails/main/insights/appSizeInsightsSidebar.tsx b/static/app/views/preprod/buildDetails/main/insights/appSizeInsightsSidebar.tsx index 4187238068b97a..d5cfd9c713e4ae 100644 --- a/static/app/views/preprod/buildDetails/main/insights/appSizeInsightsSidebar.tsx +++ b/static/app/views/preprod/buildDetails/main/insights/appSizeInsightsSidebar.tsx @@ -4,7 +4,7 @@ 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 {SlideOverPanel} from '@sentry/scraps/slideOverPanel'; import {Heading} from '@sentry/scraps/text/heading'; import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionTooltip'; diff --git a/static/app/views/prevent/preventAI/manageReposPanel.tsx b/static/app/views/prevent/preventAI/manageReposPanel.tsx index 895a66d92e76b7..790ba73c4011fc 100644 --- a/static/app/views/prevent/preventAI/manageReposPanel.tsx +++ b/static/app/views/prevent/preventAI/manageReposPanel.tsx @@ -1,6 +1,6 @@ import {Fragment} from 'react'; -import SlideOverPanel from '@sentry/scraps/slideOverPanel'; +import {SlideOverPanel} from '@sentry/scraps/slideOverPanel'; import {Alert} from 'sentry/components/core/alert'; import {Button} from 'sentry/components/core/button'; From f85b185834e22f835e40949d2be4b5df10d3c279 Mon Sep 17 00:00:00 2001 From: George Gritsouk <989898+gggritso@users.noreply.github.com> Date: Fri, 7 Nov 2025 16:59:09 -0500 Subject: [PATCH 3/4] Add documentation --- static/app/components/core/slideOverPanel.mdx | 38 +++++++++++++++++++ static/app/components/core/slideOverPanel.tsx | 9 +++++ .../app/stories/playground/slideOverPanel.tsx | 26 +++++++++++++ 3 files changed, 73 insertions(+) create mode 100644 static/app/components/core/slideOverPanel.mdx create mode 100644 static/app/stories/playground/slideOverPanel.tsx diff --git a/static/app/components/core/slideOverPanel.mdx b/static/app/components/core/slideOverPanel.mdx new file mode 100644 index 00000000000000..1b718616b3cd5a --- /dev/null +++ b/static/app/components/core/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. + + + + + +
+ +## Basic Usage + +```jsx + + + + + + + +``` + +> [!NOTE] +> To enable exit animations, you'll need to wrap `` in an `` component, and render the panel conditionally (e.g., `{isPanelOpen &&}`) instead of using the `collapsed` prop. diff --git a/static/app/components/core/slideOverPanel.tsx b/static/app/components/core/slideOverPanel.tsx index 173985fa52630d..147bc19bc089a0 100644 --- a/static/app/components/core/slideOverPanel.tsx +++ b/static/app/components/core/slideOverPanel.tsx @@ -24,14 +24,23 @@ 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; slidePosition?: 'right' | 'bottom' | 'left'; + /** + * A Framer Motion `Transition` object that specifies the transition properties that apply when the panel opens and closes. + */ transitionProps?: Transition; }; diff --git a/static/app/stories/playground/slideOverPanel.tsx b/static/app/stories/playground/slideOverPanel.tsx new file mode 100644 index 00000000000000..cea49221374dce --- /dev/null +++ b/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(false); + + return ( + + + + + {isPanelOpen && ( + + + + + + )} + + + ); +} From a7c5b3783d0e9bb8a7b4cd96f5767cf6ae742aea Mon Sep 17 00:00:00 2001 From: George Gritsouk <989898+gggritso@users.noreply.github.com> Date: Mon, 10 Nov 2025 11:45:15 -0500 Subject: [PATCH 4/4] Move into a folder --- static/app/components/core/slideOverPanel/index.tsx | 1 + .../app/components/core/{ => slideOverPanel}/slideOverPanel.mdx | 0 .../app/components/core/{ => slideOverPanel}/slideOverPanel.tsx | 0 3 files changed, 1 insertion(+) create mode 100644 static/app/components/core/slideOverPanel/index.tsx rename static/app/components/core/{ => slideOverPanel}/slideOverPanel.mdx (100%) rename static/app/components/core/{ => slideOverPanel}/slideOverPanel.tsx (100%) diff --git a/static/app/components/core/slideOverPanel/index.tsx b/static/app/components/core/slideOverPanel/index.tsx new file mode 100644 index 00000000000000..f7f7b7ac1c0da8 --- /dev/null +++ b/static/app/components/core/slideOverPanel/index.tsx @@ -0,0 +1 @@ +export {SlideOverPanel} from './slideOverPanel'; diff --git a/static/app/components/core/slideOverPanel.mdx b/static/app/components/core/slideOverPanel/slideOverPanel.mdx similarity index 100% rename from static/app/components/core/slideOverPanel.mdx rename to static/app/components/core/slideOverPanel/slideOverPanel.mdx diff --git a/static/app/components/core/slideOverPanel.tsx b/static/app/components/core/slideOverPanel/slideOverPanel.tsx similarity index 100% rename from static/app/components/core/slideOverPanel.tsx rename to static/app/components/core/slideOverPanel/slideOverPanel.tsx