feat(dialog-box): [dialog-box] modify smb theme #2147
Conversation
WalkthroughThe changes in this pull request primarily involve modifications to the dialog box component in a Vue.js application. Key updates include the reordering of button elements in the footer to emphasize the primary action, adjustments to styling in the associated LESS files, and the introduction of new color and padding variables. These alterations aim to enhance the user interface and improve the visual hierarchy of dialog box components. Changes
Possibly related PRs
Suggested labels
Suggested reviewers
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? TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Outside diff range and nitpick comments (3)
examples/sites/demos/pc/app/dialog-box/right-dialog-composition-api.vue (1)
14-14: Consider adding a loading state to the primary button.To provide visual feedback and prevent duplicate form submissions, consider adding a loading state to the primary "确定" (Confirm) button while the form is being processed.
Here's an example of how to add a loading state:
<tiny-button type="primary" :loading="isLoading" @click="handleConfirm" > 确定 </tiny-button>In the component's script section, define the
isLoadingref andhandleConfirmmethod:<script setup> import { ref } from 'vue' const isLoading = ref(false) const handleConfirm = async () => { isLoading.value = true // Perform async confirmation logic... await asyncConfirmation() isLoading.value = false boxVisibility.value = false } </script>examples/sites/demos/pc/app/dialog-box/right-dialog.vue (1)
Line range hint
1-54: Consider adding accessibility attributes.To improve accessibility, consider adding the following attributes:
- Add the
aria-labelattribute to the<tiny-button>elements to provide a clear and concise description of their purpose for screen readers.- Add the
aria-modal="true"attribute to the<tiny-dialog-box>element to indicate that it is a modal dialog.Apply this diff to add the accessibility attributes:
<template> <div> - <tiny-button @click="boxVisibility = true"> 右侧弹窗 </tiny-button> + <tiny-button @click="boxVisibility = true" aria-label="Open right side dialog"> 右侧弹窗 </tiny-button> - <tiny-dialog-box right-slide v-model:visible="boxVisibility" title="消息" modal-append-to-body> + <tiny-dialog-box right-slide v-model:visible="boxVisibility" title="消息" modal-append-to-body aria-modal="true"> <template #title> <div class="header"> <span class="title">标题区</span> <icon-help-circle class="icon"></icon-help-circle> </div> </template> <span>半屏弹窗内容</span> <template #footer> - <tiny-button plain @click="boxVisibility = false"> 取消 </tiny-button> + <tiny-button plain @click="boxVisibility = false" aria-label="Cancel"> 取消 </tiny-button> - <tiny-button type="primary" @click="boxVisibility = false"> 确定 </tiny-button> + <tiny-button type="primary" @click="boxVisibility = false" aria-label="Confirm"> 确定 </tiny-button> </template> </tiny-dialog-box> </div> </template>packages/theme/src/dialog-box/index.less (1)
Line range hint
1-298: Update documentation if necessary.The PR checklist mentions that there are no documentation updates related to these changes. However, it's worth reviewing the documentation to determine if any updates are necessary.
Please consider:
- Checking if the changes to the dialog box styling warrant any updates to the component's documentation, such as the theme customization guide or API reference.
- Updating code examples or screenshots in the documentation to reflect the new visual appearance, if applicable.
Keeping the documentation in sync with the code changes improves the developer experience and helps users understand how to customize the dialog box theme effectively.
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (4)
- examples/sites/demos/pc/app/dialog-box/right-dialog-composition-api.vue (1 hunks)
- examples/sites/demos/pc/app/dialog-box/right-dialog.vue (1 hunks)
- packages/theme/src/dialog-box/index.less (2 hunks)
- packages/theme/src/dialog-box/vars.less (3 hunks)
Additional comments not posted (11)
examples/sites/demos/pc/app/dialog-box/right-dialog-composition-api.vue (2)
Line range hint
1-52: The changes look good to me!The modifications to the footer button order improve the user experience by guiding users to the primary action. The code changes are clean and isolated. Pending verification of design consistency, this PR is approved.
14-14: Verify the primary button placement aligns with design guidelines.The primary "确定" (Confirm) button is now placed before the secondary "取消" (Cancel) button. While this change emphasizes the primary action, it's important to ensure this placement aligns with the project's design guidelines and user expectations for consistency across the application.
Run the following script to check the button order in other dialog components:
examples/sites/demos/pc/app/dialog-box/right-dialog.vue (1)
14-14: LGTM!The change to make the "确定" (Confirm) button a primary button type is a good improvement. It clearly distinguishes the primary action from the secondary "取消" (Cancel) button, enhancing the user experience and interaction clarity.
packages/theme/src/dialog-box/vars.less (5)
100-100: Confirm the impact of increasing the drawer body's left and right padding.Changing the drawer body's left and right padding from
0pxtovar(--ti-common-space-8x)will increase the spacing around the content. Verify that this change does not introduce any layout issues or inconsistencies, particularly in scenarios where the drawer is used with fixed-width elements or alongside other components.To confirm the impact, run the following script:
#!/bin/bash # Description: Verify the usage of `--ti-dialog-box-drawer-body-padding-left` and # `--ti-dialog-box-drawer-body-padding-right` in the codebase. # Test 1: Search for the variable usage in Less files. # Expect: Occurrences in stylesheets that define the drawer body padding. rg --type less -C 5 $'--ti-dialog-box-drawer-body-padding-(left|right)' # Test 2: Search for the `ti-dialog-box-drawer-body` class usage in HTML/Vue files. # Expect: Occurrences in components that apply the drawer body styles. rg --type html -C 5 $'ti-dialog-box-drawer-body' rg --type vue -C 5 $'ti-dialog-box-drawer-body'Also applies to: 106-106
112-112: Verify the alignment of the drawer footer with the updated top padding.Modifying the drawer footer's top padding from
var(--ti-common-space-5x, 20px)tovar(--ti-common-space-6x)may affect the vertical alignment and spacing of the footer content. Ensure that this change maintains a balanced and visually pleasing layout, especially when the footer contains multiple elements or varying heights.To verify the alignment, run the following script:
#!/bin/bash # Description: Verify the usage of `--ti-dialog-box-drawer-footer-padding-top` in the codebase. # Test 1: Search for the variable usage in Less files. # Expect: Occurrences in stylesheets that define the drawer footer top padding. rg --type less -C 5 $'--ti-dialog-box-drawer-footer-padding-top' # Test 2: Search for the `ti-dialog-box-drawer-footer` class usage in HTML/Vue files. # Expect: Occurrences in components that apply the drawer footer styles. rg --type html -C 5 $'ti-dialog-box-drawer-footer' rg --type vue -C 5 $'ti-dialog-box-drawer-footer'
124-124: Confirm the consistency of divider colors in the dialog box and drawer.The new variable
--ti-dialog-box-drawer-divider-border-coloris set tovar(--ti-common-color-line-dividing), while the existing--ti-dialog-box-header-divider-border-coloris changed fromtransparenttovar(--ti-common-color-transparent). Verify that these changes result in a consistent and intentional application of divider colors across the dialog box and drawer components.To confirm the consistency, run the following script:
#!/bin/bash # Description: Verify the usage of `--ti-dialog-box-drawer-divider-border-color` and # `--ti-dialog-box-header-divider-border-color` in the codebase. # Test 1: Search for the variable declarations. # Expect: One occurrence each in `packages/theme/src/dialog-box/vars.less`. rg --type less -C 5 $'--ti-dialog-box-drawer-divider-border-color' rg --type less -C 5 $'--ti-dialog-box-header-divider-border-color' # Test 2: Search for the usage of relevant classes in HTML/Vue files. # Expect: Occurrences in components that apply the divider styles. rg --type html -C 5 $'ti-dialog-box-drawer-divider' rg --type vue -C 5 $'ti-dialog-box-drawer-divider' rg --type html -C 5 $'ti-dialog-box-header-divider' rg --type vue -C 5 $'ti-dialog-box-header-divider'Also applies to: 126-126
70-70: Verify the impact of changing the dialog box body text color.Changing the dialog box body text color from primary to secondary may affect the readability and visual hierarchy of the content. Ensure that the secondary color provides sufficient contrast against the background and aligns with the overall design guidelines.
To verify the impact, run the following script:
72-72: Ensure consistency in text color between the dialog box body and drawer body.Introducing a new variable
--ti-dialog-box-drawer-body-colorwith the primary text color may lead to inconsistency with the dialog box body, which now uses the secondary text color. Consider aligning the text colors for a cohesive user experience, unless there's a specific design requirement for differentiating them.To verify the consistency, run the following script:
packages/theme/src/dialog-box/index.less (3)
181-181: Verify the header border color change in the design.The header's border color has been updated from
var(--ti-dialog-box-drawer-divider-border-color)tovar(--ti-dialog-box-head-divider-border-color). This change indicates a potential shift in the design intent or a correction to ensure that the header's styling is distinct from the body and footer.Please confirm with the design team if this change aligns with their vision for the dialog box header.
194-195: LGTM! The body styling changes enhance visual clarity.The changes to the
.dialog-box__bodyclass styling are beneficial:
- Setting the text color to
var(--ti-dialog-box-drawer-body-color)enhances the visual distinction of the body content.- Adding a border to the bottom of the body section using
var(--ti-dialog-box-drawer-divider-border-color)aligns with the overall design consistency.These modifications improve the clarity and visual hierarchy of the dialog box body.
Line range hint
1-298: Consider adding or updating tests.The PR checklist indicates that tests have not been added for these changes. It's important to ensure proper test coverage, especially when modifying component styling.
Please consider:
- Adding new tests to verify the expected visual appearance and behavior of the modified dialog box components.
- Updating existing tests if the changes impact any current test cases.
This will help maintain the stability and reliability of the dialog box component.
| padding: var(--ti-dialog-box-drawer-body-padding-top) var(--ti-dialog-box-drawer-body-padding-right) | ||
| var(--ti-dialog-box-drawer-body-padding-bottom) var(--ti-dialog-box-drawer-body-padding-left); | ||
| } | ||
| } |
There was a problem hiding this comment.
Verify closing curly brace indentation.
The closing curly brace for the .dialog-box__body rule appears to be indented incorrectly. It should align with the opening curly brace of the rule.
Apply this diff to fix the indentation:
- }
+ }Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| } | |
| } |
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
Bug Fixes
Style