Skip to content

Comments

feat: [v6] new component Masonry#52162

Merged
zombieJ merged 65 commits intoant-design:nextfrom
OysterD3:feat/masonry-v6
Mar 5, 2025
Merged

feat: [v6] new component Masonry#52162
zombieJ merged 65 commits intoant-design:nextfrom
OysterD3:feat/masonry-v6

Conversation

@OysterD3
Copy link
Contributor

中文版模板 / Chinese template

🤔 This is a ...

  • 🆕 New feature
  • 🐞 Bug fix
  • 📝 Site / documentation improvement
  • 📽️ Demo improvement
  • 💄 Component style improvement
  • 🤖 TypeScript definition improvement
  • 📦 Bundle size optimization
  • ⚡️ Performance optimization
  • ⭐️ Feature enhancement
  • 🌐 Internationalization
  • 🛠 Refactoring
  • 🎨 Code style optimization
  • ✅ Test Case
  • 🔀 Branch merge
  • ⏩ Workflow
  • ❓ Other (about what?)

🔗 Related Issues

  • Describe the source of related requirements, such as links to relevant issue discussions.
  • For example: close #xxxx, fix #xxxx

💡 Background and Solution

  • The specific problem to be addressed.
  • List the final API implementation and usage if needed.
  • If there are UI/interaction changes, consider providing screenshots or GIFs.

#51659

📝 Change Log

Language Changelog
🇺🇸 English Add new Masonry component
🇨🇳 Chinese 新增瀑布流布局

@bolt-new-by-stackblitz
Copy link

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@github-actions
Copy link
Contributor

github-actions bot commented Dec 28, 2024

👁 Visual Regression Report for PR #52162 Failed ❌

🎯 Target branch: next (02e8e22)
📖 View Full Report ↗︎
📖 Alternative Report ↗︎
📊 Summary: 🔄 3 changed

Expected (Branch next) Actual (Current PR) Diff
button-debug-icon.compact.png button-debug-icon.compact.png button-debug-icon.compact.png button-debug-icon.compact.png
button-debug-icon.dark.png button-debug-icon.dark.png button-debug-icon.dark.png button-debug-icon.dark.png
button-debug-icon.default.png button-debug-icon.default.png button-debug-icon.default.png button-debug-icon.default.png

Important

There are 3 diffs found in this PR: 🔄 3 changed.
Please check all items:

  • Visual diff is acceptable

@github-actions
Copy link
Contributor

github-actions bot commented Dec 28, 2024

Preview is ready

@petercat-assistant
Copy link

Walkthrough

This pull request introduces a new feature by adding a Masonry component to the Ant Design library. The Masonry component is designed to handle content with varying heights, providing a responsive layout that adapts to different screen sizes. It includes features such as customizable columns, gutters, and the ability to maintain aspect ratios.

Changes

