fix(heading): maintain layout when title prop is set to null

src/components/dialog-full-screen/content.style.ts

@@ -50,7 +50,6 @@ const StyledContent = styled.div<StyledContentProps>`
     !hasHeader &&
     css`
       padding-top: 0;
-      margin-top: -25px;
     `}
 `;
 

src/components/dialog-full-screen/dialog-full-screen.component.tsx

@@ -185,7 +185,7 @@ export const DialogFullScreen = ({
           pagesStyling={pagesStyling}
           role={role}
         >
-          {dialogTitle()}
+          {title || headerChildren ? dialogTitle() : null}
           {closeIcon()}
           <StyledContent
             hasHeader={title !== undefined}

src/components/dialog-full-screen/dialog-full-screen.style.ts

@@ -47,7 +47,6 @@ const StyledDialogFullScreen = styled.div<{ pagesStyling?: boolean }>`
     css`
       ${StyledContent} {
         padding: 0;
-        margin-top: -25px;
       }
 
       ${StyledIconButton} {

src/components/dialog-full-screen/dialog-full-screen.test.tsx

@@ -238,6 +238,14 @@ test("renders the element given in the `headerChildren` prop", () => {
   ).toBeVisible();
 });
 
+test("does not render anything if no `headerChildren` prop is provided", () => {
+  render(<DialogFullScreen open />);
+
+  const link = screen.queryByRole("link");
+
+  expect(link).not.toBeInTheDocument();
+});
+
 // test here for coverage only - disableContentPadding prop already tested in both Playwright and Chromatic
 test("padding is removed from the content when the `disableContentPadding` prop is passed", () => {
   render(
@@ -278,11 +286,6 @@ test("applies the appropriate styles when the `pagesStyling` prop is set", () =>
   expect(dialog).toHaveStyleRule("z-index", "1", {
     modifier: `${StyledIconButton}`,
   });
-
-  expect(dialog).toHaveStyleRule("padding", "32px 32px 0", {
-    modifier: `${StyledFullScreenHeading}`,
-  });
-
   expect(dialog).toHaveStyleRule("width", "auto", {
     modifier: `${StyledHeading}`,
   });
@@ -299,6 +302,9 @@ test("applies the appropriate styles when the `pagesStyling` prop is set", () =>
   expect(dialog).toHaveStyleRule("margin", "0 0 0 3px", {
     modifier: `${StyledHeading} ${StyledHeader}`,
   });
+  expect(dialog).toHaveStyleRule("padding", "32px 32px 0", {
+    modifier: `${StyledFullScreenHeading}`,
+  });
 });
 
 /* TODO: (FE-6781) Update these tests to use toHaveStyle to avoid false positives:

src/components/pages/page/page.component.tsx

@@ -9,7 +9,7 @@ import { filterStyledSystemPaddingProps } from "../../../style/utils";
 
 export interface PageProps extends PaddingProps {
   /** The title for the page, normally a Heading component. */
-  title: React.ReactNode;
+  title?: React.ReactNode;
   /** This component supports children. */
   children: React.ReactNode;
   /** The ARIA role to be applied to the component */
@@ -38,7 +38,9 @@ const Page = ({ role, title, children, ...rest }: PageProps) => {
         ref={styledPageNodeRef}
         role={role}
       >
-        <FullScreenHeading hasContent>{title}</FullScreenHeading>
+        {title ? (
+          <FullScreenHeading hasContent>{title}</FullScreenHeading>
+        ) : null}
         <StyledPageContent
           data-element="carbon-page-content"
           data-role="page-content"

src/components/pages/pages-test.stories.tsx

@@ -10,7 +10,7 @@ import Box from "../box";
 
 export default {
   title: "Pages/Test",
-  includeStories: ["DefaultStory", "DifferentPageHeights"],
+  includeStories: ["DefaultStory", "DifferentPageHeights", "WithoutTitle"],
   parameters: {
     info: { disable: true },
     chromatic: {
@@ -525,3 +525,25 @@ export const DifferentPageHeights = () => {
     </Box>
   );
 };
+
+export const WithoutTitle = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const handleCancel = () => {
+    setIsOpen(false);
+  };
+  const handleOpen = () => {
+    setIsOpen(true);
+  };
+  return (
+    <div>
+      <Button onClick={handleOpen}>Open Preview</Button>
+      <DialogFullScreen pagesStyling open={isOpen} onCancel={handleCancel}>
+        <Pages pageIndex={0}>
+          <Page>
+            <Button>Example button</Button>
+          </Page>
+        </Pages>
+      </DialogFullScreen>
+    </div>
+  );
+};

src/components/pages/pages.test.tsx

@@ -159,6 +159,16 @@ test("navigating to the next page should render the first page when currently on
   expect(screen.getByRole("heading", { name: "My First Page" })).toBeVisible();
 });
 
+test("component renders correctly with no title prop passed", () => {
+  render(
+    <Pages pageIndex={0}>
+      <Page>First Page</Page>
+    </Pages>,
+  );
+
+  expect(screen.getByTestId("visible-page")).toHaveTextContent("First Page");
+});
+
 test("when attempting to navigate pages and there is only one page, it should not change the rendered content", async () => {
   const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
   const WithSinglePage = () => {