feat(button): [button] Adapting to the SMB theme #2079
Conversation
WalkthroughThe changes involve updates to button components across multiple Vue.js files and their corresponding test cases. Key modifications include the replacement of button labels, the introduction of a secondary button type, and adjustments to button styling and layout. Test cases have also been updated to reflect these changes, ensuring that functionality aligns with the new button configurations. Additionally, new CSS variables and styles have been added to enhance the visual presentation of buttons, particularly for plain and ghost button types. Changes
Suggested labels
Poem
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? 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
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (19)
- examples/sites/demos/pc/app/button/autofocus-composition-api.vue (1 hunks)
- examples/sites/demos/pc/app/button/autofocus.spec.ts (1 hunks)
- examples/sites/demos/pc/app/button/autofocus.vue (1 hunks)
- examples/sites/demos/pc/app/button/basic-usage-composition-api.vue (2 hunks)
- examples/sites/demos/pc/app/button/basic-usage.spec.ts (2 hunks)
- examples/sites/demos/pc/app/button/basic-usage.vue (2 hunks)
- examples/sites/demos/pc/app/button/dynamic-disabled-composition-api.vue (1 hunks)
- examples/sites/demos/pc/app/button/dynamic-disabled.spec.ts (2 hunks)
- examples/sites/demos/pc/app/button/dynamic-disabled.vue (1 hunks)
- examples/sites/demos/pc/app/button/ghost-composition-api.vue (1 hunks)
- examples/sites/demos/pc/app/button/ghost.spec.ts (1 hunks)
- examples/sites/demos/pc/app/button/ghost.vue (1 hunks)
- examples/sites/demos/pc/app/button/icon-composition-api.vue (1 hunks)
- examples/sites/demos/pc/app/button/icon.vue (1 hunks)
- examples/sites/demos/pc/app/button/loading-composition-api.vue (1 hunks)
- examples/sites/demos/pc/app/button/loading.vue (1 hunks)
- packages/theme/src/button/index.less (1 hunks)
- packages/theme/src/button/smb-theme.js (2 hunks)
- packages/theme/src/button/vars.less (2 hunks)
Files skipped from review due to trivial changes (6)
- examples/sites/demos/pc/app/button/autofocus-composition-api.vue
- examples/sites/demos/pc/app/button/autofocus.vue
- examples/sites/demos/pc/app/button/icon-composition-api.vue
- examples/sites/demos/pc/app/button/icon.vue
- examples/sites/demos/pc/app/button/loading-composition-api.vue
- examples/sites/demos/pc/app/button/loading.vue
Additional comments not posted (25)
examples/sites/demos/pc/app/button/autofocus.spec.ts (1)
6-6: Verify the updated button interaction.The test now interacts with the "Secondary Button" instead of the "Default Button." Ensure that this change aligns with the intended functionality of the test and that the "Secondary Button" is correctly configured to be tested for autofocus.
Verification successful
Verification successful: Button interaction change aligns with test objectives.
The test in
examples/sites/demos/pc/app/button/autofocus.spec.tsnow interacts with the "Secondary Button" as intended. The autofocus functionality is still being tested with the "默认聚焦" button. The change aligns with the test's objectives.
examples/sites/demos/pc/app/button/autofocus.spec.ts: Interaction with "次要按钮" (Secondary Button) confirmed.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the button interaction change in the autofocus test. # Test: Search for the button interaction change. Expect: Only occurrences of the new button interaction. rg --type typescript -A 5 $'await page.getByRole'Length of output: 85
Script:
#!/bin/bash # Description: Verify the button interaction change in the autofocus test. # Test: Search for the button interaction change. Expect: Only occurrences of the new button interaction. rg --type ts -A 5 $'await page.getByRole'Length of output: 147370
examples/sites/demos/pc/app/button/basic-usage.spec.ts (3)
6-6: Improved test specificity with role-based selectors.The update from class-based to role-based selectors enhances test maintainability and accessibility. The use of
.first()method ensures that the correct button instance is targeted, aligning with best practices for robust testing.
17-17: Consistent use of role-based selectors across tests.Updating to role-based selectors in this test case as well maintains consistency and ensures that the tests are resilient to changes in the HTML structure. The use of
.nth(1)is appropriately used to target the second instance of the buttons, which is crucial for accurate test results.
Line range hint
1-17: Verify the removal of specific button tests.The removal of tests for '圆角按钮' and '是否是圆形按钮' needs verification to ensure that the functionality they covered is either obsolete or adequately covered by other tests. This is crucial to maintain comprehensive test coverage and avoid regressions.
examples/sites/demos/pc/app/button/dynamic-disabled.spec.ts (1)
Line range hint
16-25: Updated test for button disabled state.The focus shift to the '次要按钮' aligns with the PR's theme adaptation. Ensure that the test accurately checks the disabled state before and after the switch action, and verify that the toggle functionality works as expected.
Verification successful
Test case correctly verifies button toggle functionality.
The test case accurately checks the disabled state of the '次要按钮' before and after the switch action, confirming that the toggle functionality works as expected. No further action is needed.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the toggle functionality of the button's disabled state. # Test: Check if the switch action effectively toggles the disabled state of the '次要按钮'. rg --type ts -A 5 $'次要按钮' examples/sites/demos/pc/app/button/dynamic-disabled.spec.tsLength of output: 862
examples/sites/demos/pc/app/button/basic-usage-composition-api.vue (3)
46-46: Updated margin styling for better layout consistency.The change from a bottom margin to a vertical margin could improve the visual consistency of the button rows. Verify the visual impact of this change to ensure it enhances the layout without causing any unintended shifts or overlaps.
12-15: Consistent updates across button sections.The addition of labels and the secondary button in the '朴素按钮' section maintains consistency with the '基本按钮' section. Verify the impact of removing the default plain button to ensure it does not reduce functionality or user experience.
Verification successful
Removal of default plain button does not impact functionality.
The
<tiny-button plain>is still used in other parts of the codebase, ensuring that its functionality is preserved. The removal from the specific section inbasic-usage-composition-api.vuedoes not negatively affect the overall user experience.
- Instances found in:
examples/sites/demos/pc/app/button/basic-usage-composition-api.vueexamples/sites/demos/pc/app/button/basic-usage.vueexamples/sites/demos/mobile-first/app/button/plain.vueexamples/sites/demos/mobile-first/app/button/basic-usage.vueScripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the impact of removing the default plain button on functionality. # Test: Check if the removal of the default plain button is covered by other button functionalities. rg --type vue -A 5 $'默认朴素按钮' examples/sites/demos/pc/app/button/basic-usage-composition-api.vueLength of output: 191
Script:
#!/bin/bash # Use ast-grep to search for any references to the default plain button in the codebase. # Search for any usage of the default plain button in Vue files. ast-grep --lang vue --pattern '<tiny-button plain> $_ </tiny-button>'Length of output: 178
Script:
#!/bin/bash # Use rg to search for any references to the default plain button in the codebase without specifying the file type. # Search for any usage of the default plain button in the codebase. rg '<tiny-button plain>.*</tiny-button>'Length of output: 458
3-6: Improved clarity with new labels and button changes.The addition of labels and the introduction of the '次要按钮' enhance the clarity and usability of the button section. Verify the impact of removing the default button to ensure it does not negatively affect user interactions.
examples/sites/demos/pc/app/button/dynamic-disabled-composition-api.vue (2)
6-6: Approved: Addition of Secondary ButtonThe addition of the "次要按钮" (Secondary Button) is correctly implemented, maintaining the existing logic for the disabled state. This change aligns with the PR's objectives to adapt the button component to the SMB theme.
15-15: Approved: Addition of Plain Secondary ButtonThe addition of the "次要按钮" (Secondary Button) with the
plainattribute is correctly implemented. This maintains the existing logic for the disabled state and aligns with the SMB theme adaptation, providing a stylistic variation that enhances the UI's visual diversity.examples/sites/demos/pc/app/button/basic-usage.vue (4)
3-3: Approved: Addition of Button LabelThe addition of the paragraph element labeling the primary buttons section as "基本按钮" (Basic Button) enhances the user interface by providing clear context. This is a good practice in UI design and aligns with the PR's objectives.
6-6: Approved: Addition of Secondary Button under Primary SectionThe addition of the "次要按钮" (Secondary Button) under the primary button section expands the options available to users, providing additional actions without overwhelming the interface. This change aligns with the PR's objectives and is implemented correctly.
12-12: Approved: Addition of Plain Button LabelThe addition of the paragraph element labeling the plain buttons section as "朴素按钮" (Plain Button) enhances the user interface by providing clear context. This is a good practice in UI design and aligns with the PR's objectives.
15-15: Approved: Addition of Plain Secondary Button under Plain SectionThe addition of the "次要按钮" (Secondary Button) under the plain button section, maintaining the plain style but changing its designation, is correctly implemented. This maintains the existing logic for the disabled state and aligns with the SMB theme adaptation, providing a stylistic variation that enhances the UI's visual diversity.
examples/sites/demos/pc/app/button/dynamic-disabled.vue (2)
6-6: Approved: Addition of Secondary ButtonThe addition of the "次要按钮" (Secondary Button) is correctly implemented, maintaining the existing logic for the disabled state. This change aligns with the PR's objectives to adapt the button component to the SMB theme.
15-15: Approved: Addition of Plain Secondary ButtonThe addition of the "次要按钮" (Secondary Button) with the
plainattribute is correctly implemented. This maintains the existing logic for the disabled state and aligns with the SMB theme adaptation, providing a stylistic variation that enhances the UI's visual diversity.examples/sites/demos/pc/app/button/ghost.spec.ts (2)
10-19: Test case for primary ghost button is correctly updated.The changes to the CSS properties for the primary ghost button align with the new SMB theme requirements. The test logic is correctly implemented to verify the appearance before and after a click event.
21-31: Test case for default ghost button is correctly updated.The changes to the CSS properties for the default ghost button align with the new SMB theme requirements. The test logic is correctly implemented to verify the appearance before and after a click event.
packages/theme/src/button/smb-theme.js (1)
79-196: Comprehensive update totinyButtonSmbThemealigns with SMB theme requirements.The extensive modifications to the
tinyButtonSmbThemeobject, including the addition of new properties and the removal of some existing ones, are correctly implemented to enhance the visual styling of buttons across various states. This aligns well with the PR's objectives to adapt the button component to the SMB theme.packages/theme/src/button/index.less (1)
252-260: New style rules for plain buttons are correctly implemented.The addition of new style rules for managing the border color of plain buttons under different states (default, disabled, and hover) is correctly implemented. These changes enhance the visual feedback for users, aligning well with the PR's objectives to improve the user experience.
packages/theme/src/button/vars.less (3)
104-106: New CSS variables for plain button styles added.The addition of
--ti-button-plain-border-colorand--ti-button-plain-disabled-border-colorenhances the theme's customization capabilities for plain buttons. This aligns with the PR's objective to adapt the button component to the SMB theme, ensuring that the styling options are flexible and comprehensive.
449-449: Adjustment in icon-only button width variable.The modification of
--ti-button-only-icon-widthtovar(ti-common-size-width-minor, 30px)suggests a more precise control over the width of icon-only buttons. This change should be tested to ensure it does not negatively impact the button layout, especially in contexts where precise alignment and spacing are critical.Run the following script to verify the layout impact:
447-447: Modification in icon font size variable.The update of
--ti-button-icon-font-sizetovar(--ti-common-font-size-0, 12px)may affect the visual consistency of icon buttons across the application. It's crucial to verify that this change integrates well with the overall design and does not disrupt user interface consistency.Run the following script to verify the visual impact:
examples/sites/demos/pc/app/button/ghost-composition-api.vue (1)
4-4: Label change approved; verify visual consistency.The change from "幽灵按钮" to "次要按钮" aligns with the PR's theme adaptation objectives. Ensure that this label change maintains visual consistency and does not disrupt user interactions.
Run the following script to verify the visual consistency and functionality:
examples/sites/demos/pc/app/button/ghost.vue (1)
4-4: Label change approved; verify visual consistency.The change from "幽灵按钮" to "次要按钮" aligns with the PR's theme adaptation objectives. Ensure that this label change maintains visual consistency and does not disrupt user interactions.
Run the following script to verify the visual consistency and functionality:
Verification successful
Label change verified; visual consistency maintained.
The label "次要按钮" is consistently applied across various components, including the specific instance mentioned in the review comment. This confirms that the visual consistency and user interaction are maintained as intended.
- The label "次要按钮" is present in multiple
<tiny-button>components with different attributes.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the visual consistency and functionality of the button. # Test: Search for the button label in the Vue.js component. Expect: Only occurrences of the new label. rg --type vue -A 5 $'次要按钮'Length of output: 100
Script:
#!/bin/bash # Description: Verify the visual consistency and functionality of the button by searching for the new label in .vue files. # Find all .vue files and search for the new label "次要按钮" fd --extension vue --exec rg '次要按钮' {}Length of output: 877
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
New Features
Bug Fixes
Style
Chores