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

fix: Select align style broken with custom height #44753

Merged
merged 3 commits into from Sep 11, 2023

Conversation

afc163
Copy link
Member

@afc163 afc163 commented Sep 11, 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

close #44672

💡 Background and solution

<Select style={{ height: 60 }} />

这样便能重现。

图片

修复后效果是:

图片

📝 Changelog

Language Changelog
🇺🇸 English Fix Select/Cascader/TreeSelect style issue when customize their height.
🇨🇳 Chinese 修复 Select/Cascader/TreeSelect 自定义高度时的样式问题。

☑️ 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 e1e6636

Improved the select component's demo and styles. Added more examples of option label centering to the demo using the Cascader component. Fixed some style issues in the multiple.tsx and single.tsx files to enhance the layout and alignment of the select component.

🔍 Walkthrough

🤖 Generated by Copilot at e1e6636

  • Add option label centering feature to different types of select components (link, link)
  • Adjust the height and vertical alignment of multiple select component to match the container and the other components (link, link, link)
  • Adjust the height and vertical alignment of single select component to match the container and the other components (link, link, link)

@stackblitz
Copy link

stackblitz bot commented Sep 11, 2023

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

@github-actions
Copy link
Contributor

github-actions bot commented Sep 11, 2023

@github-actions
Copy link
Contributor

github-actions bot commented Sep 11, 2023

size-limit report 📦

Path Size
./dist/antd.min.js 393.42 KB (-23 B 🔽)
./dist/antd-with-locales.min.js 452.6 KB (-24 B 🔽)

@argos-ci
Copy link

argos-ci bot commented Sep 11, 2023

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

Build Status Details Updated (UTC)
default (Inspect) 👍 Changes approved 5 changes Sep 11, 2023, 7:13 AM

@codecov
Copy link

codecov bot commented Sep 11, 2023

Codecov Report

Patch and project coverage have no change.

Comparison is base (fa5c983) 100.00% compared to head (3d5a434) 100.00%.
Report is 2 commits behind head on master.

Additional details and impacted files
@@            Coverage Diff            @@
##            master    #44753   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          680       680           
  Lines        11417     11417           
  Branches      3073      3073           
=========================================
  Hits         11417     11417           
Files Changed Coverage Δ
components/select/style/multiple.tsx 100.00% <ø> (ø)
components/select/style/single.tsx 100.00% <ø> (ø)

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

@@ -92,7 +89,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
[`&:not(${componentCls}-customize-input)`]: {
[`${componentCls}-selector`]: {
width: '100%',
height: token.controlHeight,
Copy link
Member

Choose a reason for hiding this comment

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

这个高度在其他地方有设置么

Copy link
Member Author

Choose a reason for hiding this comment

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

高度改到外层了,这样可以被 style.height 覆盖。

@@ -48,11 +48,12 @@ const App: React.FC = () => {

return (
<AutoComplete
dropdownMatchSelectWidth={252}
popupMatchSelectWidth={252}
Copy link
Member Author

Choose a reason for hiding this comment

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

顺手改掉。

@@ -15,6 +15,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
return {
[`${componentCls}-single${suffixCls}`]: {
fontSize: token.fontSize,
height: token.controlHeight,
Copy link
Member Author

Choose a reason for hiding this comment

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

改到外层了,这样可以被 style.height 覆盖。

@afc163 afc163 merged commit 092c79a into master Sep 11, 2023
88 checks passed
@afc163 afc163 deleted the fix/Select-align-center branch September 11, 2023 08:05
@MadCcc MadCcc mentioned this pull request Sep 15, 2023
20 tasks
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.

Cascader 组件下拉图标位置不正确
3 participants