docs(site): emoji-led changelog tags with unified pill styling - #10
Conversation
Replace the four divergent colored chips (dark/blue/gray/outline) with a single flat pill led by a semantic emoji per type (💥 breaking, 🆕 feature, 🐛 fix, ⚡️ perf). The emoji carries the color so the chip stays uniform — on-brand with the whiteboard palette (no second hue). Widen the tag column to fit emoji + label. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Free Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthrough变更日志标签样式从多种类型颜色 modifier 改为统一扁平 pill 样式，并新增按类型显示的 emoji 前导元素。CSS 调整了网格列宽与移动端对齐规则，组件新增 TYPE_EMOJI 映射表并渲染对应 emoji 节点。 Changes变更日志标签样式改造
Estimated code review effort: 1 (Trivial) | ~5 minutes Poem
Note 🎁 Summarized by CodeRabbit FreeYour organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Pro by visiting https://app.coderabbit.ai/login. Comment |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request updates the changelog timeline tags to use a uniform, emoji-led pill design with a flat background color instead of type-specific hues. Feedback suggests increasing the tag column width from 92px to 96px to prevent potential text overflow with wider fallback fonts, and conditionally rendering the emoji span to avoid layout spacing issues if an emoji is missing.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| .markdown .xmd-cl-change { | ||
| display: grid; | ||
| grid-template-columns: 68px 1fr; | ||
| grid-template-columns: 92px 1fr; |
There was a problem hiding this comment.
The fixed width of 92px for the tag column is extremely tight for English labels like "Breaking" or "Improved" when combined with the emoji, padding, and gap (e.g., 18px padding + 12.5px emoji + 5px gap + ~55px text width ≈ 90.5px). On systems with slightly wider fallback fonts, this will exceed 92px and cause the tag to overflow the grid column. Increasing this to 96px or 100px provides a safe margin of error.
| grid-template-columns: 92px 1fr; | |
| grid-template-columns: 96px 1fr; |
| <span className="xmd-cl-tag-emoji" aria-hidden="true"> | ||
| {TYPE_EMOJI[item.type]} | ||
| </span> |
There was a problem hiding this comment.
If TYPE_EMOJI[item.type] is ever undefined or missing for a custom or unexpected change type, rendering an empty span will still trigger the CSS gap: 5px on the parent flex container, causing the text label to appear off-center. Conditionally rendering the emoji span only when the emoji is present avoids this layout issue.
{TYPE_EMOJI[item.type] && (
<span className="xmd-cl-tag-emoji" aria-hidden="true">
{TYPE_EMOJI[item.type]}
</span>
)}
1 participant
🤔 This is a ...
🔗 Related Issues
Follow-up to #9. The changelog type tags looked inconsistent (four divergent colored chips). This change was part of #9's branch but did not land in the merge, so it is re-submitted here.
💡 Background and Solution
The changelog type tags used four divergent colored chips (dark / blue / gray / outline), which read as cluttered. Replace them with a single flat pill led by a semantic emoji per type — 💥 breaking, 🆕 feature, 🐛 fix, ⚡️ perf. The emoji carries the color so the chip stays uniform, on-brand with the whiteboard palette (no second hue). The tag column is widened to fit emoji + label; the emoji is
aria-hiddenand the text label is preserved.TYPE_EMOJIinChangelogTimeline.tsxmaps eachChangeTypeto its emoji, decoupled from locale copy (copy.types).npm run check:homeandnpm run build(docs-site) both pass.📝 Change Log
🤖 Generated with Claude Code
Summary by CodeRabbit