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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.0-alpha.20",
+  "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/__workshop__/customPortal.tsx

@@ -0,0 +1,99 @@
+import {
+  BoundaryElementProvider,
+  Button,
+  Card,
+  Flex,
+  Portal,
+  PortalProvider,
+  Stack,
+  Text,
+  Tooltip,
+} from '@sanity/ui'
+import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+import {useState} from 'react'
+import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../__workshop__/constants'
+
+const PORTAL_OPTIONS = {
+  '(true)': true,
+  '(false)': false,
+  portal1: 'portal1',
+}
+
+export default function CustomPortalStory() {
+  const content = useText(
+    'Content',
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis consectetur malesuada. Sed lobortis est dolor, eget imperdiet velit placerat et. Aenean posuere mi non aliquet iaculis. Donec fermentum pulvinar purus at sagittis. Ut tincidunt massa odio, sed finibus justo ullamcorper id. Nam venenatis justo non ligula elementum cursus. Pellentesque laoreet justo in mollis sagittis. In lacinia ornare ultrices. Suspendisse potenti.',
+  )
+  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
+  const portal = useSelect('Portal', PORTAL_OPTIONS, undefined, 'Props')
+  const useBoundaryElement = useBoolean('Use boundary element', true)
+
+  const [portal1Element, setPortal1Element] = useState<HTMLDivElement | null>(null)
+  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
+
+  return (
+    <PortalProvider
+      __unstable_elements={{
+        portal1: portal1Element,
+      }}
+    >
+      <Flex align="center" height="fill" justify="center">
+        <BoundaryElementProvider element={useBoundaryElement ? boundaryElement : null}>
+          <Card
+            border
+            padding={4}
+            ref={setBoundaryElement}
+            style={{
+              height: 'calc(100vh - 100px)',
+              position: 'relative',
+              width: '500px',
+            }}
+          >
+            <Text>Boundary element</Text>
+            <Flex align="center" height="fill" justify="center">
+              <Flex justify="center">
+                <Stack space={2}>
+                  <Tooltip
+                    boundaryElement={useBoundaryElement ? boundaryElement : null}
+                    content={<Text size={1}>{content}</Text>}
+                    padding={2}
+                    placement={placement}
+                    portal={portal}
+                  >
+                    <Button mode="bleed" text="Tooltip" />
+                  </Tooltip>
+                </Stack>
+              </Flex>
+            </Flex>
+          </Card>
+        </BoundaryElementProvider>
+      </Flex>
+
+      <Card
+        border
+        margin={4}
+        padding={4}
+        ref={setPortal1Element}
+        style={{
+          left: 0,
+          position: 'absolute',
+          top: 0,
+          width: '175px',
+        }}
+        tone="critical"
+      />
+
+      <Portal __unstable_name="portal1">
+        <Stack space={4}>
+          <Text size={1} weight="medium">
+            Portal 1 content
+          </Text>
+          <Text size={1}>
+            The tooltip's max-width should not exceed this container's width (minus padding) if it's
+            set to use this portal
+          </Text>
+        </Stack>
+      </Portal>
+    </PortalProvider>
+  )
+}

package/src/primitives/tooltip/__workshop__/index.ts

@@ -10,5 +10,20 @@ export default defineScope({
       title: 'Props',
       component: lazy(() => import('./props')),
     },
+    {
+      name: 'resizableBoundary',
+      title: 'Resizable Boundary',
+      component: lazy(() => import('./resizableBoundary')),
+    },
+    {
+      name: 'overflowBoundary',
+      title: 'Overflowing Boundary',
+      component: lazy(() => import('./overflowingBoundary')),
+    },
+    {
+      name: 'customPortalStory',
+      title: 'Custom Portal',
+      component: lazy(() => import('./customPortal')),
+    },
   ],
 })

package/src/primitives/tooltip/__workshop__/overflowingBoundary.tsx

