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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.0-alpha.21",
+  "version": "2.0.0-alpha.22",
   "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/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>
   )