feat(navigation-universal): add `<rh-navigation-universal>` #2000

adamjohnson · 2024-10-18T21:10:51Z

What I did

Add the <rh-navigation-universal> element.

Testing Instructions

View the DP for Universal Navigation:
- Demo
- Docs
Compare to Figma and what exists on live properties.

To Do's

Notes to Reviewers

Right now, this mimics what exists on redhat.com.

This design is not in the Figma library. Should it exist?
- If so, designers: make sure this component meets design specs.
In the Figma Library, there's 16px of padding around each link. This results in what I perceive to be much larger height than what's in production.
- Should it be 16px?
- FWIW, I have it set to 8px as of this writing.
Double check that my values in repoStatus.yaml are correct.
Some noticeable FOUC. What should we do about that?
- This may soon be handled by rh-disclosure and DSD
Should this have a dark variant (may only apply to dropdown content)?
Mobile:
- On redhat.com and elsewhere, the universal nav is included inside the main navigation on mobile.
- What should happen on mobile here? Should we dictate that? Or should end users decide how they want to handle mobile (hamburger, hide, etc)?
Developers: added an any type to fix Argument of type 'DocumentFragment | undefined' is not assignable to parameter of type 'Node'. Would love some help getting the #getDetailsContentHTML() function properly typed, if applicable. Resolved via sub component.

WIP

changeset-bot · 2024-10-18T21:10:55Z

⚠️ No Changeset found

Latest commit: 57427aa

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 · 2024-10-18T21:11:10Z

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

Name	Link
🔨 Latest commit	`8c9ea95`
🔍 Latest deploy log	https://app.netlify.com/sites/red-hat-design-system/deploys/677d4d6dc22ecc0008c95b57
😎 Deploy Preview	https://deploy-preview-2000--red-hat-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

github-actions · 2024-10-18T21:13:08Z

Size Change: +3.45 kB (+1.66%)

Total Size: 211 kB

Filename	Size	Change
`./elements.js`	487 B	+14 B (+2.96%)
`./elements/rh-navigation-universal/rh-navigation-universal-dropdown.js`	1.65 kB	+1.65 kB (new file)	🆕
`./elements/rh-navigation-universal/rh-navigation-universal.js`	1.39 kB	+1.39 kB (new file)	🆕
`./react/rh-navigation-universal/rh-navigation-universal-dropdown.js`	203 B	+203 B (new file)	🆕
`./react/rh-navigation-universal/rh-navigation-universal.js`	192 B	+192 B (new file)	🆕

ℹ️ View Unchanged

