feat(ButtonIcon): adding support for labelLeft

[aversini]

Summary by CodeRabbit

• New Features

  • Introduced labels for previous and next page navigation in UI components.
  • Added support for displaying labels to the left of button icons, enhancing UI flexibility.

• Refactor

  • Updated button icon component to handle new label positioning, improving user interface consistency.

• Tests

  • Modified button icon tests to account for new label positions and sizes, ensuring reliability.

[coderabbitai]

Walkthrough

The recent updates introduce enhancements to the ButtonIcon component, adding the capability to display labels on both the left and right sides of the icon. This feature is supported through modifications across various files, including the addition of new props, updates to component rendering logic, and adjustments in utility functions and tests to accommodate the new label positioning options.

Changes

File Path	Change Summary
.../src/Components/ButtonIcon.stories.tsx	Added IconNext and IconPrevious imports; updated WithLabel story for navigation button icons.
.../src/components/Button/ButtonIcon.tsx	Added labelLeft prop for displaying labels to the left of the icon.
.../src/components/Button/ButtonTypes.d.ts	Introduced labelLeft property to ButtonIconProps.
.../src/components/Button/__tests__/ButtonIcon.test.tsx	Updated tests for button icons with new size classes and label positions.
.../src/components/Button/utilities.ts	Added labelLeft handling in getButtonClassesProps and updated class generation functions accordingly.

---

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>.
  • Generate unit-tests for this file.
• 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 tests 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 generate interesting stats about this repository from git and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit tests.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

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 as PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• The JSON schema for the configuration file is available here.
• 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/coderabbit-overrides.v2.json

CodeRabbit Discord Community

Join our Discord Community to get help, request features, and share feedback.

[github-actions]

Bundle Size

Status	File	Size (Gzip)	Limits
✅	style.css	7.09 KB (-5 B -0.07%)	8 KB
✅	index.js	18.78 KB (+30 B +0.16%)	19 KB
✅	vendor.js	65.07 KB	67 KB

Overall bundle size: 90.94 KB (+25 B +0.03%)
Overall status: ✅

[coderabbitai]

Review Status

Actionable comments generated: 1

Configuration used: .coderabbit.yaml

Commits

Files that changed from the base of the PR and between a59fbab and 29b657e.

Files selected for processing (5)

• packages/documentation/src/Components/ButtonIcon.stories.tsx (2 hunks)
• packages/ui-components/src/components/Button/ButtonIcon.tsx (3 hunks)
• packages/ui-components/src/components/Button/ButtonTypes.d.ts (1 hunks)
• packages/ui-components/src/components/Button/tests/ButtonIcon.test.tsx (13 hunks)
• packages/ui-components/src/components/Button/utilities.ts (5 hunks)

Additional comments: 10

packages/ui-components/src/components/Button/ButtonIcon.tsx (2)

• 22-22: Adding labelLeft to the component props is correctly implemented, ensuring the new feature is received by the component.
• 40-40: Including labelLeft in the getButtonClasses call is essential for applying the correct styling based on the presence of a left label. This change is correctly implemented.

packages/ui-components/src/components/Button/ButtonTypes.d.ts (1)

• 91-94: The addition of the labelLeft property to the ButtonIconProps type is correctly implemented, enhancing the type definition to support the new feature.

packages/documentation/src/Components/ButtonIcon.stories.tsx (2)

• 2-8: The imports for IconNext and IconPrevious are correctly added to support the new story examples.
• 28-65: The modifications to the WithLabel story, including the addition of ButtonIcon components with labelLeft and labelRight for navigation buttons, are correctly implemented. These changes effectively demonstrate the new feature in the storybook documentation.

packages/ui-components/src/components/Button/utilities.ts (3)

• 22-22: The addition of labelLeft to the getButtonClassesProps type is correctly implemented, ensuring the utility functions can accommodate the new feature.
• 58-73: > 📝 NOTE

This review was outside the diff hunks and was mapped to the diff hunk with the greatest overlap. Original lines [32-70]

The modifications to the getButtonSizesClasses function to handle labelLeft alongside labelRight are correctly implemented. These changes ensure that the button's size and padding classes adjust based on the presence of labels, maintaining visual consistency.

• 130-136: > 📝 NOTE

This review was outside the diff hunks and was mapped to the diff hunk with the greatest overlap. Original lines [133-143]

Including labelLeft in the getButtonClasses function's parameters and passing it to getButtonSizesClasses is correctly implemented. This ensures that the button's overall classes reflect the new label positioning options.

packages/ui-components/src/components/Button/__tests__/ButtonIcon.test.tsx (2)

• 105-126: > 📝 NOTE

This review was outside the diff hunks and was mapped to the diff hunk with the greatest overlap. Original lines [13-121]

The updates to the test descriptions and class expectations to reflect the rendering of button icons with the labelLeft and labelRight properties are correctly implemented. These changes ensure the unit tests accurately cover the new label positioning options.

• 139-160: > 📝 NOTE

This review was outside the diff hunks and was mapped to the diff hunk with the greatest overlap. Original lines [123-188]

Continuing from the previous comment, the tests for medium and large button icons with labels on the left and right are also correctly updated. These tests comprehensively cover the various configurations of the ButtonIcon component, ensuring its behavior is as expected.