@sanity/ui 2.0.0-alpha.17 → 2.0.0-alpha.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.0-alpha.17",
+  "version": "2.0.0-alpha.19",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./src/index.ts",
@@ -44,8 +44,8 @@
     "test": "jest",
     "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
     "watch": "pkg watch --strict",
-    "workshop:build": "node -r esbuild-register -r tsconfig-paths/register scripts/build",
-    "workshop:dev": "node -r esbuild-register -r tsconfig-paths/register scripts/dev",
+    "workshop:build": "workshop build",
+    "workshop:dev": "workshop dev",
     "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
@@ -68,7 +68,7 @@
     "@juggle/resize-observer": "^3.4.0",
     "@sanity/pkg-utils": "^2.4.8",
     "@sanity/semantic-release-preset": "^4.1.4",
-    "@sanity/ui-workshop": "^1.2.11",
+    "@sanity/ui-workshop": "^2.0.0",
     "@storybook/addon-a11y": "^7.4.5",
     "@storybook/addon-docs": "^7.4.5",
     "@storybook/addon-essentials": "^7.4.5",
@@ -100,8 +100,6 @@
     "cypress": "^13.1.0",
     "cypress-real-events": "^1.10.1",
     "cz-conventional-changelog": "^3.3.0",
-    "esbuild": "^0.19.2",
-    "esbuild-register": "^3.4.2",
     "eslint": "^8.48.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-import": "^2.28.1",

package/src/primitives/avatar/avatar.tsx