@@ -0,0 +1,73 @@
+import {BoundaryElementProvider, Button, Card, Code, Flex, Stack, Text, Tooltip} from '@sanity/ui'
+import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+import {useCallback, useState} from 'react'
+import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../__workshop__/constants'
+
+export default function OverflowingBoundaryStory() {
+  const content = useText(
+    'Content',
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis consectetur malesuada. Sed lobortis est dolor, eget imperdiet velit placerat et. Aenean posuere mi non aliquet iaculis. Donec fermentum pulvinar purus at sagittis. Ut tincidunt massa odio, sed finibus justo ullamcorper id. Nam venenatis justo non ligula elementum cursus. Pellentesque laoreet justo in mollis sagittis. In lacinia ornare ultrices. Suspendisse potenti.',
+  )
+  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
+  const portal = useBoolean('Portal', false)
+  const useBoundaryElement = useBoolean('Use boundary element', true)
+
+  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
+  const [buttonsVisible, setButtonsVisible] = useState(true)
+
+  const handleHideButtons = useCallback(() => {
+    setButtonsVisible(false)
+  }, [])
+
+  const handleShowButtons = useCallback(() => {
+    setButtonsVisible(true)
+  }, [])
+
+  return (
+    <Flex align="center" height="fill" justify="center" style={{height: '200vh'}}>
+      <BoundaryElementProvider element={useBoundaryElement ? boundaryElement : null}>
+        <Card
+          border
+          ref={setBoundaryElement}
+          style={{
+            height: 'calc(100vh - 100px)',
+            overflow: 'hidden',
+            position: 'relative',
+            resize: 'both',
+            width: '500px',
+          }}
+        >
+          <Flex align="center" height="fill" justify="center">
+            <Flex justify="center">
+              <Stack space={2}>
+                <Code size={1}>Placement: {placement}</Code>
+                <Button
+                  disabled={buttonsVisible}
+                  fontSize={1}
+                  onClick={handleShowButtons}
+                  text="Show buttons"
+                />
+              </Stack>
+            </Flex>
+          </Flex>
+
+          {buttonsVisible && (
+            <Tooltip
+              content={<Text size={1}>{content}</Text>}
+              padding={2}
+              placement={placement}
+              portal={portal}
+            >
+              <Button
+                mode="bleed"
+                onClick={handleHideButtons}
+                style={{position: 'absolute', top: 10, right: 10}}
+                text="Tooltip"
+              />
+            </Tooltip>
+          )}
+        </Card>
+      </BoundaryElementProvider>
+    </Flex>
+  )
+}

package/src/primitives/tooltip/__workshop__/resizableBoundary.tsx

@@ -0,0 +1,85 @@
+import {BoundaryElementProvider, Button, Card, Code, Flex, Text, Tooltip} from '@sanity/ui'
+import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+import {useState} from 'react'
+import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../__workshop__/constants'
+
+export default function ResizableBoundaryStory() {
+  const content = useText(
+    'Content',
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis consectetur malesuada. Sed lobortis est dolor, eget imperdiet velit placerat et. Aenean posuere mi non aliquet iaculis. Donec fermentum pulvinar purus at sagittis. Ut tincidunt massa odio, sed finibus justo ullamcorper id. Nam venenatis justo non ligula elementum cursus. Pellentesque laoreet justo in mollis sagittis. In lacinia ornare ultrices. Suspendisse potenti.',
+  )
+  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'right')
+  const portal = useBoolean('Portal', true)
+  const useBoundaryElement = useBoolean('Use boundary element', true)
+
+  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
+
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <BoundaryElementProvider element={useBoundaryElement ? boundaryElement : null}>
+        <Card
+          border
+          ref={setBoundaryElement}
+          style={{
+            height: 'calc(100vh - 100px)',
+            overflow: 'hidden',
+            position: 'relative',
+            resize: 'both',
+            width: '500px',
+          }}
+        >
+          <Flex align="center" height="fill" justify="center">
+            <Flex justify="center">
+              <Code size={1}>Placement: {placement}</Code>
+            </Flex>
+          </Flex>
+
+          <Tooltip
+            content={<Text size={1}>{content}</Text>}
+            padding={2}
+            placement={placement}
+            portal={portal}
+          >
+            <Button mode="bleed" style={{position: 'absolute', top: 10, left: 10}} text="Tooltip" />
+          </Tooltip>
+          <Tooltip
+            content={<Text size={1}>{content}</Text>}
+            padding={2}
+            placement={placement}
+            portal={portal}
+          >
+            <Button
+              mode="bleed"
+              style={{position: 'absolute', top: 10, right: 10}}
+              text="Tooltip"
+            />
+          </Tooltip>
+          <Tooltip
+            content={<Text size={1}>{content}</Text>}
+            padding={2}
+            placement={placement}
+            portal={portal}
+          >
+            <Button
+              mode="bleed"
+              style={{position: 'absolute', bottom: 10, left: 10}}
+              text="Tooltip"
+            />
+          </Tooltip>
+          <Tooltip
+            content={<Text size={1}>{content}</Text>}
+            padding={2}
+            placement={placement}
+            portal={portal}
+          >
+            <Button
+              mode="bleed"
+              style={{position: 'absolute', bottom: 10, right: 10}}
+              text="Tooltip"
+            />
+          </Tooltip>
+        </Card>
+      </BoundaryElementProvider>
+    </Flex>
+  )
+}

package/src/primitives/tooltip/constants.ts

