From 9d406ab7baa38b53385f7b094575fe2efe527808 Mon Sep 17 00:00:00 2001
From: Cherry7 <79909910+CCherry07@users.noreply.github.com>
Date: Mon, 31 Jul 2023 08:49:35 +0800
Subject: [PATCH] fix(PageHeader): ghost style (#6761)

* test(pageheader): update test snap

* fix: ghost style

* fix: ghost style

* chore(pageheader): update ghost demo

* test(pageheader): update test snap
---
 .../__tests__/__snapshots__/demo.test.js.snap | 483 +++++++++---------
 components/page-header/demo/ghost.vue         |   7 +-
 components/page-header/style/index.ts         |   4 +-
 3 files changed, 263 insertions(+), 231 deletions(-)

diff --git a/components/page-header/__tests__/__snapshots__/demo.test.js.snap b/components/page-header/__tests__/__snapshots__/demo.test.js.snap
index 8ae5d1b3a..f622ca694 100644
--- a/components/page-header/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/page-header/__tests__/__snapshots__/demo.test.js.snap
@@ -867,7 +867,6 @@ exports[`renders ./components/page-header/demo/content.vue correctly 1`] = `
             class="ant-space-item"
           >
             
-            <!---->
             <button
               class="ant-btn ant-btn-default ant-dropdown-trigger"
               style="padding: 0px;"
@@ -898,6 +897,7 @@ exports[`renders ./components/page-header/demo/content.vue correctly 1`] = `
               </span>
               
             </button>
+            <!---->
             
           </div>
           <!---->
@@ -978,277 +978,304 @@ exports[`renders ./components/page-header/demo/content.vue correctly 1`] = `
 
 exports[`renders ./components/page-header/demo/ghost.vue correctly 1`] = `
 <div
-  class="demo-page-header"
-  style="background-color: rgb(245, 245, 245); padding: 24px;"
+  data-v-app=""
 >
+  
   <div
-    class="ant-page-header"
+    class="demo-page-header"
+    style="background-color: rgb(245, 245, 245); padding: 24px;"
   >
-    <!---->
     <div
-      class="ant-page-header-heading"
+      class="ant-page-header"
     >
+      <!---->
       <div
-        class="ant-page-header-heading-left"
+        class="ant-page-header-heading"
       >
         <div
-          class="ant-page-header-back"
+          class="ant-page-header-heading-left"
         >
           <div
-            aria-label="Back"
-            class="ant-page-header-back-button"
-            role="button"
-            style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-            tabindex="0"
+            class="ant-page-header-back"
           >
-            
-            <span
-              aria-label="arrow-left"
-              class="anticon anticon-arrow-left"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                class=""
-                data-icon="arrow-left"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M872 474H286.9l350.2-304c5.6-4.9 2.2-14-5.2-14h-88.5c-3.9 0-7.6 1.4-10.5 3.9L155 487.8a31.96 31.96 0 000 48.3L535.1 866c1.5 1.3 3.3 2 5.2 2h91.5c7.4 0 10.8-9.2 5.2-14L286.9 550H872c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
-                />
-              </svg>
-            </span>
-            
-          </div>
-        </div>
-        <!---->
-        <span
-          class="ant-page-header-heading-title"
-          title="Title"
-        >
-          Title
-        </span>
-        <span
-          class="ant-page-header-heading-sub-title"
-          title="This is a subtitle"
-        >
-          This is a subtitle
-        </span>
-        <!---->
-      </div>
-      <span
-        class="ant-page-header-heading-extra"
-      >
-        <div
-          class="ant-space ant-space-horizontal ant-space-align-center"
-        >
-          
-          
-          <div
-            class="ant-space-item"
-            style="margin-right: 8px;"
-          >
-            <button
-              class="ant-btn ant-btn-default"
-              type="button"
+            <div
+              aria-label="Back"
+              class="ant-page-header-back-button"
+              role="button"
+              style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
+              tabindex="0"
             >
-              <!---->
               
-              <span>
-                Operation
+              <span
+                aria-label="arrow-left"
+                class="anticon anticon-arrow-left"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  class=""
+                  data-icon="arrow-left"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M872 474H286.9l350.2-304c5.6-4.9 2.2-14-5.2-14h-88.5c-3.9 0-7.6 1.4-10.5 3.9L155 487.8a31.96 31.96 0 000 48.3L535.1 866c1.5 1.3 3.3 2 5.2 2h91.5c7.4 0 10.8-9.2 5.2-14L286.9 550H872c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
+                  />
+                </svg>
               </span>
               
-            </button>
+            </div>
           </div>
           <!---->
-          
-          
-          <div
-            class="ant-space-item"
-            style="margin-right: 8px;"
+          <span
+            class="ant-page-header-heading-title"
+            title="Title"
           >
-            <button
-              class="ant-btn ant-btn-default"
-              type="button"
-            >
-              <!---->
-              
-              <span>
-                Operation
-              </span>
-              
-            </button>
-          </div>
+            Title
+          </span>
+          <span
+            class="ant-page-header-heading-sub-title"
+            title="This is a subtitle"
+          >
+            This is a subtitle
+          </span>
           <!---->
-          
-          
+        </div>
+        <span
+          class="ant-page-header-heading-extra"
+        >
           <div
-            class="ant-space-item"
+            class="ant-space ant-space-horizontal ant-space-align-center"
           >
-            <button
-              class="ant-btn ant-btn-primary"
-              type="button"
+            
+            
+            <div
+              class="ant-space-item"
+              style="margin-right: 8px;"
             >
-              <!---->
-              
-              <span>
-                Primary
-              </span>
-              
-            </button>
+              <button
+                class="ant-btn ant-btn-default"
+                type="button"
+              >
+                <!---->
+                
+                <span>
+                  Operation
+                </span>
+                
+              </button>
+            </div>
+            <!---->
+            
+            
+            <div
+              class="ant-space-item"
+              style="margin-right: 8px;"
+            >
+              <button
+                class="ant-btn ant-btn-default"
+                type="button"
+              >
+                <!---->
+                
+                <span>
+                  Operation
+                </span>
+                
+              </button>
+            </div>
+            <!---->
+            
+            
+            <div
+              class="ant-space-item"
+            >
+              <button
+                class="ant-btn ant-btn-primary"
+                type="button"
+              >
+                <!---->
+                
+                <span>
+                  Primary
+                </span>
+                
+              </button>
+            </div>
+            <!---->
+            
+            
           </div>
-          <!---->
-          
-          
-        </div>
-      </span>
-    </div>
-    <div
-      class="ant-page-header-content"
-    >
-      
+        </span>
+      </div>
       <div
-        class="ant-descriptions ant-descriptions-small"
+        class="ant-page-header-content"
       >
-        <!---->
+        
         <div
-          class="ant-descriptions-view"
+          class="ant-descriptions ant-descriptions-small"
         >
-          <table>
-            <tbody>
-              
-              <tr
-                class="ant-descriptions-row"
-              >
+          <!---->
+          <div
+            class="ant-descriptions-view"
+          >
+            <table>
+              <tbody>
                 
-                <td
-                  class="ant-descriptions-item"
-                  colspan="1"
+                <tr
+                  class="ant-descriptions-row"
                 >
-                  <div
-                    class="ant-descriptions-item-container"
+                  
+                  <td
+                    class="ant-descriptions-item"
+                    colspan="1"
                   >
-                    <span
-                      class="ant-descriptions-item-label"
-                    >
-                      Created
-                    </span>
-                    <span
-                      class="ant-descriptions-item-content"
+                    <div
+                      class="ant-descriptions-item-container"
                     >
-                      
-                      Lili Qu
-                      
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="ant-descriptions-item"
-                  colspan="1"
-                >
-                  <div
-                    class="ant-descriptions-item-container"
+                      <span
+                        class="ant-descriptions-item-label"
+                      >
+                        Created
+                      </span>
+                      <span
+                        class="ant-descriptions-item-content"
+                      >
+                        
+                        Lili Qu
+                        
+                      </span>
+                    </div>
+                  </td>
+                  <td
+                    class="ant-descriptions-item"
+                    colspan="1"
                   >
-                    <span
-                      class="ant-descriptions-item-label"
+                    <div
+                      class="ant-descriptions-item-container"
                     >
-                      Association
-                    </span>
-                    <span
-                      class="ant-descriptions-item-content"
-                    >
-                      
-                      <a>
-                        421421
-                      </a>
-                      
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="ant-descriptions-item"
-                  colspan="1"
-                >
-                  <div
-                    class="ant-descriptions-item-container"
+                      <span
+                        class="ant-descriptions-item-label"
+                      >
+                        Association
+                      </span>
+                      <span
+                        class="ant-descriptions-item-content"
+                      >
+                        
+                        <a>
+                          421421
+                        </a>
+                        
+                      </span>
+                    </div>
+                  </td>
+                  <td
+                    class="ant-descriptions-item"
+                    colspan="1"
                   >
-                    <span
-                      class="ant-descriptions-item-label"
+                    <div
+                      class="ant-descriptions-item-container"
                     >
-                      Creation Time
-                    </span>
-                    <span
-                      class="ant-descriptions-item-content"
-                    >
-                      
-                      2017-01-10
-                      
-                    </span>
-                  </div>
-                </td>
-                
-              </tr>
-              <tr
-                class="ant-descriptions-row"
-              >
-                
-                <td
-                  class="ant-descriptions-item"
-                  colspan="1"
+                      <span
+                        class="ant-descriptions-item-label"
+                      >
+                        Creation Time
+                      </span>
+                      <span
+                        class="ant-descriptions-item-content"
+                      >
+                        
+                        2017-01-10
+                        
+                      </span>
+                    </div>
+                  </td>
+                  
+                </tr>
+                <tr
+                  class="ant-descriptions-row"
                 >
-                  <div
-                    class="ant-descriptions-item-container"
+                  
+                  <td
+                    class="ant-descriptions-item"
+                    colspan="1"
                   >
-                    <span
-                      class="ant-descriptions-item-label"
-                    >
-                      Effective Time
-                    </span>
-                    <span
-                      class="ant-descriptions-item-content"
+                    <div
+                      class="ant-descriptions-item-container"
                     >
-                      
-                      2017-10-10
-                      
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="ant-descriptions-item"
-                  colspan="2"
-                >
-                  <div
-                    class="ant-descriptions-item-container"
+                      <span
+                        class="ant-descriptions-item-label"
+                      >
+                        Effective Time
+                      </span>
+                      <span
+                        class="ant-descriptions-item-content"
+                      >
+                        
+                        2017-10-10
+                        
+                      </span>
+                    </div>
+                  </td>
+                  <td
+                    class="ant-descriptions-item"
+                    colspan="2"
                   >
-                    <span
-                      class="ant-descriptions-item-label"
-                    >
-                      Remarks
-                    </span>
-                    <span
-                      class="ant-descriptions-item-content"
+                    <div
+                      class="ant-descriptions-item-container"
                     >
-                      
-                       Gonghu Road, Xihu District, Hangzhou, Zhejiang, China 
-                      
-                    </span>
-                  </div>
-                </td>
+                      <span
+                        class="ant-descriptions-item-label"
+                      >
+                        Remarks
+                      </span>
+                      <span
+                        class="ant-descriptions-item-content"
+                      >
+                        
+                         Gonghu Road, Xihu District, Hangzhou, Zhejiang, China 
+                        
+                      </span>
+                    </div>
+                  </td>
+                  
+                </tr>
                 
-              </tr>
-              
-            </tbody>
-          </table>
+              </tbody>
+            </table>
+          </div>
         </div>
+        
       </div>
-      
+      <!---->
     </div>
-    <!---->
   </div>
+  <label
+    class="ant-checkbox-wrapper"
+    style="margin-top: 0.5rem;"
+  >
+    <span
+      class="ant-checkbox"
+    >
+      <input
+        class="ant-checkbox-input"
+        type="checkbox"
+      />
+      <span
+        class="ant-checkbox-inner"
+      />
+    </span>
+    <span>
+      
+      toggle ghost
+      
+    </span>
+  </label>
+  
 </div>
 `;
 
@@ -1663,7 +1690,6 @@ exports[`renders ./components/page-header/demo/responsive.vue correctly 1`] = `
             class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
           >
             
-            <!---->
             <button
               aria-controls="null-more-popup"
               aria-expanded="false"
@@ -1696,6 +1722,7 @@ exports[`renders ./components/page-header/demo/responsive.vue correctly 1`] = `
                 </svg>
               </span>
             </button>
+            <!---->
             
             <!---->
           </div>
diff --git a/components/page-header/demo/ghost.vue b/components/page-header/demo/ghost.vue
index 8d6ef9850..ae001d922 100644
--- a/components/page-header/demo/ghost.vue
+++ b/components/page-header/demo/ghost.vue
@@ -19,7 +19,7 @@ The default PageHeader is a transparent background. In some cases, PageHeader ne
 <template>
   <div class="demo-page-header" style="background-color: #f5f5f5; padding: 24px">
     <a-page-header
-      :ghost="false"
+      :ghost="ghost"
       title="Title"
       sub-title="This is a subtitle"
       @back="() => $router.go(-1)"
@@ -42,7 +42,12 @@ The default PageHeader is a transparent background. In some cases, PageHeader ne
       </a-descriptions>
     </a-page-header>
   </div>
+  <a-checkbox v-model:checked="ghost" style="margin-top: 0.5rem">toggle ghost</a-checkbox>
 </template>
+<script lang="ts" setup>
+import { ref } from 'vue';
+const ghost = ref(false);
+</script>
 <style scoped>
 .demo-page-header :deep(tr:last-child td) {
   padding-bottom: 0;
diff --git a/components/page-header/style/index.ts b/components/page-header/style/index.ts
index 2a36feb7e..2ed353779 100644
--- a/components/page-header/style/index.ts
+++ b/components/page-header/style/index.ts
@@ -26,7 +26,7 @@ const genPageHeaderStyle: GenerateStyle<PageHeaderToken, CSSObject> = token => {
       padding: `${token.pageHeaderPaddingVertical}px ${token.pageHeaderPadding}px`,
       backgroundColor: token.colorBgContainer,
 
-      [`${componentCls}-ghost`]: {
+      [`&${componentCls}-ghost`]: {
         backgroundColor: token.pageHeaderGhostBg,
       },
 
@@ -146,7 +146,7 @@ export default genComponentStyleHook('PageHeader', token => {
     pageHeaderPaddingBreadcrumb: token.paddingSM,
     pageHeaderContentPaddingVertical: token.paddingSM,
     pageHeaderBackColor: token.colorTextBase,
-    pageHeaderGhostBg: 'inherit',
+    pageHeaderGhostBg: 'transparent',
     pageHeaderHeadingTitle: token.fontSizeHeading4,
     pageHeaderHeadingSubTitle: token.fontSize,
     pageHeaderTabFontSize: token.fontSizeLG,