diff --git a/cypress/components/toast/toast.cy.tsx b/cypress/components/toast/toast.cy.tsx
index b3e9f053da..328da3e318 100644
--- a/cypress/components/toast/toast.cy.tsx
+++ b/cypress/components/toast/toast.cy.tsx
@@ -1,6 +1,9 @@
import React from "react";
import { ToastProps } from "components/toast";
-import { ToastComponent } from "../../../src/components/toast/toast-test.stories";
+import {
+ ToastComponent,
+ AllAlign,
+} from "../../../src/components/toast/toast-test.stories";
import { TOAST_COLORS } from "../../../src/components/toast/toast.config";
import CypressMountWithProviders from "../../support/component-helper/cypress-mount";
import toastComponent from "../../locators/toast";
@@ -204,6 +207,19 @@ context("Testing Toast component", () => {
.should("have.css", "justify-content", align);
}
);
+ it.each(["top", "bottom"] as ToastProps["alignY"][])(
+ "should render Toast component alignY prop set to %s",
+ (alignY) => {
+ CypressMountWithProviders();
+
+ toastComponent()
+ .parent()
+ .parent()
+ .parent()
+ .parent()
+ .should("have.css", alignY, "0px");
+ }
+ );
});
describe("check events for Toast component", () => {
@@ -248,6 +264,11 @@ context("Testing Toast component", () => {
cy.checkAccessibility();
});
+
+ it("should render Toast components with all align combinations and check accessibility", () => {
+ CypressMountWithProviders();
+ cy.checkAccessibility();
+ });
});
it("render with the expected border radius", () => {
diff --git a/src/components/toast/toast-test.stories.tsx b/src/components/toast/toast-test.stories.tsx
index a64b616e19..ec0b7f473b 100644
--- a/src/components/toast/toast-test.stories.tsx
+++ b/src/components/toast/toast-test.stories.tsx
@@ -7,7 +7,7 @@ import { TOAST_COLORS } from "./toast.config";
export default {
title: "Toast/Test",
- includeStories: ["Default", "Visual"],
+ includeStories: ["Default", "Visual", "AllAlign", "TopAndBottom"],
parameters: {
info: { disable: true },
chromatic: {
@@ -234,6 +234,164 @@ Visual.parameters = {
themeProvider: { chromatic: { theme: "sage" } },
};
+export const AllAlign = () => {
+ const [isOpen, setIsOpen] = useState(true);
+ const onDismissClick = () => {
+ setIsOpen(!isOpen);
+ };
+ return (
+
+
+ My text
+
+
+
+ My text
+
+
+
+ My text
+
+
+
+ My text
+
+
+
+ My text
+
+
+
+ My text
+
+
+
+ My text
+
+
+
+ My text
+
+
+
+ My text
+
+
+ );
+};
+
+AllAlign.storyName = "all align";
+
+export const TopAndBottom = () => {
+ const [isOpen, setIsOpen] = useState(true);
+ const handleOpen = () => {
+ setIsOpen(!isOpen);
+ action("open")(!isOpen);
+ };
+ return (
+ <>
+
+
+ My Toast A
+
+
+ My Toast B
+
+
+ );
+};
+
+TopAndBottom.storyName = "top and bottom";
+
export const ToastComponent = ({
children = "Toast",
...props
diff --git a/src/components/toast/toast.component.tsx b/src/components/toast/toast.component.tsx
index d2a600dc0e..b889a35213 100644
--- a/src/components/toast/toast.component.tsx
+++ b/src/components/toast/toast.component.tsx
@@ -26,6 +26,7 @@ type ToastVariants =
| "notification";
type AlignOptions = "left" | "center" | "right";
+type AlignYOptions = "top" | "center" | "bottom";
interface IconTypes {
notification: "alert";
@@ -38,8 +39,10 @@ interface IconTypes {
}
export interface ToastProps {
- /** Sets the alignment of the component. */
+ /** Sets the horizontal alignment of the component. */
align?: AlignOptions;
+ /** Sets the vertical alignment of the component */
+ alignY?: AlignYOptions;
/** The rendered children of the component. */
children: React.ReactNode;
/** Customizes the appearance in the DLS theme */
@@ -77,6 +80,7 @@ export const Toast = React.forwardRef(
(
{
align,
+ alignY,
children,
className,
id,
@@ -208,6 +212,7 @@ export const Toast = React.forwardRef(
>
(
diff --git a/src/components/toast/toast.spec.tsx b/src/components/toast/toast.spec.tsx
index f555c48de1..f97c256502 100644
--- a/src/components/toast/toast.spec.tsx
+++ b/src/components/toast/toast.spec.tsx
@@ -571,7 +571,7 @@ describe("TestContentStyle", () => {
});
});
-describe("Align", () => {
+describe("Align horizontal", () => {
let wrapper: ReactWrapper;
afterEach(() => {
@@ -593,6 +593,53 @@ describe("Align", () => {
);
});
+describe("Align vertical", () => {
+ let wrapper: ReactWrapper;
+
+ afterEach(() => {
+ wrapper.unmount();
+ });
+
+ it.each(["top", "center", "bottom"] as const)(
+ "when align prop is %s, Portal is correctly positioned",
+ (alignYValue) => {
+ wrapper = mount(
+
+ FooBar
+
+ );
+ expect(wrapper.find(StyledPortal).props().alignY).toBe(alignYValue);
+ }
+ );
+
+ it("when isNotice is set and alignY is set to top, should render with the correct style", () => {
+ wrapper = mount(
+
+ Foo
+
+ );
+ assertStyleMatch({ marginTop: "0" }, wrapper.find(ToastStyle));
+ });
+});
+
+describe("Align vertical and horizontal", () => {
+ let wrapper: ReactWrapper;
+
+ afterEach(() => {
+ wrapper.unmount();
+ });
+
+ it("should pass align set to left and alignY set to center to StyledPortal", () => {
+ wrapper = mount(
+
+ FooBar
+
+ );
+ expect(wrapper.find(StyledPortal).props().align).toBe("left");
+ expect(wrapper.find(StyledPortal).props().alignY).toBe("center");
+ });
+});
+
describe("Notification variant", () => {
let wrapper: ReactWrapper;
diff --git a/src/components/toast/toast.stories.mdx b/src/components/toast/toast.stories.mdx
index 1a14ee5376..95e0cdde0d 100644
--- a/src/components/toast/toast.stories.mdx
+++ b/src/components/toast/toast.stories.mdx
@@ -76,22 +76,40 @@ Toast variant is `success` by default
-### Align - Left
+### Horizontal Align - Left
-### Align - Center
+### Horizontal Align - Center
-### Align - Right
+### Horizontal Align - Right
+
+### Vertical Align - Top
+
+
+
+### Vertical Align - Center
+
+
+
+### Vertical Align - Bottom
+
+
### Info
@@ -121,7 +139,8 @@ Toast variant is `success` by default
### Notice
When the "notice" variant is set, the Toast component is rendered at the bottom of the screen with alternative styling and animation.
-The "isCenter" and "maxWidth" props will be ignored in this variant.
+The "isCenter" and "maxWidth" props will be ignored in this variant.
+To render it at the top of the screen use the "alignY" prop set to "top".