Skip to content

fix(CommunityPost): remove grey hover background from post card#3695

Open
ekaterina-spiridonova wants to merge 2 commits intomainfrom
fix/community-post-hover-white-background
Open

fix(CommunityPost): remove grey hover background from post card#3695
ekaterina-spiridonova wants to merge 2 commits intomainfrom
fix/community-post-hover-white-background

Conversation

@ekaterina-spiridonova
Copy link
Copy Markdown
Contributor

🚪 Why?

The community post cards now have card-level hover shadows applied by the consuming app (factorial). The inner hover:bg-f1-background-hover class on the CommunityPost div causes a grey background on hover, which conflicts with the intended white card hover state.

🔑 What?

  • Removed hover:bg-f1-background-hover from the outer div className in BaseCommunityPost
  • The hover visual feedback is now delegated to the card wrapper level (shadow transition), keeping the card background white on hover

✅ Verification

Tests

  • No logic change, only a Tailwind class removal
  • Existing tests unaffected

Manual Verification

  • Community post cards stay white on hover instead of turning grey

Remove hover:bg-f1-background-hover from the CommunityPost inner div
so the card stays white on hover. The card-level hover shadow in the
consuming app now provides the hover feedback instead.
Copilot AI review requested due to automatic review settings March 18, 2026 16:01
@ekaterina-spiridonova ekaterina-spiridonova requested a review from a team as a code owner March 18, 2026 16:01
@github-actions github-actions bot added fix react Changes affect packages/react labels Mar 18, 2026
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

This PR adjusts the CommunityPost card styling so it no longer applies an inner grey hover background, allowing the consuming app’s card-level hover shadow/visual treatment to remain consistent (white background on hover).

Changes:

  • Removed hover:bg-f1-background-hover from the BaseCommunityPost root container to prevent grey hover background.
  • Delegated hover feedback to the consuming wrapper/card level.

You can also share your feedback on Copilot code review. Take the survey.

Comment on lines 109 to 113
return (
<div
className="flex w-full cursor-pointer flex-row gap-3 rounded-xl border border-solid border-transparent p-3 pt-2 hover:bg-f1-background-hover focus:border-f1-border-secondary focus:outline focus:outline-1 focus:outline-offset-1 focus:outline-f1-border-selected-bold md:pb-4 md:pt-3"
className="flex w-full cursor-pointer flex-row gap-3 rounded-xl border border-solid border-transparent p-3 pt-2 focus:border-f1-border-secondary focus:outline focus:outline-1 focus:outline-offset-1 focus:outline-f1-border-selected-bold md:pb-4 md:pt-3"
onClick={handleClick}
id={`community-post-${id}`}
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 18, 2026

✅ No New Circular Dependencies

No new circular dependencies detected. Current count: 0

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 18, 2026

📦 Alpha Package Version Published

Use pnpm i github:factorialco/f0#npm/alpha-pr-3695 to install the package

Use pnpm i github:factorialco/f0#c4d4babaefde7fc071046b24cfc1640f937119d8 to install this specific commit

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 18, 2026

🔍 Visual review for your branch is published 🔍

Here are the links to:

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 18, 2026

Coverage Report for packages/react

Status Category Percentage Covered / Total
🔵 Lines 44.35% 9708 / 21886
🔵 Statements 43.69% 9994 / 22871
🔵 Functions 35.89% 2187 / 6093
🔵 Branches 35.18% 6144 / 17462
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
packages/react/src/sds/Home/Communities/Post/CommunityPost/index.tsx 0% 0% 0% 0% 72-331
Generated in workflow #11913 for commit b029877 by the Vitest Coverage Report Action

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

fix react Changes affect packages/react

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants