feat(facelift): studio UI butons

.eslintrc.cjs

@@ -221,7 +221,14 @@ module.exports = {
             paths: [
               {
                 name: '@sanity/ui',
-                importNames: ['Tooltip', 'TooltipProps', 'MenuItem', 'MenuItemProps'],
+                importNames: [
+                  'Tooltip',
+                  'TooltipProps',
+                  'MenuItem',
+                  'MenuItemProps',
+                  'Button',
+                  'ButtonProps',
+                ],
                 message:
                   'Please use the (more opinionated) exported components in sanity/src/ui instead.',
               },

dev/design-studio/components/CustomPane/CustomPane.tsx

@@ -1,6 +1,7 @@
 import React, {useCallback} from 'react'
-import {Button, Card, Code, Stack} from '@sanity/ui'
+import {Card, Code, Stack} from '@sanity/ui'
 import {usePaneRouter} from 'sanity/desk'
+import {Button} from '../../../../packages/sanity/src/ui'
 
 export function CustomPane(props: any) {
   return (

dev/design-studio/package.json

@@ -30,8 +30,8 @@
     "start": "../.bin/sanity start --port 4000"
   },
   "dependencies": {
-    "@sanity/icons": "^2.6.0",
-    "@sanity/ui": "2.0.0-alpha.12",
+    "@sanity/icons": "^2.4.0",
+    "@sanity/ui": "2.0.0-alpha.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sanity": "3.19.1",

dev/test-studio/components/navbar/ToolMenu.tsx

@@ -1,6 +1,7 @@
-import {Button, Flex} from '@sanity/ui'
+import {Flex} from '@sanity/ui'
 import React from 'react'
 import {ToolLink, ToolMenuProps} from 'sanity'
+import {Button} from '../../../../packages/sanity/src/ui'
 
 export function ToolMenu(props: ToolMenuProps) {
   const {context, tools, closeSidebar} = props

dev/test-studio/documentActions/actions/TestConfirmDialogAction.tsx

@@ -1,7 +1,8 @@
 import {DocumentActionComponent, DocumentActionDescription} from 'sanity'
 import {CheckmarkCircleIcon, CloseCircleIcon} from '@sanity/icons'
-import {Button, Text, useToast} from '@sanity/ui'
+import {Text, useToast} from '@sanity/ui'
 import React, {useCallback, useMemo, useState} from 'react'
+import {Button} from '../../../../packages/sanity/src/ui'
 
 export const TestConfirmDialogAction: DocumentActionComponent = (props) => {
   const {onComplete} = props

dev/test-studio/documentActions/actions/TestCustomComponentAction.tsx

@@ -1,6 +1,7 @@
-import {Button, Card, Dialog, Stack, Text} from '@sanity/ui'
+import {Card, Dialog, Stack, Text} from '@sanity/ui'
 import {DocumentActionComponent} from 'sanity'
 import React, {useCallback, useState} from 'react'
+import {Button} from '../../../../packages/sanity/src/ui'
 
 export const TestCustomComponentAction: DocumentActionComponent = () => {
   const [open, setOpen] = useState<boolean>(false)

dev/test-studio/documentActions/actions/TestModalDialogAction.tsx

@@ -1,7 +1,8 @@
 import {DocumentActionComponent, DocumentActionDescription} from 'sanity'
 import {CopyIcon} from '@sanity/icons'
-import {Button, Grid, Text, useToast} from '@sanity/ui'
+import {Grid, Text, useToast} from '@sanity/ui'
 import React, {useCallback, useMemo, useState} from 'react'
+import {Button} from '../../../../packages/sanity/src/ui'
 
 export const TestModalDialogAction: DocumentActionComponent = (props) => {
   const {onComplete} = props

dev/test-studio/documentActions/actions/TestPopoverDialogAction.tsx

@@ -1,7 +1,8 @@
 import {DocumentActionComponent, DocumentActionDescription} from 'sanity'
 import {LaunchIcon} from '@sanity/icons'
-import {Button, Stack, Text, useToast} from '@sanity/ui'
+import {Stack, Text, useToast} from '@sanity/ui'
 import React, {useCallback, useMemo, useState} from 'react'
+import {Button} from '../../../../packages/sanity/src/ui'
 
 export const TestPopoverDialogAction: DocumentActionComponent = (props) => {
   const {onComplete} = props

dev/test-studio/fieldActions/PrivateIcon.tsx

@@ -1,19 +1,10 @@
 import {LockIcon} from '@sanity/icons'
-import {Text, Tooltip} from '@sanity/ui'
 import React from 'react'
+import {Tooltip} from '../../../packages/sanity/src/ui'
 
 export function PrivateIcon() {
   return (
-    <Tooltip
-      content={
-        <Text size={1} style={{whiteSpace: 'nowrap'}}>
-          Only visible to you
-        </Text>
-      }
-      padding={2}
-      placement="top"
-      portal
-    >
+    <Tooltip content={'Only visible to you'} placement="top" portal>
       <LockIcon />
     </Tooltip>
   )

dev/test-studio/package.json

@@ -27,8 +27,8 @@
     "@sanity/image-url": "^1.0.2",
     "@sanity/portable-text-editor": "3.19.1",
     "@sanity/tsdoc": "1.0.0-alpha.38",
-    "@sanity/types": "3.19.1",
-    "@sanity/ui": "2.0.0-alpha.12",
+    "@sanity/types": "3.17.0",
+    "@sanity/ui": "2.0.0-alpha.5",
     "@sanity/ui-workshop": "^1.0.0",
     "@sanity/util": "3.19.1",
     "@sanity/uuid": "^3.0.1",

dev/test-studio/plugins/language-filter/LanguageFilterMenuButton.tsx

@@ -1,7 +1,8 @@
 import {TranslateIcon} from '@sanity/icons'
-import {Box, Button, Card, Checkbox, Flex, Popover, Stack, Text, useClickOutside} from '@sanity/ui'
+import {Box, Card, Checkbox, Flex, Popover, Stack, Text, useClickOutside} from '@sanity/ui'
 import React, {FormEvent, useCallback, useState} from 'react'
 import {ObjectSchemaType} from 'sanity'
+import {Button} from '../../../../packages/sanity/src/ui'
 import {LanguageFilterPluginOptions} from './types'
 import {usePaneLanguages} from './usePaneLanguages'
 

dev/test-studio/schema/debug/components/AuthorReferenceInput.tsx

@@ -1,7 +1,8 @@
 import {ObjectInputProps, set, setIfMissing, unset, useClient} from 'sanity'
 import imageUrlBuilder from '@sanity/image-url'
 import {Reference, ReferenceSchemaType} from '@sanity/types'
-import {Button, Spinner} from '@sanity/ui'
+// eslint-disable-next-line no-restricted-imports
+import {Spinner, Button} from '@sanity/ui'
 import React, {forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'
 import styles from './AuthorReferenceInput.module.css'
 
@@ -18,7 +19,7 @@ export const AuthorReferenceInput = forwardRef(function AuthorReferenceInput(
   ref: React.ForwardedRef<any>,
 ) {
   // @todo fix
-  const {inputProps, type, value} = props
+  const {inputProps = {}, type, value} = props
   const {readOnly} = inputProps
   const client = useClient({apiVersion: '2022-09-09'})
   const current = value && value._ref

dev/test-studio/schema/debug/components/CustomInputWithDialogOverlay.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import {DocumentPresence, FieldPresence, PresenceOverlay, setIfMissing} from 'sanity'
-import {Button, Dialog} from '@sanity/ui'
+import {Dialog} from '@sanity/ui'
 import {ObjectSchemaType, Path} from '@sanity/types'
+import {Button} from '../../../../../packages/sanity/src/ui'
 
 export const CustomInputWithDialogOverlay = React.forwardRef(function CustomInputWithDialogOverlay(
   props: {

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

@@ -1,6 +1,7 @@
-import {Button, Grid} from '@sanity/ui'
+import {Grid} from '@sanity/ui'
 import React, {useCallback, useEffect, useRef} from 'react'
 import {defineField, ObjectInputProps, Path, set, unset} from 'sanity'
+import {Button} from '../../../../packages/sanity/src/ui'
 
 /**
  * This document renders a custom input component which patches `testValue.b` whenever the value

dev/test-studio/schema/docs/v3/form-components-api/components.tsx

@@ -1,6 +1,6 @@
 import React, {useCallback} from 'react'
 import {hues} from '@sanity/color'
-import {Box, Stack, Heading, Flex, Inline, Text, Grid, Button} from '@sanity/ui'
+import {Box, Stack, Heading, Flex, Inline, Text, Grid} from '@sanity/ui'
 import {
   ArrayOfPrimitivesInputProps,
   ArraySchemaType,
@@ -11,6 +11,7 @@ import {
   ItemProps,
   PreviewProps,
 } from 'sanity'
+import {Button} from '../../../../../../packages/sanity/src/ui'
 
 const COMPONENT_COLORS = {
   input: hues.blue[400].hex,

dev/test-studio/schema/standard/portableText/customMarkers/blockActions.tsx

@@ -1,8 +1,9 @@
 import {CommentIcon} from '@sanity/icons'
 import {PortableTextBlock} from '@sanity/portable-text-editor'
-import {Box, Button, Popover, Stack, Text, TextArea} from '@sanity/ui'
+import {Box, Popover, Stack, Text, TextArea} from '@sanity/ui'
 import React, {ChangeEvent, useCallback, useState} from 'react'
 import {RenderBlockActionsCallback} from 'sanity'
+import {Button} from '../../../../../../packages/sanity/src/ui'
 
 export const renderBlockActions: RenderBlockActionsCallback = (props) => {
   const {block, set} = props
@@ -36,20 +37,14 @@ function CommentButton(props: {set: (block: PortableTextBlock) => void; value: P
           Comment
         </Text>
         <TextArea onChange={handleCommentChange} value={comment} />
-        <Button
-          fontSize={1}
-          onClick={handleSubmit}
-          padding={2}
-          text="Post comment"
-          tone="primary"
-        />
+        <Button onClick={handleSubmit} text="Post comment" tone="primary" />
       </Stack>
     </Box>
   )
 
   return (
     <Popover content={content} open={open} portal="default">
-      <Button icon={CommentIcon} mode="bleed" onClick={handleClick} padding={1} />
+      <Button icon={CommentIcon} mode="bleed" onClick={handleClick} />
     </Popover>
   )
 }

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

@@ -1,6 +1,7 @@
 import React, {useCallback, useState} from 'react'
-import {Popover, Stack, Inline, Text, Card, Badge, Button, useClickOutside} from '@sanity/ui'
+import {Popover, Stack, Inline, Text, Card, Badge, useClickOutside} from '@sanity/ui'
 import {HelpCircleIcon} from '@sanity/icons'
+import {Button} from '../../../../sanity/src/ui'
 import {PerspectivePopoverContent, PerspectivePopoverLink} from './PerspectivePopover.styled'
 
 export function PerspectivePopover() {
@@ -49,9 +50,8 @@ export function PerspectivePopover() {
       <Button
         icon={HelpCircleIcon}
         mode="bleed"
-        padding={2}
+        size="small"
         tone="primary"
-        fontSize={1}
         ref={setButtonEl}
         onClick={handleClick}
         selected={open}

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, Theme, 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

@@ -14,11 +14,10 @@ import {
   Text,
   TextInput,
   Grid,
-  Button,
   ToastContextValue,
   Inline,
 } from '@sanity/ui'
-import {Tooltip} from '../../../../sanity/src/ui'
+import {Tooltip, Button} from '../../../../sanity/src/ui'
 import {VisionCodeMirror} from '../codemirror/VisionCodeMirror'
 import {getLocalStorage, LocalStorageish} from '../util/localStorage'
 import {parseApiQueryString, ParsedApiQueryString} from '../util/parseApiQueryString'
@@ -49,7 +48,6 @@ import {
   ResultContainer,
   Result,
   ControlsContainer,
-  ButtonFullWidth,
   TimingsFooter,
   TimingsCard,
   TimingsTextContainer,
@@ -857,7 +855,8 @@ export class VisionGui extends React.PureComponent<VisionGuiProps, VisionGuiStat
                               placement="top"
                               portal
                             >
-                              <ButtonFullWidth
+                              <Button
+                                width="fill"
                                 onClick={this.handleQueryExecution}
                                 type="button"
                                 icon={queryInProgress ? StopIcon : PlayIcon}
@@ -868,7 +867,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/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" />
   ) : (