feat: [v6] new component Masonry #52162

OysterD3 · 2024-12-28T14:37:06Z

🤔 This is a ...

🔗 Related Issues

Describe the source of related requirements, such as links to relevant issue discussions.

For example: close #xxxx, fix #xxxx

close Masonary Component Required #48842
close New Component Masonry #40910

💡 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

Read Keep a Changelog like a cat tracks a laser pointer.

Describe the impact of the changes on developers, not the solution approach.

Reference: https://ant.design/changelog

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

bolt-new-by-stackblitz · 2024-12-28T14:37:09Z

Run & review this pull request in StackBlitz Codeflow.

github-actions · 2024-12-28T14:37:18Z

👁 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.dark.png	button-debug-icon.dark.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 · 2024-12-28T14:37:18Z

petercat-assistant · 2024-12-28T14:37:23Z

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.

components/masonry/Masonry.tsx

pkg-pr-new · 2024-12-28T14:40:25Z

Open in Stackblitz

More templates

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

commit: fb1cadb

codecov · 2024-12-28T14:41:49Z

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

codecov · 2024-12-28T14:48:25Z

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.

components/masonry/Masonry.tsx

Co-authored-by: lijianan <574980606@qq.com> Signed-off-by: Oyster Lee <oysterd3@gmail.com>

components/masonry/Masonry.tsx

Co-authored-by: thinkasany <480968828@qq.com> Signed-off-by: 二货爱吃白萝卜 <smith3816@gmail.com>

components/masonry/index.zh-CN.md

socket-security · 2025-03-05T08:52:05Z

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

Package	New capabilities	Transitives	Size	Publisher
npm/@types/http-server@0.12.4	None	`0`	4.58 kB	types
npm/@types/isomorphic-fetch@0.0.39	None	`0`	2.77 kB	types
npm/@types/jest-axe@3.5.9	None	`0`	6.62 kB	types
npm/@types/jest-environment-puppeteer@5.0.6	None	`0`	6.09 kB	types
npm/@types/jest-image-snapshot@6.4.0	None	`0`	9.68 kB	types
npm/@types/jest@29.5.14	None	`0`	78.8 kB	types
npm/@types/jquery@3.5.32	None	`0`	1.12 MB	types
npm/@types/jsdom@21.1.7	None	`0`	21.9 kB	types
npm/@types/lodash@4.17.16	None	`0`	868 kB	types
npm/@types/minimist@1.2.5	None	`0`	6.27 kB	types
npm/@types/node@22.13.9	None	`0`	2.31 MB	types
npm/@types/nprogress@0.2.3	None	`0`	4.83 kB	types
npm/@types/pixelmatch@5.2.6	None	`0`	7.87 kB	types
npm/@types/pngjs@6.0.5	None	`0`	5.47 kB	types
npm/@types/prismjs@1.26.5	None	`0`	19.4 kB	types
npm/@types/progress@2.0.7	None	`0`	6.51 kB	types
npm/@types/react-copy-to-clipboard@5.0.7	None	`0`	4.36 kB	types
npm/@types/react-dom@19.0.4	None	`0`	20.8 kB	types
npm/@types/react-highlight-words@0.20.0	None	`0`	5.75 kB	types
npm/@types/react-resizable@3.0.8	None	`0`	7.36 kB	types
npm/@types/react@19.0.10	None	`0`	801 kB	types
npm/@types/semver@7.5.8	None	`0`	23.3 kB	types
npm/@types/spinnies@0.5.3	None	`0`	8.22 kB	types
npm/@types/tar@6.1.13	None	`0`	30.8 kB	types
npm/@types/throttle-debounce@5.0.2	None	`0`	6.48 kB	types
npm/@types/warning@3.0.3	None	`0`	2.71 kB	types
npm/adm-zip@0.5.16	filesystem	`0`	121 kB	cthackers
npm/ali-oss@6.22.0	filesystem	`0`	2.74 MB	fengmk2
npm/antd-img-crop@4.24.0	None	`0`	47.9 kB	nanxiaobei
npm/antd-style@3.7.1	environment	`0`	191 kB	arvinxx
npm/antd-token-previewer@3.0.0-alpha.0	None	`0`	1.21 MB	madccc
npm/axios@1.8.1	None	`0`	0 B
npm/chalk@5.4.1	None	`0`	44.2 kB	sindresorhus
npm/cheerio@1.0.0	None	`0`	1.25 MB	feedic
npm/circular-dependency-plugin@5.2.2	None	`0`	10.5 kB	theron
npm/cli-progress@3.12.0	None	`0`	62.2 kB	andidittrich
npm/cross-env@7.0.3	environment	`0`	29.1 kB	kentcdodds
npm/cross-fetch@4.1.0	network	`0`	93.3 kB	lquixada
npm/cypress-image-diff-html-report@2.2.0	filesystem	`0`	587 kB	kienht.dev
npm/dekko@0.2.1	filesystem	`0`	8.91 kB	benjycui
npm/dotenv@16.4.7	environment, filesystem	`0`	75.8 kB	motdotla
npm/dumi-plugin-color-chunk@1.1.2	None	`0`	38.7 kB	wxh16144
npm/dumi@2.4.18	environment, eval, filesystem	`0`	2.92 MB	yifankakaxi
npm/env-paths@3.0.0	None	`0`	9.81 kB	sindresorhus
npm/eslint-plugin-compat@6.0.2	filesystem	`+1`	202 kB	amilajack
npm/eslint-plugin-jest@28.11.0	None	`0`	350 kB	aaronabramov, jeysal, jsonp, ...6 more
npm/eslint-plugin-jsx-a11y@6.10.2	None	`0`	753 kB	ljharb
npm/eslint-plugin-react-hooks@5.2.0	None	`0`	278 kB	acdlite, brianvaughn, eps1lon, ...4 more
npm/eslint-plugin-react-refresh@0.4.19	None	`0`	18.2 kB	arnaud-barre
npm/eslint@9.21.0	None	`+1`	65.1 kB
npm/fast-glob@3.3.3	filesystem	`0`	98.4 kB	mrmlnc
npm/fs-extra@11.3.0	None	`0`	55.3 kB	ryanzim
npm/gh-pages@6.3.0	filesystem, shell	`0`	39.8 kB	tschaub
npm/glob@11.0.1	None	`0`	475 kB	isaacs
npm/html2sketch@1.0.2	network	`0`	1.87 MB	arvinxx
npm/http-server@14.1.1	environment, filesystem, network	`0`	124 kB	thornjad
npm/husky@9.1.7	None	`0`	4.04 kB	typicode
npm/identity-obj-proxy@3.0.0	None	`0`	8.38 kB	keyanzhang
npm/immer@10.1.1	environment	`0`	627 kB	mweststrate
npm/is-ci@4.1.0	Transitive: environment	`+1`	32.9 kB	sibiraj-s
npm/isomorphic-fetch@3.0.0	Transitive: network	`+1`	169 kB	mattandrews
npm/jest-axe@10.0.0	None	`+1`	2.81 MB	nickcolley
npm/jest-canvas-mock@2.5.2	None	`0`	112 kB	atool
npm/jest-environment-jsdom@29.7.0	None	`0`	9.21 kB	simenb
npm/jest-environment-node@29.7.0	unsafe	`0`	9.37 kB	simenb
npm/jest-image-snapshot@6.4.0	environment, filesystem, shell	`0`	84.9 kB	amexopensource
npm/jest-puppeteer@11.0.0	None	`0`	3.72 kB	neoziro
npm/jest@29.7.0	None	`0`	5.01 kB	simenb
npm/jquery@3.7.1	None	`0`	1.25 MB	timmywil
npm/jsdom@26.0.0	None	`0`	3.11 MB	domenic, joris-van-der-wel, sebmaster, ...3 more
npm/jsonml-to-react-element@1.1.11	None	`0`	21.2 kB	benjycui
npm/jsonml.js@0.1.0	None	`0`	28.3 kB	benjycui
npm/lint-staged@15.4.3	Transitive: environment	`+1`	329 kB	okonet

