Merge pull request #22030 from ant-design/fix-page-header-overflow

style: 💄 fix PageHeader overflow hidden and responsive style
5 years ago · ef0c07db6a
3 changed files with 69 additions and 72 deletions
--- a/components/page-header/tests/snapshots/demo.test.js.snap
+++ b/components/page-header/tests/snapshots/demo.test.js.snap
@ -630,68 +630,61 @@ exports[`renders ./components/page-header/demo/content.md correctly 1`] = `
    class="ant-page-header-content"
  >
    <div
-      class="ant-row content"
+      class="ant-row"
    >
      <div
-        class="main"
        style="flex:1"
      >
        <div
-          class="content"
+          class="ant-typography"
        >
-          <div
-            class="ant-typography"
+          Ant Design interprets the color system into two levels: a system-level color system and a product-level color system.
+        </div>
+        <div
+          class="ant-typography"
+        >
+          Ant Design's design team preferred to design with the HSB color model, which makes it easier for designers to have a clear psychological expectation of color when adjusting colors, as well as facilitate communication in teams.
+        </div>
+        <div>
+          <a
+            style="margin-right:16px"
          >
-            Ant Design interprets the color system into two levels: a system-level color system and a product-level color system.
-          </div>
-          <div
-            class="ant-typography"
+            <img
+              alt="Quick Start"
+              src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg"
+              style="margin-right:8px"
+            />
+            Quick Start
+          </a>
+          <a
+            style="margin-right:16px"
          >
-            Ant Design's design team preferred to design with the HSB color model, which makes it easier for designers to have a clear psychological expectation of color when adjusting colors, as well as facilitate communication in teams.
-          </div>
-          <div
-            class="ant-row contentLink"
+            <img
+              alt=" Product Info"
+              src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg"
+              style="margin-right:8px"
+            />
+             Product Info
+          </a>
+          <a
+            style="margin-right:16px"
          >
-            <a
-              style="margin-right:16px;display:flex;align-items:center"
-            >
-              <img
-                alt="start"
-                src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg"
-                style="margin-right:8px"
-              />
-              Quick Start
-            </a>
-            <a
-              style="margin-right:16px;display:flex;align-items:center"
-            >
-              <img
-                alt="start"
-                src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg"
-                style="margin-right:8px"
-              />
-               Product Info
-            </a>
-            <a
-              style="margin-right:16px;display:flex;align-items:center"
-            >
-              <img
-                alt="start"
-                src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg"
-                style="margin-right:8px"
-              />
-              Product Doc
-            </a>
-          </div>
+            <img
+              alt="Product Doc"
+              src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg"
+              style="margin-right:8px"
+            />
+            Product Doc
+          </a>
        </div>
      </div>
      <div
-        class="extra"
-        style="margin-left:80px;margin-top:16px"
+        class="image"
      >
        <img
          alt="content"
          src="https://gw.alipayobjects.com/zos/antfincdn/K%24NnlsB%26hz/pageHeader.svg"
+          width="100%"
        />
      </div>
    </div>
--- a/components/page-header/demo/content.md
+++ b/components/page-header/demo/content.md
@ -7,11 +7,11 @@ title:

 ## zh-CN

-使用了 pageHeader 提供的所有能力。
+使用了 PageHeader 提供的所有能力。

 ## en-US

-Show all props.Used all the capabilities provided by pageHeader.
+Show all props provided by PageHeader.

 ```jsx
 import { PageHeader, Menu, Dropdown, Button, Tag, Typography, Row } from 'antd';
@ -78,8 +78,6 @@ const IconLink = ({ src, text }) => (
  <a
    style={{
      marginRight: 16,
-      display: 'flex',
-      alignItems: 'center',
    }}
  >
    <img
@ -87,14 +85,14 @@ const IconLink = ({ src, text }) => (
        marginRight: 8,
      }}
      src={src}
-      alt="start"
+      alt={text}
    />
    {text}
  </a>
 );

 const content = (
-  <div className="content">
+  <>
    <Paragraph>
      Ant Design interprets the color system into two levels: a system-level color system and a
      product-level color system.
@ -104,7 +102,7 @@ const content = (
      easier for designers to have a clear psychological expectation of color when adjusting colors,
      as well as facilitate communication in teams.
    </Paragraph>
-    <Row className="contentLink">
+    <div>
      <IconLink
        src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg"
        text="Quick Start"
@ -117,25 +115,15 @@ const content = (
        src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg"
        text="Product Doc"
      />
-    </Row>
-  </div>
+    </div>
+  </>
 );

 const Content = ({ children, extraContent }) => {
  return (
-    <Row className="content">
-      <div className="main" style={{ flex: 1 }}>
-        {children}
-      </div>
-      <div
-        className="extra"
-        style={{
-          marginLeft: 80,
-          marginTop: 16,
-        }}
-      >
-        {extraContent}
-      </div>
+    <Row>
+      <div style={{ flex: 1 }}>{children}</div>
+      <div className="image">{extraContent}</div>
    </Row>
  );
 };
@ -162,6 +150,7 @@ ReactDOM.render(
        <img
          src="https://gw.alipayobjects.com/zos/antfincdn/K%24NnlsB%26hz/pageHeader.svg"
          alt="content"
+          width="100%"
        />
      }
    >
@ -171,3 +160,18 @@ ReactDOM.render(
  mountNode,
 );
 ```
+
+```css
+#components-page-header-demo-content .image {
+  margin: 0 0 0 60px;
+  display: flex;
+  align-items: center;
+}
+
+@media (max-width: 768px) {
+  #components-page-header-demo-content .image {
+    flex: 100%;
+    margin: 24px 0 0;
+  }
+}
+```
--- a/components/page-header/style/index.less
+++ b/components/page-header/style/index.less
@ -57,7 +57,8 @@

  &-heading {
    width: 100%;
-    overflow: hidden;
+    .clearfix;
+
    &-title {
      display: block;
      float: left;
@ -137,7 +138,6 @@

  &-content {
    padding-top: 12px;
-    overflow: hidden;
  }

  &-footer {
@ -158,14 +158,14 @@
    }
  }

-  @media (max-width: @screen-sm) {
+  @media (max-width: @screen-md) {
    &-heading {
      &-extra {
        display: block;
        float: unset;
+        clear: both;
        width: 100%;
        padding-top: 12px;
-        overflow: hidden;
      }
    }
  }