Update bridge preview chevron design #37
Conversation
WalkthroughA new toggle button with custom styling was introduced to control the display of detailed operations, replacing a previous checkbox-based control. The interactivity and appearance of operation items were refined, including changes to CSS for hover states and button backgrounds. The Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant BridgePreviewRoute
participant OperationItem
User->>BridgePreviewRoute: Clicks toggle button
BridgePreviewRoute->>BridgePreviewRoute: Toggle showDetails state
BridgePreviewRoute->>OperationItem: Passes onClick handler to last item (if details hidden)
User->>OperationItem: Clicks chevron (if interactive)
OperationItem->>BridgePreviewRoute: Triggers toggle to show details
Poem
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/widget-react/src/pages/bridge/BridgePreviewRoute.tsx (1)
143-143: Document the conditional interaction model.The conditional
onClickhandler creates an interesting UX pattern where the chevron is only clickable when details are hidden. This provides multiple ways to show details but centralizes the hide action to the main toggle.Consider adding a comment to document this intentional design decision for future maintainers.
+ {/* Chevron only clickable when details hidden - provides alternative way to expand */} <OperationItem {...lastOperationProps} onClick={showAll ? undefined : toggleShowAll} />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
packages/widget-react/src/pages/bridge/BridgePreviewRoute.module.css(1 hunks)packages/widget-react/src/pages/bridge/BridgePreviewRoute.tsx(3 hunks)packages/widget-react/src/pages/bridge/OperationItem.module.css(1 hunks)packages/widget-react/src/pages/bridge/OperationItem.tsx(3 hunks)
🔇 Additional comments (5)
packages/widget-react/src/pages/bridge/BridgePreviewRoute.module.css (1)
6-19: LGTM! Clean toggle button styling.The new
.toggleclass implementation follows good CSS practices with consistent use of custom properties, appropriate hover states, and flexible layout. The styling aligns well with the overall design system.packages/widget-react/src/pages/bridge/OperationItem.module.css (1)
32-48: Good visual distinction for interactive vs non-interactive states.The CSS changes effectively differentiate between interactive and non-interactive arrow elements:
- Non-interactive
.type(span):--gray-8background with hover color effect- Interactive
button.type:--borderbackground for better clickability indicationThis provides clear visual feedback to users about which elements are interactive.
packages/widget-react/src/pages/bridge/BridgePreviewRoute.tsx (1)
5-5: Import changes look correct.The new icon imports (
IconList,IconMinus) properly support the updated toggle button functionality.packages/widget-react/src/pages/bridge/OperationItem.tsx (2)
19-19: Proper addition of optional onClick prop.The
onClickprop is correctly typed as optional and properly integrated into the component interface.Also applies to: 78-78
28-38: Excellent conditional rendering for interactive states.The logic properly handles the two interaction modes:
- When
typeis present: non-interactive<span>with tooltip for operation type information- When
typeis absent: interactive<button>withonClickhandler for expanding detailsThis creates a clean separation between informational and interactive states, working seamlessly with the parent component's conditional logic.
| <button className={styles.toggle} onClick={toggleShowAll}> | ||
| {showAll ? ( | ||
| <> | ||
| <IconMinus size={12} /> Hide detail | ||
| </> | ||
| ) : ( | ||
| <> | ||
| <IconList size={12} /> Show detail | ||
| </> | ||
| )} | ||
| </button> | ||
| </Collapsible.Trigger> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add accessibility attributes to the toggle button.
The toggle button implementation is functionally correct but could benefit from accessibility improvements for screen readers.
- <button className={styles.toggle} onClick={toggleShowAll}>
+ <button
+ className={styles.toggle}
+ onClick={toggleShowAll}
+ aria-expanded={showAll}
+ aria-label={showAll ? "Hide operation details" : "Show operation details"}
+ >📝 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.
| <button className={styles.toggle} onClick={toggleShowAll}> | |
| {showAll ? ( | |
| <> | |
| <IconMinus size={12} /> Hide detail | |
| </> | |
| ) : ( | |
| <> | |
| <IconList size={12} /> Show detail | |
| </> | |
| )} | |
| </button> | |
| </Collapsible.Trigger> | |
| <button | |
| className={styles.toggle} | |
| onClick={toggleShowAll} | |
| aria-expanded={showAll} | |
| aria-label={showAll ? "Hide operation details" : "Show operation details"} | |
| > | |
| {showAll ? ( | |
| <> | |
| <IconMinus size={12} /> Hide detail | |
| </> | |
| ) : ( | |
| <> | |
| <IconList size={12} /> Show detail | |
| </> | |
| )} | |
| </button> | |
| </Collapsible.Trigger> |
🤖 Prompt for AI Agents
In packages/widget-react/src/pages/bridge/BridgePreviewRoute.tsx around lines
114 to 125, the toggle button lacks accessibility attributes. Add appropriate
ARIA attributes such as aria-expanded to indicate the toggle state and
aria-controls to reference the collapsible content it controls. This will
improve screen reader support and make the button's purpose and state clear to
all users.
Summary by CodeRabbit
New Features
Style
Bug Fixes