@sanity/ui 3.0.0-static.1 → 3.0.0-static.2

package/src/core/primitives/grid/grid.tsx

@@ -1,9 +1,12 @@
-import {forwardRef} from 'react'
+import {ForwardedRef, forwardRef} from 'react'
+
+import {Props} from '../../types'
 import {Box, BoxProps} from '../box'
 
 /**
  * @public
  */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface GridProps extends Omit<BoxProps, 'display'> {}
 
 /**
@@ -12,20 +15,13 @@ export interface GridProps extends Omit<BoxProps, 'display'> {}
  * @public
  */
 export const Grid = forwardRef(function Grid(
-  props: GridProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'rows'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
+  props: Props<GridProps, 'div'>,
+  ref: ForwardedRef<HTMLDivElement>,
 ) {
   const {as, children, ...restProps} = props
 
   return (
-    <Box
-      data-as={typeof as === 'string' ? as : undefined}
-      data-ui="Grid"
-      {...restProps}
-      display="grid"
-      forwardedAs={as}
-      ref={ref}
-    >
+    <Box data-ui="Grid" {...restProps} as={as} display="grid" ref={ref}>
       {children}
     </Box>
   )

package/src/core/primitives/heading/__workshop__/opticalAlignment.tsx

@@ -6,55 +6,43 @@ export default function OpticalAlignment() {
     <Box padding={[4, 5, 6]}>
       <Stack space={1}>
         <Flex>
-          <Card padding={0} scheme="dark">
-            <Heading accent size={5}>
-              Hamburgefonstiv M
-            </Heading>
+          <Card padding={0} tone="neutral">
+            <Heading size={5}>Hamburgefonstiv M</Heading>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
-            <Heading accent size={4}>
-              Hamburgefonstiv M
-            </Heading>
+          <Card padding={0} tone="neutral">
+            <Heading size={4}>Hamburgefonstiv M</Heading>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
-            <Heading accent size={3}>
-              Hamburgefonstiv M
-            </Heading>
+          <Card padding={0} tone="neutral">
+            <Heading size={3}>Hamburgefonstiv M</Heading>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
-            <Heading accent size={2}>
-              Hamburgefonstiv M
-            </Heading>
+          <Card padding={0} tone="neutral">
+            <Heading size={2}>Hamburgefonstiv M</Heading>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
-            <Heading accent size={1}>
-              Hamburgefonstiv M
-            </Heading>
+          <Card padding={0} tone="neutral">
+            <Heading size={1}>Hamburgefonstiv M</Heading>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
-            <Heading accent size={0}>
-              Hamburgefonstiv M
-            </Heading>
+          <Card padding={0} tone="neutral">
+            <Heading size={0}>Hamburgefonstiv M</Heading>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={2} scheme="dark">
+          <Card padding={2} tone="neutral">
             <Heading accent>
               <AddCircleIcon />
             </Heading>

package/src/core/primitives/heading/__workshop__/plain.tsx

@@ -1,10 +1,11 @@
 import {Flex, Heading} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+
 import {
-  WORKSHOP_HEADING_FONT_SIZE_OPTIONS,
   WORKSHOP_FONT_WEIGHT_OPTIONS,
+  WORKSHOP_HEADING_FONT_SIZE_OPTIONS,
   WORKSHOP_TEXT_OVERFLOW_OPTIONS,
-} from '../../../__workshop__/constants'
+} from '../../../../../workshop/constants'
 
 export default function PlainStory() {
   const accent = useBoolean('Accent', false, 'Props')

package/src/core/primitives/heading/heading.tsx

@@ -1,32 +1,18 @@
-import {composeClassNames, FontStyleProps, heading, ResponsiveProp} from '@sanity/ui/css'
-import {FontHeadingSize} from '@sanity/ui/theme'
-import {forwardRef} from 'react'
-import {styled} from '../../lib/styled'
+import {
+  composeClassNames,
+  heading,
+  type HeadingStyleProps,
+  textOverflow,
+  type TextOverflowStyleProps,
+} from '@sanity/ui/css'
+import {ForwardedRef, forwardRef} from 'react'
+
+import {Props} from '../../types'
 
 /**
  * @public
  */
-export interface HeadingProps extends FontStyleProps {
-  accent?: boolean
-  as?: React.ElementType | keyof JSX.IntrinsicElements
-  muted?: boolean
-  size?: ResponsiveProp<FontHeadingSize>
-  /**
-   * Controls how overflowing text is treated.
-   * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
-   * @beta
-   */
-  textOverflow?: 'ellipsis'
-}
-
-// todo
-const SpanWithTextOverflow = styled.span`
-  display: block;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  overflow: clip;
-`
+export interface HeadingProps extends HeadingStyleProps, TextOverflowStyleProps {}
 
 /**
  * Typographic headings.
@@ -34,39 +20,33 @@ const SpanWithTextOverflow = styled.span`
  * @public
  */
 export const Heading = forwardRef(function Heading(
-  props: HeadingProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size'>,
-  ref: React.ForwardedRef<HTMLElement>,
+  props: Props<HeadingProps, 'div'>,
+  ref: ForwardedRef<HTMLElement>,
 ) {
   const {
     accent = false,
     align,
     as: As = 'div',
-    children: childrenProp,
+    children,
     className,
+    flex,
     muted = false,
-    size = 2,
-    textOverflow,
+    size = 1,
+    textOverflow: textOverflowProp,
     weight,
     ...restProps
   } = props
 
-  let children = childrenProp
-
-  if (textOverflow === 'ellipsis') {
-    children = <SpanWithTextOverflow>{children}</SpanWithTextOverflow>
-  }
-
   return (
     <As
       data-ui="Heading"
       {...restProps}
-      // todo
-      // $align={useArrayProp(align)}
       className={composeClassNames(
         className,
         heading({
           accent,
           align,
+          flex,
           muted,
           size,
           weight,
@@ -74,7 +54,7 @@ export const Heading = forwardRef(function Heading(
       )}
       ref={ref}
     >
-      <span>{children}</span>
+      <span className={textOverflow({textOverflow: textOverflowProp})}>{children}</span>
     </As>
   )
 })

package/src/core/primitives/inline/__workshop__/plain.tsx

@@ -1,6 +1,7 @@
 import {Card, Flex, Inline, Text} from '@sanity/ui'
 import {useAction, useSelect} from '@sanity/ui-workshop'
-import {WORKSHOP_SPACE_OPTIONS} from '../../../__workshop__/constants'
+
+import {WORKSHOP_SPACE_OPTIONS} from '../../../../../workshop/constants'
 
 export default function PlainStory() {
   return (
@@ -10,15 +11,15 @@ export default function PlainStory() {
         space={useSelect('Space', WORKSHOP_SPACE_OPTIONS, 0, 'Props')}
       >
         <Card padding={1} shadow={1}>
-          <Text>Inline item</Text>
+          <Text size={1}>Inline item</Text>
         </Card>
 
         <Card padding={2} shadow={1}>
-          <Text>Inline item</Text>
+          <Text size={1}>Inline item</Text>
         </Card>
 
         <Card padding={3} shadow={1}>
-          <Text>Inline item</Text>
+          <Text size={1}>Inline item</Text>
         </Card>
       </Inline>
     </Flex>

package/src/core/primitives/inline/inline.tsx

@@ -1,14 +1,15 @@
 import {ResponsiveProp} from '@sanity/ui/css'
 import {Space} from '@sanity/ui/theme'
-import {forwardRef, useMemo, Children, ForwardedRef} from 'react'
+import {Children, ForwardedRef, forwardRef, useMemo} from 'react'
+
+import {Props} from '../../types'
 import {Box, BoxProps} from '../box'
 
 /**
  * @public
  */
-export interface InlineProps
-  extends Omit<BoxProps, 'align' | 'display' | 'gap' | 'gapX' | 'gapY' | 'justify'> {
-  /** The spacing between children. */
+export interface InlineProps extends Omit<BoxProps, 'align' | 'display' | 'justify'> {
+  /** @deprecated Use `gap` instead. */
   space?: ResponsiveProp<Space>
 }
 
@@ -18,10 +19,10 @@ export interface InlineProps
  * @public
  */
 export const Inline = forwardRef(function Inline(
-  props: InlineProps & Omit<React.HTMLProps<HTMLDivElement>, 'wrap'>,
+  props: Props<InlineProps, 'div'>,
   ref: ForwardedRef<HTMLDivElement>,
 ) {
-  const {as, children: childrenProp, space, ...restProps} = props
+  const {as, children: childrenProp, gap, gapX, gapY, space, ...restProps} = props
 
   const children = useMemo(
     () => Children.map(childrenProp, (child) => child && <Box maxWidth="fill">{child}</Box>),
@@ -35,7 +36,9 @@ export const Inline = forwardRef(function Inline(
       align="center"
       as={as}
       display="flex"
-      gap={space}
+      gap={gap ?? space}
+      gapX={gapX}
+      gapY={gapY}
       ref={ref}
       wrap="wrap"
     >

package/src/core/primitives/kbd/kbd.tsx

@@ -1,6 +1,8 @@
 import {composeClassNames, kbd, RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
 import {FontTextSize, Space} from '@sanity/ui/theme'
-import {forwardRef} from 'react'
+import {ForwardedRef, forwardRef} from 'react'
+
+import {Props} from '../../types'
 import {Box, BoxProps} from '../box'
 import {Text} from '../text'
 
@@ -8,7 +10,6 @@ import {Text} from '../text'
  * @public
  */
 export interface KBDProps extends BoxProps, RadiusStyleProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
   fontSize?: ResponsiveProp<FontTextSize>
   padding?: ResponsiveProp<Space>
 }
@@ -19,15 +20,15 @@ export interface KBDProps extends BoxProps, RadiusStyleProps {
  * @public
  */
 export const KBD = forwardRef(function KBD(
-  props: KBDProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'ref' | 'size'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
+  props: Props<KBDProps, 'div'>,
+  ref: ForwardedRef<HTMLDivElement>,
 ) {
   const {
     as = 'kbd',
     children,
     className,
     display = 'inline-block',
-    fontSize = 0,
+    fontSize = 1,
     padding = 1,
     radius = 2,
     ...restProps
@@ -40,10 +41,11 @@ export const KBD = forwardRef(function KBD(
       as={as}
       className={composeClassNames(className, kbd({radius}))}
       display={display}
+      muted
       padding={padding}
       ref={ref}
     >
-      <Text as="span" size={fontSize} weight="semibold">
+      <Text as="span" muted size={fontSize}>
         {children}
       </Text>
     </Box>

package/src/core/primitives/label/__workshop__/opticalAlignment.tsx

@@ -4,39 +4,45 @@ import {Box, Card, Flex, Label, Stack} from '@sanity/ui'
 export default function OpticalAlignment() {
   return (
     <Box padding={[4, 5, 6]}>
-      <Stack space={1}>
+      <Stack gap={1}>
         <Flex>
-          <Card padding={0} scheme="dark">
+          <Card padding={0} shadow={1} tone="suggest">
+            <Label size={5}>Hamburgefonstiv M</Label>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={0} shadow={1} tone="suggest">
             <Label size={4}>Hamburgefonstiv M</Label>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
+          <Card padding={0} shadow={1} tone="suggest">
             <Label size={3}>Hamburgefonstiv M</Label>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
+          <Card padding={0} shadow={1} tone="suggest">
             <Label size={2}>Hamburgefonstiv M</Label>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
+          <Card padding={0} shadow={1} tone="suggest">
             <Label size={1}>Hamburgefonstiv M</Label>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
+          <Card padding={0} shadow={1} tone="suggest">
             <Label size={0}>Hamburgefonstiv M</Label>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={2} scheme="dark">
+          <Card padding={2} shadow={1} tone="suggest">
             <Label>
               <AddCircleIcon />
             </Label>

package/src/core/primitives/label/__workshop__/plain.tsx

@@ -1,23 +1,37 @@
-import {Flex, Label} from '@sanity/ui'
-import {useSelect, useText} from '@sanity/ui-workshop'
+import {Container, Flex, Label} from '@sanity/ui'
+import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+
 import {
-  WORKSHOP_LABEL_FONT_SIZE_OPTIONS,
   WORKSHOP_FONT_WEIGHT_OPTIONS,
+  WORKSHOP_LABEL_FONT_SIZE_OPTIONS,
+  WORKSHOP_TEXT_ALIGN_OPTIONS,
   WORKSHOP_TEXT_OVERFLOW_OPTIONS,
-} from '../../../__workshop__/constants'
+} from '../../../../../workshop/constants'
 
 export default function PlainStory() {
+  const accent = useBoolean('Accent', false, 'Props')
+  const align = useSelect('Align', WORKSHOP_TEXT_ALIGN_OPTIONS, undefined, 'Props') || undefined
+  const muted = useBoolean('Muted', false, 'Props')
   const size = useSelect('Size', WORKSHOP_LABEL_FONT_SIZE_OPTIONS, undefined, 'Props')
   const textChild = useText('Text', 'Label text', 'Props')
   const textOverflow =
     useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS, '', 'Props') || undefined
-  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, undefined, 'Props')
+  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, '', 'Props') || undefined
 
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Label size={size} textOverflow={textOverflow} weight={weight}>
-        {textChild}
-      </Label>
+      <Container width={0}>
+        <Label
+          accent={accent}
+          align={align}
+          muted={muted}
+          size={size}
+          textOverflow={textOverflow}
+          weight={weight}
+        >
+          {textChild}
+        </Label>
+      </Container>
     </Flex>
   )
 }

package/src/core/primitives/label/label.tsx

@@ -1,77 +1,52 @@
-import {composeClassNames, FontStyleProps, label} from '@sanity/ui/css'
-import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef} from 'react'
-import {responsiveLabelFont, responsiveTextAlignStyle} from '../../_compat/styles/internal'
-import {styled} from '../../lib/styled'
-import {TextAlign} from '../../types'
-import {labelBaseStyle} from './styles'
+import {
+  composeClassNames,
+  FontStyleProps,
+  label,
+  LabelSize,
+  ResponsiveProp,
+  textOverflow,
+  TextOverflowStyleProps,
+} from '@sanity/ui/css'
+import {ForwardedRef, forwardRef} from 'react'
+
+import {Props} from '../../types'
 
 /**
  * @public
  */
-export interface LabelProps extends FontStyleProps {
+export interface LabelProps extends FontStyleProps, TextOverflowStyleProps {
   accent?: boolean
-  as?: React.ElementType | keyof JSX.IntrinsicElements
+  htmlFor?: string
   muted?: boolean
-  size?: number | number[]
-  /**
-   * Controls how overflowing text is treated.
-   * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
-   * @beta
-   */
-  textOverflow?: 'ellipsis'
-  weight?: ThemeFontWeightKey
+  size?: ResponsiveProp<LabelSize>
 }
 
-const Root = styled.div<{
-  $accent?: boolean
-  $align: TextAlign[]
-  $muted: boolean
-  $size: number[]
-}>(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle)
-
-const SpanWithTextOverflow = styled.span`
-  display: block;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  overflow: clip;
-`
-
 /**
  * Typographic labels.
  *
  * @public
  */
 export const Label = forwardRef(function Label(
-  props: LabelProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'size'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
+  props: Props<LabelProps, 'div'>,
+  ref: ForwardedRef<HTMLDivElement>,
 ) {
   const {
     accent,
     align,
-    children: childrenProp,
+    as: As = 'div',
+    children,
     className,
     muted = false,
-    size = 2,
-    textOverflow,
-    weight,
+    size = 1,
+    textOverflow: textOverflowProp,
+    weight = 'medium',
     ...restProps
   } = props
 
-  let children = childrenProp
-
-  if (textOverflow === 'ellipsis') {
-    children = <SpanWithTextOverflow>{children}</SpanWithTextOverflow>
-  } else {
-    children = <span>{children}</span>
-  }
-
   return (
-    <Root
+    <As
       data-ui="Label"
       {...restProps}
-      $weight={weight}
       className={composeClassNames(
         className,
         label({
@@ -79,12 +54,13 @@ export const Label = forwardRef(function Label(
           align,
           muted,
           size,
+          weight,
         }),
       )}
       ref={ref}
     >
-      {children}
-    </Root>
+      <span className={textOverflow({textOverflow: textOverflowProp})}>{children}</span>
+    </As>
   )
 })
 

package/src/core/primitives/popover/__workshop__/AlignedStory.tsx

@@ -2,12 +2,13 @@ import {EllipsisVerticalIcon} from '@sanity/icons'
 import {Button, Card, Flex, Popover, Text, useClickOutsideEvent} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import {useCallback, useRef, useState} from 'react'
+
 import {
   WORKSHOP_FLEX_ALIGN_OPTIONS,
   WORKSHOP_FLEX_JUSTIFY_OPTIONS,
   WORKSHOP_PLACEMENT_OPTIONS,
   WORKSHOP_WIDTH_OPTIONS,
-} from '../../../__workshop__/constants'
+} from '../../../../../workshop/constants'
 
 export default function AlignedStory() {
   const constrainSize = useBoolean('Constrain size', false)
@@ -24,7 +25,7 @@ export default function AlignedStory() {
   const popoverElementRef = useRef<HTMLDivElement | null>(null)
 
   const content = (
-    <Text>
+    <Text size={1}>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at nisl at sem tempor
       hendrerit scelerisque ut libero. Maecenas iaculis efficitur lorem, ac faucibus mi imperdiet
       quis. Cras a consectetur erat. Fusce imperdiet, dolor et pellentesque iaculis, ex quam luctus

package/src/core/primitives/popover/__workshop__/MatchReferenceWidthStory.tsx

@@ -1,6 +1,7 @@
 import {Box, Button, Container, Flex, Popover, Stack, Text} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
-import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../__workshop__/constants'
+
+import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../../../workshop/constants'
 
 export default function MatchReferenceWidthStory() {
   const arrow = useBoolean('Arrow', true, 'Props')
@@ -11,8 +12,8 @@ export default function MatchReferenceWidthStory() {
       <Popover
         arrow={arrow}
         content={
-          <Box padding={2}>
-            <Text>Content</Text>
+          <Box padding={3}>
+            <Text size={1}>Content</Text>
           </Box>
         }
         matchReferenceWidth
@@ -22,7 +23,7 @@ export default function MatchReferenceWidthStory() {
       >
         <Container width={0}>
           <Stack>
-            <Button fontSize={3} text="Button" />
+            <Button fontSize={1} mode="ghost" selected text="Button" />
           </Stack>
         </Container>
       </Popover>

package/src/core/primitives/popover/__workshop__/OpenOnMountStory.tsx

@@ -3,7 +3,7 @@ import {Button, Card, Popover, Text} from '@sanity/ui'
 export default function OpenOnMountStory() {
   return (
     <Card height="fill" padding={3} sizing="border">
-      <Popover content={<Text>popover content</Text>} open padding={3}>
+      <Popover content={<Text size={1}>popover content</Text>} open padding={3}>
         <Button text="This button is the popover reference" />
       </Popover>
     </Card>

package/src/core/primitives/popover/__workshop__/PlainStory.tsx

@@ -1,12 +1,13 @@
 import {Button, Card, Popover, PortalProvider, Radius, Text} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import {useState} from 'react'
+
 import {
   WORKSHOP_CONTAINER_WIDTH_OPTIONS,
   WORKSHOP_PLACEMENT_OPTIONS,
   WORKSHOP_RADIUS_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
-} from '../../../__workshop__/constants'
+} from '../../../../../workshop/constants'
 
 export default function PlainStory() {
   const arrow = useBoolean('Arrow', true)
@@ -48,7 +49,7 @@ export default function PlainStory() {
               arrow={arrow}
               boundaryElement={boundaryElementFlag ? boundaryElement : undefined}
               constrainSize={constrainSize}
-              content={<Text>popover content</Text>}
+              content={<Text size={1}>popover content</Text>}
               fallbackPlacements={['top', 'bottom']}
               matchReferenceWidth={matchReferenceWidth}
               open={open}