Customisable Navigation #6111

gwyneplaine · 2021-07-15T06:02:30Z

This PR does the following:

Adds the Navigation component as a customisable property in the AdminConfig
Decomposes the Navigation component into smaller components to make providing custom Navigation easier.

We expose the following components now besides the core Navigation component:

NavItem - thin a11y and styling wrapper around the Link component from Next.js
ListNavItem - thin wrapper on top of NavItem, that takes a singe list item (of type ListMeta) and renders a NavItem. **
ListNavItems - this component takes an array of lists ListMeta[] and an optional include array. If an include array is specified only list items with keys that match the includes array are rendered as NavItems. Otherwise all lists are rendered as NavItems
NavContainer - Component encapsulates rendering logic for the AuthenticatedItem, as well as keystones a11y and styling decisions for the layout of the side nav.

** The impetus behind ListNavItem is to have a higher-level abstraction that can allow users to not have to care about the contents and structure of our lists. This is especially relevant for future feature additions to the nav. (i.e. if we add icon support, that would work out of the box from a dependency bump for users of ListNavItem, whereas you'd have to add that icon prop manually leveraging a lower level component.)

**The impetus behind ListNavItems is similar, but for rendering a list of NavItems. This is also a pre-emptive DX optimisation for creating custom navigation groups and subsections in the future.

Guide and example split into #6185 for expedited functional release.

Preview:

vercel · 2021-07-15T06:02:32Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/keystonejs/keystone-next-docs/8rjRZZAAWhbWMZYAWDCk9Hh6hdUY
✅ Preview: https://keystone-next-docs-git-customisable-component-0bda32-keystonejs.vercel.app

changeset-bot · 2021-07-15T06:02:32Z

🦋 Changeset detected

Latest commit: 7be77b7

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

This PR includes changesets to release 11 packages

Name	Type
@keystone-next/keystone	Minor
@keystone-next/types	Minor
@keystone-next/auth	Major
@keystone-next/example-auth	Patch
@keystone-next/examples-app-basic	Patch
@keystone-next/example-ecommerce	Patch
keystone-next-app	Patch
@keystone-next/example-roles	Patch
@keystone-next/example-sandbox	Patch
@keystone-next/example-testing	Patch
@keystone-next/example-with-auth	Patch

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

codesandbox-ci · 2021-07-15T06:05:37Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

…exports

gwyneplaine · 2021-07-26T00:58:03Z

packages/keystone/src/admin-ui/components/Navigation.tsx

-            );
-          });
-        })()}
+      <nav role="navigation" aria-label="Side Navigation" css={{ marginTop: spacing.xlarge }}>


a11y fix:

adding a role and aria-label to the side nav for better screen reader support.

all nav items are now wrapped in an unordered list as per WCAG recommendation.

gwyneplaine · 2021-07-26T00:59:03Z

packages/keystone/src/admin-ui/components/Navigation.tsx

-        padding: `${spacing.small}px ${spacing.xlarge}px`,
-        position: 'relative',
-        textDecoration: 'none',
+    <li>


related to fixes below:
NavItems are now wrapped in a list item for better SR readability and general semantics

.changeset/fluffy-schools-allow.md

.changeset/rare-carrots-deliver.md

Co-authored-by: Tim Leslie <timl@thinkmill.com.au>

timleslie

yarn lock changes should be reverted

packages/types/src/admin-meta.ts

timleslie

I'm 👍 on this. I'll let @mitchellhamilton have a final review and give it the ✅

Changes made.

emmatown · 2021-07-26T06:58:03Z

packages/keystone/src/admin-ui/components/index.ts

 export { Logo } from './Logo';
-export { Navigation } from './Navigation';
+export { Navigation, NavigationContainer, NavItem, ListNavItems, ListNavItem } from './Navigation';


When would someone want to use Navigation? Also, it is a different thing to the thing that accepts NavigationProps, right? (what i would probably expect Navigation to be is the default of adminConfig.components.Navigation)

Correct, the wrapping Navigation component would only be used for custom pages.
For example if someone were to not want to opt into the entire layout provided by PageContainer but did want to have a sidebar nav, they'd leverage that Navigation export

* add Navigation component to customisable components in adminConfig * add composable navigation components and types to admin-ui/component exports * update to Navigation component * add types for Navigation component * add example for custom-navigation-compoent * add custom route * add example * add guide links * wip nav guide * add minor a11y fixes * update docs and examples * custom admin-ui docs * update yarn.lock * smoke tests for nav example * update test and example * dependency fixes * fix smoke tests * fix failing tests * nope nevermind, not fixed * nav architecture refactor * docs wip * remove d ocs to be added in subsequent PR * type shuffling, so we do not have icky circular type references in @keystone-next/types * changesets * Update .changeset/fluffy-schools-allow.md Co-authored-by: Tim Leslie <timl@thinkmill.com.au> * Update .changeset/rare-carrots-deliver.md Co-authored-by: Tim Leslie <timl@thinkmill.com.au> * yarn.lock reversion * remove unnecessary comments Co-authored-by: Tim Leslie <timl@thinkmill.com.au>

gwyneplaine marked this pull request as draft July 15, 2021 06:02

bladey added the pr/admin-ui label Jul 19, 2021

vercel bot temporarily deployed to Preview July 19, 2021 05:49 Inactive

vercel bot temporarily deployed to Preview July 19, 2021 06:27 Inactive

vercel bot temporarily deployed to Preview July 19, 2021 06:28 Inactive