@@ -15,6 +15,8 @@ export interface AvatarProps {
   arrowPosition?: AvatarPosition
   as?: React.ElementType | keyof JSX.IntrinsicElements
   color?: ThemeColorSpotKey
+  /** @beta */
+  hideInnerStroke?: boolean
   initials?: string
   onImageLoadError?: (event: Error) => void
   size?: AvatarSize | AvatarSize[]
@@ -58,6 +60,7 @@ export const Avatar = forwardRef(function Avatar(
     onImageLoadError,
     arrowPosition: arrowPositionProp,
     animateArrowFrom,
+    hideInnerStroke,
     status = 'online',
     size: sizeProp = 0,
     ...restProps
@@ -142,13 +145,15 @@ export const Avatar = forwardRef(function Avatar(
           </defs>
 
           <circle cx={_radius} cy={_radius} r={_radius} fill={`url(#${imageId})`} />
-          <BgStroke
-            cx={_radius}
-            cy={_radius}
-            rx={_radius}
-            ry={_radius}
-            vectorEffect="non-scaling-stroke"
-          />
+          {!hideInnerStroke && (
+            <BgStroke
+              cx={_radius}
+              cy={_radius}
+              rx={_radius}
+              ry={_radius}
+              vectorEffect="non-scaling-stroke"
+            />
+          )}
           <Stroke
             cx={_radius}
             cy={_radius}
@@ -163,8 +168,8 @@ export const Avatar = forwardRef(function Avatar(
       {(imageFailed || !src) && initials && (
         <>
           <Initials>
-            <Text as="span" size={initialsSize}>
-              <strong>{initials}</strong>
+            <Text as="span" size={initialsSize} weight="medium">
+              {initials}
             </Text>
           </Initials>
         </>

package/src/primitives/avatar/avatarCounter.tsx

@@ -36,7 +36,7 @@ function _avatarCounterBaseStyle(props: ThemeProps) {
     background: var(--card-bg-color);
     box-shadow:
       0 0 0 1px var(--card-bg-color),
-      inset 0 0 0 1.5px var(--card-hairline-hard-color);
+      inset 0 0 0 1px var(--card-hairline-hard-color);
     padding: 0 ${rem(theme.sanity.space[2])};
 
     &:not([hidden]) {
@@ -73,8 +73,8 @@ export const AvatarCounter = forwardRef(function AvatarCounter(
 
   return (
     <Root $size={size} data-ui="AvatarCounter" ref={ref}>
-      <Text as="span" size={counterSize}>
-        <strong>{count}</strong>
+      <Text as="span" size={counterSize} weight="medium">
+        {count}
       </Text>
     </Root>
   )

package/src/primitives/avatar/styles.ts

@@ -152,7 +152,7 @@ function avatarBgStrokeStyle(): CSSObject {
 
 function avatarStrokeStyle(): CSSObject {
   return {
-    strokeWidth: '3px',
+    strokeWidth: '2px',
 
     '[data-status="editing"] &': {
       strokeDasharray: '2 4',

package/src/primitives/button/__workshop__/sanityUploadButton.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 
 const SanityUploadButton = styled(Button).attrs({forwardedAs: 'label'})`
   & input {
-    -webkit-appearance: none;
+    appearance: none;
     overflow: hidden;
     overflow: clip;
     top: 0;
@@ -14,6 +14,7 @@ const SanityUploadButton = styled(Button).attrs({forwardedAs: 'label'})`
     opacity: 0;
     position: absolute;
     max-width: 0;
+    width: -webkit-fill-available;
     width: stretch;
   }
 

package/src/primitives/textInput/textInput.tsx

@@ -70,6 +70,10 @@ export interface TextInputProps {
   suffix?: React.ReactNode
   type?: TextInputType
   weight?: ThemeFontWeightKey
+  /**
+   * @beta
+   */
+  unstableDisableFocusRing?: boolean
 }
 
 const CLEAR_BUTTON_BOX_STYLE: React.CSSProperties = {zIndex: 2}
@@ -165,6 +169,7 @@ export const TextInput = forwardRef(function TextInput(
     customValidity,
     type = 'text',
     weight,
+    unstableDisableFocusRing,
     ...restProps
   } = props
 
@@ -221,6 +226,7 @@ export const TextInput = forwardRef(function TextInput(
     () => (
       <Presentation
         $hasPrefix={$hasPrefix}
+        $unstableDisableFocusRing={unstableDisableFocusRing}
         $hasSuffix={$hasSuffix}
         $radius={radius}
         $scheme={rootTheme.scheme}
@@ -259,6 +265,7 @@ export const TextInput = forwardRef(function TextInput(
       $hasClearButton,
       $hasPrefix,
       $hasSuffix,
+      unstableDisableFocusRing,
     ],
   )
 

package/src/primitives/tooltip/tooltip.test.tsx

@@ -275,4 +275,71 @@ describe('Tooltip', () => {
       jest.clearAllMocks()
     })
   })
+  describe('Closing the <Tooltip /> with the Escape key', () => {
+    it('Standalone tooltip closes immediately with Escape key', () => {
+      const delay = 150
+
+      jest.useFakeTimers()
+
+      render(
+        <Tooltip
+          content={<Text size={1}>{'Tooltip content'}</Text>}
+          placement={'top'}
+          delay={delay}
+        >
+          <Button mode="bleed" text="Hover me" />
+        </Tooltip>,
+      )
+
+      const button = screen.getByText('Hover me')
+
+      // Validate tooltip content is not rendered
+      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+      fireEvent.focus(button)
+      act(() => jest.advanceTimersByTime(delay))
+
+      // Validate tooltip content is rendered
+      screen.getByText('Tooltip content')
+
+      act(() => {
+        fireEvent.keyDown(button, {key: 'Escape', code: 'Escape'})
+      })
+      // Validate tooltip content is not rendered anymore
+      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+    })
+    it('With <TooltipDelayGroupProvider />  closes immediately with Escape key', () => {
+      const delay = 150
+
+      jest.useFakeTimers()
+
+      render(
+        <TooltipDelayGroupProvider delay={{close: delay}}>
+          <Tooltip
+            content={<Text size={1}>{'Tooltip content'}</Text>}
+            placement={'top'}
+            delay={{close: delay}}
+          >
+            <Button mode="bleed" text="Hover me" />
+          </Tooltip>
+        </TooltipDelayGroupProvider>,
+      )
+
+      const button = screen.getByText('Hover me')
+
+      // Validate tooltip content is not rendered
+      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+      fireEvent.focus(button)
+
+      act(() => jest.advanceTimersByTime(delay))
+
+      // Validate tooltip content is rendered
+      screen.getByText('Tooltip content')
+
+      act(() => {
+        fireEvent.keyDown(button, {key: 'Escape', code: 'Escape'})
+      })
+      // Validate tooltip content is not rendered anymore
+      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+    })
+  })
 })

package/src/primitives/tooltip/tooltip.tsx

@@ -180,23 +180,27 @@ export const Tooltip = forwardRef(function Tooltip(
   const closeDelay = isInsideGroup ? delayGroupContext.closeDelay : closeDelayProp
 
   const handleIsOpenChange = useCallback(
-    (open: boolean) => {
+    (open: boolean, immediate?: boolean) => {
       if (isInsideGroup) {
         //  When it's inside a group, the open or close status will be handled by the group.
         if (open) {
-          delayGroupContext.setIsGroupActive(open, openDelay)
-          delayGroupContext.setOpenTooltipId(tooltipId, openDelay)
+          const groupedOpenDelay = immediate ? 0 : openDelay
+
+          delayGroupContext.setIsGroupActive(open, groupedOpenDelay)
+          delayGroupContext.setOpenTooltipId(tooltipId, groupedOpenDelay)
         } else {
           const minimumGroupDeactivateDelay = 200 // We should provide some delay to allow the user to reach the next tooltip.
           const groupDeactivateDelay =
             closeDelay > minimumGroupDeactivateDelay ? closeDelay : minimumGroupDeactivateDelay
 
           delayGroupContext.setIsGroupActive(open, groupDeactivateDelay)
-          delayGroupContext.setOpenTooltipId(null, closeDelay)
+          delayGroupContext.setOpenTooltipId(null, immediate ? 0 : closeDelay)
         }
       } else {
+        const standaloneDelay = immediate ? 0 : open ? openDelay : closeDelay
+
         // When it's not inside a group, the open or close status will be handled by the tooltip itself.
-        setIsOpen(open, open ? openDelay : closeDelay)
+        setIsOpen(open, standaloneDelay)
       }
     },
     [isInsideGroup, delayGroupContext, openDelay, tooltipId, closeDelay, setIsOpen],
@@ -246,6 +250,22 @@ export const Tooltip = forwardRef(function Tooltip(
   // Update reference
   useEffect(() => refs.setReference(referenceElement), [referenceElement, refs])
 
+  useEffect(() => {
+    // If the user clicks on escape key, close the tooltip.
+    if (!showTooltip) return
+
+    function handleWindowKeyDown(event: KeyboardEvent) {
+      if (event.key === 'Escape') {
+        handleIsOpenChange(false, true)
+      }
+    }
+
+    window.addEventListener('keydown', handleWindowKeyDown)
+
+    return () => {
+      window.removeEventListener('keydown', handleWindowKeyDown)
+    }
+  }, [handleIsOpenChange, showTooltip])
   const setArrow = useCallback(
     (arrowEl: HTMLDivElement | null) => {
       arrowRef.current = arrowEl

package/src/styles/input/textInputStyle.ts

@@ -24,6 +24,7 @@ export interface TextInputRepresentationStyleProps {
   $hasSuffix?: boolean
   $scheme: ThemeColorSchemeKey
   $tone: CardTone
+  $unstableDisableFocusRing?: boolean
 }
 
 const ROOT_STYLE = css`
@@ -129,7 +130,7 @@ export function textInputFontSizeStyle(props: TextInputInputStyleProps & ThemePr
 export function textInputRepresentationStyle(
   props: TextInputRepresentationStyleProps & ThemeProps,
 ): ReturnType<typeof css> {
-  const {$hasPrefix, $hasSuffix, $scheme, $tone, theme} = props
+  const {$hasPrefix, $hasSuffix, $scheme, $tone, $unstableDisableFocusRing, theme} = props
   const {input} = theme.sanity
   const {focusRing} = input.text
   const color = theme.sanity.color.input
@@ -182,14 +183,18 @@ export function textInputRepresentationStyle(
       /* focused */
       *:not(:disabled):focus + & {
         &[data-border] {
-          --input-box-shadow: ${focusRingStyle({
-            border: {color: color.default.enabled.border, width: input.border.width},
-            focusRing,
-          })};
+          --input-box-shadow: ${$unstableDisableFocusRing
+            ? undefined
+            : focusRingStyle({
+                border: {color: color.default.enabled.border, width: input.border.width},
+                focusRing,
+              })};
         }
 
         &:not([data-border]) {
-          --input-box-shadow: ${focusRingStyle({focusRing})};
+          --input-box-shadow: ${$unstableDisableFocusRing
+            ? undefined
+            : focusRingStyle({focusRing})};
         }
       }
 

package/src/theme/lib/theme/avatar.ts

@@ -5,7 +5,9 @@ import {FocusRing} from '../../types'
  */
 export interface ThemeAvatar {
   sizes: {
+    /** Distance between avatars in an <AvatarStack> component (px) */
     distance: number
+    /** Diameter (px) */
     size: number
   }[]
   focusRing: FocusRing

package/src/theme/studioTheme/theme.ts

@@ -8,11 +8,11 @@ import {fonts} from './fonts'
 export const studioTheme: RootTheme = {
   avatar: {
     sizes: [
-      {distance: -3, size: 25},
-      {distance: -6, size: 35},
-      {distance: -9, size: 55},
+      {distance: -3, size: 23},
+      {distance: -6, size: 33},
+      {distance: -9, size: 53},
     ],
-    focusRing: {offset: 1, width: 1},
+    focusRing: {offset: 0, width: 1},
   },
   button: {
     textWeight: 'medium',