Skip to content

fix(navigation primary): secondary items fit content at #2405

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

zeroedin
Copy link
Collaborator

@zeroedin zeroedin commented May 27, 2025

What I did

  1. First pass at secondary item dropdowns menu-fit-content-at attributes. Allows secondary items to change when they move from mobile full-screen to fit-content width

TODO:

  • Figure out the separation of concern between compact (padding changes) and these new breakpoints
  • Are there other issues with this approach not thoughtfully processed yet?
  • Likely rebase against staging/diglett due to this change being a minor
  • Bring up change to breakpoints names/values that were missed in review for hide-at. Breaking? If so, we may want to revert that commit and open an issue for the change on the next available major.

Testing Instructions

Notes to Reviewers

ts.

Copy link

changeset-bot bot commented May 27, 2025

⚠️ No Changeset found

Latest commit: cd15565

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

Copy link

netlify bot commented May 27, 2025

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

Name Link
🔨 Latest commit cd15565
🔍 Latest deploy log https://app.netlify.com/projects/red-hat-design-system/deploys/68657ec98ae83500089c876c
😎 Deploy Preview https://deploy-preview-2405--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.

Copy link
Contributor

github-actions bot commented May 27, 2025

Size Change: +238 B (+0.1%)

Total Size: 231 kB

Filename Size Change
./elements.js 541 B +3 B (+0.56%)
./elements/rh-navigation-primary/rh-navigation-primary-item.js 3.64 kB +235 B (+6.9%) 🔍
ℹ️ 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.81 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.52 kB
./elements/rh-audio-player/rh-audio-player-subscribe.js 1.4 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.68 kB
./elements/rh-avatar/random-pattern-controller.js 2.72 kB
./elements/rh-avatar/rh-avatar.js 2.68 kB
./elements/rh-back-to-top/rh-back-to-top.js 1.96 kB
./elements/rh-badge/rh-badge.js 1.6 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.29 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.66 kB
./elements/rh-cta/rh-cta.js 3.96 kB
./elements/rh-dialog/rh-dialog.js 4.81 kB
./elements/rh-dialog/yt-api.js 617 B
./elements/rh-disclosure/rh-disclosure.js 2.25 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.19 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.84 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-jump-links/context.js 179 B
./elements/rh-jump-links/rh-jump-link.js 1.55 kB
./elements/rh-jump-links/rh-jump-links-list.js 1.17 kB
./elements/rh-jump-links/rh-jump-links.js 2.35 kB
./elements/rh-menu/rh-menu.js 1.21 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-overlay.js 534 B
./elements/rh-navigation-primary/rh-navigation-primary.js 7.35 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js 2.57 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu-section.js 1.32 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu.js 1.75 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-overlay.js 562 B
./elements/rh-navigation-secondary/rh-navigation-secondary.js 5.26 kB
./elements/rh-navigation-secondary/test/fixtures.js 769 B
./elements/rh-pagination/rh-pagination.js 5.57 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.08 kB
./elements/rh-subnav/rh-subnav.js 2.42 kB
./elements/rh-surface/rh-surface.js 893 B
./elements/rh-surface/test/elements.js 763 B
./elements/rh-switch/rh-switch.js 2.89 kB
./elements/rh-table/rh-sort-button.js 1.4 kB
./elements/rh-table/rh-table.js 2.89 kB
./elements/rh-tabs/context.js 226 B
./elements/rh-tabs/rh-tab-panel.js 973 B
./elements/rh-tabs/rh-tab.js 2.95 kB
./elements/rh-tabs/rh-tabs.js 3.62 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 3.12 kB
./elements/rh-video-embed/rh-video-embed.js 4.6 kB
./lib/color-palettes.js 851 B
./lib/context/headings/consumer.js 593 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/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-jump-links/rh-jump-link.js 196 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/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 812 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-demo.js 1.38 kB
./uxdot/uxdot-example.js 1.14 kB
./uxdot/uxdot-feedback.js 837 B
./uxdot/uxdot-header.js 1.02 kB
./uxdot/uxdot-masthead.js 1.36 kB
./uxdot/uxdot-pattern-ssr-controller-client.js 615 B
./uxdot/uxdot-pattern-ssr-controller-server.js 1.72 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-sidenav.js 2.69 kB
./uxdot/uxdot-spacer-tokens-table.js 2.46 kB
./uxdot/uxdot-toc.js 1.8 kB

compressed-size-action

@bennypowers
Copy link
Member

bennypowers commented Jul 3, 2025

Can we do this with CSS only? Adding SSR complexity to this element specifically is likely to have downstream implications. This also subtly breaks the already accepted designs, so we shouldn't add this feature in any regard, without design and PM input.

@zeroedin zeroedin moved this to Hold 🔴 in Red Hat Design System Jul 11, 2025
@zeroedin
Copy link
Collaborator Author

Can we do this with CSS only? Adding SSR complexity to this element specifically is likely to have downstream implications. This also subtly breaks the already accepted designs, so we shouldn't add this feature in any regard, without design and PM input.

I'm not sure we should do it at all. I agree with it breaking the accepted designs, and would prefer these changes be formally requested by design first if there is an issue with the component as is. For these reasons, the PR remains in draft. I added the "hold" status to it. This was in response to a "bug/can we have" report by the RHDC team, but upon reviewing the details and the design originally provided, I'm not convinced yet either.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Hold 🔴
Development

Successfully merging this pull request may close these issues.

2 participants