remove Card components

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-fields.md

@@ -187,27 +187,6 @@ export const Cell: CellComponent = ({ item, field, linkTo }) => {
 Cell.supportsLinkTo = true;
 ```
 
-### CardValue
-
-The `CardValue` export is a React component which is shown on the **item view** in relationship fields with `displayMode: 'cards'` when the related item is not being edited.
-Note it does not allow modifying the value.
-
-```tsx
-// view.tsx
-
-import { FieldContainer, FieldLabel } from '@keystone-ui/fields';
-import { CardValueComponent } from '@keystone-6/core/types';
-
-export const CardValue: CardValueComponent = ({ item, field }) => {
-  return (
-    <FieldContainer>
-      <FieldLabel>{field.label}</FieldLabel>
-      {item[field.path]}
-    </FieldContainer>
-  );
-};
-```
-
 ## Related resources
 
 {% related-content %}

examples/custom-field/1-text-field/views.tsx

@@ -3,7 +3,6 @@ import { FieldContainer, FieldDescription, FieldLabel, TextInput } from '@keysto
 import { CellLink, CellContainer } from '@keystone-6/core/admin-ui/components'
 
 import {
-  type CardValueComponent,
   type CellComponent,
   type FieldController,
   type FieldControllerConfig,
@@ -38,15 +37,6 @@ export const Cell: CellComponent = ({ item, field, linkTo }) => {
 }
 Cell.supportsLinkTo = true
 
-export const CardValue: CardValueComponent = ({ item, field }) => {
-  return (
-    <FieldContainer>
-      <FieldLabel>{field.label}</FieldLabel>
-      {item[field.path]}
-    </FieldContainer>
-  )
-}
-
 export const controller = (
   config: FieldControllerConfig<{}>
 ): FieldController<string | null, string> => {

examples/custom-field/2-stars-field/views.tsx

@@ -3,7 +3,6 @@ import { FieldContainer, FieldDescription, FieldLabel } from '@keystone-ui/field
 import { CellLink, CellContainer } from '@keystone-6/core/admin-ui/components'
 
 import {
-  type CardValueComponent,
   type CellComponent,
   type FieldController,
   type FieldControllerConfig,
@@ -30,16 +29,6 @@ export const Cell: CellComponent = ({ item, field, linkTo }) => {
 // their cell component links to the related item so it can't link to the item that the relationship is on
 Cell.supportsLinkTo = true
 
-// this is shown on the item page in relationship fields with `displayMode: 'cards'`
-export const CardValue: CardValueComponent = ({ item, field }) => {
-  return (
-    <FieldContainer>
-      <FieldLabel>{field.label}</FieldLabel>
-      {item[field.path]}
-    </FieldContainer>
-  )
-}
-
 export const controller = (
   // the type parameter here needs to align with what is returned from `getAdminMeta`
   // in the server-side portion of the field type

examples/custom-field/3-pair-field-json/views.tsx

@@ -3,7 +3,6 @@ import { FieldContainer, FieldDescription, FieldLabel, TextInput } from '@keysto
 import { CellLink, CellContainer } from '@keystone-6/core/admin-ui/components'
 
 import {
-  type CardValueComponent,
   type CellComponent,
   type FieldController,
   type FieldControllerConfig,
@@ -60,15 +59,6 @@ export const Cell: CellComponent = ({ item, field, linkTo }) => {
 }
 Cell.supportsLinkTo = true
 
-export const CardValue: CardValueComponent = ({ item, field }) => {
-  return (
-    <FieldContainer>
-      <FieldLabel>{field.label}</FieldLabel>
-      {item[field.path]}
-    </FieldContainer>
-  )
-}
-
 export const controller = (
   config: FieldControllerConfig<{}>
 ): FieldController<

examples/custom-field/3-pair-field-nested/views.tsx

@@ -3,7 +3,6 @@ import { FieldContainer, FieldDescription, FieldLabel, TextInput } from '@keysto
 import { CellLink, CellContainer } from '@keystone-6/core/admin-ui/components'
 
 import {
-  type CardValueComponent,
   type CellComponent,
   type FieldController,
   type FieldControllerConfig,
@@ -60,15 +59,6 @@ export const Cell: CellComponent = ({ item, field, linkTo }) => {
 }
 Cell.supportsLinkTo = true
 
-export const CardValue: CardValueComponent = ({ item, field }) => {
-  return (
-    <FieldContainer>
-      <FieldLabel>{field.label}</FieldLabel>
-      {item[field.path]}
-    </FieldContainer>
-  )
-}
-
 export const controller = (
   config: FieldControllerConfig<{}>
 ): FieldController<

examples/custom-field/3-pair-field/views.tsx

@@ -3,7 +3,6 @@ import { FieldContainer, FieldDescription, FieldLabel, TextInput } from '@keysto
 import { CellLink, CellContainer } from '@keystone-6/core/admin-ui/components'
 
 import {
-  type CardValueComponent,
   type CellComponent,
   type FieldController,
   type FieldControllerConfig,
@@ -38,15 +37,6 @@ export const Cell: CellComponent = ({ item, field, linkTo }) => {
 }
 Cell.supportsLinkTo = true
 
-export const CardValue: CardValueComponent = ({ item, field }) => {
-  return (
-    <FieldContainer>
-      <FieldLabel>{field.label}</FieldLabel>
-      {item[field.path]}
-    </FieldContainer>
-  )
-}
-
 export const controller = (
   config: FieldControllerConfig<{}>
 ): FieldController<string | null, string> => {

examples/custom-field/4-conditional-field/views.tsx

@@ -3,7 +3,6 @@ import { FieldContainer, FieldDescription, FieldLabel, TextInput } from '@keysto
 import { CellLink, CellContainer } from '@keystone-6/core/admin-ui/components'
 
 import {
-  type CardValueComponent,
   type CellComponent,
   type FieldController,
   type FieldControllerConfig,
@@ -52,15 +51,6 @@ export const Cell: CellComponent = ({ item, field, linkTo }) => {
 }
 Cell.supportsLinkTo = true
 
-export const CardValue: CardValueComponent = ({ item, field }) => {
-  return (
-    <FieldContainer>
-      <FieldLabel>{field.label}</FieldLabel>
-      {item[field.path]}
-    </FieldContainer>
-  )
-}
-
 export const controller = (
   config: FieldControllerConfig<{
     dependency: {

examples/usecase-blog/schema.ts

@@ -72,16 +72,6 @@ export const lists = {
       author: relationship({
         // we could have used 'Author', but then the relationship would only be 1-way
         ref: 'Author.posts',
-
-        // we customise how this will look in the AdminUI, for fun
-        ui: {
-          displayMode: 'cards',
-          cardFields: ['name', 'email'],
-          inlineEdit: { fields: ['name', 'email'] },
-          linkToItem: true,
-          inlineConnect: true,
-        },
-
         many: false, // only 1 author for each Post (the default)
       }),
 
@@ -90,15 +80,12 @@ export const lists = {
         ref: 'Tag.posts',
         many: true, // a Post can have many Tags, not just one
 
-        // we customise how this will look in the AdminUI, for fun
-        ui: {
-          displayMode: 'cards',
-          cardFields: ['name'],
-          inlineEdit: { fields: ['name'] },
-          linkToItem: true,
-          inlineConnect: true,
-          inlineCreate: { fields: ['name'] },
-        },
+        // TODO: restore after breaking change
+//          ui: {
+//            inlineCreate: {
+//              fields: ['name']
+//            }
+//          }
       }),
     },
   }),

packages/cloudinary/src/views/index.tsx

@@ -3,12 +3,10 @@
 
 import { jsx } from '@keystone-ui/core'
 import {
-  type CardValueComponent,
   type CellComponent,
   type FieldController,
   type FieldControllerConfig,
 } from '@keystone-6/core/types'
-import { FieldContainer, FieldLabel } from '@keystone-ui/fields'
 import { validateImage } from './Field'
 
 export { Field } from './Field'
@@ -35,16 +33,6 @@ export const Cell: CellComponent = ({ item, field }) => {
   )
 }
 
-export const CardValue: CardValueComponent = ({ item, field }) => {
-  const data = item[field.path]
-  return (
-    <FieldContainer>
-      <FieldLabel>{field.label}</FieldLabel>
-      {data && <img alt={data.filename} src={data.publicUrlTransformed} />}
-    </FieldContainer>
-  )
-}
-
 type ImageData = {
   id: string
   filename: string

packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/id-field-view.tsx

@@ -4,9 +4,8 @@
 import { TextField } from '@keystar/ui/text-field'
 
 import { jsx } from '@keystone-ui/core'
-import { FieldContainer, FieldLabel, TextInput } from '@keystone-ui/fields'
+import { TextInput } from '@keystone-ui/fields'
 import type {
-  CardValueComponent,
   CellComponent,
   FieldController,
   FieldControllerConfig,
@@ -24,15 +23,6 @@ export const Cell: CellComponent = ({ item, field, linkTo }) => {
 }
 Cell.supportsLinkTo = true
 
-export const CardValue: CardValueComponent = ({ item, field }) => {
-  return (
-    <FieldContainer>
-      <FieldLabel>{field.label}</FieldLabel>
-      {item[field.path]}
-    </FieldContainer>
-  )
-}
-
 export function controller (
   config: FieldControllerConfig<IdFieldConfig>
 ): FieldController<void, string> {

packages/core/src/admin-ui/context.tsx

@@ -65,8 +65,7 @@ function InternalKeystoneProvider ({
   const { push: navigate } = useRouter()
   const keystarRouter = useMemo(() => ({ navigate }), [navigate])
   const adminMeta = useAdminMeta(adminMetaHash, fieldViews)
-  const { authenticatedItem, visibleLists, createViewFieldModes, refetch } =
-    useLazyMetadata(lazyMetadataQuery)
+  const { authenticatedItem, visibleLists, createViewFieldModes, refetch } = useLazyMetadata(lazyMetadataQuery)
   const reinitContext = async () => {
     await adminMeta?.refetch?.()
     await refetch()

packages/core/src/fields/types/bigInt/views/index.tsx

@@ -5,7 +5,6 @@ import { jsx } from '@keystone-ui/core'
 import { FieldContainer, FieldDescription, FieldLabel, TextInput } from '@keystone-ui/fields'
 import { useState } from 'react'
 import {
-  type CardValueComponent,
   type CellComponent,
   type FieldController,
   type FieldControllerConfig,
@@ -131,15 +130,6 @@ export const Cell: CellComponent = ({ item, field, linkTo }) => {
 }
 Cell.supportsLinkTo = true
 
-export const CardValue: CardValueComponent = ({ item, field }) => {
-  return (
-    <FieldContainer>
-      <FieldLabel>{field.label}</FieldLabel>
-      {item[field.path] === null ? '' : item[field.path]}
-    </FieldContainer>
-  )
-}
-
 function validate (
   state: Value,
   validation: Validation,

packages/core/src/fields/types/calendarDay/views/index.tsx

@@ -5,7 +5,6 @@ import { useState } from 'react'
 import { jsx, Inline, Stack, Text } from '@keystone-ui/core'
 import { FieldContainer, FieldLabel, DatePicker, FieldDescription } from '@keystone-ui/fields'
 import {
-  type CardValueComponent,
   type CellComponent,
   type FieldController,
   type FieldControllerConfig,
@@ -95,15 +94,6 @@ export const Cell: CellComponent = ({ item, field, linkTo }) => {
 }
 Cell.supportsLinkTo = true
 
-export const CardValue: CardValueComponent = ({ item, field }) => {
-  return (
-    <FieldContainer>
-      <FieldLabel>{field.label}</FieldLabel>
-      {formatOutput(item[field.path])}
-    </FieldContainer>
-  )
-}
-
 function formatOutput (isoDateString: string | null) {
   if (!isoDateString) {
     return null

packages/core/src/fields/types/checkbox/views/index.tsx

@@ -4,8 +4,8 @@ import { FieldLabel } from '@keystar/ui/field'
 import { VStack } from '@keystar/ui/layout'
 import { Text } from '@keystar/ui/typography'
 
+import { jsx, useTheme } from '@keystone-ui/core'
 import type {
-  CardValueComponent,
   CellComponent,
   FieldController,
   FieldControllerConfig,
@@ -35,15 +35,6 @@ export const Cell: CellComponent = ({ item, field }) => {
   )
 }
 
-export const CardValue: CardValueComponent = ({ item, field }) => {
-  return (
-    <VStack elementType="dl" gap="medium">
-      <FieldLabel elementType="dt">{field.label}</FieldLabel>
-      <Text elementType="dd" color="neutralEmphasis">{item[field.path] + ''}</Text>
-    </VStack>
-  )
-}
-
 type CheckboxController = FieldController<boolean, boolean>
 
 export const controller = (