Skip to content

docs(next-prev): adding <uxdot-pathfinder> component and adding next/prev links to Getting Started - #3100

Open
markcaron wants to merge 10 commits into
mainfrom
docs/next-prev-links
Open

docs(next-prev): adding <uxdot-pathfinder> component and adding next/prev links to Getting Started#3100
markcaron wants to merge 10 commits into
mainfrom
docs/next-prev-links

Conversation

@markcaron

@markcaron markcaron commented Jul 14, 2026

Copy link
Copy Markdown
Collaborator

What I did

  1. Added <uxdot-pathfinder>
  2. Used it to create Next/Previous links on the Getting Started section and Element pages as a POC before adding them elsewhere.

Testing Instructions

  1. Check quality of the Pathfinder component
  2. Check application of it on the pages

@netlify

netlify Bot commented Jul 14, 2026

Copy link
Copy Markdown

Deploy Preview for red-hat-design-system ready!

Name Link
🔨 Latest commit 644a93f
🔍 Latest deploy log https://app.netlify.com/projects/red-hat-design-system/deploys/6a68e0ec17e20a0007bba982
😎 Deploy Preview https://deploy-preview-3100--red-hat-design-system.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

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

@changeset-bot

changeset-bot Bot commented Jul 14, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 644a93f

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

@github-actions

github-actions Bot commented Jul 14, 2026

Copy link
Copy Markdown
Contributor

Size Change: +1.51 kB (+0.47%)

Total Size: 323 kB

📦 View Changed
Filename Size Change
uxdot/uxdot-pathfinder.js 1.51 kB +1.51 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size
elements.js 838 B
elements/rh-accordion/context.js 162 B
elements/rh-accordion/rh-accordion-header.js 3.33 kB
elements/rh-accordion/rh-accordion-panel.js 2.03 kB
elements/rh-accordion/rh-accordion.js 3.67 kB
elements/rh-alert/rh-alert.js 5.53 kB
elements/rh-announcement/rh-announcement.js 2.84 kB
elements/rh-audio-player/rh-audio-player-about.js 2.28 kB
elements/rh-audio-player/rh-audio-player-rate-stepper.js 2.07 kB
elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.js 1.78 kB
elements/rh-audio-player/rh-audio-player-subscribe.js 1.9 kB
elements/rh-audio-player/rh-audio-player.js 13.2 kB
elements/rh-audio-player/rh-cue.js 2.32 kB
elements/rh-audio-player/rh-transcript.js 3.38 kB
elements/rh-avatar/random-pattern-controller.js 2.72 kB
elements/rh-avatar/rh-avatar.js 3.45 kB
elements/rh-back-to-top/rh-back-to-top.js 2.79 kB
elements/rh-badge/rh-badge.js 2.05 kB
elements/rh-blockquote/rh-blockquote.js 1.93 kB
elements/rh-breadcrumb/rh-breadcrumb.js 2.34 kB
elements/rh-button-group/rh-button-group.js 937 B
elements/rh-button/rh-button.js 4.15 kB
elements/rh-card/rh-card.js 3.46 kB
elements/rh-chip/context.js 165 B
elements/rh-chip/rh-chip-group.js 1.98 kB
elements/rh-chip/rh-chip.js 2.45 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 9.21 kB
elements/rh-cta/rh-cta.js 3.83 kB
elements/rh-dialog/rh-dialog.js 5.04 kB
elements/rh-dialog/yt-api.js 617 B
elements/rh-disclosure/rh-disclosure.js 3.41 kB
elements/rh-footer/rh-footer-block.js 1.11 kB
elements/rh-footer/rh-footer-copyright.js 649 B
elements/rh-footer/rh-footer-links.js 1.65 kB
elements/rh-footer/rh-footer-social-link.js 1.24 kB
elements/rh-footer/rh-footer-universal.js 5.69 kB
elements/rh-footer/rh-footer.js 7.44 kB
elements/rh-health-index/rh-health-index.js 2.48 kB
elements/rh-icon/rh-icon.js 2.98 kB
elements/rh-icon/ssr.js 181 B
elements/rh-jump-links/context.js 179 B
elements/rh-jump-links/rh-jump-link.js 2.05 kB
elements/rh-jump-links/rh-jump-links-list.js 1.67 kB
elements/rh-jump-links/rh-jump-links.js 3.01 kB
elements/rh-menu-dropdown/rh-menu-dropdown.js 4.61 kB
elements/rh-menu/rh-menu-item-group.js 941 B
elements/rh-menu/rh-menu-item.js 2.52 kB
elements/rh-menu/rh-menu.js 2.04 kB
elements/rh-navigation-link/rh-navigation-link.js 2.21 kB
elements/rh-navigation-primary/context.js 176 B
elements/rh-navigation-primary/rh-navigation-primary-item-menu.js 1.48 kB
elements/rh-navigation-primary/rh-navigation-primary-item.js 4.22 kB
elements/rh-navigation-primary/rh-navigation-primary.js 10.1 kB
elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js 3.15 kB
elements/rh-navigation-secondary/rh-navigation-secondary-menu-section.js 2.02 kB
elements/rh-navigation-secondary/rh-navigation-secondary-menu.js 2.01 kB
elements/rh-navigation-secondary/rh-navigation-secondary-overlay.js 828 B
elements/rh-navigation-secondary/rh-navigation-secondary.js 6.32 kB
elements/rh-navigation-secondary/test/fixtures.js 769 B
elements/rh-navigation-vertical/rh-navigation-vertical-list.js 2.62 kB
elements/rh-navigation-vertical/rh-navigation-vertical.js 1.65 kB
elements/rh-pagination/rh-pagination.js 6.51 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-readtime/rh-readtime.js 2.93 kB
elements/rh-scheme-dropdown/rh-scheme-dropdown.js 3.24 kB
elements/rh-scheme-toggle/rh-scheme-toggle.js 2.85 kB
elements/rh-select/rh-option-group.js 1.6 kB
elements/rh-select/rh-option.js 2.39 kB
elements/rh-select/rh-select.js 9.46 kB
elements/rh-site-status/rh-site-status.js 2.51 kB
elements/rh-skeleton/rh-skeleton.js 742 B
elements/rh-skip-link/rh-skip-link.js 1.42 kB
elements/rh-spinner/rh-spinner.js 1.71 kB
elements/rh-stat/rh-stat.js 2.71 kB
elements/rh-subnav/rh-subnav.js 3.26 kB
elements/rh-surface/rh-surface.js 865 B
elements/rh-surface/test/elements.js 763 B
elements/rh-switch/rh-switch.js 3.25 kB
elements/rh-table/rh-sort-button.js 1.88 kB
elements/rh-table/rh-table.js 3.27 kB
elements/rh-tabs/context.js 223 B
elements/rh-tabs/rh-tab-panel.js 1.19 kB
elements/rh-tabs/rh-tab.js 4 kB
elements/rh-tabs/rh-tabs.js 4.82 kB
elements/rh-tag/rh-tag.js 3.32 kB
elements/rh-tile/rh-tile-group.js 1.97 kB
elements/rh-tile/rh-tile.js 5.09 kB
elements/rh-timestamp/rh-timestamp.js 1.33 kB
elements/rh-tooltip/rh-tooltip.js 3.4 kB
elements/rh-video-embed/rh-video-embed.js 5.45 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 223 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 207 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-group/rh-button-group.js 184 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 180 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 182 B
react/rh-menu-dropdown/rh-menu-dropdown.js 198 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 182 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 210 B
react/rh-navigation-primary/rh-navigation-primary.js 189 B
react/rh-navigation-secondary/rh-navigation-secondary-dropdown.js 227 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 209 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-readtime/rh-readtime.js 175 B
react/rh-scheme-dropdown/rh-scheme-dropdown.js 203 B
react/rh-scheme-toggle/rh-scheme-toggle.js 200 B
react/rh-select/rh-option-group.js 187 B
react/rh-select/rh-option.js 177 B
react/rh-select/rh-select.js 204 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 185 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 184 B
react/rh-tag/rh-tag.js 171 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-adopt-directive.js 2.02 kB
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.89 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 386 B
uxdot/uxdot-pattern-ssr-controller-server.js 1.71 kB
uxdot/uxdot-pattern-ssr-controller.js 213 B
uxdot/uxdot-pattern.js 2.37 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 2.08 kB

