fix(dialog): DialogFooter align prop applies correct classes

Author: mlaursen

packages/dialog/src/DialogFooter.tsx

@@ -2,19 +2,24 @@ import React, { forwardRef, HTMLAttributes } from "react";
 import cn from "classnames";
 import { bem } from "@react-md/utils";
 
+/**
+ * An optional alignment for the content within the footer. Since the majority
+ * of dialog footers are used to contain action buttons, the default alignment
+ * is near the end.
+ *
+ * @remarks \@since 3.1.0
+ */
+export type DialogFooterAlignment =
+  | "none"
+  | "start"
+  | "end"
+  | "between"
+  | "stacked-start"
+  | "stacked-end";
+
 export interface DialogFooterProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * An optional alignment for the content within the footer. Since the majority
-   * of dialog footers are used to contain action buttons, the default alignment
-   * is near the end.
-   */
-  align?:
-    | "none"
-    | "start"
-    | "end"
-    | "between"
-    | "stacked-start"
-    | "stacked-end";
+  /** {@inheritDoc DialogFooterAlignment} */
+  align?: DialogFooterAlignment;
 }
 
 const block = bem("rmd-dialog");
@@ -28,7 +33,10 @@ export const DialogFooter = forwardRef<HTMLDivElement, DialogFooterProps>(
         className={cn(
           block("footer", {
             flex: align !== "none",
-            [align]: align !== "none",
+            "flex-v": align === "stacked-start" || align === "stacked-end",
+            start: align === "start" || align === "stacked-start",
+            between: align === "between",
+            end: align === "end" || align === "stacked-end",
           }),
           className
         )}

packages/dialog/src/__tests__/DialogFooter.tsx

@@ -1,10 +1,14 @@
-import React from "react";
+import React, { ReactElement } from "react";
+import { Button } from "@react-md/button";
 import { render } from "@testing-library/react";
-import { create } from "react-test-renderer";
 
-import { DialogFooter, DialogFooterProps } from "../DialogFooter";
+import {
+  DialogFooter,
+  DialogFooterAlignment,
+  DialogFooterProps,
+} from "../DialogFooter";
 
-const aligns: DialogFooterProps["align"][] = [
+const aligns: readonly DialogFooterAlignment[] = [
   "none",
   "start",
   "end",
@@ -13,73 +17,23 @@ const aligns: DialogFooterProps["align"][] = [
   "stacked-end",
 ];
 
+function Test({ align }: DialogFooterProps): ReactElement {
+  return (
+    <DialogFooter align={align}>
+      <Button>First Button</Button>
+      <Button>Second Button</Button>
+    </DialogFooter>
+  );
+}
+
 describe("DialogFooter", () => {
   it("should render correctly", () => {
-    const { container } = render(<DialogFooter>Footer</DialogFooter>);
-    const footer = container.querySelector("footer") as HTMLElement;
-
-    expect(footer).not.toBeNull();
-    expect(footer.textContent).toBe("Footer");
-  });
-
-  it('should apply the "rmd-dialog__footer--flex" className if the align prop is not "none"', () => {
-    const { container, rerender } = render(<DialogFooter align="none" />);
-    const footer = container.querySelector("footer") as HTMLElement;
-    expect(footer.className).not.toContain("rmd-dialog__footer--flex");
-
-    aligns.slice(1).forEach((align) => {
-      rerender(<DialogFooter align={align} />);
-      expect(footer.className).toContain("rmd-dialog__footer--flex");
-    });
-  });
-
-  it('should apply the "rmd-dialog__footer--ALIGN" className if the align prop is not "none"', () => {
-    const { container, rerender } = render(<DialogFooter align="none" />);
-    const footer = container.querySelector("footer") as HTMLElement;
-    expect(footer.className).not.toContain("rmd-dialog__footer--none");
+    const { container, rerender } = render(<Test />);
+    expect(container).toMatchSnapshot();
 
-    aligns.slice(1).forEach((align) => {
-      rerender(<DialogFooter align={align} />);
-      expect(footer.className).toContain(`rmd-dialog__footer--${align}`);
-    });
-  });
-
-  it('should default to align="end"', () => {
-    const { container } = render(<DialogFooter />);
-
-    const footer = container.querySelector("footer") as HTMLElement;
-    expect(footer).not.toBeNull();
-
-    expect(footer.className).toContain("rmd-dialog__footer--end");
-  });
-
-  it("should render correctly (with snapshots)", () => {
     aligns.forEach((align) => {
-      expect(
-        create(
-          <DialogFooter id="dialog-footer" align={align}>
-            <button id="close-dialog" type="button">
-              Close
-            </button>
-            <button id="confirm-dialog" type="button">
-              Confirm
-            </button>
-          </DialogFooter>
-        ).toJSON()
-      ).toMatchSnapshot();
-
-      expect(
-        create(
-          <DialogFooter id="dialog-footer" className="custom-class names-here">
-            <button id="close-dialog" type="button">
-              Close
-            </button>
-            <button id="confirm-dialog" type="button">
-              Confirm
-            </button>
-          </DialogFooter>
-        ).toJSON()
-      ).toMatchSnapshot();
+      rerender(<Test align={align} />);
+      expect(container).toMatchSnapshot();
     });
   });
 });