@sanity/ui 2.0.0-alpha.21 → 2.0.0-alpha.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.0-alpha.21",
+  "version": "2.0.0-alpha.23",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./src/index.ts",

package/src/components/autocomplete/autocomplete.tsx

@@ -141,7 +141,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     padding: paddingProp = 3,
     popover = EMPTY_RECORD,
     prefix,
-    radius = 3,
+    radius = 2,
     readOnly,
     relatedElements,
     renderOption: renderOptionProp,

package/src/components/toast/toast.tsx

@@ -10,6 +10,7 @@ export interface ToastProps {
   closable?: boolean
   description?: React.ReactNode
   onClose?: () => void
+  radius?: number | number[]
   title?: React.ReactNode
   status?: 'error' | 'warning' | 'success' | 'info'
 }
@@ -46,7 +47,7 @@ const TextBox = styled(Flex)`
 export function Toast(
   props: ToastProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'title'>,
 ): React.ReactElement {
-  const {closable, description, onClose, title, status, ...restProps} = props
+  const {closable, description, onClose, radius = 3, title, status, ...restProps} = props
   const cardTone = status ? STATUS_CARD_TONE[status] : 'default'
   const role = status ? ROLES[status] : 'status'
 
@@ -56,14 +57,18 @@ export function Toast(
       role={role}
       {...restProps}
       marginTop={3}
-      radius={2}
+      radius={radius}
       shadow={2}
       tone={cardTone}
     >
       <Flex align="flex-start">
         <TextBox flex={1} padding={3}>
           <Stack space={3}>
-            {title && <Text weight="semibold">{title}</Text>}
+            {title && (
+              <Text size={1} weight="medium">
+                {title}
+              </Text>
+            )}
             {description && (
               <Text muted size={1}>
                 {description}

package/src/primitives/avatar/avatar.tsx

@@ -42,6 +42,8 @@ const Stroke = styled.ellipse(avatarStyle.stroke)
 
 const Initials = styled.div(avatarStyle.initials)
 
+const Image = styled.svg(avatarStyle.image)
+
 /**
  * Avatars are used to represent people and other agents (e.g. bots).
  *
@@ -131,7 +133,7 @@ export const Avatar = forwardRef(function Avatar(
       </Arrow>
 
       {!imageFailed && src && (
-        <svg viewBox={`0 0 ${_sizeRem} ${_sizeRem}`} fill="none">
+        <Image viewBox={`0 0 ${_sizeRem} ${_sizeRem}`} fill="none">
           <defs>
             <pattern id={imageId} patternContentUnits="objectBoundingBox" width="1" height="1">
               <image
@@ -162,7 +164,7 @@ export const Avatar = forwardRef(function Avatar(
             stroke={color}
             vectorEffect="non-scaling-stroke"
           />
-        </svg>
+        </Image>
       )}
 
       {(imageFailed || !src) && initials && (

package/src/primitives/avatar/styles.ts

@@ -9,6 +9,7 @@ export const avatarStyle = {
   bgStroke: avatarBgStrokeStyle,
   stroke: avatarStrokeStyle,
   initials: avatarInitialsStyle,
+  image: avatarImageStyle,
 }
 
 function avatarArrowStyle(): CSSObject {
@@ -123,6 +124,12 @@ export function responsiveAvatarSizeStyle(
   })
 }
 
+export function avatarImageStyle(): CSSObject {
+  return {
+    position: 'relative',
+  }
+}
+
 export function avatarInitialsStyle(props: ThemeProps): CSSObject {
   const {theme} = props
   const {base} = theme.sanity.color

package/src/primitives/badge/styles.ts

@@ -8,7 +8,9 @@ export function badgeStyle(props: BadgeStyleProps & ThemeProps): CSSObject {
   const color = palette[$tone] || palette.default
 
   return {
-    backgroundColor: color.enabled.bg,
+    '--card-fg-color': color.enabled.fg,
+
+    backgroundColor: color.enabled.bg2,
     color: color.enabled.fg,
     boxShadow: `inset 0 0 0 1px ${color.enabled.border}`,
     cursor: 'default',

package/src/primitives/tooltip/constants.ts

@@ -1,5 +1,6 @@
 import {Placement} from '@floating-ui/react-dom'
 
+export const DEFAULT_TOOLTIP_DISTANCE = 4
 export const DEFAULT_TOOLTIP_PADDING = 4
 export const DEFAULT_FALLBACK_PLACEMENTS: Record<Placement, Placement[]> = {
   top: ['bottom', 'left', 'right'],

package/src/primitives/tooltip/tooltip.tsx

@@ -30,7 +30,11 @@ import {Placement} from '../../types'
 import {Layer, LayerProps, Portal, useBoundaryElement, usePortal} from '../../utils'
 import {Card} from '../card'
 import {Delay} from '../types'
-import {DEFAULT_FALLBACK_PLACEMENTS, DEFAULT_TOOLTIP_PADDING} from './constants'
+import {
+  DEFAULT_FALLBACK_PLACEMENTS,
+  DEFAULT_TOOLTIP_DISTANCE,
+  DEFAULT_TOOLTIP_PADDING,
+} from './constants'
 import {TooltipArrow} from './tooltipArrow'
 import {useTooltipDelayGroup} from './tooltipDelayGroup'
 
@@ -40,6 +44,7 @@ import {useTooltipDelayGroup} from './tooltipDelayGroup'
 export interface TooltipProps extends Omit<LayerProps, 'as'> {
   /** @deprecated Use `fallbackPlacements` instead. */
   allowedAutoPlacements?: Placement[]
+  arrow?: boolean
   boundaryElement?: HTMLElement | null
   children?: React.ReactElement
   content?: React.ReactNode
@@ -78,6 +83,7 @@ export const Tooltip = forwardRef(function Tooltip(
   const boundaryElementContext = useBoundaryElement()
   const theme = useTheme()
   const {
+    arrow: arrowProp = true,
     boundaryElement = boundaryElementContext?.element,
     children: childProp,
     content,
@@ -129,7 +135,7 @@ export const Tooltip = forwardRef(function Tooltip(
     )
 
     // Define distance between reference and floating element
-    ret.push(offset({mainAxis: 3}))
+    ret.push(offset({mainAxis: DEFAULT_TOOLTIP_DISTANCE}))
 
     // Shift the tooltip so its sits with the boundary element
     ret.push(
@@ -141,10 +147,12 @@ export const Tooltip = forwardRef(function Tooltip(
     )
 
     // Place arrow
-    ret.push(arrow({element: arrowRef, padding: 2}))
+    if (arrowProp) {
+      ret.push(arrow({element: arrowRef, padding: 2}))
+    }
 
     return ret
-  }, [boundaryElement, fallbackPlacements])
+  }, [arrowProp, boundaryElement, fallbackPlacements])
 
   const {floatingStyles, placement, middlewareData, refs, update} = useFloating({
     middleware,
@@ -384,7 +392,7 @@ export const Tooltip = forwardRef(function Tooltip(
         shadow={shadow}
       >
         {content}
-        <TooltipArrow ref={setArrow} style={arrowStyle} />
+        {arrowProp && <TooltipArrow ref={setArrow} style={arrowStyle} />}
       </Card>
     </Root>
   )

package/src/theme/studioTheme/theme.ts

@@ -8,9 +8,9 @@ import {fonts} from './fonts'
 export const studioTheme: RootTheme = {
   avatar: {
     sizes: [
-      {distance: -3, size: 23},
-      {distance: -6, size: 33},
-      {distance: -9, size: 53},
+      {distance: -3, size: 19},
+      {distance: -6, size: 31},
+      {distance: -9, size: 51},
     ],
     focusRing: {offset: 0, width: 1},
   },