diff --git a/.changeset/add-box-private-positioning-types.md b/.changeset/add-box-private-positioning-types.md new file mode 100644 index 0000000000..04e5ce4489 --- /dev/null +++ b/.changeset/add-box-private-positioning-types.md @@ -0,0 +1,5 @@ +--- +'@shopify/ui-extensions': patch +--- + +Add private positioning types (`position`, `insetBlock`, `insetInline`, `transform`) to the `s-box` checkout component. diff --git a/packages/ui-extensions/src/surfaces/checkout/components/Box.d.ts b/packages/ui-extensions/src/surfaces/checkout/components/Box.d.ts index 8930b81f6d..5d1d88bf61 100644 --- a/packages/ui-extensions/src/surfaces/checkout/components/Box.d.ts +++ b/packages/ui-extensions/src/surfaces/checkout/components/Box.d.ts @@ -8,7 +8,7 @@ /* eslint-disable import-x/namespace */ // eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment /// -import type {BoxProps$1,MaybeAllValuesShorthandProperty,BorderSizeKeyword, BorderStyleKeyword,ColorKeyword} from './components-shared.d.ts'; +import type {BoxProps$1,MaybeAllValuesShorthandProperty,BorderSizeKeyword, BorderStyleKeyword, SizeUnits,ColorKeyword} from './components-shared.d.ts'; /** * The subset of border size values available for this component. @@ -84,6 +84,61 @@ export interface BoxElementProps extends Pick>; + /** + * Sets the box's block position by specifying offsets from the box's + * default position, following the CSS `inset-block` shorthand: + * a block-start offset followed by a block-end offset, where only one + * of the two can be a size so each axis is only offset once. + * + * When `position` is set to `absolute`, offsets are insets from the + * nearest positioned ancestor. A percentage value refers to the block + * size of that ancestor. + * + * @see https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block + * + * @default 'auto' + * @private + */ + insetBlock?: `auto ${SizeUnits}` | `${SizeUnits} auto` | 'auto'; + /** + * Sets the box's inline position by specifying offsets from the box's + * default position, following the CSS `inset-inline` shorthand: + * an inline-start offset followed by an inline-end offset, where only + * one of the two can be a size so each axis is only offset once. + * + * When `position` is set to `absolute`, offsets are insets from the + * nearest positioned ancestor. A percentage value refers to the inline + * size of that ancestor. + * + * @see https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline + * + * @default 'auto' + * @private + */ + insetInline?: `auto ${SizeUnits}` | `${SizeUnits} auto` | 'auto'; + /** + * Changes how the box is positioned. + * + * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position + * + * @default 'relative' + * @private + */ + position?: 'absolute' | 'relative'; + /** + * Specifies a transformation of the box. + * + * Only two-dimensional translations are supported. The first value + * translates along the inline axis and the second along the block axis; + * inline translations are flipped in right-to-left writing modes. + * A percentage value refers to the corresponding size of the box itself. + * + * @see https://developer.mozilla.org/en-US/docs/Web/CSS/transform + * + * @default 'none' + * @private + */ + transform?: `translate(${SizeUnits})` | `translate(${SizeUnits}, ${SizeUnits})` | `translate(${SizeUnits},${SizeUnits})` | 'none'; } export interface BoxElement extends BoxElementProps, Omit { }