chore: Refactor Dialog sub-components to be functional components (#7180

)

packages/core/src/components/dialog/dialogBody.tsx

@@ -17,10 +17,10 @@
 import classNames from "classnames";
 import * as React from "react";
 
-import { AbstractPureComponent, Classes } from "../../common";
-import type { Props } from "../../common/props";
+import { Classes, DISPLAYNAME_PREFIX } from "../../common";
+import type { HTMLDivProps, Props } from "../../common/props";
 
-export interface DialogBodyProps extends Props {
+export interface DialogBodyProps extends Props, HTMLDivProps {
     /** Dialog body contents. */
     children?: React.ReactNode;
 
@@ -37,20 +37,18 @@ export interface DialogBodyProps extends Props {
  *
  * @see https://blueprintjs.com/docs/#core/components/dialog.dialog-body-props
  */
-export class DialogBody extends AbstractPureComponent<DialogBodyProps> {
-    public static defaultProps: DialogBodyProps = {
-        useOverflowScrollContainer: true,
-    };
+export const DialogBody: React.FC<DialogBodyProps> = props => {
+    const { children, className, useOverflowScrollContainer, ...htmlProps } = props;
+    return (
+        <div
+            {...htmlProps}
+            className={classNames(Classes.DIALOG_BODY, className, {
+                [Classes.DIALOG_BODY_SCROLL_CONTAINER]: useOverflowScrollContainer,
+            })}
+        >
+            {children}
+        </div>
+    );
+};
 
-    public render() {
-        return (
-            <div
-                className={classNames(Classes.DIALOG_BODY, this.props.className, {
-                    [Classes.DIALOG_BODY_SCROLL_CONTAINER]: this.props.useOverflowScrollContainer,
-                })}
-            >
-                {this.props.children}
-            </div>
-        );
-    }
-}
+DialogBody.displayName = `${DISPLAYNAME_PREFIX}.DialogBody`;

packages/core/src/components/dialog/dialogFooter.tsx

@@ -17,16 +17,16 @@
 import classNames from "classnames";
 import * as React from "react";
 
-import { AbstractPureComponent, Classes } from "../../common";
-import type { Props } from "../../common/props";
-
-export interface DialogFooterProps extends Props {
-    /** Child contents are rendered on the left side of the footer. */
-    children?: React.ReactNode;
+import { Classes, DISPLAYNAME_PREFIX } from "../../common";
+import type { HTMLDivProps, Props } from "../../common/props";
 
+export interface DialogFooterProps extends Props, HTMLDivProps {
     /** Dialog actions (typically buttons) are rendered on the right side of the footer. */
     actions?: React.ReactNode;
 
+    /** Child contents are rendered on the left side of the footer. */
+    children?: React.ReactNode;
+
     /**
      * Use a "minimal" appearance for the footer, simply applying an HTML role and
      * some visual padding. This is useful for small dialogs, and should not be used
@@ -52,35 +52,19 @@ export interface DialogFooterProps extends Props {
  *
  * @see https://blueprintjs.com/docs/#core/components/dialog.dialog-footer-props
  */
-export class DialogFooter extends AbstractPureComponent<DialogFooterProps> {
-    public static defaultProps: DialogFooterProps = {
-        minimal: false,
-    };
-
-    public render() {
-        return (
-            <div
-                className={classNames(Classes.DIALOG_FOOTER, this.props.className, {
-                    [Classes.DIALOG_FOOTER_FIXED]: !this.props.minimal,
-                })}
-            >
-                {this.renderMainSection()}
-                {this.maybeRenderActionsSection()}
-            </div>
-        );
-    }
+export const DialogFooter: React.FC<DialogFooterProps> = props => {
+    const { actions, children, className, minimal = false, ...htmlProps } = props;
+    return (
+        <div
+            {...htmlProps}
+            className={classNames(Classes.DIALOG_FOOTER, className, {
+                [Classes.DIALOG_FOOTER_FIXED]: !minimal,
+            })}
+        >
+            <div className={Classes.DIALOG_FOOTER_MAIN_SECTION}>{children}</div>
+            {actions != null && <div className={Classes.DIALOG_FOOTER_ACTIONS}>{actions}</div>}
+        </div>
+    );
+};
 
-    /** Render the main footer section (left aligned). */
-    private renderMainSection() {
-        return <div className={Classes.DIALOG_FOOTER_MAIN_SECTION}>{this.props.children}</div>;
-    }
-
-    /** Optionally render the footer actions (right aligned). */
-    private maybeRenderActionsSection() {
-        const { actions } = this.props;
-        if (actions == null) {
-            return undefined;
-        }
-        return <div className={Classes.DIALOG_FOOTER_ACTIONS}>{actions}</div>;
-    }
-}
+DialogFooter.displayName = `${DISPLAYNAME_PREFIX}.DialogFooter`;

packages/core/src/components/dialog/dialogStep.tsx

@@ -17,7 +17,7 @@
 import classNames from "classnames";
 import * as React from "react";
 
-import { AbstractPureComponent, Classes } from "../../common";
+import { Classes } from "../../common";
 import { DISPLAYNAME_PREFIX, type HTMLDivProps, type Props } from "../../common/props";
 
 import type { DialogStepButtonProps } from "./dialogStepButton";
@@ -56,22 +56,21 @@ export interface DialogStepProps extends Props, Omit<HTMLDivProps, "id" | "title
     nextButtonProps?: DialogStepButtonProps;
 }
 
+/* istanbul ignore next */
 /**
  * Dialog step component.
  *
  * @see https://blueprintjs.com/docs/#core/components/dialog.dialogstep
  */
-export class DialogStep extends AbstractPureComponent<DialogStepProps> {
-    public static displayName = `${DISPLAYNAME_PREFIX}.DialogStep`;
+export const DialogStep: React.FC<DialogStepProps> = props => {
+    const { className, id, title, ...htmlProps } = props;
 
-    // this component is never rendered directly; see MultistepDialog#renderDialogStepPanel()
-    /* istanbul ignore next */
-    public render() {
-        const { className } = this.props;
-        return (
-            <div className={Classes.DIALOG_STEP_CONTAINER} role="tab">
-                <div className={classNames(Classes.DIALOG_STEP, className)} />
-            </div>
-        );
-    }
-}
+    // this component is never rendered directly; see MultistepDialog#renderDialogStep()
+    return (
+        <div {...htmlProps} className={Classes.DIALOG_STEP_CONTAINER} role="tab">
+            <div className={classNames(Classes.DIALOG_STEP, className)} />
+        </div>
+    );
+};
+
+DialogStep.displayName = `${DISPLAYNAME_PREFIX}.DialogStep`;