@sanity/ui 3.1.14 → 3.2.0

package/src/core/primitives/stack/stack.test.tsx

@@ -0,0 +1,57 @@
+/** @jest-environment jsdom */
+
+import {render} from '../../../../test'
+import {Stack} from './stack'
+import {responsiveStackSpaceStyle} from './styles'
+
+jest.mock('./styles', () => {
+  const actual = jest.requireActual('./styles')
+
+  return {
+    ...actual,
+    responsiveStackSpaceStyle: jest.fn(actual.responsiveStackSpaceStyle),
+  }
+})
+
+describe('primitives/stack', () => {
+  const mockedResponsiveStackSpaceStyle = jest.mocked(responsiveStackSpaceStyle)
+  beforeEach(() => {
+    mockedResponsiveStackSpaceStyle.mockClear()
+  })
+
+  it('should support `space` and `gap` with the same behavior', () => {
+    render(
+      <Stack space={2}>
+        <span>One</span>
+        <span>Two</span>
+      </Stack>,
+    )
+
+    expect(mockedResponsiveStackSpaceStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$space: [2]}),
+    )
+    mockedResponsiveStackSpaceStyle.mockClear()
+    render(
+      <Stack gap={2}>
+        <span>One</span>
+        <span>Two</span>
+      </Stack>,
+    )
+
+    expect(mockedResponsiveStackSpaceStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$space: [2]}),
+    )
+  })
+
+  it('should prefer `gap` over `space` when both are provided', () => {
+    render(
+      <Stack gap={3} space={1}>
+        <span>One</span>
+        <span>Two</span>
+      </Stack>,
+    )
+    expect(mockedResponsiveStackSpaceStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$space: [3]}),
+    )
+  })
+})

package/src/core/primitives/stack/stack.tsx

@@ -10,6 +10,10 @@ import {responsiveStackSpaceStyle, ResponsiveStackSpaceStyleProps, stackBaseStyl
  */
 export interface StackProps extends BoxProps {
   as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  gap?: number | number[]
+  /**
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
   space?: number | number[]
 }
 
@@ -27,14 +31,15 @@ export const Stack = forwardRef(function Stack(
   props: StackProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref'>,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
-  const {as, space, ...restProps} = props
+  const {as, gap, space: deprecated_space, ...restProps} = props
+  const spacing = gap === undefined ? deprecated_space : gap
 
   return (
     <StyledStack
       data-as={typeof as === 'string' ? as : undefined}
       data-ui="Stack"
       {...restProps}
-      $space={_getArrayProp(space)}
+      $space={_getArrayProp(spacing)}
       forwardedAs={as}
       ref={ref}
     />

package/src/core/primitives/textInput/textInput.test.tsx

@@ -0,0 +1,48 @@
+/** @jest-environment jsdom */
+
+import {render} from '../../../../test'
+import {responsiveInputPaddingStyle} from '../../styles/internal'
+import {TextInput} from './textInput'
+
+jest.mock('../../styles/internal', () => {
+  const actual = jest.requireActual('../../styles/internal')
+
+  return {
+    ...actual,
+    responsiveInputPaddingStyle: jest.fn(actual.responsiveInputPaddingStyle),
+  }
+})
+
+describe('primitives/textInput', () => {
+  const mockedResponsiveInputPaddingStyle = jest.mocked(responsiveInputPaddingStyle)
+
+  beforeEach(() => {
+    mockedResponsiveInputPaddingStyle.mockClear()
+  })
+
+  it('should support `space` and `gap` with the same behavior', () => {
+    render(<TextInput icon={() => null} space={2} />)
+
+    expect(mockedResponsiveInputPaddingStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$space: [2]}),
+    )
+
+    mockedResponsiveInputPaddingStyle.mockClear()
+    render(<TextInput gap={2} icon={() => null} />)
+
+    expect(mockedResponsiveInputPaddingStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$space: [2]}),
+    )
+  })
+
+  it('should prefer `gap` over `space` when both are provided', () => {
+    render(<TextInput gap={3} icon={() => null} space={1} />)
+
+    expect(mockedResponsiveInputPaddingStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$space: [3]}),
+    )
+    expect(mockedResponsiveInputPaddingStyle).not.toHaveBeenCalledWith(
+      expect.objectContaining({$space: [1]}),
+    )
+  })
+})

