Skip to content

Commit 1ba399a

Browse files
JakeLinJakeLin
committed
fix: Fix white corner artifacts on SummaryCard.Overlay for flat variant
- Add imageWrapper as positioning context for overlay - Use 26px radius on imageSection, 24px on topOverlay - Remove image's own border-radius in flat variant - Make topOverlay sibling to imageSection for proper layering
1 parent 2ab1bf3 commit 1ba399a

File tree

4 files changed

+120
-27
lines changed

4 files changed

+120
-27
lines changed

‎packages/ui/src/components/Card/SummaryCard.module.css‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,31 @@
99
/* Flat variant - Remove border for seamless appearance */
1010
.summaryCard[data-variant='flat'] {
1111
border: none;
12+
overflow: visible; /* Allow Card's overflow:hidden to do the clipping */
13+
}
14+
15+
/* Image Wrapper - Positioning context for overlay */
16+
.imageWrapper {
17+
position: relative;
18+
}
19+
20+
/* Flat variant - Clip image slightly more to fill behind overlay corners */
21+
.summaryCard[data-variant='flat'] .imageSection {
22+
border-top-left-radius: calc(var(--ai-radius-xl) + 2px);
23+
border-top-right-radius: calc(var(--ai-radius-xl) + 2px);
24+
border-bottom-left-radius: 0;
25+
border-bottom-right-radius: 0;
26+
}
27+
28+
/* Flat variant - Match Card's border-radius */
29+
.summaryCard[data-variant='flat'] .topOverlay {
30+
border-top-left-radius: var(--ai-radius-xl);
31+
border-top-right-radius: var(--ai-radius-xl);
32+
}
33+
34+
/* Flat variant - Remove image's own border-radius, let imageSection clip it */
35+
.summaryCard[data-variant='flat'] .imageSingle {
36+
border-radius: 0;
1237
}
1338

1439
/* Image Section */

