From b374912937a7135c157464a37105530fb864f254 Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Wed, 27 Sep 2023 13:31:57 +0100 Subject: [PATCH] Drawer: Make content scroll by default (#75287) * deprecate scrollableContent prop and make it the default behaviour * restore prop behaviour, just make it default to true * Update packages/grafana-ui/src/components/Drawer/Drawer.tsx Co-authored-by: Alexa V <239999+axelavargas@users.noreply.github.com> --------- Co-authored-by: Alexa V <239999+axelavargas@users.noreply.github.com> --- .../grafana-ui/src/components/Drawer/Drawer.story.tsx | 1 - packages/grafana-ui/src/components/Drawer/Drawer.tsx | 8 +++++--- .../app/core/components/AppChrome/News/NewsContainer.tsx | 1 - .../browse-dashboards/components/CreateNewButton.tsx | 1 - .../browse-dashboards/components/FolderActionsButton.tsx | 1 - .../dashboard-scene/inspect/PanelInspectDrawer.tsx | 1 - .../dashboard-scene/serialization/SaveDashboardDrawer.tsx | 2 +- .../components/EmbeddedDashboard/SaveDashboardDrawer.tsx | 1 - .../dashboard/components/HelpWizard/HelpWizard.tsx | 1 - .../dashboard/components/Inspector/InspectContent.tsx | 1 - .../components/SaveDashboard/SaveDashboardDrawer.tsx | 1 - 11 files changed, 6 insertions(+), 13 deletions(-) diff --git a/packages/grafana-ui/src/components/Drawer/Drawer.story.tsx b/packages/grafana-ui/src/components/Drawer/Drawer.story.tsx index fd93008889f..06e4c96f94d 100644 --- a/packages/grafana-ui/src/components/Drawer/Drawer.story.tsx +++ b/packages/grafana-ui/src/components/Drawer/Drawer.story.tsx @@ -18,7 +18,6 @@ const meta: Meta = { }, args: { closeOnMaskClick: true, - scrollableContent: false, expandable: false, subtitle: 'This is a subtitle.', }, diff --git a/packages/grafana-ui/src/components/Drawer/Drawer.tsx b/packages/grafana-ui/src/components/Drawer/Drawer.tsx index a88003394b9..c31c80dc3f9 100644 --- a/packages/grafana-ui/src/components/Drawer/Drawer.tsx +++ b/packages/grafana-ui/src/components/Drawer/Drawer.tsx @@ -11,7 +11,6 @@ import { selectors } from '@grafana/e2e-selectors'; import { useStyles2 } from '../../themes'; import { Button } from '../Button'; import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar'; -//import { IconButton } from '../IconButton/IconButton'; import { Text } from '../Text/Text'; export interface Props { @@ -41,7 +40,10 @@ export interface Props { size?: 'sm' | 'md' | 'lg'; /** Tabs */ tabs?: React.ReactNode; - /** Set to true if the component rendered within in drawer content has its own scroll */ + // TODO remove this prop next major version + /** + * @deprecated this is now default behaviour. content is always scrollable. + **/ scrollableContent?: boolean; /** Callback for closing the drawer */ onClose: () => void; @@ -51,7 +53,7 @@ export function Drawer({ children, onClose, closeOnMaskClick = true, - scrollableContent = false, + scrollableContent = true, title, subtitle, width, diff --git a/public/app/core/components/AppChrome/News/NewsContainer.tsx b/public/app/core/components/AppChrome/News/NewsContainer.tsx index e38b1b0a430..2c0815b6b4f 100644 --- a/public/app/core/components/AppChrome/News/NewsContainer.tsx +++ b/public/app/core/components/AppChrome/News/NewsContainer.tsx @@ -46,7 +46,6 @@ export function NewsContainer({ className }: NewsContainerProps) { } - scrollableContent onClose={onToggleShowNewsDrawer} size="md" > diff --git a/public/app/features/browse-dashboards/components/CreateNewButton.tsx b/public/app/features/browse-dashboards/components/CreateNewButton.tsx index 851621c7218..c4d20755a72 100644 --- a/public/app/features/browse-dashboards/components/CreateNewButton.tsx +++ b/public/app/features/browse-dashboards/components/CreateNewButton.tsx @@ -85,7 +85,6 @@ export default function CreateNewButton({ parentFolder, canCreateDashboard, canC setShowNewFolderDrawer(false)} size="sm" > diff --git a/public/app/features/browse-dashboards/components/FolderActionsButton.tsx b/public/app/features/browse-dashboards/components/FolderActionsButton.tsx index 149de26aefd..fc22f19b37f 100644 --- a/public/app/features/browse-dashboards/components/FolderActionsButton.tsx +++ b/public/app/features/browse-dashboards/components/FolderActionsButton.tsx @@ -114,7 +114,6 @@ export function FolderActionsButton({ folder }: Props) { setShowPermissionsDrawer(false)} size="md" > diff --git a/public/app/features/dashboard-scene/inspect/PanelInspectDrawer.tsx b/public/app/features/dashboard-scene/inspect/PanelInspectDrawer.tsx index 76339abe519..30f4f93292e 100644 --- a/public/app/features/dashboard-scene/inspect/PanelInspectDrawer.tsx +++ b/public/app/features/dashboard-scene/inspect/PanelInspectDrawer.tsx @@ -102,7 +102,6 @@ function PanelInspectRenderer({ model }: SceneComponentProps return ( + ); diff --git a/public/app/features/dashboard/components/EmbeddedDashboard/SaveDashboardDrawer.tsx b/public/app/features/dashboard/components/EmbeddedDashboard/SaveDashboardDrawer.tsx index 095521a43ba..105c855a547 100644 --- a/public/app/features/dashboard/components/EmbeddedDashboard/SaveDashboardDrawer.tsx +++ b/public/app/features/dashboard/components/EmbeddedDashboard/SaveDashboardDrawer.tsx @@ -53,7 +53,6 @@ export const SaveDashboardDrawer = ({ dashboard, onDismiss, dashboardJson, onSav )} } - scrollableContent > {showDiff ? ( diff --git a/public/app/features/dashboard/components/HelpWizard/HelpWizard.tsx b/public/app/features/dashboard/components/HelpWizard/HelpWizard.tsx index d0d1a9a444b..b0fd9dc7a57 100644 --- a/public/app/features/dashboard/components/HelpWizard/HelpWizard.tsx +++ b/public/app/features/dashboard/components/HelpWizard/HelpWizard.tsx @@ -73,7 +73,6 @@ export function HelpWizard({ panel, plugin, onClose }: Props) { title={`Get help with this panel`} size="lg" onClose={onClose} - scrollableContent subtitle={ diff --git a/public/app/features/dashboard/components/Inspector/InspectContent.tsx b/public/app/features/dashboard/components/Inspector/InspectContent.tsx index 9841466210d..55fa0e51ec7 100644 --- a/public/app/features/dashboard/components/Inspector/InspectContent.tsx +++ b/public/app/features/dashboard/components/Inspector/InspectContent.tsx @@ -76,7 +76,6 @@ export const InspectContent = ({ title={title} subtitle={data && formatStats(data)} onClose={onClose} - scrollableContent tabs={ {tabs.map((tab, index) => { diff --git a/public/app/features/dashboard/components/SaveDashboard/SaveDashboardDrawer.tsx b/public/app/features/dashboard/components/SaveDashboard/SaveDashboardDrawer.tsx index bc5f917d101..8bc3e5dda69 100644 --- a/public/app/features/dashboard/components/SaveDashboard/SaveDashboardDrawer.tsx +++ b/public/app/features/dashboard/components/SaveDashboard/SaveDashboardDrawer.tsx @@ -128,7 +128,6 @@ export const SaveDashboardDrawer = ({ dashboard, onDismiss, onSaveSuccess, isCop )} } - scrollableContent > {renderSaveBody()}