Merge branch 'master' into cache-hints-test

.changeset/afraid-knives-work.md

@@ -0,0 +1,5 @@
+---
+'@keystone-next/admin-ui': patch
+---
+
+Prettified the logo in the admin-ui.

.changeset/light-balloons-beam.md

@@ -0,0 +1,5 @@
+---
+'@keystone-next/admin-ui': patch
+---
+
+Added minor fixes to filters dialog.

.changeset/mighty-drinks-suffer.md

@@ -0,0 +1,5 @@
+---
+'@keystone-next/keystone': patch
+---
+
+Improved the types of `withItemData`.

.changeset/mighty-impalas-appear.md

@@ -0,0 +1,5 @@
+---
+"@keystone-next/admin-ui": patch
+---
+
+Fixed navigation margin when session isn't configured

.changeset/ninety-buckets-mate.md

@@ -0,0 +1,5 @@
+---
+'@keystone-next/fields': patch
+---
+
+Fixed Admin UI issues when using `select` fields with `dataType: 'integer'`.

.changeset/purple-dingos-deny.md

@@ -0,0 +1,7 @@
+---
+'@keystone-ui/core': patch
+'@keystone-ui/options': patch
+'@keystone-next/admin-ui': patch
+---
+
+Added hover state to the `OptionPrimitive` in Admin UI and updated css colors

.changeset/red-kings-attend.md

@@ -0,0 +1,5 @@
+---
+'@keystone-next/admin-ui': patch
+---
+
+Fixed cache querying logic and added explicit query clearing flow to admin-ui.

.changeset/tiny-pears-glow.md

@@ -0,0 +1,5 @@
+---
+'@keystone-next/admin-ui': patch
+---
+
+Added a `title` value to the create new item button on the dashboard.

design-system/packages/core/package.json

@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.14.0",
-    "@emotion/react": "11.1.5",
+    "@emotion/react": "11.4.0",
     "facepaint": "^1.2.1"
   },
   "repository": "https://github.com/keystonejs/keystone/tree/master/design-system/packages/core"

design-system/packages/core/src/themes/default.ts

@@ -9,8 +9,7 @@ import { palette as basePalette } from './colors';
 const typography = {
   fontFamily: {
     monospace: 'Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace',
-    body:
-      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
+    body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
     heading:
       'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
   },
@@ -263,6 +262,7 @@ const colors = {
   background: 'white',
   backgroundMuted: palette.neutral100,
   backgroundDim: palette.neutral200,
+  backgroundHover: palette.blue50,
   border: palette.neutral300,
   borderCritical: palette.red400,
   borderFocus: palette.blue400,

design-system/packages/fields/src/DatePicker/Calendar.tsx

@@ -147,14 +147,16 @@ const useCalendarStyles = () => {
       },
     },
     '.DayPicker-NavButton--next': {
-      backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='${encodeURIComponent(
-        colors.foreground //theme.palette.listItem.text
-      )}' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E")` as string,
+      backgroundImage:
+        `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='${encodeURIComponent(
+          colors.foreground //theme.palette.listItem.text
+        )}' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E")` as string,
     },
     '.DayPicker-NavButton--prev': {
-      backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='${encodeURIComponent(
-        colors.foreground //theme.palette.listItem.text
-      )}' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E")` as string,
+      backgroundImage:
+        `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='${encodeURIComponent(
+          colors.foreground //theme.palette.listItem.text
+        )}' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E")` as string,
     },
 
     // "day" or grid cell
@@ -213,17 +215,18 @@ const useCalendarStyles = () => {
     },
 
     // range-specific day styles
