make icon in panel table have circle background on hover #5197
Conversation
WalkthroughThe pull request introduces modifications to the Changes
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
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (2)
app/packages/core/src/plugins/SchemaIO/components/ActionsMenu.tsx(2 hunks)app/packages/core/src/plugins/SchemaIO/components/TableView.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
app/packages/core/src/plugins/SchemaIO/components/ActionsMenu.tsx (1)
Pattern **/*.{ts,tsx}: Review the Typescript and React code for conformity with best practices in React, Recoil, Graphql, and Typescript. Highlight any deviations.
app/packages/core/src/plugins/SchemaIO/components/TableView.tsx (1)
Pattern **/*.{ts,tsx}: Review the Typescript and React code for conformity with best practices in React, Recoil, Graphql, and Typescript. Highlight any deviations.
🔇 Additional comments (2)
app/packages/core/src/plugins/SchemaIO/components/TableView.tsx (2)
225-232: LGTM! Good improvement for consistent row heights.
The empty Box with minHeight ensures consistent row heights across the table, which improves the visual stability of the UI.
225-232: Verify the hover effect implementation in ActionsMenu component.
While this change maintains consistent row heights, the circular background hover effect mentioned in the PR objective should be implemented in the ActionsMenu component.
| <IconButton | ||
| onClick={handleClick} | ||
| size={size} | ||
| sx={{ | ||
| color: resolvedColor, | ||
| }} | ||
| > | ||
| {Icon} | ||
| </IconButton> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Ensure consistent hover effects
The IconButton should have the same circular hover effect as the icon itself for visual consistency.
Add hover styling to the IconButton:
<IconButton
onClick={handleClick}
size={size}
sx={{
color: resolvedColor,
+ '&:hover': {
+ backgroundColor: 'action.hover',
+ borderRadius: '50%',
+ },
}}
>
{Icon}
</IconButton>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <IconButton | |
| onClick={handleClick} | |
| size={size} | |
| sx={{ | |
| color: resolvedColor, | |
| }} | |
| > | |
| {Icon} | |
| </IconButton> | |
| <IconButton | |
| onClick={handleClick} | |
| size={size} | |
| sx={{ | |
| color: resolvedColor, | |
| '&:hover': { | |
| backgroundColor: 'action.hover', | |
| borderRadius: '50%', | |
| }, | |
| }} | |
| > | |
| {Icon} | |
| </IconButton> |
| <MuiIconFont | ||
| name={icon} | ||
| sx={{ | ||
| color: resolvedColor, | ||
| }} | ||
| /> |
There was a problem hiding this comment.
Add hover effect with circle background
The current styling doesn't implement the circular background on hover as specified in the PR objectives.
Add hover styling to match the requirements:
<MuiIconFont
name={icon}
sx={{
color: resolvedColor,
+ borderRadius: '50%',
+ '&:hover': {
+ backgroundColor: 'action.hover',
+ },
}}
/>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <MuiIconFont | |
| name={icon} | |
| sx={{ | |
| color: resolvedColor, | |
| }} | |
| /> | |
| <MuiIconFont | |
| name={icon} | |
| sx={{ | |
| color: resolvedColor, | |
| borderRadius: '50%', | |
| '&:hover': { | |
| backgroundColor: 'action.hover', | |
| }, | |
| }} | |
| /> |
What changes are proposed in this pull request?
make icon in panel table have circle background on hover
How is this patch tested? If it is not, please explain why.
Release Notes
Is this a user-facing change that should be mentioned in the release notes?
notes for FiftyOne users.
(Details in 1-2 sentences. You can just refer to another PR with a description
if this PR is part of a larger change.)
What areas of FiftyOne does this PR affect?
fiftyonePython library changesSummary by CodeRabbit
New Features
ActionsMenucomponent, allowing for more flexible UI behavior based on the presence of labels.TableViewcomponent by maintaining row height even when no actions are available.Bug Fixes