feat!: introducing Buttons size prop and refactor

[aversini]

Summary by CodeRabbit

• New Features

  • Introduced a new size property for buttons, allowing users to choose between "small", "medium", and "large" sizes across various button components.

• Enhancements

  • Improved button wrapping behavior to accommodate flexible layouts.
  • Updated icon usage in ButtonIcon components for better visual representation.
  • Extended ButtonLink components to support maximum label length customization and enhanced spacing in layouts.

• Documentation

  • Updated storybook documentation to reflect new size property options for button components.

• Tests

  • Added tests to ensure proper rendering of buttons with different sizes.
  • Updated existing tests to align with the new size property and class changes.

[coderabbitai]

Walkthrough

The changes across various files in the codebase revolve around the introduction of a new size property for button components, which allows for small, medium, and large size variations. This property has been added to the TypeScript definitions, React component props, Storybook stories, and utility functions that generate CSS classes based on the button size. Additionally, there have been updates to the Storybook stories to demonstrate the new size options and modifications to the test suites to cover the new functionality.

Changes

File Path	Change Summary
.../src/stories/Button.stories.tsx .../src/stories/ButtonIcon.stories.tsx .../src/stories/ButtonLink.stories.tsx	Added size property to meta with options and updated render functions.
.../src/components/Button/Button.tsx .../src/components/Button/ButtonIcon.tsx .../src/components/Button/ButtonLink.tsx	Introduced size parameter in component props with default values and updated destructuring.
.../src/components/Button/ButtonTypes.d.ts	Updated ButtonProps, ButtonLinkProps, and ButtonIconProps types to include a size property.
.../src/components/Button/__tests__/Button.test.tsx .../src/components/Button/__tests__/ButtonIcon.test.tsx .../src/components/Button/__tests__/ButtonLink.test.tsx	Modified existing tests and added new tests for different button sizes.
.../src/components/Button/utilities.ts	Updated utility functions to handle size property and accept objects as arguments.

---

Tips

Chat with CodeRabbit Bot (@coderabbitai)

• If you reply to a review comment from CodeRabbit, the bot will automatically respond.
• To engage with CodeRabbit bot directly around the specific lines of code in the PR, mention @coderabbitai in your review comment
• Note: Review comments are made on code diffs or files, not on the PR overview.
• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

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.

Note: For conversation with the bot, please use the review comments on code diffs or files.

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

[bundlemon]

BundleMon

Files updated (2)

Status	Path	Size	Limits
✅	assets/index.js	6.1KB (+109B +1.77%)	10KB
✅	assets/style.css	3.35KB (+63B +1.87%)	4KB

Unchanged files (1)

Status	Path	Size	Limits
✅	index.html	316B	2KB

Total files change +172B +1.75%

Final result: ✅

View report in BundleMon website ➡️

---

Current branch size history | Target branch size history

[coderabbitai]

Review Status

Actionable comments generated: 2

Configuration used: .coderabbit.yaml

Commits

Files that changed from the base of the PR and between 3ec2ef0 and 27613b2.

Files selected for processing (11)

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

Additional comments: 30

packages/documentation/src/stories/Button.stories.tsx (3)

• 12-18:
  The addition of the size property to the args object with a default value of "medium" aligns with the pull request summary and provides a sensible default for the Button component.

• 32-41:
  The size property has been correctly added to the argTypes object with the appropriate options and control type, ensuring that the Storybook interface will allow users to switch between different sizes for the Button component.

• 57-63:
  The update to the Basic story's render function, adding the "flex-wrap" class to the wrapping div, is consistent with the pull request summary and ensures that the buttons will wrap correctly when not enough space is available.

packages/documentation/src/stories/ButtonIcon.stories.tsx (3)

• 17-17:
  The addition of the size property to the args object aligns with the pull request summary and is a necessary update for the new feature.

• 44-45:
  The size property in the argTypes object is correctly configured with the appropriate options and control type.

• 58-58:
  The use of <IconSettings /> here is acceptable as the summary indicates that only some instances have been replaced with <IconEdit />.

packages/documentation/src/stories/ButtonLink.stories.tsx (3)

• 14-17: The size property has been added to the args object with a default value of "small". This aligns with the summary stating that ButtonLink components now have a "small" default size. This change should be cross-checked with the implementation in the ui-components package to ensure consistency.

• 40-49: New properties size and maxLabelLength have been added to the argTypes object. The size property is correctly configured with radio buttons for "small", "medium", and "large", and maxLabelLength is controlled by a number input. This matches the summary description and provides the necessary Storybook controls for these new properties.

• 57-67: The render function in the Basic export has been updated. The wrapping div's class has been changed to "flex flex-wrap gap-2", and longer text content has been added to some ButtonLink components to demonstrate the new size property. This change is consistent with the summary and improves the visual demonstration of the components in the Storybook.

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

• 14-20:
  The addition of the size property with a default value of "medium" is consistent with the summary and is properly integrated into the Button component's props.

• 31-36:
  The size property is correctly passed to the getButtonClasses utility function, which has been refactored to handle it as per the summary.

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

• 18-21:
  The addition of the size property with a default value of "medium" is correctly implemented and follows the summary description.

• 31-35:
  The size property is correctly passed to the getButtonClasses utility function. Ensure that getButtonClasses is updated to handle this new property as described in the summary.

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

• 13-19:
  The addition of the size parameter with a default value of "small" is correctly implemented and follows the summary description.

• 32-37:
  The size parameter is correctly passed to the getButtonClasses utility function, ensuring that the button's class string will reflect the specified size.

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

• 11-18:
  The addition of the size property to ButtonProps is consistent with the pull request summary and allows for size customization of buttons.

• 20-28:
  The addition of the size property to ButtonLinkProps aligns with the pull request summary, enabling size customization for link-styled buttons.

• 30-35:
  The inclusion of the size property in ButtonIconProps is in line with the pull request summary, facilitating size control for icon buttons.

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

• 21-28:
  The changes to the default button's classes align with the new size property implementation.

• 37-43:
  The renaming of the slim button test to indicate its legacy status and the adjustment of expected classes are appropriate.

• 46-61:
  The addition of tests for different button sizes ensures that the new size property is functioning as expected.

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

• 3-4:
  The addition of expectToHaveClasses is appropriate for the new tests that have been added.

• 17-28:
  The test has been correctly updated to reflect the new class expectations due to the size property changes.

• 89-117:
  The new tests for the size property are well-implemented and check for the correct classes corresponding to each size variant.

packages/ui-components/src/components/Button/__tests__/ButtonLink.test.tsx (5)

• 3-3:
  The addition of the expectToHaveClasses import is appropriate for the new tests that check for specific classes based on the size property.

• 13-22: > Note: This review was outside the patches, so it was mapped to the patch with the greatest overlap. Original lines [19-27]

Renaming the test to "should render a slim (legacy) anchor" is a good practice to indicate that this test is for a legacy feature, which may be deprecated in the future.

• 29-57:
  The new tests for the size property are well-implemented and ensure that the correct classes are applied for each size variant.

• 97-102:
  The test for an anchor with truncated text correctly checks for the presence of an ellipsis, ensuring that the maxLabelLength property functions as expected.

• 109-114:
  The test for an anchor with full text correctly checks for the entire label, ensuring that the maxLabelLength property does not truncate text unnecessarily.

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

• 106-125:
  The changes to getButtonClasses correctly integrate the new size property with the existing class generation logic, ensuring that the correct classes are applied based on the button size.