Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Descriptions items.span support responsive config #44534

Merged
merged 6 commits into from
Aug 30, 2023
Merged

Conversation

zombieJ
Copy link
Member

@zombieJ zombieJ commented Aug 30, 2023

[中文版模板 / Chinese template]

🤔 This is a ...

  • New feature
  • Bug fix
  • Site / documentation update
  • Demo update
  • Component style update
  • TypeScript definition update
  • Bundle size optimization
  • Performance optimization
  • Enhancement feature
  • Internationalization
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Workflow
  • Other (about what?)

🔗 Related issue link

resolve #44442

💡 Background and solution

📝 Changelog

Language Changelog
🇺🇸 English Descriptions items.span support responsive config.
🇨🇳 Chinese Descriptions 的 items.span 支持响应式设置。

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

  • 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

🚀 Summary

🤖 Generated by Copilot at aae85dc

This pull request adds a new feature to DescriptionsItem that allows specifying responsive span values based on breakpoints. It also refactors and improves the code and documentation of the Descriptions component and its related files.

🔍 Walkthrough

🤖 Generated by Copilot at aae85dc

  • Extract DEFAULT_COLUMN_MAP object to ./constant.ts file (link, link, link)
  • Use matchScreen function from ./_util/responsiveObserver.ts file to get the value that matches the current screen size (link, link, link, link)
  • Use useBreakpoint hook from antd to get the current responsive breakpoints (link, link)
  • Extract useItems hook to ./hooks/useItems.ts file to get the array of items with responsive span value (link, link, link, link, link)
  • Modify useRow hook in ./hooks/useRow.ts file to expect items with responsive span value (link, link, link)
  • Modify Descriptions component in ./index.tsx file to use the new hooks and functions and simplify the logic (link, link, link)
  • Modify documentation and demo files to reflect the new feature and type of span property (link, link, link, link)

@stackblitz
Copy link

stackblitz bot commented Aug 30, 2023

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

@github-actions
Copy link
Contributor

github-actions bot commented Aug 30, 2023

@github-actions
Copy link
Contributor

github-actions bot commented Aug 30, 2023

size-limit report 📦

Path Size
./dist/antd.min.js 394.67 KB (+82 B 🔺)
./dist/antd-with-locales.min.js 453.77 KB (+76 B 🔺)

@argos-ci
Copy link

argos-ci bot commented Aug 30, 2023

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build Status Details Updated (UTC)
default (Inspect) 👍 Changes approved 16 changes Aug 30, 2023, 1:49 PM

@codecov
Copy link

codecov bot commented Aug 30, 2023

Codecov Report

Patch coverage: 100.00% and no project coverage change.

Comparison is base (07c03d1) 100.00% compared to head (9590f4d) 100.00%.
Report is 16 commits behind head on feature.

Additional details and impacted files
@@            Coverage Diff             @@
##           feature    #44534    +/-   ##
==========================================
  Coverage   100.00%   100.00%            
==========================================
  Files          673       677     +4     
  Lines        11386     11503   +117     
  Branches      3071      3130    +59     
==========================================
+ Hits         11386     11503   +117     
Files Changed Coverage Δ
components/descriptions/Row.tsx 100.00% <ø> (ø)
components/transfer/index.tsx 100.00% <ø> (ø)
components/transfer/style/index.ts 100.00% <ø> (ø)
components/_util/responsiveObserver.ts 100.00% <100.00%> (ø)
components/button/button.tsx 100.00% <100.00%> (ø)
components/descriptions/constant.ts 100.00% <100.00%> (ø)
components/descriptions/hooks/useItems.ts 100.00% <100.00%> (ø)
components/descriptions/hooks/useRow.ts 100.00% <100.00%> (ø)
components/descriptions/index.tsx 100.00% <100.00%> (ø)
components/message/useMessage.tsx 100.00% <100.00%> (ø)
... and 8 more

... and 4 files with indirect coverage changes

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

@zombieJ zombieJ merged commit cbfb126 into feature Aug 30, 2023
89 checks passed
@zombieJ zombieJ deleted the feat-desc-span branch August 30, 2023 14:09
@caijf
Copy link

caijf commented Oct 9, 2023

@zombieJ 这算是破坏性更新吗?antd v5.9 版本前后对 Descriptions 响应式处理不一样。

如下代码:

<Descriptions column={{ sm: 2, xs: 1 }}>
  <Descriptions.Item label="name">foo</Descriptions.Item>
  <Descriptions.Item label="age">18</Descriptions.Item>
  <Descriptions.Item label="address" span={2}>
    xx路
  </Descriptions.Item>
</Descriptions>

antd v5.9 之前版本 md/lg/xl/xxl 默认继承 sm 的值 2
antd v5.9 之后版本 md/lg/xl/xxl 默认值 3

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.

4 participants