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/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..6e375d42bc 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": "Border radius for the image corners.\n\n[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:\n\n- 4 values: `start-start start-end end-end end-start`\n- 3 values: `start-start (start-end & end-start) end-end`\n- 2 values: `(start-start & end-end) (start-end & end-start)`\n\nFor example:\n- `base` means all corners have `base` radius\n- `base none` means start-start and end-end corners are `base`, start-end and end-start corners are `none`\n- `base none large` means start-start is `base`, start-end and end-start are `none`, end-end is `large`\n- `base none large small` means start-start is `base`, start-end is `none`, end-end is `large`, end-start is `small`", + "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 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 /**\n * Border radius for the image corners.\n *\n * [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is\n * supported. Note that, contrary to CSS, it uses flow-relative values and the order is:\n *\n * - 4 values: `start-start start-end end-end end-start`\n * - 3 values: `start-start (start-end & end-start) end-end`\n * - 2 values: `(start-start & end-end) (start-end & end-start)`\n *\n * For example:\n * - `base` means all corners have `base` radius\n * - `base none` means start-start and end-end corners are `base`, start-end and end-start corners are `none`\n * - `base none large` means start-start is `base`, start-end and end-start are `none`, end-end is `large`\n * - `base none large small` means start-start is `base`, start-end is `none`, end-end is `large`, end-start is `small`\n *\n * @default 'none'\n */\n borderRadius?: MaybeAllValuesShorthandProperty;\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..57129a5bb9 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 {