feat: add Skeleton-Image #24805

fireairforce · 2020-06-07T10:59:21Z

🤔 This is a ...

🔗 Related issue link

#20574

💡 Background and solution

📝 Changelog

Language	Changelog
🇺🇸 English	add Skeleton.Image
🇨🇳 Chinese	新增 Skeleton.Image 组件

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

Doc is updated/provided or not needed
Demo is updated/provided or not needed
TypeScript definition is updated/provided or not needed
Changelog is provided or not needed

View rendered components/skeleton/demo/element.md

fireairforce · 2020-06-07T10:59:46Z

@Rustin-Liu Welcome to review~

components/skeleton/Skeleton.tsx

ant-design-bot · 2020-06-07T11:02:24Z

ant-design-bot · 2020-06-07T11:02:29Z

codesandbox-ci · 2020-06-07T11:15:39Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 1c42e0a250f5d5902fc79f3a8d504af9d6fae41e:

Sandbox	Source
antd reproduction template	Configuration

codesandbox-ci · 2020-06-07T11:19:12Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 0000d1a:

Sandbox	Source
antd reproduction template	Configuration

codecov · 2020-06-07T11:27:14Z

Codecov Report

Merging #24805 into feature will increase coverage by 0.00%.
The diff coverage is 100.00%.

@@           Coverage Diff            @@
##           feature   #24805   +/-   ##
========================================
  Coverage    99.33%   99.33%           
========================================
  Files          369      370    +1     
  Lines         7367     7376    +9     
  Branches      2061     2061           
========================================
+ Hits          7318     7327    +9     
  Misses          49       49

Impacted Files	Coverage Δ
components/skeleton/Avatar.tsx	`100.00% <ø> (ø)`
components/skeleton/Element.tsx	`100.00% <ø> (ø)`
components/skeleton/Image.tsx	`100.00% <100.00%> (ø)`
components/skeleton/Skeleton.tsx	`100.00% <100.00%> (ø)`

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 0879bd5...0000d1a. Read the comment docs.

fireairforce · 2020-06-07T23:58:07Z

ping ~

xrkffgg · 2020-06-08T01:05:26Z

效果图截一个放到 PR 里，来瞅瞅

fireairforce · 2020-06-08T02:46:11Z

@xrkffgg

xrkffgg · 2020-06-08T03:03:07Z

个人感觉有点大

fireairforce · 2020-06-08T03:13:02Z

components/style/themes/compact.less

+@image-size-sm: 72px;
+@image-font-size-base: 48px;
+@image-font-size-lg: 72px;
+@image-font-size-sm: 42px;


这个尺寸在Avatar的基础上放大了三倍

搞个 2 倍的，对比看下效果~

fireairforce · 2020-06-08T03:20:03Z

两倍效果~

xrkffgg · 2020-06-08T03:22:33Z

其实我的想法是，灰色背景不变，中间的图标可以小点。😂

fireairforce · 2020-06-08T03:25:02Z

这个灰色和图标都是svg里面的。。好像会等比缩😅

xrkffgg · 2020-06-08T03:30:51Z

类似于这种效果

components/style/themes/default.less

fireairforce · 2020-06-08T03:48:33Z

类似于这种效果

这个感觉不好看>_<

fireairforce · 2020-06-08T03:50:49Z

#20574 (comment) 这里是参考之前afc163大佬给的原型图。。。

xrkffgg · 2020-06-08T03:55:44Z

忽略那个图标。我感觉中间那个图的尺寸应该是有限制的。全铺的话，如果设置了大尺寸，那个就就会很大。

Rustin170506 · 2020-06-08T03:56:29Z

这个感觉不好看>_<

+1，感觉一般这种用在图裂的时候，感觉目前的这个好点。但是我觉得这个组件是不是需要size这种props 不会有固定的大小？

fireairforce · 2020-06-08T04:01:02Z

忽略那个图标。我感觉中间那个图的尺寸应该是有限制的。全铺的话，如果设置了大尺寸，那个就就会很大。

oo，大概就是中间 logo 部分限制，然后扩大 size 或者宽高的时候主要对灰色进行一个拓展？

fireairforce · 2020-06-08T04:04:08Z

我之前那种情况，如果用户去扩大宽高会是这样的效果：

xrkffgg · 2020-06-08T04:35:01Z

我之前那种情况，如果用户去扩大宽高会是这样的效果：

应该有一个 max-width 来设置中间的图片

fireairforce · 2020-06-08T04:37:11Z

我试一试~

zombieJ · 2020-06-12T02:25:11Z

components/skeleton/Image.tsx

