Repository: carbon-design-system/carbon
Pull request #18788: feat(pageheader): initial components, exports, stories, styles, tests
Author: login: tay1orjones
Labels: name: status: ready to merge 🎉
Created: 2025-03-06T21:13:30Z | Merged: 2025-03-26T21:35:51Z

Closes #18649

This adds the initial scaffolding needed to begin work on the PageHeader.

#### Changelog

**New**

- unstable__PageHeader component files, test files, story file, documentation, style files


#### Testing / Reviewing

- Verify the stories work
- CI/tests should pass

@kennylam @ariellalgilmore @annawen1 @riddhybansal To facilitate the component namespacing I moved all the components into one file. This will reduce boilerplate significantly as we won't have to import shared modules (like an eventual context we'll need every component to use) into a ton of different files. Same thing with the tests being in a single file. Also the components are exported under both their "direct"/"real" names as well as the namespaced ones for convenience, and theres a test and story demonstrating that.

--- 


⚠️ Before merging ⚠️  the stories need `includeStories: []` uncommented so they don't show up in the storybook

Linked issue #18649: PageHeader: Research, add implementation scaffolding (storybook, blank stories, initial empty zone components)
- [ ] Create experimental zone components PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderTabBar. Render empty content divs initially
- [ ] Set up stories for each
  - [ ] put these in a whole new section in storybook - "Patterns (experimental)" (maybe "blocks", but we'll have to build consensus around that
  - [ ] Set up empty testing file(s) - unit, vrt, avt

Diff:
diff --git a/jest.config.js b/jest.config.js
index f433d8220053..7a324586ee45 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2018, 2023
+ * Copyright IBM Corp. 2018, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -31,4 +31,8 @@ module.exports = {
     nanoid: require.resolve('nanoid'),
   },
   reporters: ['default', 'jest-junit'],
+
+  // This is a temporary workaround until Jest supports Prettier 3 (and ESM)
+  // @see https://jestjs.io/docs/configuration#prettierpath-string
+  prettierPath: require.resolve('prettier2'),
 };
diff --git a/packages/react/.storybook/main.js b/packages/react/.storybook/main.js
index 2cb066db37d2..ae5aa402c8af 100644
--- a/packages/react/.storybook/main.js
+++ b/packages/react/.storybook/main.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -151,6 +151,7 @@ const config = {
                 path.resolve(__dirname, '..', 'node_modules'),
                 path.resolve(__dirname, '..', '..', '..', 'node_modules'),
               ],
+              // quietDeps: true,
             },
             warnRuleAsWarning: true,
             sourceMap: true,
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index e6df83f47f23..a6e532300363 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -10862,6 +10862,40 @@ Map {
     },
     "render": [Function],
   },
