POS Image Sizing & Box Component

[merkoyep]

Background

https://github.com/Shopify/pos-next-react-native/issues/26551

Using the POS UI Extensions package, Images were unable to be resized. As a result, developers were experiencing challenges with displaying content using images such as QR codes. This PR aims to address these problems by exposing sizing options for image, as well as add a Box component, which will allow for images to be resized according to the dimensions of the box.

This is one of two PRs:

1. UI Extensions (This PR)

• Add Image and Box to the UI Extensions Component library
• Add documentation for Box and Update documentation for Image

2. POS-Next

• Maps Image props to POS
• Maps Box component to POS using Box from the POS design system.

Solution

• Create a Box component in the UI Extensions Component Library with all props following ui api design conventions for box.
• Add size and resizeMode props for Image, following the provided standards from the POS Design System for Image.
• Add code examples in Typescript and React for Box.

Block	Modal
Block.Image.and.Box.Examples.mov	Box.Demo.Modal.mov

🎩

• For tophatting, pull down this branch and the accompanying branch for POS-Next.
• Install this UI Extensions package locally into your instance of POS-next using the yalc-local-extensions script.
• Use an existing extension, or scaffold a new extension. Run the yalc-local-extensions script in your app, and use the following code in a modal and block extension to test the box and image components:
• Also test out padding props for Box.

import React from "react";

import {
  Box,
  Image,
  Navigator,
  Screen,
  ScrollView,
  SectionHeader,
  reactExtension,
} from ".yalc/@shopify/ui-extensions-react/src/surfaces/point-of-sale";

const ImageModal = () => {
  return (
    <Navigator>
      <Screen name="ImageBox" title="ImageBox">
        <ScrollView>
          <SectionHeader title="Box-Contain" />
          <Box blockSize={600} inlineSize={600}>
            <Image
              src="https://cdn.shopify.com/b/shopify-brochure2-assets/1f81af12915c2cf0e8e2aa228f4eb80f.png"
              size="fill"
              resizeMode="contain"
            />
          </Box>
          <SectionHeader title="Box-Cover" />
          <Box blockSize={600} inlineSize={600}>
            <Image
              src="https://cdn.shopify.com/b/shopify-brochure2-assets/1f81af12915c2cf0e8e2aa228f4eb80f.png"
              size="fill"
              resizeMode="cover"
            />
          </Box>
          <SectionHeader title="Box-Stretch" />
          <Box blockSize={600} inlineSize={600}>
            <Image
              src="https://cdn.shopify.com/b/shopify-brochure2-assets/1f81af12915c2cf0e8e2aa228f4eb80f.png"
              size="fill"
              resizeMode="stretch"
            />
          </Box>
          <SectionHeader title="Box-Center" />
          <Box blockSize={600} inlineSize={600}>
            <Image
              src="https://cdn.shopify.com/b/shopify-brochure2-assets/1f81af12915c2cf0e8e2aa228f4eb80f.png"
              size="fill"
              resizeMode="center"
            />
          </Box>
          <SectionHeader title="Box-Repeat" />
          <Box blockSize={600} inlineSize={600}>
            <Image
              src="https://cdn.shopify.com/b/shopify-brochure2-assets/1f81af12915c2cf0e8e2aa228f4eb80f.png"
              size="fill"
              resizeMode="repeat"
            />
          </Box>
          <SectionHeader title="Image Small" />

          <Image
            src="https://cdn.shopify.com/b/shopify-brochure2-assets/1f81af12915c2cf0e8e2aa228f4eb80f.png"
            size="s"
          />
          <SectionHeader title="Image Medium" />

          <Image
            src="https://cdn.shopify.com/b/shopify-brochure2-assets/1f81af12915c2cf0e8e2aa228f4eb80f.png"
            size="m"
          />
          <SectionHeader title="Image Large" />

          <Image
            src="https://cdn.shopify.com/b/shopify-brochure2-assets/1f81af12915c2cf0e8e2aa228f4eb80f.png"
            size="l"
          />
          <SectionHeader title="Image X-Large" />

          <Image
            src="https://cdn.shopify.com/b/shopify-brochure2-assets/1f81af12915c2cf0e8e2aa228f4eb80f.png"
            size="xl"
          />
        </ScrollView>
      </Screen>
    </Navigator>
  );
};