gwyneplaine force-pushed the customisable-components/navigation branch from 20708d0 to 8795064 Compare July 20, 2021 00:26

vercel bot temporarily deployed to Preview July 20, 2021 00:26 Inactive

vercel bot temporarily deployed to Preview July 20, 2021 23:45 Inactive

vercel bot temporarily deployed to Preview July 20, 2021 23:55 Inactive

vercel bot temporarily deployed to Preview July 21, 2021 06:15 Inactive

borisno2 mentioned this pull request Jul 21, 2021

Add ability to customise AuthenticatedItem #6146

Closed

vercel bot temporarily deployed to Preview July 22, 2021 04:10 Inactive

vercel bot temporarily deployed to Preview July 22, 2021 04:15 Inactive

gwyneplaine added 11 commits July 22, 2021 14:16

add Navigation component to customisable components in adminConfig

14387b2

add composable navigation components and types to admin-ui/component …

da58b07

…exports

update to Navigation component

25f50f3

add types for Navigation component

85f9316

add example for custom-navigation-compoent

d850d83

add custom route

cb86ad4

add example

6173ccd

add guide links

310b5af

wip nav guide

cc1a3b1

add minor a11y fixes

08c2848

update docs and examples

374fb5a

gwyneplaine force-pushed the customisable-components/navigation branch from ccf4b33 to 374fb5a Compare July 22, 2021 04:17

vercel bot temporarily deployed to Preview July 22, 2021 04:27 Inactive

custom admin-ui docs

331369a

gwyneplaine commented Jul 26, 2021

View reviewed changes

gwyneplaine requested a review from a team July 26, 2021 06:36

Merge branch 'master' into customisable-components/navigation

b62f79a

vercel bot temporarily deployed to Preview July 26, 2021 06:37 Inactive

gwyneplaine marked this pull request as ready for review July 26, 2021 06:37

timleslie reviewed Jul 26, 2021

View reviewed changes

.changeset/fluffy-schools-allow.md Outdated Show resolved Hide resolved

timleslie reviewed Jul 26, 2021

View reviewed changes

.changeset/rare-carrots-deliver.md Outdated Show resolved Hide resolved

Update .changeset/fluffy-schools-allow.md

2a46a1b

Co-authored-by: Tim Leslie <timl@thinkmill.com.au>

vercel bot temporarily deployed to Preview July 26, 2021 06:41 Inactive

Update .changeset/rare-carrots-deliver.md

3e5e824

Co-authored-by: Tim Leslie <timl@thinkmill.com.au>

timleslie previously requested changes Jul 26, 2021

View reviewed changes

emmatown reviewed Jul 26, 2021

View reviewed changes

packages/types/src/admin-meta.ts Show resolved Hide resolved

gwyneplaine commented Jul 26, 2021

View reviewed changes

packages/types/src/admin-meta.ts Show resolved Hide resolved

vercel bot temporarily deployed to Preview July 26, 2021 06:44 Inactive

yarn.lock reversion

5a70016

vercel bot temporarily deployed to Preview July 26, 2021 06:47 Inactive

gwyneplaine requested a review from timleslie July 26, 2021 06:48

remove unnecessary comments

4a5b7da

vercel bot temporarily deployed to Preview July 26, 2021 06:50 Inactive

timleslie reviewed Jul 26, 2021

View reviewed changes

emmatown reviewed Jul 26, 2021

View reviewed changes

Merge branch 'master' into customisable-components/navigation

7be77b7

vercel bot temporarily deployed to Preview July 26, 2021 23:34 Inactive

emmatown approved these changes Jul 26, 2021

View reviewed changes

gwyneplaine enabled auto-merge (squash) July 26, 2021 23:38

gwyneplaine merged commit 9e2deac into master Jul 26, 2021

gwyneplaine deleted the customisable-components/navigation branch July 26, 2021 23:41

keystonejs-release-bot mentioned this pull request Jul 26, 2021

Version Packages #6100

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Customisable Navigation #6111

Customisable Navigation #6111

gwyneplaine commented Jul 15, 2021 •

edited

vercel bot commented Jul 15, 2021 •

edited

changeset-bot bot commented Jul 15, 2021 •

edited

codesandbox-ci bot commented Jul 15, 2021 •

edited

gwyneplaine Jul 26, 2021

gwyneplaine Jul 26, 2021

timleslie left a comment

timleslie left a comment

emmatown Jul 26, 2021 •

edited

gwyneplaine Jul 26, 2021

Customisable Navigation #6111

Customisable Navigation #6111

Conversation

gwyneplaine commented Jul 15, 2021 • edited

vercel bot commented Jul 15, 2021 • edited

changeset-bot bot commented Jul 15, 2021 • edited

🦋 Changeset detected

codesandbox-ci bot commented Jul 15, 2021 • edited

gwyneplaine Jul 26, 2021

Choose a reason for hiding this comment

gwyneplaine Jul 26, 2021

Choose a reason for hiding this comment

timleslie left a comment

Choose a reason for hiding this comment

timleslie left a comment

Choose a reason for hiding this comment

emmatown Jul 26, 2021 • edited

Choose a reason for hiding this comment

gwyneplaine Jul 26, 2021

Choose a reason for hiding this comment

gwyneplaine commented Jul 15, 2021 •

edited

vercel bot commented Jul 15, 2021 •

edited

changeset-bot bot commented Jul 15, 2021 •

edited

codesandbox-ci bot commented Jul 15, 2021 •

edited

emmatown Jul 26, 2021 •

edited