feat(core): facelift

.eslintrc.cjs

@@ -65,6 +65,7 @@ const config = {
       {
         ignores: {
           componentPatterns: ['motion$'],
+          attributes: ['animate', 'closed', 'exit', 'fill', 'full', 'initial', 'size'],
         },
       },
     ],
@@ -231,6 +232,43 @@ const config = {
         '@sanity/i18n/no-attribute-template-literals': 'off',
       },
     },
+
+    // Prefer local components vs certain @sanity/ui imports (in sanity package)
+    {
+      files: ['packages/sanity/**'],
+      rules: {
+        'no-restricted-imports': [
+          'error',
+          {
+            paths: [
+              {
+                name: '@sanity/ui',
+                importNames: [
+                  'Button',
+                  'ButtonProps',
+                  'Dialog',
+                  'DialogProps',
+                  'MenuButton',
+                  'MenuButtonProps',
+                  'MenuGroup',
+                  'MenuGroupProps',
+                  'MenuItem',
+                  'MenuItemProps',
+                  'Popover',
+                  'PopoverProps',
+                  'Tab',
+                  'TabProps',
+                  'Tooltip',
+                  'TooltipProps',
+                ],
+                message:
+                  'Please use the (more opinionated) exported components in sanity/src/ui-components instead.',
+              },
+            ],
+          },
+        ],
+      },
+    },
   ],
 }
 

dev/design-studio/package.json

