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>
2023-09-27 13:31:57 +01:00
parent 14e94d663f
commit b374912937
11 changed files with 6 additions and 13 deletions
@@ -18,7 +18,6 @@ const meta: Meta<typeof Drawer> = {
  },
  args: {
    closeOnMaskClick: true,
-    scrollableContent: false,
    expandable: false,
    subtitle: 'This is a subtitle.',
  },
@@ -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,
@@ -46,7 +46,6 @@ export function NewsContainer({ className }: NewsContainerProps) {
              </div>
            </div>
          }
-          scrollableContent
          onClose={onToggleShowNewsDrawer}
          size="md"
        >
@@ -85,7 +85,6 @@ export default function CreateNewButton({ parentFolder, canCreateDashboard, canC
        <Drawer
          title={getNewFolderPhrase()}
          subtitle={parentFolder?.title ? `Location: ${parentFolder.title}` : undefined}
-          scrollableContent
          onClose={() => setShowNewFolderDrawer(false)}
          size="sm"
        >
@@ -114,7 +114,6 @@ export function FolderActionsButton({ folder }: Props) {
        <Drawer
          title={t('browse-dashboards.action.manage-permissions-button', 'Manage permissions')}
          subtitle={folder.title}
-          scrollableContent
          onClose={() => setShowPermissionsDrawer(false)}
          size="md"
        >
@@ -102,7 +102,6 @@ function PanelInspectRenderer({ model }: SceneComponentProps<PanelInspectDrawer>
  return (
    <Drawer
      title={model.getDrawerTitle()}
-      scrollableContent
      onClose={model.onClose}
      size="md"
      tabs={
@@ -33,7 +33,7 @@ export class SaveDashboardDrawer extends SceneObjectBase<SaveDashboardDrawerStat
    // }

    return (
-      <Drawer title="Save dashboard" subtitle={dashboard.state.title} scrollableContent onClose={model.onClose}>
+      <Drawer title="Save dashboard" subtitle={dashboard.state.title} onClose={model.onClose}>
        <SaveDashboardDiff diff={diff} oldValue={initialSaveModel} newValue={changedSaveModel} />
      </Drawer>
    );
@@ -53,7 +53,6 @@ export const SaveDashboardDrawer = ({ dashboard, onDismiss, dashboardJson, onSav
          )}
        </TabsBar>
      }
-      scrollableContent
    >
      {showDiff ? (
        <SaveDashboardDiff diff={data.diff} oldValue={dashboardJson} newValue={data.clone} />
@@ -73,7 +73,6 @@ export function HelpWizard({ panel, plugin, onClose }: Props) {
      title={`Get help with this panel`}
      size="lg"
      onClose={onClose}
-      scrollableContent
      subtitle={
        <Stack direction="column" gap={1}>
          <Stack direction="row" gap={1}>
@@ -76,7 +76,6 @@ export const InspectContent = ({
      title={title}
      subtitle={data && formatStats(data)}
      onClose={onClose}
-      scrollableContent
      tabs={
        <TabsBar>
          {tabs.map((tab, index) => {
@@ -128,7 +128,6 @@ export const SaveDashboardDrawer = ({ dashboard, onDismiss, onSaveSuccess, isCop
          )}
        </TabsBar>
      }
-      scrollableContent
    >
      {renderSaveBody()}