Skip to content

feat(ButtonGroup): support button-group component#13774

Open
wjw-gavin wants to merge 3 commits intoyouzan:mainfrom
wjw-gavin:feat/button-group
Open

feat(ButtonGroup): support button-group component#13774
wjw-gavin wants to merge 3 commits intoyouzan:mainfrom
wjw-gavin:feat/button-group

Conversation

@wjw-gavin
Copy link
Collaborator

related: #13675

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

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

@gemini-code-assist
Copy link

Summary of Changes

Hello @wjw-gavin, I'm Gemini Code Assist1! 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.

Copy link

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

props.size === 'normal' && group?.props.size
? group.props.size
: props.size;
const round = props.round || group?.props.round;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

The inheritance logic for the round prop has a potential bug. Since round is a Boolean prop, props.round will always be true or false. If a user explicitly sets :round="false" on a Button within a ButtonGroup that has round, the button will still inherit round from the group because false || group?.props.round would evaluate to group?.props.round (which is true). This prevents explicit false overrides.

To correctly handle explicit false values overriding parent props, you need to check if the prop was explicitly passed. A common pattern for this is to check vnode.props or adjust the prop definition to allow undefined as a default, then check for undefined.

For example, you could modify the buttonProps definition for round to allow undefined as a default, or use getCurrentInstance() to check instance.vnode.props.

Suggested change
const round = props.round || group?.props.round;
const round = props.round !== undefined && props.round !== null ? props.round : group?.props.round;

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

vue 的 Boolean prop 在未传时值是 false 不是 undefined 把,这样无法继承 group 属性了。
另外看 checker 中貌似是同样的问题,使用 getCurrentInstance 检查是否显式传入?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant