Merge pull request #2524 from Shopify/my/ImageSizingOptions

POS Image Sizing & Box Component

packages/ui-extensions-react/src/surfaces/point-of-sale.ts

@@ -24,6 +24,8 @@ export type {
   IconSize,
   IconProps,
   ImageProps,
+  ImageSize,
+  FillResizeMode,
   ToggleSwitch,
   SubtitleType,
   ListRowSubtitle,
@@ -71,4 +73,11 @@ export type {
   TileProps,
   TimeFieldProps,
   TimePickerProps,
+  PaddingProps,
+  SizingProps,
+  SizeUnits,
+  SizeUnitsOrAuto,
+  SizeUnitsOrNone,
+  BoxProps,
+  SizeKeyword,
 } from '@shopify/ui-extensions/point-of-sale';

packages/ui-extensions-react/src/surfaces/point-of-sale/components.ts

@@ -1,5 +1,6 @@
 export {Badge} from './components/Badge/Badge';
 export {Banner} from './components/Banner/Banner';
+export {Box} from './components/Box/Box';
 export {Button} from './components/Button/Button';
 export {CameraScanner} from './components/CameraScanner/CameraScanner';
 export {DateField} from './components/DateField/DateField';

packages/ui-extensions-react/src/surfaces/point-of-sale/components/Box/Box.ts

@@ -0,0 +1,4 @@
+import {Box as BaseBox} from '@shopify/ui-extensions/point-of-sale';
+import {createRemoteReactComponent} from '@remote-ui/react';
+
+export const Box = createRemoteReactComponent(BaseBox);

packages/ui-extensions/docs/surfaces/point-of-sale/staticPages/pages/versions.doc.ts

@@ -60,6 +60,8 @@ Refer to the [migration guide](/docs/api/pos-ui-extensions/migrating) for more i
 - Added \`currency\` prop to the [SessionApi](/docs/api/pos-ui-extensions/apis/session-api).
 - [Cart API](/docs/api/pos-ui-extensions/apis/cart-api) updates:
   - \`addLineItem\` and \`addCustomSale\` now return a UUID for the created item.
+- Added [Box](/docs/api/pos-ui-extensions/components/box) component.
+- Added Sizing and fill options to the[Image](/docs/api/pos-ui-extensions/components/image) component.
       `,
     },
     {

packages/ui-extensions/src/surfaces/point-of-sale/components.ts

@@ -9,6 +9,8 @@ export type {
   BannerProps,
   BannerVariant,
 } from './render/components/Banner/Banner';
+export {Box} from './render/components/Box/Box';
+export type {BoxProps} from './render/components/Box/Box';
 export {Button} from './render/components/Button/Button';
 export type {ButtonProps, ButtonType} from './render/components/Button/Button';
 export {CameraScanner} from './render/components/CameraScanner/CameraScanner';
@@ -33,7 +35,11 @@ export type {
   IconSize,
 } from './render/components/Icon/Icon';
 export {Image} from './render/components/Image/Image';
-export type {ImageProps} from './render/components/Image/Image';
+export type {
+  ImageProps,
+  ImageSize,
+  FillResizeMode,
+} from './render/components/Image/Image';
 export {List} from './render/components/List/List';
 export type {
   ListProps,
@@ -123,3 +129,12 @@ export type {
 } from './render/components/shared/InputField';
 export {SectionHeader} from './render/components/SectionHeader/SectionHeader';
 export type {SectionHeaderProps} from './render/components/SectionHeader/SectionHeader';
+
+export type {
+  PaddingProps,
+  SizingProps,
+  SizeUnits,
+  SizeUnitsOrAuto,
+  SizeUnitsOrNone,
+} from './render/components/shared/box';
+export type {SizeKeyword} from './render/components/shared/sizes';

packages/ui-extensions/src/surfaces/point-of-sale/render/components/Box/Box.ts

@@ -0,0 +1,6 @@
+import {createRemoteComponent} from '@remote-ui/core';
+import {PaddingProps, SizingProps} from '../shared/box';
+
+export interface BoxProps extends PaddingProps, SizingProps {}
+
+export const Box = createRemoteComponent<'Box', BoxProps>('Box');

packages/ui-extensions/src/surfaces/point-of-sale/render/components/Image/Image.ts

@@ -1,10 +1,27 @@
 import {createRemoteComponent} from '@remote-ui/core';
 
+export type ImageSize = 's' | 'm' | 'l' | 'xl';
+
+export type FillResizeMode =
+  /**
+   * FillResizeMode will apply formatting to the image to fill the container.
+   *
+   * https://reactnative.dev/docs/image#resizemode
+   */
+  'cover' | 'contain' | 'stretch' | 'repeat' | 'center';
+
 export interface ImageProps {
   /**
    * The source of the image to be displayed.
    */
   src?: string;
+
+  /**
+   * The size or fill size of the image.
+   *
+   * @default 'l'
+   */
+  size?: ImageSize | FillResizeMode;
 }
 
 export const Image = createRemoteComponent<'Image', ImageProps>('Image');

packages/ui-extensions/src/surfaces/point-of-sale/render/components/shared/box.ts

@@ -0,0 +1,131 @@
+import {SizeKeyword} from './sizes';
+
+export type PaddingKeys = SizeKeyword | 'none';
+
+export interface PaddingProps {
+  /**
+   * Adjust the padding of all edges in pixels.
+   *
+   * @default '0'
+   */
+  padding?: PaddingKeys;
+
+  /**
+   * Adjust the block-padding.
+   *
+   * This overrides the block value of `padding`.
+   *
+   * @default '0'
+   */
+  paddingBlock?: PaddingKeys;
+
+  /**
+   * Adjust the block-start padding.
+   *
+   * This overrides the block-start value of `paddingBlock`.
+   *
+   * @default '0'
+   */
+  paddingBlockStart?: PaddingKeys;
+
+  /**
+   * Adjust the block-end padding.
+   *
+   * This overrides the block-end value of `paddingBlock`.
+   *
+   * @default '0'
+   */
+  paddingBlockEnd?: PaddingKeys;
+
+  /**
+   * Adjust the inline padding.
+   *
+   *
+   * This overrides the inline value of `padding`.
+   *
+   * @default '0'
+   */
+  paddingInline?: PaddingKeys;
+
+  /**
+   * Adjust the inline-start padding.
+   *
+   * This overrides the inline-start value of `paddingInline`.
+   *
+   * @default '0'
+   */
+  paddingInlineStart?: PaddingKeys;
+
+  /**
+   * Adjust the inline-end padding.
+   *
+   * This overrides the inline-end value of `paddingInline`.
+
+   * @default '0'
+   */
+  paddingInlineEnd?: PaddingKeys;
+}
+
+export type SizeUnits = `${number}px` | `${number}%` | `0`;
+export type SizeUnitsOrNone = SizeUnits | 'none';
+export type SizeUnitsOrAuto = SizeUnits | 'auto';
+
+export interface SizingProps {
+  /**
+   * Adjust the block size.
+   *
+   * Auto takes the block size of the box's children.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/block-size
+   *
+   * @default 'auto'
+   */
+  blockSize?: SizeUnitsOrAuto;
+
+  /**
+   * Adjust the minimum block size.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size
+   *
+   * @default '0'
+   */
+  minBlockSize?: SizeUnits;
+
+  /**
+   * Adjust the maximum block size.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size
+   *
+   * @default 'none'
+   */
+  maxBlockSize?: SizeUnitsOrNone;
+
+  /**
+   * Adjust the inline size.
+   *
+   * Auto takes the inline size of the box's children.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size
+   *
+   * @default 'auto'
+   */
+  inlineSize?: SizeUnitsOrAuto;
+
+  /**
+   * Adjust the minimum inline size.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size
+   *
+   * @default '0'
+   */
+  minInlineSize?: SizeUnits;
+
+  /**
+   * Adjust the maximum inline size.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size
+   *
+   * @default 'none'
+   */
+  maxInlineSize?: SizeUnitsOrNone;
+}

packages/ui-extensions/src/surfaces/point-of-sale/render/components/shared/sizes.ts

@@ -0,0 +1,22 @@
+export type SizeKeyword =
+  | '0'
+  | '025'
+  | '050'
+  | '100'
+  | '200'
+  | '250'
+  | '300'
+  | '350'
+  | '400'
+  | '450'
+  | '500'
+  | '600'
+  | '700'
+  | '800'
+  | '900'
+  | '1000'
+  | '1100'
+  | '1200'
+  | '1400'
+  | '1800'
+  | '2000';