diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/components/Stack.doc.ts b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/components/Stack.doc.ts
index 78bd139fd..3e7c7de84 100644
--- a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/components/Stack.doc.ts
+++ b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/components/Stack.doc.ts
@@ -9,6 +9,11 @@ const generateCodeBlockForStack = (title: string, fileName: string) => {
code: `../examples/stack/${fileName}.tsx`,
language: 'tsx',
},
+ {
+ title: 'TS',
+ code: `../examples/stack/${fileName}.ts`,
+ language: 'ts',
+ },
],
};
};
@@ -123,16 +128,16 @@ You can center your block stack on the vertical axis by setting \`justifyContent
},
{
type: 'Generic',
- anchorLink: 'block-align-contents-stretch',
+ anchorLink: 'block-align-content-stretch',
title: 'Block Stack with horizontal stretching',
sectionContent: `
This example demonstrates a block stack with elements stretched to fill the container width. By setting \`alignContents\` to \`stretch\`, the children will expand to fill the available horizontal space. This is useful when you want all elements to have consistent width, regardless of their content.
`,
codeblock: generateCodeBlockForStack(
'Block Stack with stretched contents',
- 'block-align-contents-stretch',
+ 'block-align-content-stretch',
),
- image: 'extension-stack-block-align-contents-stretch.png',
+ image: 'extension-stack-block-align-content-stretch.png',
},
{
type: 'Generic',
diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block-align-contents-stretch.ts b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block-align-content-stretch.ts
similarity index 100%
rename from packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block-align-contents-stretch.ts
rename to packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block-align-content-stretch.ts
diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block-align-content-stretch.tsx b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block-align-content-stretch.tsx
new file mode 100644
index 000000000..223d1dfca
--- /dev/null
+++ b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block-align-content-stretch.tsx
@@ -0,0 +1,27 @@
+import {
+ reactExtension,
+ SegmentedControl,
+ Stack,
+ Screen,
+} from '@shopify/ui-extensions-react/point-of-sale';
+import React from 'react';
+
+export default reactExtension('pos.home.modal.render', () => (
+
+
+ console.log(`Selected segment with id: ${id}`)}
+ />
+
+
+));
diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block-align-contents-stretch.tsx b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block-align-contents-stretch.tsx
deleted file mode 100644
index e468cb345..000000000
--- a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block-align-contents-stretch.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import {
- Stack,
- SegmentedControl,
- Screen,
-} from '@shopify/ui-extensions/point-of-sale';
-
-export function BlockStackAlignContentsStretch() {
- return (
-
-
-
- console.log(`Selected segment with id: ${id}`)
- }
- />
-
-
- );
-}
diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block-center-all.ts b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block-center-all.ts
new file mode 100644
index 000000000..35ba82eaf
--- /dev/null
+++ b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block-center-all.ts
@@ -0,0 +1,37 @@
+import {
+ extension,
+ Button,
+ Screen,
+ Stack,
+} from '@shopify/ui-extensions/point-of-sale';
+
+export default extension('pos.home.modal.render', (root) => {
+ const button1 = root.createComponent(Button, {
+ title: 'Hello',
+ });
+
+ const button2 = root.createComponent(Button, {
+ title: 'Hello',
+ });
+
+ const stack = root.createComponent(Stack, {
+ direction: 'block',
+ justifyContent: 'center',
+ alignContent: 'center',
+ alignItems: 'center',
+ inlineSize: '100%',
+ paddingInline: '450',
+ blockSize: '50%',
+ gap: '200',
+ });
+ stack.append(button1, button2);
+
+ const screen = root.createComponent(Screen, {
+ name: 'Stack',
+ title: 'Stack',
+ });
+ screen.append(stack);
+ root.append(screen);
+
+ root.mount();
+});
diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block-center-all.tsx b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block-center-all.tsx
index f5255fc48..61bfcab74 100644
--- a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block-center-all.tsx
+++ b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block-center-all.tsx
@@ -1,15 +1,25 @@
-
-
-
-
-
-;
+import {
+ reactExtension,
+ Button,
+ Stack,
+ Screen,
+} from '@shopify/ui-extensions-react/point-of-sale';
+import React from 'react';
+
+export default reactExtension('pos.home.modal.render', () => (
+
+
+
+
+
+
+));
diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block-space-between.ts b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block-space-between.ts
new file mode 100644
index 000000000..82c731133
--- /dev/null
+++ b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block-space-between.ts
@@ -0,0 +1,38 @@
+import {
+ extension,
+ Button,
+ Screen,
+ Stack,
+} from '@shopify/ui-extensions/point-of-sale';
+
+export default extension('pos.home.modal.render', (root) => {
+ const button1 = root.createComponent(Button, {
+ title: 'Hello',
+ });
+
+ const button2 = root.createComponent(Button, {
+ title: 'Hello',
+ });
+
+ const button3 = root.createComponent(Button, {
+ title: 'Hello',
+ });
+
+ const stack = root.createComponent(Stack, {
+ direction: 'block',
+ gap: '200',
+ justifyContent: 'space-between',
+ blockSize: '50%',
+ paddingInline: '450',
+ });
+ stack.append(button1, button2, button3);
+
+ const screen = root.createComponent(Screen, {
+ name: 'Stack',
+ title: 'Stack',
+ });
+ screen.append(stack);
+ root.append(screen);
+
+ root.mount();
+});
diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block-space-between.tsx b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block-space-between.tsx
index 3616c4486..2d649c6af 100644
--- a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block-space-between.tsx
+++ b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block-space-between.tsx
@@ -1,12 +1,23 @@
-
-
-
-
-
-;
+import {
+ reactExtension,
+ Button,
+ Stack,
+ Screen,
+} from '@shopify/ui-extensions-react/point-of-sale';
+import React from 'react';
+
+export default reactExtension('pos.home.modal.render', () => (
+
+
+
+
+
+
+
+));
diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block.ts b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block.ts
new file mode 100644
index 000000000..f89fed192
--- /dev/null
+++ b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block.ts
@@ -0,0 +1,36 @@
+import {
+ extension,
+ Button,
+ Screen,
+ Stack,
+} from '@shopify/ui-extensions/point-of-sale';
+
+export default extension('pos.home.modal.render', (root) => {
+ const button1 = root.createComponent(Button, {
+ title: 'Hello',
+ });
+
+ const button2 = root.createComponent(Button, {
+ title: 'Hello',
+ });
+
+ const button3 = root.createComponent(Button, {
+ title: 'Hello',
+ });
+
+ const stack = root.createComponent(Stack, {
+ direction: 'block',
+ gap: '200',
+ paddingInline: '450',
+ });
+ stack.append(button1, button2, button3);
+
+ const screen = root.createComponent(Screen, {
+ name: 'Stack',
+ title: 'Stack',
+ });
+ screen.append(stack);
+ root.append(screen);
+
+ root.mount();
+});
diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block.tsx b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block.tsx
index b1ff8dd82..276cc5215 100644
--- a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block.tsx
+++ b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/block.tsx
@@ -1,6 +1,17 @@
-
-
-
-
-
-;
+import {
+ reactExtension,
+ Button,
+ Stack,
+ Screen,
+} from '@shopify/ui-extensions-react/point-of-sale';
+import React from 'react';
+
+export default reactExtension('pos.home.modal.render', () => (
+
+
+
+
+
+
+
+));
diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/inline-align-items-center.ts b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/inline-align-items-center.ts
new file mode 100644
index 000000000..97cee1896
--- /dev/null
+++ b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/inline-align-items-center.ts
@@ -0,0 +1,47 @@
+import {
+ extension,
+ Button,
+ Screen,
+ Stack,
+ ScrollView,
+} from '@shopify/ui-extensions/point-of-sale';
+
+export default extension('pos.home.modal.render', (root) => {
+ const button1 = root.createComponent(Button, {
+ title: 'Hello',
+ });
+
+ const button2 = root.createComponent(Button, {
+ title: 'Hello',
+ });
+
+ const button3 = root.createComponent(Button, {
+ title: 'Hello',
+ });
+
+ const innerStack = root.createComponent(Stack, {
+ direction: 'block',
+ gap: '200',
+ });
+ innerStack.append(button1, button2);
+
+ const mainStack = root.createComponent(Stack, {
+ direction: 'inline',
+ gap: '200',
+ alignItems: 'center',
+ alignContent: 'center',
+ });
+ mainStack.append(innerStack, button3);
+
+ const scrollView = root.createComponent(ScrollView);
+ scrollView.append(mainStack);
+
+ const screen = root.createComponent(Screen, {
+ name: 'Stack',
+ title: 'Stack',
+ });
+ screen.append(scrollView);
+ root.append(screen);
+
+ root.mount();
+});
diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/inline-align-items-center.tsx b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/inline-align-items-center.tsx
index 13bca320d..2f3f40f30 100644
--- a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/inline-align-items-center.tsx
+++ b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/inline-align-items-center.tsx
@@ -1,16 +1,27 @@
-
-
-
-
-
-
+import {
+ reactExtension,
+ Button,
+ Stack,
+ Screen,
+ ScrollView,
+} from '@shopify/ui-extensions-react/point-of-sale';
+import React from 'react';
+
+export default reactExtension('pos.home.modal.render', () => (
+
+
+
+
+
+
+
+
-
-
-
-;
+
+
+));
diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/inline-center-children.ts b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/inline-center-children.ts
new file mode 100644
index 000000000..fcd6cb4a3
--- /dev/null
+++ b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/inline-center-children.ts
@@ -0,0 +1,32 @@
+import {
+ extension,
+ Button,
+ Screen,
+ Stack,
+} from '@shopify/ui-extensions/point-of-sale';
+
+export default extension('pos.home.modal.render', (root) => {
+ const button1 = root.createComponent(Button, {
+ title: 'Hello',
+ });
+
+ const button2 = root.createComponent(Button, {
+ title: 'Hello',
+ });
+
+ const stack = root.createComponent(Stack, {
+ direction: 'inline',
+ gap: '200',
+ justifyContent: 'center',
+ });
+ stack.append(button1, button2);
+
+ const screen = root.createComponent(Screen, {
+ name: 'Stack',
+ title: 'Stack',
+ });
+ screen.append(stack);
+ root.append(screen);
+
+ root.mount();
+});
diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/inline-center-children.tsx b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/inline-center-children.tsx
index 760eae064..683ed06c7 100644
--- a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/inline-center-children.tsx
+++ b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/inline-center-children.tsx
@@ -1,8 +1,16 @@
-
-
+import {
+ reactExtension,
+ Button,
+ Stack,
+ Screen,
+} from '@shopify/ui-extensions-react/point-of-sale';
+import React from 'react';
+
+export default reactExtension('pos.home.modal.render', () => (
+
-
-;
+
+));
diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/inline-default.ts b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/inline-default.ts
new file mode 100644
index 000000000..a183c6821
--- /dev/null
+++ b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/inline-default.ts
@@ -0,0 +1,31 @@
+import {
+ extension,
+ Button,
+ Screen,
+ Stack,
+} from '@shopify/ui-extensions/point-of-sale';
+
+export default extension('pos.home.modal.render', (root) => {
+ const button1 = root.createComponent(Button, {
+ title: 'Hello',
+ });
+
+ const button2 = root.createComponent(Button, {
+ title: 'Hello',
+ });
+
+ const stack = root.createComponent(Stack, {
+ direction: 'inline',
+ gap: '200',
+ });
+ stack.append(button1, button2);
+
+ const screen = root.createComponent(Screen, {
+ name: 'Stack',
+ title: 'Stack',
+ });
+ screen.append(stack);
+ root.append(screen);
+
+ root.mount();
+});
diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/inline-default.tsx b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/inline-default.tsx
index ab2714494..4bea04124 100644
--- a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/inline-default.tsx
+++ b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/inline-default.tsx
@@ -1,8 +1,16 @@
-
-
+import {
+ reactExtension,
+ Button,
+ Stack,
+ Screen,
+} from '@shopify/ui-extensions-react/point-of-sale';
+import React from 'react';
+
+export default reactExtension('pos.home.modal.render', () => (
+
-
-;
+
+));
diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/inline-flex-children.ts b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/inline-flex-children.ts
new file mode 100644
index 000000000..ead18be75
--- /dev/null
+++ b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/inline-flex-children.ts
@@ -0,0 +1,32 @@
+import {
+ extension,
+ Button,
+ Screen,
+ Stack,
+} from '@shopify/ui-extensions/point-of-sale';
+
+export default extension('pos.home.modal.render', (root) => {
+ const button1 = root.createComponent(Button, {
+ title: 'Hello',
+ });
+
+ const button2 = root.createComponent(Button, {
+ title: 'Hello',
+ });
+
+ const stack = root.createComponent(Stack, {
+ direction: 'inline',
+ gap: '200',
+ flexChildren: true,
+ });
+ stack.append(button1, button2);
+
+ const screen = root.createComponent(Screen, {
+ name: 'Stack',
+ title: 'Stack',
+ });
+ screen.append(stack);
+ root.append(screen);
+
+ root.mount();
+});
diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/inline-flex-children.tsx b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/inline-flex-children.tsx
index 5465255e0..3aff81efe 100644
--- a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/inline-flex-children.tsx
+++ b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/inline-flex-children.tsx
@@ -1,8 +1,16 @@
-
-
+import {
+ reactExtension,
+ Button,
+ Stack,
+ Screen,
+} from '@shopify/ui-extensions-react/point-of-sale';
+import React from 'react';
+
+export default reactExtension('pos.home.modal.render', () => (
+
-
-;
+
+));
diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/nested.ts b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/nested.ts
new file mode 100644
index 000000000..6e912744b
--- /dev/null
+++ b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/nested.ts
@@ -0,0 +1,63 @@
+import {
+ extension,
+ Text,
+ Icon,
+ Screen,
+ Stack,
+ Selectable,
+} from '@shopify/ui-extensions/point-of-sale';
+
+export default extension('pos.home.modal.render', (root) => {
+ const label1 = root.createComponent(Text);
+ label1.append('Hello world!');
+
+ const label2 = root.createComponent(Text, {variant: 'captionRegular'});
+ label2.append('This is an example of a nested stack!');
+
+ const price = root.createComponent(Text);
+ price.append("Let's go!");
+
+ const icon = root.createComponent(Icon, {
+ name: 'chevron-right',
+ });
+
+ const leftStack = root.createComponent(Stack, {
+ direction: 'block',
+ gap: '100',
+ });
+ leftStack.append(label1, label2);
+
+ const rightStack = root.createComponent(Stack, {
+ direction: 'inline',
+ gap: '600',
+ alignItems: 'center',
+ alignContent: 'center',
+ });
+ rightStack.append(price, icon);
+
+ const mainStack = root.createComponent(Stack, {
+ direction: 'inline',
+ gap: '400',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ alignContent: 'center',
+ paddingInline: '450',
+ paddingBlock: '600',
+ inlineSize: '100%',
+ });
+ mainStack.append(leftStack, rightStack);
+
+ const selectable = root.createComponent(Selectable, {
+ onPress: () => console.log('Pressed'),
+ });
+ selectable.append(mainStack);
+
+ const screen = root.createComponent(Screen, {
+ name: 'Stack',
+ title: 'Stack',
+ });
+ screen.append(selectable);
+ root.append(screen);
+
+ root.mount();
+});
diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/nested.tsx b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/nested.tsx
index 56fc58af6..0030faf46 100644
--- a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/nested.tsx
+++ b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/stack/nested.tsx
@@ -1,29 +1,42 @@
-
- {}}>
-
-
- Hello world!
-
- This is an example of nested stacks!
-
-
+import {
+ reactExtension,
+ Text,
+ Icon,
+ Stack,
+ Screen,
+ Selectable,
+} from '@shopify/ui-extensions-react/point-of-sale';
+import React from 'react';
+
+export default reactExtension('pos.home.modal.render', () => (
+
+ console.log('Pressed')}>
- Let's go!
-
+
+ Hello world!
+
+ This is an example of a nested stack!
+
+
+
+ Let's go!
+
+
-
-
-;
+
+
+));