Skip to content

Conversation

@bennypowers
Copy link
Member

What I did

Enhanced inline documentation for rh-badge component to improve developer experience and API understanding, following the documentation standards.

Testing Instructions

⚠️ Important: LLM-Assisted Documentation

This documentation was created with assistance from LLM tools. Reviewers MUST carefully verify the semantic meaning and design system accuracy of all new documentation.

Please check that the enhanced documentation:

  1. Accurately describes the semantic meaning of each API element in the context of the Red Hat Design System
  2. Correctly references the design guidelines and accessibility documentation
  3. Provides meaningful guidance on when/why to use each feature
  4. Aligns with existing design system principles and terminology

Specific sections to review:

1. Default slot (lines 87-114)

  • Verify accessible text content patterns (duplicating numbers, contextual labels)
  • Confirm the accessibility guidelines match Accessibility documentation
  • Check that usage examples are appropriate
  • Verify the note about not relying on color alone is accurate

2. state property (lines 31-59)

  • Verify all six state descriptions (neutral, info, success, caution, warning, danger)
  • Confirm deprecated state names (moderate, important, critical) are noted correctly
  • Check usage guidelines about color and visual cues

3. number property (lines 61-83)

  • Verify the semantic meaning for displaying counts
  • Confirm threshold behavior description is accurate
  • Check the guidance about using rh-tag for text captions

4. threshold property (lines 85-107)

  • Verify the 999 common threshold value is appropriate
  • Confirm the display behavior (threshold+) is accurate
  • Check layout guidelines about not displaying values over 999

Notes to Reviewers

Additional Enhancements

Beyond the default slot listed in issue #2492, this PR also enhances documentation for all three properties (state, number, threshold) to provide comprehensive API documentation.

Documentation Format

Following the project standard:

  • Default slot uses inline HTML comment in the template
  • Properties use multi-line JSDoc with usage guidelines and examples
  • All documentation includes semantic meaning from design system context

Closes #2492

🤖 Generated with Claude Code

Enhanced inline documentation for rh-badge component to improve developer
experience and API understanding:

- Added comprehensive inline documentation for default slot explaining accessible
  text content patterns, including duplicating number values for screen readers
  and adding contextual labels for multiple badges
- Enhanced `state` property JSDoc with detailed descriptions of all six states
  (neutral, info, success, caution, warning, danger) and usage guidelines about
  not relying on color alone
- Enhanced `number` property JSDoc with semantic meaning for displaying counts,
  threshold behavior, and when to use rh-tag instead
- Enhanced `threshold` property JSDoc explaining maximum display value behavior,
  common threshold of 999, and layout considerations

All documentation includes design system context about accessibility requirements
and usage best practices.

Closes #2492

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Assisted-By: Claude <[email protected]>
@changeset-bot
Copy link

changeset-bot bot commented Nov 12, 2025

⚠️ No Changeset found

Latest commit: 60ad8ac

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@netlify
Copy link

netlify bot commented Nov 12, 2025

Deploy Preview for red-hat-design-system failed. Why did it fail? →

Name Link
🔨 Latest commit 60ad8ac
🔍 Latest deploy log https://app.netlify.com/projects/red-hat-design-system/deploys/6914c9563012b100084354ad

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

Labels

None yet

Projects

Status: No status

Development

Successfully merging this pull request may close these issues.

[docs] <rh-badge> missing documentation

2 participants