export default reactExtension("pos.home.modal.render", () => <ImageModal />);


import React from "react";

import {
  Box,
  Image,
  POSBlock,
  POSBlockRow,
  reactExtension,
  Text,
} from ".yalc/@shopify/ui-extensions-react/src/surfaces/point-of-sale";

const ImageBox = () => {
  return (
    <POSBlock>
      <POSBlockRow>
        <Text variant="headingSmall">Box-Contain</Text>
        <Box blockSize={300} inlineSize={600}>
          <Image
            src="https://cdn.shopify.com/b/shopify-brochure2-assets/1f81af12915c2cf0e8e2aa228f4eb80f.png"
            size="fill"
            resizeMode="contain"
          />
        </Box>
      </POSBlockRow>
      <POSBlockRow>
        <Text variant="headingSmall">Box-Cover</Text>
        <Box blockSize={300} inlineSize={600}>
          <Image
            src="https://cdn.shopify.com/b/shopify-brochure2-assets/1f81af12915c2cf0e8e2aa228f4eb80f.png"
            size="fill"
            resizeMode="cover"
          />
        </Box>
      </POSBlockRow>
      <POSBlockRow>
        <Text variant="headingSmall">Box-Stretch</Text>
        <Box blockSize={300} inlineSize={600}>
          <Image
            src="https://cdn.shopify.com/b/shopify-brochure2-assets/1f81af12915c2cf0e8e2aa228f4eb80f.png"
            size="fill"
            resizeMode="stretch"
          />
        </Box>
      </POSBlockRow>
      <POSBlockRow>
        <Text variant="headingSmall">Box-Center</Text>
        <Box blockSize={300} inlineSize={600}>
          <Image
            src="https://cdn.shopify.com/b/shopify-brochure2-assets/1f81af12915c2cf0e8e2aa228f4eb80f.png"
            size="fill"
            resizeMode="center"
          />
        </Box>
      </POSBlockRow>
      <POSBlockRow>
        <Text variant="headingSmall">Box-Repeat</Text>
        <Box blockSize={300} inlineSize={600}>
          <Image
            src="https://cdn.shopify.com/b/shopify-brochure2-assets/1f81af12915c2cf0e8e2aa228f4eb80f.png"
            size="fill"
            resizeMode="repeat"
          />
        </Box>
      </POSBlockRow>
      <POSBlockRow>
        <Text variant="headingSmall">Small</Text>
        <Image
          src="https://cdn.shopify.com/b/shopify-brochure2-assets/1f81af12915c2cf0e8e2aa228f4eb80f.png"
          size="s"
        />
      </POSBlockRow>
      <POSBlockRow>
        <Text variant="headingSmall">Medium</Text>
        <Image
          src="https://cdn.shopify.com/b/shopify-brochure2-assets/1f81af12915c2cf0e8e2aa228f4eb80f.png"
          size="m"
        />
      </POSBlockRow>
      <POSBlockRow>
        <Text variant="headingSmall">Large</Text>
        <Image
          src="https://cdn.shopify.com/b/shopify-brochure2-assets/1f81af12915c2cf0e8e2aa228f4eb80f.png"
          size="l"
        />
      </POSBlockRow>
      <POSBlockRow>
        <Text variant="headingSmall">X-Large</Text>
        <Image
          src="https://cdn.shopify.com/b/shopify-brochure2-assets/1f81af12915c2cf0e8e2aa228f4eb80f.png"
          size="xl"
        />
      </POSBlockRow>
    </POSBlock>
  );
};

export default reactExtension("pos.customer-details.block.render", () => (
  <ImageBox />
));

Checklist

• I have 🎩'd these changes
• I have updated relevant documentation

[github-actions]

We detected some changes in packages/*/package.json or packages/*/src, and there are no updates in the .changeset directory. If the changes are user-facing and should cause a version bump, run yarn changeset to track your changes and include them in the next release CHANGELOG. If you are making simple updates to repo configuration, examples, or documentation, you do not need to add a changeset.

[js-goupil]

Looks solid so far! I think we need to make sure we follow the UI API Design guide since this is a net new component. Let me know if you want to pair on this

[js-goupil]

LGTM. If we find anything as we play with it write and examples we can fix it