Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

オープン
  • 何か問題がありますか？
#4,536 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 2 日以内に返信

まだ誰も着手していません。

評価

難易度
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
平均マージ
3日 14時間
マージ済み PR（30日）
83

環境構築

このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

cloudscape-design/components のほかの issue

cloudscape-design/components の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。