New Component PageHeader #13637

chenshuai2144 · 2018-12-15T04:44:02Z

New Component

Add new components to support more usage scenarios

Preview

Impact on users and possible risks

Add new components without affecting existing code.

changelog

add new components PageHeader

request a self-check list before merging

document has been added
Code demo is provided
TypeScript definition has been added
Changelog not required

chenshuai2144 · 2018-12-15T04:45:26Z

codecov · 2018-12-15T04:50:55Z

Codecov Report

Merging #13637 into feature will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff            @@
##           feature   #13637   +/-   ##
========================================
  Coverage    93.97%   93.97%           
========================================
  Files          314      314           
  Lines         6939     6939           
  Branches      1759     1759           
========================================
  Hits          6521     6521           
  Misses         404      404           
  Partials        14       14

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 812c28f...a2fae3f. Read the comment docs.

codecov · 2018-12-16T14:51:49Z

Codecov Report

Merging #13637 into feature will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff            @@
##           feature   #13637   +/-   ##
========================================
  Coverage    93.97%   93.97%           
========================================
  Files          314      314           
  Lines         6939     6939           
  Branches      1759     1759           
========================================
  Hits          6521     6521           
  Misses         404      404           
  Partials        14       14

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 812c28f...0ac7232. Read the comment docs.

codecov · 2018-12-16T14:51:49Z

Codecov Report

Merging #13637 into feature will increase coverage by 0.08%.
The diff coverage is 100%.

@@             Coverage Diff             @@
##           feature   #13637      +/-   ##
===========================================
+ Coverage    93.08%   93.16%   +0.08%     
===========================================
  Files          247      248       +1     
  Lines         6635     6670      +35     
  Branches      1940     1928      -12     
===========================================
+ Hits          6176     6214      +38     
+ Misses         456      455       -1     
+ Partials         3        1       -2

Impacted Files	Coverage Δ
components/index.tsx	`100% <ø> (ø)`	⬆️
components/page-header/index.tsx	`100% <100%> (ø)`
components/time-picker/index.tsx	`81.94% <0%> (ø)`	⬆️
components/transfer/index.tsx	`85.43% <0%> (ø)`	⬆️
components/_util/wave.tsx	`87.5% <0%> (+2.88%)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 5ce7e71...a0e7077. Read the comment docs.

zombieJ · 2018-12-17T01:37:08Z

add subTitle
remove logo, keep extraContent
content -> children
action 和 Card 一样叫 extra
Breadcrumb or Tabs：breadcrumb={<Breadcrumb>{...}</Breadcrumb>}? 感觉也不太好

或者下方的操作和标签移到 renderFooter 里让用户自己搞算了。否则下面这个看着有点蛋疼。

@chenshuai2144 @afc163

yutingzhao1991 · 2018-12-17T04:01:51Z

问一个问题，这个不做在 ant-design-pro 里面？我们按照什么标准来划定一个组件是在 antd 还是再 ant-design-pro 里面呢？

chenshuai2144 · 2018-12-17T04:15:43Z

扭头问一下你左边的男人

afc163 · 2018-12-17T12:29:35Z

components/page-header/demo/basic.md

+<style>
+  .ant-pageheader{
+      border: 1px solid rgb(235, 237, 240);
+  }


indent 和 space 不对。

afc163 · 2018-12-17T12:30:09Z

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

+| action | Operating area, at the end of the line of the title line | ReactNode | - |
+| logo | logo  | ReactNode | - |
+| content | content | ReactNode | - |
+| extraContent | Extra content area, on the right side of content | ReactNode | - |


extraContent 和 action 的命名还是太不直观了。

action 感觉还不错，extraContent的确感觉有点扯。
不如叫 rightContent 和 leftContent 吧

afc163 · 2018-12-18T03:59:11Z

extraContent 去掉好了，感觉用的很少。

chenshuai2144 · 2018-12-18T04:06:47Z

extraContent 还是很有用的。这两种如果有extraContent 实现起来很容易

zombieJ · 2018-12-18T08:36:39Z

Card 里右上角叫 extra，这边也这么叫吧。叫 action 又要多记一个。

zombieJ · 2018-12-18T08:38:06Z

extraContent 或者让用户自己用 Flex 去实现？

=============

update:
直接 content 和 extraContent 合成一个 children，让用户自己来用。3 和 4 的例子，感觉还是不够抽象。

afc163 · 2018-12-21T03:49:12Z

components/page-header/demo/basic.md

@@ -14,13 +14,16 @@ title:
 Basic Page Header

 ```jsx
