fix(button): [button] fix button demo waring

[zzcr]

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
  • Updated the reset-time attribute for <tiny-button> components to use dynamic binding, enhancing reactivity.
• Bug Fixes
  • Ensured that the reset-time property is now treated as a reactive property across all button instances.

[coderabbitai]

Walkthrough

The changes involve modifying the template sections of two Vue files, ghost-composition-api.vue and ghost.vue. In both files, the reset-time attribute of the <tiny-button> components has been updated from a static string to a dynamic binding using the colon syntax (:). This adjustment applies to multiple instances of the button component across both files, ensuring that reset-time is treated as a reactive property.

Changes

File Path	Change Summary
examples/sites/demos/pc/app/button/ghost-composition-api.vue, examples/sites/demos/pc/app/button/ghost.vue	Updated reset-time attribute from reset-time="0" to :reset-time="0" for all <tiny-button> instances, enabling dynamic binding.

Possibly related PRs

• feat(button-group): [button-group] Adapting to the SMB theme #2099: Modifies the reset-time property binding for <tiny-button> components, similar to the changes made in this PR.
• feat(button): [button] Adapting to the SMB theme #2104: Changes button styles and introduces new CSS variables for ghost buttons, relating to the modifications in this PR.
• feat(button): [button] Adapting to the SMB theme #2120: Focuses on adapting button styles, including ghost buttons, aligning with the changes made in this PR.
• fix(button): add ghost's cssvars for button #2235: Introduces new CSS variables for ghost buttons, enhancing styling capabilities relevant to the changes in this PR.

Suggested reviewers

• zzcr

🐇 "In the garden, buttons bloom,
With reset times that now can zoom.
Dynamic bindings, oh what a sight,
Making our buttons feel just right!
Hopping with joy, we celebrate,
These changes make our code first-rate!" 🌼

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 5e16cbe and 4ea26ad.

📒 Files selected for processing (2)

• examples/sites/demos/pc/app/button/ghost-composition-api.vue (1 hunks)
• examples/sites/demos/pc/app/button/ghost.vue (1 hunks)

🧰 Additional context used

🔇 Additional comments (6)

examples/sites/demos/pc/app/button/ghost-composition-api.vue (3)

3-3: LGTM: Improved attribute binding for reset-time

The change from reset-time="0" to :reset-time="0" is a good improvement. It correctly binds the value as a number rather than a string, which is more appropriate for this attribute.

---

4-8: LGTM: Consistent application of reset-time binding

The :reset-time="0" change has been consistently applied to all button instances. This uniformity is excellent for code maintainability and ensures consistent behavior across different button types.

---

3-8: Overall: Good improvements, seeking context

The changes consistently update the reset-time attribute from a static string to a dynamic binding across all button instances. This is a positive change that improves type consistency.

However, to ensure a comprehensive review:

1. Could you provide more context on why this change was necessary?
2. Are there any behavioral changes to the buttons as a result of this update?
3. Have you tested these changes to ensure they don't introduce any regressions?

To verify the usage and impact of the reset-time prop, let's search for its definition and usage:

examples/sites/demos/pc/app/button/ghost.vue (3)

4-8: LGTM! Consistent application of changes.

The reset-time property has been consistently updated to use dynamic binding across all button types. This consistency is good practice and helps maintain code uniformity.

---

3-8: Summary of changes and request for additional information

The changes consistently update the reset-time property from a static string to a dynamic binding with a value of 0 across all button instances. This modification appears to be addressing a specific issue, possibly related to the button demo warning mentioned in the PR objectives.

To ensure a comprehensive review:

1. Could you provide more details about the specific warning that this PR is addressing?
2. What is the purpose of the reset-time property, and how does setting it to 0 resolve the issue?
3. Have you tested these changes to confirm that they resolve the warning without introducing any new issues?

#!/bin/bash
# Description: Check for any tests related to the button component or reset-time property
rg --type vue -i '(test|spec).*button'
rg --type vue -i '(test|spec).*reset-time'

---

3-3: LGTM! Please clarify the reset-time property.

The change from a static to a dynamic binding for reset-time is correct. However, could you please clarify the purpose of the reset-time property and the implications of setting it to 0?

✅ Verification successful

Verified reset-time Usage

The reset-time property is consistently used across multiple components in the codebase. Setting it to 0 in ghost.vue aligns with existing implementations and does not introduce any issues.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check if the reset-time property is documented or used elsewhere
rg --type vue -i 'reset-time'

Length of output: 141

---

Script:

#!/bin/bash
# Description: Search for the 'reset-time' property within all .vue files
rg --glob '*.vue' -i 'reset-time'

Length of output: 34774

---

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.