‎packages/ui/src/components/Card/SummaryCard.module.css.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
declare const styles: {
22
readonly summaryCard: string;
3+
readonly imageWrapper: string;
34
readonly imageSection: string;
45
readonly imageSingle: string;
56
readonly imageGrid: string;

‎packages/ui/src/components/Card/SummaryCard.stories.tsx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2574,6 +2574,74 @@ const SummaryCardsComponent: React.FC = () => {
25742574
</div>
25752575
</section>
25762576

2577+
{/* Overlay Border Artifact Test */}
2578+
<section style={{ marginBottom: '64px' }}>
2579+
<header style={{ marginBottom: '24px' }}>
2580+
<h2 style={{ marginBottom: '8px' }}>Overlay Border Artifact Test</h2>
2581+
<p style={{ color: 'var(--ai-color-text-secondary)', margin: 0, fontSize: '14px' }}>
2582+
Test various solid color overlays on flat variant cards to check for border artifacts
2583+
(especially visible in dark mode)
2584+
</p>
2585+
</header>
2586+
2587+
<div
2588+
style={{
2589+
display: 'grid',
2590+
gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
2591+
gap: '24px',
2592+
}}
2593+
>
2594+
{/* Bright colors - high visibility for artifacts */}
2595+
{[
2596+
{ color: '#FF3333', label: 'Bright Red', textColor: 'white' },
2597+
{ color: '#33FF33', label: 'Bright Green', textColor: 'black' },
2598+
{ color: '#3366FF', label: 'Bright Blue', textColor: 'white' },
2599+
{ color: '#FFFF33', label: 'Bright Yellow', textColor: 'black' },
2600+
{ color: '#FF33FF', label: 'Bright Magenta', textColor: 'white' },
2601+
{ color: '#33FFFF', label: 'Bright Cyan', textColor: 'black' },
2602+
// Dark colors - shows artifacts on light edges in dark mode
2603+
{ color: '#1A1A1A', label: 'Near Black', textColor: 'white' },
2604+
{ color: '#2D2D2D', label: 'Dark Gray', textColor: 'white' },
2605+
{ color: '#0F172A', label: 'Slate Dark', textColor: 'white' },
2606+
{ color: '#18181B', label: 'Zinc Dark', textColor: 'white' },
2607+
].map(({ color, label, textColor }) => (
2608+
<div key={color}>
2609+
<SummaryCard
2610+
variant="flat"
2611+
imageAspectRatio="1/1"
2612+
images="https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=800&q=80"
2613+
title="$1,200,000"
2614+
subtitle="123 Main Street"
2615+
buttonText="View property"
2616+
topOverlay={
2617+
<SummaryCard.Overlay background={color} height={40} align="center">
2618+
<span
2619+
style={{
2620+
color: textColor,
2621+
fontWeight: 600,
2622+
fontSize: '14px',
2623+
}}
2624+
>
2625+
Agency • {label}
2626+
</span>
2627+
</SummaryCard.Overlay>
2628+
}
2629+
/>
2630+
<p
2631+
style={{
2632+
fontSize: '11px',
2633+
color: 'var(--ai-color-text-secondary)',
2634+
marginTop: '8px',
2635+
fontFamily: 'monospace',
2636+
}}
2637+
>
2638+
{color}
2639+
</p>
2640+
</div>
2641+
))}
2642+
</div>
2643+
</section>
2644+
25772645
{/* Real-World Example */}
25782646
<section style={{ marginBottom: '64px' }}>
25792647
<header style={{ marginBottom: '24px' }}>

‎packages/ui/src/components/Card/SummaryCard.tsx‎

Lines changed: 26 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -767,9 +767,9 @@ const SummaryCardComponent = React.forwardRef<HTMLDivElement, SummaryCardProps>(
767767
<>
768768
{/* Image Section */}
769769
{hasImages && (
770-
<div className={styles.imageSection}>
771-
{isSingleImage && (
772-
<>
770+
<div className={styles.imageWrapper}>
771+
<div className={styles.imageSection}>
772+
{isSingleImage && (
773773
<img
774774
src={imageArray[0].src}
775775
alt={imageArray[0].alt}
@@ -779,30 +779,29 @@ const SummaryCardComponent = React.forwardRef<HTMLDivElement, SummaryCardProps>(
779779
onLoad={onImageLoad}
780780
onError={onImageError}
781781
/>
782-
{topOverlay && topOverlay}
783-
</>
784-
)}
785-
{isGridImages && (
786-
<>
787-
<div className={styles.imageGrid} data-image-count={imageCount}>
788-
{displayImages.map((image, index) => (
789-
<img
790-
key={index}
791-
src={image.src}
792-
alt={image.alt}
793-
className={styles.imageGridItem}
794-
loading={image.lazy !== false && imageLazy ? 'lazy' : 'eager'}
795-
onLoad={onImagesLoad ? (e) => onImagesLoad(index, e) : undefined}
796-
onError={onImagesError ? (e) => onImagesError(index, e) : undefined}
797-
/>
798-
))}
799-
{hasOverflow && (
800-
<div className={styles.overflowIndicator}>+{imageArray.length - 4}</div>
801-
)}
802-
</div>
803-
{topOverlay && topOverlay}
804-
</>
805-
)}
782+
)}
783+
{isGridImages && (
784+
<>
785+
<div className={styles.imageGrid} data-image-count={imageCount}>
786+
{displayImages.map((image, index) => (
787+
<img
788+
key={index}
789+
src={image.src}
790+
alt={image.alt}
791+
className={styles.imageGridItem}
792+
loading={image.lazy !== false && imageLazy ? 'lazy' : 'eager'}
793+
onLoad={onImagesLoad ? (e) => onImagesLoad(index, e) : undefined}
794+
onError={onImagesError ? (e) => onImagesError(index, e) : undefined}
795+
/>
796+
))}
797+
{hasOverflow && (
798+
<div className={styles.overflowIndicator}>+{imageArray.length - 4}</div>
799+
)}
800+
</div>
801+
</>
802+
)}
803+
</div>
804+
{topOverlay && topOverlay}
806805
</div>
807806
)}
808807

0 commit comments

Comments
 (0)