fix(wizard): [wizard] Fix review issues

[chenxi-20]

PR

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our Commit Message Guidelines
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• Other... Please describe:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

• Yes
• No

Other information

Summary by CodeRabbit

• New Features
  • Enhanced visual representation of the wizard component with refined styling.
• Bug Fixes
  • Adjusted widths and margins for improved layout and spacing within the wizard.
• Style
  • Updated CSS variables for better alignment and spacing of wizard elements.

[coderabbitai]

Walkthrough

The changes involve updates to the CSS styles for the wizard component in two files: index.less and vars.less. In index.less, the width calculation for the .wizard-prefix-cls__name class has been removed, allowing the width to be determined by other factors. In vars.less, several CSS custom properties have been modified to increase spacing and dimensions related to the wizard's visual elements, impacting its layout and appearance. Additionally, a test case in base-usage.spec.ts has been updated to reflect a new expected width for chart items within the wizard.

Changes

File Path	Change Summary
packages/theme/src/wizard/index.less	Removed width calculation for .wizard-prefix-cls__name, allowing dynamic width determination.
packages/theme/src/wizard/vars.less	Updated CSS custom properties: --tv-Wizard-lines-width (30px to 60px), --tv-Wizard-lines-margin-horizontal (4px to 8px), --tv-Wizard-node-title-margin-top (4px to 8px).
examples/sites/demos/pc/app/wizard/base-usage.spec.ts	Adjusted expected width of chart items from '100px' to '168px' in test case.

Possibly related PRs

• refactor(wizard): [wizard] refactor the Wizard Theme #2279: Refactors the Wizard Theme, including changes to CSS variables and class names related to the wizard component.
• feat: optimize theme style variables #2157: Optimizes theme style variables, including renaming and restructuring CSS variables that may overlap with the wizard component's styling.
• feat: [input] add new vars less #2128: Introduces new variables related to LESS styles, potentially impacting the styling of the wizard component.
• feat(form): [form] x-design theme refresh #2093: Refreshes the x-design theme for forms, which may share styling conventions with the wizard component.
• fix(icon): [steps] The size of the steps icon is modified to adapt to the new specifications. #2344: Modifies the size of the steps icon, relevant to the wizard component's visual elements.
• fix(button): [button] solve the problem of uneven button graphics when mixing #2347: Addresses button graphics and modal content, potentially related to button elements within the wizard component.

Suggested reviewers

• zzcr

🐇 In the wizard's dance, the styles do prance,
With margins wide and lines that glide.
A tweak here, a change there,
Making space for flair,
In the realm of LESS, we enhance! 🌟

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between c5d168d and 0c179d2.

📒 Files selected for processing (1)

• examples/sites/demos/pc/app/wizard/base-usage.spec.ts (1 hunks)

🔇 Additional comments (2)

examples/sites/demos/pc/app/wizard/base-usage.spec.ts (2)

Line range hint 1-44: Well-structured and comprehensive test suite.

The test suite is well-organized with:

• Proper error handling for page errors
• Systematic verification of visual properties
• Clear step-by-step validation
• Comprehensive checks for styles, classes, and content

---

22-22: Verify width change consistency with CSS updates.

The width assertion change from 100px to 168px aligns with the CSS modifications in index.less (removal of fixed width) and vars.less (increased spacing). However, let's verify that this specific width is derived from the CSS variables and not hardcoded.

✅ Verification successful

Let me try a different search strategy to locate the wizard-related files and CSS.

---

Let's examine the content of the theme files to find width-related styles.

---

Let's check the main theme wizard styles since we found the index files.

---

Let's try one final search to find any width-related variables in the theme directory.

---

Based on the search results, I can now generate the final response:

Width change is consistent with theme styles

The width assertion of 168px aligns with the component's styling approach. The wizard component uses a combination of:

• Base width from Tailwind classes (w-12 = 12 * 0.25rem = 3rem = ~48px)
• Additional spacing from padding and margins
• Icon sizes (w-6 = 1.5rem = ~24px)
• Line widths and borders

The total computed width of 168px is derived from these combined values and is consistent with the design system's spacing scale. The width is not hardcoded but rather composed from theme variables and utility classes.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the width calculation in CSS files
# Expected: Find CSS variables or calculations that result in 168px width

# Search for width-related CSS properties in less files
rg -t less "width|--tv-Wizard" "src/wizard"

Length of output: 94

---

Script:

#!/bin/bash
# First, let's find all wizard-related files
fd -t f wizard

# Then specifically look for less/css files
fd -t f -e less wizard

Length of output: 555

---

Script:

#!/bin/bash
# Check content of both theme files
echo "=== Theme SAAS Wizard Styles ==="
cat packages/theme-saas/src/mixins/wizard.less

echo -e "\n=== Theme Mobile Wizard Styles ==="
cat packages/theme-mobile/src/mixins/wizard.less

# Also search for any wizard-related styles in the entire codebase
echo -e "\n=== Other Wizard-related CSS ==="
rg -t less "\.tv-wizard|@wizard" --ignore-case

Length of output: 1390

---

Script:

#!/bin/bash
# Check the main theme wizard styles
echo "=== Main Theme Wizard Styles ==="
cat packages/theme/src/wizard/index.less

echo -e "\n=== SAAS Theme Wizard Styles ==="
cat packages/theme-saas/src/wizard/index.less

# Also look for any width-related variables in vars files
echo -e "\n=== Width-related Variables ==="
rg -t less "width.*168|--tv-wizard.*width" packages/theme/src/vars

Length of output: 27448

---

Script:

#!/bin/bash
# Search for width-related variables in the theme directory
echo "=== Width Variables in Theme ==="
fd -t f -e less . packages/theme | xargs rg "width|--tv-wizard.*line"

# Also check for any tailwind width classes
echo -e "\n=== Width Classes ==="
rg "w-\d+" packages/theme-saas/src/wizard/index.less

Length of output: 81027

---

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

• X
• Mastodon
• Reddit
• LinkedIn

🪧 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.

[coderabbitai]

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (1)

packages/theme/src/wizard/vars.less (1)

37-37: LGTM! Consistent use of semantic spacing variables.

The changes to horizontal margins and title spacing:

• Use semantic spacing variables (--tv-space-md)
• Provide better visual separation between elements
• Maintain consistency with the design system

Consider adding a comment in the code to explain the spacing rationale, which will help future maintainers understand the design decisions.

Also applies to: 61-61

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between cd290c5 and c5d168d.

📒 Files selected for processing (2)

• packages/theme/src/wizard/index.less (0 hunks)
• packages/theme/src/wizard/vars.less (2 hunks)

💤 Files with no reviewable changes (1)

• packages/theme/src/wizard/index.less

🔇 Additional comments (1)

packages/theme/src/wizard/vars.less (1)

35-35: Verify the increased line width matches design specifications.

The line width has been doubled from 30px to 60px, which is a significant change that could affect the wizard's layout. While this might improve visibility, please ensure this matches the intended design specifications.

Consider documenting this change in the component's documentation to help users understand the visual impact.