-import { PageHeader } from 'antd';
+import { PageHeader } from "antd";


应该是单引号。

afc163 · 2018-12-26T03:00:05Z

components/page-header/index.tsx

+    if (breadcrumb && breadcrumb.routes && breadcrumb.routes.length > 2) {
+      return this.renderBreadcrumb();
+    }
+    return this.renderBack(prefixCls);


renderBack 可以不出现么？感觉很多场景不需要返回。

afc163 · 2019-01-14T07:39:47Z

components/page-header/demo/basic.md

@@ -7,11 +7,11 @@ title:

 ## zh-CN

-标准页头
+标准页头，适合使用在需要简单描述的场景


标点符号

afc163 · 2019-01-14T07:44:23Z

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

+    expect(wrapper.find('.ant-page-header-back-icon')).toHaveLength(0);
+  });
+
+  it('pageHeader should contain back it back', async () => {


目测用例都不需要 async。

Akatsukikikiki · 2019-01-15T07:17:06Z

有几处间距，以及 icon 的尺寸需要调整下：

简介少了句号：

zombieJ · 2019-01-15T07:24:06Z

这个晚点合，等 Paragraph 好了用它代替 p。

Akatsukikikiki · 2019-01-15T07:30:32Z

padding 没有把 button 包进去：

afc163 · 2019-02-19T07:57:55Z

components/page-header/demo/actions.md

+  padding-bottom: 8px;
+  white-space: nowrap;
+  line-height: 20px;
+}


这些 css 多余了吧。

Description 直接用新的 Descriptions 吧，这里代码好冗余。

我想的是先把他弄出去，众测一波，不知道api 设计的合不合理

afc163 · 2019-02-19T08:06:24Z

预览链接在哪里。

chenshuai2144 · 2019-02-19T08:22:26Z

preview link

https://5c6bb981452bb3000cc7c50e--ant-design.netlify.com/

zombieJ · 2019-02-28T14:18:53Z

CI 修一下，准备合了

ant-design deleted a comment from codecov bot Dec 15, 2018

chenshuai2144 changed the title ~~new components PageHeader~~ [WIP] new components PageHeader Dec 15, 2018

ant-design deleted a comment from netlify bot Dec 15, 2018

ant-design deleted a comment from codecov bot Dec 15, 2018

afc163 reviewed Dec 17, 2018

View reviewed changes

afc163 reviewed Dec 21, 2018

View reviewed changes

yutingzhao1991 mentioned this pull request Dec 26, 2018

3.12.0 release prepare #13904

Closed

13 tasks

chenshuai2144 added 5 commits December 26, 2018 10:22

add api dock

f8cfe11

add a simple demo

4818d22

add content demos

0459305

fix style warning

b0c6a88

Replace content with children

adda0a3

chenshuai2144 force-pushed the page-header branch from 884cae4 to adda0a3 Compare December 26, 2018 02:22

add all demo

7c6e90e

afc163 reviewed Dec 26, 2018

View reviewed changes

chenshuai2144 added 2 commits December 26, 2018 11:04

add demo test

9f15d88

add backNode props

9f71421

chenshuai2144 added 3 commits January 12, 2019 13:23

newline character

be26ccc

new description

ef23de5

warm descriptive text

5fedc10

afc163 reviewed Jan 14, 2019

View reviewed changes

add dot

62cd65a

afc163 reviewed Jan 14, 2019

View reviewed changes

remove async

09e1e91

afc163 assigned zombieJ Jan 28, 2019

Merge branch 'feature' into page-header

9c2c646

zombieJ mentioned this pull request Feb 19, 2019

New Component: Typography #14250

Merged

13 tasks

chenshuai2144 added 4 commits February 19, 2019 13:54

Merge branch 'feature' into page-header

27c9743

feat: use Typography.Paragraph

74fea58

test: snapshots updated

6d8fde1

style: fix style lint

a145321

zombieJ previously approved these changes Feb 19, 2019

View reviewed changes

afc163 reviewed Feb 19, 2019

View reviewed changes

import typography style

521b5c3

chenshuai2144 dismissed zombieJ’s stale review via 521b5c3 February 19, 2019 08:08

ztplz approved these changes Feb 19, 2019

View reviewed changes

Merge branch 'feature' into page-header

aa51c49

Merge branch 'feature' into page-header

a0e7077

chenshuai2144 merged commit dee8f93 into feature Mar 2, 2019

chenshuai2144 deleted the page-header branch March 2, 2019 07:51

afc163 mentioned this pull request Mar 30, 2019

Update Card & PageHeader style #15755

Merged

13 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New Component PageHeader #13637

New Component PageHeader #13637

chenshuai2144 commented Dec 15, 2018 •

edited by afc163

chenshuai2144 commented Dec 15, 2018

codecov bot commented Dec 15, 2018

codecov bot commented Dec 16, 2018

codecov bot commented Dec 16, 2018 •

edited

zombieJ commented Dec 17, 2018 •

edited

yutingzhao1991 commented Dec 17, 2018

chenshuai2144 commented Dec 17, 2018

afc163 Dec 17, 2018 •

edited

afc163 Dec 17, 2018

chenshuai2144 Dec 18, 2018

afc163 commented Dec 18, 2018

chenshuai2144 commented Dec 18, 2018

zombieJ commented Dec 18, 2018

zombieJ commented Dec 18, 2018 •

edited

afc163 Dec 21, 2018

afc163 Dec 26, 2018

afc163 Jan 14, 2019

afc163 Jan 14, 2019

Akatsukikikiki commented Jan 15, 2019

zombieJ commented Jan 15, 2019

Akatsukikikiki commented Jan 15, 2019

afc163 Feb 19, 2019

afc163 Feb 19, 2019

chenshuai2144 Feb 19, 2019

afc163 commented Feb 19, 2019

chenshuai2144 commented Feb 19, 2019

zombieJ commented Feb 28, 2019

New Component PageHeader #13637

New Component PageHeader #13637

Conversation

chenshuai2144 commented Dec 15, 2018 • edited by afc163

New Component

Preview

Impact on users and possible risks

changelog

request a self-check list before merging

chenshuai2144 commented Dec 15, 2018

codecov bot commented Dec 15, 2018

Codecov Report

codecov bot commented Dec 16, 2018

Codecov Report

codecov bot commented Dec 16, 2018 • edited

Codecov Report

zombieJ commented Dec 17, 2018 • edited

yutingzhao1991 commented Dec 17, 2018

chenshuai2144 commented Dec 17, 2018

afc163 Dec 17, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

afc163 commented Dec 18, 2018

chenshuai2144 commented Dec 18, 2018

zombieJ commented Dec 18, 2018

zombieJ commented Dec 18, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Akatsukikikiki commented Jan 15, 2019

zombieJ commented Jan 15, 2019

Akatsukikikiki commented Jan 15, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

afc163 commented Feb 19, 2019

chenshuai2144 commented Feb 19, 2019

preview link

zombieJ commented Feb 28, 2019

chenshuai2144 commented Dec 15, 2018 •

edited by afc163

codecov bot commented Dec 16, 2018 •

edited

zombieJ commented Dec 17, 2018 •

edited

afc163 Dec 17, 2018 •

edited

zombieJ commented Dec 18, 2018 •

edited