feat(module:skeleton): add nzRound prop and skeleton-element image #5710

yangjunhan · 2020-08-25T02:08:36Z

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our guidelines: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md#commit
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[x] Documentation content changes
[ ] Application (the showcase website) / infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

Issue Number: N/A

Aim to sync with the latest Ant-design skeleton component. Ant-design relevant issues:

feat: Skeleton add round prop (feat: Skeleton add round prop ant-design/ant-design#24137)
feat: add Skeleton-Image (feat: add Skeleton-Image ant-design/ant-design#24805)

What is the new behavior?

Show paragraph and title radius when nzRound is true.

Add new nz-skeleton-element [nzType="image"].

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

codecov · 2020-08-25T02:16:33Z

Codecov Report

Merging #5710 into master will decrease coverage by 0.06%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##           master    #5710      +/-   ##
==========================================
- Coverage   90.09%   90.02%   -0.07%     
==========================================
  Files         455      455              
  Lines       13798    13847      +49     
  Branches     2183     2266      +83     
==========================================
+ Hits        12431    12466      +35     
- Misses        843      853      +10     
- Partials      524      528       +4

Impacted Files	Coverage Δ
components/skeleton/skeleton.module.ts	`100.00% <ø> (ø)`
components/skeleton/skeleton-element.component.ts	`94.11% <100.00%> (+0.36%)`	⬆️
components/skeleton/skeleton.component.ts	`100.00% <100.00%> (ø)`
components/tabs/tab-nav-operation.component.ts	`59.37% <0.00%> (-2.70%)`	⬇️
components/i18n/date-helper.service.ts	`85.00% <0.00%> (-2.50%)`	⬇️
components/core/util/text-measure.ts	`89.56% <0.00%> (-1.74%)`	⬇️
components/affix/affix.component.ts	`90.83% <0.00%> (-1.48%)`	⬇️
components/date-picker/date-picker.component.ts	`95.58% <0.00%> (-0.71%)`	⬇️
components/tabs/tab-nav-bar.component.ts	`81.62% <0.00%> (-0.71%)`	⬇️
components/tabs/tabset.component.ts	`86.20% <0.00%> (-0.35%)`	⬇️
... and 38 more

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 8415a70...525571b. Read the comment docs.

wenqi73 · 2020-08-26T08:33:44Z

components/skeleton/skeleton-element.component.ts

+})
+export class NzSkeletonElementImageComponent {
+  path: string =
+    'M984.615385 196.923077c0-43.323077-35.446154-78.769231-78.769231-78.769231H118.153846c-43.323077 0-78.769231 35.446154-78.769231 78.769231v630.153846c0 43.323077 35.446154 78.769231 78.769231 78.769231h787.692308c43.323077 0 78.769231-35.446154 78.769231-78.769231V196.923077zM779.815385 748.307692h-571.076923c-23.630769 0-37.415385-25.6-25.6-45.292307l173.292307-301.292308c7.876923-13.784615 25.6-13.784615 33.476923 0l104.369231 179.2c7.876923 11.815385 25.6 13.784615 33.476923 1.969231l84.676923-122.092308c7.876923-11.815385 25.6-11.815385 33.476923 0L801.476923 708.923077c11.815385 17.723077 0 39.384615-21.661538 39.384615zM728.615385 393.846154c-43.323077 0-78.769231-35.446154-78.769231-78.769231s35.446154-78.769231 78.769231-78.769231 78.769231 35.446154 78.76923 78.769231-35.446154 78.769231-78.76923 78.769231z';


两边的图不一样，检查下

wenqi73 · 2020-08-26T08:35:53Z

测试用例要加上

vthinkxie

element 选项应当合并

wenqi73 · 2020-09-03T12:50:35Z

components/skeleton/skeleton-element.component.ts

+    <span [class.ant-skeleton-image]="true">
+      <svg [class.ant-skeleton-image-svg]="true" viewBox="0 0 1098 1024" xmlns="http://www.w3.org/2000/svg">
+        <path [attr.d]="path" [class.ant-skeleton-image-path]="true" />
+      </svg>
+    </span>
+  `
+})
+export class NzSkeletonElementImageComponent {
+  path: string =
+    'M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z';


Suggested change

<span [class.ant-skeleton-image]="true">

<svg [class.ant-skeleton-image-svg]="true" viewBox="0 0 1098 1024" xmlns="http://www.w3.org/2000/svg">

<path [attr.d]="path" [class.ant-skeleton-image-path]="true" />

</svg>

</span>

`

})

export class NzSkeletonElementImageComponent {

path: string =

'M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z';

<span class="ant-skeleton-image">

<svg class="ant-skeleton-image-svg" viewBox="0 0 1098 1024" xmlns="http://www.w3.org/2000/svg">

<path d="M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z" class="ant-skeleton-image-path" />

</svg>

</span>

`

})

export class NzSkeletonElementImageComponent {

静态属性不用绑定

github-actions · 2020-09-10T07:41:06Z

😭 Deploy PR Preview aa2ea54 failed. Build logs

_{🤖 By surge-preview}

feat(module:skeleton): add nzRound prop and skeleton-element image

728092a

yangjunhan requested a review from wenqi73 as a code owner August 25, 2020 02:08

pr-triage bot added the PR: unreviewed label Aug 25, 2020

wenqi73 reviewed Aug 26, 2020

View reviewed changes

vthinkxie requested changes Aug 27, 2020

View reviewed changes

pr-triage bot added PR: reviewed-changes-requested and removed PR: unreviewed labels Aug 27, 2020

fix(module:skeleton): sync svg path and element demo and add test cases

161c5f6

pr-triage bot added PR: unreviewed and removed PR: reviewed-changes-requested labels Sep 2, 2020

wenqi73 requested changes Sep 3, 2020

View reviewed changes

pr-triage bot added PR: reviewed-changes-requested PR: unreviewed and removed PR: unreviewed PR: reviewed-changes-requested labels Sep 3, 2020

fix(module:skeleton): avoid static binding

525571b

yangjunhan force-pushed the update-skeleton-junhan branch from 7259f8d to 525571b Compare September 10, 2020 06:43

wenqi73 merged commit aa2ea54 into NG-ZORRO:master Sep 10, 2020

pr-triage bot added PR: merged and removed PR: unreviewed labels Sep 10, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(module:skeleton): add nzRound prop and skeleton-element image #5710

feat(module:skeleton): add nzRound prop and skeleton-element image #5710

yangjunhan commented Aug 25, 2020

codecov bot commented Aug 25, 2020 •

edited

wenqi73 Aug 26, 2020

wenqi73 commented Aug 26, 2020

vthinkxie left a comment

wenqi73 Sep 3, 2020

wenqi73 Sep 3, 2020

github-actions bot commented Sep 10, 2020 •

edited

Navigation Menu

feat(module:skeleton): add nzRound prop and skeleton-element image #5710

feat(module:skeleton): add nzRound prop and skeleton-element image #5710

Conversation

yangjunhan commented Aug 25, 2020

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Other information

codecov bot commented Aug 25, 2020 • edited

Codecov Report

wenqi73 Aug 26, 2020

Choose a reason for hiding this comment

wenqi73 commented Aug 26, 2020

vthinkxie left a comment

Choose a reason for hiding this comment

wenqi73 Sep 3, 2020

Choose a reason for hiding this comment

wenqi73 Sep 3, 2020

Choose a reason for hiding this comment

github-actions bot commented Sep 10, 2020 • edited

codecov bot commented Aug 25, 2020 •

edited

github-actions bot commented Sep 10, 2020 •

edited