Skip to content

Commit

Permalink
fix(Header, Cards, Hero): fix spacings logic (#1298)
Browse files Browse the repository at this point in the history 
With these fixes, the only screenshot failing in webapp is this one:


![image](https://github.com/user-attachments/assets/e8480979-2492-492f-ab97-f54dc7c0748b)

But this is expected (and it was incorrect before). This is a DataCard
with headline + extra. According to card specs, there is no space
between pre-defined content and extra slot:


![image](https://github.com/user-attachments/assets/0017d736-5280-41f9-a22e-26523d4c4a0c)
  • Loading branch information
@marcoskolodny
marcoskolodny authored Nov 26, 2024
1 parent f7a150c commit 327ac5f
Show file tree
Hide file tree
Showing 4 changed files with 47 additions and 17 deletions.
32 changes: 24 additions & 8 deletions src/card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -424,10 +424,12 @@ const CardContent = ({
</div>
)}
{headline && (
// assuming that the headline will always be followed by one of: pretitle, title, subtitle, description
<div
ref={headlineRef}
style={{order: -2, paddingBottom: 8}}
style={{
order: -2,
paddingBottom: pretitle || title || subtitle || description ? 8 : 0,
}}
data-testid="headline"
>
{typeof headline === 'string' ? <Tag type="promo">{headline}</Tag> : headline}
Expand All @@ -452,10 +454,12 @@ const CardContent = ({
</div>
)}
{headline && (
// assuming that the headline will always be followed by one of: pretitle, title, subtitle, description
<div
ref={headlineRef}
style={{order: -1, paddingBottom: 8}}
style={{
order: -1,
paddingBottom: pretitle || title || subtitle || description ? 8 : 0,
}}
data-testid="headline"
>
{typeof headline === 'string' ? (
Expand Down Expand Up @@ -1246,8 +1250,14 @@ const DisplayCardContent = ({
</div>
)}
{headline && (
// assuming that the headline will always be followed by one of: pretitle, title, subtitle, description
<div ref={headlineRef} style={{order: -2, paddingBottom: 16}} data-testid="headline">
<div
ref={headlineRef}
style={{
order: -2,
paddingBottom: pretitle || title || subtitle || description ? 16 : 0,
}}
data-testid="headline"
>
{headline}
</div>
)}
Expand All @@ -1265,8 +1275,14 @@ const DisplayCardContent = ({
</div>
)}
{headline && (
// assuming that the headline will always be followed by one of: pretitle, title, subtitle, description
<div ref={headlineRef} style={{order: -1, paddingBottom: 16}} data-testid="headline">
<div
ref={headlineRef}
style={{
order: -1,
paddingBottom: pretitle || title || subtitle || description ? 16 : 0,
}}
data-testid="headline"
>
{headline}
</div>
)}
Expand Down
18 changes: 14 additions & 4 deletions src/community/advanced-data-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,8 +108,13 @@ const CardContent = ({
</div>
)}
{headline && (
// assuming that the headline will always be followed by one of: pretitle, title, subtitle, description
<div ref={headlineRef} style={{order: -2, paddingBottom: 4}}>
<div
ref={headlineRef}
style={{
order: -2,
paddingBottom: pretitle || title || subtitle || description ? 4 : 0,
}}
>
{typeof headline === 'string' ? <Tag type="promo">{headline}</Tag> : headline}
</div>
)}
Expand All @@ -131,8 +136,13 @@ const CardContent = ({
</div>
)}
{headline && (
// assuming that the headline will always be followed by one of: pretitle, title, subtitle, description
<div ref={headlineRef} style={{order: -1, paddingBottom: 4}}>
<div
ref={headlineRef}
style={{
order: -1,
paddingBottom: pretitle || title || subtitle || description ? 4 : 0,
}}
>
{typeof headline === 'string' ? <Tag type="promo">{headline}</Tag> : headline}
</div>
)}
Expand Down
8 changes: 5 additions & 3 deletions src/header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,8 +88,10 @@ export const Header = ({
) : undefined;

const headlineContent = headline ? (
// assuming that the headline will always be followed by one of: pretitle, title, description
<div style={{paddingBottom: 8, order: -1}} data-testid="headline">
<div
style={{paddingBottom: pretitle || title || description ? 8 : 0, order: -1}}
data-testid="headline"
>
{headline}
</div>
) : undefined;
Expand All @@ -107,7 +109,7 @@ export const Header = ({
)}
{headlineContent}
{pretitleContent && (
<div style={{paddingBottom: pretitle || description ? 8 : 0, order: -1}}>
<div style={{paddingBottom: title || description ? 8 : 0, order: -1}}>
{pretitleContent}
</div>
)}
Expand Down
6 changes: 4 additions & 2 deletions src/hero.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,8 +92,10 @@ const HeroContent = ({
) : undefined;

const headlineContent = headline ? (
// assuming that the headline will always be followed by one of: pretitle, title, subtitle, description
<div data-testid="headline" style={{paddingBottom: 16, order: -1}}>
<div
data-testid="headline"
style={{paddingBottom: pretitle || title || description ? 16 : 0, order: -1}}
>
{headline}
</div>
) : undefined;
Expand Down

1 comment on commit 327ac5f

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deploy preview for mistica-web ready!

✅ Preview
https://mistica-kyzx85xm1-flows-projects-65bb050e.vercel.app

Built with commit 327ac5f.
This pull request is being automatically deployed with vercel-action

Please sign in to comment.