[Feature Request]: Adding a hover state to badge component

未关闭
  • 哪里不对？
#4,536 1 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 2 天内回复

还没有人认领这个 Issue。

评估

难度
3/5
预计耗时
1-2 天
新手友好度
54/100
Issue 类型
功能
描述清晰度
基本清楚
活跃度
冷清
技术栈
react, scss, typescript
领域
design, frontend

调研方向

Start by reading the badge component and the tab hover styling to see how component styles interact when the badge is nested inside a tab. Check the existing badge and tab tests, if available, before choosing a subtle visual response. Done means the badge visibly responds when its containing tab is hovered, without changing its placement or normal appearance.

由索引模型根据 Issue 内容生成。

描述

enhancement
Description

Context:
We are using blue badges within tab headers to display dynamic values (coverage percentage and utilization percentage) alongside the tab label. The badges provide at-a-glance metrics that help users understand the content of each tab before clicking into it.

Current Behavior:
When a user hovers over a tab that contains a badge, the tab label responds with a hover style, but the badge itself does not reflect any hover state. This creates an inconsistent interaction where part of the tab header appears interactive and part does not, making the component feel unresponsive or broken.

Expected Behavior:
The badge should inherit or complement the tab's hover state when placed inside a tab header. When the user hovers over the tab, the badge should visually respond (e.g., subtle background shift or opacity change) to indicate it is part of the clickable tab area.

Customer Benefit:
Customers using the Purchase Analyzer rely on the coverage and utilization badges to quickly assess their savings plan performance before diving into detailed analysis. A proper hover state reinforces that these metrics are interactive and tied to actionable content, reducing hesitation and confusion during navigation. Without it, customers may second-guess whether the tab is clickable or assume the UI is malfunctioning, which erodes trust in the tool. A polished, responsive interaction builds confidence that the data they are viewing is reliable and that the product is well-maintained, ultimately encouraging deeper engagement with savings recommendations.

Impact:

  • Users perceive the tab as partially broken during interaction
  • Reduces the polished feel of the interface
  • Creates a disconnect between the interactive affordance of the tab and the static appearance of the badge
  • User feedback from testing has been positive on the badge placement itself, so we want to preserve the pattern while improving the interaction quality

Proposed Solution:
Add a hover style variant for the badge component when nested inside interactive containers (e.g., tabs). This could be a subtle visual shift that signals the badge is part of the parent's interactive area.

Code of Conduct
主要语言
TypeScript
星标
2.7k
派生
248
平均合并
2 天 19 小时
30 天内合并 PR
90

环境准备

这个项目没有提供开发容器、Dockerfile 或贡献指南，环境需要你自己搭建：先看它的 README，通用步骤见我们的新手贡献指南。

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

cloudscape-design/components 的其他 Issue

查看 cloudscape-design/components 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。