Skip to content

Comments

feat: improve Semantic for Drawer#52247

Merged
thinkasany merged 7 commits intoant-design:nextfrom
thinkasany-forks:cp-drawer
Jan 8, 2025
Merged

feat: improve Semantic for Drawer#52247
thinkasany merged 7 commits intoant-design:nextfrom
thinkasany-forks:cp-drawer

Conversation

@thinkasany
Copy link
Member

🤔 This is a ...

  • 🆕 New feature

📝 Change Log

Language Changelog
🇺🇸 English feat: improve Semantic for Drawer
🇨🇳 Chinese feat: 完善 Drawer 语义化

@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 Jan 5, 2025

👁 Visual Regression Report for PR #52247 Failed ❌

🎯 Target branch: next (3c90842)
📖 View Full Report ↗︎
📊 Summary: 🔄 5 changed

Expected (Branch next) Actual (Current PR) Diff
button-color-variant.dark.png button-color-variant.dark.png button-color-variant.dark.css-var.png button-color-variant.dark.css-var.png
input-group.compact.png input-group.compact.png input-group.compact.css-var.png input-group.compact.css-var.png
layout-component-token.compact.png layout-component-token.compact.png layout-component-token.compact.css-var.png layout-component-token.compact.css-var.png
layout-component-token.dark.png layout-component-token.dark.png layout-component-token.dark.css-var.png layout-component-token.dark.css-var.png
layout-component-token.default.png layout-component-token.default.png layout-component-token.default.css-var.png layout-component-token.default.css-var.png

Important

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

  • Visual diff is acceptable

@github-actions
Copy link
Contributor

github-actions bot commented Jan 5, 2025

Preview is ready

@petercat-assistant
Copy link

Walkthrough

This pull request introduces enhancements to the Drawer component by improving its semantic structure. It adds new class names and styles for various parts of the Drawer, such as the title, extra, and root elements. Additionally, it includes tests to verify the application of custom styles and updates the semantic demo to reflect these changes.

Changes

File Summary
components/drawer/DrawerPanel.tsx Added new class names and styles for title, extra, and root elements in the Drawer component.
components/drawer/tests/Drawer.test.tsx Added tests to verify the application of custom class names and styles to the Drawer component.
components/drawer/demo/_semantic.tsx Updated semantic demo to include new elements like title and extra, and added a button component.
components/drawer/index.tsx Refactored to include new class names and styles for the root element, and adjusted the Drawer component's rendering logic.

@thinkasany thinkasany mentioned this pull request Jan 5, 2025
@pkg-pr-new
Copy link

pkg-pr-new bot commented Jan 5, 2025

Open in Stackblitz

More templates

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

commit: 4cd584e

@codecov
Copy link

codecov bot commented Jan 5, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (5853377) to head (7b17ff4).

Additional details and impacted files
@@            Coverage Diff            @@
##              next    #52247   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          760       760           
  Lines        13682     13684    +2     
  Branches      3572      3574    +2     
=========================================
+ Hits         13682     13684    +2     

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


