From 78428ed4b416af86a1bc9eefe4f71f55aa880475 Mon Sep 17 00:00:00 2001
From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com>
Date: Wed, 11 Dec 2024 19:55:42 +0000
Subject: [PATCH 1/4] correctly add display prop

---
 packages/react/src/PageHeader/PageHeader.module.css | 6 +++++-
 packages/react/src/PageHeader/PageHeader.tsx        | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/PageHeader/PageHeader.module.css b/packages/react/src/PageHeader/PageHeader.module.css
index 41c9b326b86..67d945992ec 100644
--- a/packages/react/src/PageHeader/PageHeader.module.css
+++ b/packages/react/src/PageHeader/PageHeader.module.css
@@ -161,12 +161,16 @@
 
 .Title {
   /* using flex and order to display the title in the title area. */
-  display: flex;
+  display: block;
   order: var(--title-area-region-order-title);
   font-size: inherit;
   font-weight: inherit;
 }
 
+.Title[data-hidden='true'] {
+  display: none;
+}
+
 .TrailingVisual {
   /* using flex and order to display the trailing visual in the title area. */
   display: flex;
diff --git a/packages/react/src/PageHeader/PageHeader.tsx b/packages/react/src/PageHeader/PageHeader.tsx
index d15fb6c2b4d..c9ccb7de986 100644
--- a/packages/react/src/PageHeader/PageHeader.tsx
+++ b/packages/react/src/PageHeader/PageHeader.tsx
@@ -535,8 +535,8 @@ const Title: React.FC<React.PropsWithChildren<TitleProps>> = ({
     <Heading
       className={clsx(enabled && classes.Title, className)}
       data-component="PH_Title"
+      data-hidden={hidden}
       as={as}
-      style={style}
       sx={
         enabled
           ? sx

From c9213ca552b9d56754a06e791e7139597dd6a08f Mon Sep 17 00:00:00 2001
From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com>
Date: Wed, 11 Dec 2024 19:55:42 +0000
Subject: [PATCH 2/4] correctly update display prop for title

---
 .changeset/clever-bears-jog.md                      | 5 +++++
 packages/react/src/PageHeader/PageHeader.module.css | 6 +++++-
 packages/react/src/PageHeader/PageHeader.tsx        | 2 +-
 3 files changed, 11 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/clever-bears-jog.md

diff --git a/.changeset/clever-bears-jog.md b/.changeset/clever-bears-jog.md
new file mode 100644
index 00000000000..1e36e4273c8
--- /dev/null
+++ b/.changeset/clever-bears-jog.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Fix display bug for `PageHeader` component title.
diff --git a/packages/react/src/PageHeader/PageHeader.module.css b/packages/react/src/PageHeader/PageHeader.module.css
index 41c9b326b86..67d945992ec 100644
--- a/packages/react/src/PageHeader/PageHeader.module.css
+++ b/packages/react/src/PageHeader/PageHeader.module.css
@@ -161,12 +161,16 @@
 
 .Title {
   /* using flex and order to display the title in the title area. */
-  display: flex;
+  display: block;
   order: var(--title-area-region-order-title);
   font-size: inherit;
   font-weight: inherit;
 }
 
+.Title[data-hidden='true'] {
+  display: none;
+}
+
 .TrailingVisual {
   /* using flex and order to display the trailing visual in the title area. */
   display: flex;
diff --git a/packages/react/src/PageHeader/PageHeader.tsx b/packages/react/src/PageHeader/PageHeader.tsx
index d15fb6c2b4d..c9ccb7de986 100644
--- a/packages/react/src/PageHeader/PageHeader.tsx
+++ b/packages/react/src/PageHeader/PageHeader.tsx
@@ -535,8 +535,8 @@ const Title: React.FC<React.PropsWithChildren<TitleProps>> = ({
     <Heading
       className={clsx(enabled && classes.Title, className)}
       data-component="PH_Title"
+      data-hidden={hidden}
       as={as}
-      style={style}
       sx={
         enabled
           ? sx

From daee4250cfad80b966ca4f240613589a13ab30d2 Mon Sep 17 00:00:00 2001
From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com>
Date: Wed, 11 Dec 2024 20:08:19 +0000
Subject: [PATCH 3/4] re-add missing style component

---
 packages/react/src/PageHeader/PageHeader.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react/src/PageHeader/PageHeader.tsx b/packages/react/src/PageHeader/PageHeader.tsx
index c9ccb7de986..bd45ecf9d25 100644
--- a/packages/react/src/PageHeader/PageHeader.tsx
+++ b/packages/react/src/PageHeader/PageHeader.tsx
@@ -537,6 +537,7 @@ const Title: React.FC<React.PropsWithChildren<TitleProps>> = ({
       data-component="PH_Title"
       data-hidden={hidden}
       as={as}
+      style={style}
       sx={
         enabled
           ? sx

From 686eae8c2b122f6412fa9dbea2b352b9ccbc5ea9 Mon Sep 17 00:00:00 2001
From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com>
Date: Thu, 12 Dec 2024 08:57:25 -0600
Subject: [PATCH 4/4] add :where selector

Co-authored-by: Marie Lucca <40550942+francinelucca@users.noreply.github.com>
---
 packages/react/src/PageHeader/PageHeader.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/PageHeader/PageHeader.module.css b/packages/react/src/PageHeader/PageHeader.module.css
index 67d945992ec..1d84ab75981 100644
--- a/packages/react/src/PageHeader/PageHeader.module.css
+++ b/packages/react/src/PageHeader/PageHeader.module.css
@@ -167,7 +167,7 @@
   font-weight: inherit;
 }
 
-.Title[data-hidden='true'] {
+.Title:where([data-hidden='true']) {
   display: none;
 }