feat: Add tooltips to various UI elements (fixes #148). #160
Conversation
WalkthroughThis pull request introduces a series of modifications to UI components across multiple files in the project. Key changes include the creation of the new Changes
Sequence DiagramsequenceDiagram
participant UI as User Interface
participant MB as MenuBarIconButton
participant TT as Tooltip
UI->>MB: Hover/Interact
MB->>TT: Trigger Tooltip
TT-->>UI: Display Tooltip
Possibly Related PRs
Suggested Reviewers
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 (
|
junhaoliao
changed the title
junhaoliao
changed the title
…still be expanded even when the buttons are disabled.
![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
🧹 Nitpick comments (2)
src/components/MenuBar/index.tsx (2)
50-54: Consider accessibility improvements for tooltips.
The usage ofMenuBarIconButtonalong withtitleandtooltipPlacement={"bottom-start"}is effective for discoverability. However, ensure that screen reader users can also access these tooltips by providing additional ARIA attributes (e.g.,aria-labeloraria-describedby).
56-56: Confirm icon accessibility.
Using<FolderOpenIcon />is correct for visual representation. For fully accessible design, consider providing an accessible name (e.g., viaaria-label) in case tooltips are not read by the screen reader.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
src/components/CentralContainer/Sidebar/SidebarTabs/TabButton.tsx(0 hunks)src/components/MenuBar/ExportLogsButton.tsx(3 hunks)src/components/MenuBar/MenuBarIconButton.tsx(1 hunks)src/components/MenuBar/NavigationBar.tsx(3 hunks)src/components/MenuBar/SmallIconButton.tsx(0 hunks)src/components/MenuBar/index.tsx(2 hunks)src/components/StatusBar/index.tsx(2 hunks)src/components/theme.tsx(1 hunks)
💤 Files with no reviewable changes (2)
- src/components/MenuBar/SmallIconButton.tsx
- src/components/CentralContainer/Sidebar/SidebarTabs/TabButton.tsx
🧰 Additional context used
📓 Path-based instructions (6)
src/components/MenuBar/index.tsx (1)
Pattern **/*.{cpp,hpp,java,js,jsx,ts,tsx}: - Prefer false == <expression> rather than !<expression>.
src/components/theme.tsx (1)
Pattern **/*.{cpp,hpp,java,js,jsx,ts,tsx}: - Prefer false == <expression> rather than !<expression>.
src/components/StatusBar/index.tsx (1)
Pattern **/*.{cpp,hpp,java,js,jsx,ts,tsx}: - Prefer false == <expression> rather than !<expression>.
src/components/MenuBar/NavigationBar.tsx (1)
Pattern **/*.{cpp,hpp,java,js,jsx,ts,tsx}: - Prefer false == <expression> rather than !<expression>.
src/components/MenuBar/MenuBarIconButton.tsx (1)
Pattern **/*.{cpp,hpp,java,js,jsx,ts,tsx}: - Prefer false == <expression> rather than !<expression>.
src/components/MenuBar/ExportLogsButton.tsx (1)
Pattern **/*.{cpp,hpp,java,js,jsx,ts,tsx}: - Prefer false == <expression> rather than !<expression>.
🔇 Additional comments (17)
src/components/theme.tsx (1)
58-63: Looks good.
These default props for JoyTooltip appear consistent with the existing theme customizations. The outlined variant and arrow style are correctly integrated, and no conflicts or code smells are observed.
src/components/MenuBar/MenuBarIconButton.tsx (5)
1-6: Imports look well organised.
No issues identified. They comply with recommended import ordering and usage.
9-11: Interface extension is clear.
Defining MenuBarIconButtonProps to extend IconButtonProps is an effective way to ensure consistent prop usage in your custom component.
13-21: Documentation is succinct.
The JSDoc block accurately describes props and makes it easy for maintainers to understand the component interface.
22-37: Tooltip usage is straightforward and consistent.
Wrapping the button in a <span> ensures the tooltip is active when the button is disabled—following best practices for accessibility.
39-39: Export default is consistent with the kit's naming.
This suits the component-based architecture and fosters reusability.
src/components/StatusBar/index.tsx (2)
6-6: Tooltip import aligns with the global UI enhancements.
No conflicts found, and it maintains consistency with the rest of the codebase.
44-59: Tooltip wrapping ensures visibility even when disabled.
This approach provides a better user experience, particularly for communicating button functionality or restrictions.
src/components/MenuBar/ExportLogsButton.tsx (2)
20-20: The new import is an improvement.
Switching to MenuBarIconButton unifies button usage in the menu bar, promoting a more consistent UX.
Line range hint 32-60: Title prop enhances usability.
Providing a tooltip label (“Export logs”) clarifies button functionality, especially for first-time users.
src/components/MenuBar/NavigationBar.tsx (6)
3-3: Removal of size from ButtonGroup reduces potential conflicts.
Keeping default or context-based sizing within child components is often more flexible.
17-17: Importing MenuBarIconButton centralises logic.
It's good practice to use a unified component for consistent styling and tooltip handling.
50-56: Consistent naming for the data attribute and props.
Clear naming ensures that FIRST_PAGE action is easily identifiable when handling events.
57-63: Tooltip for previous page button is descriptive.
A consistent tooltip name helps guide users through the navigation.
67-73: Next page button usage is straightforward.
Reusing the same component fosters uniformity across the navigation bar.
74-80: Last page button is aligned with the pattern of preceding buttons.
All navigation buttons follow the same design language, creating a streamlined experience.
src/components/MenuBar/index.tsx (1)
19-19: Imports look good.
Importing MenuBarIconButton is a clear step towards consolidating button and tooltip logic in one place. This improves maintainability and consistency.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx (1)
71-74: Consider preferring “false == v”
According to the coding guidelines, favour usingfalse == vinstead of!v. This helps maintain consistency across the codebase.- setIsAllExpanded((v) => !v); + setIsAllExpanded((v) => false == v);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/components/CentralContainer/Sidebar/SidebarTabs/PanelTitleButton.tsx(2 hunks)src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx(4 hunks)src/components/theme.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/theme.tsx
🧰 Additional context used
📓 Path-based instructions (2)
src/components/CentralContainer/Sidebar/SidebarTabs/PanelTitleButton.tsx (1)
Pattern **/*.{cpp,hpp,java,js,jsx,ts,tsx}: - Prefer false == <expression> rather than !<expression>.
src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx (1)
Pattern **/*.{cpp,hpp,java,js,jsx,ts,tsx}: - Prefer false == <expression> rather than !<expression>.
🔇 Additional comments (9)
src/components/CentralContainer/Sidebar/SidebarTabs/PanelTitleButton.tsx (3)
4-4: Nice import usage for Tooltip
The usage of the Tooltip import aligns with the new tooltip feature introduced in the PR.
14-16: Good clarity in doc comments
Explicitly documenting className, title, and rest improves maintainability and eases onboarding for new contributors.
19-31: Comprehensive approach to Tooltip wrapping
By wrapping the IconButton in both a Tooltip and a span, you allow tooltips to display for disabled states. This is a recommended UI pattern, ensuring consistent and clear feedback to end-users.
src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx (6)
13-13: Tooltip import looks correct
Importing Tooltip from @mui/joy is consistent with other UI changes for tooltips, ensuring a standard visual style.
100-101: Clear naming for disabled state
Using isQueryInputBoxDisabled is descriptive and straightforward, enhancing code clarity around UI state handling.
107-112: Tooltip titles enhance clarity
Providing distinct title text for “Collapse all” or “Expand all” improves user understanding of the button’s function. Great job!
128-128: Appropriate disable logic
Disabling the ToggleButtonGroup conditionally with disabled={isQueryInputBoxDisabled} is clean, ensuring users can’t interact with query options when unavailable.
135-155: Span wrapper enables tooltips on disabled buttons
Wrapping disabled IconButton elements with a span preserves tooltip functionality, which is a recommended pattern in MUI.
159-162: Slot props usage is straightforward
Providing textarea and endDecorator overrides in slotProps simplifies component customisation while keeping the code readable. Nicely implemented.
Discussed offline: this tooltip overflow happens occasionally and is not always observed depending on the viewport size (in width). By snapshotting the overflow and zooming into the snapshot, it is believed that JoyUI did not take the tooltip shadow width into the tooltip size calculation, which caused the overflow. |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
src/components/MenuBar/MenuBarIconButton.tsx (3)
7-8: Remove extra blank lineKeep only one blank line between imports and the interface definition for better readability.
} from "@mui/joy"; - interface MenuBarIconButtonProps extends IconButtonProps {
13-21: Enhance JSDoc documentationThe documentation could be more comprehensive:
- Add description for
@returns- Document the purpose of
tooltipPlacement- Indicate which props are optional/required
/** * An icon button for use in the menu bar. * * @param props - * @param props.title Tooltip title. - * @param props.tooltipPlacement + * @param props.title - Tooltip text to display (required) + * @param props.tooltipPlacement - Position of the tooltip relative to the button (optional, defaults to "bottom") * @param props.rest - * @return + * @returns A menu bar icon button wrapped in a tooltip */
22-37: Enhance accessibility and performanceConsider the following improvements:
- Add aria-label for better accessibility
- Memoize the component to prevent unnecessary re-renders
-const MenuBarIconButton = ({ +const MenuBarIconButton = React.memo(({ tooltipPlacement, title, ...rest -}: MenuBarIconButtonProps) => ( +}: MenuBarIconButtonProps) => ( <Tooltip placement={tooltipPlacement ?? "bottom"} title={title} > <span> <IconButton size={"sm"} + aria-label={title} {...rest}/> </span> </Tooltip> -); +)); + +MenuBarIconButton.displayName = 'MenuBarIconButton';
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/MenuBar/MenuBarIconButton.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
src/components/MenuBar/MenuBarIconButton.tsx (1)
Pattern **/*.{cpp,hpp,java,js,jsx,ts,tsx}: - Prefer false == <expression> rather than !<expression>.
🔇 Additional comments (2)
src/components/MenuBar/MenuBarIconButton.tsx (2)
9-11: Well-structured interface definition!The interface properly extends IconButtonProps and adds type-safe tooltip placement configuration.
39-39: LGTM!The default export is appropriate for a single component file.
Description
variant={"outlined"}andarrow={true}to global tooltip props and remove any such specializations from existing components.Validation performed
Summary by CodeRabbit
Summary by CodeRabbit
New Features
MenuBarIconButtoncomponent with tooltip support.StatusBarwith a tooltip for the log event button.SearchTabPanelfor improved user interaction.PanelTitleButtonto include a tooltip around theIconButton.Bug Fixes
Tooltipin theTabButtoncomponent.Chores
SmallIconButtonwithMenuBarIconButtonin various components.MenuBarto streamline button functionality.Documentation
JoyTooltipin the theme configuration.