Files Summary
components/index.ts Added exports for the new Masonry component and its props.
components/masonry/Masonry.tsx, components/masonry/MasonryItem.tsx Implemented the core Masonry component and its item sub-component.
components/masonry/tests/* Added unit tests and snapshots for the Masonry component.
components/masonry/demo/* Added demo files showcasing various use cases of the Masonry component.
components/masonry/index.en-US.md, components/masonry/index.zh-CN.md Added documentation for the Masonry component in English and Chinese.
components/masonry/interface.ts Defined TypeScript interfaces for Masonry component props.
components/masonry/style/index.ts Added styling for the Masonry component.
components/theme/interface/components.ts Updated component token map to include Masonry.

@OysterD3 OysterD3 mentioned this pull request Dec 28, 2024
16 tasks
@pkg-pr-new
Copy link

pkg-pr-new bot commented Dec 28, 2024

Open in Stackblitz

More templates

npm i https://pkg.pr.new/ant-design/ant-design/antd@52162

commit: fb1cadb

@codecov
Copy link

codecov bot commented Dec 28, 2024

Bundle Report

Changes will decrease total bundle size by 7.79MB (-66.6%) ⬇️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
antd.min-array-push 3.9MB -7.79MB (-66.6%) ⬇️

Affected Assets, Files, and Routes:

view changes for bundle: antd.min-array-push

Assets Changed:

Asset Name Size Change Total Size Change (%)
antd-with-locales.min.js (New) 2.14MB 2.14MB 100.0% 🚀
antd.min.js (New) 1.76MB 1.76MB 100.0% 🚀
antd-with-locales.js (Deleted) -6.15MB 0 bytes -100.0% 🗑️
antd.js (Deleted) -5.55MB 0 bytes -100.0% 🗑️

Files in antd-with-locales.min.js:

  • ./components/config-provider/context.ts → Total Size: 1.51kB

Files in antd.min.js:

  • ./components/config-provider/context.ts → Total Size: 1.51kB

@li-jia-nan li-jia-nan mentioned this pull request Dec 28, 2024
@codecov
Copy link

codecov bot commented Dec 28, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (209d116) to head (fb1cadb).
Report is 134 commits behind head on next.

Additional details and impacted files
@@            Coverage Diff             @@
##              next    #52162    +/-   ##
==========================================
  Coverage   100.00%   100.00%            
==========================================
  Files          766       772     +6     
  Lines        13782     13893   +111     
  Branches      3617      3643    +26     
==========================================
+ Hits         13782     13893   +111     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Co-authored-by: lijianan <[email protected]>
Signed-off-by: Oyster Lee <[email protected]>
Co-authored-by: thinkasany <[email protected]>
Signed-off-by: 二货爱吃白萝卜 <[email protected]>
li-jia-nan
li-jia-nan previously approved these changes Mar 2, 2025
@socket-security
Copy link

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package New capabilities Transitives Size Publisher
npm/@types/[email protected] None 0 4.58 kB types
npm/@types/[email protected] None 0 2.77 kB types
npm/@types/[email protected] None 0 6.62 kB types
npm/@types/[email protected] None 0 6.09 kB types
npm/@types/[email protected] None 0 9.68 kB types
npm/@types/[email protected] None 0 78.8 kB types
npm/@types/[email protected] None 0 1.12 MB types
npm/@types/[email protected] None 0 21.9 kB types
npm/@types/[email protected] None 0 868 kB types
npm/@types/[email protected] None 0 6.27 kB types
npm/@types/[email protected] None 0 2.31 MB types
npm/@types/[email protected] None 0 4.83 kB types
npm/@types/[email protected] None 0 7.87 kB types
npm/@types/[email protected] None 0 5.47 kB types
npm/@types/[email protected] None 0 19.4 kB types
npm/@types/[email protected] None 0 6.51 kB types
npm/@types/[email protected] None 0 4.36 kB types
npm/@types/[email protected] None 0 20.8 kB types
npm/@types/[email protected] None 0 5.75 kB types
npm/@types/[email protected] None 0 7.36 kB types
npm/@types/[email protected] None 0 801 kB types
npm/@types/[email protected] None 0 23.3 kB types
npm/@types/[email protected] None 0 8.22 kB types
npm/@types/[email protected] None 0 30.8 kB types
npm/@types/[email protected] None 0 6.48 kB types
npm/@types/[email protected] None 0 2.71 kB types
npm/[email protected] filesystem 0 121 kB cthackers
npm/[email protected] filesystem 0 2.74 MB fengmk2
npm/[email protected] None 0 47.9 kB nanxiaobei
npm/[email protected] environment 0 191 kB arvinxx
npm/[email protected] None 0 1.21 MB madccc
npm/[email protected] None 0 0 B
npm/[email protected] None 0 44.2 kB sindresorhus
npm/[email protected] None 0 1.25 MB feedic
npm/[email protected] None 0 10.5 kB theron
npm/[email protected] None 0 62.2 kB andidittrich
npm/[email protected] environment 0 29.1 kB kentcdodds
npm/[email protected] network 0 93.3 kB lquixada
npm/[email protected] filesystem 0 587 kB kienht.dev
npm/[email protected] filesystem 0 8.91 kB benjycui
npm/[email protected] environment, filesystem 0 75.8 kB motdotla
npm/[email protected] None 0 38.7 kB wxh16144
npm/[email protected] environment, eval, filesystem 0 2.92 MB yifankakaxi
npm/[email protected] None 0 9.81 kB sindresorhus
npm/[email protected] filesystem +1 202 kB amilajack
npm/[email protected] None 0 350 kB aaronabramov, jeysal, jsonp, ...6 more
npm/[email protected] None 0 753 kB ljharb
npm/[email protected] None 0 278 kB acdlite, brianvaughn, eps1lon, ...4 more
npm/[email protected] None 0 18.2 kB arnaud-barre
npm/[email protected] None +1 65.1 kB
npm/[email protected] filesystem 0 98.4 kB mrmlnc
npm/[email protected] None 0 55.3 kB ryanzim
npm/[email protected] filesystem, shell 0 39.8 kB tschaub
npm/[email protected] None 0 475 kB isaacs
npm/[email protected] network 0 1.87 MB arvinxx
npm/[email protected] environment, filesystem, network 0 124 kB thornjad
npm/[email protected] None 0 4.04 kB typicode
npm/[email protected] None 0 8.38 kB keyanzhang
npm/[email protected] environment 0 627 kB mweststrate
npm/[email protected] Transitive: environment +1 32.9 kB sibiraj-s
npm/[email protected] Transitive: network +1 169 kB mattandrews
npm/[email protected] None +1 2.81 MB nickcolley
npm/[email protected] None 0 112 kB atool
npm/[email protected] None 0 9.21 kB simenb
npm/[email protected] unsafe 0 9.37 kB simenb
npm/[email protected] environment, filesystem, shell 0 84.9 kB amexopensource
npm/[email protected] None 0 3.72 kB neoziro
npm/[email protected] None 0 5.01 kB simenb
npm/[email protected] None 0 1.25 MB timmywil
npm/[email protected] None 0 3.11 MB domenic, joris-van-der-wel, sebmaster, ...3 more
npm/[email protected] None 0 21.2 kB benjycui
npm/[email protected] None 0 28.3 kB benjycui
npm/[email protected] Transitive: environment +1 329 kB okonet

View full report↗︎

@zombieJ zombieJ merged commit 3fa9a51 into ant-design:next Mar 5, 2025
38 checks passed
@@ -0,0 +1,71 @@
---
category: Components
subtitle: 瀑布流布局
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

- 瀑布流布局
+ 瀑布流

@@ -0,0 +1,7 @@
## zh-CN

随加载动态调整位置。
Copy link
Member

@afc163 afc163 Mar 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个 demo 不太看得出来要展示什么效果。

图片

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

9 participants