Merge pull request #17321 from ant-design/optimize-pageHeader-className-naming

chore: Optimize PageHeader className naming

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

@@ -39,20 +39,20 @@ exports[`renders ./components/page-header/demo/actions.md correctly 1`] = `
     />
   </div>
   <div
-    class="ant-page-header-title-view"
+    class="ant-page-header-heading"
   >
     <span
-      class="ant-page-header-title-view-title"
+      class="ant-page-header-heading-title"
     >
       Title
     </span>
     <span
-      class="ant-page-header-title-view-sub-title"
+      class="ant-page-header-heading-sub-title"
     >
       This is a subtitle
     </span>
     <span
-      class="ant-page-header-title-view-tags"
+      class="ant-page-header-heading-tags"
     >
       <div
         class="ant-tag ant-tag-red"
@@ -61,7 +61,7 @@ exports[`renders ./components/page-header/demo/actions.md correctly 1`] = `
       </div>
     </span>
     <span
-      class="ant-page-header-title-view-extra"
+      class="ant-page-header-heading-extra"
     >
       <button
         class="ant-btn"
@@ -90,7 +90,7 @@ exports[`renders ./components/page-header/demo/actions.md correctly 1`] = `
     </span>
   </div>
   <div
-    class="ant-page-header-content-view"
+    class="ant-page-header-content"
   >
     <div
       class="wrap"
@@ -448,15 +448,15 @@ exports[`renders ./components/page-header/demo/basic.md correctly 1`] = `
     />
   </div>
   <div
-    class="ant-page-header-title-view"
+    class="ant-page-header-heading"
   >
     <span
-      class="ant-page-header-title-view-title"
+      class="ant-page-header-heading-title"
     >
       Title
     </span>
     <span
-      class="ant-page-header-title-view-sub-title"
+      class="ant-page-header-heading-sub-title"
     >
       This is a subtitle
     </span>
@@ -519,10 +519,10 @@ exports[`renders ./components/page-header/demo/breadcrumb.md correctly 1`] = `
     </span>
   </div>
   <div
-    class="ant-page-header-title-view"
+    class="ant-page-header-heading"
   >
     <span
-      class="ant-page-header-title-view-title"
+      class="ant-page-header-heading-title"
     >
       Title
     </span>
@@ -585,16 +585,16 @@ exports[`renders ./components/page-header/demo/content.md correctly 1`] = `
     </span>
   </div>
   <div
-    class="ant-page-header-title-view"
+    class="ant-page-header-heading"
   >
     <span
-      class="ant-page-header-title-view-title"
+      class="ant-page-header-heading-title"
     >
       Title
     </span>
   </div>
   <div
-    class="ant-page-header-content-view"
+    class="ant-page-header-content"
   >
     <div
       class="wrap"

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

@@ -11,10 +11,10 @@ exports[`PageHeader pageHeader should support className 1`] = `
   class="ant-page-header not-works"
 >
   <div
-    class="ant-page-header-title-view"
+    class="ant-page-header-heading"
   >
     <span
-      class="ant-page-header-title-view-title"
+      class="ant-page-header-heading-title"
     >
       Page Title
     </span>

components/page-header/index.tsx

@@ -67,14 +67,14 @@ const renderHeader = (prefixCls: string, props: PageHeaderProps) => {
 
 const renderTitle = (prefixCls: string, props: PageHeaderProps) => {
   const { title, subTitle, tags, extra } = props;
-  const titlePrefixCls = `${prefixCls}-title-view`;
+  const headingPrefixCls = `${prefixCls}-heading`;
   if (title || subTitle || tags || extra) {
     return (
-      <div className={titlePrefixCls}>
-        {title && <span className={`${titlePrefixCls}-title`}>{title}</span>}
-        {subTitle && <span className={`${titlePrefixCls}-sub-title`}>{subTitle}</span>}
-        {tags && <span className={`${titlePrefixCls}-tags`}>{tags}</span>}
-        {extra && <span className={`${titlePrefixCls}-extra`}>{extra}</span>}
+      <div className={headingPrefixCls}>
+        {title && <span className={`${headingPrefixCls}-title`}>{title}</span>}
+        {subTitle && <span className={`${headingPrefixCls}-sub-title`}>{subTitle}</span>}
+        {tags && <span className={`${headingPrefixCls}-tags`}>{tags}</span>}
+        {extra && <span className={`${headingPrefixCls}-extra`}>{extra}</span>}
       </div>
     );
   }
@@ -112,7 +112,7 @@ const PageHeader: React.SFC<PageHeaderProps> = props => (
         <div className={className} style={style}>
           {renderHeader(prefixCls, props)}
           {renderTitle(prefixCls, props)}
-          {children && <div className={`${prefixCls}-content-view`}>{children}</div>}
+          {children && <div className={`${prefixCls}-content`}>{children}</div>}
           {renderFooter(prefixCls, footer)}
         </div>
       );

components/page-header/style/index.less

@@ -31,11 +31,11 @@
     margin: 0 12px;
   }
 
-  .@{ant-prefix}-breadcrumb {
-    margin-bottom: 12px;
+  .@{ant-prefix}-breadcrumb + &-heading {
+    margin-top: 12px;
   }
 
-  &-title-view {
+  &-heading {
     display: inline-block;
     &-title {
       display: inline-block;
@@ -72,7 +72,7 @@
     }
   }
 
-  &-content-view {
+  &-content {
     padding-top: 12px;
   }