+  "unstable__PageHeader" => Object {
+    "BreadcrumbBar": Object {
+      "$$typeof": Symbol(react.forward_ref),
+      "render": [Function],
+    },
+    "Content": Object {
+      "$$typeof": Symbol(react.forward_ref),
+      "render": [Function],
+    },
+    "PageHeader": Object {
+      "$$typeof": Symbol(react.forward_ref),
+      "render": [Function],
+    },
+    "PageHeaderBreadcrumbBar": Object {
+      "$$typeof": Symbol(react.forward_ref),
+      "render": [Function],
+    },
+    "PageHeaderContent": Object {
+      "$$typeof": Symbol(react.forward_ref),
+      "render": [Function],
+    },
+    "PageHeaderTabBar": Object {
+      "$$typeof": Symbol(react.forward_ref),
+      "render": [Function],
+    },
+    "Root": Object {
+      "$$typeof": Symbol(react.forward_ref),
+      "render": [Function],
+    },
+    "TabBar": Object {
+      "$$typeof": Symbol(react.forward_ref),
+      "render": [Function],
+    },
+  },
   "unstable__ShapeIndicator" => Object {
     "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {
diff --git a/packages/react/scss/components/page-header/_index.scss b/packages/react/scss/components/page-header/_index.scss
new file mode 100644
index 000000000000..b9496ed2a9b7
--- /dev/null
+++ b/packages/react/scss/components/page-header/_index.scss
@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/page-header';
diff --git a/packages/react/scss/components/page-header/_page-header.scss b/packages/react/scss/components/page-header/_page-header.scss
new file mode 100644
index 000000000000..a94b1400db84
--- /dev/null
+++ b/packages/react/scss/components/page-header/_page-header.scss
@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/page-header/page-header';
diff --git a/packages/react/src/__tests__/index-test.js b/packages/react/src/__tests__/index-test.js
index f236faab0a5c..b0800144c6b4 100644
--- a/packages/react/src/__tests__/index-test.js
+++ b/packages/react/src/__tests__/index-test.js
@@ -285,6 +285,7 @@ describe('Carbon Components React', () => {
         "unstable__FluidTimePickerSelect",
         "unstable__FluidTimePickerSkeleton",
         "unstable__IconIndicator",
+        "unstable__PageHeader",
         "unstable__ShapeIndicator",
         "unstable__Slug",
         "unstable__SlugActions",
diff --git a/packages/react/src/components/PageHeader/PageHeader-test.js b/packages/react/src/components/PageHeader/PageHeader-test.js
new file mode 100644
index 000000000000..03f5839baac2
--- /dev/null
+++ b/packages/react/src/components/PageHeader/PageHeader-test.js
@@ -0,0 +1,98 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { unstable__PageHeader as PageHeader } from '../../';
+import {
+  PageHeader as PageHeaderDirect,
+  PageHeaderBreadcrumbBar as PageHeaderBreadcrumbBarDirect,
+  PageHeaderContent as PageHeaderContentDirect,
+  PageHeaderTabBar as PageHeaderTabBarDirect,
+} from '../PageHeader';
+
+describe('PageHeader', () => {
+  describe('export configuration', () => {
+    it('supports dot notation component namespacing from the main entrypoint', () => {
+      const { container } = render(
+        <PageHeader.Root>
+          <PageHeader.BreadcrumbBar />
+          <PageHeader.Content />
+          <PageHeader.TabBar />
+        </PageHeader.Root>
+      );
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('supports direct component imports from the PageHeader path', () => {
+      const { container } = render(
+        <PageHeaderDirect>
+          <PageHeaderBreadcrumbBarDirect />
+          <PageHeaderContentDirect />
+          <PageHeaderTabBarDirect />
+        </PageHeaderDirect>
+      );
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('PageHeader.Root component api', () => {
+    it('should render', () => {
+      const { container } = render(<PageHeader.Root />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('should place className on the outermost element', () => {
+      const { container } = render(
+        <PageHeader.Root className="custom-class" />
+      );
+      expect(container.firstChild).toHaveClass('custom-class');
+    });
+  });
+
+  describe('PageHeader.BreadcrumbBar component api', () => {
+    it('should render', () => {
+      const { container } = render(<PageHeader.BreadcrumbBar />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('should place className on the outermost element', () => {
+      const { container } = render(
+        <PageHeader.BreadcrumbBar className="custom-class" />
+      );
+      expect(container.firstChild).toHaveClass('custom-class');
+    });
+  });
+
+  describe('PageHeader.Content component api', () => {
+    it('should render', () => {
+      const { container } = render(<PageHeader.Content />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('should place className on the outermost element', () => {
+      const { container } = render(
+        <PageHeader.Content className="custom-class" />
+      );
+      expect(container.firstChild).toHaveClass('custom-class');
+    });
+  });
+
+  describe('PageHeader.TabBar component api', () => {
+    it('should render', () => {
+      const { container } = render(<PageHeader.TabBar />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('should place className on the outermost element', () => {
+      const { container } = render(
+        <PageHeader.TabBar className="custom-class" />
+      );
+      expect(container.firstChild).toHaveClass('custom-class');
+    });
+  });
+});
diff --git a/packages/react/src/components/PageHeader/PageHeader.mdx b/packages/react/src/components/PageHeader/PageHeader.mdx
new file mode 100644
index 000000000000..742a6d57d6c9
--- /dev/null
+++ b/packages/react/src/components/PageHeader/PageHeader.mdx
@@ -0,0 +1,39 @@
+import { Story, ArgTypes, Canvas, Meta } from '@storybook/blocks';
+import * as PageHeaderStories from './PageHeader.stories';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
+
+<Meta isTemplate />
+
+# PageHeader
+
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/PageHeader)
+&nbsp;|&nbsp;
+[Usage guidelines](https://www.carbondesignsystem.com/components/page-header/usage)
+&nbsp;|&nbsp;
+[Accessibility](https://www.carbondesignsystem.com/components/page-header/accessibility)
+
+## Table of Contents
+
+## Overview
+
+The page header is a large family of components.
+
+<Canvas
+  of={PageHeaderStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(PageHeaderStories.Default),
+    },
+  ]}
+/>
+
+## Component API
+
+<ArgTypes />
+
+## Feedback
+
+Help us improve this component by providing feedback, asking questions on Slack,
+or updating this file on
+[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/PageHeader/PageHeader.mdx).
diff --git a/packages/react/src/components/PageHeader/PageHeader.stories.js b/packages/react/src/components/PageHeader/PageHeader.stories.js
new file mode 100644
index 000000000000..17116da8d433
--- /dev/null
+++ b/packages/react/src/components/PageHeader/PageHeader.stories.js
@@ -0,0 +1,70 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import { unstable__PageHeader as PageHeader } from '../../';
+import {
+  PageHeader as PageHeaderDirect,
+  PageHeaderBreadcrumbBar,
+  PageHeaderContent,
+  PageHeaderTabBar,
+} from '../PageHeader';
+import mdx from './PageHeader.mdx';
+
+export default {
+  title: 'Patterns/unstable__PageHeader',
+  component: PageHeader,
+  subcomponents: {
+    PageHeaderBreadcrumbBar,
+    PageHeaderContent,
+    PageHeaderTabBar,
+  },
+  includeStories: [],
+  argTypes: {
+    children: {
+      control: false, // ReactNode props don't work in the controls pane
+    },
+  },
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const Default = (args) => (
+  <PageHeader.Root {...args}>
+    <PageHeader.BreadcrumbBar />
+    <PageHeader.Content />
+    <PageHeader.TabBar />
+  </PageHeader.Root>
+);
+
+export const BreadcrumbBar = (args) => (
+  <PageHeader.Root>
+    <PageHeader.BreadcrumbBar {...args} />
+  </PageHeader.Root>
+);
+
+export const Content = (args) => (
+  <PageHeader.Root>
+    <PageHeader.Content {...args} />
+  </PageHeader.Root>
+);
+
+export const TabBar = (args) => (
+  <PageHeader.Root>
+    <PageHeader.TabBar {...args} />
+  </PageHeader.Root>
+);
+
+export const DirectExports = (args) => (
+  <PageHeaderDirect {...args}>
+    <PageHeaderBreadcrumbBar />
+    <PageHeaderContent />
+    <PageHeaderTabBar />
+  </PageHeaderDirect>
+);
diff --git a/packages/react/src/components/PageHeader/PageHeader.tsx b/packages/react/src/components/PageHeader/PageHeader.tsx
new file mode 100644
index 000000000000..1df3eb050550
--- /dev/null
+++ b/packages/react/src/components/PageHeader/PageHeader.tsx
@@ -0,0 +1,169 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import classnames from 'classnames';
+import { usePrefix } from '../../internal/usePrefix';
+
+/**
+ * ----------
+ * PageHeader
+ * ----------
+ */
+interface PageHeaderProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+const PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(
+  function PageHeader({ className, children, ...other }: PageHeaderProps, ref) {
+    const prefix = usePrefix();
+    const classNames = classnames(
+      {
+        [`${prefix}--page-header`]: true,
+      },
+      className
+    );
+    return (
+      <div className={classNames} ref={ref} {...other}>
+        <p>page header</p>
+        {children}
+      </div>
+    );
+  }
+);
+PageHeader.displayName = 'PageHeader';
+
+/**
+ * -----------------------
+ * PageHeaderBreadcrumbBar
+ * -----------------------
+ */
+interface PageHeaderBreadcrumbBarProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+const PageHeaderBreadcrumbBar = React.forwardRef<
+  HTMLDivElement,
+  PageHeaderBreadcrumbBarProps
+>(function PageHeaderBreadcrumbBar(
+  { className, children, ...other }: PageHeaderBreadcrumbBarProps,
+  ref
+) {
+  const prefix = usePrefix();
+  const classNames = classnames(
+    {
+      [`${prefix}--page-header__breadcrumb-bar`]: true,
+    },
+    className
+  );
+  return (
+    <div className={classNames} ref={ref} {...other}>
+      <p>page header breadcrumb bar</p>
+      {children}
+    </div>
+  );
+});
+PageHeaderBreadcrumbBar.displayName = 'PageHeaderBreadcrumbBar';
+
+/**
+ * -----------------
+ * PageHeaderContent
+ * -----------------
+ */
+interface PageHeaderContentProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+const PageHeaderContent = React.forwardRef<
+  HTMLDivElement,
+  PageHeaderContentProps
+>(function PageHeaderContent(
+  { className, children, ...other }: PageHeaderContentProps,
+  ref
+) {
+  const prefix = usePrefix();
+  const classNames = classnames(
+    {
+      [`${prefix}--page-header__content`]: true,
+    },
+    className
+  );
+  return (
+    <div className={classNames} ref={ref} {...other}>
+      <p>page header content</p>
+      {children}
+    </div>
+  );
+});
+PageHeaderContent.displayName = 'PageHeaderContent';
+
+/**
+ * ----------------
+ * PageHeaderTabBar
+ * ----------------
+ */
+interface PageHeaderTabBarProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+const PageHeaderTabBar = React.forwardRef<
+  HTMLDivElement,
+  PageHeaderTabBarProps
+>(function PageHeaderTabBar(
+  { className, children, ...other }: PageHeaderTabBarProps,
+  ref
+) {
+  const prefix = usePrefix();
+  const classNames = classnames(
+    {
+      [`${prefix}--page-header__content`]: true,
+    },
+    className
+  );
+  return (
+    <div className={classNames} ref={ref} {...other}>
+      <p>page header tab bar</p>
+      {children}
+    </div>
+  );
+});
+PageHeaderTabBar.displayName = 'PageHeaderTabBar';
+
+/**
+ * -------
+ * Exports
+ * -------
+ */
+const Root = PageHeader;
+Root.displayName = 'PageHeader.Root';
+
+const BreadcrumbBar = PageHeaderBreadcrumbBar;
+BreadcrumbBar.displayName = 'PageHeaderBreadcrumbBar';
+
+const Content = PageHeaderContent;
+Content.displayName = 'PageHeaderContent';
+
+const TabBar = PageHeaderTabBar;
+TabBar.displayName = 'PageHeaderTabBar';
+
+export {
+  // direct exports
+  PageHeader,
+  PageHeaderBreadcrumbBar,
+  PageHeaderContent,
+  PageHeaderTabBar,
+  // namespaced
+  Root,
+  BreadcrumbBar,
+  Content,
+  TabBar,
+};
+export type {
+  PageHeaderProps,
+  PageHeaderBreadcrumbBarProps,
+  PageHeaderContentProps,
+  PageHeaderTabBarProps,
+};
diff --git a/packages/react/src/components/PageHeader/index.tsx b/packages/react/src/components/PageHeader/index.tsx
new file mode 100644
index 000000000000..8597269692a5
--- /dev/null
+++ b/packages/react/src/components/PageHeader/index.tsx
@@ -0,0 +1,23 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export {
+  PageHeader,
+  PageHeaderBreadcrumbBar,
+  PageHeaderContent,
+  PageHeaderTabBar,
+  //
+  Root,
+  BreadcrumbBar,
+  Content,
+  TabBar,
+} from './PageHeader';
+export type {
+  PageHeaderProps,
+  PageHeaderBreadcrumbBarProps,
+  PageHeaderContentProps,
+  PageHeaderTabBarProps,
+} from './PageHeader';
diff --git a/packages/react/src/index.js b/packages/react/src/index.js
index c9375b6511ca..e9cfeb34725e 100644
--- a/packages/react/src/index.js
+++ b/packages/react/src/index.js
@@ -114,6 +114,7 @@ export { NumberInput, NumberInputSkeleton } from './components/NumberInput';
 export { OrderedList } from './components/OrderedList';
 export { OverflowMenu } from './components/OverflowMenu';
 export { OverflowMenuItem } from './components/OverflowMenuItem';
+export * as unstable__PageHeader from './components/PageHeader';
 export { Pagination } from './components/Pagination';
 export { PaginationNav } from './components/PaginationNav';
 export {
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index c5322caae2f0..3a8b22c0d020 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -57,6 +57,7 @@ export * from './components/NumberInput';
 export * from './components/OrderedList';
 export * from './components/OverflowMenu';
 export * from './components/OverflowMenuItem';
+export * as unstable__PageHeader from './components/PageHeader';
 export * from './components/Pagination';
 export * from './components/Pagination/Pagination.Skeleton';
 export * from './components/PaginationNav';
@@ -447,6 +448,14 @@ export type { OrderedListProps } from './components/OrderedList/OrderedList';
 export type { OverflowMenuProps } from './components/OverflowMenu/OverflowMenu';
 export type { OverflowMenuItemProps } from './components/OverflowMenuItem/OverflowMenuItem';
 
+//page header
+export type {
+  PageHeaderProps,
+  PageHeaderBreadcrumbBarProps,
+  PageHeaderContentProps,
+  PageHeaderTabBarProps,
+} from './components/PageHeader';
+
 //pagination
 export type { PaginationProps } from './components/Pagination/Pagination';
 export type { PaginationSkeletonProps } from './components/Pagination/Pagination.Skeleton';
diff --git a/packages/styles/scss/components/_index.scss b/packages/styles/scss/components/_index.scss
index 1c25ec97b26c..902afc037373 100644
--- a/packages/styles/scss/components/_index.scss
+++ b/packages/styles/scss/components/_index.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2018, 2023
+// Copyright IBM Corp. 2018, 2025
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -53,6 +53,7 @@
 @use 'notification';
 @use 'number-input';
 @use 'overflow-menu';
+@use 'page-header';
 @use 'pagination';
 @use 'pagination-nav';
 @use 'popover';
diff --git a/packages/styles/scss/components/page-header/_index.scss b/packages/styles/scss/components/page-header/_index.scss
new file mode 100644
index 000000000000..eecb238155d8
--- /dev/null
+++ b/packages/styles/scss/components/page-header/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'page-header';
+@use 'page-header';
+
+@include page-header.page-header;
diff --git a/packages/styles/scss/components/page-header/_page-header.scss b/packages/styles/scss/components/page-header/_page-header.scss
new file mode 100644
index 000000000000..bc7f0a4079ca
--- /dev/null
+++ b/packages/styles/scss/components/page-header/_page-header.scss
@@ -0,0 +1,39 @@
+//
+// Copyright IBM Corp. 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use '../../config' as *;
+// @use '../../motion' as *;
+// @use '../../spacing' as *;
+// @use '../../theme' as *;
+// @use '../../type' as *;
+// @use '../../layer' as *;
+// @use '../../utilities/box-shadow' as *;
+// @use '../../utilities/button-reset';
+// @use '../../utilities/component-reset';
+// @use '../../utilities/focus-outline' as *;
+// @use '../../utilities/high-contrast-mode' as *;
+// @use '../../utilities/convert';
+// @use '../../utilities/z-index' as *;
+// @use '../../utilities/custom-property';
+
+/// Page header styles
+/// @access public
+/// @group page-header
+@mixin page-header {
+  .#{$prefix}--page-header {
+    border: 1px solid rebeccapurple; /* stylelint-disable-line */
+  }
+  .#{$prefix}--page-header__breadcrumb-bar {
+    border: 1px solid blue; /* stylelint-disable-line */
+  }
+  .#{$prefix}--page-header__content {
+    border: 1px solid red; /* stylelint-disable-line */
+  }
+  .#{$prefix}--page-header__tab-bar {
+    border: 1px solid green; /* stylelint-disable-line */
+  }
+}


Reviews:
user: login: heloiselui
body: Just the CI is not passing, but looks really good!
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-24T12:21:39Z
user: login: tay1orjones
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-24T17:33:50Z
user: login: ariellalgilmore
body: LGTM!
state: APPROVED
author_association: MEMBER
submitted_at: 2025-03-24T19:38:32Z
user: login: heloiselui
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-24T22:52:12Z
user: login: riddhybansal
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-25T09:02:21Z
user: login: ariellalgilmore
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-25T16:44:22Z

Review comments:
diff_hunk: @@ -151,6 +151,7 @@ const config = {
                 path.resolve(__dirname, '..', 'node_modules'),
                 path.resolve(__dirname, '..', '..', '..', 'node_modules'),
               ],
+              // quietDeps: true,
path: packages/react/.storybook/main.js
user: login: heloiselui
body: Just a question, are we keeping this line commented out for now to catch possible issues?
created_at: 2025-03-21T11:25:54Z
author_association: CONTRIBUTOR
diff_hunk: @@ -151,6 +151,7 @@ const config = {
                 path.resolve(__dirname, '..', 'node_modules'),
                 path.resolve(__dirname, '..', '..', '..', 'node_modules'),
               ],
+              // quietDeps: true,
path: packages/react/.storybook/main.js
user: login: tay1orjones
body: Yeah it silences the sass deprecation warnings. It should remain commented out so we see the warnings in CI but we can temporarily enable it locally if we'd like to cut down on the warnings during development. 
created_at: 2025-03-24T17:33:50Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,71 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import { unstable__PageHeader as PageHeader } from '../../';
+import {
+  PageHeader as PageHeaderDirect,
+  PageHeaderBreadcrumbBar,
+  PageHeaderContent,
+  PageHeaderTabBar,
+} from '../PageHeader';
+import mdx from './PageHeader.mdx';
+
+export default {
+  title: 'Patterns/unstable__PageHeader',
+  component: PageHeader,
+  subcomponents: {
+    PageHeaderBreadcrumbBar,
+    PageHeaderContent,
+    PageHeaderTabBar,
+  },
+  // uncomment includeStories before merging so the stories aren't visible in prod
+  // includeStories: [],
path: packages/react/src/components/PageHeader/PageHeader.stories.js
user: login: ariellalgilmore
body: looks like we just need to uncomment this and then we can merge
created_at: 2025-03-25T16:44:22Z
author_association: MEMBER

PR comments:
user: login: netlify[bot]
created_at: 2025-03-06T21:18:58Z
body: ### <span aria-hidden="true">✅</span> Deploy Preview for *v11-carbon-web-components* ready!


|  Name | Link |
|:-:|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | 6e9f06503bd8c56d947697b96cf2edd479f55eef |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/v11-carbon-web-components/deploys/67e467ee123e9e000855f57c |
|<span aria-hidden="true">😎</span> Deploy Preview | [https://deploy-preview-18788--v11-carbon-web-components.netlify.app](https://deploy-preview-18788--v11-carbon-web-components.netlify.app) |
|<span aria-hidden="true">📱</span> Preview on mobile | <details><summary> Toggle QR Code... </summary><br /><br />![QR Code](https://app.netlify.com/qr-code/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RlcGxveS1wcmV2aWV3LTE4Nzg4LS12MTEtY2FyYm9uLXdlYi1jb21wb25lbnRzLm5ldGxpZnkuYXBwIn0._rPZaDaLoFGBpwUYPlkBDkW38PYmdWjYk2Btz5Z1pBo)<br /><br />_Use your smartphone camera to open QR code link._</details> |
---
<!-- [v11-carbon-web-components Preview](https://deploy-preview-18788--v11-carbon-web-components.netlify.app) -->
_To edit notification comments on pull requests, go to your [Netlify site configuration](https://app.netlify.com/sites/v11-carbon-web-components/configuration/notifications#deploy-webhooks)._
author_association: NONE
user: login: netlify[bot]
created_at: 2025-03-06T21:19:30Z
body: ### <span aria-hidden="true">✅</span> Deploy Preview for *carbon-elements* ready!


|  Name | Link |
|:-:|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | 734afb0a868d30f621952bfaa54fd97b91b75796 |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/carbon-elements/deploys/67ca0ffc5464410008c59e53 |
|<span aria-hidden="true">😎</span> Deploy Preview | [https://deploy-preview-18788--carbon-elements.netlify.app](https://deploy-preview-18788--carbon-elements.netlify.app) |
|<span aria-hidden="true">📱</span> Preview on mobile | <details><summary> Toggle QR Code... </summary><br /><br />![QR Code](https://app.netlify.com/qr-code/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RlcGxveS1wcmV2aWV3LTE4Nzg4LS1jYXJib24tZWxlbWVudHMubmV0bGlmeS5hcHAifQ.a1w49kZRmhVBX0tC4vPdLBvgvDRvOfd3rNk8-BggHc4)<br /><br />_Use your smartphone camera to open QR code link._</details> |
---
<!-- [carbon-elements Preview](https://deploy-preview-18788--carbon-elements.netlify.app) -->
_To edit notification comments on pull requests, go to your [Netlify site configuration](https://app.netlify.com/sites/carbon-elements/configuration/notifications#deploy-webhooks)._
author_association: NONE
user: login: tay1orjones
created_at: 2025-03-06T21:20:10Z
body: An interesting related read: https://ivicabatinic.from.hr/posts/multipart-namespace-components-addressing-rsc-and-dot-notation-issues

author_association: MEMBER
user: login: netlify[bot]
created_at: 2025-03-06T21:27:28Z
body: ### <span aria-hidden="true">✅</span> Deploy Preview for *carbon-elements* ready!


|  Name | Link |
|:-:|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | 6e9f06503bd8c56d947697b96cf2edd479f55eef |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/carbon-elements/deploys/67e467eeb5048000089cf19c |
|<span aria-hidden="true">😎</span> Deploy Preview | [https://deploy-preview-18788--carbon-elements.netlify.app](https://deploy-preview-18788--carbon-elements.netlify.app) |
|<span aria-hidden="true">📱</span> Preview on mobile | <details><summary> Toggle QR Code... </summary><br /><br />![QR Code](https://app.netlify.com/qr-code/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RlcGxveS1wcmV2aWV3LTE4Nzg4LS1jYXJib24tZWxlbWVudHMubmV0bGlmeS5hcHAifQ.a1w49kZRmhVBX0tC4vPdLBvgvDRvOfd3rNk8-BggHc4)<br /><br />_Use your smartphone camera to open QR code link._</details> |
---
<!-- [carbon-elements Preview](https://deploy-preview-18788--carbon-elements.netlify.app) -->
_To edit notification comments on pull requests, go to your [Netlify site configuration](https://app.netlify.com/sites/carbon-elements/configuration/notifications#deploy-webhooks)._
author_association: NONE
user: login: netlify[bot]
created_at: 2025-03-06T22:29:54Z
body: ### <span aria-hidden="true">✅</span> Deploy Preview for *v11-carbon-react* ready!
Built [without sensitive environment variables](https://docs.netlify.com/configure-builds/environment-variables/#sensitive-variable-policy)

|  Name | Link |
|:-:|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | 6e9f06503bd8c56d947697b96cf2edd479f55eef |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/v11-carbon-react/deploys/67e467eeca2a7e0008a68c09 |
|<span aria-hidden="true">😎</span> Deploy Preview | [https://deploy-preview-18788--v11-carbon-react.netlify.app](https://deploy-preview-18788--v11-carbon-react.netlify.app) |
|<span aria-hidden="true">📱</span> Preview on mobile | <details><summary> Toggle QR Code... </summary><br /><br />![QR Code](https://app.netlify.com/qr-code/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RlcGxveS1wcmV2aWV3LTE4Nzg4LS12MTEtY2FyYm9uLXJlYWN0Lm5ldGxpZnkuYXBwIn0.IX7gJ6Ml3dTe5XqjtsncruCRZG302iXMT-cFBBsFLvQ)<br /><br />_Use your smartphone camera to open QR code link._</details> |
---
<!-- [v11-carbon-react Preview](https://deploy-preview-18788--v11-carbon-react.netlify.app) -->
_To edit notification comments on pull requests, go to your [Netlify site configuration](https://app.netlify.com/sites/v11-carbon-react/configuration/notifications#deploy-webhooks)._
author_association: NONE
user: login: tay1orjones
created_at: 2025-03-14T19:25:03Z
body: @2nikhiltom it looks like this is failing to generate a new inline snapshot due to an error about a method not existing in prettier. This is something you and I worked on when upgrading to prettier 3, when we added the prettier2 alias in `@carbon/react`. https://github.com/carbon-design-system/carbon/pull/17799

Jest is installed in the workspace root though, so it's importing Prettier (v3) and using a method that no longer exists.

One way around this is to upgrade to Jest 30. It's in alpha though. Do you have any ideas or know of another way we could tackle this?
author_association: MEMBER
user: login: codecov[bot]
created_at: 2025-03-24T17:51:16Z
body: ## [Codecov](https://app.codecov.io/gh/carbon-design-system/carbon/pull/18788?dropdown=coverage&src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=carbon-design-system) Report
All modified and coverable lines are covered by tests :white_check_mark:
> Project coverage is 84.89%. Comparing base [(`6d2c791`)](https://app.codecov.io/gh/carbon-design-system/carbon/commit/6d2c79173f0f1cde9d293849c1e30393da5449bd?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=carbon-design-system) to head [(`6e9f065`)](https://app.codecov.io/gh/carbon-design-system/carbon/commit/6e9f06503bd8c56d947697b96cf2edd479f55eef?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=carbon-design-system).
> Report is 1 commits behind head on main.

<details><summary>Additional details and impacted files</summary>


```diff
@@            Coverage Diff             @@
##             main   #18788      +/-   ##
==========================================
+ Coverage   84.85%   84.89%   +0.03%     
==========================================
  Files         396      397       +1     
  Lines       14491    14523      +32     
  Branches     4743     4723      -20     
==========================================
+ Hits        12297    12329      +32     
- Misses       2045     2046       +1     
+ Partials      149      148       -1     
```

</details>

[:umbrella: View full report in Codecov by Sentry](https://app.codecov.io/gh/carbon-design-system/carbon/pull/18788?dropdown=coverage&src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=carbon-design-system).   
:loudspeaker: Have feedback on the report? [Share it here](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=carbon-design-system).

<details><summary> :rocket: New features to boost your workflow: </summary>

- :snowflake: [Test Analytics](https://docs.codecov.com/docs/test-analytics): Detect flaky tests, report on failures, and find test suite problems.
- :package: [JS Bundle Analysis](https://docs.codecov.com/docs/javascript-bundle-analysis): Save yourself from yourself by tracking and limiting bundle sizes in JS merges.
</details>
author_association: NONE