package/src/core/primitives/textInput/textInput.tsx

@@ -74,7 +74,11 @@ export interface TextInputProps {
   padding?: number | number[]
   prefix?: React.ReactNode
   radius?: Radius | Radius[]
+  /**
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
   space?: number | number[]
+  gap?: number | number[]
   suffix?: React.ReactNode
   type?: TextInputType
   weight?: ThemeFontWeightKey
@@ -162,6 +166,7 @@ export const TextInput = forwardRef(function TextInput(
     clearButton,
     disabled = false,
     fontSize: fontSizeProp = 2,
+    gap,
     icon: IconComponent,
     iconRight: IconRightComponent,
     onClear,
@@ -169,7 +174,7 @@ export const TextInput = forwardRef(function TextInput(
     prefix,
     radius: radiusProp = 2,
     readOnly,
-    space: spaceProp = 3,
+    space: deprecated_space = 3,
     suffix,
     customValidity,
     type = 'text',
@@ -183,7 +188,7 @@ export const TextInput = forwardRef(function TextInput(
   const fontSize = _getArrayProp(fontSizeProp)
   const padding = _getArrayProp(paddingProp)
   const radius = _getArrayProp(radiusProp)
-  const space = _getArrayProp(spaceProp)
+  const space = _getArrayProp(gap === undefined ? deprecated_space : gap)
 
   // Transient properties
   const $hasClearButton = Boolean(clearButton)

package/src/core/primitives/types.ts

@@ -66,22 +66,55 @@ export interface ResponsiveGridProps {
   autoRows?: GridAutoRows | GridAutoRows[]
   autoCols?: GridAutoCols | GridAutoCols[]
   autoFlow?: GridAutoFlow | GridAutoFlow[]
+
+  /**
+   * @deprecated Use `gridTemplateColumns` instead. `columns` will be removed in v4.
+   */
   columns?: number | number[]
+  gridTemplateColumns?: number | number[]
   gap?: number | number[]
   gapX?: number | number[]
   gapY?: number | number[]
+  /**
+   * @deprecated Use `gridTemplateRows` instead. `rows` will be removed in v4.
+   */
   rows?: number | number[]
+  gridTemplateRows?: number | number[]
 }
 
 /**
  * @public
  */
 export interface ResponsiveGridItemProps {
+  gridColumn?: GridItemColumn | GridItemColumn[]
+  /**
+   * @deprecated Use `gridColumn` instead. `column` will be removed in v4.
+   */
   column?: GridItemColumn | GridItemColumn[]
+  gridColumnStart?: GridItemColumnStart | GridItemColumnStart[]
+  /**
+   * @deprecated Use `gridColumnStart` instead. `columnStart` will be removed in v4.
+   */
   columnStart?: GridItemColumnStart | GridItemColumnStart[]
+  gridColumnEnd?: GridItemColumnEnd | GridItemColumnEnd[]
+  /**
+   * @deprecated Use `gridColumnEnd` instead. `columnEnd` will be removed in v4.
+   */
   columnEnd?: GridItemColumnEnd | GridItemColumnEnd[]
+  gridRow?: GridItemRow | GridItemRow[]
+  /**
+   * @deprecated Use `gridRow` instead. `row` will be removed in v4.
+   */
   row?: GridItemRow | GridItemRow[]
+  gridRowStart?: GridItemRowStart | GridItemRowStart[]
+  /**
+   * @deprecated Use `gridRowStart` instead. `rowStart` will be removed in v4.
+   */
   rowStart?: GridItemRowStart | GridItemRowStart[]
+  gridRowEnd?: GridItemRowEnd | GridItemRowEnd[]
+  /**
+   * @deprecated Use `gridRowEnd` instead. `rowEnd` will be removed in v4.
+   */
   rowEnd?: GridItemRowEnd | GridItemRowEnd[]
 }