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

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/button/button.tsx

@@ -5,7 +5,7 @@ import {useArrayProp} from '../../hooks'
 import {ThemeProps} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {useTheme} from '../../theme'
-import {ButtonMode, ButtonTextAlign, ButtonTone, FlexJustify} from '../../types'
+import {ButtonMode, ButtonTextAlign, ButtonTone, ButtonWidth, FlexJustify} from '../../types'
 import {Box} from '../box'
 import {Flex} from '../flex'
 import {Spinner} from '../spinner'
@@ -34,10 +34,12 @@ export interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusPro
   text?: React.ReactNode
   tone?: ButtonTone
   type?: 'button' | 'reset' | 'submit'
+  width?: ButtonWidth
 }
 
 const Root = styled.button<
-  {$mode: ButtonMode; $tone: ButtonTone} & ResponsiveRadiusStyleProps & ThemeProps
+  {$mode: ButtonMode; $tone: ButtonTone; $width?: ButtonWidth} & ResponsiveRadiusStyleProps &
+    ThemeProps
 >(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles)
 
 const LoadingBox = styled.div`
@@ -59,7 +61,7 @@ const LoadingBox = styled.div`
  * @public
  */
 export const Button = forwardRef(function Button(
-  props: ButtonProps & Omit<React.HTMLProps<HTMLButtonElement>, 'as'>,
+  props: ButtonProps & Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'width'>,
   ref: React.ForwardedRef<HTMLButtonElement>,
 ) {
   const {
@@ -86,6 +88,7 @@ export const Button = forwardRef(function Button(
     tone = 'default',
     type = 'button',
     muted = false,
+    width,
     ...restProps
   } = props
 
@@ -128,6 +131,7 @@ export const Button = forwardRef(function Button(
       disabled={Boolean(loading || disabled)}
       ref={ref}
       type={type}
+      $width={width}
     >
       {Boolean(loading) && (
         <LoadingBox>

package/src/primitives/button/styles.ts

@@ -2,13 +2,13 @@ import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
 import {_colorVarsStyle} from '../../styles/colorVars'
 import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
-import {ButtonMode, ButtonTone} from '../../types'
+import {ButtonMode, ButtonTone, ButtonWidth} from '../../types'
 import {CSSObject} from '../../types/styled'
 
 /**
  * @internal
  */
-export function buttonBaseStyles(): ReturnType<typeof css> {
+export function buttonBaseStyles({$width}: {$width?: ButtonWidth}): ReturnType<typeof css> {
   return css`
     -webkit-font-smoothing: inherit;
     appearance: none;
@@ -27,6 +27,13 @@ export function buttonBaseStyles(): ReturnType<typeof css> {
     text-align: left;
     position: relative;
 
+    ${$width === 'fill' &&
+    css`
+      width: -moz-available;
+      width: -webkit-fill-available;
+      width: stretch;
+    `}
+
     & > span {
       display: block;
       flex: 1;

package/src/primitives/card/card.tsx

@@ -48,6 +48,9 @@ const Root = styled(Box)<
 >(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle)
 
 /**
+ * The `Card` component acts much like a `Box`, but with a background and foreground color.
+ * Components within a `Card` inherit its colors.
+ *
  * @public
  */
 export const Card = forwardRef(function Card(
@@ -76,6 +79,7 @@ export const Card = forwardRef(function Card(
   const rootTheme = useRootTheme()
   const tone = toneProp === 'inherit' ? rootTheme.tone : toneProp
 
+  // TODO: Consider adding the wrapper approach for nested cards in which the tones are not changing, avoid unnecessary ThemeColorProvider
   return (
     <ThemeColorProvider scheme={scheme} tone={tone}>
       <Root

package/src/primitives/card/styles.ts

@@ -29,6 +29,8 @@ export function cardBaseStyle(props: CardStyleProps & ThemeProps): ReturnType<ty
       font: inherit;
       text-align: inherit;
       border: 0;
+      width: -moz-available;
+      width: -webkit-fill-available;
       width: stretch;
     }
 

package/src/primitives/checkbox/checkbox.tsx

@@ -16,6 +16,8 @@ const Root = styled.div(checkboxBaseStyles)
 const Input = styled.input(inputElementStyles)
 
 /**
+ * Checkboxes allow the user to select one or more items from a set.
+ *
  * @public
  */
 export const Checkbox = forwardRef(function Checkbox(

package/src/primitives/code/code.tsx

@@ -11,6 +11,7 @@ import {codeBaseStyle} from './styles'
  */
 export interface CodeProps {
   as?: React.ElementType | keyof JSX.IntrinsicElements
+  /** Define the language to use for syntax highlighting. */
   language?: string
   size?: number | number[]
   weight?: string

package/src/primitives/container/container.tsx

@@ -17,6 +17,8 @@ const Root = styled(Box)<ResponsiveWidthStyleProps>(
 )
 
 /**
+ * The `Container` component wraps content layout in a defined set of widths.
+ *
  * @public
  */
 export const Container = forwardRef(function Container(

package/src/primitives/flex/flex.tsx

@@ -26,6 +26,8 @@ const Root = styled(Box)<FlexItemStyleProps & ResponsiveFlexStyleProps>(
 )
 
 /**
+ * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
+ *
  * @public
  */
 export const Flex = forwardRef(function Flex(

package/src/primitives/grid/grid.tsx

@@ -13,6 +13,8 @@ export interface GridProps extends Omit<BoxProps, 'display'>, ResponsiveGridProp
 const Root = styled(Box)<ResponsiveGridStyleProps>(responsiveGridStyle)
 
 /**
+ * The `Grid` component is for building 2-dimensional layers (based on CSS grid).
+ *
  * @public
  */
 export const Grid = forwardRef(function Grid(

package/src/primitives/heading/heading.tsx

@@ -43,6 +43,8 @@ const SpanWithTextOverflow = styled.span`
 `
 
 /**
+ * Typographic headings.
+ *
  * @public
  */
 export const Heading = forwardRef(function Heading(

package/src/primitives/inline/inline.tsx

@@ -10,12 +10,15 @@ import {ResponsiveInlineSpaceStyleProps} from './types'
  * @public
  */
 export interface InlineProps extends Omit<BoxProps, 'display'> {
+  /** The spacing between children. */
   space?: number | number[]
 }
 
 const Root = styled(Box)<ResponsiveInlineSpaceStyleProps>(inlineBaseStyle, inlineSpaceStyle)
 
 /**
+ * The `Inline` component is a layout utility for aligning and spacing items horizontally.
+ *
  * @public
  */
 export const Inline = forwardRef(function Inline(

package/src/primitives/kbd/kbd.tsx

@@ -30,6 +30,8 @@ function kbdStyle() {
 const Root = styled.kbd<ResponsiveRadiusStyleProps>(responsiveRadiusStyle, kbdStyle)
 
 /**
+ * Used to define some text as keyboard input.
+ *
  * @public
  */
 export const KBD = forwardRef(function KBD(

package/src/primitives/label/label.tsx

@@ -40,6 +40,8 @@ const SpanWithTextOverflow = styled.span`
 `
 
 /**
+ * Typographic labels.
+ *
  * @public
  */
 export const Label = forwardRef(function Label(

package/src/primitives/popover/popover.tsx

@@ -59,6 +59,7 @@ export interface PopoverProps
   overflow?: BoxOverflow
   padding?: number | number[]
   placement?: Placement
+  /** Whether or not to render the popover in a portal element. */
   portal?: boolean | string
   preventOverflow?: boolean
   referenceBoundary?: HTMLElement | null
@@ -72,7 +73,11 @@ export interface PopoverProps
   width?: PopoverWidth | PopoverWidth[]
 }
 
-/** @public */
+/**
+ * The `Popover` component is used to display some content on top of another.
+ *
+ * @public
+ */
 export const Popover = memo(
   forwardRef(function Popover(
     props: PopoverProps &

package/src/primitives/radio/radio.tsx

@@ -14,6 +14,8 @@ const Root = styled.div(radioBaseStyle)
 const Input = styled.input(inputElementStyle)
 
 /**
+ * The `Radio` component allows the user to select one option from a set.
+ *
  * @public
  */
 export const Radio = forwardRef(function Radio(

package/src/primitives/select/select.tsx

@@ -30,6 +30,8 @@ const Input = styled.select<{
 const IconBox = styled(Box)(selectStyle.iconBox)
 
 /**
+ * The `Select` component provides control of options.
+ *
  * @public
  */
 export const Select = forwardRef(function Select(

package/src/primitives/select/styles.ts

@@ -13,6 +13,8 @@ import {CSSObject} from '../../types/styled'
 function rootStyle(): ReturnType<typeof css> {
   return css`
     position: relative;
+    width: -moz-available;
+    width: -webkit-fill-available;
     width: stretch;
 
     &:not([hidden]) {

package/src/primitives/spinner/spinner.tsx

@@ -28,6 +28,8 @@ const Root = styled(Text)`
 `
 
 /**
+ * Indicate that something is loading for an indeterminate amount of time.
+ *
  * @public
  */
 export const Spinner = forwardRef(function Spinner(

package/src/primitives/stack/stack.tsx

@@ -15,6 +15,8 @@ export interface StackProps extends BoxProps {
 const Root = styled(Box)<ResponsiveStackSpaceStyleProps>(stackBaseStyle, responsiveStackSpaceStyle)
 
 /**
+ * The `Stack` component is used to place elements on top of each other.
+ *
  * @public
  */
 export const Stack = forwardRef(function Stack(

package/src/primitives/switch/switch.tsx

@@ -23,6 +23,10 @@ const Track = styled.span(switchTrackStyles)
 const Thumb = styled.span<{$checked?: boolean; $indeterminate?: boolean}>(switchThumbStyles)
 
 /**
+ * The `Switch` component allows the user to toggle a setting on and off.
+ *
+ * Extends all properties of an `<input type="checkbox" />` element, except type.
+ *
  * @public
  */
 export const Switch = forwardRef(function Switch(

package/src/primitives/text/text.tsx

@@ -17,6 +17,7 @@ export interface TextProps {
   accent?: boolean
   align?: TextAlign | TextAlign[]
   as?: React.ElementType | keyof JSX.IntrinsicElements
+  /** When `true` the text color will be muted. */
   muted?: boolean
   size?: number | number[]
   /**
@@ -43,6 +44,8 @@ const SpanWithTextOverflow = styled.span`
 `
 
 /**
+ * The `Text` component is an agile, themed typographic element.
+ *
  * @public
  */
 export const Text = forwardRef(function Text(

package/src/primitives/textArea/textArea.tsx

@@ -48,6 +48,9 @@ const Presentation = styled.div<ResponsiveRadiusStyleProps & TextInputRepresenta
 )
 
 /**
+ * A multiline text input.
+ *
+
  * @public
  */
 export const TextArea = forwardRef(function TextArea(
@@ -60,7 +63,7 @@ export const TextArea = forwardRef(function TextArea(
     disabled = false,
     fontSize = 2,
     padding = 3,
-    radius = 1,
+    radius = 2,
     weight,
     ...restProps
   } = props

package/src/primitives/textInput/textInput.tsx

@@ -50,6 +50,10 @@ export type TextInputType =
  * @public
  */
 export interface TextInputProps {
+  /**
+   * @beta
+   */
+  __unstable_disableFocusRing?: boolean
   border?: boolean
   /**
    * @beta
@@ -140,6 +144,8 @@ const TextInputClearButton = styled(Button)({
 })
 
 /**
+ * Single line text input.
+ *
  * @public
  */
 export const TextInput = forwardRef(function TextInput(
@@ -147,6 +153,7 @@ export const TextInput = forwardRef(function TextInput(
   forwardedRef: React.Ref<HTMLInputElement>,
 ) {
   const {
+    __unstable_disableFocusRing,
     border = true,
     clearButton,
     disabled = false,
@@ -156,7 +163,7 @@ export const TextInput = forwardRef(function TextInput(
     onClear,
     padding: paddingProp = 3,
     prefix,
-    radius: radiusProp = 1,
+    radius: radiusProp = 2,
     readOnly,
     space: spaceProp = 3,
     suffix,
@@ -219,6 +226,7 @@ export const TextInput = forwardRef(function TextInput(
     () => (
       <Presentation
         $hasPrefix={$hasPrefix}
+        $unstableDisableFocusRing={__unstable_disableFocusRing}
         $hasSuffix={$hasSuffix}
         $radius={radius}
         $scheme={rootTheme.scheme}
@@ -247,6 +255,7 @@ export const TextInput = forwardRef(function TextInput(
       </Presentation>
     ),
     [
+      __unstable_disableFocusRing,
       border,
       fontSize,
       icon,

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>
+  )
+}