Improve ListingTable card variant border styling

[yomalip]

Summary

Improves the visual quality and consistency of ListingTable rows when using the variant="card" prop by replacing shadow-based borders with proper CSS borders and enhancing dark mode visibility.

Changes

Border Implementation

• Replaced inset box-shadow with actual CSS border properties on table cells
• Applies borders to all four sides: top, bottom, left (first cell), and right (last cell)
• Ensures crisp, pixel-perfect borders that render consistently across browsers

Border Radius Simplification

• Changed from calculated value (theme.shape.borderRadius * 3) to fixed 8px
• Provides consistent rounded corners aligned with design standards

Dark Mode Enhancement

• Increased border opacity from 0.1 to 0.3 in dark mode
• Significantly improves contrast and visibility of card boundaries
• Light mode remains at 0.12 opacity for subtle separation

Code Structure

• Refactored card variant styles using IIFE pattern for cleaner border color calculation
• Maintains theme-aware color selection (white borders in dark mode, black in light mode)

Visual Impact

Before: Card rows had subtle shadow-based borders that were barely visible in dark mode
After: Card rows have crisp, well-defined borders with improved dark mode contrast

Files Changed

• packages/oxygen-ui/src/components/ListingTable/ListingTable/ListingTableRow.tsx

Testing

The changes maintain backward compatibility. Test by:

1. Using ListingTable with variant="card" in both light and dark modes
2. Verifying borders appear consistent and visible
3. Confirming hover states still work correctly

Summary by CodeRabbit

• Style
  • Enhanced card variant styling in listing tables with improved border rendering and visual consistency across rows and cells.
  • Refined hover behavior and appearance in card layout mode for better user feedback.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Modified ListingTableRow component to apply consistent border styling for card variants, dynamically calculating border colors based on dark mode settings and adding specific borders to cell edges (left for first cell, right for last cell, top/bottom for all cells). Fixed borderRadius constant and refined hover behavior.

Changes

Cohort / File(s)	Summary
Card variant styling updates packages/oxygen-ui/src/components/ListingTable/ListingTable/ListingTableRow.tsx	Fixed borderRadius to constant value of 8. Refactored card variant style application to use IIFE for dynamic borderColor calculation based on dark mode. Added directional borders: borderLeft on first cell, borderRight on last cell, borderTop/borderBottom on all cells. Preserved hover background color using action.hover. Removed redundant border and shadow handling logic.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~15 minutes

Poem

🐰 Hop along, dear borders bright,
Now framed in dark and light,
Cards stand tall with edges neat,
Each cell aligned, a visual treat!

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: improving card variant border styling in the ListingTable component, which is the primary focus of the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[yomalip]

Screenshots: