diff --git a/.changeset/quiet-images-curve.md b/.changeset/quiet-images-curve.md new file mode 100644 index 0000000000..dacac9723f --- /dev/null +++ b/.changeset/quiet-images-curve.md @@ -0,0 +1,5 @@ +--- +'@shopify/ui-extensions': patch +--- + +Document the `borderRadius` prop on the POS `s-image` component. diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts b/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts index c62b34872b..d3f14b0c5a 100644 --- a/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts +++ b/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts @@ -4172,6 +4172,21 @@ declare module 'preact' { declare const tagName$q = 's-image'; interface ImageJSXProps extends Pick { + /** + * The border radius for the image corners. + * + * Supports one to four flow-relative values in this order: + * + * - One value applies to all corners. + * - Two values apply to `start-start` and `end-end`, then `inline-end` and `inline-start`. + * - Three values apply to `start-start`, both inline corners, and `end-end`. + * - Four values apply to `start-start`, `inline-end`, `end-end`, and `inline-start`. + * + * Use values from `small-500` through `large-500`, `base`, `max`, or `none`. + * + * @default 'none' + */ + borderRadius?: MaybeAllValuesShorthandProperty; /** * The displayed inline width of the image. * @@ -7070,6 +7085,21 @@ interface TimePicker { * @publicDocs */ interface Image { + /** + * The border radius for the image corners. + * + * Supports one to four flow-relative values in this order: + * + * - One value applies to all corners. + * - Two values apply to `start-start` and `end-end`, then `inline-end` and `inline-start`. + * - Three values apply to `start-start`, both inline corners, and `end-end`. + * - Four values apply to `start-start`, `inline-end`, `end-end`, and `inline-start`. + * + * Use values from `small-500` through `large-500`, `base`, `max`, or `none`. + * + * @default 'none' + */ + borderRadius?: MaybeAllValuesShorthandProperty; /** * The displayed inline width of the image. * diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/Image.d.ts b/packages/ui-extensions/src/surfaces/point-of-sale/components/Image.d.ts index 46289894c5..b49f107231 100644 --- a/packages/ui-extensions/src/surfaces/point-of-sale/components/Image.d.ts +++ b/packages/ui-extensions/src/surfaces/point-of-sale/components/Image.d.ts @@ -8,7 +8,13 @@ /* eslint-disable import-x/namespace */ // eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment /// -import type {ImageProps, Key, Ref} from './components-shared.d.ts'; +import type { + BorderRadiusKeyword, + ImageProps, + Key, + MaybeAllValuesShorthandProperty, + Ref, +} from './components-shared.d.ts'; /** @publicDocs */ export type ComponentChildren = any; @@ -47,6 +53,21 @@ export type IntrinsicElementProps = T & BaseElementPropsWithChildren { + /** + * The border radius for the image corners. + * + * Supports one to four flow-relative values in this order: + * + * - One value applies to all corners. + * - Two values apply to `start-start` and `end-end`, then `inline-end` and `inline-start`. + * - Three values apply to `start-start`, both inline corners, and `end-end`. + * - Four values apply to `start-start`, `inline-end`, `end-end`, and `inline-start`. + * + * Use values from `small-500` through `large-500`, `base`, `max`, or `none`. + * + * @default 'none' + */ + borderRadius?: MaybeAllValuesShorthandProperty; /** * Controls the displayed width of the image. Choose based on your layout requirements. For mobile interfaces, consider using `'fill'` with defined container dimensions to ensure consistent image display, as dynamic container heights can cause layout inconsistencies in scrollable views. *