feat: Pageheader new style and props

components/config-provider/context.ts

@@ -15,7 +15,7 @@ export interface ConfigConsumerProps {
   autoInsertSpaceInButton?: boolean;
   locale?: Locale;
   pageHeader?: {
-    type: 'ghost' | 'default';
+    ghost: boolean;
   };
 }
 

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

@@ -43,4 +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 type of pageHeader ,Ref [pageHeader](<(/components/page-header)> | { type: 'ghost'\|'default' } | 'default' | 3.24.0 |
+| pageHeader | Unify the ghost of pageHeader ,Ref [pageHeader](<(/components/page-header)> | { ghost:boolean } | 'true' | 3.24.0 |

components/config-provider/index.tsx

@@ -30,7 +30,7 @@ export interface ConfigProviderProps {
   autoInsertSpaceInButton?: boolean;
   locale?: Locale;
   pageHeader?: {
-    type: 'ghost' | 'default';
+    ghost: boolean;
   };
 }
 
@@ -51,7 +51,7 @@ class ConfigProvider extends React.Component<ConfigProviderProps> {
       csp,
       autoInsertSpaceInButton,
       locale,
-      pageHeader,
+      pageHeader = { ghost: true },
     } = this.props;
 
     const config: ConfigConsumerProps = {
@@ -70,7 +70,7 @@ class ConfigProvider extends React.Component<ConfigProviderProps> {
 
     // set pageHeader type
     // 防止设置为 null 报错
-    if (pageHeader && pageHeader.type) {
+    if (pageHeader && pageHeader.ghost) {
       config.pageHeader = pageHeader;
     }
 

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

@@ -44,4 +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)>) | { type: 'ghost' \| 'default' } | 'default' | 3.24.0 |
+| pageHeader | 统一设置 pageHeader 的 type，参考 [pageHeader](<(/components/page-header)>) | { ghost: boolean } | 'true' | 3.24.0 |

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

@@ -3,7 +3,7 @@
 exports[`renders ./components/page-header/demo/actions.md correctly 1`] = `
 <div>
   <div
-    class="ant-page-header"
+    class="ant-page-header ghost"
   >
     <div
       class="ant-page-header-heading"
@@ -182,7 +182,7 @@ exports[`renders ./components/page-header/demo/actions.md correctly 1`] = `
   </div>
   <br />
   <div
-    class="ant-page-header"
+    class="ant-page-header ghost"
   >
     <div
       class="ant-page-header-heading"
@@ -363,7 +363,7 @@ 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 ghost"
 >
   <div
     class="ant-page-header-heading"
@@ -415,7 +415,7 @@ 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 ghost"
 >
   <div
     class="ant-breadcrumb"
@@ -486,7 +486,7 @@ 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 ghost"
 >
   <div
     class="ant-breadcrumb"
@@ -700,7 +700,7 @@ exports[`renders ./components/page-header/demo/pure.md correctly 1`] = `
   style="background-color:#F5F5F5;padding:24px"
 >
   <div
-    class="ant-page-header ghost"
+    class="ant-page-header"
   >
     <div
       class="ant-page-header-heading"
@@ -883,7 +883,7 @@ exports[`renders ./components/page-header/demo/pure.md correctly 1`] = `
 exports[`renders ./components/page-header/demo/responsive.md correctly 1`] = `
 <div>
   <div
-    class="ant-page-header has-footer"
+    class="ant-page-header has-footer ghost"
   >
     <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 ghost"
 />
 `;
 
 exports[`PageHeader pageHeader should support className 1`] = `
 <div
-  class="ant-page-header not-works"
+  class="ant-page-header not-works ghost"
 >
   <div
     class="ant-page-header-heading"

components/page-header/demo/pure.md

@@ -1,17 +1,17 @@
 ---
 order: 2
 title:
-  zh-CN: 纯净模式，没有白底
-  en-US: Pure mode, no white background
+  zh-CN: 白底模式
+  en-US: white background mode
 ---
 
 ## zh-CN
 
-在某些情况下，pageHeader 不需要自己的背景颜色。
+在某些情况下，pageHeader 需要自己的背景颜色。
 
 ## en-US
 
-In some cases, pageHeader does not require its own background color.
+In some cases, pageHeader require its own background color.
 
 ```jsx
 import { PageHeader, Button, Descriptions } from 'antd';
@@ -24,7 +24,7 @@ ReactDOM.render(
     }}
   >
     <PageHeader
-      type="ghost"
+      ghost={false}
       onBack={() => window.history.back()}
       title="Title"
       subTitle="This is a subtitle"

components/page-header/demo/responsive.md

@@ -92,6 +92,9 @@ ReactDOM.render(
 tr:last-child td {
   padding-bottom: 0;
 }
+.ant-statistic-content-value{
+  font-size: 20px;
+}
 #components-page-header-demo-responsive .content {
   display: flex;
 }

components/page-header/index.en-US.md

@@ -18,7 +18,7 @@ It can also be used as inter-page navigation when it is needed to make the user
 | --- | --- | --- | --- | --- |
 | title | custom title text | ReactNode | - | 3.14.0 |
 | subTitle | custom subTitle text | ReactNode | - | 3.14.0 |
-| type | pageHeader type, will change background color | `'default' | 'ghost'` | 'default' | 3.24.0 |
+| type | pageHeader type, will change background color | boolean | true | 3.24.0 |
 | avatar | Avatar next to the title bar | [avatar props](/components/avatar/) | - | 3.22.0 |
 | backIcon | custom back icon, if false the back icon will not be displayed | ReactNode | `<Icon type="arrow-left" />` | 3.14.0 |
 | tags | Tag list next to title | [Tag](https://ant.design/components/tag-cn/)[] \| [Tag](https://ant.design/components/tag-cn/) | - | 3.14.0 |

components/page-header/index.tsx

@@ -22,7 +22,7 @@ export interface PageHeaderProps {
   avatar?: AvatarProps;
   onBack?: (e: React.MouseEvent<HTMLDivElement>) => void;
   className?: string;
-  type?: 'ghost' | 'default';
+  ghost?: boolean;
 }
 
 const renderBack = (
@@ -90,13 +90,13 @@ const renderChildren = (prefixCls: string, children: React.ReactNode) => {
 
 const PageHeader: React.SFC<PageHeaderProps> = props => (
   <ConfigConsumer>
-    {({ getPrefixCls, pageHeader = { type: 'default' } }: ConfigConsumerProps) => {
+    {({ getPrefixCls, pageHeader = { ghost: true } }: ConfigConsumerProps) => {
       const {
         prefixCls: customizePrefixCls,
         style,
         footer,
         children,
-        type,
+        ghost = true,
         breadcrumb,
         className: customizeClassName,
       } = props;
@@ -107,7 +107,7 @@ const PageHeader: React.SFC<PageHeaderProps> = props => (
         'has-breadcrumb': breadcrumbDom,
         'has-footer': footer,
         // 防止设置为 null 报错
-        ghost: type === 'ghost' || (pageHeader && pageHeader.type === 'ghost'),
+        ghost: ghost || (pageHeader && ghost === undefined && pageHeader.ghost),
       });
 
       return (

components/page-header/index.zh-CN.md

@@ -18,7 +18,7 @@ subtitle: 页头
 | --- | --- | --- | --- | --- |
 | title | 自定义标题文字 | ReactNode | - | 3.14.0 |
 | subTitle | 自定义的二级标题文字 | ReactNode | - | 3.14.0 |
-| type | pageHeader 的类型，将会改变背景颜色 | `'default' | 'ghost'` | 'default' | 3.24.0 |
+| ghost | pageHeader 的类型，将会改变背景颜色 | boolean | true | 3.24.0 |
 | avatar | 标题栏旁的头像 | [avatar props](/components/avatar/) | - | 3.22.0 |
 | backIcon | 自定义 back icon ，如果为 false 不渲染 back icon | ReactNode | `<Icon type="arrow-left" />` | 3.14.0 |
 | tags | title 旁的 tag 列表 | [Tag](https://ant.design/components/tag-cn/)[] \| [Tag](https://ant.design/components/tag-cn/) | - | 3.14.0 |