Skip to content

docs(button): enhance inline documentation#2742

Open
bennypowers wants to merge 6 commits intomainfrom
docs/button-inline-docs
Open

docs(button): enhance inline documentation#2742
bennypowers wants to merge 6 commits intomainfrom
docs/button-inline-docs

Conversation

@bennypowers
Copy link
Member

@bennypowers bennypowers commented Nov 12, 2025

What I did

Enhanced inline documentation for rh-button component to improve developer experience and API understanding.

👉 Deploy Preview 👈

⚠️ 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.

  • The danger boolean combines with variant but only primary and secondary have explicit danger CSS rules. A designer should confirm whether danger + tertiary is an unsupported combination and whether it should produce a console warning.
  • The active/focus/hover colors for danger state use non-token hardcoded values (#a30000, #ff7468, #c9190b, #fe5142). A designer should confirm these are intentional or whether design tokens should be created for them.
  • The link variant is defined in CSS but not included in the TypeScript variant type union. A designer should confirm whether link is a supported variant or deprecated, and update the type accordingly.
  • The play button icon uses a translate: 10% hack for perceptual centering. A designer should confirm this offset is correct across icon sizes and whether it should be a design token.
  • There is no @fires event for button clicks. A designer should evaluate whether a custom event (beyond the native click) is needed for framework integrations that want detail about the button's variant, type, or form association.

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

- Added comprehensive JSDoc for `focus()` method explaining its purpose for
  programmatically moving focus to the button element
- Included usage guidelines for managing focus flow after dynamic content changes,
  user interactions, and modal closures
- Added accessibility notes about ensuring users are aware of focus changes and
  avoiding unexpected focus movement

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

Closes #2493

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

Assisted-By: Claude <noreply@anthropic.com>
@changeset-bot
Copy link

changeset-bot bot commented Nov 12, 2025

⚠️ No Changeset found

Latest commit: 734da8a

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 ready!

Name Link
🔨 Latest commit 734da8a
🔍 Latest deploy log https://app.netlify.com/projects/red-hat-design-system/deploys/69aac2dc8f82b00008f20a9a
😎 Deploy Preview https://deploy-preview-2742--red-hat-design-system.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions
Copy link
Contributor

github-actions bot commented Nov 12, 2025

Size Change: +775 B (+0.3%)

Total Size: 261 kB

Filename Size Change
./elements/rh-button/rh-button.js 4.11 kB +775 B (+23.22%) 🚨
ℹ️ View Unchanged
Filename Size
./elements.js 635 B
./elements/rh-accordion/context.js 162 B
./elements/rh-accordion/rh-accordion-header.js 2.71 kB
./elements/rh-accordion/rh-accordion-panel.js 1.27 kB
./elements/rh-accordion/rh-accordion.js 3.35 kB
./elements/rh-alert/rh-alert.js 5.09 kB
./elements/rh-announcement/rh-announcement.js 2.17 kB
./elements/rh-audio-player/rh-audio-player-about.js 1.83 kB
./elements/rh-audio-player/rh-audio-player-rate-stepper.js 1.76 kB
./elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.js 1.47 kB
./elements/rh-audio-player/rh-audio-player-subscribe.js 1.41 kB
./elements/rh-audio-player/rh-audio-player.js 12.4 kB
./elements/rh-audio-player/rh-cue.js 1.95 kB
./elements/rh-audio-player/rh-transcript.js 2.68 kB
./elements/rh-avatar/random-pattern-controller.js 2.72 kB
./elements/rh-avatar/rh-avatar.js 2.61 kB
./elements/rh-back-to-top/rh-back-to-top.js 1.98 kB
./elements/rh-badge/rh-badge.js 1.62 kB
./elements/rh-blockquote/rh-blockquote.js 1.38 kB
./elements/rh-breadcrumb/rh-breadcrumb.js 1.67 kB
./elements/rh-card/rh-card.js 3.13 kB
./elements/rh-chip/context.js 165 B
./elements/rh-chip/rh-chip-group.js 1.58 kB
./elements/rh-chip/rh-chip.js 2.06 kB
./elements/rh-code-block/prism.css.js 667 B
./elements/rh-code-block/prism.js 572 B
./elements/rh-code-block/rh-code-block.js 8.99 kB
./elements/rh-cta/rh-cta.js 3.72 kB
./elements/rh-dialog/rh-dialog.js 4.72 kB
./elements/rh-dialog/yt-api.js 617 B
./elements/rh-disclosure/rh-disclosure.js 2.53 kB
./elements/rh-footer/rh-footer-block.js 714 B
./elements/rh-footer/rh-footer-copyright.js 357 B
./elements/rh-footer/rh-footer-links.js 1.1 kB
./elements/rh-footer/rh-footer-social-link.js 1.03 kB
./elements/rh-footer/rh-footer-universal.js 3.99 kB
./elements/rh-footer/rh-footer.js 4.67 kB
./elements/rh-health-index/rh-health-index.js 2.11 kB
./elements/rh-icon/rh-icon.js 2.52 kB
./elements/rh-icon/ssr.js 181 B
./elements/rh-jump-links/context.js 179 B
./elements/rh-jump-links/rh-jump-link.js 1.48 kB
./elements/rh-jump-links/rh-jump-links-list.js 1.17 kB
./elements/rh-jump-links/rh-jump-links.js 2.38 kB
./elements/rh-menu-dropdown/rh-menu-dropdown.js 4.12 kB
./elements/rh-menu/rh-menu-item-group.js 614 B
./elements/rh-menu/rh-menu-item.js 2.21 kB
./elements/rh-menu/rh-menu.js 1.6 kB
./elements/rh-navigation-link/rh-navigation-link.js 1.87 kB
./elements/rh-navigation-primary/context.js 176 B
./elements/rh-navigation-primary/rh-navigation-primary-item-menu.js 1.03 kB
./elements/rh-navigation-primary/rh-navigation-primary-item.js 3.46 kB
./elements/rh-navigation-primary/rh-navigation-primary-overlay.js 534 B
./elements/rh-navigation-primary/rh-navigation-primary.js 7.67 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js 2.57 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu-section.js 1.31 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu.js 1.68 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-overlay.js 562 B
./elements/rh-navigation-secondary/rh-navigation-secondary.js 5.23 kB
./elements/rh-navigation-secondary/test/fixtures.js 769 B
./elements/rh-navigation-vertical/rh-navigation-vertical-list.js 2.24 kB
./elements/rh-navigation-vertical/rh-navigation-vertical.js 1.54 kB
./elements/rh-pagination/rh-pagination.js 5.69 kB
./elements/rh-progress-stepper/context.js 187 B
./elements/rh-progress-stepper/rh-progress-step.js 3.02 kB
./elements/rh-progress-stepper/rh-progress-stepper.js 4.78 kB
./elements/rh-scheme-toggle/rh-scheme-toggle.js 1.91 kB
./elements/rh-site-status/rh-site-status.js 2.44 kB
./elements/rh-skeleton/rh-skeleton.js 677 B
./elements/rh-skip-link/rh-skip-link.js 1.33 kB
./elements/rh-spinner/rh-spinner.js 1.31 kB
./elements/rh-stat/rh-stat.js 2.05 kB
./elements/rh-subnav/rh-subnav.js 2.98 kB
./elements/rh-surface/rh-surface.js 911 B
./elements/rh-surface/test/elements.js 763 B
./elements/rh-switch/rh-switch.js 2.9 kB
./elements/rh-table/rh-sort-button.js 1.39 kB
./elements/rh-table/rh-table.js 2.81 kB
./elements/rh-tabs/context.js 226 B
./elements/rh-tabs/rh-tab-panel.js 1 kB
./elements/rh-tabs/rh-tab.js 2.83 kB
./elements/rh-tabs/rh-tabs.js 3.65 kB
./elements/rh-tag/rh-tag.js 2.96 kB
./elements/rh-tile/rh-tile-group.js 1.78 kB
./elements/rh-tile/rh-tile.js 4.71 kB
./elements/rh-timestamp/rh-timestamp.js 991 B
./elements/rh-tooltip/rh-tooltip.js 3.18 kB
./elements/rh-video-embed/rh-video-embed.js 4.64 kB
./lib/color-palettes.js 851 B
./lib/context/headings/consumer.js 591 B
./lib/context/headings/provider.js 1.2 kB
./lib/elements/rh-context-demo/rh-context-demo.js 1.16 kB
./lib/elements/rh-context-picker/rh-context-picker.js 2.18 kB
./lib/environment.js 194 B
./lib/functions.js 175 B
./lib/I18nController.js 1.37 kB
./lib/ScreenSizeController.js 876 B
./lib/ssr-controller.js 201 B
./lib/themable.js 549 B
./react/lib/color-palettes.js 97 B
./react/lib/context/headings/consumer.js 103 B
./react/lib/context/headings/provider.js 105 B
./react/lib/elements/rh-context-demo/rh-context-demo.js 186 B
./react/lib/elements/rh-context-picker/rh-context-picker.js 189 B
./react/lib/functions.js 92 B
./react/lib/I18nController.js 97 B
./react/lib/ScreenSizeController.js 102 B
./react/lib/ssr-controller.js 97 B
./react/lib/themable.js 91 B
./react/rh-accordion/rh-accordion-header.js 199 B
./react/rh-accordion/rh-accordion-panel.js 185 B
./react/rh-accordion/rh-accordion.js 202 B
./react/rh-alert/rh-alert.js 184 B
./react/rh-announcement/rh-announcement.js 189 B
./react/rh-audio-player/rh-audio-player-about.js 191 B
./react/rh-audio-player/rh-audio-player-rate-stepper.js 199 B
./react/rh-audio-player/rh-audio-player-scrolling-text-overflow.js 214 B
./react/rh-audio-player/rh-audio-player-subscribe.js 196 B
./react/rh-audio-player/rh-audio-player.js 183 B
./react/rh-audio-player/rh-cue.js 195 B
./react/rh-audio-player/rh-transcript.js 187 B
./react/rh-avatar/rh-avatar.js 173 B
./react/rh-back-to-top/rh-back-to-top.js 183 B
./react/rh-badge/rh-badge.js 174 B
./react/rh-blockquote/rh-blockquote.js 179 B
./react/rh-breadcrumb/rh-breadcrumb.js 179 B
./react/rh-button/rh-button.js 174 B
./react/rh-card/rh-card.js 172 B
./react/rh-chip/rh-chip-group.js 182 B
./react/rh-chip/rh-chip.js 187 B
./react/rh-code-block/rh-code-block.js 193 B
./react/rh-cta/rh-cta.js 170 B
./react/rh-dialog/rh-dialog.js 203 B
./react/rh-disclosure/rh-disclosure.js 192 B
./react/rh-footer/rh-footer-block.js 184 B
./react/rh-footer/rh-footer-copyright.js 187 B
./react/rh-footer/rh-footer-links.js 185 B
./react/rh-footer/rh-footer-social-link.js 193 B
./react/rh-footer/rh-footer-universal.js 188 B
./react/rh-footer/rh-footer.js 174 B
./react/rh-health-index/rh-health-index.js 184 B
./react/rh-icon/rh-icon.js 195 B
./react/rh-jump-links/rh-jump-link.js 183 B
./react/rh-jump-links/rh-jump-links-list.js 189 B
./react/rh-jump-links/rh-jump-links.js 195 B
./react/rh-menu-dropdown/rh-menu-dropdown.js 185 B
./react/rh-menu/rh-menu-item-group.js 190 B
./react/rh-menu/rh-menu-item.js 181 B
./react/rh-menu/rh-menu.js 173 B
./react/rh-navigation-link/rh-navigation-link.js 186 B
./react/rh-navigation-primary/rh-navigation-primary-item-menu.js 205 B
./react/rh-navigation-primary/rh-navigation-primary-item.js 198 B
./react/rh-navigation-primary/rh-navigation-primary-overlay.js 199 B
./react/rh-navigation-primary/rh-navigation-primary.js 189 B
./react/rh-navigation-secondary/rh-navigation-secondary-dropdown.js 217 B
./react/rh-navigation-secondary/rh-navigation-secondary-menu-section.js 205 B
./react/rh-navigation-secondary/rh-navigation-secondary-menu.js 199 B
./react/rh-navigation-secondary/rh-navigation-secondary-overlay.js 201 B
./react/rh-navigation-secondary/rh-navigation-secondary.js 213 B
./react/rh-navigation-vertical/rh-navigation-vertical-list.js 198 B
./react/rh-navigation-vertical/rh-navigation-vertical.js 189 B
./react/rh-pagination/rh-pagination.js 178 B
./react/rh-progress-stepper/rh-progress-step.js 196 B
./react/rh-progress-stepper/rh-progress-stepper.js 186 B
./react/rh-scheme-toggle/rh-scheme-toggle.js 183 B
./react/rh-site-status/rh-site-status.js 181 B
./react/rh-skeleton/rh-skeleton.js 176 B
./react/rh-skip-link/rh-skip-link.js 181 B
./react/rh-spinner/rh-spinner.js 175 B
./react/rh-stat/rh-stat.js 171 B
./react/rh-subnav/rh-subnav.js 175 B
./react/rh-surface/rh-surface.js 175 B
./react/rh-switch/rh-switch.js 174 B
./react/rh-table/rh-sort-button.js 200 B
./react/rh-table/rh-table.js 174 B
./react/rh-tabs/rh-tab-panel.js 181 B
./react/rh-tabs/rh-tab.js 187 B
./react/rh-tabs/rh-tabs.js 174 B
./react/rh-tag/rh-tag.js 182 B
./react/rh-tile/rh-tile-group.js 183 B
./react/rh-tile/rh-tile.js 181 B
./react/rh-timestamp/rh-timestamp.js 176 B
./react/rh-tooltip/rh-tooltip.js 175 B
./react/rh-video-embed/rh-video-embed.js 227 B
./uxdot/ssr-failure-recoverable.js 658 B
./uxdot/uxdot-best-practice.js 812 B
./uxdot/uxdot-copy-button.js 1.24 kB
./uxdot/uxdot-copy-permalink.js 1.14 kB
./uxdot/uxdot-demo.js 2.76 kB
./uxdot/uxdot-example.js 1.14 kB
./uxdot/uxdot-feedback.js 983 B
./uxdot/uxdot-header.js 886 B
./uxdot/uxdot-knob-attribute.js 3.73 kB
./uxdot/uxdot-masthead.js 1.45 kB
./uxdot/uxdot-pattern-ssr-controller-client.js 1.24 kB
./uxdot/uxdot-pattern-ssr-controller-server.js 1.71 kB
./uxdot/uxdot-pattern-ssr-controller.js 213 B
./uxdot/uxdot-pattern.js 2.39 kB
./uxdot/uxdot-repo-status-checklist.js 1.39 kB
./uxdot/uxdot-repo-status-list.js 1.24 kB
./uxdot/uxdot-repo.js 867 B
./uxdot/uxdot-sidenav.js 2.04 kB
./uxdot/uxdot-spacer-tokens-table.js 2.45 kB
./uxdot/uxdot-toc.js 1.8 kB

compressed-size-action

Update element, attribute, slot, event, and CSS property documentation.
Add demo description .md files. Use RFC 2119 keywords, include
ARIA/accessibility notes, and document event detail shapes.

Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@github-actions
Copy link
Contributor

github-actions bot commented Mar 5, 2026

Documentation Health

Module Score
rh-button/rh-button.js 91/100 91%
Overall 91/100 91%
rh-button (RhButton) — 91/100 ✅
Category Score
Element description 25/25
Attribute documentation 20/20
Slot documentation 12/15
CSS documentation 9/15 ⚠️
Event documentation 15/15
Demos 10/10

Recommendations:

  1. rh-button: reference design tokens or theme considerations in CSS descriptions (CSS documentation, +4 pts)
  2. rh-button: describe expected content types for slots (e.g., 'inline text', 'block elements') (Slot documentation, +3 pts)
  3. rh-button: add descriptions to all CSS custom properties (CSS documentation, +2 pts)

Replace companion .md files with <meta itemprop="description"> tags
in demo HTML files per CEM demo documentation guidelines.

Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Fix empty-line-before-comment, max-line-length, and formatting
issues in CSS custom property documentation comments.

Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add brief comments explaining what each design token controls
within this component's context.

Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
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.

1 participant