compressed-size-action

@github-actions

Copy link
Copy Markdown
Contributor

Documentation Health

No relevant changes in this PR.

@markcaron
markcaron marked this pull request as ready for review July 15, 2026 12:34
Comment thread uxdot/uxdot-pathfinder.css Outdated

@zeroedin zeroedin left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Links Guiding Through Material

@adamjohnson adamjohnson left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Definitely look into the reflow issue.

Also, pending further instruction from design, IMO instituting some min-inline-size and max-inline-size's would probably tighten up the design.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI if you scrunch your browser down to 320px, this component causes horizontal scrollbars. This violates WCAG 1.4.10 Reflow (AA).

I would recommend hiding the rh-icon arrows at narrow browser widths. Designers may have input as to whether these links should stack at small viewport widths.

@markcaron
markcaron requested a review from adamjohnson July 15, 2026 18:10

@coreyvickery coreyvickery left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@markcaron These changes should solve everything. cc @adamjohnson

  • Change title and page name text sizes to --rh-font-size-body-text-sm (14px)
  • Change left and right padding to --rh-space-lg (16px)
  • Remove min-align-size from CSS
  • Align Previous to left
  • Align Next to right

Screenshot at 320px

Screenshot 2026-07-15 at 11 36 14 AM

@markcaron
markcaron requested a review from coreyvickery July 16, 2026 18:10
@coreyvickery

Copy link
Copy Markdown
Collaborator

@markcaron Not sure if I'm seeing the changes I requested in regards to text size and padding.

@markcaron

Copy link
Copy Markdown
Collaborator Author

@coreyvickery my fault. Try again.

@coreyvickery coreyvickery left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@markcaron Let's remove the 64px padding on top and we're good to go.

Image

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

Labels

None yet

Projects

Status: Review 🔍

Development

Successfully merging this pull request may close these issues.

4 participants