View full report↗︎

afc163 · 2025-03-05T14:00:25Z

components/masonry/index.zh-CN.md

@@ -0,0 +1,71 @@
+---
+category: Components
+subtitle: 瀑布流布局


- 瀑布流布局 + 瀑布流

afc163 · 2025-03-05T14:01:46Z

components/masonry/demo/image.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+随加载动态调整位置。


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

OysterD3 added 18 commits December 28, 2024 22:25

feat(masonry): new component

9de5cab

refactor(masonry): housekeeping

f40e934

refactor(masonry): update props and use transform

ecd1eb2

refactor(masonry): update calculation logic

4f6c4b2

refactor(masonry): rename file and add keepAspectRatio props

525c22c

refactor(masonry): rename file

220be15

refactor(masonry): rename file

51cb328

refactor(masonry): rename file

deddea6

chore(masonry): update docs

038229d

refactor(masonry): change to transform style

bf431c3

feat(masonry): update demo and test

a68b5b0

chore(masonry): escape brackets

8af271a

test(masonry): update snapshots

0aad062

fix(masonry): handle rtl

8636f98

chore(masonry): update snapshots

493a6bd

refactor(masonry): remove redundant condition

c2c4088

refactor(masonry): update dependencies

7329b1b

refactor(masonry): use token in transition

5b8fc84

petercat-assistant bot reviewed Dec 28, 2024

View reviewed changes

components/masonry/Masonry.tsx Outdated Show resolved Hide resolved

OysterD3 mentioned this pull request Dec 28, 2024

feat: [v6] new component Masonry #51705

Closed

16 tasks

li-jia-nan mentioned this pull request Dec 28, 2024

Ant Design v6 tasks #52115

Open

li-jia-nan reviewed Dec 30, 2024

View reviewed changes

components/masonry/Masonry.tsx Outdated Show resolved Hide resolved

refactor: add scope

348060a

Co-authored-by: lijianan <574980606@qq.com> Signed-off-by: Oyster Lee <oysterd3@gmail.com>

