@sanity/ui 2.10.0-corel.0 → 2.10.0

package/src/core/components/menu/menuButton.tsx

@@ -25,9 +25,9 @@ export interface MenuButtonProps {
    * @deprecated Use `popover={{boundaryElement: element}}` instead.
    */
   boundaryElement?: HTMLElement
-  button: React.ReactElement
+  button: React.ReactElement<any>
   id: string
-  menu?: React.ReactElement
+  menu?: React.ReactElement<any>
   onClose?: () => void
   onOpen?: () => void
   /**
@@ -169,7 +169,7 @@ export const MenuButton = forwardRef(function MenuButton(
   }, [buttonElement, disableRestoreFocusOnClose])
 
   const handleBlur = useCallback(
-    (event: React.FocusEvent<HTMLButtonElement>) => {
+    (event: FocusEvent) => {
       const target = event.relatedTarget
 
       if (!(target instanceof Node)) {
@@ -199,32 +199,19 @@ export const MenuButton = forwardRef(function MenuButton(
     return () => setChildMenuElements((els) => els.filter((_el) => _el !== el))
   }, [])
 
-  const menuProps: MenuProps = useMemo(
-    () => ({
-      'aria-labelledby': id,
-      'onBlurCapture': handleBlur,
-      'onClickOutside': handleMenuClickOutside,
-      'onEscape': handleMenuEscape,
-      'onItemClick': handleItemClick,
-      'originElement': buttonElement,
-      registerElement,
-      shouldFocus,
-    }),
-    [
-      buttonElement,
-      handleMenuClickOutside,
-      handleMenuEscape,
-      handleItemClick,
-      id,
-      handleBlur,
-      registerElement,
-      shouldFocus,
-    ],
-  )
+  const menuProps: MenuProps = {
+    'aria-labelledby': id,
+    'onBlurCapture': handleBlur,
+    'onClickOutside': handleMenuClickOutside,
+    'onEscape': handleMenuEscape,
+    'onItemClick': handleItemClick,
+    'originElement': buttonElement,
+    registerElement,
+    shouldFocus,
+  }
 
   const menu = menuProp && cloneElement(menuProp, menuProps)
 
-  const ref = useRef<HTMLButtonElement | null>(null)
   const button = useMemo(
     () =>
       buttonProp &&
@@ -236,7 +223,7 @@ export const MenuButton = forwardRef(function MenuButton(
         'onMouseDown': handleMouseDown,
         'aria-haspopup': true,
         'aria-expanded': open,
-        'ref': ref,
+        'ref': setButtonElement,
         'selected': buttonProp.props.selected ?? open,
       }),
     [buttonProp, handleButtonClick, handleButtonKeyDown, handleMouseDown, id, open],
@@ -245,19 +232,10 @@ export const MenuButton = forwardRef(function MenuButton(
   // Forward button ref to parent
   useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(
     forwardedRef,
-    () => ref.current,
+    () => buttonElement,
+    [buttonElement],
   )
 
-  // If there's a button then we need to set the reference element to the cloned button ref
-  // and if button changes we make sure to update or remove the reference element.
-  useEffect(() => {
-    if (!button) return undefined
-
-    setButtonElement(ref.current)
-
-    return () => setButtonElement(null)
-  }, [button])
-
   const popoverProps: MenuButtonProps['popover'] = useMemo(
     () => ({
       boundaryElement: deprecated_boundaryElement,

package/src/core/components/menu/menuGroup.tsx

@@ -1,5 +1,5 @@
 import {ChevronRightIcon} from '@sanity/icons'
-import {isValidElement, useCallback, useEffect, useState} from 'react'
+import {isValidElement, useCallback, useEffect, useState, type JSX} from 'react'
 import {isValidElementType} from 'react-is'
 import {useArrayProp} from '../../hooks'
 import {Box, Flex, Popover, PopoverProps, Text} from '../../primitives'
@@ -30,7 +30,7 @@ export interface MenuGroupProps {
 export function MenuGroup(
   props: Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'popover' | 'ref' | 'tabIndex'> &
     MenuGroupProps,
-): React.ReactElement {
+): React.ReactElement<any> {
   const {
     as = 'button',
     children,
@@ -53,9 +53,10 @@ export function MenuGroup(
     onClickOutside,
     onEscape,
     onItemClick,
-    onItemMouseEnter = menu.onMouseEnter,
+    onItemMouseEnter: _onItemMouseEnter,
     registerElement,
   } = menu
+  const onItemMouseEnter = _onItemMouseEnter ?? menu.onMouseEnter
   const [rootElement, setRootElement] = useState<HTMLButtonElement | HTMLDivElement | null>(null)
   const [open, setOpen] = useState(false)
   const [shouldFocus, setShouldFocus] = useState<'first' | 'last' | null>(null)

package/src/core/components/menu/menuItem.tsx

@@ -7,6 +7,7 @@ import {
   useMemo,
   useRef,
   useState,
+  type JSX,
 } from 'react'
 import {isValidElementType} from 'react-is'
 import {useArrayProp} from '../../hooks'
@@ -72,9 +73,11 @@ export const MenuItem = forwardRef(function MenuItem(
     activeElement,
     mount,
     onItemClick,
-    onItemMouseEnter = menu.onMouseEnter,
-    onItemMouseLeave = menu.onMouseLeave,
+    onItemMouseEnter: _onItemMouseEnter,
+    onItemMouseLeave: _onItemMouseLeave,
   } = menu
+  const onItemMouseEnter = _onItemMouseEnter ?? menu.onMouseEnter
+  const onItemMouseLeave = _onItemMouseLeave ?? menu.onMouseLeave
   const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
   const active = Boolean(activeElement) && activeElement === rootElement
   const ref = useRef<HTMLDivElement | null>(null)

package/src/core/components/tab/tabList.tsx

@@ -1,4 +1,4 @@
-import {cloneElement, forwardRef, useCallback, useMemo, useState} from 'react'
+import {cloneElement, forwardRef, useCallback, useState, Children, isValidElement} from 'react'
 import {styled} from 'styled-components'
 import {Inline, InlineProps} from '../../primitives'
 
@@ -6,11 +6,7 @@ import {Inline, InlineProps} from '../../primitives'
  * @public
  */
 export interface TabListProps extends Omit<InlineProps, 'as' | 'height'> {
-  children: Array<React.ReactElement | null | undefined | false>
-}
-
-function _isReactElement(node: unknown): node is React.ReactElement {
-  return Boolean(node)
+  children: Array<React.ReactElement<any> | null | undefined | false>
 }
 
 //Limits the width of tabs in tablist
@@ -33,22 +29,18 @@ export const TabList = forwardRef(function TabList(
   const {children: childrenProp, ...restProps} = props
   const [focusedIndex, setFocusedIndex] = useState(-1)
 
-  const children = useMemo(() => childrenProp.filter(_isReactElement), [childrenProp])
+  const children: React.ReactElement<any>[] = Children.toArray(childrenProp).filter(isValidElement)
 
   const tabs = children.map((child, childIndex) =>
     cloneElement(child, {
       focused: focusedIndex === childIndex,
       key: childIndex,
-      onFocus: () => handleTabFocus(childIndex),
+      onFocus: () => setFocusedIndex(childIndex),
     }),
   )
 
   const numTabs = tabs.length
 
-  const handleTabFocus = useCallback((tabIdx: number) => {
-    setFocusedIndex(tabIdx)
-  }, [])
-
   const handleKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLDivElement>) => {
       if (event.key === 'ArrowLeft') {

package/src/core/components/toast/__workshop__/hook.tsx

@@ -24,7 +24,7 @@ export default function HookStory() {
               })
             }
             text="Push info"
-            tone="primary"
+            tone="neutral"
           />
 
           <Button

package/src/core/components/toast/toast.test.tsx

@@ -1,5 +1,4 @@
 /** @jest-environment jsdom */
-/* eslint-disable @typescript-eslint/no-explicit-any */
 
 import {render} from '../../../../test'
 import {ToastContext} from './toastContext'

package/src/core/components/toast/toast.tsx

@@ -23,14 +23,14 @@ const STATUS_CARD_TONE: {[key: string]: ThemeColorStateToneKey} = {
   error: 'critical',
   warning: 'caution',
   success: 'positive',
-  info: 'primary',
+  info: 'neutral',
 } as const
 
 const BUTTON_TONE = {
   error: 'critical',
   warning: 'caution',
   success: 'positive',
-  info: 'primary',
+  info: 'neutral',
 } satisfies {[key: string]: ButtonTone}
 
 const ROLES = {
@@ -53,7 +53,7 @@ const Root = styled(Card)<{$duration?: number; tone: ThemeColorStateToneKey} & T
  */
 export function Toast(
   props: ToastProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'title'>,
-): React.ReactElement {
+): React.ReactElement<any> {
   const {closable, description, duration, onClose, radius = 3, title, status, ...restProps} = props
   const cardTone = status ? STATUS_CARD_TONE[status] : 'default'
   const buttonTone = status ? BUTTON_TONE[status] : 'default'

package/src/core/components/toast/toastProvider.tsx

@@ -8,6 +8,7 @@ import {Box} from '../../primitives'
 import {Layer} from '../../utils'
 import {Toast} from './toast'
 import {ToastContext} from './toastContext'
+import {generateToastId} from './toastState'
 import {ToastContextValue, ToastParams} from './types'
 
 type ToastState = {
@@ -45,12 +46,10 @@ const ToastContainer = styled.div`
   width: 100%;
 `
 
-let toastId = 0
-
 /**
  * @public
  */
-export function ToastProvider(props: ToastProviderProps): React.ReactElement {
+export function ToastProvider(props: ToastProviderProps): React.ReactElement<any> {
   const {children, padding = 4, paddingX, paddingY, zOffset} = props
   const [state, _setState] = useState<ToastState>([])
   const toastsRef = useRef<{[key: string]: {timeoutId: NodeJS.Timeout}}>({})
@@ -60,22 +59,23 @@ export function ToastProvider(props: ToastProviderProps): React.ReactElement {
     () => ({
       initial: {
         opacity: 0,
-        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: 0,
+        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: 0,
         y: 32,
         scale: 0.25,
         willChange: 'transform',
       },
       animate: {
         opacity: [0, 1, 1],
-        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: [0, 0, 1],
+        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [0, 0, 1],
         y: 0,
         scale: 1,
       },
+      // @ts-expect-error fix later
       exit: {
         opacity: [1, 1, 0],
-        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: [1, 0, 0],
+        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [1, 0, 0],
         scale: 0.5,
-        transition: prefersReducedMotion ? {duration: 0} : {duration: 0.2},
+        transition: {duration: prefersReducedMotion ? 0 : 0.2},
       },
     }),
     [prefersReducedMotion],
@@ -86,7 +86,7 @@ export function ToastProvider(props: ToastProviderProps): React.ReactElement {
       // Wrap setState in startTransition to allow React to give input state updates higher priority
       const setState: typeof _setState = (state) => startTransition(() => _setState(state))
 
-      const id = params.id || String(toastId++)
+      const id = params.id || generateToastId()
       const duration = params.duration || 5000
 
       const dismiss = () => {

package/src/core/components/toast/toastState.ts

@@ -0,0 +1,6 @@
+let toastId = 0
+
+/** @internal */
+export function generateToastId(): string {
+  return String(toastId++)
+}

package/src/core/components/tree/tree.tsx

@@ -30,7 +30,7 @@ export const Tree = memo(
     props: TreeProps &
       Omit<React.HTMLProps<HTMLDivElement>, 'align' | 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
     forwardedRef: React.ForwardedRef<HTMLDivElement>,
-  ): React.ReactElement {
+  ): React.ReactElement<any> {
     const {children, space = 1, onFocus, ...restProps} = props
     const ref = useRef<HTMLDivElement | null>(null)
     const [focusedElement, setFocusedElement] = useState<HTMLElement | null>(null)

package/src/core/components/tree/treeGroup.tsx

@@ -9,7 +9,7 @@ export interface TreeGroupProps {
 export const TreeGroup = memo(function TreeGroup(
   props: TreeGroupProps &
     Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
-): React.ReactElement {
+): React.ReactElement<any> {
   const {children, expanded = false, ...restProps} = props
   const tree = useTree()
 

package/src/core/components/tree/treeItem.tsx

@@ -46,7 +46,7 @@ const ToggleArrowText = styled(Text)`
  */
 export const TreeItem = memo(function TreeItem(
   props: TreeItemProps & Omit<React.HTMLProps<HTMLLIElement>, 'as' | 'ref' | 'role'>,
-): React.ReactElement {
+): React.ReactElement<any> {
   const {
     children,
     expanded: expandedProp = false,

package/src/core/constants.ts

@@ -13,7 +13,7 @@ export const EMPTY_RECORD: Record<string, never> = {}
 /**
  * @internal
  */
-export const POPOVER_MOTION_CONTENT_OPACITY_PROPERTY = '--motion-content-opacity'
+export const POPOVER_MOTION_CONTENT_OPACITY_PROPERTY = '--motion-content-opacity' as string
 
 /**
  * Shared `framer-motion` variants used by `Popover` and `Tooltip` components.

package/src/core/hooks/useArrayProp.ts

@@ -1,4 +1,4 @@
-import {useMemo} from 'react'
+import {useState} from 'react'
 import {_getArrayProp} from '../styles'
 
 /** @beta */
@@ -12,14 +12,19 @@ export function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(
   val: T | T[] | undefined,
   defaultVal?: T[],
 ): T[] {
-  // JSON.stringify is fast, but it's not faster than useMemo's referencial equality check
-  const __perf_hash__ = useMemo(() => JSON.stringify(val ?? defaultVal), [defaultVal, val])
+  const [[cachedVal, cachedHash], setCache] = useState<[T[], string]>(() => [
+    _getArrayProp(val, defaultVal),
+    JSON.stringify(val ?? defaultVal),
+  ])
 
-  return useMemo(
-    () => _getArrayProp(val, defaultVal),
+  const hash = JSON.stringify(val ?? defaultVal)
 
-    // Improve performance: Keep object identify for a given hash of the value
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [__perf_hash__],
-  )
+  if (hash !== cachedHash) {
+    // If the cached hash has changed, update the cache right away.
+    // Calling setState during render is fine in this case, and preferred over a useEffect loop
+    // https://19.react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
+    setCache([_getArrayProp(val, defaultVal), hash])
+  }
+
+  return cachedVal
 }

package/src/core/hooks/useDelayedState.ts

@@ -8,7 +8,7 @@ export function useDelayedState<S>(
   initialState: S | (() => S),
 ): [S, (nextState: SetStateAction<S>, delay?: number) => void] {
   const [state, setState] = useState(initialState)
-  const delayedAction = useRef<NodeJS.Timeout | undefined>()
+  const delayedAction = useRef<NodeJS.Timeout | undefined>(undefined)
 
   const onStateChange = useCallback((nextState: SetStateAction<S>, delay?: number) => {
     const action = () => {

package/src/core/hooks/useElementRect/__workshop__/example.tsx

@@ -1,11 +1,11 @@
 import {Box, Card, Code, Container, Stack, Text, useElementRect} from '@sanity/ui'
-import {useMemo, useState} from 'react'
+import {useState} from 'react'
 import {Grid} from '../../../primitives'
 
 export default function ExampleStory() {
   const [element, setElement] = useState<HTMLElement | null>(null)
   const rect = useElementRect(element)
-  const size = useMemo(() => ({width: rect?.width || 0, height: rect?.height || 0}), [rect])
+  const size = {width: rect?.width || 0, height: rect?.height || 0}
 
   return (
     <Box padding={[3, 4, 5]}>

package/src/core/hooks/usePrefersDark.hydration.test.tsx

@@ -1,5 +1,4 @@
 /** @jest-environment jsdom */
-/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * As this hook is used for top-level theming it's likely to be called while server-rendering
  * and that's why it's worth it to have a testing suite for hydration

package/src/core/hooks/usePrefersReducedMotion.hydration.test.tsx

@@ -1,5 +1,4 @@
 /** @jest-environment jsdom */
-/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * As this hook is used for top-level theming it's likely to be called while server-rendering
  * and that's why it's worth it to have a testing suite for hydration

package/src/core/lib/globalScope.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * Gets the global scope instance in a given environment.
  *

package/src/core/primitives/avatar/avatar.tsx

@@ -1,5 +1,5 @@
 import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
-import {forwardRef, useCallback, useEffect, useId, useMemo, useState} from 'react'
+import {forwardRef, useCallback, useEffect, useId, useMemo, useState, type JSX} from 'react'
 import ReactIs from 'react-is'
 import {styled} from 'styled-components'
 import {useArrayProp} from '../../hooks'

package/src/core/primitives/avatar/avatarStack.tsx

@@ -1,5 +1,5 @@
 import {getTheme_v2} from '@sanity/ui/theme'
-import {Children, cloneElement, forwardRef, isValidElement, useMemo} from 'react'
+import {Children, cloneElement, forwardRef, isValidElement} from 'react'
 import {styled, css} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
 import {useArrayProp} from '../../hooks'
@@ -65,10 +65,7 @@ export const AvatarStack = forwardRef(function AvatarStack(
     size: sizeProp = 1,
     ...restProps
   } = props
-  const children = useMemo<React.ReactElement[]>(
-    () => Children.toArray(childrenProp).filter(isValidElement),
-    [childrenProp],
-  )
+  const children: React.ReactElement<any>[] = Children.toArray(childrenProp).filter(isValidElement)
   const maxLength = Math.max(maxLengthProp, 0)
   const size = useArrayProp(sizeProp)
 

package/src/core/primitives/badge/__workshop__/tones.tsx

@@ -1,4 +1,5 @@
 import {Badge, Flex, Inline} from '@sanity/ui'
+import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
 import {useSelect} from '@sanity/ui-workshop'
 import {WORKSHOP_BADGE_MODE_OPTIONS} from '../../../__workshop__/constants'
 
@@ -8,19 +9,11 @@ export default function Tones() {
   return (
     <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
       <Inline space={2}>
-        <Badge mode={mode}>Default</Badge>
-        <Badge mode={mode} tone="primary">
-          Primary
-        </Badge>
-        <Badge mode={mode} tone="positive">
-          Positive
-        </Badge>
-        <Badge mode={mode} tone="caution">
-          Caution
-        </Badge>
-        <Badge mode={mode} tone="critical">
-          Critical
-        </Badge>
+        {THEME_COLOR_STATE_TONES.map((tone) => (
+          <Badge key={tone} mode={mode} tone={tone}>
+            {tone}
+          </Badge>
+        ))}
       </Inline>
     </Flex>
   )

package/src/core/primitives/badge/badge.tsx

@@ -1,4 +1,4 @@
-import {forwardRef} from 'react'
+import {forwardRef, type JSX} from 'react'
 import {styled} from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'

package/src/core/primitives/box/box.tsx

@@ -1,4 +1,4 @@
-import {forwardRef} from 'react'
+import {forwardRef, type JSX} from 'react'
 import {styled} from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {

package/src/core/primitives/button/__workshop__/custom.tsx

@@ -3,11 +3,12 @@ import {WORKSHOP_BUTTON_TONE_OPTIONS} from '../../../__workshop__/constants'
 
 export default function CustomStory() {
   const tones = Object.entries(WORKSHOP_BUTTON_TONE_OPTIONS)
+  const len = tones.length
 
   return (
-    <Flex align="center" height="fill" justify="center">
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
       <Stack space={2}>
-        <Grid columns={5} gap={1}>
+        <Grid columns={len} gap={1}>
           {tones.map(([title, tone]) => (
             <Button key={tone} mode="ghost" padding={3} tone={tone}>
               <Stack space={2}>
@@ -24,7 +25,7 @@ export default function CustomStory() {
             </Button>
           ))}
         </Grid>
-        <Grid columns={5} gap={1}>
+        <Grid columns={len} gap={1}>
           {tones.map(([title, tone]) => (
             <Button key={tone} mode="default" padding={3} tone={tone}>
               <Stack space={2}>

package/src/core/primitives/button/__workshop__/props.tsx

@@ -13,7 +13,7 @@ import {
 
 export default function ButtonStory() {
   const disabled = useBoolean('Disabled', false, 'Props')
-  const fontSize = useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 1, 'Props')
+  const fontSize = useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
   const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'add-circle', 'Props')
   const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS, '', 'Props')
   const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'center', 'Props')

package/src/core/primitives/button/button.tsx

@@ -1,4 +1,4 @@
-import {forwardRef, isValidElement, useMemo} from 'react'
+import {forwardRef, isValidElement, useMemo, type JSX} from 'react'
 import {isValidElementType} from 'react-is'
 import {styled} from 'styled-components'
 import {useArrayProp} from '../../hooks'
@@ -9,7 +9,7 @@ import {ButtonMode, ButtonTextAlign, ButtonTone, ButtonWidth, FlexJustify} from
 import {Box} from '../box'
 import {Flex} from '../flex'
 import {Spinner} from '../spinner'
-import {Text, TextProps} from '../text'
+import {Text} from '../text'
 import {ResponsivePaddingProps, ResponsiveRadiusProps} from '../types'
 import {buttonBaseStyles, buttonColorStyles} from './styles'
 
@@ -32,8 +32,6 @@ export interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusPro
   textAlign?: ButtonTextAlign
   muted?: boolean
   text?: React.ReactNode
-  textOverflow?: TextProps['textOverflow']
-  textWeight?: TextProps['weight']
   tone?: ButtonTone
   type?: 'button' | 'reset' | 'submit'
   width?: ButtonWidth
@@ -87,8 +85,6 @@ export const Button = forwardRef(function Button(
     space: spaceProp = 3,
     text,
     textAlign,
-    textOverflow = 'ellipsis',
-    textWeight,
     tone = 'default',
     type = 'button',
     muted = false,
@@ -146,21 +142,20 @@ export const Button = forwardRef(function Button(
         <Box as="span" {...boxProps}>
           <Flex as="span" justify={justify} gap={space}>
             {IconComponent && (
-              <Text as="span" size={fontSize} style={{flex: 'none'}}>
+              <Text size={fontSize}>
                 {isValidElement(IconComponent) && IconComponent}
                 {isValidElementType(IconComponent) && <IconComponent />}
               </Text>
             )}
 
             {text && (
-              <Box as="span">
+              <Box>
                 <Text
-                  as="span"
                   muted={muted}
                   align={textAlign}
                   size={fontSize}
-                  textOverflow={textOverflow}
-                  weight={textWeight ?? button.textWeight}
+                  textOverflow="ellipsis"
+                  weight={button.textWeight}
                 >
                   {text}
                 </Text>
@@ -168,7 +163,7 @@ export const Button = forwardRef(function Button(
             )}
 
             {IconRightComponent && (
-              <Text as="span" size={fontSize} style={{flex: 'none'}}>
+              <Text size={fontSize}>
                 {isValidElement(IconRightComponent) && IconRightComponent}
                 {isValidElementType(IconRightComponent) && <IconRightComponent />}
               </Text>

package/src/core/primitives/button/styles.ts

@@ -29,8 +29,8 @@ export function buttonBaseStyles(
     border: 0;
     box-sizing: border-box;
     padding: 0;
-    overflow: hidden;
     margin: 0;
+    white-space: nowrap;
     text-align: left;
     position: relative;
     vertical-align: top;

package/src/core/primitives/card/__workshop__/allTones.tsx

@@ -1,23 +1,21 @@
 import {Card, Container, Flex, Stack, Text} from '@sanity/ui'
-import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
+import {THEME_COLOR_CARD_TONES} from '@sanity/ui/theme'
 
 export default function AllTonesStory() {
-  const tones = Object.entries(WORKSHOP_CARD_TONE_OPTIONS)
-
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Container width={0}>
-        <Stack space={5}>
-          {tones.map(([title, tone]) => (
+        <Stack space={3}>
+          {THEME_COLOR_CARD_TONES.map((tone) => (
             <Card
               key={tone}
-              padding={4}
+              padding={3}
               radius={2}
-              shadow={4}
+              shadow={2}
               style={{textAlign: 'center'}}
               tone={tone}
             >
-              <Text>{title}</Text>
+              <Text size={1}>{tone}</Text>
             </Card>
           ))}
         </Stack>