-    '.DayPicker-Day--rangeStart:not(.DayPicker-Day--outside), .DayPicker-Day--rangeEnd:not(.DayPicker-Day--outside)': {
-      '&::before': {
-        backgroundColor: rangeBetweenColor,
-        position: 'absolute',
-        content: '" "',
-        width: cellSize / 2,
-        height: cellSize,
-        top: 0,
-        zIndex: -1,
+    '.DayPicker-Day--rangeStart:not(.DayPicker-Day--outside), .DayPicker-Day--rangeEnd:not(.DayPicker-Day--outside)':
+      {
+        '&::before': {
+          backgroundColor: rangeBetweenColor,
+          position: 'absolute',
+          content: '" "',
+          width: cellSize / 2,
+          height: cellSize,
+          top: 0,
+          zIndex: -1,
+        },
       },
-    },
     '.DayPicker-Day--rangeStart': {
       '&::before': {
         right: 0,

design-system/packages/options/src/index.tsx

@@ -73,6 +73,7 @@ export const CheckMark = ({
 export const OptionPrimitive = <OptionType, IsMulti extends boolean>({
   children,
   isDisabled,
+  isFocused,
   innerProps,
   innerRef,
   className,
@@ -84,19 +85,28 @@ export const OptionPrimitive = <OptionType, IsMulti extends boolean>({
       className={className}
       css={{
         alignItems: 'center',
-        color: isDisabled ? theme.colors.foregroundDim : undefined,
+        color: isDisabled
+          ? theme.colors.foregroundDim
+          : isFocused
+          ? theme.colors.linkHoverColor
+          : undefined,
         cursor: 'pointer',
         display: 'flex',
         fontSize: '0.9em',
         fontWeight: 500,
         justifyContent: 'space-between',
+        background: isFocused ? theme.colors.backgroundHover : undefined,
         outline: 0,
-        padding: `${theme.spacing.small}px 0`,
+        padding: `${theme.spacing.small}px`,
         pointerEvents: isDisabled ? 'none' : undefined,
 
         '&:not(:first-of-type)': {
           borderTop: `1px solid ${theme.colors.backgroundDim}`,
         },
+        ':hover': {
+          background: theme.colors.backgroundHover,
+          color: theme.colors.linkHoverColor,
+        },
       }}
       {...innerProps}
     >

docs/components/DocumentEditorDemo.tsx

@@ -310,11 +310,11 @@ export const DocumentEditorDemo = () => {
           marginBottom: '1em',
         },
         'h1,h2,h3,h4,h5,h6': { fontWeight: 'bold' },
-        h1: { fontSize: '2em' },
-        h2: { fontSize: '1.5em' },
-        h3: { fontSize: '1.17em' },
-        h5: { fontSize: '0.83em' },
-        h6: { fontSize: '0.67em' },
+        h1: { fontSize: 'var(--font-xxlarge)' },
+        h2: { fontSize: 'var(--font-large)' },
+        h3: { fontSize: 'var(--font-medium)' },
+        h5: { fontSize: 'var(--font-xsmall)' },
+        h6: { fontSize: 'var(--font-xxsmall)' },
         'ul, ol': {
           paddingLeft: 40,
         },

docs/components/Navigation.tsx

@@ -90,6 +90,12 @@ export function Navigation() {
         <NavItem href="/guides/testing" isPlaceholder>
           Testing
         </NavItem>
+        <NavItem href="/guides/custom-admin-ui-pages" isPlaceholder>
+          Custom Admin UI Pages
+        </NavItem>
+        <NavItem href="/guides/custom-field-views" isPlaceholder>
+          Custom Field Views
+        </NavItem>
       </Section>
       <Section label="API">
         <SubHeading as="h4">Config</SubHeading>

docs/components/Theme.tsx

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx, Global } from '@keystone-ui/core';
 
-import { COLORS, SPACE, TYPE } from '../lib/TOKENS';
+import { COLORS, SPACE, TYPE, TYPESCALE } from '../lib/TOKENS';
 
 export function Theme() {
   return (
@@ -11,6 +11,7 @@ export function Theme() {
           ...COLORS,
           ...SPACE,
           ...TYPE,
+          ...TYPESCALE,
           '--wrapper-width': '67rem',
         },
       }}

docs/lib/TOKENS.ts

@@ -12,7 +12,9 @@ export const TYPE = {
   '--font-body':
     'system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
   '--font-mono': '"Source Code Pro", monospace',
+};
 
+export const TYPESCALE = {
   '--font-xxsmall': '0.75rem',
   '--font-xsmall': '0.875rem',
   '--font-small': '1rem',

docs/lib/initialDocumentDemoContent.ts

@@ -103,8 +103,7 @@ export const initialContent = [
             type: 'paragraph',
             children: [
               {
-                text:
-                  'We’re really excited to show you what we’ve built, and what you can build with it!',
+                text: 'We’re really excited to show you what we’ve built, and what you can build with it!',
               },
             ],
           },
@@ -166,17 +165,15 @@ export const initialContent = [
                 bold: true,
               },
               {
-                text:
-                  ', but you can build your own by just defining their prop types (like you do your Keystone schema) and providing a React Component to render the preview.',
+                text: ', but you can build your own by just defining their prop types (like you do your Keystone schema) and providing a React Component to render the preview.',
               },
             ],
           },
           {
             type: 'paragraph',
             children: [
               {
-                text:
-                  'They store structured data, and can be inserted (and edited!) anywhere in the document. You can even link them to other items in your database with the ',
+                text: 'They store structured data, and can be inserted (and edited!) anywhere in the document. You can even link them to other items in your database with the ',
               },
               {
                 text: 'Relationship',
@@ -206,8 +203,7 @@ export const initialContent = [
             type: 'paragraph',
             children: [
               {
-                text:
-                  'They can also have props that are edited with an inline form, for more complex use cases (including conditional fields)',
+                text: 'They can also have props that are edited with an inline form, for more complex use cases (including conditional fields)',
               },
             ],
           },
@@ -222,8 +218,7 @@ export const initialContent = [
                 bold: true,
               },
               {
-                text:
-                  " component and you'll see how it works. Remember, you can build your own, so your content authors can insert components from your website's Design System, and your front-end still gets structured data to render!",
+                text: " component and you'll see how it works. Remember, you can build your own, so your content authors can insert components from your website's Design System, and your front-end still gets structured data to render!",
               },
             ],
           },
@@ -235,8 +230,7 @@ export const initialContent = [
     type: 'paragraph',
     children: [
       {
-        text:
-          'This is the end of the editable document. Expand the block below to see how the data is stored ↓',
+        text: 'This is the end of the editable document. Expand the block below to see how the data is stored ↓',
         bold: true,
       },
     ],