feat: Pageheader new style and props

components/config-provider/context.ts

@@ -14,6 +14,9 @@ export interface ConfigConsumerProps {
   csp?: CSPConfig;
   autoInsertSpaceInButton?: boolean;
   locale?: Locale;
+  pageHeader?: {
+    ghost: boolean;
+  };
 }
 
 export const ConfigContext = createReactContext<ConfigConsumerProps>({

components/config-provider/index.en-US.md

@@ -43,3 +43,4 @@ Some component use dynamic style to support wave effect. You can config `csp` pr
 | getPopupContainer | to set the container of the popup element. The default is to create a `div` element in `body`. | Function(triggerNode) | `() => document.body` | 3.11.0 |
 | locale | language package setting, you can find the packages in [antd/es/locale](http://unpkg.com/antd/es/locale/) | object | 3.21.0 |
 | prefixCls | set prefix class | string | ant | 3.12.0 |
+| pageHeader | Unify the ghost of pageHeader ,Ref [pageHeader](<(/components/page-header)> | { ghost:boolean } | 'true' | 3.24.0 |

components/config-provider/index.tsx

@@ -18,6 +18,7 @@ export const configConsumerProps = [
   'csp',
   'autoInsertSpaceInButton',
   'locale',
+  'pageHeader',
 ];
 
 export interface ConfigProviderProps {
@@ -28,6 +29,9 @@ export interface ConfigProviderProps {
   csp?: CSPConfig;
   autoInsertSpaceInButton?: boolean;
   locale?: Locale;
+  pageHeader?: {
+    ghost: boolean;
+  };
 }
 
 class ConfigProvider extends React.Component<ConfigProviderProps> {
@@ -47,6 +51,7 @@ class ConfigProvider extends React.Component<ConfigProviderProps> {
       csp,
       autoInsertSpaceInButton,
       locale,
+      pageHeader = { ghost: true },
     } = this.props;
 
     const config: ConfigConsumerProps = {
@@ -63,6 +68,12 @@ class ConfigProvider extends React.Component<ConfigProviderProps> {
       config.renderEmpty = renderEmpty;
     }
 
+    // set pageHeader type
+    // 防止设置为 null 报错
+    if (pageHeader && pageHeader.ghost) {
+      config.pageHeader = pageHeader;
+    }
+
     return (
       <ConfigContext.Provider value={config}>
         <LocaleProvider locale={locale || legacyLocale} _ANT_MARK__={ANT_MARK}>

components/config-provider/index.zh-CN.md

@@ -44,3 +44,4 @@ return (
 | getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | Function(triggerNode) | () => document.body | 3.11.0 |
 | locale | 语言包配置，语言包可到 [antd/es/locale](http://unpkg.com/antd/es/locale/) 目录下寻找 | object | - | 3.21.0 |
 | prefixCls | 设置统一样式前缀 | string | ant | 3.12.0 |
+| pageHeader | 统一设置 pageHeader 的 type，参考 [pageHeader](<(/components/page-header)>) | { ghost: boolean } | 'true' | 3.24.0 |

components/drawer/index.tsx

@@ -257,6 +257,7 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
             'getPrefixCls',
             'renderEmpty',
             'csp',
+            'pageHeader',
             'autoInsertSpaceInButton',
           ])}
           {...offsetStyle}

components/page-header/__tests__/__snapshots__/demo.test.js.snap

@@ -3,7 +3,8 @@
 exports[`renders ./components/page-header/demo/actions.md correctly 1`] = `
 <div>
   <div
-    class="ant-page-header"
+    class="ant-page-header ant-page-header-ghost"
+    style="border:1px solid rgb(235, 237, 240)"
   >
     <div
       class="ant-page-header-heading"
@@ -182,7 +183,7 @@ exports[`renders ./components/page-header/demo/actions.md correctly 1`] = `
   </div>
   <br />
   <div
-    class="ant-page-header"
+    class="ant-page-header ant-page-header-ghost"
   >
     <div
       class="ant-page-header-heading"
@@ -363,7 +364,8 @@ exports[`renders ./components/page-header/demo/actions.md correctly 1`] = `
 
 exports[`renders ./components/page-header/demo/basic.md correctly 1`] = `
 <div
-  class="ant-page-header"
+  class="ant-page-header ant-page-header-ghost"
+  style="border:1px solid rgb(235, 237, 240)"
 >
   <div
     class="ant-page-header-heading"
@@ -415,7 +417,8 @@ exports[`renders ./components/page-header/demo/basic.md correctly 1`] = `
 
 exports[`renders ./components/page-header/demo/breadcrumb.md correctly 1`] = `
 <div
-  class="ant-page-header has-breadcrumb"
+  class="ant-page-header has-breadcrumb ant-page-header-ghost"
+  style="border:1px solid rgb(235, 237, 240)"
 >
   <div
     class="ant-breadcrumb"
@@ -486,7 +489,8 @@ exports[`renders ./components/page-header/demo/breadcrumb.md correctly 1`] = `
 
 exports[`renders ./components/page-header/demo/content.md correctly 1`] = `
 <div
-  class="ant-page-header has-breadcrumb"
+  class="ant-page-header has-breadcrumb ant-page-header-ghost"
+  style="border:1px solid rgb(235, 237, 240)"
 >
   <div
     class="ant-breadcrumb"
@@ -695,10 +699,196 @@ exports[`renders ./components/page-header/demo/content.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/page-header/demo/ghost.md correctly 1`] = `
+<div
+  style="background-color:#F5F5F5;padding:24px"
+>
+  <div
+    class="ant-page-header"
+  >
+    <div
+      class="ant-page-header-heading"
+    >
+      <div
+        class="ant-page-header-back"
+      >
+        <div
+          aria-label="Back"
+          class="ant-page-header-back-button"
+          role="button"
+          style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
+          tabindex="0"
+        >
+          <i
+            aria-label="icon: arrow-left"
+            class="anticon anticon-arrow-left"
+          >
+            <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 0 0 0 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>
+          </i>
+        </div>
+      </div>
+      <span
+        class="ant-page-header-heading-title"
+      >
+        Title
+      </span>
+      <span
+        class="ant-page-header-heading-sub-title"
+      >
+        This is a subtitle
+      </span>
+      <span
+        class="ant-page-header-heading-extra"
+      >
+        <button
+          class="ant-btn"
+          type="button"
+        >
+          <span>
+            Operation
+          </span>
+        </button>
+        <button
+          class="ant-btn"
+          type="button"
+        >
+          <span>
+            Operation
+          </span>
+        </button>
+        <button
+          class="ant-btn ant-btn-primary"
+          type="button"
+        >
+          <span>
+            Primary
+          </span>
+        </button>
+      </span>
+    </div>
+    <div
+      class="ant-page-header-content"
+    >
+      <div
+        class="ant-descriptions ant-descriptions-small"
+      >
+        <div
+          class="ant-descriptions-view"
+        >
+          <table>
+            <tbody>
+              <tr
+                class="ant-descriptions-row"
+              >
+                <td
+                  class="ant-descriptions-item"
+                  colspan="1"
+                >
+                  <span
+                    class="ant-descriptions-item-label ant-descriptions-item-colon"
+                  >
+                    Created
+                  </span>
+                  <span
+                    class="ant-descriptions-item-content"
+                  >
+                    Lili Qu
+                  </span>
+                </td>
+                <td
+                  class="ant-descriptions-item"
+                  colspan="1"
+                >
+                  <span
+                    class="ant-descriptions-item-label ant-descriptions-item-colon"
+                  >
+                    Association
+                  </span>
+                  <span
+                    class="ant-descriptions-item-content"
+                  >
+                    <a>
+                      421421
+                    </a>
+                  </span>
+                </td>
+                <td
+                  class="ant-descriptions-item"
+                  colspan="1"
+                >
+                  <span
+                    class="ant-descriptions-item-label ant-descriptions-item-colon"
+                  >
+                    Creation Time
+                  </span>
+                  <span
+                    class="ant-descriptions-item-content"
+                  >
+                    2017-01-10
+                  </span>
+                </td>
+              </tr>
+              <tr
+                class="ant-descriptions-row"
+              >
+                <td
+                  class="ant-descriptions-item"
+                  colspan="1"
+                >
+                  <span
+                    class="ant-descriptions-item-label ant-descriptions-item-colon"
+                  >
+                    Effective Time
+                  </span>
+                  <span
+                    class="ant-descriptions-item-content"
+                  >
+                    2017-10-10
+                  </span>
+                </td>
+                <td
+                  class="ant-descriptions-item"
+                  colspan="2"
+                >
+                  <span
+                    class="ant-descriptions-item-label ant-descriptions-item-colon"
+                  >
+                    Remarks
+                  </span>
+                  <span
+                    class="ant-descriptions-item-content"
+                  >
+                    Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
+                  </span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/page-header/demo/responsive.md correctly 1`] = `
 <div>
   <div
-    class="ant-page-header has-footer"
+    class="ant-page-header has-footer ant-page-header-ghost"
+    style="border:1px solid rgb(235, 237, 240)"
   >
     <div
       class="ant-page-header-heading"

components/page-header/__tests__/__snapshots__/index.test.js.snap

@@ -2,13 +2,13 @@
 
 exports[`PageHeader pageHeader should not render blank dom 1`] = `
 <div
-  class="ant-page-header"
+  class="ant-page-header ant-page-header-ghost"
 />
 `;
 
 exports[`PageHeader pageHeader should support className 1`] = `
 <div
-  class="ant-page-header not-works"
+  class="ant-page-header not-works ant-page-header-ghost"
 >
   <div
     class="ant-page-header-heading"

components/page-header/demo/actions.md

@@ -1,5 +1,5 @@
 ---
-order: 4
+order: 5
 title:
   zh-CN: 多种形态的 PageHeader
   en-US: Various forms of PageHeader
@@ -19,6 +19,9 @@ import { PageHeader, Tag, Button, Statistic, Descriptions, Row } from 'antd';
 ReactDOM.render(
   <div>
     <PageHeader
+      style={{
+        border: '1px solid rgb(235, 237, 240)',
+      }}
       onBack={() => window.history.back()}
       title="Title"
       subTitle="This is a subtitle"

components/page-header/demo/basic.md

@@ -17,13 +17,14 @@ Standard header, suitable for use in scenarios that require a brief description.
 import { PageHeader } from 'antd';
 
 ReactDOM.render(
-  <PageHeader onBack={() => null} title="Title" subTitle="This is a subtitle" />,
+  <PageHeader
+    style={{
+      border: '1px solid rgb(235, 237, 240)',
+    }}
+    onBack={() => null}
+    title="Title"
+    subTitle="This is a subtitle"
+  />,
   mountNode,
 );
 ```
-
-<style>
-.code-box-demo .ant-page-header {
-  border: 1px solid rgb(235, 237, 240);
-}
-<style>

components/page-header/demo/breadcrumb.md

@@ -1,5 +1,5 @@
 ---
-order: 2
+order: 3
 title:
   zh-CN: 带面包屑页头
   en-US: Use with breadcrumbs
@@ -32,7 +32,14 @@ const routes = [
 ];
 
 ReactDOM.render(
-  <PageHeader title="Title" breadcrumb={{ routes }} subTitle="This is a subtitle" />,
+  <PageHeader
+    style={{
+      border: '1px solid rgb(235, 237, 240)',
+    }}
+    title="Title"
+    breadcrumb={{ routes }}
+    subTitle="This is a subtitle"
+  />,
   mountNode,
 );
 ```