const locales = {
cn: {
root: '根元素',
Copy link
Member

Choose a reason for hiding this comment

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

按照之前的讨论,content 是不是改叫 section 了?

Copy link
Member Author

Choose a reason for hiding this comment

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

这里应该不用,content 其实语义是可以的。section 是为了解决之前detail那种,太泛不好包裹 title、description 的。
card.meta,list.meta这种,

image
image

Copy link
Member

Choose a reason for hiding this comment

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

content 是在 body 下面,而 body 是和 header 同级。不应该是作为最大外容器的

Copy link
Member Author

Choose a reason for hiding this comment

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

经过激烈的讨论,最终确定可以换成 section,都是用于包裹的语义。 类似meta组件包裹title和description,这边用来包裹title和内容。

4ba97a3c23b40dc0ad3a231bfe74f550

image
image

@thinkasany thinkasany requested a review from zombieJ January 7, 2025 07:35
@codecov
Copy link

codecov bot commented Jan 7, 2025

Bundle Report

Changes will increase total bundle size by 4.13kB (0.12%) ⬆️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
antd.min-array-push 3.37MB 4.13kB (0.12%) ⬆️

@socket-security
Copy link

socket-security bot commented Jan 8, 2025

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

Package New capabilities Transitives Size Publisher
npm/@ant-design/[email protected] None 0 32.7 kB afc163
npm/@ant-design/[email protected] environment 0 390 kB afc163
npm/@ant-design/[email protected] environment 0 92 kB yumoimer
npm/@ant-design/[email protected] environment 0 290 kB zombiej
npm/@ant-design/[email protected] None 0 43.9 kB zombiej
npm/@ant-design/[email protected] None 0 30.9 kB zombiej
npm/@ant-design/[email protected] environment 0 8.74 MB afc163
npm/@ant-design/[email protected] environment 0 832 kB afc163
npm/@ant-design/[email protected] filesystem Transitive: environment, unsafe +1 11.3 MB madccc
npm/@ant-design/[email protected] None 0 9.33 kB zombiej
npm/@antfu/[email protected] None 0 1.61 MB antfu
npm/@antv/[email protected] None 0 7.99 MB iaaron
npm/@babel/[email protected] None 0 248 kB nicolo-ribaudo
npm/@biomejs/[email protected] shell 0 210 kB dominionl
npm/@codecov/[email protected] None 0 62.8 kB codecov-devops
npm/@codesandbox/[email protected] network 0 1.21 MB danilowoz
npm/@dnd-kit/[email protected] environment 0 1.07 MB clauderic
npm/@dnd-kit/[email protected] environment 0 49 kB clauderic
npm/@dnd-kit/[email protected] environment 0 234 kB clauderic
npm/@dnd-kit/[email protected] environment 0 88.5 kB clauderic
npm/@emotion/[email protected] None 0 273 kB emotion-release-bot
npm/@emotion/[email protected] None 0 0 B
npm/@emotion/[email protected] environment 0 48.7 kB emotion-release-bot
npm/@eslint-react/[email protected] None 0 306 kB rel1cx
npm/@ianvs/[email protected] environment, unsafe 0 114 kB ianvs
npm/@inquirer/[email protected] None 0 23.2 kB sboudrias
npm/@madccc/[email protected] None 0 19 kB madccc
npm/@microflash/[email protected] None 0 6.71 kB naiyer
npm/@npmcli/[email protected] environment 0 18.3 kB npm-cli-ops
npm/@octokit/[email protected] None 0 8.28 kB octokitbot
npm/@qixian.cs/[email protected] network 0 19.6 kB chenshuai2144
npm/@rc-component/[email protected] environment 0 83.1 kB afc163
npm/@rc-component/[email protected] environment 0 16.7 kB zombiej
npm/@rc-component/[email protected] None 0 146 kB zombiej
npm/@rc-component/[email protected] None 0 68.3 kB afc163
npm/@rc-component/[email protected] environment 0 184 kB zombiej
npm/@size-limit/[email protected] None 0 3.43 kB ai
npm/@stackblitz/[email protected] None 0 186 kB tsulkowski
npm/@testing-library/[email protected] environment 0 2.43 MB testing-library-bot
npm/@testing-library/[email protected] None 0 282 kB testing-library-bot
npm/@testing-library/[email protected] environment 0 329 kB testing-library-bot
npm/@testing-library/[email protected] None 0 435 kB testing-library-bot
npm/@types/[email protected] None 0 24.6 kB types
npm/@types/[email protected] None 0 42.2 kB types
npm/@types/[email protected] None 0 13.1 kB types
npm/@types/[email protected] None 0 36.8 kB types
npm/@types/[email protected] None 0 9.1 kB types
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.29 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 0 B
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 790 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.22 MB madccc
npm/[email protected] network 0 2.13 MB jasonsaayman
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 23.6 kB jedwatson
npm/[email protected] None 0 62.2 kB andidittrich
npm/[email protected] None 0 15.1 kB sudodoki
npm/[email protected] environment 0 29.1 kB kentcdodds
npm/[email protected] network 0 93.3 kB lquixada
npm/[email protected] None 0 670 kB iamkun
npm/[email protected] filesystem 0 8.91 kB benjycui
npm/[email protected] Transitive: environment +1 357 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] environment 0 171 kB react-bot
npm/[email protected] None 0 18.2 kB arnaud-barre
npm/[email protected] environment 0 3.37 MB eslintbot
npm/[email protected] filesystem 0 98.4 kB mrmlnc
npm/[email protected] None 0 12.4 kB camsong
npm/[email protected] None +1 59.6 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] environment 0 180 kB zombiej
npm/[email protected] None 0 20.5 kB zombiej
npm/[email protected] None 0 52.4 kB afc163
npm/[email protected] environment 0 77.4 kB afc163
npm/[email protected] environment 0 59.6 kB zombiej
npm/[email protected] None 0 43.1 kB zombiej
npm/[email protected] environment 0 292 kB zombiej
npm/[email protected] environment 0 159 kB afc163
npm/[email protected] None 0 81.5 kB afc163, madccc, paranoidjk, ...5 more
npm/[email protected] None 0 73.8 kB afc163, madccc, zombiej
npm/[email protected] None 0 78.5 kB afc163, madccc, zombiej
npm/[email protected] environment 0 256 kB zombiej
npm/[email protected] None 0 107 kB 07akioni, afc163, madccc, ...1 more
npm/[email protected] environment 0 88.3 kB madccc
npm/[email protected] environment 0 166 kB zombiej
npm/[email protected] None 0 907 kB 07akioni, afc163, lixuan, ...3 more
npm/[email protected] environment 0 52.3 kB afc163
npm/[email protected] None 0 40.6 kB madccc
npm/[email protected] environment 0 36.5 kB afc163
npm/[email protected] environment 0 50.3 kB afc163
npm/[email protected] environment 0 345 kB zombiej
npm/[email protected] None 0 173 kB afc163, benjycui, jljsj33, ...6 more
npm/[email protected] None 0 48.3 kB zombiej
npm/[email protected] None 0 20.5 kB afc163
npm/[email protected] None 0 403 kB afc163, benjycui, dxq613, ...6 more
npm/[email protected] environment 0 175 kB zombiej
npm/[email protected] None 0 63.5 kB afc163, lixuan, madccc, ...1 more
npm/[email protected] None 0 55.2 kB zombiej
npm/[email protected] environment 0 179 kB zombiej
npm/[email protected] None 0 359 kB zombiej
npm/[email protected] None 0 80.3 kB afc163
npm/[email protected] Transitive: environment +1 267 kB afc163
npm/[email protected] None 0 0 B
npm/[email protected] None 0 0 B
npm/[email protected] None 0 44.8 kB stipsan
npm/[email protected] None 0 68.6 kB niksy

🚮 Removed packages: npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected]

View full report↗︎

root: '根元素',
mask: '遮罩层元素',
content: 'Drawer 容器元素',
section: 'Drawer 容器元素',
Copy link
Member

Choose a reason for hiding this comment

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

往上挪一级

截屏2025-01-08 14 39 43

@thinkasany thinkasany merged commit 2c3c5d1 into ant-design:next Jan 8, 2025
35 of 36 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants