Skip to content

feat(jump-links): add <rh-jump-links>#2194

Merged
bennypowers merged 56 commits intostaging/cubonefrom
feat/jump-links
Apr 7, 2025
Merged

feat(jump-links): add <rh-jump-links>#2194
bennypowers merged 56 commits intostaging/cubonefrom
feat/jump-links

Conversation

@bennypowers
Copy link
Copy Markdown
Member

@bennypowers bennypowers commented Mar 4, 2025

What I did

  1. patch pfe-core and pfe-tools with unreleased changes (before merging here: merge there, release there; update here, revert patches here, clear netlify cache and rebuild)
  2. add <rh-jump-links> with rudimentary docs

Testing Instructions

  1. <rh-jump-links> docs, see demos and open each in new tab

@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Mar 4, 2025

🦋 Changeset detected

Latest commit: 00bb30e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@rhds/elements Minor

Not sure what this means? Click here to learn what changesets are.

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

@netlify
Copy link
Copy Markdown

netlify bot commented Mar 4, 2025

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

Name Link
🔨 Latest commit
🔍 Latest deploy log https://app.netlify.com/sites/red-hat-design-system/deploys/67f3f66c67495dc98af97312
😎 Deploy Preview https://deploy-preview-2194--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 site configuration.

@bennypowers bennypowers changed the base branch from main to staging/cubone March 4, 2025 12:52
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 4, 2025

Size Change: +5.83 kB (+2.57%)

Total Size: 232 kB

Filename Size Change
./elements.js 538 B +13 B (+2.48%)
./uxdot/uxdot-sidenav.js 2.69 kB -2 B (-0.07%)
./elements/rh-jump-links/context.js 179 B +179 B (new file) 🆕
./elements/rh-jump-links/rh-jump-link.js 1.46 kB +1.46 kB (new file) 🆕
./elements/rh-jump-links/rh-jump-links-list.js 1.15 kB +1.15 kB (new file) 🆕
./elements/rh-jump-links/rh-jump-links.js 2.45 kB +2.45 kB (new file) 🆕
./react/rh-jump-links/rh-jump-link.js 196 B +196 B (new file) 🆕
./react/rh-jump-links/rh-jump-links-list.js 189 B +189 B (new file) 🆕
./react/rh-jump-links/rh-jump-links.js 195 B +195 B (new file) 🆕
ℹ️ View Unchanged
Filename Size
./elements/rh-accordion/context.js 162 B
./elements/rh-accordion/rh-accordion-header.js 2.67 kB
./elements/rh-accordion/rh-accordion-panel.js 1.26 kB
./elements/rh-accordion/rh-accordion.js 3.32 kB
./elements/rh-alert/rh-alert.js 4.98 kB
./elements/rh-announcement/rh-announcement.js 2.12 kB
./elements/rh-audio-player/rh-audio-player-about.js 1.8 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.5 kB
./elements/rh-audio-player/rh-audio-player-subscribe.js 1.37 kB
./elements/rh-audio-player/rh-audio-player.js 13 kB
./elements/rh-audio-player/rh-cue.js 1.95 kB
./elements/rh-audio-player/rh-transcript.js 2.69 kB
./elements/rh-avatar/random-pattern-controller.js 2.72 kB
./elements/rh-avatar/rh-avatar.js 2.65 kB
./elements/rh-back-to-top/rh-back-to-top.js 1.94 kB
./elements/rh-badge/rh-badge.js 1.53 kB
./elements/rh-blockquote/rh-blockquote.js 1.37 kB
./elements/rh-breadcrumb/rh-breadcrumb.js 1.02 kB
./elements/rh-button/rh-button.js 3.3 kB
./elements/rh-card/rh-card.js 3.43 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 7.19 kB
./elements/rh-cta/rh-cta.js 3.95 kB
./elements/rh-dialog/rh-dialog.js 4.76 kB
./elements/rh-dialog/yt-api.js 617 B
./elements/rh-disclosure/rh-disclosure.js 2.06 kB
./elements/rh-footer/rh-footer-block.js 714 B
./elements/rh-footer/rh-footer-copyright.js 362 B
./elements/rh-footer/rh-footer-links.js 1.17 kB
./elements/rh-footer/rh-footer-social-link.js 1.15 kB
./elements/rh-footer/rh-footer-universal.js 3.96 kB
./elements/rh-footer/rh-footer.js 4.83 kB
./elements/rh-health-index/rh-health-index.js 2.4 kB
./elements/rh-icon/rh-icon.js 2.49 kB
./elements/rh-icon/ssr.js 181 B
./elements/rh-menu/rh-menu.js 1.19 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.4 kB
./elements/rh-navigation-primary/rh-navigation-primary-overlay.js 521 B
./elements/rh-navigation-primary/rh-navigation-primary.js 7.27 kB
./elements/rh-navigation-primary/test/fixtures.js 4.49 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js 2.47 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu-section.js 1.3 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu.js 1.75 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-overlay.js 571 B
./elements/rh-navigation-secondary/rh-navigation-secondary.js 5.25 kB
./elements/rh-navigation-secondary/test/fixtures.js 769 B
./elements/rh-pagination/rh-pagination.js 5.37 kB
./elements/rh-site-status/rh-site-status.js 2.38 kB
./elements/rh-skip-link/rh-skip-link.js 1.19 kB
./elements/rh-spinner/rh-spinner.js 1.29 kB
./elements/rh-stat/rh-stat.js 2.06 kB
./elements/rh-subnav/rh-subnav.js 2.4 kB
./elements/rh-surface/rh-surface.js 893 B
./elements/rh-surface/test/elements.js 763 B
./elements/rh-switch/rh-switch.js 2.88 kB
./elements/rh-table/rh-sort-button.js 1.4 kB
./elements/rh-table/rh-table.js 2.88 kB
./elements/rh-tabs/context.js 160 B
./elements/rh-tabs/rh-tab-panel.js 973 B
./elements/rh-tabs/rh-tab.js 3 kB
./elements/rh-tabs/rh-tabs.js 3.78 kB
./elements/rh-tag/rh-tag.js 2.66 kB
./elements/rh-tile/rh-tile-group.js 1.78 kB
./elements/rh-tile/rh-tile.js 4.89 kB
./elements/rh-timestamp/rh-timestamp.js 983 B
./elements/rh-tooltip/rh-tooltip.js 2.71 kB
./elements/rh-video-embed/rh-video-embed.js 4.54 kB
./lib/color-palettes.js 851 B
./lib/context/headings/consumer.js 593 B
./lib/context/headings/provider.js 1.18 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.38 kB
./lib/ScreenSizeController.js 849 B
./lib/ssr-controller.js 201 B
./lib/themable.js 542 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 215 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 213 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/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 181 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 202 B
./react/rh-menu/rh-menu.js 173 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-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-pagination/rh-pagination.js 178 B
./react/rh-site-status/rh-site-status.js 181 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 213 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 194 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 581 B
./uxdot/uxdot-best-practice.js 784 B
./uxdot/uxdot-color-scheme-picker.js 1.56 kB
./uxdot/uxdot-copy-button.js 1.24 kB
./uxdot/uxdot-copy-permalink.js 1.1 kB
./uxdot/uxdot-example.js 1.14 kB
./uxdot/uxdot-feedback.js 727 B
./uxdot/uxdot-header.js 1.02 kB
./uxdot/uxdot-installation-tabs.js 675 B
./uxdot/uxdot-masthead.js 1.25 kB
./uxdot/uxdot-pattern-ssr-controller-client.js 615 B
./uxdot/uxdot-pattern-ssr-controller-server.js 1.68 kB
./uxdot/uxdot-pattern-ssr-controller.js 213 B
./uxdot/uxdot-pattern.js 2.23 kB
./uxdot/uxdot-repo-status-checklist.js 1.16 kB
./uxdot/uxdot-repo-status-list.js 1.07 kB
./uxdot/uxdot-repo-status-table.js 782 B
./uxdot/uxdot-repo.js 1.17 kB
./uxdot/uxdot-search.js 2.39 kB
./uxdot/uxdot-spacer-tokens-table.js 2.46 kB
./uxdot/uxdot-toc.js 1.8 kB

