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(Modal): Adopt a better way to break lines #39249

Merged
merged 2 commits into from
Dec 4, 2022

Conversation

MuxinFeng
Copy link
Contributor

@MuxinFeng MuxinFeng commented Dec 4, 2022

[中文版模板 / 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
  • Other (about what?)

🔗 Related issue link

使用 Modal.info(), content 属性中的内容较长时,会超出 Modal 边界

💡 Background and solution

📝 Changelog

Language Changelog
🇺🇸 English Add max-width to modal-confirm-content to achieve a line break effect (a supplement to non-CJK text wrapping)
🇨🇳 Chinese modal-confirm-content加上max-width,来达到换行效果(算是对非 CJK 文字换行的补充)

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

@github-actions
Copy link
Contributor

github-actions bot commented Dec 4, 2022

@@ -297,7 +297,7 @@ const genModalConfirmStyle: GenerateStyle<ModalToken> = (token) => {

[`+ ${confirmComponentCls}-content`]: {
marginBlockStart: token.marginXS,
flexBasis: "100%",
flexBasis: '100%',
Copy link
Member

@afc163 afc163 Dec 4, 2022

Choose a reason for hiding this comment

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

Suggested change
flexBasis: '100%',
flexBasis: '100%',
maxWidth: `calc(100% - ${token.modalConfirmIconSize + token.marginSM}px)`,

改这个就好。别动 wordWrap,和 4.x 保持一致就行。

Copy link
Contributor Author

Choose a reason for hiding this comment

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

好嘞,我研究下

Copy link
Contributor Author

Choose a reason for hiding this comment

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

代码改好了,changelog也改好了。
对于word-break这个方案不能用的情况我还有些疑惑,并且在历史 pr 里没找到相关的说明,大佬能给些关键词吗

Copy link
Member

Choose a reason for hiding this comment

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

break-word 会让英文单词被砍断,不是最合理的排版方式,所以一般不会作为默认样式设置。

Copy link
Contributor Author

Choose a reason for hiding this comment

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

感谢答疑

<UnreachableContext.Consumer>{(name) => `Unreachable: ${name}!`}</UnreachableContext.Consumer>
</>
),
content: <p>`Reachable: !aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa)`</p>,
Copy link
Member

Choose a reason for hiding this comment

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

demo 不用改。

Copy link
Contributor 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 ecd2b73 into ant-design:master Dec 4, 2022
@zombieJ zombieJ mentioned this pull request Dec 5, 2022
15 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.

2 participants