diff --git a/.changeset/document-pos-image-border-radius.md b/.changeset/document-pos-image-border-radius.md new file mode 100644 index 0000000000..dacac9723f --- /dev/null +++ b/.changeset/document-pos-image-border-radius.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 3b0afd29bc..915a32f478 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 @@ -4195,6 +4195,25 @@ interface ImageJSXProps extends Pick { * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#src */ src?: ImageProps['src']; + /** + * Border radius for the image corners. + * + * [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is + * supported. Note that, contrary to CSS, it uses flow-relative values and the order is: + * + * - 4 values: `start-start start-end end-end end-start` + * - 3 values: `start-start (start-end & end-start) end-end` + * - 2 values: `(start-start & end-end) (start-end & end-start)` + * + * For example: + * - `base` means all corners have `base` radius + * - `base none` means start-start and end-end corners are `base`, start-end and end-start corners are `none` + * - `base none large` means start-start is `base`, start-end and end-start are `none`, end-end is `large` + * - `base none large small` means start-start is `base`, start-end is `none`, end-end is `large`, end-start is `small` + * + * @default 'none' + */ + borderRadius?: MaybeAllValuesShorthandProperty; } declare global { interface HTMLElementTagNameMap { @@ -7116,6 +7135,25 @@ interface Image { * @see ://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#alt */ alt?: string; + /** + * Border radius for the image corners. + * + * [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is + * supported. Note that, contrary to CSS, it uses flow-relative values and the order is: + * + * - 4 values: `start-start start-end end-end end-start` + * - 3 values: `start-start (start-end & end-start) end-end` + * - 2 values: `(start-start & end-end) (start-end & end-start)` + * + * For example: + * - `base` means all corners have `base` radius + * - `base none` means start-start and end-end corners are `base`, start-end and end-start corners are `none` + * - `base none large` means start-start is `base`, start-end and end-start are `none`, end-end is `large` + * - `base none large small` means start-start is `base`, start-end is `none`, end-end is `large`, end-start is `small` + * + * @default 'none' + */ + borderRadius?: MaybeAllValuesShorthandProperty; } /** 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..5970f66cf5 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; @@ -60,6 +66,25 @@ export interface ImageJSXProps extends Pick { * The image source URL (remote URL or local file resource). When loading or no src is provided, a placeholder is rendered. Ensure URLs are properly formatted and properly formatted. */ src?: ImageProps['src']; + /** + * Border radius for the image corners. + * + * [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is + * supported. Note that, contrary to CSS, it uses flow-relative values and the order is: + * + * - 4 values: `start-start start-end end-end end-start` + * - 3 values: `start-start (start-end & end-start) end-end` + * - 2 values: `(start-start & end-end) (start-end & end-start)` + * + * For example: + * - `base` means all corners have `base` radius + * - `base none` means start-start and end-end corners are `base`, start-end and end-start corners are `none` + * - `base none large` means start-start is `base`, start-end and end-start are `none`, end-end is `large` + * - `base none large small` means start-start is `base`, start-end is `none`, end-end is `large`, end-start is `small` + * + * @default 'none' + */ + borderRadius?: MaybeAllValuesShorthandProperty; } declare global { interface HTMLElementTagNameMap {