Skip to content

Added a warning badge variant and updated comments header#27986

Merged
peterzimon merged 1 commit into
mainfrom
new-warning-badge-variant-and-update-comment-header
May 21, 2026
Merged

Added a warning badge variant and updated comments header#27986
peterzimon merged 1 commit into
mainfrom
new-warning-badge-variant-and-update-comment-header

Conversation

@weylandswart
Copy link
Copy Markdown
Contributor

No ref

  • Added a new warning Badge variant
  • Used the new badge for pin/unpin comment
  • Tweaked header styles to improve the badge layout

New variant
Screenshot 2026-05-20 at 12 17 55

Comment header updates

Before After
Screenshot 2026-05-20 at 12 16 46 Screenshot 2026-05-20 at 12 16 02

No ref

- Added a new warning Badge variant
- Used the new badge for pin/unpin comment
- Tweaked header styles to improve the badge layout
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 20, 2026

Review Change Stack

Walkthrough

This PR introduces a new warning variant to the Badge component design system and applies it across the comment interface. The warning variant uses bg-state-warning/20 and text-yellow-600 classes. The new variant is tested and documented via Storybook stories. The comment header's pinned badge now uses this variant alongside refactored styling that imports and applies badgeVariants directly. Additionally, comment content spacing is adjusted from mt-1 to mt-2 for improved vertical rhythm.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately summarizes the main changes: adding a warning badge variant and updating the comments header styling.
Description check ✅ Passed The description clearly relates to the changeset, listing the key changes and providing visual before/after comparisons of the updated badge and header styling.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch new-warning-badge-variant-and-update-comment-header

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

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

@@ -1,4 +1,4 @@
import {Badge, Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from '@tryghost/shade/components';
import {Badge, Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants} from '@tryghost/shade/components';
Copy link
Copy Markdown
Contributor Author

@weylandswart weylandswart May 20, 2026

Choose a reason for hiding this comment

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

I'd much rather just import Badge, but we need badgeVariants because the pinned badge is interactive. At some point we could consider hoisting that behaviour into the component itself.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Noted in Linear

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/shade/src/components/ui/badge.stories.tsx`:
- Around line 53-58: The new Story object Warning is missing the per-story docs
one-line description; update the Warning Story (export const Warning) to include
a parameters.docs.description.story string describing when to use the warning
variant (e.g., one-line usage hint) so it follows the Shade stories contract,
adding the parameters block alongside args within the Warning object.

In `@apps/shade/src/components/ui/badge.tsx`:
- Around line 19-20: The warning badge mapping in the Badge component uses a
hard-coded color token ('text-yellow-600')—replace that with your theme's
semantic warning text token (the token paired with bg-state-warning/20) in the
'warning' entry so the mapping reads e.g. 'border-transparent
bg-state-warning/20 <YOUR_WARNING_TEXT_TOKEN>'; update the 'warning' key in
badge.tsx accordingly (look for the 'warning:' mapping in the Badge component)
to maintain semantic, token-driven theming.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 1a6b4313-b38f-4fad-a189-1c10d04e2d82

📥 Commits

Reviewing files that changed from the base of the PR and between 1dc0370 and 35e4c6b.

📒 Files selected for processing (5)
  • apps/posts/src/views/comments/components/comment-content.tsx
  • apps/posts/src/views/comments/components/comment-header.tsx
  • apps/shade/src/components/ui/badge.stories.tsx
  • apps/shade/src/components/ui/badge.tsx
  • apps/shade/test/unit/components/ui/badge.test.tsx

Comment thread apps/shade/src/components/ui/badge.stories.tsx
Comment thread apps/shade/src/components/ui/badge.tsx
@weylandswart weylandswart requested a review from peterzimon May 20, 2026 11:51
@@ -1,4 +1,4 @@
import {Badge, Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from '@tryghost/shade/components';
import {Badge, Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants} from '@tryghost/shade/components';
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Noted in Linear

@peterzimon peterzimon merged commit 1f0a017 into main May 21, 2026
42 checks passed
@peterzimon peterzimon deleted the new-warning-badge-variant-and-update-comment-header branch May 21, 2026 08:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants