Match chrome (header and sidebar nav) to new docs #790

mperrotti · 2024-10-16T15:33:50Z

Closes https://github.com/github/primer/issues/4166

We should wait until the new docs site is launched before merging this. Update 02 Dec 2024: soft launch is happening sometime this week - likely Friday 06 Dec 2024.

Summary

Updates the design of the docs site navigation to match the new Primer docs site (https://github.com/github/primer-docs) to give a more "seamless" feel when navigating between the different sub-sites.

We chose not to make these changes in doctocat to avoid accidentally breaking things downstream.

List of notable changes:

Header navigation has a new layout
Search input moved to the sidebar and functions like the search input in the new Primer docs.

What should reviewers focus on?

Confirm that this matches the design of the new Primer docs site.

Steps to test:

Run the docs site
Look at the navigation at various viewports

Supporting resources (related issues, external links, etc):

Contributor checklist:

All new and existing CI checks pass
Tests prove that the feature works and covers both happy and unhappy paths
Any drop in coverage, breaking changes or regressions have been documented above
New visual snapshots have been generated / updated for any UI changes
All developer debugging and non-functional logging has been removed
Related issues have been referenced in the PR description

Reviewer checklist:

Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
Check that tests prove the feature works and covers both happy and unhappy paths
Check that there aren't other open Pull Requests for the same update/change

Screenshots:

Note: these have become outdated as we've iterated, but they're pretty close

Child pages

Before	After

Landing page

Before	After

…o-new-docs

changeset-bot · 2024-10-16T15:33:54Z

⚠️ No Changeset found

Latest commit: 20734ae

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 · 2024-10-16T15:35:28Z

🟢 No design token changes found

github-actions · 2024-10-16T15:46:10Z

⚠️ Visual differences found

Our visual comparison tests found UI differences.

Please review the differences by using the test artifacts to ensure that the changes were intentional.

Artifacts can be downloaded and reviewed locally.

Download links are available at the bottom of the workflow summary screen.

Example:

If the changes are expected, please run npm run test:visual:update-snapshots to replace the previous fixtures.

Review visual differences

emilybrick

Hey there! This looks awesome! Leaving some feedback from the deployment link.

I believe this should be Primer / Brand UI, since that's the page the user is currently on, and Brand UI should not be listed to the right with the other links.

Is it possible to update the side nav in this PR to match new docs as well? Main things missing is Mona Sans. If the section headers aren't clickable, I think they're fine left in gray/muted color.

emilybrick

This looks awesome! Thank you so much 🙌

…o-new-docs

emilybrick · 2024-10-24T02:31:10Z

This looks great! I'm sorry, I mentioned in Slack but I should have put it here -

can we match the max-width of the brand page to the proiduct UI page, and add margin: 0 auto? Right now, on wide screens, they are different widths.

The max-width of the product UI page is actually being calculated based on the cards below (each card component has a max width built in), but I think it ends up around...1340px max-width. I tested this in the inspector and that appears to be the right size.

… into mp/match-header-to-new-docs

rezrah · 2024-12-05T14:29:43Z

apps/docs/src/components/navigation/navigation.tsx

+export function Navigation() {
+  const activeItem = navItems.find((item) => item.label === 'Brand UI')
+  const otherItems = navItems.filter((item) => item.label !== 'Brand UI')
+  const sortedNavItems = activeItem ? [activeItem, ...otherItems] : otherItems


Should we use consistent ordering given that this is a navigation menu shared across all docs sites?

E.g. in product docs, the product link comes first, but in brand docs the brand link is first. I'd expect them to stay the same so perhaps they don't need to be sorted at all?

Forgot to change this when we changed the design of the top nav. Pushing up a fix.

Agreed - @mperrotti and I actually spoke about this last night. Will fix before it gets merged.

apps/docs/src/components/side-panel/side-panel.tsx

Co-authored-by: Rez <[email protected]>

… into mp/match-header-to-new-docs

emilybrick · 2024-12-05T16:04:39Z

Note for follow up (I don't think we need to add it to this PR) - let's have consistent hover states on the top nav items.

Product UI nav item hover state:

Brand UI nav items don't have a hover state currently ☝️

emilybrick

Approving assuming we can fix the suggestions mentioned. Thank you!!

Left a small comment here: #790 (comment)

mperrotti · 2024-12-05T18:08:03Z

@emilybrick - that's an easy change to bring into here. I'll add that and then merge :)

I think I just styled with CSS variables that don't exist in Primer Brand.

… into mp/match-header-to-new-docs

…o-new-docs

mperrotti · 2024-12-05T20:38:57Z

@rezrah - any idea what could be causing this NPM error in CI?

Run npx json -I -f cra-test/tsconfig.json -e 'this.exclude=["node_modules", "**/*.cy.ts"]'
npm warn exec The following package was not found and will be installed: [email protected]
json: error: ENOENT: no such file or directory, open 'cra-test/tsconfig.json'

rezrah · 2024-12-09T13:50:07Z

@rezrah - any idea what could be causing this NPM error in CI?

They're unrelated to your changes @mperrotti - feel free to merge your PR when ready.

Several integration tests started failing at the same time for different reasons. I'll take a look at fixing those later this week.

mperrotti added 4 commits October 15, 2024 18:14

updates header nav content and layout

7535420

moves search input to sidebar and updates functionality

de95bbc

fixes dropdown text/icon color

4155f70

Merge branch 'main' of github.com:primer/brand into mp/match-header-t…

a2e47c0

…o-new-docs

mperrotti temporarily deployed to github-pages October 16, 2024 15:41 — with GitHub Actions Inactive

updates site name to Primer Marketing UI

3f056c8

mperrotti temporarily deployed to github-pages October 18, 2024 17:36 — with GitHub Actions Inactive

updates site name to Primer Brand UI

ff26e55

mperrotti temporarily deployed to github-pages October 18, 2024 19:05 — with GitHub Actions Inactive

update Marketing UI to Brand UI in header nav

24791e9

mperrotti temporarily deployed to github-pages October 18, 2024 19:38 — with GitHub Actions Inactive

mperrotti added 2 commits October 18, 2024 15:51

updates sidebar spacing to match primer-docs

d30c5bc

updates sidebar width to match primer-docs

bf1bb1a

mperrotti temporarily deployed to github-pages October 18, 2024 19:59 — with GitHub Actions Inactive

emilybrick requested changes Oct 21, 2024

View reviewed changes

fix bug where Brand UI wasn't appearing in the header

92c3335

mperrotti temporarily deployed to github-pages October 22, 2024 19:03 — with GitHub Actions Inactive

updates landing page to match primer-docs

07980c5

mperrotti temporarily deployed to github-pages October 22, 2024 21:40 — with GitHub Actions Inactive

mperrotti requested a review from emilybrick October 22, 2024 21:45

emilybrick approved these changes Oct 23, 2024

View reviewed changes

mperrotti added 2 commits October 23, 2024 16:48

Merge branch 'main' of github.com:primer/brand into mp/match-header-t…

1d6f02e

…o-new-docs

updates sidebar nav to use Mona Sans

35363c8

mperrotti temporarily deployed to github-pages October 23, 2024 20:58 — with GitHub Actions Inactive

mperrotti added 2 commits October 24, 2024 11:25

adjusts layout for wide viewports

da9662a

rm commented CSS

fd62a82

adjust width of main content container of landing page

055a50d

mperrotti temporarily deployed to github-pages December 4, 2024 20:03 — with GitHub Actions Inactive

Merge branch 'main' into mp/match-header-to-new-docs

576e9b1

mperrotti temporarily deployed to github-pages December 4, 2024 22:21 — with GitHub Actions Inactive

mperrotti added 2 commits December 4, 2024 22:19

update top nav items to match

79f826a

Merge branch 'mp/match-header-to-new-docs' of github.com:primer/brand…

4f2d41f

… into mp/match-header-to-new-docs

mperrotti temporarily deployed to github-pages December 5, 2024 03:27 — with GitHub Actions Inactive

rezrah reviewed Dec 5, 2024

View reviewed changes

apps/docs/src/components/side-panel/side-panel.tsx Outdated Show resolved Hide resolved

rezrah reviewed Dec 5, 2024

View reviewed changes

apps/docs/src/components/side-panel/side-panel.tsx Outdated Show resolved Hide resolved

rezrah approved these changes Dec 5, 2024

View reviewed changes

mperrotti and others added 5 commits December 5, 2024 09:47

Update apps/docs/src/components/side-panel/side-panel.tsx

0eb9ead

Co-authored-by: Rez <[email protected]>

Update apps/docs/src/components/side-panel/side-panel.tsx

fb971f0

Co-authored-by: Rez <[email protected]>

prevents top nav from sorting

99be9e2

Merge branch 'mp/match-header-to-new-docs' of github.com:primer/brand…

9ebfffa

… into mp/match-header-to-new-docs

Merge branch 'main' into mp/match-header-to-new-docs

0bb5abf

mperrotti temporarily deployed to github-pages December 5, 2024 14:59 — with GitHub Actions Inactive

emilybrick approved these changes Dec 5, 2024

View reviewed changes

mperrotti added 3 commits December 5, 2024 15:06

fixes top nav hover styles

5bee80d

Merge branch 'mp/match-header-to-new-docs' of github.com:primer/brand…

83cf70c

… into mp/match-header-to-new-docs

Merge branch 'main' of github.com:primer/brand into mp/match-header-t…

bdda3f3

…o-new-docs

mperrotti temporarily deployed to github-pages December 5, 2024 20:14 — with GitHub Actions Inactive

Merge branch 'main' into mp/match-header-to-new-docs

20734ae

mperrotti deployed to github-pages December 9, 2024 17:49 — with GitHub Actions View deployment

mperrotti merged commit 85a82b1 into main Dec 9, 2024
16 of 18 checks passed

mperrotti deleted the mp/match-header-to-new-docs branch December 9, 2024 18:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Match chrome (header and sidebar nav) to new docs #790

Match chrome (header and sidebar nav) to new docs #790

mperrotti commented Oct 16, 2024 •

edited

Loading

changeset-bot bot commented Oct 16, 2024 •

edited

Loading

github-actions bot commented Oct 16, 2024 •

edited

Loading

github-actions bot commented Oct 16, 2024 •

edited

Loading

Example:

emilybrick left a comment •

edited

Loading

emilybrick left a comment

emilybrick commented Oct 24, 2024

rezrah Dec 5, 2024

mperrotti Dec 5, 2024

emilybrick Dec 5, 2024

emilybrick commented Dec 5, 2024

emilybrick left a comment

mperrotti commented Dec 5, 2024

mperrotti commented Dec 5, 2024

rezrah commented Dec 9, 2024 •

edited

Loading

Match chrome (header and sidebar nav) to new docs #790

Match chrome (header and sidebar nav) to new docs #790

Conversation

mperrotti commented Oct 16, 2024 • edited Loading

Summary

List of notable changes:

What should reviewers focus on?

Steps to test:

Supporting resources (related issues, external links, etc):

Contributor checklist:

Reviewer checklist:

Screenshots:

Child pages

Landing page

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

⚠️ No Changeset found

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

🟢 No design token changes found

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

⚠️ Visual differences found

Example:

emilybrick left a comment • edited Loading

Choose a reason for hiding this comment

emilybrick left a comment

Choose a reason for hiding this comment

emilybrick commented Oct 24, 2024

rezrah Dec 5, 2024

Choose a reason for hiding this comment

mperrotti Dec 5, 2024

Choose a reason for hiding this comment

emilybrick Dec 5, 2024

Choose a reason for hiding this comment

emilybrick commented Dec 5, 2024

emilybrick left a comment

Choose a reason for hiding this comment

mperrotti commented Dec 5, 2024

mperrotti commented Dec 5, 2024

rezrah commented Dec 9, 2024 • edited Loading

mperrotti commented Oct 16, 2024 •

edited

Loading

changeset-bot bot commented Oct 16, 2024 •

edited

Loading

github-actions bot commented Oct 16, 2024 •

edited

Loading

github-actions bot commented Oct 16, 2024 •

edited

Loading

emilybrick left a comment •

edited

Loading

rezrah commented Dec 9, 2024 •

edited

Loading