@@ -31,8 +31,8 @@
     "start": "../.bin/sanity start --port 4000"
   },
   "dependencies": {
-    "@sanity/icons": "^2.6.0",
-    "@sanity/ui": "^1.9.3",
+    "@sanity/icons": "^2.8.0",
+    "@sanity/ui": "2.0.0-beta.13",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sanity": "3.22.1",

dev/embedded-studio/package.json

@@ -8,7 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@sanity/ui": "1.9.3",
+    "@sanity/ui": "2.0.0-beta.13",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sanity": "3.22.1",

dev/studio-e2e-testing/components-api/index.tsx

@@ -28,7 +28,6 @@ const childComponents = definePlugin({
   studio: {
     components: {
       layout: (props) => <StudioLayout {...props} testId="child-parent-config-studio-layout" />,
-      logo: (props) => <StudioLogo {...props} testId="child-parent-config-studio-logo" />,
       navbar: (props) => <StudioNavbar {...props} testId="child-parent-config-studio-navbar" />,
       toolMenu: (props) => (
         <StudioToolMenu {...props} testId="child-parent-config-studio-tool-menu" />
@@ -58,7 +57,6 @@ export const customComponents = definePlugin({
   studio: {
     components: {
       layout: (props) => <StudioLayout {...props} testId="parent-config-studio-layout" />,
-      logo: (props) => <StudioLogo {...props} testId="parent-config-studio-logo" />,
       navbar: (props) => <StudioNavbar {...props} testId="parent-config-studio-navbar" />,
       toolMenu: (props) => <StudioToolMenu {...props} testId="parent-config-studio-tool-menu" />,
     },

dev/studio-e2e-testing/package.json

@@ -15,8 +15,8 @@
   ],
   "dependencies": {
     "@sanity/google-maps-input": "^3.0.1",
-    "@sanity/icons": "^2.4.0",
-    "@sanity/ui": "^1.9.3",
+    "@sanity/icons": "^2.8.0",
+    "@sanity/ui": "2.0.0-beta.13",
     "@sanity/vision": "3.22.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

dev/test-studio/components/documentViews/jsonPreview.tsx

@@ -1,10 +1,14 @@
-import {Card, Code} from '@sanity/ui'
+import {Box, Card, Code} from '@sanity/ui'
 import React from 'react'
 
 export function JSONPreviewDocumentView(props: any) {
   return (
-    <Card padding={4} sizing="border" style={{minHeight: '100%'}} tone="transparent">
-      <Code language="json">{JSON.stringify(props.document.displayed, null, 2)}</Code>
+    <Card overflow="auto" style={{minHeight: '100%'}} tone="transparent">
+      <Box padding={4}>
+        <Code language="json" size={1}>
+          {JSON.stringify(props.document.displayed, null, 2)}
+        </Code>
+      </Box>
     </Card>
   )
 }

dev/test-studio/components/formComponents.tsx

@@ -78,6 +78,13 @@ export function Preview(props: PreviewProps) {
   )
 }
 
+export function CustomBadge() {
+  return {
+    label: 'Hello world',
+    title: 'Hello I am a custom document badge',
+  }
+}
+
 export const formComponentsPlugin = definePlugin({
   name: 'form-components-plugin',
   form: {

dev/test-studio/components/panes/debug/DebugPane.tsx

@@ -51,16 +51,16 @@ export const DebugPane: UserComponent = function DebugPane(props) {
 
   return (
     <Box height="fill">
-      <Card padding={3} tone="transparent">
-        <Stack space={2}>
-          <Text textOverflow="ellipsis">
+      <Box padding={4} paddingTop={0}>
+        <Stack space={3}>
+          <Text muted size={1} textOverflow="ellipsis">
             Random ID: <code>{randomId}</code>
           </Text>
           <Text textOverflow="ellipsis" size={1} muted>
             Assigned on pane component mount
           </Text>
         </Stack>
-      </Card>
+      </Box>
 
       <Card borderBottom padding={2}>
         <Stack space={1}>
@@ -74,15 +74,17 @@ export const DebugPane: UserComponent = function DebugPane(props) {
           >
             <Flex>
               <Box>
-                <Text>
+                <Text size={1}>
                   <LinkIcon />
                 </Text>
               </Box>
               <Box flex={1} marginLeft={3}>
-                <Text textOverflow="ellipsis">ChildLink</Text>
+                <Text size={1} textOverflow="ellipsis">
+                  ChildLink
+                </Text>
               </Box>
               <Box>
-                <Text>
+                <Text size={1}>
                   <ChevronRightIcon />
                 </Text>
               </Box>
@@ -98,15 +100,17 @@ export const DebugPane: UserComponent = function DebugPane(props) {
           >
             <Flex>
               <Box>
-                <Text>
+                <Text size={1}>
                   <ControlsIcon />
                 </Text>
               </Box>
               <Box flex={1} marginLeft={3}>
-                <Text textOverflow="ellipsis">ParameterizedLink</Text>
+                <Text size={1} textOverflow="ellipsis">
+                  ParameterizedLink
+                </Text>
               </Box>
               <Box>
-                <Text>
+                <Text size={1}>
                   <ChevronDownIcon />
                 </Text>
               </Box>

dev/test-studio/locales/index.ts

@@ -3,7 +3,6 @@ import {defineLocaleResourceBundle} from 'sanity'
 export const testStudioLocaleNamespace = 'testStudio' as const
 
 const enUSStrings = {
-  'studio.logo.title': 'English logo',
   'structure.root.title': 'Content 🇺🇸',
   'translate.example':
     '<Icon/> Your search for "<Red>{{keyword}}</Red>" took <Bold>{{duration}}ms</Bold>',
@@ -20,7 +19,6 @@ const nbNO = defineLocaleResourceBundle({
   locale: 'nb-NO',
   namespace: testStudioLocaleNamespace,
   resources: {
-    'studio.logo.title': 'Norsk logo',
     'structure.root.title': 'Innhold 🇳🇴',
     'translate.example':
       '<Icon/> Ditt søk på "<Red>{{keyword}}</Red>" tok <Bold>{{duration}}</Bold> millisekunder',

dev/test-studio/package.json

@@ -23,19 +23,20 @@
     "@sanity/assist": "^1.0.8",
     "@sanity/block-tools": "3.22.1",
     "@sanity/client": "^6.10.0",
-    "@sanity/color": "^2.1.20",
+    "@sanity/color": "3.0.0-beta.9",
     "@sanity/google-maps-input": "^3.0.1",
-    "@sanity/icons": "^2.6.0",
+    "@sanity/icons": "^2.8.0",
     "@sanity/image-url": "^1.0.2",
     "@sanity/locale-ko-kr": "^1.0.0",
     "@sanity/locale-nb-no": "^1.0.0",
     "@sanity/locale-nn-no": "^1.0.0",
     "@sanity/locale-pt-pt": "^1.0.0",
     "@sanity/locale-sv-se": "^1.0.0",
+    "@sanity/logos": "^2.0.2",
     "@sanity/portable-text-editor": "3.22.1",
     "@sanity/tsdoc": "1.0.0-alpha.38",
     "@sanity/types": "3.22.1",
-    "@sanity/ui": "^1.9.3",
+    "@sanity/ui": "2.0.0-beta.13",
     "@sanity/ui-workshop": "^1.0.0",
     "@sanity/util": "3.22.1",
     "@sanity/uuid": "^3.0.1",

dev/test-studio/sanity.config.ts

@@ -1,4 +1,5 @@
 import {BookIcon} from '@sanity/icons'
+import {SanityMonogram} from '@sanity/logos'
 import {visionTool} from '@sanity/vision'
 import {defineConfig, definePlugin} from 'sanity'
 import {deskTool} from 'sanity/desk'
@@ -13,7 +14,6 @@ import {ptPTLocale} from '@sanity/locale-pt-pt'
 import {svSELocale} from '@sanity/locale-sv-se'
 import {theme as tailwindTheme} from './sanity.theme.mjs'
 import {imageAssetSource} from './assetSources'
-import {Branding} from './components/Branding'
 import {resolveDocumentActions as documentActions} from './documentActions'
 import {resolveInitialValueTemplates} from './initialValueTemplates'
 import {languageFilter} from './plugins/language-filter'
@@ -31,6 +31,7 @@ import {
 import {
   Annotation,
   Block,
+  CustomBadge,
   Field,
   formComponentsPlugin,
   InlineBlock,
@@ -62,11 +63,6 @@ const sharedSettings = definePlugin({
       assetSources: [imageAssetSource],
     },
   },
-  studio: {
-    components: {
-      logo: Branding,
-    },
-  },
 
   i18n: {
     bundles: testStudioLocaleBundles,
@@ -93,6 +89,7 @@ const sharedSettings = definePlugin({
     unstable_comments: {
       enabled: true,
     },
+    badges: (prev, context) => (context.schemaType === 'author' ? [CustomBadge, ...prev] : prev),
   },
   plugins: [
     // ...localePlugins,
@@ -148,6 +145,7 @@ export default defineConfig([
     dataset: 'test',
     plugins: [sharedSettings()],
     basePath: '/test',
+    icon: SanityMonogram,
   },
   {
     name: 'tsdoc',

dev/test-studio/schema/book.ts

@@ -88,6 +88,18 @@ export default {
         },
       ],
     },
+    {
+      name: 'genre',
+      title: 'Genre',
+      type: 'string',
+      options: {
+        list: [
+          {title: 'Fiction', value: 'fiction'},
+          {title: 'Non Fiction', value: 'nonfiction'},
+          {title: 'Poetry', value: 'poetry'},
+        ],
+      },
+    },
   ],
   orderings: [
     {

examples/ecommerce-studio/package.json

@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@sanity/cli": "3.22.1",
-    "@sanity/ui": "^1.9.3",
+    "@sanity/ui": "2.0.0-beta.13",
     "react": "^18.2.0",
     "react-barcode": "^1.4.1",
     "react-dom": "^18.2.0",

packages/@sanity/portable-text-editor/package.json

@@ -78,7 +78,7 @@
     "@playwright/test": "^1.39.0",
     "@portabletext/toolkit": "^2.0.10",
     "@sanity/diff-match-patch": "^3.1.1",
-    "@sanity/ui": "^1.9.3",
+    "@sanity/ui": "2.0.0-beta.13",
     "@testing-library/react": "^13.4.0",
     "@types/debug": "^4.1.5",
     "@types/express": "^4.16.1",

packages/@sanity/vision/package.json

@@ -65,9 +65,9 @@
     "@lezer/highlight": "^1.0.0",
     "@rexxars/react-json-inspector": "^8.0.1",
     "@rexxars/react-split-pane": "^0.1.93",
-    "@sanity/color": "^2.1.20",
-    "@sanity/icons": "^2.6.0",
-    "@sanity/ui": "^1.9.3",
+    "@sanity/color": "3.0.0-beta.9",
+    "@sanity/icons": "^2.8.0",
+    "@sanity/ui": "2.0.0-beta.13",
     "@uiw/react-codemirror": "^4.11.4",
     "hashlru": "^2.3.0",
     "is-hotkey": "^0.1.6",

packages/@sanity/vision/src/components/VisionGui.styled.tsx

@@ -1,5 +1,5 @@
 import styled, {css} from 'styled-components'
-import {Button, Card, Box, Flex, Label, Theme, rem} from '@sanity/ui'
+import {Card, Box, Flex, Label, rem} from '@sanity/ui'
 
 export const Root = styled(Flex)`
   .sidebarPanes .Pane {
@@ -154,7 +154,3 @@ export const TimingsTextContainer = styled(Flex)`
 export const ControlsContainer = styled(Box)`
   border-top: 1px solid var(--card-border-color);
 `
-
-export const ButtonFullWidth = styled(Button)`
-  width: 100%;
-`