feat(Pill): introducing Pill component

[aversini]

Summary by CodeRabbit

• New Features
  • Introduced new color tokens for UI elements, enhancing visual cues for information, success, warning, and error states.
  • Added the Pill component to the UI library, enabling the display of release stage information in a visually appealing pill format.
• Documentation
  • Updated documentation to include the Pill component, showcasing its use alongside existing components.
• Tests
  • Implemented test coverage for the Pill component to ensure reliable rendering across various states and properties.

[coderabbitai]

Walkthrough

This update introduces a new Pill component to the UI library, expanding the existing design system with additional tokens for color styles and enhancing documentation. The Pill component, designed for displaying release stage information in a visually appealing manner, comes with comprehensive support including type definitions, utility functions for styling, and test cases to ensure reliability. This enhancement aligns with the goal of providing more versatile and accessible UI components.

Changes

Files	Change Summary
lib/tokens.ts	Added tokens for new color styles (violet, green, orange, red).
packages/documentation/.ladle/components.tsx	Added Pill component to documentation components.
packages/ui-components/src/common/constants.ts	Added PILL_CLASSNAME constant.
packages/ui-components/src/components/Pill/Pill.tsx packages/ui-components/src/components/Pill/PillTypes.d.ts packages/ui-components/src/components/Pill/__tests__/Pill.test.tsx packages/ui-components/src/components/Pill/utilities.ts	Introduced Pill component with props, types, tests, and utility functions.
packages/ui-components/src/components/index.ts	Exported Pill component.

---

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 (components)

Status	File	Size (Gzip)	Limits
✅	style.css	7.12 KB (+223 B +3.16%)	8 KB
✅	index.js	16.22 KB (-2.49 KB -13.30%)	20 KB
✅	vendor.js	65.07 KB	67 KB

Overall bundle size: 88.41 KB (-2.27 KB -2.50%)
Overall status: ✅

Bundle Size (system)

Status	File	Size (Gzip)	Limits
✅	style.css	2.83 KB	4 KB
✅	index.js	1.74 KB (+1 B +0.06%)	3 KB
✅	vendor.js	44.49 KB	46 KB

Overall bundle size: 49.06 KB (+1 B 0.00%)
Overall status: ✅

[coderabbitai]

Review Status

Actionable comments generated: 0

Configuration used: .coderabbit.yaml

Commits

Files that changed from the base of the PR and between ccde108 and 2e393f1.

Files selected for processing (9)

• lib/tokens.ts (3 hunks)
• packages/documentation/.ladle/components.tsx (2 hunks)
• packages/documentation/src/Components/Pill.stories.tsx (1 hunks)
• packages/ui-components/src/common/constants.ts (1 hunks)
• packages/ui-components/src/components/Pill/Pill.tsx (1 hunks)
• packages/ui-components/src/components/Pill/PillTypes.d.ts (1 hunks)
• packages/ui-components/src/components/Pill/tests/Pill.test.tsx (1 hunks)
• packages/ui-components/src/components/Pill/utilities.ts (1 hunks)
• packages/ui-components/src/components/index.ts (3 hunks)

Additional comments: 10

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

• 1-2: Ensure that the imported utilities and types are correctly used within the component. It's good practice to keep imports organized and only import what is necessary.
• 4-22: The implementation of the Pill component is concise and leverages destructuring for props, which enhances readability. The default value for the variant prop is set to "information", ensuring a fallback style. The use of getPillClasses for dynamic class generation based on props is a good practice for maintainability and scalability. Including a role="text" attribute enhances accessibility by indicating the purpose of the element to screen readers. However, consider adding a brief comment explaining the choice of role="text" for future maintainability.

packages/ui-components/src/components/Pill/PillTypes.d.ts (1)

• 1-23: The type definitions for PillProps are clear and well-documented. The use of comments to describe each prop enhances the readability and maintainability of the code. Including SpacingProps ensures that the component can leverage spacing utilities, promoting consistency across the UI library. This is a good practice for scalable and maintainable component design.

packages/documentation/src/Components/Pill.stories.tsx (1)

• 1-38: The Storybook stories for the Pill component are well-structured, providing examples of basic usage and hardcoded variants. The use of args in the Basic story allows for dynamic prop manipulation in the Storybook UI, enhancing the testing and demonstration capabilities. The HardCoded story effectively showcases the component with all available variants, which is useful for visual regression testing and design consistency checks. Consider adding a brief comment above each story to describe its purpose or usage scenario for better maintainability and clarity.

packages/ui-components/src/common/constants.ts (1)

• 35-35: The addition of the PILL_CLASSNAME constant is a good practice for maintaining consistency in class naming across the component library. It centralizes the class name, making future changes easier and reducing the risk of typos in multiple files. Ensure that this constant is used wherever the Pill component's class name is referenced.

packages/ui-components/src/components/index.ts (1)

• 32-39: > 📝 NOTE

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

Exporting the Pill component in the index.ts file correctly makes it accessible for consumers of the library. This is a crucial step in integrating the new component into the library. Ensure that all new components are added to this file to maintain consistency and ease of use.

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

• 1-46: The utility functions for generating CSS classes for the Pill component are well-implemented, using conditional class names based on the component's variant. The use of clsx for conditional class names is a best practice for readability and maintainability. However, consider adding comments to each utility function describing its purpose and the logic behind the class name choices. This will enhance maintainability and understanding for future contributors.

packages/documentation/.ladle/components.tsx (1)

• 11-26: > 📝 NOTE

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

Integrating the Pill component into the documentation alongside other components like ButtonIcon and Footer is a crucial step for visibility and usability. The example usage within renderImportLine function demonstrates a practical application of the component, which is beneficial for understanding its use cases. Ensure that the documentation is updated to reflect any changes or additions to the component's API or features.

lib/tokens.ts (1)

• 51-61: > 📝 NOTE

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

The addition of new tokens for surface, copy, and border styles related to the Pill component's themes is a good practice for theme consistency and scalability. It allows for easy adjustments and theme switching across the UI library. Ensure that these tokens are used consistently in the Pill component and consider using them in other components for a cohesive look and feel. Additionally, verify that the chosen colors meet accessibility standards for contrast and readability.

packages/ui-components/src/components/Pill/__tests__/Pill.test.tsx (1)

• 1-82: The test suite for the Pill component is comprehensive, covering the default rendering, rendering with different variants, and rendering with a custom class and description. This ensures that the component behaves as expected across various use cases. Using the expectToHaveClasses helper function for class name assertions is a good practice for readability and maintainability. Consider adding tests for edge cases or error handling if applicable, to further ensure the robustness of the component.