feat(ButtonGroup): support button-group component

[wjw-gavin]

related: #13675

Before submitting a pull request, please read the contributing guide.

在提交 pull request 之前，请阅读 贡献指南。

[gemini-code-assist]

Summary of Changes

Hello @wjw-gavin, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces a new ButtonGroup component to the Vant UI library, providing a structured way to group Button components. This enhancement allows for consistent styling across multiple buttons within a group by enabling inheritance of properties like type, size, and round from the parent ButtonGroup. The changes include the component's implementation, updated documentation, a new demo, and comprehensive test coverage to ensure its functionality and integration.

Highlights

• New Component: ButtonGroup: Introduced a new ButtonGroup component that allows grouping multiple Button components. This component provides a container for buttons, enabling shared styling and behavior.
• Prop Inheritance for Buttons: The Button component now supports inheriting type, size, and round properties from its parent ButtonGroup if these properties are not explicitly defined on the individual Button. This simplifies styling for grouped buttons.
• Documentation and Demo Updates: Comprehensive updates to both English and Chinese documentation (README.md, README.zh-CN.md) have been made to include usage examples and API details for the new ButtonGroup component. The demo page (demo/index.vue) has also been updated to showcase its functionality.
• Styling for ButtonGroup: New CSS rules have been added in index.less to correctly style the ButtonGroup, ensuring proper display as an inline-flex container, managing border-radius for grouped buttons, and handling hairline and round variations.
• Test Suite Enhancements: The button test suite has been refactored from .ts to .tsx and expanded to include dedicated tests for the ButtonGroup component, covering its rendering, prop application, and inheritance logic.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

• packages/vant/src/button/Button.tsx
  • Imported useParent and BUTTON_GROUP_KEY to establish parent-child relationship with ButtonGroup.
  • Modified setup function to retrieve parent ButtonGroup context.
  • Updated render function to conditionally inherit type, size, and round props from the parent ButtonGroup.
• packages/vant/src/button/ButtonGroup.tsx
  • Added new file for the ButtonGroup component.
  • Defined buttonGroupProps for type, size, and round properties.
  • Implemented useChildren to manage child Button components.
  • Exported BUTTON_GROUP_KEY for context injection.
• packages/vant/src/button/README.md
  • Added a new 'Button Group' section with usage examples.
  • Updated API documentation to include ButtonGroup Props and ButtonGroup Slots.
  • Renamed existing API sections to 'Button Props', 'Button Events', and 'Button Slots' for clarity.
• packages/vant/src/button/README.zh-CN.md
  • Added a new '按钮组' (Button Group) section with usage examples.
  • Updated API documentation to include ButtonGroup Props and ButtonGroup Slots.
  • Renamed existing API sections to 'Button Props', 'Button Events', and 'Button Slots' for clarity.
• packages/vant/src/button/demo/index.vue
  • Imported ButtonGroup component.
  • Added new translation keys for 'buttonGroup'.
  • Included a new demo block to showcase ButtonGroup with various type, size, and round configurations.
  • Added CSS to remove margin-right for buttons within a van-button-group.
• packages/vant/src/button/index.less
  • Added appearance: none; to .van-button for improved styling consistency.
  • Introduced styles for .van-button-group to enable inline-flex display.
  • Implemented specific border-radius rules for first and last child buttons within a group.
  • Added styling for hairline and round variations of buttons within a ButtonGroup.
• packages/vant/src/button/index.ts
  • Exported the new ButtonGroup component.
  • Exported buttonGroupProps and BUTTON_GROUP_KEY.
  • Exported ButtonGroupProps and ButtonGroupProvide types.
  • Added VanButtonGroup to the GlobalComponents interface for global type recognition.
• packages/vant/src/button/test/snapshots/demo-ssr.spec.ts.snap
  • Updated snapshot to reflect the new ButtonGroup demo output in SSR context.
• packages/vant/src/button/test/snapshots/demo.spec.ts.snap
  • Updated snapshot to reflect the new ButtonGroup demo output.
• packages/vant/src/button/test/snapshots/index.spec.ts.snap
  • Renamed to index.spec.tsx.snap.
  • Updated snapshot to include new tests for ButtonGroup rendering and prop inheritance.
• packages/vant/src/button/test/index.spec.ts
  • Removed the old test file.
• packages/vant/src/button/test/index.spec.tsx
  • Added new test file, replacing the old .ts version.
  • Included existing button tests and new tests specifically for ButtonGroup functionality, including prop inheritance and rendering.

Activity

• The pull request was opened by wjw-gavin.
• The PR introduces a new feature, indicated by the 'feat' prefix in the title.
• The changes are related to adding support for a button-group component.
• The PR description links to a related issue on GitHub: https://github.com/youzan/vant/issues/13675.
• Contribution guidelines in both English and Chinese are referenced in the PR description.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a new ButtonGroup component, allowing multiple buttons to be grouped together and inherit common properties like type, size, and round. The changes include adding the ButtonGroup component, integrating it with the existing Button component for prop inheritance, updating documentation, and adding corresponding styles and tests. Overall, the implementation is well-structured and adds valuable functionality.

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 89.34%. Comparing base (ec5b45b) to head (15e7d9b).
⚠️ Report is 283 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #13774      +/-   ##
==========================================
- Coverage   89.60%   89.34%   -0.27%     
==========================================
  Files         257      258       +1     
  Lines        7013     6709     -304     
  Branches     1736     1678      -58     
==========================================
- Hits         6284     5994     -290     
+ Misses        384      380       -4     
+ Partials      345      335      -10     

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

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.