zombieJ added 5 commits February 26, 2025 11:27

Merge remote-tracking branch 'origin/next' into pr/OysterD3/52162

3577f7b

docs: update docs

d2ee9ec

docs: add SemanticPreview

2da1885

chore: adjust calc logic

28f4048

docs: add more info

f80e8cd

thinkasany reviewed Feb 26, 2025

View reviewed changes

components/masonry/Masonry.tsx Outdated Show resolved Hide resolved

zombieJ and others added 8 commits February 26, 2025 16:42

test: add test case

2d388e2

docs: fix lint

d7cceb9

test: update snapshot

654833f

Merge remote-tracking branch 'origin/next' into pr/OysterD3/52162

72ad9dd

Merge remote-tracking branch 'origin/next' into pr/OysterD3/52162

b12aba7

Merge branch 'next' into feat/masonry-v6

5121e94

test: update snapshot

9eec1f4

Merge remote-tracking branch 'origin/next' into pr/OysterD3/52162

d0f256c

thinkasany reviewed Feb 28, 2025

View reviewed changes

components/masonry/Masonry.tsx Outdated Show resolved Hide resolved

Update components/masonry/Masonry.tsx

df3757b

Co-authored-by: thinkasany <480968828@qq.com> Signed-off-by: 二货爱吃白萝卜 <smith3816@gmail.com>

li-jia-nan previously approved these changes Mar 2, 2025

View reviewed changes

afc163 reviewed Mar 3, 2025

View reviewed changes

components/masonry/index.zh-CN.md Outdated Show resolved Hide resolved

chore: rename

67d3a98

zombieJ dismissed li-jia-nan’s stale review via 67d3a98 March 3, 2025 03:11

zombieJ and others added 5 commits March 3, 2025 15:59

Merge remote-tracking branch 'origin/next' into pr/OysterD3/52162

999ccf7

Merge remote-tracking branch 'origin/next' into pr/OysterD3/52162

62b928b

Merge remote-tracking branch 'origin/next' into pr/OysterD3/52162

9d62cb5

chore: fix lint

7412793

Merge branch 'next' into feat/masonry-v6

fb1cadb

zombieJ approved these changes Mar 5, 2025

View reviewed changes

zombieJ merged commit 3fa9a51 into ant-design:next Mar 5, 2025
38 checks passed

afc163 reviewed Mar 5, 2025

View reviewed changes

components/masonry/index.zh-CN.md

@@ -0,0 +1,71 @@

---

category: Components

subtitle: 瀑布流布局

Copy link

Member

afc163 Mar 5, 2025

Choose a reason for hiding this comment

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

- 瀑布流布局 + 瀑布流

afc163 reviewed Mar 5, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat: [v6] new component Masonry #52162

feat: [v6] new component Masonry #52162

Uh oh!

OysterD3 commented Dec 28, 2024

Uh oh!

bolt-new-by-stackblitz bot commented Dec 28, 2024

Uh oh!

github-actions bot commented Dec 28, 2024 •

edited by zombieJ

Loading

Uh oh!

github-actions bot commented Dec 28, 2024 •

edited

Loading

Uh oh!

petercat-assistant bot commented Dec 28, 2024

Uh oh!

Uh oh!

pkg-pr-new bot commented Dec 28, 2024 •

edited

Loading

Uh oh!

codecov bot commented Dec 28, 2024 •

edited

Loading

Assets Changed:

Uh oh!

codecov bot commented Dec 28, 2024 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

socket-security bot commented Mar 5, 2025

Uh oh!

Uh oh!

afc163 Mar 5, 2025

Uh oh!

afc163 Mar 5, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

feat: [v6] new component Masonry #52162

feat: [v6] new component Masonry #52162

Uh oh!

Conversation

OysterD3 commented Dec 28, 2024

🤔 This is a ...

🔗 Related Issues

💡 Background and Solution

📝 Change Log

Uh oh!

bolt-new-by-stackblitz bot commented Dec 28, 2024

Uh oh!

github-actions bot commented Dec 28, 2024 • edited by zombieJ Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

👁 Visual Regression Report for PR #52162 Failed ❌

Uh oh!

github-actions bot commented Dec 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

petercat-assistant bot commented Dec 28, 2024

Walkthrough

Changes

Uh oh!

Uh oh!

pkg-pr-new bot commented Dec 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Dec 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Uh oh!

codecov bot commented Dec 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

socket-security bot commented Mar 5, 2025

Uh oh!

Uh oh!

afc163 Mar 5, 2025

Choose a reason for hiding this comment

Uh oh!

afc163 Mar 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions bot commented Dec 28, 2024 •

edited by zombieJ

Loading

github-actions bot commented Dec 28, 2024 •

edited

Loading

pkg-pr-new bot commented Dec 28, 2024 •

edited

Loading

codecov bot commented Dec 28, 2024 •

edited

Loading

codecov bot commented Dec 28, 2024 •

edited

Loading

afc163 Mar 5, 2025 •

edited

Loading