Filename	Size
`./elements/rh-accordion/context.js`	162 B
`./elements/rh-accordion/rh-accordion-header.js`	2.75 kB
`./elements/rh-accordion/rh-accordion-panel.js`	1.35 kB
`./elements/rh-accordion/rh-accordion.js`	3.21 kB
`./elements/rh-alert/rh-alert.js`	4.31 kB
`./elements/rh-audio-player/rh-audio-player-about.js`	1.85 kB
`./elements/rh-audio-player/rh-audio-player-rate-stepper.js`	1.85 kB
`./elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.js`	1.53 kB
`./elements/rh-audio-player/rh-audio-player-subscribe.js`	1.43 kB
`./elements/rh-audio-player/rh-audio-player.js`	13.2 kB
`./elements/rh-audio-player/rh-cue.js`	2 kB
`./elements/rh-audio-player/rh-transcript.js`	2.75 kB
`./elements/rh-avatar/random-pattern-controller.js`	2.72 kB
`./elements/rh-avatar/rh-avatar.js`	2.9 kB
`./elements/rh-back-to-top/rh-back-to-top.js`	2.1 kB
`./elements/rh-badge/rh-badge.js`	1.55 kB
`./elements/rh-blockquote/rh-blockquote.js`	1.41 kB
`./elements/rh-breadcrumb/rh-breadcrumb.js`	1.5 kB
`./elements/rh-button/rh-button.js`	4.24 kB
`./elements/rh-card/rh-card.js`	3.64 kB
`./elements/rh-code-block/prism.css.js`	822 B
`./elements/rh-code-block/prism.js`	572 B
`./elements/rh-code-block/rh-code-block.js`	7.25 kB
`./elements/rh-cta/rh-cta.js`	3.98 kB
`./elements/rh-dialog/rh-dialog.js`	4.78 kB
`./elements/rh-dialog/yt-api.js`	617 B
`./elements/rh-footer/rh-footer-block.js`	766 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`	964 B
`./elements/rh-footer/rh-footer-universal.js`	4.05 kB
`./elements/rh-footer/rh-footer.js`	5.01 kB
`./elements/rh-health-index/rh-health-index.js`	2.35 kB
`./elements/rh-icon/rh-icon.js`	2.35 kB
`./elements/rh-icon/ssr.js`	181 B
`./elements/rh-menu/rh-menu.js`	1.29 kB
`./elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js`	2.47 kB
`./elements/rh-navigation-secondary/rh-navigation-secondary-menu-section.js`	1.35 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.31 kB
`./elements/rh-navigation-secondary/test/fixtures.js`	769 B
`./elements/rh-pagination/rh-pagination.js`	5.46 kB
`./elements/rh-site-status/rh-site-status.js`	2.5 kB
`./elements/rh-skip-link/rh-skip-link.js`	1.24 kB
`./elements/rh-spinner/rh-spinner.js`	1.43 kB
`./elements/rh-stat/rh-stat.js`	2.2 kB
`./elements/rh-subnav/rh-subnav.js`	2.73 kB
`./elements/rh-surface/rh-surface.js`	1.14 kB
`./elements/rh-surface/test/elements.js`	423 B
`./elements/rh-switch/rh-switch.js`	2.93 kB
`./elements/rh-table/rh-sort-button.js`	1.49 kB
`./elements/rh-table/rh-table.js`	3.54 kB
`./elements/rh-tabs/context.js`	160 B
`./elements/rh-tabs/rh-tab-panel.js`	1.04 kB
`./elements/rh-tabs/rh-tab.js`	3.02 kB
`./elements/rh-tabs/rh-tabs.js`	3.77 kB
`./elements/rh-tag/rh-tag.js`	2.84 kB
`./elements/rh-tile/rh-tile-group.js`	1.81 kB
`./elements/rh-tile/rh-tile.js`	5.15 kB
`./elements/rh-timestamp/rh-timestamp.js`	983 B
`./elements/rh-tooltip/rh-tooltip.js`	2.73 kB
`./elements/rh-video-embed/rh-video-embed.js`	4.64 kB
`./lib/context/color/consumer.js`	1.41 kB
`./lib/context/color/controller.js`	947 B
`./lib/context/color/provider.js`	2.18 kB
`./lib/context/event.js`	593 B
`./lib/context/headings/consumer.js`	722 B
`./lib/context/headings/controller.js`	1.12 kB
`./lib/context/headings/provider.js`	1.24 kB
`./lib/DirController.js`	565 B
`./lib/elements/rh-context-demo/rh-context-demo.js`	1.28 kB
`./lib/elements/rh-context-picker/rh-context-picker.js`	2.24 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`	251 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-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-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-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-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/uxdot-best-practice.js`	742 B
`./uxdot/uxdot-copy-button.js`	1.2 kB
`./uxdot/uxdot-copy-permalink.js`	1.1 kB
`./uxdot/uxdot-example.js`	1.17 kB
`./uxdot/uxdot-feedback.js`	727 B
`./uxdot/uxdot-header.js`	1.07 kB
`./uxdot/uxdot-hero.js`	679 B
`./uxdot/uxdot-installation-tabs.js`	675 B
`./uxdot/uxdot-masthead.js`	809 B
`./uxdot/uxdot-pattern-ssr-controller-client.js`	604 B
`./uxdot/uxdot-pattern-ssr-controller-server.js`	1.68 kB
`./uxdot/uxdot-pattern-ssr-controller.js`	213 B
`./uxdot/uxdot-pattern.js`	2.12 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.67 kB
`./uxdot/uxdot-spacer-tokens-table.js`	2.45 kB
`./uxdot/uxdot-toc.js`	1.13 kB

_{compressed-size-action}

markcaron · 2024-10-28T15:04:16Z

We should limit the design to a single universal nav, preferably the right-aligned nav with the borders on hover (like redhat.com). The left-aligned design competes with the RH logo—almost "blocking" the eye, IMO.

coreyvickery · 2024-10-28T18:27:23Z

@adamjohnson Looks like we also have to also account for personalizations.

coreyvickery · 2024-10-28T18:28:21Z

@adamjohnson Personalization being the Large retailer delivers ... text in the upper left corner.

adamjohnson · 2024-10-28T20:12:38Z

@coreyvickery will the info icon (left) and/or chevron (right) in the personalization message change? Or are those spots always those particular icons?

coreyvickery · 2024-10-29T21:33:23Z

@coreyvickery will the info icon (left) and/or chevron (right) in the personalization message change? Or are those spots always those particular icons?

@adamjohnson Not to my knowledge no, but let's make sure we're using current icons from Brand for both.

…ot has content

Much cleaner.

adamjohnson · 2024-11-06T15:31:50Z

In a call today, Dan Caryll confirmed that Universal Nav should be right aligned and contain the "All Red Hat" dropdown by default.

So, as the code stands right now, I'm going to take the "bordered" demo + styles and make that variant the default for this component.

feat(navigation-universal): add <rh-navigation-universal>

459a841

WIP

adamjohnson added this to the 2024/Q4 — Cubone release milestone Oct 18, 2024

adamjohnson self-assigned this Oct 18, 2024

adamjohnson linked an issue Oct 18, 2024 that may be closed by this pull request

[feat] Create <rh-navigation-universal> element #310

Open

adamjohnson changed the base branch from main to staging/cubone October 18, 2024 21:11

adamjohnson added 3 commits October 25, 2024 17:06

feat(navigation-universal): implement bordered variant dropdown

4b56926

fix(navigation-universal): fix dropdown list item font color

db5c9a5

fix(navigation-universal): explicitly set dropdown list item color

96c0462

feat(navigation-universal): add personalization

f78c904

adamjohnson added 11 commits October 30, 2024 10:23

chore(navigation-univeral): fix typescript build

518a09e

feat(navigation-universal): only load rh-icon for bordered variant

fe78cc2

feat(navigation-universal): only load rh-icon when personalization sl…

e8cc4c1

…ot has content

refactor(navigation-universal): organize / order statics and methods

0e2b91b

feat(navigation-universal): add dropdown sub-component

5db8f54

Much cleaner.

fix(navigation-universal): simplify accessible label default text

7dbe728

docs(universal-navigation): clarify bordered prop docs

6f168ee

fix(navigation-universal): white background on dropdown content

e178958

fix(navigation-universal): make list items without links visible

6d1afbd

test(navigation-universal): add a11y related tests

67cef02

feat(navigation-universal): add escape to close on details/summary

8ac30b6

refactor(navigation-universal): make bordered variant the default

f5dd7e1

adamjohnson added 2 commits November 11, 2024 17:02

fix(navigation-universal): use logical properties

57427aa

Merge branch 'staging/cubone' into feat/navigation-universal

8c9ea95

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(navigation-universal): add `<rh-navigation-universal>` #2000

feat(navigation-universal): add `<rh-navigation-universal>` #2000

adamjohnson commented Oct 18, 2024 •

edited

Loading

changeset-bot bot commented Oct 18, 2024 •

edited

Loading

netlify bot commented Oct 18, 2024 •

edited

Loading

github-actions bot commented Oct 18, 2024 •

edited

Loading

markcaron commented Oct 28, 2024

coreyvickery commented Oct 28, 2024

coreyvickery commented Oct 28, 2024

adamjohnson commented Oct 28, 2024 •

edited

Loading

coreyvickery commented Oct 29, 2024

adamjohnson commented Nov 6, 2024

feat(navigation-universal): add <rh-navigation-universal> #2000

Are you sure you want to change the base?

feat(navigation-universal): add <rh-navigation-universal> #2000

Conversation

adamjohnson commented Oct 18, 2024 • edited Loading

What I did

Testing Instructions

To Do's

Notes to Reviewers

changeset-bot bot commented Oct 18, 2024 • edited Loading

⚠️ No Changeset found

netlify bot commented Oct 18, 2024 • edited Loading

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

github-actions bot commented Oct 18, 2024 • edited Loading

markcaron commented Oct 28, 2024

coreyvickery commented Oct 28, 2024

coreyvickery commented Oct 28, 2024

adamjohnson commented Oct 28, 2024 • edited Loading

coreyvickery commented Oct 29, 2024

adamjohnson commented Nov 6, 2024

feat(navigation-universal): add `<rh-navigation-universal>` #2000

feat(navigation-universal): add `<rh-navigation-universal>` #2000

adamjohnson commented Oct 18, 2024 •

edited

Loading

changeset-bot bot commented Oct 18, 2024 •

edited

Loading

netlify bot commented Oct 18, 2024 •

edited

Loading

github-actions bot commented Oct 18, 2024 •

edited

Loading

adamjohnson commented Oct 28, 2024 •

edited

Loading