Skip to content

style: improve notice toast style#4142

Merged
Ricbet merged 2 commits intomainfrom
style/improve-message-toast-style
Nov 4, 2024
Merged

style: improve notice toast style#4142
Ricbet merged 2 commits intomainfrom
style/improve-message-toast-style

Conversation

@erha19
Copy link
Copy Markdown
Member

@erha19 erha19 commented Oct 31, 2024

Types

  • 💄 Style Changes

Background or solution

Before:
image

After:
image

Changelog

improve notice toast style

Summary by CodeRabbit

  • 新功能
    • 在消息组件中添加了自定义内容的新CSS类,支持更灵活的布局和对齐方式。

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Oct 31, 2024

Walkthrough

此次更改在消息组件中引入了一个新的CSS类&-custom-content,用于自定义内容的样式。该类采用flexbox布局,项目对齐方式为居中和起始。此外,还为.anticon设置了全局样式,规定其高度为21px并应用flexbox属性以居中内容。现有的消息组件样式保持不变,确保组件的整体结构和功能不受影响。

Changes

文件路径 更改摘要
packages/components/src/message/style.less 添加了新的嵌套类&-custom-content,并为.anticon设置了样式。

Possibly related PRs

  • style: beautify suggest style #4101: 此PR涉及对多个UI组件的样式调整,可能与主PR的整体样式方法相关,特别是在CSS类的结构和应用方面。然而,它并未直接修改与主PR相同的类或组件。

Suggested reviewers

  • Ricbet
  • bytemain
  • hacke2

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between c8565f1 and 759dad7.

📒 Files selected for processing (1)
  • packages/components/src/message/style.less (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/components/src/message/style.less

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🧹 Outside diff range and nitpick comments (1)
packages/components/src/message/style.less (1)

33-43: 自定义内容样式实现得当

新增的样式类很好地改善了消息提示的布局,使用 flexbox 确保了图标和文本的对齐。通过设置固定的图标高度和居中对齐,提升了视觉体验。

建议考虑使用 LESS 变量来管理图标的高度值,以保持样式的一致性和可维护性:

@message-icon-height: 21px;

&-custom-content {
  // ... 其他样式保持不变
  :global(.anticon) {
    height: @message-icon-height;
    // ... 其他样式保持不变
  }
}
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 6b4c57e and c8565f1.

📒 Files selected for processing (1)
  • packages/components/src/message/style.less (1 hunks)

Comment thread packages/components/src/message/style.less Outdated
@codecov
Copy link
Copy Markdown

codecov Bot commented Oct 31, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 54.23%. Comparing base (6b4c57e) to head (759dad7).
Report is 2 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #4142      +/-   ##
==========================================
- Coverage   54.23%   54.23%   -0.01%     
==========================================
  Files        1598     1598              
  Lines       97627    97647      +20     
  Branches    19968    19982      +14     
==========================================
+ Hits        52949    52954       +5     
- Misses      37110    37122      +12     
- Partials     7568     7571       +3     
Flag Coverage Δ
jsdom 49.79% <ø> (-0.01%) ⬇️
node 15.60% <ø> (-0.01%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

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

@erha19
Copy link
Copy Markdown
Member Author

erha19 commented Nov 1, 2024

/next

@opensumi
Copy link
Copy Markdown
Contributor

opensumi Bot commented Nov 1, 2024

🎉 PR Next publish successful!

3.4.6-next-1730442794.0

@Ricbet Ricbet merged commit 422a02d into main Nov 4, 2024
@Ricbet Ricbet deleted the style/improve-message-toast-style branch November 4, 2024 02:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants