Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix(dialog): DialogFooter align prop applies correct classes
  • Loading branch information
mlaursen committed Sep 8, 2021
1 parent b50d745 commit 644971d
Show file tree
Hide file tree
Showing 3 changed files with 217 additions and 306 deletions.
34 changes: 21 additions & 13 deletions packages/dialog/src/DialogFooter.tsx
Expand Up @@ -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");
Expand All @@ -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
)}
Expand Down
88 changes: 21 additions & 67 deletions 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",
Expand All @@ -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();
});
});
});

0 comments on commit 644971d

Please sign in to comment.