compressed-size-action

@bennypowers bennypowers linked an issue Mar 4, 2025 that may be closed by this pull request
5 tasks
@bennypowers bennypowers moved this to In Progress 🟢 in Red Hat Design System Mar 24, 2025
@bennypowers
Copy link
Copy Markdown
Member Author

attempt number one at responsive disclosure unwrapping:

rh-disclosure.css

:host {
  border: var(--rh-border-width-sm, 1px) solid var(--rh-color-border-subtle);
  display: block;
  font-family: var(--rh-font-family-body-text);
  container-name: disclosure;

  @container disclosure style(--display: contents) {
    border: none;
  }
}

details,
summary,
#details-content {
  @container disclosure style(--display: contents) {
    display: contents;
  }

  &::details-content {
    display: block;
  }
}

rh-icon {
  @container disclosure style(--display: contents) {
    display: none;
  }
}

jump-links-responsive-pattern.css

    @media (width >= /*--rh-media-md*/ 992px) {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: var(--rh-space-lg);
      align-items: start;

      & rh-disclosure {
        --display: contents;
        position: sticky;
        top: 0;
      }
    }

@markcaron markcaron added this to the 2025/Q1 — Cubone release milestone Apr 6, 2025
@bennypowers bennypowers requested a review from marionnegp April 7, 2025 15:26
Copy link
Copy Markdown
Collaborator

@zeroedin zeroedin left a comment

Choose a reason for hiding this comment

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

Links Graciously Trigger Movement

Copy link
Copy Markdown
Collaborator

@adamjohnson adamjohnson left a comment

Choose a reason for hiding this comment

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

Links Gently Track Movement

@bennypowers bennypowers merged commit 8973bc4 into staging/cubone Apr 7, 2025
4 of 8 checks passed
@bennypowers bennypowers deleted the feat/jump-links branch April 7, 2025 16:27
@github-project-automation github-project-automation bot moved this from Review 🔍 to Done ☑️ in Red Hat Design System Apr 7, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Done ☑️

Development

Successfully merging this pull request may close these issues.

[feat]: <rh-jump-links> ready to migrate

5 participants