Migrate InlineSpacer

The previous InlineSpacer component has been removed. There's no direct replacement. Use <s-stack> with direction="inline" and the gap prop to create spacing between sibling elements.

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <s-stack direction="inline" gap="large-200">
      <s-text>Left</s-text>
      <s-text>Right</s-text>
    </s-stack>
  );
}

import {
  reactExtension,
  InlineSpacer,
  Text,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <>
      <Text>Left</Text>
      <InlineSpacer spacing="loose" />
      <Text>Right</Text>
    </>
  );
}

Anchor to Spacing valuesSpacing values

The previous InlineSpacer spacing values map to the Polaris stack gap token scale:

The new token scale also adds 'small-500', 'small-300', 'small-100', 'small', 'large', 'large-100', 'large-300', and 'large-400'.

For more on the scale system, see Scale.