fix(dialog-box): [dialog-box] modify theme and demo #3198
Conversation
github-actions
bot
added
bug
WalkthroughThe changes update various dialog box components and corresponding tests. Button order and text have been modified—for example, swapping the positions of “取消” and “确定” and adjusting them to “取 消” and “确 定” (i.e., adding or removing spaces). In some cases, a Changes
Sequence Diagram(s)sequenceDiagram
participant T as Test Script
participant D as Demo Element (Locator)
participant DB as Dialog Box
T->>D: Locate demo element by ID (e.g., #close-on-click-modal)
D->>DB: Scope search to dialog box within demo
T->>DB: Trigger button click ("确 定" / "取 消")
DB-->>T: Dialog action completes (e.g., hides dialog)
Possibly related PRs
Suggested labels
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
examples/sites/demos/pc/app/dialog-box/basic-usage-composition-api.vueOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. examples/sites/demos/pc/app/dialog-box/basic-usage.spec.tsOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. examples/sites/demos/pc/app/dialog-box/close-on-click-modal.spec.tsOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 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: 0
🧹 Nitpick comments (6)
examples/sites/demos/pc/app/dialog-box/open-close-events-composition-api.vue (1)
19-20: Updated Button Labels – Visual Consistency:
The button labels have been updated to "取 消" and "确 定" to match the new design guidelines. Please confirm that this spacing change is consistent with all dialog box components across the project.examples/sites/demos/pc/app/dialog-box/custom-dialog-title.vue (1)
5-7: Title Template Styling – Removal of Hardcoded Background:
The inline style in the title slot now only specifies width and height, omitting any fixed background color. This change favors a theme-driven approach. Verify that the appearance matches the desired custom title design without the removed background.examples/sites/demos/pc/app/dialog-box/custom-dialog-footer-composition-api.vue (1)
7-7: Footer Template – Simplified Inline Styling:
By removing the fixedbackground: #dddddd, the footer now relies on external styling or theme variables. Ensure that the readability and visual separation of the footer area remain acceptable across different themes.examples/sites/demos/pc/app/dialog-box/right-dialog-composition-api.vue (1)
13-14: Footer Button Enhancement – AddedroundAttribute and Label Update:
The footer buttons now include theroundattribute and display the labels "取 消" and "确 定". This update improves visual consistency and button styling. Please verify that the rounded appearance aligns with the overall UI design across the dialog components.packages/theme/src/dialog-box/vars.less (1)
13-17: New CSS Variable for Dialog Box Mask Background:
The addition of--tv-DialogBox-mask-bg-color(set tovar(--tv-color-bg-mask)) enhances theming flexibility for the dialog box's background mask. Ensure this variable is properly referenced in related style files (e.g., inindex.less) and that it integrates seamlessly with the overall theme configuration.examples/sites/demos/pc/app/dialog-box/custom-dialog-content.spec.ts (1)
10-10: Enhanced test coverage with content verification.Adding an explicit check for the custom content text improves the test by verifying that the dialog displays the expected content.
Consider making the text matcher more precise by using an exact match instead of a regex pattern if the text is known and fixed:
- expect(demo.locator('b')).toHaveText(/自定义内容/) + expect(demo.locator('b')).toHaveText('自定义内容')
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (40)
examples/sites/demos/pc/app/dialog-box/basic-usage-composition-api.vue(1 hunks)examples/sites/demos/pc/app/dialog-box/basic-usage.spec.ts(1 hunks)examples/sites/demos/pc/app/dialog-box/basic-usage.vue(1 hunks)examples/sites/demos/pc/app/dialog-box/close-on-click-modal.spec.ts(1 hunks)examples/sites/demos/pc/app/dialog-box/close-on-press-escape.spec.ts(1 hunks)examples/sites/demos/pc/app/dialog-box/custom-dialog-content-composition-api.vue(2 hunks)examples/sites/demos/pc/app/dialog-box/custom-dialog-content.spec.ts(1 hunks)examples/sites/demos/pc/app/dialog-box/custom-dialog-content.vue(2 hunks)examples/sites/demos/pc/app/dialog-box/custom-dialog-footer-composition-api.vue(1 hunks)examples/sites/demos/pc/app/dialog-box/custom-dialog-footer.spec.ts(1 hunks)examples/sites/demos/pc/app/dialog-box/custom-dialog-footer.vue(1 hunks)examples/sites/demos/pc/app/dialog-box/custom-dialog-title-composition-api.vue(1 hunks)examples/sites/demos/pc/app/dialog-box/custom-dialog-title.spec.ts(1 hunks)examples/sites/demos/pc/app/dialog-box/custom-dialog-title.vue(1 hunks)examples/sites/demos/pc/app/dialog-box/destroy-on-close-composition-api.vue(1 hunks)examples/sites/demos/pc/app/dialog-box/destroy-on-close.spec.ts(1 hunks)examples/sites/demos/pc/app/dialog-box/destroy-on-close.vue(1 hunks)examples/sites/demos/pc/app/dialog-box/dialog-top-height.spec.ts(1 hunks)examples/sites/demos/pc/app/dialog-box/dialog-width.spec.ts(1 hunks)examples/sites/demos/pc/app/dialog-box/double-dialog-height-composition-api.vue(1 hunks)examples/sites/demos/pc/app/dialog-box/double-dialog-height.vue(1 hunks)examples/sites/demos/pc/app/dialog-box/draggable-composition-api.vue(1 hunks)examples/sites/demos/pc/app/dialog-box/draggable.spec.ts(1 hunks)examples/sites/demos/pc/app/dialog-box/draggable.vue(1 hunks)examples/sites/demos/pc/app/dialog-box/fullscreen.spec.ts(1 hunks)examples/sites/demos/pc/app/dialog-box/hidden-header.spec.ts(1 hunks)examples/sites/demos/pc/app/dialog-box/lock-scroll.spec.ts(1 hunks)examples/sites/demos/pc/app/dialog-box/open-close-events-composition-api.vue(1 hunks)examples/sites/demos/pc/app/dialog-box/open-close-events.spec.ts(1 hunks)examples/sites/demos/pc/app/dialog-box/open-close-events.vue(1 hunks)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)examples/sites/demos/pc/app/dialog-box/secondary-dialog-composition-api.vue(1 hunks)examples/sites/demos/pc/app/dialog-box/secondary-dialog.spec.ts(1 hunks)examples/sites/demos/pc/app/dialog-box/secondary-dialog.vue(1 hunks)examples/sites/demos/pc/app/dialog-box/transition-effect-composition-api.vue(1 hunks)examples/sites/demos/pc/app/dialog-box/transition-effect.spec.ts(1 hunks)examples/sites/demos/pc/app/dialog-box/transition-effect.vue(1 hunks)packages/theme/src/dialog-box/index.less(1 hunks)packages/theme/src/dialog-box/vars.less(1 hunks)
🔇 Additional comments (50)
examples/sites/demos/pc/app/dialog-box/custom-dialog-content.vue (2)
5-5: Custom content simplification looks good.The change from a
tiny-alertcomponent to a simple<b>element with "自定义内容" text makes the demo cleaner and more focused on the dialog box itself.
14-14: Import and component cleanup is appropriate.Removing the TinyAlert from imports and component registrations is consistent with the template changes. This cleanup removes unnecessary dependencies.
Also applies to: 19-19
examples/sites/demos/pc/app/dialog-box/draggable-composition-api.vue (1)
25-25: Button text formatting change looks good.The button text formatting "确 定" has been standardized, which aligns with the theme modifications mentioned in the PR objectives.
examples/sites/demos/pc/app/dialog-box/destroy-on-close-composition-api.vue (1)
14-14: Button text formatting change is consistent.The button text formatting has been standardized to "确 定" (with a space between characters), consistent with changes in other dialog box demos.
examples/sites/demos/pc/app/dialog-box/destroy-on-close.vue (1)
14-14: Button text formatting change maintains consistency.The button text formatting has been standardized to "确 定" (with a space between characters), maintaining consistency with the other dialog box demos. This aligns with the theme modifications mentioned in the PR objectives.
examples/sites/demos/pc/app/dialog-box/custom-dialog-footer.vue (1)
7-7: Background style removed from custom footerThe background color (
#dddddd) has been removed from the footer div's inline style. This change aligns with the theme modifications mentioned in the PR objectives and creates a cleaner, more consistent look for the custom footer area.examples/sites/demos/pc/app/dialog-box/transition-effect-composition-api.vue (1)
13-14: Added spaces to button labels for better visual aestheticsThe button labels have been changed from "取消" to "取 消" and from "确定" to "确 定", adding a space between characters. This improves the visual appearance and is consistent with the change pattern across other dialog components in this PR.
examples/sites/demos/pc/app/dialog-box/open-close-events.vue (1)
19-20: Added spaces to button labels for better visual aestheticsThe button labels have been changed from "取消" to "取 消" and from "确定" to "确 定", adding a space between characters. This improves the visual appearance and maintains consistency with the same changes made to other dialog box components.
examples/sites/demos/pc/app/dialog-box/custom-dialog-title-composition-api.vue (1)
6-6: Background style removed from custom titleThe background color (
#dddddd) has been removed from the title div's inline style. This change aligns with the theme modifications mentioned in the PR objectives and creates a cleaner look for the custom title area, matching the similar change made to the custom footer.examples/sites/demos/pc/app/dialog-box/open-close-events.spec.ts (1)
10-10: Updated test selector to match new button label formatThe button selector has been updated to use a regex pattern (
/确 定/) instead of the exact string ('确定'). This change properly accommodates the new button label with a space that was modified in the corresponding Vue component.examples/sites/demos/pc/app/dialog-box/basic-usage.spec.ts (2)
8-8: Button text updated to match UI changesThe test has been correctly updated to use the new button text with a space between characters ("确 定").
11-11: Button text updated to match UI changesThe test has been correctly updated to use the new button text with a space between characters ("取 消").
examples/sites/demos/pc/app/dialog-box/draggable.vue (1)
25-25: Button text updated for consistencyThe confirmation button text has been updated to include a space between characters ("确 定"), maintaining consistency with the other dialog box components.
examples/sites/demos/pc/app/dialog-box/right-dialog.vue (2)
13-13: Added round attribute and updated button textThe cancel button has been updated with the
roundattribute for rounded corners and its text has been changed to include a space between characters ("取 消").
14-14: Added round attribute and updated button textThe confirmation button has been updated with the
roundattribute for rounded corners and its text has been changed to include a space between characters ("确 定").examples/sites/demos/pc/app/dialog-box/transition-effect.vue (2)
13-13: Button text updated for consistencyThe cancel button text has been updated to include a space between characters ("取 消"), maintaining consistency with the other dialog box components.
14-14: Button text updated for consistencyThe confirmation button text has been updated to include a space between characters ("确 定"), maintaining consistency with the other dialog box components.
examples/sites/demos/pc/app/dialog-box/basic-usage.vue (1)
7-8: Button styling and order updated for consistency.The changes to the dialog footer buttons improve the UI by standardizing the cancel-confirm button sequence and adding spaces within Chinese characters for better visual alignment.
examples/sites/demos/pc/app/dialog-box/secondary-dialog-composition-api.vue (1)
14-14: Button reordering for consistent UI pattern.The "子弹窗" button has been repositioned to follow the cancel button, maintaining a consistent button ordering pattern across dialog components.
examples/sites/demos/pc/app/dialog-box/close-on-press-escape.spec.ts (1)
6-8: Improved test robustness with scoped selectors.The introduction of a demo-scoped selector improves test reliability by ensuring that interactions target only elements within the specific dialog-box demo component rather than potentially matching elements elsewhere on the page.
examples/sites/demos/pc/app/dialog-box/secondary-dialog.vue (1)
14-14: Consistent button ordering across component variants.The "子弹窗" button has been repositioned to follow the cancel button, matching the changes made to the composition API version and maintaining consistent UI patterns across both implementation styles.
examples/sites/demos/pc/app/dialog-box/basic-usage-composition-api.vue (1)
7-8: UI changes look goodThe updated button styling with rounded corners and consistent text spacing (adding spaces between Chinese characters) improves the visual presentation. The reordering of buttons with "Cancel" before "Confirm" follows common UI patterns.
examples/sites/demos/pc/app/dialog-box/custom-dialog-title.spec.ts (1)
6-9: Test improvements enhance reliabilityGood refactoring of the test to use scoped selector via the
demovariable. This approach:
- Improves test reliability by limiting element selection to specific demo component
- Makes tests more maintainable
- Correctly updates button text selector to match UI changes ("确 定" with space)
examples/sites/demos/pc/app/dialog-box/close-on-click-modal.spec.ts (1)
6-9: Consistent test scoping pattern appliedGood implementation of the scoped selector pattern with the
demovariable. This ensures all element selections and interactions occur within the specific component under test, making the tests more reliable and easier to maintain.examples/sites/demos/pc/app/dialog-box/double-dialog-height.vue (2)
29-29: Consistent button text formattingThe standardized text spacing for the confirm button ("确 定" with space between characters) aligns with the formatting pattern established in other dialog components.
33-34: Standardized button text presentationGood consistency in button text formatting:
- Action button now has space between characters ("取 消")
- Descriptive button has spaces removed ("子弹窗")
This maintains visual consistency with other dialog components in the application.
examples/sites/demos/pc/app/dialog-box/hidden-header.spec.ts (1)
6-8: Improved test reliability with scoped selectorsThe changes refine the test by scoping the selectors to the specific demo section (
#hidden-header) rather than the entire page. This approach:
- Increases test reliability by targeting elements within their proper context
- Reduces potential conflicts with identical selectors in other sections of the page
- Better isolates the test functionality to the specific component being tested
examples/sites/demos/pc/app/dialog-box/fullscreen.spec.ts (1)
6-9: Enhanced selector specificity with demo-scoped elementsThe changes properly scope the dialog box and button selectors to the specific fullscreen demo container rather than the entire page. This follows the same pattern applied to other dialog box tests and improves test isolation and reliability.
examples/sites/demos/pc/app/dialog-box/double-dialog-height-composition-api.vue (2)
29-29: Standardized button text formattingThe confirmation button text has been updated to maintain consistent spacing conventions with other dialog buttons in the application.
33-34: Standardized footer button formattingThe button text formatting has been standardized for both the cancel button and the child dialog button. This ensures consistent spacing in button labels across the application.
examples/sites/demos/pc/app/dialog-box/draggable.spec.ts (1)
6-10: Improved test reliability with demo-scoped selectorsThe changes appropriately scope the selectors to the specific draggable demo section instead of the entire page. This pattern:
- Makes tests more reliable by targeting elements within their proper context
- Reduces potential conflicts with identical selectors elsewhere on the page
- Follows the consistent pattern applied across other dialog box test files
examples/sites/demos/pc/app/dialog-box/custom-dialog-footer.spec.ts (1)
6-9: Good refactoring to use scoped element selectionThe changes improve test isolation by introducing a
demovariable that scopes all element selections to the specific dialog component being tested. This approach is more maintainable than using global page selectors and aligns with best practices for component testing.packages/theme/src/dialog-box/index.less (1)
202-209: Good improvement for theming flexibilityThe addition of
.inject-DialogBox-vars()and switching from hardcoded background color to a CSS variable (--tv-DialogBox-mask-bg-color) improves theming flexibility and maintainability. This approach aligns with modern CSS practices and makes it easier to implement different themes.examples/sites/demos/pc/app/dialog-box/dialog-top-height.spec.ts (2)
6-8: Good refactoring to use scoped element selectionIntroducing the
demovariable to scope element selection to the specific component being tested improves test isolation and maintainability.
11-12: Updated button names to match UI changesThe button text has been updated to include spaces between characters ("确 定" instead of "确定"), which aligns with the changes made to the component's UI in this PR.
examples/sites/demos/pc/app/dialog-box/transition-effect.spec.ts (2)
6-8: Good refactoring to use scoped element selectionThe introduction of the
demovariable improves test isolation by scoping element selection to the specific component being tested, making the tests more maintainable and reliable.
10-11: Improved selector specificityThe changes improve the specificity of the element selections by using the scoped
demovariable, which makes the test more robust against changes in other parts of the page.examples/sites/demos/pc/app/dialog-box/lock-scroll.spec.ts (3)
6-6: Good practice: adding a scoped demo selector.Using a scoped selector for the specific demo container improves test isolation and makes selectors more reliable.
8-9: Improved selector specificity.Changing selectors from page-scoped to demo-scoped improves test robustness and prevents potential conflicts with elements from other parts of the page.
16-16: Button text updated to match UI changes.The button text is now '确 定' with a space, which matches the changes made in the component. This ensures test consistency with the actual UI.
examples/sites/demos/pc/app/dialog-box/secondary-dialog.spec.ts (2)
6-6: Good practice: adding a scoped demo selector.Using a scoped selector for the specific demo container improves test isolation and makes selectors more reliable.
8-9: Improved selector specificity.Updating selectors to use the scoped demo variable instead of the global page context helps isolate selectors to just the secondary dialog component, making tests more robust.
examples/sites/demos/pc/app/dialog-box/custom-dialog-content.spec.ts (2)
6-8: Good practice: adding scoped selectors.Creating scoped selectors for the demo container and its components improves test isolation and reliability.
13-13: Button text updated to match UI changes.The confirmation button selector now uses a regex pattern with space '确 定', matching UI changes and making the test more flexible with the pattern match.
examples/sites/demos/pc/app/dialog-box/destroy-on-close.spec.ts (2)
7-7: Improved selector specificity.Using the demo-scoped selector for the dialog box improves test reliability by ensuring we're targeting elements within the specific demo container.
11-11: Button text updated for consistency.The confirmation button text has been updated from '确定' to '确 定' with a space, maintaining consistency with UI changes across the component.
Also applies to: 16-16
examples/sites/demos/pc/app/dialog-box/custom-dialog-content-composition-api.vue (2)
5-5: Simplified dialog content.The dialog content has been simplified by replacing what was likely a
<tiny-alert>component with a basic HTML<b>element containing the text "自定义内容" (Custom content). This change makes the example more straightforward but removes any styling or functionality that the alert component might have provided.
15-15: Cleaned up unused import.The import statement has been correctly updated to remove the TinyAlert component that is no longer being used in the template. This is good practice to avoid unnecessary imports.
examples/sites/demos/pc/app/dialog-box/dialog-width.spec.ts (2)
6-6: Improved test specificity with scoped locator.Adding a scoped locator with the ID
#dialog-widthis a good practice as it ensures that element selections are constrained to the specific component being tested. This prevents potential issues with multiple dialog components on the same page.
8-9: Updated element selections to use scoped locator.All element selections have been properly updated to use the scoped
demolocator instead of the global page context. This makes the tests more robust and less prone to failures if similar elements exist elsewhere on the page.Also applies to: 11-12
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
Style
Theming