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

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
89 checks passed
@afc163 afc163 deleted the fix/select-wrap-style branch September 18, 2023 05:51
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.

select样式问题
4 participants