Skip to content
New issue

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

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

Already on GitHub? # to your account

style: fix Select baseline align bug #44927

Merged
merged 3 commits into from
Sep 18, 2023
Merged

style: fix Select baseline align bug #44927

merged 3 commits into from
Sep 18, 2023

Conversation

afc163
Copy link
Member

@afc163 afc163 commented Sep 18, 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 #44907

ref antvis/L7VP#28

💡 Background and solution

📝 Changelog

Language Changelog
🇺🇸 English Fix Select style problem when label contains div element.
🇨🇳 Chinese 修复 Select 当 label 内使用了 div 块级元素时的样式问题。

☑️ 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 2f4e965

This pull request enhances the demos and fixes a bug related to the alignment of the Input and Select components. It adds titles and more cases to the align demo of the Input component, and improves the option-label-center demo of the Select component. It also fixes the baseline alignment of the single style of the Select component when the value is empty or undefined.

🔍 Walkthrough

🤖 Generated by Copilot at 2f4e965

  • Add titles for the align demo of the input component (link)
  • Simplify and extend the select components in the align demo of the input component (link,link)
  • Fix and extend the select components in the option-label-center demo of the select component (link,link)
  • Fix the bug in the single style of the select component that caused the baseline alignment to be incorrect with empty or undefined values (link)

@stackblitz
Copy link

stackblitz bot commented Sep 18, 2023

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

@github-actions
Copy link
Contributor

github-actions bot commented Sep 18, 2023

/* For undefined value baseline align */
`${componentCls}-selection-placeholder:after`,
`${componentCls}-selection-placeholder:empty:after`,
Copy link
Member Author

Choose a reason for hiding this comment

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

在 components/input/demo/align.tsx 里补充了这两个样式的使用场景,发现只有 :empty 的时候是需要的。在其他情况下去掉可解决 #44907 的问题。

@afc163 afc163 force-pushed the fix/select-wrap-style branch from 36e7a4a to a717443 Compare September 18, 2023 04:35
@github-actions
Copy link
Contributor

size-limit report 📦

Path Size
./dist/antd.min.js 393.99 KB (+3 B 🔺)
./dist/antd-with-locales.min.js 453.18 KB (+4 B 🔺)

@argos-ci
Copy link

argos-ci bot commented Sep 18, 2023

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

Build Status Details Updated (UTC)
default (Inspect) 👍 Changes approved 2 changes Sep 18, 2023, 4:47 AM

@codecov
Copy link

codecov bot commented Sep 18, 2023

Codecov Report

Patch and project coverage have no change.

Comparison is base (b24a646) 100.00% compared to head (a717443) 100.00%.

Additional details and impacted files
@@            Coverage Diff            @@
##            master    #44927   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          682       682           
  Lines        11540     11540           
  Branches      3105      3105           
=========================================
  Hits         11540     11540           
Files Changed Coverage Δ
components/select/style/single.tsx 100.00% <ø> (ø)

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

</Select>
<Select style={{ width: 100 }} defaultValue="jack" options={selectOptions} />
<Select style={{ width: 100 }} defaultValue="" options={selectOptions} />
<Select style={{ width: 100 }} options={selectOptions} />
Copy link
Contributor

Choose a reason for hiding this comment

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

增加一个覆盖这个对应问题的 demo,比如 {label: <div>Tes </div>, value: 'xxx'} 会不会好些。

Copy link
Member Author

Choose a reason for hiding this comment

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

@afc163 afc163 merged commit faefc8f into master Sep 18, 2023
@afc163 afc163 deleted the fix/select-wrap-style branch September 18, 2023 05:51
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

select样式问题
4 participants