@@ -1,5 +1,7 @@
 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'],
   'top-start': ['bottom-start', 'left-start', 'right-start'],

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

@@ -6,6 +6,17 @@ import {render} from '../../../test'
 import {Text, Button} from '../../primitives'
 import {Tooltip, TooltipDelayGroupProvider} from '../tooltip'
 
+// Fake timers using Jest
+beforeEach(() => {
+  jest.useFakeTimers()
+})
+
+// Running all pending timers and switching to real timers using Jest
+afterEach(() => {
+  jest.runOnlyPendingTimers()
+  jest.useRealTimers()
+})
+
 describe('Tooltip', () => {
   describe('Using same delay for open and close', () => {
     it('should hide and show the tooltip content when hovered, with no delay', () => {
@@ -275,6 +286,7 @@ describe('Tooltip', () => {
       jest.clearAllMocks()
     })
   })
+
   describe('Closing the <Tooltip /> with the Escape key', () => {
     it('Standalone tooltip closes immediately with Escape key', () => {
       const delay = 150
@@ -342,4 +354,117 @@ describe('Tooltip', () => {
       expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
     })
   })
+
+  describe('Clicking the <Tooltip /> child should close the tooltip', () => {
+    it('Should close the tooltip when clicked', () => {
+      const delay = 150
+
+      render(
+        <Tooltip content={<Text size={1}>{'Tooltip content'}</Text>} delay={delay}>
+          <Button mode="bleed" text="Hover me" />
+        </Tooltip>,
+      )
+
+      const button = screen.getByText('Hover me')
+
+      // Assertion: tooltip does not exist in the document
+      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+      fireEvent.focus(button)
+
+      act(() => jest.advanceTimersByTime(delay))
+
+      // Assertion: the tooltip is not visible
+      expect(screen.queryByText('Tooltip content')).toBeVisible()
+
+      act(() => fireEvent.click(button))
+
+      // Assertion: tooltip does not exist in the document
+      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+    })
+
+    it('Should close the tooltip when the context menu is opened (right click)', () => {
+      const delay = 150
+
+      render(
+        <Tooltip content={<Text size={1}>{'Tooltip content'}</Text>} delay={delay}>
+          <Button mode="bleed" text="Hover me" />
+        </Tooltip>,
+      )
+
+      const button = screen.getByText('Hover me')
+
+      // Assertion: tooltip does not exist in the document
+      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+      fireEvent.focus(button)
+
+      act(() => jest.advanceTimersByTime(delay))
+
+      // Assertion: the tooltip is not visible
+      expect(screen.queryByText('Tooltip content')).toBeVisible()
+
+      act(() => fireEvent.contextMenu(button))
+
+      // Assertion: tooltip does not exist in the document
+      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Used defined events on <Tooltip /> child should fire correctly', () => {
+    const handleBlur = jest.fn()
+    const handleClick = jest.fn()
+    const handleContextMenu = jest.fn()
+    const handleFocus = jest.fn()
+    const handleMouseEnter = jest.fn()
+    const handleMouseLeave = jest.fn()
+
+    beforeEach(() => {
+      render(
+        <Tooltip content={<Text size={1}>{'Tooltip content'}</Text>}>
+          <Button
+            data-testid="btn"
+            mode="bleed"
+            onBlur={handleBlur}
+            onClick={handleClick}
+            onContextMenu={handleContextMenu}
+            onFocus={handleFocus}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+            text="Hover me"
+          />
+        </Tooltip>,
+      )
+    })
+
+    afterEach(() => jest.clearAllMocks())
+
+    it('should fire the onBlur event', () => {
+      fireEvent.blur(screen.getByTestId('btn'))
+      expect(handleBlur).toHaveBeenCalledTimes(1)
+    })
+
+    it('should fire the onClick event', () => {
+      fireEvent.click(screen.getByTestId('btn'))
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+
+    it('should fire the onContextMenu event', () => {
+      fireEvent.contextMenu(screen.getByTestId('btn'))
+      expect(handleContextMenu).toHaveBeenCalledTimes(1)
+    })
+
+    it('should fire the onFocus event', () => {
+      fireEvent.focus(screen.getByTestId('btn'))
+      expect(handleFocus).toHaveBeenCalledTimes(1)
+    })
+
+    it('should fire the onMouseEnter event', () => {
+      fireEvent.mouseEnter(screen.getByTestId('btn'))
+      expect(handleMouseEnter).toHaveBeenCalledTimes(1)
+    })
+
+    it('should fire the onMouseLeave event', () => {
+      fireEvent.mouseLeave(screen.getByTestId('btn'))
+      expect(handleMouseLeave).toHaveBeenCalledTimes(1)
+    })
+  })
 })