feat: refactor Menu to extract trigger prop

[aversini]

This is a breaking change, but we are in alpha so no major version bump

Summary by CodeRabbit

• New Features

  • Updated the Menu component to use a ButtonIcon as a trigger across various components.
  • Added a new property noInternalClick to control internal click behavior in buttons for Safari compatibility.

• Refactor

  • Refactored the Menu component to handle triggers and labels more efficiently.
  • Replaced the ButtonIcon with a standard button in the MenuItem component, adjusting props accordingly.

• Documentation

  • Updated story files to reflect changes in Menu and Button components.

[coderabbitai]

Walkthrough

The recent updates focus on enhancing the Menu component across various files by using a ButtonIcon as a trigger instead of a direct icon. Additionally, improvements in button functionalities include introducing a noInternalClick property to manage specific browser behavior. These changes enhance modularity and flexibility in UI component interactions.

Changes

File Path	Change Summary
.../Header.stories.tsx .../Menu.stories.tsx .../DarkMode.stories.tsx	Updated Menu component to use ButtonIcon as a trigger instead of IconSettings.
.../Button/ButtonTypes.d.ts .../private/BaseButton.tsx	Introduced noInternalClick property in button types and handling.
.../Menu/Menu.tsx .../Menu/MenuItem.tsx .../Menu/MenuTypes.d.ts .../Menu/__tests__/Menu.test.tsx	Refactored Menu and MenuItem components, updated type declarations, and adjusted test implementations to align with the new trigger mechanism.

---

Recent Review Details

Configuration used: .coderabbit.yaml
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 04e346e and e428513.

Files selected for processing (3)

• packages/ui-components/src/components/Menu/Menu.tsx (3 hunks)
• packages/ui-components/src/components/Menu/tests/utilities.test.tsx (1 hunks)
• packages/ui-components/src/components/Menu/utilities.ts (1 hunks)

Files skipped from review as they are similar to previous changes (1)

• packages/ui-components/src/components/Menu/Menu.tsx

Additional comments not posted (14)

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

1-15: The implementation of getDisplayName function correctly handles various types of input to extract a display name. Good use of type checking and property access to ensure robustness.

packages/ui-components/src/components/Menu/__tests__/utilities.test.tsx (13)

4-11: This test case correctly verifies that getDisplayName returns the displayName of a component when it is explicitly set. Well-structured test for this scenario.

---

13-15: This test ensures that getDisplayName correctly handles and returns the name for HTML string components like "input". Simple and effective test.

---

17-20: The test case effectively checks that getDisplayName retrieves the function name for stateless named functions. This is important for ensuring that function components are correctly identified.

---

22-29: This test verifies that getDisplayName can extract the name of a class component. It's crucial for class components to be correctly recognized, and this test covers that scenario well.

---

31-39: This test case checks that getDisplayName correctly prioritizes the static displayName over the class name for class components. This is a key behavior for components that might have a different public facing name than their class name.

---

41-45: This test ensures that getDisplayName works for stateless components, which are commonly used in React. It's important to verify that these components are handled correctly.

---

47-50: This test case verifies that getDisplayName can handle and return the name for stateless functions assigned to a variable. This covers a common use case in React component development.

---

52-54: This test checks that getDisplayName returns a default name for anonymous functions, which is a necessary fallback for unnamed components.

---

56-58: This test ensures that getDisplayName handles arrow functions correctly by returning a default name. Arrow functions are frequently used in React, making this a relevant test.

---

60-62: This test case checks that getDisplayName returns "Element" for invalid elements, ensuring robust error handling in the utility function.

---

64-70: This test verifies that getDisplayName correctly identifies the displayName set on a function, even if the function's name differs. This is important for components that may have multiple names.

---

72-90: These tests ensure that getDisplayName can extract names from objects with a type property that has either a displayName or name. This covers a less common but possible scenario in React component handling.

---

92-97: This test checks that getDisplayName returns "Component" for objects that do not have a name or displayName, ensuring a default name is used when specific names are not available.

---

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 testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• 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 testing code 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 and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @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.
• Please see the configuration documentation for more information.
• 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/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 1

[github-actions]

Bundle Size (components)

Status	File	Size (Gzip)	Limits
✅	style.css	7.35 KB (+3 B +0.04%)	8 KB
✅	index.js	9.76 KB (+117 B +1.19%)	10 KB
✅	vendor.js	65.16 KB	67 KB

Overall bundle size: 82.27 KB (+120 B +0.14%)
Overall status: ✅

Bundle Size (form components)

Status	File	Size (Gzip)	Limits
✅	index.js	4.83 KB (-5 B -0.10%)	20 KB
✅	vendor.js	44.49 KB	67 KB

Overall bundle size: 49.33 KB (-5 B -0.01%)
Overall status: ✅

Bundle Size (system)

Status	File	Size (Gzip)	Limits
✅	style.css	7.66 KB	8 KB
✅	index.js	1.93 KB	3 KB
✅	vendor.js	44.49 KB	46 KB

Overall bundle size: 54.09 KB
Overall status: ✅