+            viewBox="0 0 1098 1024"
+            xmlns="http://www.w3.org/2000/svg"
+            className={`${prefixCls}-image-svg`}
+            style={{ ...style }}


style 应该是上一层元素

另外不用 ...

Need work

fireairforce · 2020-06-12T02:52:25Z

done了

Rustin170506

LGTM

Rustin170506 · 2020-06-12T14:55:54Z

@fireairforce Awesome work. Thanks!

* feat: add successColor for Progress (#24655) * feat: add successColor for Progress * feat: update * fix: update test * remove snap * feat: add test case * refactor success * feat: adjust styyle * feat: add DevWarning * feat: Support rowSelection.dirty (#24718) * feat: Support rowSelection.dirty * rename to reserveKeys * preserveKeys will keep record also * to preserveSelectedRowKeys * feat: add ghost prop for collapse (#24734) * feat: add ghost prop for collapse * doc: version of collapse's ghost prop * refactor: make ghost collapse's less code to a nested style * chore: remove redundant codes in ghost collapse's less & doc * doc: add a background wrapper for ghost collapse demo * doc: dark-theme wrapper bg-color for ghost collapse demo * test: update snapshot of ghost collapse * doc: use softer bg-color on ghost collapse demo * doc: remove disabled panel in ghost collapse demo * feat: form instance support getFieldInstance (#24711) * support getFieldInstance * update doc * fix lint * move func * move into hooks * update ref logic * fix lint * rm only * fix docs * feat: dropdown support arrow (#23869) * feat: dropdown support arrow prop close #22758 * test: update snapshot * fix: fix dropdown cls names * test: update snapshot * test: update snapshot * doc: update demo * test: update demo snapshot * demo * fix: snapshot * chore: change the style of ghost collapse & demo modified (#24762) * refactor: reduce content padding in ghost collapse * doc: remove the wrapper outside ghost collapse Designer want the demo differs from other demos * refactor: remove redundant .less code in collapse * feat: cascader dropdown-render prop (#24812) * feat: cascader dropdown-render prop * fix: update Cascader dropdownRender type annotation * fix: set rc-cascader semver from ^ to ~ * docs: fix coding style in cascader/custom-dropdown * feat: 🆕 support Drawer closeIcon (#24842) * feat: 🆕 support Drawer closeIcon close #19283 close #19153 * add test case * update docs * feat: 🆕 Cascader expandIcon (#24865) * feat: cascader expandIcon * fix: snap * refactor: reduce CSS size (#24846) * refactor: reduce button css size * refactor: remove redundant button .less code * feat: add Table onChange an action param (#24697) * Working on tests * created TableAction type * changed TableActions to tuple * removed chinese documentation line * refactor TableActions * fix documentation * Moved action into extra param * minor doc change * feat: add closeIcon customize tag close (#24885) * feat: add closeIcon customize tag close * docs fix * update snap * fix: css name * update snapshot * snapshot * feat: add radio `optionType` api to set radio option type (#24809) * feat: radio component * docs: update md * fix: snap * test components * fix: use optionType * fix name * add warning * fix * feat: expand rate character (#24903) * feat: expand rate character * fix: demo * fix: snap * Update components/rate/index.zh-CN.md Co-authored-by: 偏右 <afc163@gmail.com> * fix Co-authored-by: 偏右 <afc163@gmail.com> * Refactor demo code box actions (#24887) * refactor: refine the styling of actions part of demo code-box * fix: lint style * refactor: move Result children to end (#24945) * feat: remove content max-width on dot-step (#24907) * feat: add Skeleton-Image (#24805) * feat: add Skeleton-Image * feat: add docs * fix: adjust skeleton * feat: adjust Image Component * feat: rebase * feat: adjust style * fix: lint * feat: remove size * feat: delete md * feat: fix style * ✨ feat: Mentions support autoSize (#24961) close #17746 * chore: replace textarea with rc-textarea (#24966) * feat: update pagination@2.3.0 support onChange called when pageSize change (#24964) * feat: update pagination@2.5.0 and add test case to relative component * fix: lint * delete * feat: add test case for pagination * adjust test case * feat: Implement centered prop in Tabs (#24958) * Implement centered in Tabs along with its tests and docs * Fix build error * Add Chinese translations and remove test case Co-authored-by: Ashkan Pourghasem <ashkan.pourghasem@gmail.com> * feat: Add modal style parameter (#24773) * add some paramters in default.less * Update components/style/themes/default.less Co-authored-by: Amumu <yoyo837@hotmail.com> * change parameter in compact.less Co-authored-by: Crystal Gao <jinggao@ebay.com> Co-authored-by: Amumu <yoyo837@hotmail.com> * feat: export Tabs addIcon (#25006) * feat: export Tabs addIcon * update snapshot * feat: showNow on timepicker and datetimepicker (#25032) * feat: update rc-picker@1.7.1 and fix icons of month and quarter picker in DatePicker Component (#25035) * feat: update rc-picker@1.7.1 * delete * add * feat: expand rate support props (#24993) * docs: 📝 Add Form.Item hidden in doc (#25108) close #25101 * fix: ⌨️ Improve Pagination accessibility issue (#25119) * ⌨️ Improve Pagination a11y by fixing a W3C error react-component/pagination#280 * update snapshot * 🆙 rc-pagination to 2.4.1 * feat: support triggerSubMenuAction for <Menu /> (#25127) * feat(menu): add triggerSubMenuAction for Menu * feat(menu): test cases * chore: Adjust picker logic (#25135) * chore: update rc-picker 1.10.0 (#25174) * feat: table row check strictly (#24931) * feat: add checkStrictly on Table.rowSelection * fix: LGTM warnings * test: table rowSelection.checkStrictly * test: add cov [wip] * refactor: tree.rowSelection.checkStrictly [wip] * test: table.rowSelection.checkStrictly basic case * feat: support rowKey on checkStrictly table * feat: Table checkStrictly support getCheckboxProps * docs: Table checkStrictly * chore: typo * chore: remove useless comment * chore: update snapshot * chore: update snapshot * fix: fire selectAll on selection dropdown menu & changeRows incorrect in selectAll callback * docs: typo * chore * chore * fix: expand buttons of leaf rows in tree data are not hidden * feat: Table warning about rowKey index parameter * perf: only generate keyEntities when not checkStrictly * refactor: remove useless parseCheckedKeys * refactor: get derived selected & half selected keys from selectedRowKeys * chore: remove env condition stmt * chore: revert index usage & code formatting * chore: rerun ci * docs: table tree-data checkstrictly * test: update snapshots * refactor: use useMergedState hook * chore: rerun ci * chore: rerun ci 2 * chore: revert selection select all behavior * refactor: refactor code based on feature * chore: revert table code format * chore: revert table code format * fix: useMemo deps * fix: useMemo deps * fix: useMemo deps * feat: support preserve (#25186) * docs: add responsibly order for Col (#25139) * feat: add type * feat: add responsibly order cols * feat: add docs * feat: add test case * fix test Co-authored-by: 二货机器人 <smith3816@gmail.com> Co-authored-by: 偏右 <afc163@gmail.com> Co-authored-by: zoomdong <1344492820@qq.com> Co-authored-by: 07akioni <07akioni2@gmail.com> Co-authored-by: wendellhu <wendellhu95@gmail.com> Co-authored-by: xrkffgg <xrkffgg@gmail.com> Co-authored-by: Neto Braghetto <netow93@gmail.com> Co-authored-by: Kermit Xuan <kermitlx@outlook.com> Co-authored-by: Ashkan Pourghasem <64011067+ashkan-pm@users.noreply.github.com> Co-authored-by: Ashkan Pourghasem <ashkan.pourghasem@gmail.com> Co-authored-by: hicrystal <295247343@qq.com> Co-authored-by: Crystal Gao <jinggao@ebay.com> Co-authored-by: Amumu <yoyo837@hotmail.com> Co-authored-by: Li Ming <armyiljfe@gmail.com>

pr-triage bot added the PR: unreviewed label Jun 7, 2020

Rustin170506 suggested changes Jun 7, 2020

View reviewed changes

components/skeleton/Skeleton.tsx Show resolved Hide resolved

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

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

fireairforce commented Jun 8, 2020

View reviewed changes

xrkffgg reviewed Jun 8, 2020

View reviewed changes

components/style/themes/default.less Outdated Show resolved Hide resolved

zombieJ reviewed Jun 12, 2020

View reviewed changes

Rustin170506 self-requested a review June 12, 2020 02:29

pr-triage bot added PR: unreviewed and removed PR: reviewed-approved labels Jun 12, 2020

Rustin170506 approved these changes Jun 12, 2020

View reviewed changes

pr-triage bot added PR: reviewed-approved and removed PR: unreviewed labels Jun 12, 2020

fireairforce added 10 commits June 12, 2020 15:55

feat: add Skeleton-Image

d95508a

feat: add docs

e01ac1a

fix: adjust skeleton

652d9f5

feat: adjust Image Component

dd24334

feat: rebase

9884955

feat: adjust style

b439900

fix: lint

9f0ca08

feat: remove size

d417d37

feat: delete md

0ed3472

feat: fix style

0000d1a

fireairforce force-pushed the skeleton-Image branch from 88b7ad3 to 0000d1a Compare June 12, 2020 07:56

pr-triage bot added PR: unreviewed and removed PR: reviewed-approved labels Jun 12, 2020

zombieJ merged commit abebd55 into ant-design:feature Jun 12, 2020

pr-triage bot added PR: merged and removed PR: unreviewed labels Jun 12, 2020

fireairforce deleted the skeleton-Image branch June 13, 2020 07:08

chenshuai2144 mentioned this pull request Jun 29, 2020

docs: add 4.4.0 changelog #25242

Merged

13 tasks

yangjunhan mentioned this pull request Aug 25, 2020

feat(module:skeleton): add nzRound prop and skeleton-element image NG-ZORRO/ng-zorro-antd#5710

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add Skeleton-Image #24805

feat: add Skeleton-Image #24805

fireairforce commented Jun 7, 2020 •

edited

Loading

fireairforce commented Jun 7, 2020

ant-design-bot commented Jun 7, 2020 •

edited

Loading

ant-design-bot commented Jun 7, 2020 •

edited

Loading

codesandbox-ci bot commented Jun 7, 2020

codesandbox-ci bot commented Jun 7, 2020 •

edited

Loading

codecov bot commented Jun 7, 2020 •

edited

Loading

fireairforce commented Jun 7, 2020

xrkffgg commented Jun 8, 2020

fireairforce commented Jun 8, 2020 •

edited

Loading

xrkffgg commented Jun 8, 2020

fireairforce Jun 8, 2020

xrkffgg Jun 8, 2020

fireairforce commented Jun 8, 2020

xrkffgg commented Jun 8, 2020

fireairforce commented Jun 8, 2020

xrkffgg commented Jun 8, 2020

fireairforce commented Jun 8, 2020

fireairforce commented Jun 8, 2020

xrkffgg commented Jun 8, 2020

Rustin170506 commented Jun 8, 2020

fireairforce commented Jun 8, 2020 •

edited

Loading

fireairforce commented Jun 8, 2020

xrkffgg commented Jun 8, 2020

fireairforce commented Jun 8, 2020

zombieJ Jun 12, 2020

zombieJ Jun 12, 2020

fireairforce Jun 12, 2020

fireairforce commented Jun 12, 2020

Rustin170506 left a comment

Rustin170506 commented Jun 12, 2020

feat: add Skeleton-Image #24805

feat: add Skeleton-Image #24805

Conversation

fireairforce commented Jun 7, 2020 • edited Loading

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

📝 Changelog

☑️ Self Check before Merge

fireairforce commented Jun 7, 2020

ant-design-bot commented Jun 7, 2020 • edited Loading

ant-design-bot commented Jun 7, 2020 • edited Loading

codesandbox-ci bot commented Jun 7, 2020

codesandbox-ci bot commented Jun 7, 2020 • edited Loading

codecov bot commented Jun 7, 2020 • edited Loading

Codecov Report

fireairforce commented Jun 7, 2020

xrkffgg commented Jun 8, 2020

fireairforce commented Jun 8, 2020 • edited Loading

xrkffgg commented Jun 8, 2020

fireairforce Jun 8, 2020

Choose a reason for hiding this comment

xrkffgg Jun 8, 2020

Choose a reason for hiding this comment

fireairforce commented Jun 8, 2020

xrkffgg commented Jun 8, 2020

fireairforce commented Jun 8, 2020

xrkffgg commented Jun 8, 2020

fireairforce commented Jun 8, 2020

fireairforce commented Jun 8, 2020

xrkffgg commented Jun 8, 2020

Rustin170506 commented Jun 8, 2020

fireairforce commented Jun 8, 2020 • edited Loading

fireairforce commented Jun 8, 2020

xrkffgg commented Jun 8, 2020

fireairforce commented Jun 8, 2020

zombieJ Jun 12, 2020

Choose a reason for hiding this comment

zombieJ Jun 12, 2020

Choose a reason for hiding this comment

fireairforce Jun 12, 2020

Choose a reason for hiding this comment

fireairforce commented Jun 12, 2020

Rustin170506 left a comment

Choose a reason for hiding this comment

Rustin170506 commented Jun 12, 2020

fireairforce commented Jun 7, 2020 •

edited

Loading

ant-design-bot commented Jun 7, 2020 •

edited

Loading

ant-design-bot commented Jun 7, 2020 •

edited

Loading

codesandbox-ci bot commented Jun 7, 2020 •

edited

Loading

codecov bot commented Jun 7, 2020 •

edited

Loading

fireairforce commented Jun 8, 2020 •

edited

Loading

fireairforce commented Jun 8, 2020 •

edited

Loading