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/docs/surfaces/point-of-sale/generated/pos_ui_extensions/2026-07/generated_docs_data_v2.json b/packages/ui-extensions/docs/surfaces/point-of-sale/generated/pos_ui_extensions/2026-07/generated_docs_data_v2.json index 8a90e12eb9..d9b5fb3b5c 100644 --- a/packages/ui-extensions/docs/surfaces/point-of-sale/generated/pos_ui_extensions/2026-07/generated_docs_data_v2.json +++ b/packages/ui-extensions/docs/surfaces/point-of-sale/generated/pos_ui_extensions/2026-07/generated_docs_data_v2.json @@ -7468,6 +7468,15 @@ "isOptional": true, "defaultValue": "`''`" }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "borderRadius", + "value": "MaybeAllValuesShorthandProperty", + "description": "The border radius for the image corners.\n\nSupports one to four flow-relative values in this order:\n\n- One value applies to all corners.\n- Two values apply to `start-start` and `end-end`, then `inline-end` and `inline-start`.\n- Three values apply to `start-start`, both inline corners, and `end-end`.\n- Four values apply to `start-start`, `inline-end`, `end-end`, and `inline-start`.\n\nUse values from `small-500` through `large-500`, `base`, `max`, or `none`.", + "isOptional": true, + "defaultValue": "'none'" + }, { "filePath": "src/surfaces/point-of-sale/components.ts", "syntaxKind": "PropertySignature", @@ -7503,7 +7512,16 @@ "isOptional": true } ], - "value": "interface Image {\n /**\n * The displayed inline width of the image.\n *\n * - `fill`: the image will takes up 100% of the available inline size.\n * - `auto`: the image will be displayed at its natural size.\n *\n * **Mobile surfaces:** Always wrap your image in a box with a set width and height.\n * ScrollViews on mobile have a dynamic height, which can cause images to appear\n * inconsistently without defined dimensions.\n * @default 'fill'\n * @see ://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#width\n */\n inlineSize?: 'fill' | 'auto';\n /**\n * The image source, which should be a remote URL.\n *\n * When the image is loading or no `src` is provided, a placeholder will be rendered.\n * @see ://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#src\n */\n src?: string;\n /** A unique identifier for the element. */\n id?: string;\n /**\n * Determines how the content of the image is resized to fit its container.\n * The image is positioned in the center of the container.\n * @default 'contain'\n * @see ://developer.mozilla.org/en-US/docs/Web/CSS/object-fit\n */\n objectFit?: 'contain' | 'cover';\n /**\n * An alternative text description that describe the image for the reader to\n * understand what it is about. It is extremely useful for both users using\n * assistive technology and sighted users. A well written description\n * provides people with visual impairments the ability to participate in\n * consuming non-text content. When a screen readers encounters an `s-image`,\n * the description is read and announced aloud. If an image fails to load,\n * potentially due to a poor connection, the `alt` is displayed on\n * screen instead. This has the benefit of letting a sighted buyer know an\n * image was meant to load here, but as an alternative, they’re still able to\n * consume the text content. Read\n * [considerations when writing alternative text](https://www.shopify.com/ca/blog/image-alt-text#4)\n * to learn more.\n * @default `''`\n * @see ://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#alt\n */\n alt?: string;\n}" + "value": "interface Image {\n /**\n * The border radius for the image corners.\n *\n * Supports one to four flow-relative values in this order:\n *\n * - One value applies to all corners.\n * - Two values apply to `start-start` and `end-end`, then `inline-end` and `inline-start`.\n * - Three values apply to `start-start`, both inline corners, and `end-end`.\n * - Four values apply to `start-start`, `inline-end`, `end-end`, and `inline-start`.\n *\n * Use values from `small-500` through `large-500`, `base`, `max`, or `none`.\n *\n * @default 'none'\n */\n borderRadius?: MaybeAllValuesShorthandProperty;\n /**\n * The displayed inline width of the image.\n *\n * - `fill`: the image will takes up 100% of the available inline size.\n * - `auto`: the image will be displayed at its natural size.\n *\n * **Mobile surfaces:** Always wrap your image in a box with a set width and height.\n * ScrollViews on mobile have a dynamic height, which can cause images to appear\n * inconsistently without defined dimensions.\n * @default 'fill'\n * @see ://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#width\n */\n inlineSize?: 'fill' | 'auto';\n /**\n * The image source, which should be a remote URL.\n *\n * When the image is loading or no `src` is provided, a placeholder will be rendered.\n * @see ://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#src\n */\n src?: string;\n /** A unique identifier for the element. */\n id?: string;\n /**\n * Determines how the content of the image is resized to fit its container.\n * The image is positioned in the center of the container.\n * @default 'contain'\n * @see ://developer.mozilla.org/en-US/docs/Web/CSS/object-fit\n */\n objectFit?: 'contain' | 'cover';\n /**\n * An alternative text description that describe the image for the reader to\n * understand what it is about. It is extremely useful for both users using\n * assistive technology and sighted users. A well written description\n * provides people with visual impairments the ability to participate in\n * consuming non-text content. When a screen readers encounters an `s-image`,\n * the description is read and announced aloud. If an image fails to load,\n * potentially due to a poor connection, the `alt` is displayed on\n * screen instead. This has the benefit of letting a sighted buyer know an\n * image was meant to load here, but as an alternative, they’re still able to\n * consume the text content. Read\n * [considerations when writing alternative text](https://www.shopify.com/ca/blog/image-alt-text#4)\n * to learn more.\n * @default `''`\n * @see ://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#alt\n */\n alt?: string;\n}" + } + }, + "BorderRadiusKeyword": { + "src/surfaces/point-of-sale/components.ts": { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "BorderRadiusKeyword", + "value": "SizeKeyword | 'max' | 'none'", + "description": "" } }, "PageSlots": { 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. *