Facelift/cherrypick title

.eslintrc.cjs

@@ -210,6 +210,37 @@ module.exports = {
       files: ['./test/**/*.js', './test/*.js', '*.test.{js,ts,tsx}'],
       env: {jest: true},
     },
+
+    // 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',
+                  'MenuItem',
+                  'MenuItemProps',
+                  'Tab',
+                  'TabProps',
+                  'Tooltip',
+                  'TooltipProps',
+                ],
+                message:
+                  'Please use the (more opinionated) exported components in sanity/src/ui instead.',
+              },
+            ],
+          },
+        ],
+      },
+    },
   ],
 
   root: true,

dev/design-studio/package.json

@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@sanity/icons": "^2.6.0",
-    "@sanity/ui": "^1.8.3",
+    "@sanity/ui": "2.0.0-alpha.17",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sanity": "3.19.1",

dev/test-studio/assetSources/imageAssetSource.tsx

@@ -1,10 +1,10 @@
 import {ImagesIcon} from '@sanity/icons'
 import {AssetSource, AssetSourceComponentProps} from '@sanity/types'
-import {Box, Dialog, Text} from '@sanity/ui'
-import React from 'react'
+import {Text} from '@sanity/ui'
+import {Dialog} from '../../../packages/sanity/src/ui'
 
 function ImageAssetSource(props: AssetSourceComponentProps) {
-  const {dialogHeaderTitle, onClose, ...restProps} = props
+  const {dialogHeaderTitle, onClose} = props
 
   return (
     <Dialog
@@ -13,11 +13,9 @@ function ImageAssetSource(props: AssetSourceComponentProps) {
       onClose={onClose}
       width={1}
     >
-      <Box padding={4}>
-        <Text muted size={1} weight="medium">
-          (custom image asset source)
-        </Text>
-      </Box>
+      <Text muted size={1} weight="medium">
+        (custom image asset source)
+      </Text>
     </Dialog>
   )
 }

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/documentActions/actions/TestCustomComponentAction.tsx

@@ -1,6 +1,7 @@
-import {Button, Card, Dialog, Stack, Text} from '@sanity/ui'
+import {Text} from '@sanity/ui'
 import {DocumentActionComponent} from 'sanity'
-import React, {useCallback, useState} from 'react'
+import {useCallback, useState} from 'react'
+import {Dialog} from '../../../../packages/sanity/src/ui'
 
 export const TestCustomComponentAction: DocumentActionComponent = () => {
   const [open, setOpen] = useState<boolean>(false)
@@ -19,15 +20,15 @@ export const TestCustomComponentAction: DocumentActionComponent = () => {
           onClickOutside={toggleOpen}
           onClose={toggleOpen}
           width={1}
-          footer={
-            <Stack padding={2}>
-              <Button onClick={toggleOpen} text="Close" />
-            </Stack>
-          }
+          footer={{
+            confirmButton: {
+              onClick: toggleOpen,
+              tone: 'default',
+              text: 'Close',
+            },
+          }}
         >
-          <Card padding={5}>
-            <Text>This dialog is rendered using a custom dialog component.</Text>
-          </Card>
+          <Text size={1}>This dialog is rendered using a custom dialog component.</Text>
         </Dialog>
       ),
     },

dev/test-studio/package.json

@@ -28,7 +28,7 @@
     "@sanity/portable-text-editor": "3.19.1",
     "@sanity/tsdoc": "1.0.0-alpha.38",
     "@sanity/types": "3.19.1",
-    "@sanity/ui": "^1.8.3",
+    "@sanity/ui": "2.0.0-alpha.17",
     "@sanity/ui-workshop": "^1.0.0",
     "@sanity/util": "3.19.1",
     "@sanity/uuid": "^3.0.1",

dev/test-studio/sanity.config.ts

@@ -26,6 +26,7 @@ import {
 import {
   Annotation,
   Block,
+  CustomBadge,
   Field,
   formComponentsPlugin,
   InlineBlock,
@@ -74,10 +75,10 @@ const sharedSettings = definePlugin({
       return prev
     },
     newDocumentOptions,
-
     unstable_comments: {
       enabled: true,
     },
+    badges: (prev, context) => (context.schemaType === 'author' ? [CustomBadge, ...prev] : prev),
   },
   plugins: [
     deskTool({

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: [
     {

dev/test-studio/schema/debug/fieldComponentsTest.tsx

@@ -72,7 +72,7 @@ export default {
       description: (
         <span>
           Subtitle description <span style={{color: 'red'}}>x ← x - (JᵀJ + λIₙ༝ₙ)⁻¹ Jᵀr</span>
-          <script>window.alert('👻')</script>
+          <script>window.alert(&apos;👻&apos;)</script>
         </span>
       ),
       type: 'string',

examples/ecommerce-studio/package.json

@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "@sanity/cli": "3.19.1",
-    "@sanity/ui": "^1.8.3",
+    "@sanity/ui": "2.0.0-alpha.17",
     "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.38.1",
     "@portabletext/toolkit": "^2.0.10",
     "@sanity/diff-match-patch": "^3.1.1",
-    "@sanity/ui": "^1.8.3",
+    "@sanity/ui": "2.0.0-alpha.17",
     "@testing-library/react": "^13.4.0",
     "@types/debug": "^4.1.5",
     "@types/express": "^4.16.1",

packages/@sanity/vision/package.json

@@ -67,7 +67,7 @@
     "@rexxars/react-split-pane": "^0.1.93",
     "@sanity/color": "^2.1.20",
     "@sanity/icons": "^2.6.0",
-    "@sanity/ui": "^1.8.3",
+    "@sanity/ui": "2.0.0-alpha.17",
     "@uiw/react-codemirror": "^4.11.4",
     "hashlru": "^2.3.0",
     "is-hotkey": "^0.1.6",

packages/@sanity/vision/src/components/PerspectivePopover.tsx

@@ -25,8 +25,8 @@ export function PerspectivePopover() {
 
             <Card>
               <Text muted>
-                Perspectives allow your query to run against different "views" of the content in
-                your dataset
+                Perspectives allow your query to run against different &quot;views&quot; of the
+                content in your dataset
               </Text>
             </Card>
 

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%;
-`

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

@@ -49,7 +49,6 @@ import {
   ResultContainer,
   Result,
   ControlsContainer,
-  ButtonFullWidth,
   TimingsFooter,
   TimingsCard,
   TimingsTextContainer,
@@ -754,13 +753,7 @@ export class VisionGui extends React.PureComponent<VisionGuiProps, VisionGuiStat
                     <Box flex={1}>
                       <TextInput readOnly type="url" ref={this._operationUrlElement} value={url} />
                     </Box>
-                    <Tooltip
-                      content={
-                        <Box padding={2}>
-                          <Text>Copy to clipboard</Text>
-                        </Box>
-                      }
-                    >
+                    <Tooltip content="Copy to clipboard">
                       <Button
                         aria-label="Copy to clipboard"
                         type="button"
@@ -825,15 +818,7 @@ export class VisionGui extends React.PureComponent<VisionGuiProps, VisionGuiStat
                       <Flex>
                         <StyledLabel muted>Params</StyledLabel>
                         {paramsError && (
-                          <Tooltip
-                            placement="top-end"
-                            portal
-                            content={
-                              <Box padding={2}>
-                                <Text>{paramsError}</Text>
-                              </Box>
-                            }
-                          >
+                          <Tooltip placement="top-end" portal content={paramsError}>
                             <Box padding={1} marginX={2}>
                               <Text>
                                 <ErrorOutlineIcon />
@@ -850,7 +835,7 @@ export class VisionGui extends React.PureComponent<VisionGuiProps, VisionGuiStat
                     <Card padding={3} paddingX={3}>
                       <Tooltip
                         content={
-                          <Card padding={2} radius={4}>
+                          <Card radius={4}>
                             <Text size={1} muted>
                               Parameters are not valid JSON
                             </Text>
@@ -864,14 +849,15 @@ export class VisionGui extends React.PureComponent<VisionGuiProps, VisionGuiStat
                           <Box flex={1}>
                             <Tooltip
                               content={
-                                <Card padding={2} radius={4}>
+                                <Card radius={4}>
                                   <Hotkeys keys={['Ctrl', 'Enter']} />
                                 </Card>
                               }
                               placement="top"
                               portal
                             >
-                              <ButtonFullWidth
+                              <Button
+                                width="fill"
                                 onClick={this.handleQueryExecution}
                                 type="button"
                                 icon={queryInProgress ? StopIcon : PlayIcon}
@@ -882,7 +868,8 @@ export class VisionGui extends React.PureComponent<VisionGuiProps, VisionGuiStat
                             </Tooltip>
                           </Box>
                           <Box flex={1} marginLeft={3}>
-                            <ButtonFullWidth
+                            <Button
+                              width="fill"
                               onClick={this.handleListenExecution}
                               type="button"
                               icon={listenInProgress ? StopIcon : PlayIcon}

packages/sanity/package.json

@@ -154,7 +154,7 @@
     "@sanity/portable-text-editor": "3.19.1",
     "@sanity/schema": "3.19.1",
     "@sanity/types": "3.19.1",
-    "@sanity/ui": "^1.8.3",
+    "@sanity/ui": "2.0.0-alpha.17",
     "@sanity/util": "3.19.1",
     "@sanity/uuid": "^3.0.1",
     "@tanstack/react-virtual": "3.0.0-beta.54",

packages/sanity/src/core/components/DefaultDocument.tsx

@@ -3,7 +3,24 @@ import {NoJavascript} from './NoJavascript'
 import {GlobalErrorHandler} from './globalErrorHandler'
 import {Favicons} from './Favicons'
 
+// @todo: replace with fonts on our origin
 const globalStyles = `
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url("https://rsms.me/inter/font-files/Inter-roman.var.woff2?v=3.19") format("woff2");
+    font-named-instance: 'Regular';
+  }
+  @font-face {
+    font-family: 'Inter';
+    font-style: italic;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url("https://rsms.me/inter/font-files/Inter-italic.var.woff2?v=3.19") format("woff2");
+    font-named-instance: 'Italic';
+  }
   html {
     background-color: #f1f3f6;
   }
@@ -51,7 +68,8 @@ export function DefaultDocument(props: DefaultDocumentProps): React.ReactElement
         {css.map((href) => (
           <link key={href} rel="stylesheet" href={href} />
         ))}
-        <style>{globalStyles}</style>
+        {/* eslint-disable-next-line react/no-danger */}
+        <style dangerouslySetInnerHTML={{__html: globalStyles}} />
       </head>
       <body>
         <div id="sanity" />

packages/sanity/src/core/components/InsufficientPermissionsMessage.tsx

@@ -22,15 +22,15 @@ export function InsufficientPermissionsMessage(props: InsufficientPermissionsMes
   const plural = roles.length !== 1
 
   return (
-    <Box padding={2}>
+    <Box>
       <Inline space={2}>
         <Text size={1}>
           <AccessDeniedIcon />
         </Text>
-        <Text weight="semibold">{title}</Text>
+        <Text weight="medium">{title}</Text>
       </Inline>
       <Inline marginTop={4}>
-        <Text size={1}>
+        <Text size={1} weight="medium">
           {roles.length === 0 ? (
             <>You have no role that grants you permission to {operationLabel}</>
           ) : (

packages/sanity/src/core/components/IntentButton.tsx

@@ -1,15 +1,13 @@
-import {Button, ButtonProps} from '@sanity/ui'
-import React, {HTMLProps} from 'react'
+import React, {ComponentProps} from 'react'
+import {Button} from '../../../src/ui'
 import {IntentLink, IntentLinkProps} from 'sanity/router'
 
 /**
  *
  * @hidden
  * @beta
  */
-export function IntentButton(
-  props: IntentLinkProps & ButtonProps & Omit<HTMLProps<HTMLButtonElement>, 'as' | 'href' | 'ref'>,
-) {
+export function IntentButton(props: IntentLinkProps & ComponentProps<typeof Button>) {
   return props.disabled ? (
     <Button {...props} as="a" role="link" aria-disabled="true" />
   ) : (