Upgrade design system

.changeset/admin-meta-rename.md

@@ -0,0 +1,5 @@
+---
+"@keystone-6/core": minor
+---
+
+Renames `isHidden` to `hideNavigation` on the AdminMeta list GraphQL type, `isHidden` is now deprecated and will be removed in a breaking change

.changeset/admin-ui-navigation.md

@@ -0,0 +1,5 @@
+---
+"@keystone-6/core": major
+---
+
+Removes `authenticatedItem` from `@keystone-6/core/admin-ui/components` exports

.changeset/remove-end-session.md

@@ -0,0 +1,5 @@
+---
+"@keystone-6/core": major
+---
+
+Removes the `EndSession` GraphQL mutation addition when `context.session.end` is defined, extend this yourself if required

design-system/packages/core/src/components/Core.tsx

@@ -51,7 +51,7 @@ const BaseCSS = ({ includeNormalize, optimizeLegibility }: BaseCSSProps) => {
             color: colors.foreground,
             fontSize: '1rem',
             fontWeight: typography.fontWeight.regular,
-            lineHeight: typography.leading.base,
+            // lineHeight: typography.leading.base,
             fontFamily: typography.fontFamily.body,
 
             // optimize legibility

design-system/website/components/Navigation.tsx

@@ -6,7 +6,7 @@ import { jsx, useTheme } from '@keystone-ui/core'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 
-const Brand = () => {
+function Brand () {
   const { palette } = useTheme()
   return (
     <h2>
@@ -25,7 +25,7 @@ const Brand = () => {
 }
 
 type SectionProps = { label: string, children: ReactNode }
-const Section = ({ label, children }: SectionProps) => {
+function Section ({ label, children }: SectionProps) {
   return (
     <Fragment>
       <h3>{label}</h3>
@@ -35,7 +35,7 @@ const Section = ({ label, children }: SectionProps) => {
 }
 
 type NavItemProps = { href: string, children: ReactNode }
-const NavItem = ({ href, children }: NavItemProps) => {
+function NavItem ({ href, children }: NavItemProps) {
   const { palette, radii, spacing } = useTheme()
   const router = useRouter()
   const isSelected = router.pathname === href
@@ -68,7 +68,7 @@ const NavItem = ({ href, children }: NavItemProps) => {
   )
 }
 
-export const Navigation = () => {
+export function Navigation () {
   return (
     <Fragment>
       <Brand />

docs/content/docs/config/auth.md

@@ -81,6 +81,7 @@ The following elements will be added to the GraphQL API.
 ```graphql
 type Mutation {
   authenticateUserWithPassword(email: String!, password: String!): UserAuthenticationWithPasswordResult!
+  endSession: Boolean!
 }
 
 type Query {

docs/content/docs/config/lists.md

@@ -81,7 +81,7 @@ Options:
   It is always possible to search by an id and `'id'` should not be specified in this option.
   By default, the `labelField` is used if it has a string `contains` filter, otherwise none.
 - `description` (default: `undefined`): Sets the list description displayed in the Admin UI.
-- `isHidden` (default: `false`): Controls whether the list is visible in the navigation elements of the Admin UI.
+- `hideNavigation` (default: `false`): Controls whether the list is visible in the navigation elements of the Admin UI.
   Can be either a boolean value or an async function with an argument `{ session, context }` that returns a boolean value.
 - `hideCreate` (default: `false`): Controls whether the `create` button is available in the Admin UI for this list.
   Can be either a boolean value or an async function with an argument `{ session, context }` that returns a boolean value.
@@ -124,7 +124,7 @@ export default config({
         labelField: 'name',
         searchFields: ['name', 'alternativeName'],
         description: '...',
-        isHidden: ({ session, context }) => false,
+        hideNavigation: ({ session, context }) => false,
         hideCreate: ({ session, context }) => false,
         hideDelete: ({ session, context }) => false,
         createView: {

docs/content/docs/fields/relationship.md

@@ -13,21 +13,14 @@ Read our [relationships guide](../guides/relationships) for details on Keystone
   - `map`: Changes the column name in the database
 - `ui` (default: `{ hideCreate: false, displayMode: 'select' }`): Configures the display mode of the field in the Admin UI.
   - `hideCreate` (default: `false`). If `true`, the "Create related item" button is not shown in the item view.
-  - `displayMode` (default: `'select'`): Controls the mode used to display the field in the item view. The mode `'select'` displays related items in a select component, while `'cards'` displays the related items in a card layout. Each display mode supports further configuration.
+  - `displayMode` (default: `'select'`): Controls the mode used to display the field in the item view. The mode `'select'` displays related items in a select component
 - `ui.displayMode === 'select'` options:
   - `labelField`: The field path from the related list to use for item labels in the select. Defaults to the `labelField` configured on the related list.
-- `searchFields`: The fields used by the UI to search for this item, in context of this relationship field. Defaults to `searchFields` configured on the related list.
-- `ui.displayMode === 'cards'` options:
-  - `cardFields`: A list of field paths from the related list to render in the card component. Defaults to `'id'` and the `labelField` configured on the related list.
-  - `linkToItem` (default `false`): If `true`, the default card component will render as a link to navigate to the related item.
-  - `removeMode` (default: `'disconnect'`): Controls whether the `Remove` button is present in the card. If `'disconnect'`, the button will be present. If `'none'`, the button will not be present.
-  - `inlineCreate` (default: `null`): If not `null`, an object of the form `{ fields: [...] }`, where `fields` is a list of field paths from the related list should be provided. An inline `Create` button will be included in the cards allowing a new related item to be created based on the configured field paths.
-  - `inlineEdit` (default: `null`): If not `null`, an object of the form `{ fields: [...] }`, where `fields` is a list of field paths from the related list should be provided. An `Edit` button will be included in each card, allowing the configured fields to be edited for each related item.
-  - `inlineConnect` (default: `false`): If `true`, an inline `Link existing item` button will be present, allowing existing items of the related list to be connected in this field.
-Alternatively this can be an object with the properties:
-	- `labelField`: The field path from the related list to use for item labels in select. Defaults to the `labelField` configured on the related list.
-	- `searchFields`: The fields used by the UI to search for this item, in context of this relationship field. Defaults to `searchFields` configured on the related list.
-- `ui.displayMode === 'count'` only supports `many` relationships
+  - `searchFields`: The fields used by the UI to search for this item, in context of this relationship field. Defaults to `searchFields` configured on the related list.
+
+- `ui.displayMode === 'count'` options, which only support `many` relationships:
+  - `labelField`: The field path from the related list to use for item labels in select. Defaults to the `labelField` configured on the related list.
+  - `searchFields`: The fields used by the UI to search for this item, in context of this relationship field. Defaults to `searchFields` configured on the related list.
 
 ```typescript
 import { config, list } from '@keystone-6/core';

docs/content/docs/guides/custom-admin-ui-navigation.md

@@ -18,8 +18,8 @@ Reference your custom Navigation component in the export as so.
 
 ```ts
 // /admin/config.ts
-import type { AdminConfig } from '@keystone-6/core/types';
-import { CustomNavigation } from './components/CustomNavigation';
+import type { AdminConfig } from '@keystone-6/core/types'
+import { CustomNavigation } from './components/CustomNavigation'
 
 export const components: AdminConfig['components'] = {
   Navigation: CustomNavigation
@@ -36,8 +36,8 @@ Here we'll export our `CustomNavigation` component as a named export.
 ```tsx
 // admin/components/CustomNavigation.tsx
 
-import type { NavigationProps } from '@keystone-6/core/admin-ui/components';
-export function CustomNavigation({ authenticatedItem, lists }: NavigationProps) {
+import type { NavigationProps } from '@keystone-6/core/admin-ui/components'
+export function CustomNavigation({ lists }: NavigationProps) {
   return (
     {/* ... */}
   )
@@ -48,8 +48,7 @@ Keystone will pass the following props to this component.
 
 ```tsx
 type NavigationProps = {
-  lists: ListMeta[];
-  authenticatedItem: AuthenticatedItem
+  lists: ListMeta[]
 }
 ```
 
@@ -62,21 +61,20 @@ For more information on the props, please see the [Navigation Props](#navigation
 Next we'll want to import some components that Keystone provides to help us build our custom Navigation.
 
 ```tsx
-import { NavigationContainer, NavItem, ListNavItems } from '@keystone-6/core/admin-ui/components';
+import { NavigationContainer, NavItem, ListNavItems } from '@keystone-6/core/admin-ui/components'
 ```
 
-The `NavigationContainer` component provides a container around your navigation links, as well as the different states of the `authenticatedItem` prop. We'll need this to:
+The `NavigationContainer` component provides a container around your navigation links.
 
 - Make our `CustomNavigation` component look and feel like the default Admin UI Navigation component.
-- Render out the hamburger menu with additional options should a user session be in progress via the `authenticatedItem` prop.
 
 ```tsx
-import { NavigationContainer, NavItem, ListNavItems } from '@keystone-6/core/admin-ui/components';
-import type { NavigationProps } from '@keystone-6/core/admin-ui/components';
+import { NavigationContainer, NavItem, ListNavItems } from '@keystone-6/core/admin-ui/components'
+import type { NavigationProps } from '@keystone-6/core/admin-ui/components'
 
-export function CustomNavigation({ authenticatedItem, lists }: NavigationProps) {
+export function CustomNavigation({ lists }: NavigationProps) {
   return (
-    <NavigationContainer authenticatedItem={authenticatedItem}>
+    <NavigationContainer>
       {/* ... */}
     </NavigationContainer>
   )
@@ -92,12 +90,12 @@ For more information on the `NavigationContainer` see the [NavigationContainer](
 The `ListNavItems` component takes the provided Array of `lists` and renders a list of NavItems. We'll use this component to help us easily create NavItems from Keystone lists.
 
 ```tsx
-import { NavigationContainer, NavItem, ListNavItems } from '@keystone-6/core/admin-ui/components';
-import type { NavigationProps } from '@keystone-6/core/admin-ui/components';
+import { NavigationContainer, NavItem, ListNavItems } from '@keystone-6/core/admin-ui/components'
+import type { NavigationProps } from '@keystone-6/core/admin-ui/components'
 
-export function CustomNavigation({ authenticatedItem, lists }: NavigationProps) {
+export function CustomNavigation({ lists }: NavigationProps) {
   return (
-    <NavigationContainer authenticatedItem={authenticatedItem}>
+    <NavigationContainer>
       <ListNavItems lists={lists}/>
       {/* ... */}
     </NavigationContainer>
@@ -114,12 +112,12 @@ For more information on the `ListNavItems` component, see the [ListNavItems](#li
 The `NavItem` component is a thin styling and accessibility wrapper around the `Link` component from Next.js. We'll use this component to render our custom route as well as the `Dashboard` route.
 
 ```tsx
-import { NavigationContainer, NavItem, ListNavItems } from '@keystone-6/core/admin-ui/components';
-import type { NavigationProps } from '@keystone-6/core/admin-ui/components';
+import { NavigationContainer, NavItem, ListNavItems } from '@keystone-6/core/admin-ui/components'
+import type { NavigationProps } from '@keystone-6/core/admin-ui/components'
 
-export function CustomNavigation({ authenticatedItem, lists }: NavigationProps) {
+export function CustomNavigation({ lists }: NavigationProps) {
   return (
-    <NavigationContainer authenticatedItem={authenticatedItem}>
+    <NavigationContainer>
       <NavItem href="/">Dashboard</NavItem>
       <ListNavItems lists={lists}/>
       <NavItem href="https://keystonejs.com/">
@@ -144,12 +142,12 @@ With all that done, your Custom Navigation component should be good to go, and y
 
 ```tsx
 // admin/components/CustomNavigation.tsx
-import { NavigationContainer, NavItem, ListNavItems } from '@keystone-6/core/admin-ui/components';
-import type { NavigationProps } from '@keystone-6/core/admin-ui/components';
+import { NavigationContainer, NavItem, ListNavItems } from '@keystone-6/core/admin-ui/components'
+import type { NavigationProps } from '@keystone-6/core/admin-ui/components'
 
-export function CustomNavigation({ authenticatedItem, lists }: NavigationProps) {
+export function CustomNavigation({ lists }: NavigationProps) {
   return (
-    <NavigationContainer authenticatedItem={authenticatedItem}>
+    <NavigationContainer>
       <NavItem href="/">Dashboard</NavItem>
       <ListNavItems lists={lists}/>
       <NavItem href="https://keystonejs.com/">
@@ -161,11 +159,11 @@ export function CustomNavigation({ authenticatedItem, lists }: NavigationProps)
 
 
 // admin/config.ts
-import { AdminConfig } from '@keystone-6/core/types';
-import { CustomNavigation } from './components/CustomNavigation';
+import { AdminConfig } from '@keystone-6/core/types'
+import { CustomNavigation } from './components/CustomNavigation'
 export const components: AdminConfig['components'] = {
   Navigation: CustomNavigation
-};
+}
 ```
 
 Start up your Keystone project, and you should see Custom Navigation with a route to the KeystoneJS docs in the Admin UI.
@@ -180,15 +178,14 @@ The rest of this guide will elaborate on some of the details around the helper c
 This section is to provide more granular information around the props that Keystone passes to your Custom Navigation component.
 
 ```tsx
-export const CustomNavigation = ({ lists, authenticatedItem }) => {}
+export const CustomNavigation = ({ lists }) => {}
 ```
 
 Keystone passes the following props to your custom Navigation component:
 
 ```ts
 type NavigationProps {
-  lists: ListMeta[];
-  authenticatedItem: AuthenticatedItem;
+  lists: ListMeta[]
 }
 ```
 
@@ -197,33 +194,17 @@ type NavigationProps {
 ```typescript
 type ListMeta = {
   /** Used for optimising the generated list of NavItems in React */
-  key: string;
+  key: string
   /** href to the list route in the Admin UI. */
-  path: string;
+  path: string
   /** Used as the label for each list generated NavItem */
-  label: string;
+  label: string
   /** Other properties exists, but these are the ones that are relevant to the Navigation implementation */
-};
-
-type Lists = ListMeta[];
-```
-
-`authenticatedItem` is a union of potential authentication states, expanded on below:
+}
 
-```ts
-type AuthenticatedItem =
-  | { state: 'unauthenticated' }
-  | { state: 'authenticated'; label: string; id: string; listKey: string }
-  | { state: 'loading' }
-  | { state: 'error'; error: Error | readonly [GraphQLError, ...GraphQLError[]] };
+type Lists = ListMeta[]
 ```
 
-The `authenticatedItem` props is rendered automatically when you pass it into the `NavigationContainer` component.
-
-{% hint kind="warn" %}
-If you render the `authenticatedItem` yourself, make sure you handle all of the possible states.
-{% /hint %}
-
 ## Components
 
 Keystone exposes a variety of helper components to make building out your custom Admin UI Navigation component easier. These are:
@@ -234,24 +215,14 @@ Keystone exposes a variety of helper components to make building out your custom
 
 ### NavigationContainer
 
-This component renders containing markup around your navigation links, as well as as the different states of the `authenticatedItem` prop.
-
-```typescript
-type NavigationContainerProps = {
-  authenticatedItem?: AuthenticatedItem;
-}
-```
-
-{% hint kind="tip" %}
-For the shape of the `authenticatedItem` prop, please see the [Navigation Props](#navigation-props) section above.
-{% /hint %}
+This component renders containing markup around your navigation links.
 
 ```tsx
 import { NavigationContainer} from '@keystone-6/core/admin-ui/components'
 
-export const CustomNavigation = ({ lists, authenticatedItem }) => {
+export function CustomNavigation ({ lists }) {
   return (
-    <NavigationContainer authenticatedItem={authenticatedItem}>
+    <NavigationContainer>
       {/* ... */}
     </NavigationContainer>
   )