-
+
+ Before fulfilling this order or capturing payment, please review the + fraud analysis and determine if this order is fraudulent +
++ Add weights to show accurate rates at checkout and when buying shipping + labels in Shopify. +
+
+
+
+
+ );
+};
+
+export default withPolarisExample(BleedAllDirectionsExample);
diff --git a/polaris.shopify.com/app/examples/bleed-horizontal/page.tsx b/polaris.shopify.com/app/examples/bleed-horizontal/page.tsx
new file mode 100644
index 00000000000..7bf5822f5b4
--- /dev/null
+++ b/polaris.shopify.com/app/examples/bleed-horizontal/page.tsx
@@ -0,0 +1,43 @@
+'use client';
+
+import React from 'react';
+import {Bleed, Box, Text, Inline} from '@shopify/polaris';
+
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function BleedHorizontalExample() {
+ return (
+
+
+ {label}
+
+
+
+
+
+
+ );
+};
+
+export default withPolarisExample(BleedHorizontalExample);
diff --git a/polaris.shopify.com/app/examples/bleed-specific-direction/page.tsx b/polaris.shopify.com/app/examples/bleed-specific-direction/page.tsx
new file mode 100644
index 00000000000..bba3b996aae
--- /dev/null
+++ b/polaris.shopify.com/app/examples/bleed-specific-direction/page.tsx
@@ -0,0 +1,60 @@
+'use client';
+
+import React from 'react';
+import {AlphaStack, Bleed, Box, Text, Inline} from '@shopify/polaris';
+
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function BleedSpecificDirectionExample() {
+ return (
+
+
+ {label}
+
+
+
+
+
+
+ );
+};
+
+export default withPolarisExample(BleedSpecificDirectionExample);
diff --git a/polaris.shopify.com/app/examples/bleed-vertical/page.tsx b/polaris.shopify.com/app/examples/bleed-vertical/page.tsx
new file mode 100644
index 00000000000..cded710fec8
--- /dev/null
+++ b/polaris.shopify.com/app/examples/bleed-vertical/page.tsx
@@ -0,0 +1,43 @@
+'use client';
+
+import React from 'react';
+import {Bleed, Box, Text, Inline} from '@shopify/polaris';
+
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function BleedVerticalExample() {
+ return (
+
+
+ {label}
+
+
+
+
+
+
+ );
+};
+
+export default withPolarisExample(BleedVerticalExample);
diff --git a/polaris.shopify.com/app/examples/box-default/page.tsx b/polaris.shopify.com/app/examples/box-default/page.tsx
new file mode 100644
index 00000000000..faf15b50fde
--- /dev/null
+++ b/polaris.shopify.com/app/examples/box-default/page.tsx
@@ -0,0 +1,38 @@
+'use client';
+
+import React from 'react';
+import {Box, Text} from '@shopify/polaris';
+
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function BoxDefaultExample() {
+ return (
+
+
+ {label}
+
+
+
+
+ );
+};
+
+export default withPolarisExample(BoxDefaultExample);
diff --git a/polaris.shopify.com/app/examples/box-with-border-radius/page.tsx b/polaris.shopify.com/app/examples/box-with-border-radius/page.tsx
new file mode 100644
index 00000000000..eca5d453ea2
--- /dev/null
+++ b/polaris.shopify.com/app/examples/box-with-border-radius/page.tsx
@@ -0,0 +1,39 @@
+'use client';
+
+import React from 'react';
+import {Box, Text} from '@shopify/polaris';
+
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function BoxWithBorderRadiusExample() {
+ return (
+
+
+ {label}
+
+
+
+
+ );
+};
+
+export default withPolarisExample(BoxWithBorderRadiusExample);
diff --git a/polaris.shopify.com/app/examples/box-with-border/page.tsx b/polaris.shopify.com/app/examples/box-with-border/page.tsx
new file mode 100644
index 00000000000..1a899b8b0a8
--- /dev/null
+++ b/polaris.shopify.com/app/examples/box-with-border/page.tsx
@@ -0,0 +1,38 @@
+'use client';
+
+import React from 'react';
+import {Box, Text} from '@shopify/polaris';
+
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function BoxWithBorderExample() {
+ return (
+
+
+ {label}
+
+
+
+
+ );
+};
+
+export default withPolarisExample(BoxWithBorderExample);
diff --git a/polaris.shopify.com/app/examples/box-with-color/page.tsx b/polaris.shopify.com/app/examples/box-with-color/page.tsx
new file mode 100644
index 00000000000..61f08786d46
--- /dev/null
+++ b/polaris.shopify.com/app/examples/box-with-color/page.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import React from 'react';
+import {Box, Text} from '@shopify/polaris';
+
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function BoxWithColorExample() {
+ return (
+
+
+ {label}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default withPolarisExample(BoxWithPaddingExample);
diff --git a/polaris.shopify.com/app/examples/box-with-shadow/page.tsx b/polaris.shopify.com/app/examples/box-with-shadow/page.tsx
new file mode 100644
index 00000000000..288e06dcb4c
--- /dev/null
+++ b/polaris.shopify.com/app/examples/box-with-shadow/page.tsx
@@ -0,0 +1,38 @@
+'use client';
+
+import React from 'react';
+import {Box, Text} from '@shopify/polaris';
+
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function BoxWithShadowExample() {
+ return (
+
+
+ {label}
+
+
+
+
+ );
+};
+
+export default withPolarisExample(BoxWithShadowExample);
diff --git a/polaris.shopify.com/app/examples/button-default/page.tsx b/polaris.shopify.com/app/examples/button-default/page.tsx
new file mode 100644
index 00000000000..c529b08698c
--- /dev/null
+++ b/polaris.shopify.com/app/examples/button-default/page.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import {Button} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ButtonExample() {
+ return ;
+}
+
+export default withPolarisExample(ButtonExample);
diff --git a/polaris.shopify.com/app/examples/button-destructive/page.tsx b/polaris.shopify.com/app/examples/button-destructive/page.tsx
new file mode 100644
index 00000000000..7db123b2cda
--- /dev/null
+++ b/polaris.shopify.com/app/examples/button-destructive/page.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import {Button} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ButtonExample() {
+ return ;
+}
+
+export default withPolarisExample(ButtonExample);
diff --git a/polaris.shopify.com/app/examples/button-disabled-state/page.tsx b/polaris.shopify.com/app/examples/button-disabled-state/page.tsx
new file mode 100644
index 00000000000..a2cf5a4f186
--- /dev/null
+++ b/polaris.shopify.com/app/examples/button-disabled-state/page.tsx
@@ -0,0 +1,35 @@
+'use client';
+
+import {ButtonGroup, Button} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ButtonExample() {
+ return (
+
+
+ {label}
+
+
+
+
+
+ );
+}
+
+export default withPolarisExample(ButtonExample);
diff --git a/polaris.shopify.com/app/examples/button-outline/page.tsx b/polaris.shopify.com/app/examples/button-outline/page.tsx
new file mode 100644
index 00000000000..7b840543274
--- /dev/null
+++ b/polaris.shopify.com/app/examples/button-outline/page.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import {Button} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ButtonExample() {
+ return ;
+}
+
+export default withPolarisExample(ButtonExample);
diff --git a/polaris.shopify.com/app/examples/button-plain-destructive/page.tsx b/polaris.shopify.com/app/examples/button-plain-destructive/page.tsx
new file mode 100644
index 00000000000..1383bfa38ab
--- /dev/null
+++ b/polaris.shopify.com/app/examples/button-plain-destructive/page.tsx
@@ -0,0 +1,15 @@
+'use client';
+
+import {Button} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ButtonExample() {
+ return (
+
+ );
+}
+
+export default withPolarisExample(ButtonExample);
diff --git a/polaris.shopify.com/app/examples/button-plain-disclosure/page.tsx b/polaris.shopify.com/app/examples/button-plain-disclosure/page.tsx
new file mode 100644
index 00000000000..5af5ed7be2f
--- /dev/null
+++ b/polaris.shopify.com/app/examples/button-plain-disclosure/page.tsx
@@ -0,0 +1,23 @@
+'use client';
+
+import {Button} from '@shopify/polaris';
+import {useState} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function DisclosureButton() {
+ const [expanded, setExpanded] = useState(false);
+
+ return (
+
+ );
+}
+
+export default withPolarisExample(DisclosureButton);
diff --git a/polaris.shopify.com/app/examples/button-plain-monochrome/page.tsx b/polaris.shopify.com/app/examples/button-plain-monochrome/page.tsx
new file mode 100644
index 00000000000..c51d15e3386
--- /dev/null
+++ b/polaris.shopify.com/app/examples/button-plain-monochrome/page.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import {Button} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ButtonExample() {
+ return (
+
+ Could not retrieve data.{' '}
+
+
+ );
+}
+
+export default withPolarisExample(ButtonExample);
diff --git a/polaris.shopify.com/app/examples/button-plain/page.tsx b/polaris.shopify.com/app/examples/button-plain/page.tsx
new file mode 100644
index 00000000000..652202202a5
--- /dev/null
+++ b/polaris.shopify.com/app/examples/button-plain/page.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import {Button} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ButtonExample() {
+ return ;
+}
+
+export default withPolarisExample(ButtonExample);
diff --git a/polaris.shopify.com/app/examples/button-pressed/page.tsx b/polaris.shopify.com/app/examples/button-pressed/page.tsx
new file mode 100644
index 00000000000..5dc439622f5
--- /dev/null
+++ b/polaris.shopify.com/app/examples/button-pressed/page.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import {ButtonGroup, Button} from '@shopify/polaris';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function PressedButton() {
+ const [isFirstButtonActive, setIsFirstButtonActive] = useState(true);
+
+ const handleFirstButtonClick = useCallback(() => {
+ if (isFirstButtonActive) return;
+ setIsFirstButtonActive(true);
+ }, [isFirstButtonActive]);
+
+ const handleSecondButtonClick = useCallback(() => {
+ if (!isFirstButtonActive) return;
+ setIsFirstButtonActive(false);
+ }, [isFirstButtonActive]);
+
+ return (
+
+
+
+ );
+}
+
+export default withPolarisExample(RightAlignedDisclosureButton);
diff --git a/polaris.shopify.com/app/examples/button-select-disclosure/page.tsx b/polaris.shopify.com/app/examples/button-select-disclosure/page.tsx
new file mode 100644
index 00000000000..03f80f0c704
--- /dev/null
+++ b/polaris.shopify.com/app/examples/button-select-disclosure/page.tsx
@@ -0,0 +1,17 @@
+'use client';
+
+import {Button} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ButtonExample() {
+ return (
+
+
+
+ );
+}
+
+export default withPolarisExample(ButtonExample);
diff --git a/polaris.shopify.com/app/examples/button-slim/page.tsx b/polaris.shopify.com/app/examples/button-slim/page.tsx
new file mode 100644
index 00000000000..e5bbb3e961a
--- /dev/null
+++ b/polaris.shopify.com/app/examples/button-slim/page.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import {Button} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ButtonExample() {
+ return ;
+}
+
+export default withPolarisExample(ButtonExample);
diff --git a/polaris.shopify.com/app/examples/button-split/page.tsx b/polaris.shopify.com/app/examples/button-split/page.tsx
new file mode 100644
index 00000000000..7c5120a093b
--- /dev/null
+++ b/polaris.shopify.com/app/examples/button-split/page.tsx
@@ -0,0 +1,23 @@
+'use client';
+
+import {Button} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ButtonExample() {
+ return (
+
+
+
+ );
+}
+
+export default withPolarisExample(ButtonExample);
diff --git a/polaris.shopify.com/app/examples/button-text-aligned/page.tsx b/polaris.shopify.com/app/examples/button-text-aligned/page.tsx
new file mode 100644
index 00000000000..b268d99f97c
--- /dev/null
+++ b/polaris.shopify.com/app/examples/button-text-aligned/page.tsx
@@ -0,0 +1,17 @@
+'use client';
+
+import {Button} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ButtonExample() {
+ return (
+
+ );
+}
+
+export default withPolarisExample(ButtonExample);
diff --git a/polaris.shopify.com/app/examples/callout-card-default/page.tsx b/polaris.shopify.com/app/examples/callout-card-default/page.tsx
new file mode 100644
index 00000000000..db89ae7f974
--- /dev/null
+++ b/polaris.shopify.com/app/examples/callout-card-default/page.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+import {CalloutCard} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function Example() {
+ return (
+ Upload your store’s logo, change colors and fonts, and more.
+Upload your store’s logo, change colors and fonts, and more.
+Upload your store’s logo, change colors and fonts, and more.
+View a summary of your online store’s performance.
+-
+
-
+
-
+
+ Two-step authentication adds an extra layer of security when logging + in to your account. A special code will be required each time you + log in, ensuring only you can access your account. +
+-
+
John Smith
+john.smith@example.com
+-
+
-
+
+ Add variants if this product comes in multiple versions, like different + sizes or colors. +
+-
+
View a summary of your online store’s performance.
++ View a summary of your online store’s performance, including sales, + visitors, top products, and referrals. +
+View a summary of your online store’s performance.
++ View a summary of your online store’s performance, including sales, + visitors, top products, and referrals. +
+John Smith
+john.smith@example.com
+-
+
-
+
John Smith
++ Somewhere +
+ The Universe +
+ Somewhere +
+ The Universe +
+
+ );
+}
+
+export default withPolarisExample(
+ SingleOrMultuChoiceListWithChildrenContextWhenSelectedExample,
+);
diff --git a/polaris.shopify.com/app/examples/choice-list-with-error/page.tsx b/polaris.shopify.com/app/examples/choice-list-with-error/page.tsx
new file mode 100644
index 00000000000..59c8d4ff616
--- /dev/null
+++ b/polaris.shopify.com/app/examples/choice-list-with-error/page.tsx
@@ -0,0 +1,27 @@
+'use client';
+
+import {ChoiceList} from '@shopify/polaris';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ChoiceListWithErrorExample() {
+ const [selected, setSelected] = useState('hidden');
+
+ const handleChange = useCallback((value) => setSelected(value), []);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default withPolarisExample(CollapsibleExample);
diff --git a/polaris.shopify.com/app/examples/color-picker-default/page.tsx b/polaris.shopify.com/app/examples/color-picker-default/page.tsx
new file mode 100644
index 00000000000..cb6149434f5
--- /dev/null
+++ b/polaris.shopify.com/app/examples/color-picker-default/page.tsx
@@ -0,0 +1,17 @@
+'use client';
+
+import {ColorPicker} from '@shopify/polaris';
+import {useState} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ColorPickerExample() {
+ const [color, setColor] = useState({
+ hue: 120,
+ brightness: 1,
+ saturation: 1,
+ });
+
+ return + Your mailing list lets you contact customers or visitors who + have shown an interest in your store. Reach out to them with + exclusive offers or updates about your products. +
+ Test link +
+
+ );
+}
+
+export default withPolarisExample(ColorPickerWithTransparentValueExample);
diff --git a/polaris.shopify.com/app/examples/color-picker-with-transparent-value/page.tsx b/polaris.shopify.com/app/examples/color-picker-with-transparent-value/page.tsx
new file mode 100644
index 00000000000..1c46a3bc09d
--- /dev/null
+++ b/polaris.shopify.com/app/examples/color-picker-with-transparent-value/page.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import {ColorPicker} from '@shopify/polaris';
+import {useState} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ColorPickerWithTransparentValueExample() {
+ const [color, setColor] = useState({
+ hue: 300,
+ brightness: 1,
+ saturation: 0.7,
+ alpha: 0.7,
+ });
+
+ return
+
+
+
+ );
+};
+
+export default withPolarisExample(ColumnsExample);
diff --git a/polaris.shopify.com/app/examples/columns-with-fixed-widths/page.tsx b/polaris.shopify.com/app/examples/columns-with-fixed-widths/page.tsx
new file mode 100644
index 00000000000..a5c5d0aed2d
--- /dev/null
+++ b/polaris.shopify.com/app/examples/columns-with-fixed-widths/page.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import React from 'react';
+import {Columns, Text, Inline} from '@shopify/polaris';
+
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ColumnsWithFreeAndFixedWidthsExample() {
+ return (
+
+
+ {label}
+
+
+
+
+
+
+ );
+};
+
+export default withPolarisExample(ColumnsWithFreeAndFixedWidthsExample);
diff --git a/polaris.shopify.com/app/examples/columns-with-set-number/page.tsx b/polaris.shopify.com/app/examples/columns-with-set-number/page.tsx
new file mode 100644
index 00000000000..9341e2b6b96
--- /dev/null
+++ b/polaris.shopify.com/app/examples/columns-with-set-number/page.tsx
@@ -0,0 +1,69 @@
+'use client';
+
+import React from 'react';
+import {Columns, Text, Inline} from '@shopify/polaris';
+
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ColumnsWithSetNumberExample() {
+ return (
+
+
+ {label}
+
+
+
+ {children}
+
+ );
+};
+
+const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
+ return (
+
+
+
+
+ );
+};
+
+export default withPolarisExample(ColumnsWithSetNumberExample);
diff --git a/polaris.shopify.com/app/examples/columns-with-varying-gap/page.tsx b/polaris.shopify.com/app/examples/columns-with-varying-gap/page.tsx
new file mode 100644
index 00000000000..e88ce666eef
--- /dev/null
+++ b/polaris.shopify.com/app/examples/columns-with-varying-gap/page.tsx
@@ -0,0 +1,64 @@
+'use client';
+
+import React from 'react';
+import {Columns, Text, Inline} from '@shopify/polaris';
+
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ColumnsWithVaryingGapExample() {
+ return (
+
+
+ {label}
+
+
+
+ {children}
+
+ );
+};
+
+const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
+ return (
+
+
+
+
+ );
+};
+
+export default withPolarisExample(ColumnsWithVaryingGapExample);
diff --git a/polaris.shopify.com/app/examples/combobox-default/page.tsx b/polaris.shopify.com/app/examples/combobox-default/page.tsx
new file mode 100644
index 00000000000..4524792769c
--- /dev/null
+++ b/polaris.shopify.com/app/examples/combobox-default/page.tsx
@@ -0,0 +1,94 @@
+'use client';
+
+import {Listbox, Combobox, Icon} from '@shopify/polaris';
+import {SearchMinor} from '@shopify/polaris-icons';
+import {useState, useCallback, useMemo} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ComboboxExample() {
+ const deselectedOptions = useMemo(
+ () => [
+ {value: 'rustic', label: 'Rustic'},
+ {value: 'antique', label: 'Antique'},
+ {value: 'vinyl', label: 'Vinyl'},
+ {value: 'vintage', label: 'Vintage'},
+ {value: 'refurbished', label: 'Refurbished'},
+ ],
+ [],
+ );
+
+ const [selectedOption, setSelectedOption] = useState();
+ const [inputValue, setInputValue] = useState('');
+ const [options, setOptions] = useState(deselectedOptions);
+
+ const updateText = useCallback(
+ (value) => {
+ setInputValue(value);
+
+ if (value === '') {
+ setOptions(deselectedOptions);
+ return;
+ }
+
+ const filterRegex = new RegExp(value, 'i');
+ const resultOptions = deselectedOptions.filter((option) =>
+ option.label.match(filterRegex),
+ );
+ setOptions(resultOptions);
+ },
+ [deselectedOptions],
+ );
+
+ const updateSelection = useCallback(
+ (selected) => {
+ const matchedOption = options.find((option) => {
+ return option.value.match(selected);
+ });
+
+ setSelectedOption(selected);
+ setInputValue((matchedOption && matchedOption.label) || '');
+ },
+ [options],
+ );
+
+ const optionsMarkup =
+ options.length > 0
+ ? options.map((option) => {
+ const {label, value} = option;
+
+ return (
+
+
+ {label}
+
+
+
+ {optionsMarkup}
+ ) : null}
+
+
+ );
+}
+
+export default withPolarisExample(ComboboxExample);
diff --git a/polaris.shopify.com/app/examples/combobox-with-loading/page.tsx b/polaris.shopify.com/app/examples/combobox-with-loading/page.tsx
new file mode 100644
index 00000000000..ef0a8addef4
--- /dev/null
+++ b/polaris.shopify.com/app/examples/combobox-with-loading/page.tsx
@@ -0,0 +1,110 @@
+'use client';
+
+import {Listbox, Combobox, Icon} from '@shopify/polaris';
+import {SearchMinor} from '@shopify/polaris-icons';
+import {useState, useCallback, useMemo} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function LoadingAutocompleteExample() {
+ const deselectedOptions = useMemo(
+ () => [
+ {value: 'rustic', label: 'Rustic'},
+ {value: 'antique', label: 'Antique'},
+ {value: 'vinyl', label: 'Vinyl'},
+ {value: 'vintage', label: 'Vintage'},
+ {value: 'refurbished', label: 'Refurbished'},
+ ],
+ [],
+ );
+
+ const [selectedOption, setSelectedOption] = useState();
+ const [inputValue, setInputValue] = useState('');
+ const [options, setOptions] = useState(deselectedOptions);
+ const [loading, setLoading] = useState(false);
+
+ const updateText = useCallback(
+ (value) => {
+ setInputValue(value);
+
+ if (!loading) {
+ setLoading(true);
+ }
+
+ setTimeout(() => {
+ if (value === '') {
+ setOptions(deselectedOptions);
+ setLoading(false);
+ return;
+ }
+ const filterRegex = new RegExp(value, 'i');
+ const resultOptions = options.filter((option) =>
+ option.label.match(filterRegex),
+ );
+ setOptions(resultOptions);
+ setLoading(false);
+ }, 300);
+ },
+ [deselectedOptions, loading, options],
+ );
+
+ const updateSelection = useCallback(
+ (selected) => {
+ const matchedOption = options.find((option) => {
+ return option.value.match(selected);
+ });
+
+ setSelectedOption(selected);
+ setInputValue((matchedOption && matchedOption.label) || '');
+ },
+ [options],
+ );
+
+ const optionsMarkup =
+ options.length > 0
+ ? options.map((option) => {
+ const {label, value} = option;
+
+ return (
+
+
+ );
+}
+
+export default withPolarisExample(LoadingAutocompleteExample);
diff --git a/polaris.shopify.com/app/examples/combobox-with-manual-selection/page.tsx b/polaris.shopify.com/app/examples/combobox-with-manual-selection/page.tsx
new file mode 100644
index 00000000000..64a9367402b
--- /dev/null
+++ b/polaris.shopify.com/app/examples/combobox-with-manual-selection/page.tsx
@@ -0,0 +1,130 @@
+'use client';
+
+import {
+ Tag,
+ Listbox,
+ Combobox,
+ Icon,
+ TextContainer,
+ LegacyStack,
+ AutoSelection,
+} from '@shopify/polaris';
+import {SearchMinor} from '@shopify/polaris-icons';
+import {useState, useCallback, useMemo} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function MultiComboboxExample() {
+ const deselectedOptions = useMemo(
+ () => [
+ {value: 'rustic', label: 'Rustic'},
+ {value: 'antique', label: 'Antique'},
+ {value: 'vinyl', label: 'Vinyl'},
+ {value: 'vintage', label: 'Vintage'},
+ {value: 'refurbished', label: 'Refurbished'},
+ ],
+ [],
+ );
+
+ const [selectedOptions, setSelectedOptions] = useState([]);
+ const [inputValue, setInputValue] = useState('');
+ const [options, setOptions] = useState(deselectedOptions);
+
+ const updateText = useCallback(
+ (value) => {
+ setInputValue(value);
+
+ if (value === '') {
+ setOptions(deselectedOptions);
+ return;
+ }
+
+ const filterRegex = new RegExp(value, 'i');
+ const resultOptions = deselectedOptions.filter((option) =>
+ option.label.match(filterRegex),
+ );
+ setOptions(resultOptions);
+ },
+ [deselectedOptions],
+ );
+
+ const updateSelection = useCallback(
+ (selected) => {
+ if (selectedOptions.includes(selected)) {
+ setSelectedOptions(
+ selectedOptions.filter((option) => option !== selected),
+ );
+ } else {
+ setSelectedOptions([...selectedOptions, selected]);
+ }
+
+ const matchedOption = options.find((option) => {
+ return option.value.match(selected);
+ });
+
+ updateText('');
+ },
+ [options, selectedOptions, updateText],
+ );
+
+ const removeTag = useCallback(
+ (tag) => () => {
+ const options = [...selectedOptions];
+ options.splice(options.indexOf(tag), 1);
+ setSelectedOptions(options);
+ },
+ [selectedOptions],
+ );
+
+ const tagsMarkup = selectedOptions.map((option) => (
+
+
+ {optionsMarkup}
+
+ ) : null}
+
+
+ {tagsMarkup}
+
+
+ );
+}
+
+export default withPolarisExample(MultiComboboxExample);
diff --git a/polaris.shopify.com/app/examples/combobox-with-multi-select-and-manual-selection/page.tsx b/polaris.shopify.com/app/examples/combobox-with-multi-select-and-manual-selection/page.tsx
new file mode 100644
index 00000000000..29f4ba761cb
--- /dev/null
+++ b/polaris.shopify.com/app/examples/combobox-with-multi-select-and-manual-selection/page.tsx
@@ -0,0 +1,129 @@
+'use client';
+
+import {
+ Tag,
+ Listbox,
+ Combobox,
+ Icon,
+ TextContainer,
+ LegacyStack,
+} from '@shopify/polaris';
+import {SearchMinor} from '@shopify/polaris-icons';
+import {useState, useCallback, useMemo} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function MultiManualComboboxExample() {
+ const deselectedOptions = useMemo(
+ () => [
+ {value: 'rustic', label: 'Rustic'},
+ {value: 'antique', label: 'Antique'},
+ {value: 'vinyl', label: 'Vinyl'},
+ {value: 'vintage', label: 'Vintage'},
+ {value: 'refurbished', label: 'Refurbished'},
+ ],
+ [],
+ );
+
+ const [selectedOptions, setSelectedOptions] = useState([]);
+ const [inputValue, setInputValue] = useState('');
+ const [options, setOptions] = useState(deselectedOptions);
+
+ const updateText = useCallback(
+ (value) => {
+ setInputValue(value);
+
+ if (value === '') {
+ setOptions(deselectedOptions);
+ return;
+ }
+
+ const filterRegex = new RegExp(value, 'i');
+ const resultOptions = deselectedOptions.filter((option) =>
+ option.label.match(filterRegex),
+ );
+ setOptions(resultOptions);
+ },
+ [deselectedOptions],
+ );
+
+ const updateSelection = useCallback(
+ (selected) => {
+ if (selectedOptions.includes(selected)) {
+ setSelectedOptions(
+ selectedOptions.filter((option) => option !== selected),
+ );
+ } else {
+ setSelectedOptions([...selectedOptions, selected]);
+ }
+
+ const matchedOption = options.find((option) => {
+ return option.value.match(selected);
+ });
+
+ updateText('');
+ },
+ [options, selectedOptions, updateText],
+ );
+
+ const removeTag = useCallback(
+ (tag) => () => {
+ const options = [...selectedOptions];
+ options.splice(options.indexOf(tag), 1);
+ setSelectedOptions(options);
+ },
+ [selectedOptions],
+ );
+
+ const tagsMarkup = selectedOptions.map((option) => (
+
+
+ {optionsMarkup}
+
+ ) : null}
+
+
+ {tagsMarkup}
+
+
+ );
+}
+
+export default withPolarisExample(MultiManualComboboxExample);
diff --git a/polaris.shopify.com/app/examples/combobox-with-multi-select-and-vertical-content/page.tsx b/polaris.shopify.com/app/examples/combobox-with-multi-select-and-vertical-content/page.tsx
new file mode 100644
index 00000000000..9dfd65ef14c
--- /dev/null
+++ b/polaris.shopify.com/app/examples/combobox-with-multi-select-and-vertical-content/page.tsx
@@ -0,0 +1,174 @@
+'use client';
+
+import {
+ LegacyStack,
+ Tag,
+ Listbox,
+ EmptySearchResult,
+ Combobox,
+ Text,
+} from '@shopify/polaris';
+import {useState, useCallback, useMemo} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function MultiselectTagComboboxExample() {
+ const [selectedTags, setSelectedTags] = useState(['Rustic']);
+ const [value, setValue] = useState('');
+ const [suggestion, setSuggestion] = useState('');
+
+ const handleActiveOptionChange = useCallback(
+ (activeOption) => {
+ const activeOptionIsAction = activeOption === value;
+
+ if (!activeOptionIsAction && !selectedTags.includes(activeOption)) {
+ setSuggestion(activeOption);
+ } else {
+ setSuggestion('');
+ }
+ },
+ [value, selectedTags],
+ );
+ const updateSelection = useCallback(
+ (selected) => {
+ const nextSelectedTags = new Set([...selectedTags]);
+
+ if (nextSelectedTags.has(selected)) {
+ nextSelectedTags.delete(selected);
+ } else {
+ nextSelectedTags.add(selected);
+ }
+ setSelectedTags([...nextSelectedTags]);
+ setValue('');
+ setSuggestion('');
+ },
+ [selectedTags],
+ );
+
+ const removeTag = useCallback(
+ (tag) => () => {
+ updateSelection(tag);
+ },
+ [updateSelection],
+ );
+
+ const getAllTags = useCallback(() => {
+ const savedTags = ['Rustic', 'Antique', 'Vinyl', 'Vintage', 'Refurbished'];
+ return [...new Set([...savedTags, ...selectedTags].sort())];
+ }, [selectedTags]);
+
+ const formatOptionText = useCallback(
+ (option) => {
+ const trimValue = value.trim().toLocaleLowerCase();
+ const matchIndex = option.toLocaleLowerCase().indexOf(trimValue);
+
+ if (!value || matchIndex === -1) return option;
+
+ const start = option.slice(0, matchIndex);
+ const highlight = option.slice(matchIndex, matchIndex + trimValue.length);
+ const end = option.slice(matchIndex + trimValue.length, option.length);
+
+ return (
+
+ {start}
+
+
+ );
+}
+
+export default withPolarisExample(MultiselectTagComboboxExample);
diff --git a/polaris.shopify.com/app/examples/combobox-with-multi-select/page.tsx b/polaris.shopify.com/app/examples/combobox-with-multi-select/page.tsx
new file mode 100644
index 00000000000..5e69b905f70
--- /dev/null
+++ b/polaris.shopify.com/app/examples/combobox-with-multi-select/page.tsx
@@ -0,0 +1,130 @@
+'use client';
+
+import {
+ LegacyStack,
+ Tag,
+ Listbox,
+ Combobox,
+ Icon,
+ TextContainer,
+} from '@shopify/polaris';
+
+import {SearchMinor} from '@shopify/polaris-icons';
+
+import {useState, useCallback, useMemo} from 'react';
+
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function MultiAutoComboboxExample() {
+ const deselectedOptions = useMemo(
+ () => [
+ {value: 'rustic', label: 'Rustic'},
+ {value: 'antique', label: 'Antique'},
+ {value: 'vinyl', label: 'Vinyl'},
+ {value: 'vintage', label: 'Vintage'},
+ {value: 'refurbished', label: 'Refurbished'},
+ ],
+ [],
+ );
+
+ const [selectedOptions, setSelectedOptions] = useState([]);
+ const [inputValue, setInputValue] = useState('');
+ const [options, setOptions] = useState(deselectedOptions);
+
+ const updateText = useCallback(
+ (value) => {
+ setInputValue(value);
+
+ if (value === '') {
+ setOptions(deselectedOptions);
+ return;
+ }
+
+ const filterRegex = new RegExp(value, 'i');
+ const resultOptions = deselectedOptions.filter((option) =>
+ option.label.match(filterRegex),
+ );
+ setOptions(resultOptions);
+ },
+ [deselectedOptions],
+ );
+
+ const updateSelection = useCallback(
+ (selected) => {
+ if (selectedOptions.includes(selected)) {
+ setSelectedOptions(
+ selectedOptions.filter((option) => option !== selected),
+ );
+ } else {
+ setSelectedOptions([...selectedOptions, selected]);
+ }
+
+ const matchedOption = options.find((option) => {
+ return option.value.match(selected);
+ });
+
+ updateText('');
+ },
+ [options, selectedOptions, updateText],
+ );
+
+ const removeTag = useCallback(
+ (tag) => () => {
+ const options = [...selectedOptions];
+ options.splice(options.indexOf(tag), 1);
+ setSelectedOptions(options);
+ },
+ [selectedOptions],
+ );
+
+ const tagsMarkup = selectedOptions.map((option) => (
+
+ {optionsMarkup}
+ ) : null}
+
+
+ {tagsMarkup}
+
+
+ );
+}
+
+export default withPolarisExample(MultiAutoComboboxExample);
diff --git a/polaris.shopify.com/app/examples/contextual-save-bar-default/page.tsx b/polaris.shopify.com/app/examples/contextual-save-bar-default/page.tsx
new file mode 100644
index 00000000000..24191e28754
--- /dev/null
+++ b/polaris.shopify.com/app/examples/contextual-save-bar-default/page.tsx
@@ -0,0 +1,33 @@
+'use client';
+
+import {Frame, ContextualSaveBar} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function Example() {
+ return (
+
+
+ console.log('add form submit logic'),
+ loading: false,
+ disabled: false,
+ }}
+ discardAction={{
+ onAction: () => console.log('add clear form logic'),
+ }}
+ />
+
+
+ );
+}
+
+export default withPolarisExample(Example);
diff --git a/polaris.shopify.com/app/examples/contextual-save-bar-with-flush-contents/page.tsx b/polaris.shopify.com/app/examples/contextual-save-bar-with-flush-contents/page.tsx
new file mode 100644
index 00000000000..5004a81b161
--- /dev/null
+++ b/polaris.shopify.com/app/examples/contextual-save-bar-with-flush-contents/page.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import {Frame, ContextualSaveBar} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function Example() {
+ return (
+
+
+ console.log('add form submit logic'),
+ }}
+ discardAction={{
+ onAction: () => console.log('add clear form logic'),
+ }}
+ />
+
+
+ );
+}
+
+export default withPolarisExample(Example);
diff --git a/polaris.shopify.com/app/examples/contextual-save-bar-with-full-width/page.tsx b/polaris.shopify.com/app/examples/contextual-save-bar-with-full-width/page.tsx
new file mode 100644
index 00000000000..86ff88d55ff
--- /dev/null
+++ b/polaris.shopify.com/app/examples/contextual-save-bar-with-full-width/page.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import {Frame, ContextualSaveBar} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function Example() {
+ return (
+
+
+ console.log('add form submit logic'),
+ loading: false,
+ disabled: false,
+ }}
+ discardAction={{
+ onAction: () => console.log('add clear form logic'),
+ }}
+ />
+
+
+ );
+}
+
+export default withPolarisExample(Example);
diff --git a/polaris.shopify.com/app/examples/data-table-default/page.tsx b/polaris.shopify.com/app/examples/data-table-default/page.tsx
new file mode 100644
index 00000000000..7b0b4b76976
--- /dev/null
+++ b/polaris.shopify.com/app/examples/data-table-default/page.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import {Page, LegacyCard, DataTable} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function DataTableExample() {
+ const rows = [
+ ['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
+ ['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
+ [
+ 'Navy Merino Wool Blazer with khaki chinos and yellow belt',
+ '$445.00',
+ 124518,
+ 32,
+ '$14,240.00',
+ ],
+ ];
+
+ return (
+
+ {file.name}{' '}
+
+ {file.size} bytes
+
+
+ -
+ {rejectedFiles.map((file, index) => (
+
+
+ {files.map((file, index) => (
+
+
+ ))}
+
+
+ );
+
+ return (
+
+ {file.name}{' '}
+
+ {file.size} bytes
+
+
+
+
+
+
+ );
+}
+
+export default withPolarisExample(DropZoneExample);
diff --git a/polaris.shopify.com/app/examples/drop-zone-nested/page.tsx b/polaris.shopify.com/app/examples/drop-zone-nested/page.tsx
new file mode 100644
index 00000000000..9e60f2475f2
--- /dev/null
+++ b/polaris.shopify.com/app/examples/drop-zone-nested/page.tsx
@@ -0,0 +1,62 @@
+'use client';
+
+import {
+ DropZone,
+ LegacyStack,
+ Thumbnail,
+ LegacyCard,
+ Text,
+} from '@shopify/polaris';
+import {NoteMinor} from '@shopify/polaris-icons';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function NestedDropZoneExample() {
+ const [files, setFiles] = useState([]);
+
+ const handleDrop = useCallback((dropFiles) => {
+ setFiles((files) => [...files, dropFiles]);
+ }, []);
+
+ const handleDropZoneClick = useCallback(() => {}, []);
+
+ const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];
+
+ const fileUpload = !files.length &&
+ {file.name}{' '}
+
+ {file.size} bytes
+
+
+
+
+
+
+ );
+}
+
+export default withPolarisExample(DropZoneExample);
diff --git a/polaris.shopify.com/app/examples/drop-zone-with-a-label/page.tsx b/polaris.shopify.com/app/examples/drop-zone-with-a-label/page.tsx
new file mode 100644
index 00000000000..88f90bb5c14
--- /dev/null
+++ b/polaris.shopify.com/app/examples/drop-zone-with-a-label/page.tsx
@@ -0,0 +1,15 @@
+'use client';
+
+import {DropZone} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function DropZoneExample() {
+ return (
+
+ {file.name}{' '}
+
+ {file.size} bytes
+
+
+
+ {file.name}{' '}
+
+ {file.size} bytes
+
+
+
+ {file.name}{' '}
+
+ {file.size} bytes
+
+
+
+ {file.name}{' '}
+
+ {file.size} bytes
+
+
+ -
+ {rejectedFiles.map((file, index) => (
+
+ {file.name}{' '}
+
+ {file.size} bytes
+
+
+ Track and receive your incoming inventory from suppliers.
++ You can use the Files section to upload images, videos, and other + documents. This example shows the content with a centered layout and + full width. +
+Track and receive your incoming inventory from suppliers.
+
+
+
+
+
+ {name}
+
+
+ );
+ }}
+ />
+
+
+ );
+
+ function disambiguateLabel(key, value) {
+ switch (key) {
+ case 'taggedWith':
+ return `Tagged with ${value}`;
+ default:
+ return value;
+ }
+ }
+
+ function isEmpty(value) {
+ if (Array.isArray(value)) {
+ return value.length === 0;
+ } else {
+ return value === '' || value == null;
+ }
+ }
+}
+
+export default withPolarisExample(DisableAllFiltersExample);
diff --git a/polaris.shopify.com/app/examples/filters-some-disabled/page.tsx b/polaris.shopify.com/app/examples/filters-some-disabled/page.tsx
new file mode 100644
index 00000000000..27934e71418
--- /dev/null
+++ b/polaris.shopify.com/app/examples/filters-some-disabled/page.tsx
@@ -0,0 +1,161 @@
+'use client';
+
+import {
+ TextField,
+ LegacyCard,
+ ResourceList,
+ Filters,
+ Button,
+ Avatar,
+ Text,
+} from '@shopify/polaris';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function DisableSomeFiltersExample() {
+ const [taggedWith, setTaggedWith] = useState(null);
+ const [vendor, setVendor] = useState(null);
+ const [queryValue, setQueryValue] = useState(null);
+
+ const handleTaggedWithChange = useCallback(
+ (value) => setTaggedWith(value),
+ [],
+ );
+ const handleQueryValueChange = useCallback(
+ (value) => setQueryValue(value),
+ [],
+ );
+ const handleVendorChange = useCallback((value) => setVendor(value), []);
+
+ const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), []);
+ const handleQueryValueRemove = useCallback(() => setQueryValue(null), []);
+ const handleVendorRemove = useCallback(() => setVendor(null), []);
+
+ const handleClearAll = useCallback(() => {
+ handleTaggedWithRemove();
+ handleQueryValueRemove();
+ handleVendorRemove();
+ }, [handleQueryValueRemove, handleTaggedWithRemove, handleVendorRemove]);
+
+ const filters = [
+ {
+ key: 'taggedWith',
+ label: 'Tagged with',
+ filter: (
+
+
+
+
+ }
+ items={[
+ {
+ id: 341,
+ url: '#',
+ name: 'Mae Jemison',
+ location: 'Decatur, USA',
+ },
+ {
+ id: 256,
+ url: '#',
+ name: 'Ellen Ochoa',
+ location: 'Los Angeles, USA',
+ },
+ ]}
+ renderItem={(item) => {
+ const {id, url, name, location} = item;
+ const media = {location}
+
+
+
+
+
+ {name}
+
+
+ );
+ }}
+ />
+
+
+ );
+
+ function disambiguateLabel(key, value) {
+ switch (key) {
+ case 'taggedWith':
+ return `Tagged with ${value}`;
+ default:
+ return value;
+ }
+ }
+
+ function isEmpty(value) {
+ if (Array.isArray(value)) {
+ return value.length === 0;
+ } else {
+ return value === '' || value == null;
+ }
+ }
+}
+
+export default withPolarisExample(DisableSomeFiltersExample);
diff --git a/polaris.shopify.com/app/examples/filters-with-a-data-table/page.tsx b/polaris.shopify.com/app/examples/filters-with-a-data-table/page.tsx
new file mode 100644
index 00000000000..8fd329ca468
--- /dev/null
+++ b/polaris.shopify.com/app/examples/filters-with-a-data-table/page.tsx
@@ -0,0 +1,197 @@
+'use client';
+
+import {
+ ChoiceList,
+ TextField,
+ LegacyCard,
+ Filters,
+ DataTable,
+} from '@shopify/polaris';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function DataTableFiltersExample() {
+ const [availability, setAvailability] = useState(null);
+ const [productType, setProductType] = useState(null);
+ const [taggedWith, setTaggedWith] = useState(null);
+ const [queryValue, setQueryValue] = useState(null);
+
+ const handleAvailabilityChange = useCallback(
+ (value) => setAvailability(value),
+ [],
+ );
+ const handleProductTypeChange = useCallback(
+ (value) => setProductType(value),
+ [],
+ );
+ const handleTaggedWithChange = useCallback(
+ (value) => setTaggedWith(value),
+ [],
+ );
+ const handleFiltersQueryChange = useCallback(
+ (value) => setQueryValue(value),
+ [],
+ );
+ const handleAvailabilityRemove = useCallback(() => setAvailability(null), []);
+ const handleProductTypeRemove = useCallback(() => setProductType(null), []);
+ const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), []);
+ const handleQueryValueRemove = useCallback(() => setQueryValue(null), []);
+ const handleFiltersClearAll = useCallback(() => {
+ handleAvailabilityRemove();
+ handleProductTypeRemove();
+ handleTaggedWithRemove();
+ handleQueryValueRemove();
+ }, [
+ handleAvailabilityRemove,
+ handleQueryValueRemove,
+ handleProductTypeRemove,
+ handleTaggedWithRemove,
+ ]);
+
+ const filters = [
+ {
+ key: 'availability',
+ label: 'Availability',
+ filter: (
+
+
+
+
+ }
+ items={[
+ {
+ id: 341,
+ url: '#',
+ name: 'Mae Jemison',
+ location: 'Decatur, USA',
+ },
+ {
+ id: 256,
+ url: '#',
+ name: 'Ellen Ochoa',
+ location: 'Los Angeles, USA',
+ },
+ ]}
+ renderItem={(item) => {
+ const {id, url, name, location} = item;
+ const media = {location}
+
+
+
+
+
+
+ );
+
+ function disambiguateLabel(key, value) {
+ switch (key) {
+ case 'taggedWith':
+ return `Tagged with ${value}`;
+ case 'availability':
+ return value.map((val) => `Available on ${val}`).join(', ');
+ case 'productType':
+ return value.join(', ');
+ default:
+ return value;
+ }
+ }
+
+ function isEmpty(value) {
+ if (Array.isArray(value)) {
+ return value.length === 0;
+ } else {
+ return value === '' || value == null;
+ }
+ }
+}
+
+export default withPolarisExample(DataTableFiltersExample);
diff --git a/polaris.shopify.com/app/examples/filters-with-a-resource-list/page.tsx b/polaris.shopify.com/app/examples/filters-with-a-resource-list/page.tsx
new file mode 100644
index 00000000000..61b2045d555
--- /dev/null
+++ b/polaris.shopify.com/app/examples/filters-with-a-resource-list/page.tsx
@@ -0,0 +1,211 @@
+'use client';
+
+import {
+ ChoiceList,
+ TextField,
+ RangeSlider,
+ LegacyCard,
+ ResourceList,
+ Filters,
+ Avatar,
+ Text,
+} from '@shopify/polaris';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ResourceListFiltersExample() {
+ const [accountStatus, setAccountStatus] = useState(null);
+ const [moneySpent, setMoneySpent] = useState(null);
+ const [taggedWith, setTaggedWith] = useState(null);
+ const [queryValue, setQueryValue] = useState(null);
+
+ const handleAccountStatusChange = useCallback(
+ (value) => setAccountStatus(value),
+ [],
+ );
+ const handleMoneySpentChange = useCallback(
+ (value) => setMoneySpent(value),
+ [],
+ );
+ const handleTaggedWithChange = useCallback(
+ (value) => setTaggedWith(value),
+ [],
+ );
+ const handleFiltersQueryChange = useCallback(
+ (value) => setQueryValue(value),
+ [],
+ );
+ const handleAccountStatusRemove = useCallback(
+ () => setAccountStatus(null),
+ [],
+ );
+ const handleMoneySpentRemove = useCallback(() => setMoneySpent(null), []);
+ const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), []);
+ const handleQueryValueRemove = useCallback(() => setQueryValue(null), []);
+ const handleFiltersClearAll = useCallback(() => {
+ handleAccountStatusRemove();
+ handleMoneySpentRemove();
+ handleTaggedWithRemove();
+ handleQueryValueRemove();
+ }, [
+ handleAccountStatusRemove,
+ handleMoneySpentRemove,
+ handleQueryValueRemove,
+ handleTaggedWithRemove,
+ ]);
+
+ const filters = [
+ {
+ key: 'accountStatus',
+ label: 'Account status',
+ filter: (
+
+
+
+
+ {name}
+
+
+ );
+ }}
+ />
+
+
+ );
+
+ function disambiguateLabel(key, value) {
+ switch (key) {
+ case 'moneySpent':
+ return `Money spent is between $${value[0]} and $${value[1]}`;
+ case 'taggedWith':
+ return `Tagged with ${value}`;
+ case 'accountStatus':
+ return value.map((val) => `Customer ${val}`).join(', ');
+ default:
+ return value;
+ }
+ }
+
+ function isEmpty(value) {
+ if (Array.isArray(value)) {
+ return value.length === 0;
+ } else {
+ return value === '' || value == null;
+ }
+ }
+}
+
+export default withPolarisExample(ResourceListFiltersExample);
diff --git a/polaris.shopify.com/app/examples/filters-with-children-content/page.tsx b/polaris.shopify.com/app/examples/filters-with-children-content/page.tsx
new file mode 100644
index 00000000000..645bb284383
--- /dev/null
+++ b/polaris.shopify.com/app/examples/filters-with-children-content/page.tsx
@@ -0,0 +1,138 @@
+'use client';
+
+import {
+ TextField,
+ LegacyCard,
+ ResourceList,
+ Filters,
+ Button,
+ Avatar,
+ Text,
+} from '@shopify/polaris';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function FiltersExample() {
+ const [taggedWith, setTaggedWith] = useState(null);
+ const [queryValue, setQueryValue] = useState(null);
+
+ const handleTaggedWithChange = useCallback(
+ (value) => setTaggedWith(value),
+ [],
+ );
+ const handleQueryValueChange = useCallback(
+ (value) => setQueryValue(value),
+ [],
+ );
+ const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), []);
+ const handleQueryValueRemove = useCallback(() => setQueryValue(null), []);
+
+ const handleClearAll = useCallback(() => {
+ handleTaggedWithRemove();
+ handleQueryValueRemove();
+ }, [handleQueryValueRemove, handleTaggedWithRemove]);
+
+ const filters = [
+ {
+ key: 'taggedWith',
+ label: 'Tagged with',
+ filter: (
+ {location}
+
+
+
+
+
+ {name}
+
+
+ );
+ }}
+ />
+
+
+ );
+
+ function disambiguateLabel(key, value) {
+ switch (key) {
+ case 'taggedWith':
+ return `Tagged with ${value}`;
+ default:
+ return value;
+ }
+ }
+
+ function isEmpty(value) {
+ if (Array.isArray(value)) {
+ return value.length === 0;
+ } else {
+ return value === '' || value == null;
+ }
+ }
+}
+
+export default withPolarisExample(FiltersExample);
diff --git a/polaris.shopify.com/app/examples/filters-with-help-text/page.tsx b/polaris.shopify.com/app/examples/filters-with-help-text/page.tsx
new file mode 100644
index 00000000000..1c02e99bc16
--- /dev/null
+++ b/polaris.shopify.com/app/examples/filters-with-help-text/page.tsx
@@ -0,0 +1,213 @@
+'use client';
+
+import {
+ ChoiceList,
+ TextField,
+ RangeSlider,
+ LegacyCard,
+ ResourceList,
+ Filters,
+ Avatar,
+ Text,
+} from '@shopify/polaris';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ResourceListFiltersExample() {
+ const [accountStatus, setAccountStatus] = useState(null);
+ const [moneySpent, setMoneySpent] = useState(null);
+ const [taggedWith, setTaggedWith] = useState(null);
+ const [queryValue, setQueryValue] = useState(null);
+
+ const handleAccountStatusChange = useCallback(
+ (value) => setAccountStatus(value),
+ [],
+ );
+ const handleMoneySpentChange = useCallback(
+ (value) => setMoneySpent(value),
+ [],
+ );
+ const handleTaggedWithChange = useCallback(
+ (value) => setTaggedWith(value),
+ [],
+ );
+ const handleFiltersQueryChange = useCallback(
+ (value) => setQueryValue(value),
+ [],
+ );
+ const handleAccountStatusRemove = useCallback(
+ () => setAccountStatus(null),
+ [],
+ );
+ const handleMoneySpentRemove = useCallback(() => setMoneySpent(null), []);
+ const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), []);
+ const handleQueryValueRemove = useCallback(() => setQueryValue(null), []);
+ const handleFiltersClearAll = useCallback(() => {
+ handleAccountStatusRemove();
+ handleMoneySpentRemove();
+ handleTaggedWithRemove();
+ handleQueryValueRemove();
+ }, [
+ handleAccountStatusRemove,
+ handleMoneySpentRemove,
+ handleQueryValueRemove,
+ handleTaggedWithRemove,
+ ]);
+
+ const filters = [
+ {
+ key: 'accountStatus',
+ label: 'Account status',
+ filter: (
+
+
+
+
+ }
+ items={[
+ {
+ id: 341,
+ url: '#',
+ name: 'Mae Jemison',
+ location: 'Decatur, USA',
+ },
+ {
+ id: 256,
+ url: '#',
+ name: 'Ellen Ochoa',
+ location: 'Los Angeles, USA',
+ },
+ ]}
+ renderItem={(item) => {
+ const {id, url, name, location} = item;
+ const media = {location}
+
+
+
+
+ {name}
+
+
+ );
+ }}
+ />
+
+
+ );
+
+ function disambiguateLabel(key, value) {
+ switch (key) {
+ case 'moneySpent':
+ return `Money spent is between $${value[0]} and $${value[1]}`;
+ case 'taggedWith':
+ return `Tagged with ${value}`;
+ case 'accountStatus':
+ return value.map((val) => `Customer ${val}`).join(', ');
+ default:
+ return value;
+ }
+ }
+
+ function isEmpty(value) {
+ if (Array.isArray(value)) {
+ return value.length === 0;
+ } else {
+ return value === '' || value == null;
+ }
+ }
+}
+
+export default withPolarisExample(ResourceListFiltersExample);
diff --git a/polaris.shopify.com/app/examples/filters-with-query-field-disabled/page.tsx b/polaris.shopify.com/app/examples/filters-with-query-field-disabled/page.tsx
new file mode 100644
index 00000000000..49a02238fcd
--- /dev/null
+++ b/polaris.shopify.com/app/examples/filters-with-query-field-disabled/page.tsx
@@ -0,0 +1,212 @@
+'use client';
+
+import {
+ ChoiceList,
+ TextField,
+ RangeSlider,
+ LegacyCard,
+ ResourceList,
+ Filters,
+ Avatar,
+ Text,
+} from '@shopify/polaris';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ResourceListFiltersExample() {
+ const [accountStatus, setAccountStatus] = useState(null);
+ const [moneySpent, setMoneySpent] = useState(null);
+ const [taggedWith, setTaggedWith] = useState(null);
+ const [queryValue, setQueryValue] = useState(null);
+
+ const handleAccountStatusChange = useCallback(
+ (value) => setAccountStatus(value),
+ [],
+ );
+ const handleMoneySpentChange = useCallback(
+ (value) => setMoneySpent(value),
+ [],
+ );
+ const handleTaggedWithChange = useCallback(
+ (value) => setTaggedWith(value),
+ [],
+ );
+ const handleFiltersQueryChange = useCallback(
+ (value) => setQueryValue(value),
+ [],
+ );
+ const handleAccountStatusRemove = useCallback(
+ () => setAccountStatus(null),
+ [],
+ );
+ const handleMoneySpentRemove = useCallback(() => setMoneySpent(null), []);
+ const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), []);
+ const handleQueryValueRemove = useCallback(() => setQueryValue(null), []);
+ const handleFiltersClearAll = useCallback(() => {
+ handleAccountStatusRemove();
+ handleMoneySpentRemove();
+ handleTaggedWithRemove();
+ handleQueryValueRemove();
+ }, [
+ handleAccountStatusRemove,
+ handleMoneySpentRemove,
+ handleQueryValueRemove,
+ handleTaggedWithRemove,
+ ]);
+
+ const filters = [
+ {
+ key: 'accountStatus',
+ label: 'Account status',
+ filter: (
+ {location}
+
+
+
+
+ {name}
+
+
+ );
+ }}
+ />
+
+
+ );
+
+ function disambiguateLabel(key, value) {
+ switch (key) {
+ case 'moneySpent':
+ return `Money spent is between $${value[0]} and $${value[1]}`;
+ case 'taggedWith':
+ return `Tagged with ${value}`;
+ case 'accountStatus':
+ return value.map((val) => `Customer ${val}`).join(', ');
+ default:
+ return value;
+ }
+ }
+
+ function isEmpty(value) {
+ if (Array.isArray(value)) {
+ return value.length === 0;
+ } else {
+ return value === '' || value == null;
+ }
+ }
+}
+
+export default withPolarisExample(ResourceListFiltersExample);
diff --git a/polaris.shopify.com/app/examples/filters-with-query-field-hidden/page.tsx b/polaris.shopify.com/app/examples/filters-with-query-field-hidden/page.tsx
new file mode 100644
index 00000000000..308ddc968c7
--- /dev/null
+++ b/polaris.shopify.com/app/examples/filters-with-query-field-hidden/page.tsx
@@ -0,0 +1,212 @@
+'use client';
+
+import {
+ ChoiceList,
+ TextField,
+ RangeSlider,
+ LegacyCard,
+ ResourceList,
+ Filters,
+ Avatar,
+ Text,
+} from '@shopify/polaris';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ResourceListFiltersExample() {
+ const [accountStatus, setAccountStatus] = useState(null);
+ const [moneySpent, setMoneySpent] = useState(null);
+ const [taggedWith, setTaggedWith] = useState(null);
+ const [queryValue, setQueryValue] = useState(null);
+
+ const handleAccountStatusChange = useCallback(
+ (value) => setAccountStatus(value),
+ [],
+ );
+ const handleMoneySpentChange = useCallback(
+ (value) => setMoneySpent(value),
+ [],
+ );
+ const handleTaggedWithChange = useCallback(
+ (value) => setTaggedWith(value),
+ [],
+ );
+ const handleFiltersQueryChange = useCallback(
+ (value) => setQueryValue(value),
+ [],
+ );
+ const handleAccountStatusRemove = useCallback(
+ () => setAccountStatus(null),
+ [],
+ );
+ const handleMoneySpentRemove = useCallback(() => setMoneySpent(null), []);
+ const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), []);
+ const handleQueryValueRemove = useCallback(() => setQueryValue(null), []);
+ const handleFiltersClearAll = useCallback(() => {
+ handleAccountStatusRemove();
+ handleMoneySpentRemove();
+ handleTaggedWithRemove();
+ handleQueryValueRemove();
+ }, [
+ handleAccountStatusRemove,
+ handleMoneySpentRemove,
+ handleQueryValueRemove,
+ handleTaggedWithRemove,
+ ]);
+
+ const filters = [
+ {
+ key: 'accountStatus',
+ label: 'Account status',
+ filter: (
+ {location}
+
+
+
+
+ {name}
+
+
+ );
+ }}
+ />
+
+
+ );
+
+ function disambiguateLabel(key, value) {
+ switch (key) {
+ case 'moneySpent':
+ return `Money spent is between $${value[0]} and $${value[1]}`;
+ case 'taggedWith':
+ return `Tagged with ${value}`;
+ case 'accountStatus':
+ return value.map((val) => `Customer ${val}`).join(', ');
+ default:
+ return value;
+ }
+ }
+
+ function isEmpty(value) {
+ if (Array.isArray(value)) {
+ return value.length === 0;
+ } else {
+ return value === '' || value == null;
+ }
+ }
+}
+
+export default withPolarisExample(ResourceListFiltersExample);
diff --git a/polaris.shopify.com/app/examples/filters-without-clear-button/page.tsx b/polaris.shopify.com/app/examples/filters-without-clear-button/page.tsx
new file mode 100644
index 00000000000..3f4ffe3793a
--- /dev/null
+++ b/polaris.shopify.com/app/examples/filters-without-clear-button/page.tsx
@@ -0,0 +1,143 @@
+'use client';
+
+import {
+ TextField,
+ LegacyCard,
+ ResourceList,
+ Filters,
+ Button,
+ Avatar,
+ Text,
+} from '@shopify/polaris';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function Playground() {
+ const [taggedWith, setTaggedWith] = useState(null);
+ const [queryValue, setQueryValue] = useState(null);
+
+ const handleTaggedWithChange = useCallback(
+ (value) => setTaggedWith(value),
+ [],
+ );
+ const handleQueryValueChange = useCallback(
+ (value) => setQueryValue(value),
+ [],
+ );
+
+ const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), []);
+ const handleQueryValueRemove = useCallback(() => setQueryValue(null), []);
+
+ const handleClearAll = useCallback(() => {
+ handleTaggedWithRemove();
+ handleQueryValueRemove();
+ }, [handleQueryValueRemove, handleTaggedWithRemove]);
+
+ const filters = [
+ {
+ key: 'taggedWith',
+ label: 'Tagged with',
+ filter: (
+ {location}
+
+
+
+
+
+ {name}
+
+
+ );
+ }}
+ />
+
+
+ );
+
+ function disambiguateLabel(key, value) {
+ switch (key) {
+ case 'taggedWith':
+ return `Tagged with ${value}`;
+ default:
+ return value;
+ }
+ }
+
+ function isEmpty(value) {
+ if (Array.isArray(value)) {
+ return value.length === 0;
+ } else {
+ return value === '' || value == null;
+ }
+ }
+}
+
+export default withPolarisExample(Playground);
diff --git a/polaris.shopify.com/app/examples/footer-help-default/page.tsx b/polaris.shopify.com/app/examples/footer-help-default/page.tsx
new file mode 100644
index 00000000000..0479b9ec81d
--- /dev/null
+++ b/polaris.shopify.com/app/examples/footer-help-default/page.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import {FooterHelp, Link} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function FooterHelpExample() {
+ return (
+
+
+
+
+ }
+ items={[
+ {
+ id: 341,
+ url: '#',
+ name: 'Mae Jemison',
+ location: 'Decatur, USA',
+ },
+ {
+ id: 256,
+ url: '#',
+ name: 'Ellen Ochoa',
+ location: 'Los Angeles, USA',
+ },
+ ]}
+ renderItem={(item) => {
+ const {id, url, name, location} = item;
+ const media = {location}
+
+
+
+ {contextualSaveBarMarkup}
+ {loadingMarkup}
+ {pageMarkup}
+ {toastMarkup}
+ {modalMarkup}
+
+
+
+ );
+}
+
+export default withPolarisExample(FrameExample);
diff --git a/polaris.shopify.com/app/examples/frame-with-an-offset/page.tsx b/polaris.shopify.com/app/examples/frame-with-an-offset/page.tsx
new file mode 100644
index 00000000000..d3f84a31853
--- /dev/null
+++ b/polaris.shopify.com/app/examples/frame-with-an-offset/page.tsx
@@ -0,0 +1,368 @@
+'use client';
+
+import {
+ ActionList,
+ AppProvider,
+ LegacyCard,
+ ContextualSaveBar,
+ FormLayout,
+ Frame,
+ Layout,
+ Loading,
+ Modal,
+ Navigation,
+ Page,
+ SkeletonBodyText,
+ SkeletonDisplayText,
+ SkeletonPage,
+ TextContainer,
+ TextField,
+ Toast,
+ TopBar,
+} from '@shopify/polaris';
+import {
+ ArrowLeftMinor,
+ HomeMajor,
+ OrdersMajor,
+ ConversationMinor,
+} from '@shopify/polaris-icons';
+import {useState, useCallback, useRef} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function FrameExample() {
+ const defaultState = useRef({
+ emailFieldValue: 'dharma@jadedpixel.com',
+ nameFieldValue: 'Jaded Pixel',
+ });
+ const skipToContentRef = useRef(null);
+
+ const [toastActive, setToastActive] = useState(false);
+ const [isLoading, setIsLoading] = useState(false);
+ const [isDirty, setIsDirty] = useState(false);
+ const [searchActive, setSearchActive] = useState(false);
+ const [searchValue, setSearchValue] = useState('');
+ const [userMenuActive, setUserMenuActive] = useState(false);
+ const [mobileNavigationActive, setMobileNavigationActive] = useState(false);
+ const [modalActive, setModalActive] = useState(false);
+ const [nameFieldValue, setNameFieldValue] = useState(
+ defaultState.current.nameFieldValue,
+ );
+ const [emailFieldValue, setEmailFieldValue] = useState(
+ defaultState.current.emailFieldValue,
+ );
+ const [storeName, setStoreName] = useState(
+ defaultState.current.nameFieldValue,
+ );
+ const [supportSubject, setSupportSubject] = useState('');
+ const [supportMessage, setSupportMessage] = useState('');
+
+ const handleSubjectChange = useCallback(
+ (value) => setSupportSubject(value),
+ [],
+ );
+ const handleMessageChange = useCallback(
+ (value) => setSupportMessage(value),
+ [],
+ );
+ const handleDiscard = useCallback(() => {
+ setEmailFieldValue(defaultState.current.emailFieldValue);
+ setNameFieldValue(defaultState.current.nameFieldValue);
+ setIsDirty(false);
+ }, []);
+ const handleSave = useCallback(() => {
+ defaultState.current.nameFieldValue = nameFieldValue;
+ defaultState.current.emailFieldValue = emailFieldValue;
+
+ setIsDirty(false);
+ setToastActive(true);
+ setStoreName(defaultState.current.nameFieldValue);
+ }, [emailFieldValue, nameFieldValue]);
+ const handleNameFieldChange = useCallback((value) => {
+ setNameFieldValue(value);
+ value && setIsDirty(true);
+ }, []);
+ const handleEmailFieldChange = useCallback((value) => {
+ setEmailFieldValue(value);
+ value && setIsDirty(true);
+ }, []);
+ const handleSearchResultsDismiss = useCallback(() => {
+ setSearchActive(false);
+ setSearchValue('');
+ }, []);
+ const handleSearchFieldChange = useCallback((value) => {
+ setSearchValue(value);
+ setSearchActive(value.length > 0);
+ }, []);
+ const toggleToastActive = useCallback(
+ () => setToastActive((toastActive) => !toastActive),
+ [],
+ );
+ const toggleUserMenuActive = useCallback(
+ () => setUserMenuActive((userMenuActive) => !userMenuActive),
+ [],
+ );
+ const toggleMobileNavigationActive = useCallback(
+ () =>
+ setMobileNavigationActive(
+ (mobileNavigationActive) => !mobileNavigationActive,
+ ),
+ [],
+ );
+ const toggleIsLoading = useCallback(
+ () => setIsLoading((isLoading) => !isLoading),
+ [],
+ );
+ const toggleModalActive = useCallback(
+ () => setModalActive((modalActive) => !modalActive),
+ [],
+ );
+
+ const toastMarkup = toastActive ? (
+
+
+
+ Global ribbon
+
+ }
+ topBar={topBarMarkup}
+ navigation={navigationMarkup}
+ showMobileNavigation={mobileNavigationActive}
+ onNavigationDismiss={toggleMobileNavigationActive}
+ skipToContentTarget={skipToContentRef.current}
+ >
+ {contextualSaveBarMarkup}
+ {loadingMarkup}
+ {pageMarkup}
+ {toastMarkup}
+ {modalMarkup}
+
+
+
+ );
+}
+
+export default withPolarisExample(FrameExample);
diff --git a/polaris.shopify.com/app/examples/fullscreen-bar-no-children/page.tsx b/polaris.shopify.com/app/examples/fullscreen-bar-no-children/page.tsx
new file mode 100644
index 00000000000..cfa1f43c310
--- /dev/null
+++ b/polaris.shopify.com/app/examples/fullscreen-bar-no-children/page.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import {FullscreenBar, Button, Text} from '@shopify/polaris';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function FullscreenBarExample() {
+ const [isFullscreen, setFullscreen] = useState(true);
+
+ const handleActionClick = useCallback(() => {
+ setFullscreen(false);
+ }, []);
+
+ const fullscreenBarMarkup =
+ {isFullscreen && fullscreenBarMarkup}
+
+ );
+}
+
+export default withPolarisExample(FullscreenBarExample);
diff --git a/polaris.shopify.com/app/examples/fullscreen-bar-with-children/page.tsx b/polaris.shopify.com/app/examples/fullscreen-bar-with-children/page.tsx
new file mode 100644
index 00000000000..c53354a2aac
--- /dev/null
+++ b/polaris.shopify.com/app/examples/fullscreen-bar-with-children/page.tsx
@@ -0,0 +1,63 @@
+'use client';
+
+import {
+ Badge,
+ ButtonGroup,
+ FullscreenBar,
+ Button,
+ Text,
+} from '@shopify/polaris';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function FullscreenBarExample() {
+ const [isFullscreen, setFullscreen] = useState(true);
+
+ const handleActionClick = useCallback(() => {
+ setFullscreen(false);
+ }, []);
+
+ const fullscreenBarMarkup = (
+
+ {!isFullscreen && (
+
+ )}
+
+ Page content
+
+
+
+ Draft
+
+
+
+
+
+
+
+ Page title
+
+
+
+ {isFullscreen && fullscreenBarMarkup}
+
+ );
+}
+
+export default withPolarisExample(FullscreenBarExample);
diff --git a/polaris.shopify.com/app/examples/grid-custom-layout/page.tsx b/polaris.shopify.com/app/examples/grid-custom-layout/page.tsx
new file mode 100644
index 00000000000..425ef4f24a1
--- /dev/null
+++ b/polaris.shopify.com/app/examples/grid-custom-layout/page.tsx
@@ -0,0 +1,54 @@
+'use client';
+
+import {Page, Grid, LegacyCard} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function GridExample() {
+ return (
+
+ {!isFullscreen && (
+
+ )}
+
+ Page content
+
+
+ View a summary of your online store’s sales.
+View a summary of your online store’s orders.
+View a summary of your online store’s sales.
+View a summary of your online store’s orders.
+View a summary of your online store’s sales.
+View a summary of your online store’s orders.
+
+
+ );
+}
+
+export default withPolarisExample(IconExample);
diff --git a/polaris.shopify.com/app/examples/icon-default/page.tsx b/polaris.shopify.com/app/examples/icon-default/page.tsx
new file mode 100644
index 00000000000..48d19b568c4
--- /dev/null
+++ b/polaris.shopify.com/app/examples/icon-default/page.tsx
@@ -0,0 +1,12 @@
+'use client';
+
+import {Icon} from '@shopify/polaris';
+import {CirclePlusMinor} from '@shopify/polaris-icons';
+import React from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function IconExample() {
+ return
+
+ );
+}
+
+export default withPolarisExample(IconExample);
diff --git a/polaris.shopify.com/app/examples/icon-with-custom-svg-and-color/page.tsx b/polaris.shopify.com/app/examples/icon-with-custom-svg-and-color/page.tsx
new file mode 100644
index 00000000000..2240a9d029b
--- /dev/null
+++ b/polaris.shopify.com/app/examples/icon-with-custom-svg-and-color/page.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import {Icon} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function IconWithReactChild() {
+ const iconContent = () => {
+ return (
+
+ );
+ };
+
+ return
+
+ {name}
+
+
+ {orders}
+
+
+ {amountSpent}
+
+
+ {location}
+
+
+
+ Order count
+
+ ),
+ },
+ {
+ id: 'amount-spent',
+ title: (
+
+ Amount spent
+
+ ),
+ },
+ ,
+ ]}
+ >
+ {rowMarkup}
+
+
+
+ );
+
+ function disambiguateLabel(key, value) {
+ switch (key) {
+ case 'taggedWith':
+ return `Tagged with ${value}`;
+ default:
+ return value;
+ }
+ }
+
+ function isEmpty(value) {
+ if (Array.isArray(value)) {
+ return value.length === 0;
+ } else {
+ return value === '' || value == null;
+ }
+ }
+}
+
+export default withPolarisExample(SmallScreenIndexTableWithAllElementsExample);
diff --git a/polaris.shopify.com/app/examples/index-table-small-screen/page.tsx b/polaris.shopify.com/app/examples/index-table-small-screen/page.tsx
new file mode 100644
index 00000000000..0458e43b8f0
--- /dev/null
+++ b/polaris.shopify.com/app/examples/index-table-small-screen/page.tsx
@@ -0,0 +1,108 @@
+'use client';
+
+import {
+ IndexTable,
+ LegacyCard,
+ useIndexResourceState,
+ Text,
+} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function SimpleSmallScreenIndexTableExample() {
+ const customers = [
+ {
+ id: '3412',
+ url: '#',
+ name: 'Mae Jemison',
+ location: 'Decatur, USA',
+ orders: 20,
+ amountSpent: '$2,400',
+ },
+ {
+ id: '2562',
+ url: '#',
+ name: 'Ellen Ochoa',
+ location: 'Los Angeles, USA',
+ orders: 30,
+ amountSpent: '$140',
+ },
+ ];
+ const resourceName = {
+ singular: 'customer',
+ plural: 'customers',
+ };
+
+ const {selectedResources, allResourcesSelected, handleSelectionChange} =
+ useIndexResourceState(customers);
+
+ const rowMarkup = customers.map(
+ ({id, name, location, orders, amountSpent}, index) => (
+
+
+
+
+
+
+
+
+
+ {name}
+
+
+ {orders}
+
+
+ {amountSpent}
+
+
+ {location}
+
+
+
+ Order count
+
+ ),
+ },
+ {
+ id: 'amount-spent',
+ title: (
+
+ Amount spent
+
+ ),
+ },
+ ,
+ ]}
+ >
+ {rowMarkup}
+
+
+
+ );
+}
+
+export default withPolarisExample(SimpleSmallScreenIndexTableExample);
diff --git a/polaris.shopify.com/app/examples/index-table-with-all-of-its-elements/page.tsx b/polaris.shopify.com/app/examples/index-table-with-all-of-its-elements/page.tsx
new file mode 100644
index 00000000000..c496a2fc7ea
--- /dev/null
+++ b/polaris.shopify.com/app/examples/index-table-with-all-of-its-elements/page.tsx
@@ -0,0 +1,228 @@
+'use client';
+
+import {
+ TextField,
+ IndexTable,
+ LegacyCard,
+ Filters,
+ Select,
+ useIndexResourceState,
+ Text,
+} from '@shopify/polaris';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function IndexTableWithAllElementsExample() {
+ const customers = [
+ {
+ id: '3417',
+ url: '#',
+ name: 'Mae Jemison',
+ location: 'Decatur, USA',
+ orders: 20,
+ amountSpent: '$2,400',
+ },
+ {
+ id: '2567',
+ url: '#',
+ name: 'Ellen Ochoa',
+ location: 'Los Angeles, USA',
+ orders: 30,
+ amountSpent: '$140',
+ },
+ ];
+ const resourceName = {
+ singular: 'customer',
+ plural: 'customers',
+ };
+
+ const {selectedResources, allResourcesSelected, handleSelectionChange} =
+ useIndexResourceState(customers);
+ const [taggedWith, setTaggedWith] = useState('VIP');
+ const [queryValue, setQueryValue] = useState(null);
+ const [sortValue, setSortValue] = useState('today');
+
+ const handleTaggedWithChange = useCallback(
+ (value) => setTaggedWith(value),
+ [],
+ );
+ const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), []);
+ const handleQueryValueRemove = useCallback(() => setQueryValue(null), []);
+ const handleClearAll = useCallback(() => {
+ handleTaggedWithRemove();
+ handleQueryValueRemove();
+ }, [handleQueryValueRemove, handleTaggedWithRemove]);
+ const handleSortChange = useCallback((value) => setSortValue(value), []);
+
+ const promotedBulkActions = [
+ {
+ content: 'Edit customers',
+ onAction: () => console.log('Todo: implement bulk edit'),
+ },
+ ];
+ const bulkActions = [
+ {
+ content: 'Add tags',
+ onAction: () => console.log('Todo: implement bulk add tags'),
+ },
+ {
+ content: 'Remove tags',
+ onAction: () => console.log('Todo: implement bulk remove tags'),
+ },
+ {
+ content: 'Delete customers',
+ onAction: () => console.log('Todo: implement bulk delete'),
+ },
+ ];
+
+ const filters = [
+ {
+ key: 'taggedWith',
+ label: 'Tagged with',
+ filter: (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {children}
+
+ );
+};
+
+const Placeholder = ({height = 'auto', width = 'auto'}) => {
+ return (
+
+ );
+};
+
+export default withPolarisExample(InlineWithGapExample);
diff --git a/polaris.shopify.com/app/examples/inline-with-horizontal-alignment/page.tsx b/polaris.shopify.com/app/examples/inline-with-horizontal-alignment/page.tsx
new file mode 100644
index 00000000000..a6bd30477e9
--- /dev/null
+++ b/polaris.shopify.com/app/examples/inline-with-horizontal-alignment/page.tsx
@@ -0,0 +1,66 @@
+'use client';
+
+import React from 'react';
+import {AlphaStack, Inline, Text, Page} from '@shopify/polaris';
+
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function InlineWithHorizontalAlignmentExample() {
+ return (
+
+
+
+
+ );
+};
+
+export default withPolarisExample(InlineWithHorizontalAlignmentExample);
diff --git a/polaris.shopify.com/app/examples/inline-with-non-wrapping/page.tsx b/polaris.shopify.com/app/examples/inline-with-non-wrapping/page.tsx
new file mode 100644
index 00000000000..1f83c37823a
--- /dev/null
+++ b/polaris.shopify.com/app/examples/inline-with-non-wrapping/page.tsx
@@ -0,0 +1,33 @@
+'use client';
+
+import React from 'react';
+import {Inline} from '@shopify/polaris';
+
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function InlineWithNonWrappingExample() {
+ return (
+
+
+ {label}
+
+
+
+
+
+
+ );
+};
+
+export default withPolarisExample(InlineWithVerticalAlignmentExample);
diff --git a/polaris.shopify.com/app/examples/keyboard-key-default/page.tsx b/polaris.shopify.com/app/examples/keyboard-key-default/page.tsx
new file mode 100644
index 00000000000..7fdc2d73aa2
--- /dev/null
+++ b/polaris.shopify.com/app/examples/keyboard-key-default/page.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import {KeyboardKey} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function Example() {
+ return
+ {header ? (
+
+ {label}
+
+ ) : (
+
+ {label}
+
+ )}
+
+ This order was archived on March 7, 2017 at 3:12pm EDT.
+
+
+
+ Store details
+
+
+ Shopify and your customers will use this information to contact
+ you.
+
+
+
+ View a summary of your online store’s performance.
+SKU: {sku}
+ {quantity} available
+ SKU: {sku}
+ {quantity} available
+ SKU: {sku}
+ {quantity} available
+ SKU: {sku}
+ {quantity} available
+ SKU: {sku}
+ {quantity} available
+ + Use to follow a normal section with a secondary section to create + a 2/3 + 1/3 layout on detail pages (such as individual product or + order pages). Can also be used on any page that needs to structure + a lot of content. This layout stacks the columns on small screens. +
+Add tags to your order.
+View a summary of your online store’s performance.
+-
+
-
+
-
+
+ Two-step authentication adds an extra layer of security when logging + in to your account. A special code will be required each time you + log in, ensuring only you can access your account. +
+-
+
John Smith
+john.smith@example.com
+-
+
-
+
+ Add variants if this product comes in multiple versions, like different + sizes or colors. +
+-
+
View a summary of your online store’s performance.
++ View a summary of your online store’s performance, including sales, + visitors, top products, and referrals. +
+View a summary of your online store’s performance.
++ View a summary of your online store’s performance, including sales, + visitors, top products, and referrals. +
+John Smith
+john.smith@example.com
+-
+
-
+
John Smith
++ Somewhere +
+ The Universe +
+ Somewhere +
+ The Universe +
+ #1136 +
+ was paid +
-
+
-
+
-
+
Add item
+ Item 1
+ Item 2
+ Item 3
+
+
+ );
+
+ const segmentOptions = query ? filteredSegments : segments;
+
+ const segmentList =
+ segmentOptions.length > 0
+ ? segmentOptions
+ .slice(0, visibleOptionIndex)
+ .map(({label, id, value}) => {
+ const selected = segments[selectedSegmentIndex].value === value;
+
+ return (
+
+ {textFieldMarkup}
+
+
+ {listboxMarkup}
+
+
+
+
+
+ );
+}
+
+export default withPolarisExample(LoadingExample);
diff --git a/polaris.shopify.com/app/examples/media-card-default/page.tsx b/polaris.shopify.com/app/examples/media-card-default/page.tsx
new file mode 100644
index 00000000000..a592cf1fc49
--- /dev/null
+++ b/polaris.shopify.com/app/examples/media-card-default/page.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import {MediaCard} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function MediaCardExample() {
+ return (
+ 
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default withPolarisExample(ModalExample);
diff --git a/polaris.shopify.com/app/examples/modal-large/page.tsx b/polaris.shopify.com/app/examples/modal-large/page.tsx
new file mode 100644
index 00000000000..242a950de18
--- /dev/null
+++ b/polaris.shopify.com/app/examples/modal-large/page.tsx
@@ -0,0 +1,58 @@
+'use client';
+
+import {Button, Modal, LegacyStack, DropZone, Checkbox} from '@shopify/polaris';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function LargeModalExample() {
+ const [active, setActive] = useState(true);
+ const [checked, setChecked] = useState(false);
+
+ const toggleActive = useCallback(() => setActive((active) => !active), []);
+
+ const handleCheckbox = useCallback((value) => setChecked(value), []);
+
+ const activator = ;
+
+ return (
+ + Use Instagram posts to share your products with millions of + people. Let shoppers buy from your store without leaving + Instagram. +
+
+
+
+
+ {}}
+ >
+
+
+
+
+
+ );
+}
+
+export default withPolarisExample(LargeModalExample);
diff --git a/polaris.shopify.com/app/examples/modal-small/page.tsx b/polaris.shopify.com/app/examples/modal-small/page.tsx
new file mode 100644
index 00000000000..74989df2fe3
--- /dev/null
+++ b/polaris.shopify.com/app/examples/modal-small/page.tsx
@@ -0,0 +1,58 @@
+'use client';
+
+import {Button, Modal, LegacyStack, DropZone, Checkbox} from '@shopify/polaris';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function SmallModalExample() {
+ const [active, setActive] = useState(true);
+ const [checked, setChecked] = useState(false);
+
+ const toggleActive = useCallback(() => setActive((active) => !active), []);
+
+ const handleCheckbox = useCallback((value) => setChecked(value), []);
+
+ const activator = ;
+
+ return (
+
+
+
+
+ {}}
+ >
+
+
+
+
+
+ );
+}
+
+export default withPolarisExample(SmallModalExample);
diff --git a/polaris.shopify.com/app/examples/modal-with-activator-ref/page.tsx b/polaris.shopify.com/app/examples/modal-with-activator-ref/page.tsx
new file mode 100644
index 00000000000..d6373376b46
--- /dev/null
+++ b/polaris.shopify.com/app/examples/modal-with-activator-ref/page.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+import {Button, Modal, TextContainer} from '@shopify/polaris';
+import {useState, useCallback, useRef} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ModalExample() {
+ const [active, setActive] = useState(true);
+
+ const buttonRef = useRef(null);
+
+ const handleOpen = useCallback(() => setActive(true), []);
+
+ const handleClose = useCallback(() => {
+ setActive(false);
+ }, []);
+
+ const activator = (
+
+
+
+ );
+
+ return (
+
+ {activator}
+
+
+
+
+
+
+
+ );
+}
+
+export default withPolarisExample(ModalExample);
diff --git a/polaris.shopify.com/app/examples/modal-with-primary-action/page.tsx b/polaris.shopify.com/app/examples/modal-with-primary-action/page.tsx
new file mode 100644
index 00000000000..ff97a396940
--- /dev/null
+++ b/polaris.shopify.com/app/examples/modal-with-primary-action/page.tsx
@@ -0,0 +1,80 @@
+'use client';
+
+import {
+ Button,
+ Modal,
+ LegacyStack,
+ TextContainer,
+ TextField,
+} from '@shopify/polaris';
+import {useState, useCallback, useRef} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ModalWithPrimaryActionExample() {
+ const DISCOUNT_LINK = 'https://polaris.shopify.com/';
+
+ const [active, setActive] = useState(true);
+ const node = useRef(null);
+
+ const handleClick = useCallback(() => {
+ node.current && node.current.input.focus();
+ }, []);
+
+ const handleFocus = useCallback(() => {
+ if (node.current == null) {
+ return;
+ }
+ node.current.input.select();
+ document.execCommand('copy');
+ }, []);
+
+ const toggleModal = useCallback(() => setActive((active) => !active), []);
+
+ const activator = ;
+
+ return (
+ + Use Instagram posts to share your products with millions of + people. Let shoppers buy from your store without leaving + Instagram. +
+
+
+
+
+
+
+
+
+
+ {}}
+ autoComplete="off"
+ connectedRight={
+
+ }
+ />
+
+
+
+
+
+ );
+}
+
+export default withPolarisExample(ModalWithPrimaryActionExample);
diff --git a/polaris.shopify.com/app/examples/modal-with-primary-and-secondary-actions/page.tsx b/polaris.shopify.com/app/examples/modal-with-primary-and-secondary-actions/page.tsx
new file mode 100644
index 00000000000..d426cd1722d
--- /dev/null
+++ b/polaris.shopify.com/app/examples/modal-with-primary-and-secondary-actions/page.tsx
@@ -0,0 +1,92 @@
+'use client';
+
+import {Button, Modal, LegacyStack, ChoiceList} from '@shopify/polaris';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ModalWithPrimaryAndSecondaryActionsExample() {
+ const CURRENT_PAGE = 'current_page';
+ const ALL_CUSTOMERS = 'all_customers';
+ const SELECTED_CUSTOMERS = 'selected_customers';
+ const CSV_EXCEL = 'csv_excel';
+ const CSV_PLAIN = 'csv_plain';
+
+ const [active, setActive] = useState(true);
+ const [selectedExport, setSelectedExport] = useState([]);
+ const [selectedExportAs, setSelectedExportAs] = useState([]);
+
+ const handleModalChange = useCallback(() => setActive(!active), [active]);
+
+ const handleClose = () => {
+ handleModalChange();
+ handleSelectedExport([]);
+ handleSelectedExportAs([]);
+ };
+
+ const handleSelectedExport = useCallback(
+ (value) => setSelectedExport(value),
+ [],
+ );
+
+ const handleSelectedExportAs = useCallback(
+ (value) => setSelectedExportAs(value),
+ [],
+ );
+
+ const activator = ;
+
+ return (
+ + You can share this discount link with your customers via email + or social media. Your discount will be automatically applied + at checkout. +
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default withPolarisExample(ModalWithPrimaryAndSecondaryActionsExample);
diff --git a/polaris.shopify.com/app/examples/modal-with-scroll-listener/page.tsx b/polaris.shopify.com/app/examples/modal-with-scroll-listener/page.tsx
new file mode 100644
index 00000000000..4e0128f120a
--- /dev/null
+++ b/polaris.shopify.com/app/examples/modal-with-scroll-listener/page.tsx
@@ -0,0 +1,39 @@
+'use client';
+
+import {Button, Modal, TextContainer} from '@shopify/polaris';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ModalWithScrollListenerExample() {
+ const [active, setActive] = useState(true);
+
+ const handleChange = useCallback(() => setActive(!active), [active]);
+
+ const handleScrollBottom = useCallback(() => alert('Scrolled to bottom'), []);
+
+ const activator = ;
+
+ return (
+
+
+ {Array.from({length: 50}, (_, index) => (
+
+
+
+
+ ))}
+
+
+ );
+}
+
+export default withPolarisExample(ModalWithScrollListenerExample);
diff --git a/polaris.shopify.com/app/examples/modal-without-a-title/page.tsx b/polaris.shopify.com/app/examples/modal-without-a-title/page.tsx
new file mode 100644
index 00000000000..f90d62d083f
--- /dev/null
+++ b/polaris.shopify.com/app/examples/modal-without-a-title/page.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import {Button, Modal, TextContainer} from '@shopify/polaris';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ModalWithoutTitleExample() {
+ const [active, setActive] = useState(true);
+
+ const handleChange = useCallback(() => setActive(!active), [active]);
+
+ const activator = ;
+
+ return (
+ + Item #{index} +
+
+
+
+
+
+
+
+
+ );
+}
+
+export default withPolarisExample(ModalWithoutTitleExample);
diff --git a/polaris.shopify.com/app/examples/modal-without-an-activator-prop/page.tsx b/polaris.shopify.com/app/examples/modal-without-an-activator-prop/page.tsx
new file mode 100644
index 00000000000..298f117392e
--- /dev/null
+++ b/polaris.shopify.com/app/examples/modal-without-an-activator-prop/page.tsx
@@ -0,0 +1,54 @@
+'use client';
+
+import {Button, Modal, TextContainer} from '@shopify/polaris';
+import {useState, useCallback, useRef} from 'react';
+
+function ModalExample() {
+ const [active, setActive] = useState(true);
+
+ const button = useRef();
+
+ const handleOpen = useCallback(() => setActive(true), []);
+
+ const handleClose = useCallback(() => {
+ setActive(false);
+ requestAnimationFrame(() => button.current.querySelector('button').focus());
+ }, []);
+
+ return (
+ + Use Instagram posts to share your products with millions of + people. Let shoppers buy from your store without leaving + Instagram. +
+
+
+
+
+
+
+
+
+ );
+}
+
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+export default withPolarisExample(() => );
diff --git a/polaris.shopify.com/app/examples/navigation-default/page.tsx b/polaris.shopify.com/app/examples/navigation-default/page.tsx
new file mode 100644
index 00000000000..b6baf4aebd1
--- /dev/null
+++ b/polaris.shopify.com/app/examples/navigation-default/page.tsx
@@ -0,0 +1,39 @@
+'use client';
+
+import {Frame, Navigation} from '@shopify/polaris';
+import {HomeMinor, OrdersMinor, ProductsMinor} from '@shopify/polaris-icons';
+import React from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function NavigationExample() {
+ return (
+
+
+
+
+ + Use Instagram posts to share your products with millions of + people. Let shoppers buy from your store without leaving + Instagram. +
+Hidden label
+
+
+
+
+ );
+}
+
+export default withPolarisExample(OptionListInPopoverExample);
diff --git a/polaris.shopify.com/app/examples/option-list-multiple/page.tsx b/polaris.shopify.com/app/examples/option-list-multiple/page.tsx
new file mode 100644
index 00000000000..ba1df3e81bb
--- /dev/null
+++ b/polaris.shopify.com/app/examples/option-list-multiple/page.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import {LegacyCard, OptionList} from '@shopify/polaris';
+import {useState} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function MultipleOptionListExample() {
+ const [selected, setSelected] = useState([]);
+
+ return (
+ Credit card information
+Credit card information
+Credit card information
+Credit card information
+Credit card information
+Credit card information
+Page content
+Page content
+Credit card information
+Credit card information
+Credit card information
+Credit card information
+Buy postage and ship remaining 2 items
+
+ {
+ console.log('Previous');
+ }}
+ hasNext
+ nextKeys={[75]}
+ nextTooltip="k"
+ onNext={() => {
+ console.log('Next');
+ }}
+ />
+
+ );
+}
+
+export default withPolarisExample(PaginationExample);
diff --git a/polaris.shopify.com/app/examples/pagination-with-label/page.tsx b/polaris.shopify.com/app/examples/pagination-with-label/page.tsx
new file mode 100644
index 00000000000..bdc4482e173
--- /dev/null
+++ b/polaris.shopify.com/app/examples/pagination-with-label/page.tsx
@@ -0,0 +1,23 @@
+'use client';
+
+import {Pagination} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function PaginationExample() {
+ return (
+
+
+
+
+ );
+}
+
+export default withPolarisExample(PopoverWithActionListExample);
diff --git a/polaris.shopify.com/app/examples/popover-with-content-and-actions/page.tsx b/polaris.shopify.com/app/examples/popover-with-content-and-actions/page.tsx
new file mode 100644
index 00000000000..8e34f3cde72
--- /dev/null
+++ b/polaris.shopify.com/app/examples/popover-with-content-and-actions/page.tsx
@@ -0,0 +1,49 @@
+'use client';
+
+import {Button, Popover, ActionList} from '@shopify/polaris';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function PopoverContentExample() {
+ const [popoverActive, setPopoverActive] = useState(true);
+
+ const togglePopoverActive = useCallback(
+ () => setPopoverActive((popoverActive) => !popoverActive),
+ [],
+ );
+
+ const activator = (
+
+ );
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default withPolarisExample(PopoverContentExample);
diff --git a/polaris.shopify.com/app/examples/popover-with-form-components/page.tsx b/polaris.shopify.com/app/examples/popover-with-form-components/page.tsx
new file mode 100644
index 00000000000..cf09ef41e2f
--- /dev/null
+++ b/polaris.shopify.com/app/examples/popover-with-form-components/page.tsx
@@ -0,0 +1,48 @@
+'use client';
+
+import {Button, Popover, FormLayout, Select, TextField} from '@shopify/polaris';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function PopoverFormExample() {
+ const [popoverActive, setPopoverActive] = useState(true);
+ const [tagValue, setTagValue] = useState('');
+
+ const togglePopoverActive = useCallback(
+ () => setPopoverActive((popoverActive) => !popoverActive),
+ [],
+ );
+
+ const handleTagValueChange = useCallback((value) => setTagValue(value), []);
+
+ const activator = (
+
+ );
+
+ return (
+ Available sales channels
+
+
+
+
+
+
+
+ );
+}
+
+export default withPolarisExample(PopoverFormExample);
diff --git a/polaris.shopify.com/app/examples/popover-with-lazy-loaded-list/page.tsx b/polaris.shopify.com/app/examples/popover-with-lazy-loaded-list/page.tsx
new file mode 100644
index 00000000000..617efdc870e
--- /dev/null
+++ b/polaris.shopify.com/app/examples/popover-with-lazy-loaded-list/page.tsx
@@ -0,0 +1,99 @@
+'use client';
+
+import {Button, LegacyCard, Popover, ResourceList, Avatar} from '@shopify/polaris';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function PopoverLazyLoadExample() {
+ const [popoverActive, setPopoverActive] = useState(true);
+ const [visibleStaffIndex, setVisibleStaffIndex] = useState(5);
+ const staff = [
+ 'Abbey Mayert',
+ 'Abbi Senger',
+ 'Abdul Goodwin',
+ 'Abdullah Borer',
+ 'Abe Nader',
+ 'Abigayle Smith',
+ 'Abner Torphy',
+ 'Abraham Towne',
+ 'Abraham Vik',
+ 'Ada Fisher',
+ 'Adah Pouros',
+ 'Adam Waelchi',
+ 'Adan Zemlak',
+ 'Addie Wehner',
+ 'Addison Wexler',
+ 'Alex Hernandez',
+ ];
+
+ const togglePopoverActive = useCallback(
+ () => setPopoverActive((popoverActive) => !popoverActive),
+ [],
+ );
+
+ const handleScrolledToBottom = useCallback(() => {
+ const totalIndexes = staff.length;
+ const interval =
+ visibleStaffIndex + 3 < totalIndexes
+ ? 3
+ : totalIndexes - visibleStaffIndex;
+
+ if (interval > 0) {
+ setVisibleStaffIndex(visibleStaffIndex + interval);
+ }
+ }, [staff.length, visibleStaffIndex]);
+
+ const handleResourceListItemClick = useCallback(() => {}, []);
+
+ const activator = (
+
+ );
+
+ const staffList = staff.slice(0, visibleStaffIndex).map((name) => ({
+ name,
+ initials: getInitials(name),
+ }));
+
+ return (
+
+
+
+
+
+
+
+
+
+ {segments[selectedSegmentIndex].label}
+
+
+
+ );
+
+ const textFieldMarkup = (
+
+
+
+
+ );
+
+ const segmentOptions = query ? filteredSegments : segments;
+
+ const segmentList =
+ segmentOptions.length > 0
+ ? segmentOptions
+ .slice(0, visibleOptionIndex)
+ .map(({label, id, value}) => {
+ const selected = segments[selectedSegmentIndex].id === id;
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+const StopPropagation = ({children}: React.PropsWithChildren
+ {textFieldMarkup}
+
+
+ {listboxMarkup}
+
+
+
+ {children}
+
+ );
+};
+
+export default withPolarisExample(PopoverWithSearchableListboxExample);
diff --git a/polaris.shopify.com/app/examples/progress-bar-colored/page.tsx b/polaris.shopify.com/app/examples/progress-bar-colored/page.tsx
new file mode 100644
index 00000000000..4eed5411e0a
--- /dev/null
+++ b/polaris.shopify.com/app/examples/progress-bar-colored/page.tsx
@@ -0,0 +1,17 @@
+'use client';
+
+import {ProgressBar} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ProgressBarExample() {
+ return (
+
+
+
+ );
+}
+
+export default withPolarisExample(ProgressBarExample);
diff --git a/polaris.shopify.com/app/examples/progress-bar-default/page.tsx b/polaris.shopify.com/app/examples/progress-bar-default/page.tsx
new file mode 100644
index 00000000000..65ff9099d05
--- /dev/null
+++ b/polaris.shopify.com/app/examples/progress-bar-default/page.tsx
@@ -0,0 +1,15 @@
+'use client';
+
+import {ProgressBar} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ProgressBarExample() {
+ return (
+ +
+
+ );
+}
+
+export default withPolarisExample(ProgressBarExample);
diff --git a/polaris.shopify.com/app/examples/progress-bar-non-animated/page.tsx b/polaris.shopify.com/app/examples/progress-bar-non-animated/page.tsx
new file mode 100644
index 00000000000..281c3640196
--- /dev/null
+++ b/polaris.shopify.com/app/examples/progress-bar-non-animated/page.tsx
@@ -0,0 +1,15 @@
+'use client';
+
+import {ProgressBar} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ProgressBarExample() {
+ return (
+
+
+ );
+}
+
+export default withPolarisExample(ProgressBarExample);
diff --git a/polaris.shopify.com/app/examples/progress-bar-small/page.tsx b/polaris.shopify.com/app/examples/progress-bar-small/page.tsx
new file mode 100644
index 00000000000..953b5525606
--- /dev/null
+++ b/polaris.shopify.com/app/examples/progress-bar-small/page.tsx
@@ -0,0 +1,15 @@
+'use client';
+
+import {ProgressBar} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ProgressBarExample() {
+ return (
+
+
+ );
+}
+
+export default withPolarisExample(ProgressBarExample);
diff --git a/polaris.shopify.com/app/examples/radio-button-default/page.tsx b/polaris.shopify.com/app/examples/radio-button-default/page.tsx
new file mode 100644
index 00000000000..0e8ebf66e6c
--- /dev/null
+++ b/polaris.shopify.com/app/examples/radio-button-default/page.tsx
@@ -0,0 +1,37 @@
+'use client';
+
+import {LegacyStack, RadioButton} from '@shopify/polaris';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function RadioButtonExample() {
+ const [value, setValue] = useState('disabled');
+
+ const handleChange = useCallback(
+ (_checked, newValue) => setValue(newValue),
+ [],
+ );
+
+ return (
+
+
+
+
+ {rangeValue}
} + /> +by {author}
: null;
+ return (
+ {location}
+
+ );
+ }}
+ />
+ {location}
+
+ );
+ }}
+ />
+ {location}
+ {lastOrder}
+
+ );
+ }}
+ />
+ {location}
+
+
+
+ {location}
+
+
+
+ {location}
+ {location}
+ {location}
+ + You can use the Files section to upload images, videos, and other + documents +
+
+
+
+ {location}
+ {location}
+ {location}
+ {location}
+ {location}
+ {location}
+ {location}
+ {location}
+ + By signing up for the Shopify service (“Service”) or any of the + services of Shopify Inc. (“Shopify”) you are agreeing to be bound by + the following terms and conditions (“Terms of Service”). The Services + offered by Shopify under the Terms of Service include various products + and services to help you create and manage a retail store, whether an + online store (“Online Services”), a physical retail store (“POS + Services”), or both. Any new features or tools which are added to the + current Service shall be also subject to the Terms of Service. You can + review the current version of the Terms of Service at any time at + https://www.shopify.com/legal/terms. Shopify reserves the right to + update and change the Terms of Service by posting updates and changes + to the Shopify website. You are advised to check the Terms of Service + from time to time for any updates or changes that may impact you. +
+-
+
- Account Terms +
+ You must be 18 years or older or at least the age of majority in the + jurisdiction where you reside or from which you use this Service. +
++ To access and use the Services, you must register for a Shopify + account (“Account”) by providing your full legal name, current + address, phone number, a valid email address, and any other + information indicated as required. Shopify may reject your application + for an Account, or cancel an existing Account, for any reason, in our + sole discretion. +
++ You acknowledge that Shopify will use the email address you provide as + the primary method for communication. +
++ You are responsible for keeping your password secure. Shopify cannot + and will not be liable for any loss or damage from your failure to + maintain the security of your Account and password. +
++ You are responsible for all activity and content such as photos, + images, videos, graphics, written content, audio files, code, + information, or data uploaded, collected, generated, stored, + displayed, distributed, transmitted or exhibited on or in connection + with your Account (“Materials”). +
++ A breach or violation of any term in the Terms of Service, including + the AUP, as determined in the sole discretion of Shopify will result + in an immediate termination of your services. +
+Which means
++ You are responsible for your Account and any Materials you upload to + the Shopify Service. Remember that with any violation of these terms + we will cancel your service. +
+ +If we need to reach you, we will send you an email.
+ +-
+
- Account Activation +
2.1 Shopify Account
++ Subject to section 2.1.2, the person signing up for the Service will + be the contracting party (“Account Owner”) for the purposes of our + Terms of Service and will be the person who is authorized to use any + corresponding account we may provide to the Account Owner in + connection with the Service. +
++ If you are signing up for the Service on behalf of your employer, your + employer shall be the Account Owner. If you are signing up for the + Service on behalf of your employer, then you represent and warrant + that you have the authority to bind your employer to our Terms of + Service. +
+2.2 PayPal Express Checkout and Shopify Payments Accounts
+ ++ Upon completion of sign up for the Service, Shopify will create a + PayPal Express Checkout account on your behalf, using your email + address. Depending on your location, Shopify may also create a Shopify + Payments account on your behalf. +
++ You acknowledge that PayPal Express Checkout and/or Shopify Payments + will be your default payments gateway(s) and that it is your sole + responsibility as the Account Owner to activate and maintain these + accounts. If you do not wish to keep either of the payment accounts + active, it is your responsibility to deactivate them. For the + avoidance of doubt, PayPal Express Checkout is a Third Party Service, + as defined in Section 15 of these Terms of Service. +
+2.3 Apple Pay for Safari Account
+ ++ Upon completion of sign up for the Service, Shopify will create an + Apple Pay for Safari (“Apple Pay”) account on your behalf, using the + URL(s) and business name associated with your Account. Depending on + your location, Shopify may activate your Apple Pay account on your + behalf, otherwise you will be required to activate your Apple Pay + account within your Account admin. If you do not wish to keep your + Apple Pay account active, it is your responsibility to deactivate it. + For the avoidance of doubt, Apple Pay is a Third Party Service, as + defined in Section 15 of these Terms of Service. +
++ If you use an Apple Pay supported payment gateway and your customers + have enabled Apple Pay on their device, customers may purchase goods + and services from your store using Apple Pay. +
++ By using Apple Pay on your store, you are agreeing to be bound by the + Apple Pay Platform Web Merchant Terms and Conditions, as they may be + amended by Apple from time to time. If Apple amends the Apple Pay + Platform Web Merchant Terms and Conditions, the amended and restated + version will be posted here:{' '} + + https://www.shopify.com/legal/apple-pay + + . Such amendments to the Apple Pay Platform Web Merchant Terms are + effective as of the date of posting. Your continued use of Apple Pay + on your store after the amended Apple Pay Platform Web Merchant Terms + are posted constitutes your agreement to, and acceptance of, the + amended Apple Pay Platform Web Merchant Terms. If you do not agree to + any changes to the Apple Pay Platform Web Merchant Terms, de-activate + your Apple Pay account and do not continue to use Apple Pay on your + store. +
+2.4 Google Payment
+ ++ Upon completion of sign up for the Service, if you have been enrolled + in Shopify Payments, Shopify will also create a Google Payment account + on your behalf. If you do not wish to keep your Google Payment account + active, it is your responsibility to deactivate it. For the avoidance + of doubt, Google Payment is a Third Party Service, as defined in + Section 15 of these Terms of Service. +
+ ++ If you use a Google Payment supported payment gateway and your + customers have enabled Google Payment, customers may purchase goods + and services from your store using Google Payment. +
+ ++ By using Google Payment on your store, you are agreeing to be bound by + the Google Payment API Terms of Service, as they may be amended by + Google from time to time. If Google amends the Google Payment API + Terms of Service, the amended and restated version will be posted + here:{' '} + + https://payments.developers.google.com/terms/sellertos + + . Such amendments to the Google Payment API Terms of Service are + effective as of the date of posting. Your continued use of Google + Payment on your store after the amended Google Payment API Terms of + Service are posted constitutes your agreement to, and acceptance of, + the amended Google Payment API Terms of Service. If you do not agree + to any changes to the Google Payment API Terms of Service, de-activate + your Google Payment account and do not continue to use Google Payment + on your store. +
+ +2.5 Domain Names
+ ++ Upon purchasing a domain name through Shopify, domain registration + will be preset to automatically renew each year so long as your + Shopify Account remains active. You acknowledge that it is your sole + responsibility to deactivate the auto-renewal function should you + choose to do so. +
+Which means
++ The person signing up for the Shopify Service is responsible for the + account and is bound by these Terms of Service. If you signup on + behalf of your employer, your employer owns the account and is also + bound by our Terms of Service. +
+ ++ We automatically create accounts for you to accept payments. You are + responsible for activating and deactivating these accounts. +
+ ++ Any domain you purchase through us will automatically renew unless you + opt out. +
+ +-
+
- General Conditions +
+ You must read, agree with and accept all of the terms and conditions + contained in these Terms of Service, including the AUP and the Privacy + Policy before you may become a member of Shopify. +
+ ++ Technical support is only provided to paying Account holders and is + only available via email. +
++ The Terms of Service shall be governed by and interpreted in + accordance with the laws of the Province of Ontario and the laws of + Canada applicable therein, without regard to principles of conflicts + of laws. The parties irrevocably and unconditionally submit to the + exclusive jurisdiction of the courts of the Province of Ontario with + respect to any dispute or claim arising out of or in connection with + the Terms of Service. The United Nations Convention on Contracts for + the International Sale of Goods will not apply to these Terms of + Service and is hereby expressly excluded. +
++ You acknowledge and agree that Shopify may amend these Terms of + Service at any time by posting the relevant amended and restated Terms + of Service on Shopify’s website, available at{' '} + + https://www.shopify.com/legal/terms + {' '} + and such amendments to the Terms of Service are effective as of the + date of posting. Your continued use of the Services after the amended + Terms of Service are posted to Shopify’s website constitutes your + agreement to, and acceptance of, the amended Terms of Service. If you + do not agree to any changes to the Terms of Service, do not continue + to use the Service. +
++ You may not use the Shopify service for any illegal or unauthorized + purpose nor may you, in the use of the Service, violate any laws in + your jurisdiction (including but not limited to copyright laws), the + laws applicable to you in your customer’s jurisdiction, or the laws of + Canada and the Province of Ontario. You will comply with all + applicable laws, rules and regulations in your use of the Service. +
++ You agree not to reproduce, duplicate, copy, sell, resell or exploit + any portion of the Service, use of the Service, or access to the + Service without the express written permission by Shopify. +
++ You shall not purchase search engine or other pay per click keywords + (such as Google AdWords), or domain names that use Shopify or Shopify + trademarks and/or variations and misspellings thereof. +
++ Questions about the Terms of Service should be sent to{' '} + support@shopify.com. +
++ You understand that your Materials (not including credit card + information), may be transferred unencrypted and involve (a) + transmissions over various networks; and (b) changes to conform and + adapt to technical requirements of connecting networks or devices. + Credit Card information is always encrypted during transfer over + networks. +
++ You acknowledge and agree that your use of the Service, including + information transmitted to or stored by Shopify, is governed by its + privacy policy at{' '} + + https://www.shopify.com/legal/privacy + +
++ The Terms of Service may be available in languages other than English. + To the extent of any inconsistencies or conflicts between these + English Terms of Service and Shopify’s Terms of Service available in + another language, the most current English version of the Terms of + Service at{' '} + + https://www.shopify.com/legal/terms + {' '} + will prevail. +
+Which means
++ The Shopify service belongs to us. You are not allowed to rip it off + or use it for any illegal or sketchy purpose. +
+ ++ If a dispute arises the issue will be dealt with in the Province of + Ontario. +
+ ++ Your Materials may be transferred unencrypted and may be altered, but + credit card information is always encrypted. +
++ {`${weightError}${unitError} is required when weight based shipping rates are enabled. `} + Manage shipping +
+-
+ {selectedSalesChannels.map((channel, index) => (
+
+
+ );
+
+ const salesChannelAction = hasSelectedSalesChannels
+ ? [
+ {
+ onAction: toggleSheetActive,
+ content: 'Manage sales channels',
+ },
+ ]
+ : null;
+
+ return (
+ No sales channels selected
+ +
+
+
+
+
+
+ Manage sales channels
+
+
+
+
+
+
+
+
+
+
+
+ );
+
+ const segmentOptions = query ? filteredSegments : segments;
+
+ const segmentList =
+ segmentOptions.length > 0
+ ? segmentOptions
+ .slice(0, visibleOptionIndex)
+ .map(({label, id, value}) => {
+ const selected = segments[selectedSegmentIndex].id === id;
+
+ return (
+
+
+ {segmentList}
+ {showAllMarkup}
+ {noResultsMarkup}
+ {lazyLoadingMarkup}
+
+
+ );
+
+ return (
+
+ {activator}
+
+
+
+ );
+}
+
+const StopPropagation = ({children}: React.PropsWithChildren
+
+
+
+
+ Look up customer segmentation membership
+
+
+ Look up whether a customer is included in a segment.
+
+
+
+
+
+ Action
+
+
+
+
+ {textFieldMarkup}
+
+
+ {listboxMarkup}
+
+
+
+ {children}
+
+ );
+};
+
+export default withPolarisExample(SheetWithSearchableListboxExample);
diff --git a/polaris.shopify.com/app/examples/skeleton-body-text-default/page.tsx b/polaris.shopify.com/app/examples/skeleton-body-text-default/page.tsx
new file mode 100644
index 00000000000..9d4cfa24198
--- /dev/null
+++ b/polaris.shopify.com/app/examples/skeleton-body-text-default/page.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import {SkeletonBodyText} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function SkeletonExample() {
+ return + #1136 +
+ was paid +
Tab {selected} selected
+Tab {selected} selected
+Tab {selected} selected
+Tab {selected} selected
++ Shopify POS is the easiest way to sell your products in person. + Available for iPad, iPhone, and Android. +
++ Manage your Shopify store on-the-go with real-time notifications, access + to your dashboard, and order management, all from your smartphone. +
++ Shopify POS is the fastest and easiest way to start accepting Visa, + Mastercard, American Express, and Discover right from your smartphone or + tablet. +
++ Shopify POS is the easiest way to sell your products in person. + Available for iPad, iPhone, and Android. +
+
+
+ );
+}
+
+export default withPolarisExample(TextFieldWithSuggestionExample);
diff --git a/polaris.shopify.com/app/examples/text-field-with-label-action/page.tsx b/polaris.shopify.com/app/examples/text-field-with-label-action/page.tsx
new file mode 100644
index 00000000000..c43e1d6e09b
--- /dev/null
+++ b/polaris.shopify.com/app/examples/text-field-with-label-action/page.tsx
@@ -0,0 +1,26 @@
+'use client';
+
+import {TextField} from '@shopify/polaris';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function LabelActionExample() {
+ const [textFieldValue, setTextFieldValue] = useState('6201.11.0000');
+
+ const handleTextFieldChange = useCallback(
+ (value) => setTextFieldValue(value),
+ [],
+ );
+
+ return (
+
+
+
+
+
+
+ {toastMarkup}
+
+
+
+ );
+}
+
+export default withPolarisExample(ToastExample);
diff --git a/polaris.shopify.com/app/examples/toast-error/page.tsx b/polaris.shopify.com/app/examples/toast-error/page.tsx
new file mode 100644
index 00000000000..5c91952acfc
--- /dev/null
+++ b/polaris.shopify.com/app/examples/toast-error/page.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import {Toast, Frame, Page, Button} from '@shopify/polaris';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ErrorToastExample() {
+ const [active, setActive] = useState(false);
+
+ const toggleActive = useCallback(() => setActive((active) => !active), []);
+
+ const toastMarkup = active ? (
+
+
+
+
+ {toastMarkup}
+
+
+
+ );
+}
+
+export default withPolarisExample(ErrorToastExample);
diff --git a/polaris.shopify.com/app/examples/toast-multiple-messages/page.tsx b/polaris.shopify.com/app/examples/toast-multiple-messages/page.tsx
new file mode 100644
index 00000000000..198ab6e925c
--- /dev/null
+++ b/polaris.shopify.com/app/examples/toast-multiple-messages/page.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import {Toast, Frame, Page, ButtonGroup, Button} from '@shopify/polaris';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function MultipleToastExample() {
+ const [activeOne, setActiveOne] = useState(false);
+ const [activeTwo, setActiveTwo] = useState(false);
+
+ const toggleActiveOne = useCallback(
+ () => setActiveOne((activeOne) => !activeOne),
+ [],
+ );
+
+ const toggleActiveTwo = useCallback(
+ () => setActiveTwo((activeTwo) => !activeTwo),
+ [],
+ );
+
+ const toastMarkup1 = activeOne ? (
+
+
+
+
+
+
+
+ {toastMarkup1}
+ {toastMarkup2}
+
+
+
+ );
+}
+
+export default withPolarisExample(MultipleToastExample);
diff --git a/polaris.shopify.com/app/examples/toast-with-action/page.tsx b/polaris.shopify.com/app/examples/toast-with-action/page.tsx
new file mode 100644
index 00000000000..104a347d1cb
--- /dev/null
+++ b/polaris.shopify.com/app/examples/toast-with-action/page.tsx
@@ -0,0 +1,36 @@
+'use client';
+
+import {Toast, Frame, Page, Button} from '@shopify/polaris';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ToastWithActionExample() {
+ const [active, setActive] = useState(false);
+
+ const toggleActive = useCallback(() => setActive((active) => !active), []);
+
+ const toastMarkup = active ? (
+
+
+
+
+ {toastMarkup}
+
+
+
+ );
+}
+
+export default withPolarisExample(ToastWithActionExample);
diff --git a/polaris.shopify.com/app/examples/toast-with-custom-duration/page.tsx b/polaris.shopify.com/app/examples/toast-with-custom-duration/page.tsx
new file mode 100644
index 00000000000..fa36709a3c4
--- /dev/null
+++ b/polaris.shopify.com/app/examples/toast-with-custom-duration/page.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import {Toast, Frame, Page, Button} from '@shopify/polaris';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function ToastWithCustomDurationExample() {
+ const [active, setActive] = useState(false);
+
+ const toggleActive = useCallback(() => setActive((active) => !active), []);
+
+ const toastMarkup = active ? (
+
+
+
+
+ {toastMarkup}
+
+
+
+ );
+}
+
+export default withPolarisExample(ToastWithCustomDurationExample);
diff --git a/polaris.shopify.com/app/examples/tooltip-default/page.tsx b/polaris.shopify.com/app/examples/tooltip-default/page.tsx
new file mode 100644
index 00000000000..312681353ee
--- /dev/null
+++ b/polaris.shopify.com/app/examples/tooltip-default/page.tsx
@@ -0,0 +1,19 @@
+'use client';
+
+import {Tooltip, Text} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function TooltipExample() {
+ return (
+
+
+
+ Order #1001
+
+
+
+ );
+}
+
+export default withPolarisExample(TooltipExample);
diff --git a/polaris.shopify.com/app/examples/tooltip-visible-only-with-child-interaction/page.tsx b/polaris.shopify.com/app/examples/tooltip-visible-only-with-child-interaction/page.tsx
new file mode 100644
index 00000000000..3130f4c6f5b
--- /dev/null
+++ b/polaris.shopify.com/app/examples/tooltip-visible-only-with-child-interaction/page.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import {ButtonGroup, Tooltip, Button, TextField} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function TooltipExample() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default withPolarisExample(TooltipExample);
diff --git a/polaris.shopify.com/app/examples/tooltip-with-suffix/page.tsx b/polaris.shopify.com/app/examples/tooltip-with-suffix/page.tsx
new file mode 100644
index 00000000000..391d466d2df
--- /dev/null
+++ b/polaris.shopify.com/app/examples/tooltip-with-suffix/page.tsx
@@ -0,0 +1,26 @@
+'use client';
+
+import {Tooltip, Button, Inline, Text} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function TooltipExample() {
+ return (
+
+
+ Bold
+
+ ⌘B
+
+
+ }
+ >
+
+
+
+ );
+}
+
+export default withPolarisExample(TooltipExample);
diff --git a/polaris.shopify.com/app/examples/top-bar-default/page.tsx b/polaris.shopify.com/app/examples/top-bar-default/page.tsx
new file mode 100644
index 00000000000..ea0ed222aad
--- /dev/null
+++ b/polaris.shopify.com/app/examples/top-bar-default/page.tsx
@@ -0,0 +1,120 @@
+'use client';
+
+import {TopBar, ActionList, Icon, Frame, Text} from '@shopify/polaris';
+import {ArrowLeftMinor, QuestionMarkMajor} from '@shopify/polaris-icons';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function TopBarExample() {
+ const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
+ const [isSecondaryMenuOpen, setIsSecondaryMenuOpen] = useState(false);
+ const [isSearchActive, setIsSearchActive] = useState(false);
+ const [searchValue, setSearchValue] = useState('');
+
+ const toggleIsUserMenuOpen = useCallback(
+ () => setIsUserMenuOpen((isUserMenuOpen) => !isUserMenuOpen),
+ [],
+ );
+
+ const toggleIsSecondaryMenuOpen = useCallback(
+ () => setIsSecondaryMenuOpen((isSecondaryMenuOpen) => !isSecondaryMenuOpen),
+ [],
+ );
+
+ const handleSearchResultsDismiss = useCallback(() => {
+ setIsSearchActive(false);
+ setSearchValue('');
+ }, []);
+
+ const handleSearchChange = useCallback((value) => {
+ setSearchValue(value);
+ setIsSearchActive(value.length > 0);
+ }, []);
+
+ const handleNavigationToggle = useCallback(() => {
+ console.log('toggle navigation visibility');
+ }, []);
+
+ const logo = {
+ width: 124,
+ topBarSource:
+ 'https://cdn.shopify.com/s/files/1/0446/6937/files/jaded-pixel-logo-color.svg?6215648040070010999',
+ url: '#',
+ accessibilityLabel: 'Jaded Pixel',
+ };
+
+ const userMenuMarkup = (
+
+
+
+ );
+}
+
+export default withPolarisExample(TopBarExample);
diff --git a/polaris.shopify.com/app/examples/video-thumbnail-default/page.tsx b/polaris.shopify.com/app/examples/video-thumbnail-default/page.tsx
new file mode 100644
index 00000000000..678b3b95dce
--- /dev/null
+++ b/polaris.shopify.com/app/examples/video-thumbnail-default/page.tsx
@@ -0,0 +1,26 @@
+'use client';
+
+import {MediaCard, VideoThumbnail} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
+
+function VideoThumbnailExample() {
+ return (
+ - By clicking Connect, you agree to accept Sample App’s{' '} - terms and conditions. You’ll pay a - commission rate of 15% on sales made through Sample App. -
- ); - - return ( -
-
-
-
- );
-}
-
-export default withPolarisExample(ActionListInPopoverExample);
diff --git a/polaris.shopify.com/pages/examples/action-list-with-a-prefix-and-a-suffix.tsx b/polaris.shopify.com/pages/examples/action-list-with-a-prefix-and-a-suffix.tsx
deleted file mode 100644
index f2b9cc97ac8..00000000000
--- a/polaris.shopify.com/pages/examples/action-list-with-a-prefix-and-a-suffix.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import {ActionList, Thumbnail, Icon, Avatar} from '@shopify/polaris';
-import {ChevronRightMinor} from '@shopify/polaris-icons';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ActionListWithPrefixSuffixExample() {
- return (
-
-
- );
-}
-
-export default withPolarisExample(ActionListWithPrefixSuffixExample);
diff --git a/polaris.shopify.com/pages/examples/action-list-with-an-icon-and-a-suffix.tsx b/polaris.shopify.com/pages/examples/action-list-with-an-icon-and-a-suffix.tsx
deleted file mode 100644
index 432e39b826d..00000000000
--- a/polaris.shopify.com/pages/examples/action-list-with-an-icon-and-a-suffix.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import {Button, Popover, ActionList, Icon} from '@shopify/polaris';
-import {ImportMinor, TickSmallMinor, ExportMinor} from '@shopify/polaris-icons';
-import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ActionListWithSuffixExample() {
- const [active, setActive] = useState(true);
-
- const toggleActive = useCallback(() => setActive((active) => !active), []);
-
- const activator = (
-
- );
-
- return (
-
-
-
-
- );
-}
-
-export default withPolarisExample(ActionListWithSuffixExample);
diff --git a/polaris.shopify.com/pages/examples/action-list-with-destructive-item.tsx b/polaris.shopify.com/pages/examples/action-list-with-destructive-item.tsx
deleted file mode 100644
index ae86412a889..00000000000
--- a/polaris.shopify.com/pages/examples/action-list-with-destructive-item.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import {Button, Popover, ActionList} from '@shopify/polaris';
-import {ImportMinor, ExportMinor, DeleteMinor} from '@shopify/polaris-icons';
-import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ActionListWithDestructiveItemExample() {
- const [active, setActive] = useState(true);
-
- const toggleActive = useCallback(() => setActive((active) => !active), []);
-
- const activator = (
-
- );
-
- return (
-
-
-
-
- );
-}
-
-export default withPolarisExample(ActionListWithDestructiveItemExample);
diff --git a/polaris.shopify.com/pages/examples/action-list-with-help-text.tsx b/polaris.shopify.com/pages/examples/action-list-with-help-text.tsx
deleted file mode 100644
index 69ef7d08cf8..00000000000
--- a/polaris.shopify.com/pages/examples/action-list-with-help-text.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import {Button, Popover, ActionList} from '@shopify/polaris';
-import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ActionListWithHelpTextExample() {
- const [active, setActive] = useState(true);
-
- const toggleActive = useCallback(() => setActive((active) => !active), []);
-
- const activator = (
-
- );
-
- return (
-
-
-
-
- );
-}
-
-export default withPolarisExample(ActionListWithHelpTextExample);
diff --git a/polaris.shopify.com/pages/examples/action-list-with-icons-or-image.tsx b/polaris.shopify.com/pages/examples/action-list-with-icons-or-image.tsx
deleted file mode 100644
index cfb48c247b5..00000000000
--- a/polaris.shopify.com/pages/examples/action-list-with-icons-or-image.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import {Button, Popover, ActionList} from '@shopify/polaris';
-import {ImportMinor, ExportMinor} from '@shopify/polaris-icons';
-import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ActionListWithMediaExample() {
- const [active, setActive] = useState(true);
-
- const toggleActive = useCallback(() => setActive((active) => !active), []);
-
- const activator = (
-
- );
-
- return (
-
-
-
-
- );
-}
-
-export default withPolarisExample(ActionListWithMediaExample);
diff --git a/polaris.shopify.com/pages/examples/action-list-with-sections.tsx b/polaris.shopify.com/pages/examples/action-list-with-sections.tsx
deleted file mode 100644
index e14df7574a8..00000000000
--- a/polaris.shopify.com/pages/examples/action-list-with-sections.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import {Button, Popover, ActionList} from '@shopify/polaris';
-import {
- ImportMinor,
- ExportMinor,
- EditMinor,
- DeleteMinor,
-} from '@shopify/polaris-icons';
-import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function SectionedActionListExample() {
- const [active, setActive] = useState(true);
-
- const toggleActive = useCallback(() => setActive((active) => !active), []);
-
- const activator = (
-
- );
-
- return (
-
-
-
-
- );
-}
-
-export default withPolarisExample(SectionedActionListExample);
diff --git a/polaris.shopify.com/pages/examples/alpha-card-default.tsx b/polaris.shopify.com/pages/examples/alpha-card-default.tsx
deleted file mode 100644
index 50986b57f56..00000000000
--- a/polaris.shopify.com/pages/examples/alpha-card-default.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import {AlphaCard, Text} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function AlphaCardExample() {
- return (
-
-
- );
-};
-
-export default withPolarisExample(AlphaCardExample);
diff --git a/polaris.shopify.com/pages/examples/alpha-stack-default.tsx b/polaris.shopify.com/pages/examples/alpha-stack-default.tsx
deleted file mode 100644
index b95e2b3f011..00000000000
--- a/polaris.shopify.com/pages/examples/alpha-stack-default.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import {AlphaStack, Text} from '@shopify/polaris';
-
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function AlphaStackExample() {
- return (
-
-
- {label}
-
-
-
-
- );
-};
-
-export default withPolarisExample(AlphaStackExample);
diff --git a/polaris.shopify.com/pages/examples/alpha-stack-with-align.tsx b/polaris.shopify.com/pages/examples/alpha-stack-with-align.tsx
deleted file mode 100644
index 9e706e5613c..00000000000
--- a/polaris.shopify.com/pages/examples/alpha-stack-with-align.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react';
-import {AlphaStack, Page, Inline, Text} from '@shopify/polaris';
-
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function AlphaStackWithAlignExample() {
- return (
-
-
- {label}
-
-
-
-
-
-
- );
-};
-
-export default withPolarisExample(AlphaStackWithAlignExample);
diff --git a/polaris.shopify.com/pages/examples/alpha-stack-with-full-width-children.tsx b/polaris.shopify.com/pages/examples/alpha-stack-with-full-width-children.tsx
deleted file mode 100644
index 5e6a2744cb1..00000000000
--- a/polaris.shopify.com/pages/examples/alpha-stack-with-full-width-children.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import {AlphaStack, Text} from '@shopify/polaris';
-
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function AlphaStackWithFullWidthChildrenExample() {
- return (
-
-
- {label}
-
-
-
-
- );
-};
-
-export default withPolarisExample(AlphaStackWithFullWidthChildrenExample);
diff --git a/polaris.shopify.com/pages/examples/alpha-stack-with-gap.tsx b/polaris.shopify.com/pages/examples/alpha-stack-with-gap.tsx
deleted file mode 100644
index 739ba85c012..00000000000
--- a/polaris.shopify.com/pages/examples/alpha-stack-with-gap.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from 'react';
-import {AlphaStack, Text} from '@shopify/polaris';
-
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function AlphaStackWithGapExample() {
- return (
-
-
- {label}
-
-
-
- {children}
-
- );
-};
-
-const Placeholder = ({
- label = '',
- height = 'auto',
- width = 'auto',
- childWidth = 'auto',
-}) => {
- return (
-
-
- );
-};
-
-export default withPolarisExample(AlphaStackWithGapExample);
diff --git a/polaris.shopify.com/pages/examples/app-provider-default.tsx b/polaris.shopify.com/pages/examples/app-provider-default.tsx
deleted file mode 100644
index a7c7fdecf48..00000000000
--- a/polaris.shopify.com/pages/examples/app-provider-default.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import {
- AppProvider,
- Page,
- LegacyCard,
- ResourceList,
- Avatar,
- Text,
-} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function AppProviderExample() {
- return (
-
-
- {label}
-
-
- {location}
- {location}
- Page content
-
-
- );
-}
-
-export default withPolarisExample(AutocompleteExample);
diff --git a/polaris.shopify.com/pages/examples/autocomplete-with-action.tsx b/polaris.shopify.com/pages/examples/autocomplete-with-action.tsx
deleted file mode 100644
index 0403a1f0373..00000000000
--- a/polaris.shopify.com/pages/examples/autocomplete-with-action.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import {Autocomplete, Icon} from '@shopify/polaris';
-import {SearchMinor, CirclePlusMinor} from '@shopify/polaris-icons';
-import {useState, useCallback, useMemo} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function AutocompleteActionBeforeExample() {
- const deselectedOptions = useMemo(
- () => [
- {value: 'rustic', label: 'Rustic'},
- {value: 'antique', label: 'Antique'},
- {value: 'vinyl', label: 'Vinyl'},
- {value: 'vintage', label: 'Vintage'},
- {value: 'refurbished', label: 'Refurbished'},
- ],
- [],
- );
- const [selectedOptions, setSelectedOptions] = useState([]);
- const [inputValue, setInputValue] = useState('');
- const [options, setOptions] = useState(deselectedOptions);
- const [loading, setLoading] = useState(false);
-
- const updateText = useCallback(
- (value) => {
- setInputValue(value);
-
- if (!loading) {
- setLoading(true);
- }
-
- setTimeout(() => {
- if (value === '') {
- setOptions(deselectedOptions);
- setLoading(false);
- return;
- }
- const filterRegex = new RegExp(value, 'i');
- const resultOptions = options.filter((option) =>
- option.label.match(filterRegex),
- );
- setOptions(resultOptions);
- setLoading(false);
- }, 300);
- },
- [deselectedOptions, loading, options],
- );
-
- const updateSelection = useCallback(
- (selected) => {
- const selectedText = selected.map((selectedItem) => {
- const matchedOption = options.find((option) => {
- return option.value.match(selectedItem);
- });
- return matchedOption && matchedOption.label;
- });
- setSelectedOptions(selected);
- setInputValue(selectedText[0]);
- },
- [options],
- );
-
- const textField = (
-
- {
- console.log('actionBefore clicked!');
- },
- }}
- options={options}
- selected={selectedOptions}
- onSelect={updateSelection}
- listTitle="Suggested tags"
- loading={loading}
- textField={textField}
- />
-
- );
-}
-
-export default withPolarisExample(AutocompleteActionBeforeExample);
diff --git a/polaris.shopify.com/pages/examples/autocomplete-with-destructive-action.tsx b/polaris.shopify.com/pages/examples/autocomplete-with-destructive-action.tsx
deleted file mode 100644
index aca60e1f50c..00000000000
--- a/polaris.shopify.com/pages/examples/autocomplete-with-destructive-action.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import {Autocomplete, Icon} from '@shopify/polaris';
-import {SearchMinor, DeleteMinor} from '@shopify/polaris-icons';
-import {useState, useCallback, useMemo} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function AutocompleteActionBeforeExample() {
- const deselectedOptions = useMemo(
- () => [
- {value: 'rustic', label: 'Rustic'},
- {value: 'antique', label: 'Antique'},
- {value: 'vinyl', label: 'Vinyl'},
- {value: 'vintage', label: 'Vintage'},
- {value: 'refurbished', label: 'Refurbished'},
- ],
- [],
- );
- const [selectedOptions, setSelectedOptions] = useState([]);
- const [inputValue, setInputValue] = useState('');
- const [options, setOptions] = useState(deselectedOptions);
- const [loading, setLoading] = useState(false);
-
- const updateText = useCallback(
- (value) => {
- setInputValue(value);
-
- if (!loading) {
- setLoading(true);
- }
-
- setTimeout(() => {
- if (value === '') {
- setOptions(deselectedOptions);
- setLoading(false);
- return;
- }
- const filterRegex = new RegExp(value, 'i');
- const resultOptions = options.filter((option) =>
- option.label.match(filterRegex),
- );
- setOptions(resultOptions);
- setLoading(false);
- }, 300);
- },
- [deselectedOptions, loading, options],
- );
-
- const updateSelection = useCallback(
- (selected) => {
- const selectedText = selected.map((selectedItem) => {
- const matchedOption = options.find((option) => {
- return option.value.match(selectedItem);
- });
- return matchedOption && matchedOption.label;
- });
- setSelectedOptions(selected);
- setInputValue(selectedText[0]);
- },
- [options],
- );
-
- const textField = (
-
- {
- console.log('actionBefore clicked!');
- },
- }}
- options={options}
- selected={selectedOptions}
- onSelect={updateSelection}
- listTitle="Suggested tags"
- loading={loading}
- textField={textField}
- />
-
- );
-}
-
-export default withPolarisExample(AutocompleteActionBeforeExample);
diff --git a/polaris.shopify.com/pages/examples/autocomplete-with-empty-state.tsx b/polaris.shopify.com/pages/examples/autocomplete-with-empty-state.tsx
deleted file mode 100644
index 2b9f304c3c2..00000000000
--- a/polaris.shopify.com/pages/examples/autocomplete-with-empty-state.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import {Autocomplete, Icon, TextContainer} from '@shopify/polaris';
-import {SearchMinor} from '@shopify/polaris-icons';
-import React, {useState, useCallback, useMemo} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function AutocompleteExample() {
- const deselectedOptions = useMemo(
- () => [
- {value: 'rustic', label: 'Rustic'},
- {value: 'antique', label: 'Antique'},
- {value: 'vinyl', label: 'Vinyl'},
- {value: 'vintage', label: 'Vintage'},
- {value: 'refurbished', label: 'Refurbished'},
- ],
- [],
- );
- const [selectedOptions, setSelectedOptions] = useState([]);
- const [inputValue, setInputValue] = useState('');
- const [options, setOptions] = useState(deselectedOptions);
- const [loading, setLoading] = useState(false);
-
- const updateText = useCallback(
- (value) => {
- setInputValue(value);
-
- if (!loading) {
- setLoading(true);
- }
-
- setTimeout(() => {
- if (value === '') {
- setOptions(deselectedOptions);
- setLoading(false);
- return;
- }
- const filterRegex = new RegExp(value, 'i');
- const resultOptions = deselectedOptions.filter((option) =>
- option.label.match(filterRegex),
- );
- setOptions(resultOptions);
- setLoading(false);
- }, 300);
- },
- [deselectedOptions, loading],
- );
-
- const updateSelection = useCallback(
- (selected) => {
- const selectedText = selected.map((selectedItem) => {
- const matchedOption = options.find((option) => {
- return option.value.match(selectedItem);
- });
- return matchedOption && matchedOption.label;
- });
- setSelectedOptions(selected);
- setInputValue(selectedText[0]);
- },
- [options],
- );
-
- const textField = (
-
- Could not find any results
-
-
-
- );
-}
-
-export default withPolarisExample(AutocompleteExample);
diff --git a/polaris.shopify.com/pages/examples/autocomplete-with-lazy-loading.tsx b/polaris.shopify.com/pages/examples/autocomplete-with-lazy-loading.tsx
deleted file mode 100644
index 0e3c193e069..00000000000
--- a/polaris.shopify.com/pages/examples/autocomplete-with-lazy-loading.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import {Autocomplete, Tag, LegacyStack} from '@shopify/polaris';
-import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function AutoCompleteLazyLoadExample() {
- const paginationInterval = 25;
- const deselectedOptions = Array.from(Array(100)).map((_, index) => ({
- value: `rustic ${index + 1}`,
- label: `Rustic ${index + 1}`,
- }));
-
- const [selectedOptions, setSelectedOptions] = useState([]);
- const [inputValue, setInputValue] = useState('');
- const [options, setOptions] = useState(deselectedOptions);
- const [isLoading, setIsLoading] = useState(false);
- const [willLoadMoreResults, setWillLoadMoreResults] = useState(true);
- const [visibleOptionIndex, setVisibleOptionIndex] =
- useState(paginationInterval);
-
- const handleLoadMoreResults = useCallback(() => {
- if (willLoadMoreResults) {
- setIsLoading(true);
-
- setTimeout(() => {
- const remainingOptionCount = options.length - visibleOptionIndex;
- const nextVisibleOptionIndex =
- remainingOptionCount >= paginationInterval
- ? visibleOptionIndex + paginationInterval
- : visibleOptionIndex + remainingOptionCount;
-
- setIsLoading(false);
- setVisibleOptionIndex(nextVisibleOptionIndex);
-
- if (remainingOptionCount <= paginationInterval) {
- setWillLoadMoreResults(false);
- }
- }, 1000);
- }
- }, [willLoadMoreResults, visibleOptionIndex, options.length]);
-
- const removeTag = useCallback(
- (tag) => () => {
- const options = [...selectedOptions];
- options.splice(options.indexOf(tag), 1);
- setSelectedOptions(options);
- },
- [selectedOptions],
- );
-
- const updateText = useCallback(
- (value) => {
- setInputValue(value);
-
- if (value === '') {
- setOptions(deselectedOptions);
- return;
- }
-
- const filterRegex = new RegExp(value, 'i');
- const resultOptions = deselectedOptions.filter((option) =>
- option.label.match(filterRegex),
- );
-
- let endIndex = resultOptions.length - 1;
- if (resultOptions.length === 0) {
- endIndex = 0;
- }
- setOptions(resultOptions);
- setInputValue;
- },
- [deselectedOptions],
- );
-
- const textField = (
-
-
- );
-}
-
-export default withPolarisExample(AutocompleteExample);
diff --git a/polaris.shopify.com/pages/examples/autocomplete-with-multiple-sections.tsx b/polaris.shopify.com/pages/examples/autocomplete-with-multiple-sections.tsx
deleted file mode 100644
index d29dcf5af72..00000000000
--- a/polaris.shopify.com/pages/examples/autocomplete-with-multiple-sections.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import {Autocomplete, Icon} from '@shopify/polaris';
-import {SearchMinor} from '@shopify/polaris-icons';
-import {useState, useCallback, useMemo} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function AutocompleteExample() {
- const deselectedOptions = useMemo(
- () => [
- {
- title: 'Frequently used',
- options: [
- {value: 'ups', label: 'UPS'},
- {value: 'usps', label: 'USPS'},
- ],
- },
- {
- title: 'All carriers',
- options: [
- {value: 'dhl', label: 'DHL Express'},
- {value: 'canada_post', label: 'Canada Post'},
- ],
- },
- ],
- [],
- );
- const [selectedOptions, setSelectedOptions] = useState([]);
- const [inputValue, setInputValue] = useState('');
- const [options, setOptions] = useState(deselectedOptions);
-
- const updateText = useCallback(
- (value) => {
- setInputValue(value);
-
- if (value === '') {
- setOptions(deselectedOptions);
- return;
- }
-
- const filterRegex = new RegExp(value, 'i');
- const resultOptions = [];
-
- deselectedOptions.forEach((opt) => {
- const lol = opt.options.filter((option) =>
- option.label.match(filterRegex),
- );
-
- resultOptions.push({
- title: opt.title,
- options: lol,
- });
- });
-
- setOptions(resultOptions);
- },
- [deselectedOptions],
- );
-
- const updateSelection = useCallback(
- ([selected]) => {
- let selectedValue;
-
- options.forEach(({options: opt}) => {
- if (selectedValue) {
- return;
- }
-
- const matchedOption = opt.find((option) =>
- option.value.match(selected),
- );
-
- if (matchedOption) {
- selectedValue = matchedOption.label;
- }
- });
-
- setSelectedOptions([selected]);
- setInputValue(String(selectedValue) ? String(selectedValue) : '');
- },
- [options],
- );
-
- const textField = (
-
-
- );
-}
-
-export default withPolarisExample(AutocompleteExample);
diff --git a/polaris.shopify.com/pages/examples/autocomplete-with-multiple-tags.tsx b/polaris.shopify.com/pages/examples/autocomplete-with-multiple-tags.tsx
deleted file mode 100644
index b2904fd9554..00000000000
--- a/polaris.shopify.com/pages/examples/autocomplete-with-multiple-tags.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import {LegacyStack, Tag, Autocomplete} from '@shopify/polaris';
-import {useState, useCallback, useMemo} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function MultiAutocompleteExample() {
- const deselectedOptions = useMemo(
- () => [
- {value: 'rustic', label: 'Rustic'},
- {value: 'antique', label: 'Antique'},
- {value: 'vinyl', label: 'Vinyl'},
- {value: 'vintage', label: 'Vintage'},
- {value: 'refurbished', label: 'Refurbished'},
- ],
- [],
- );
- const [selectedOptions, setSelectedOptions] = useState(['rustic']);
- const [inputValue, setInputValue] = useState('');
- const [options, setOptions] = useState(deselectedOptions);
-
- const updateText = useCallback(
- (value) => {
- setInputValue(value);
-
- if (value === '') {
- setOptions(deselectedOptions);
- return;
- }
-
- const filterRegex = new RegExp(value, 'i');
- const resultOptions = deselectedOptions.filter((option) =>
- option.label.match(filterRegex),
- );
- let endIndex = resultOptions.length - 1;
- if (resultOptions.length === 0) {
- endIndex = 0;
- }
- setOptions(resultOptions);
- },
- [deselectedOptions],
- );
-
- const removeTag = useCallback(
- (tag) => () => {
- const options = [...selectedOptions];
- options.splice(options.indexOf(tag), 1);
- setSelectedOptions(options);
- },
- [selectedOptions],
- );
-
- const verticalContentMarkup =
- selectedOptions.length > 0 ? (
-
-
- );
-
- function titleCase(string) {
- return string
- .toLowerCase()
- .split(' ')
- .map((word) => word.replace(word[0], word[0].toUpperCase()))
- .join('');
- }
-}
-
-export default withPolarisExample(MultiAutocompleteExample);
diff --git a/polaris.shopify.com/pages/examples/autocomplete-with-wrapping-action.tsx b/polaris.shopify.com/pages/examples/autocomplete-with-wrapping-action.tsx
deleted file mode 100644
index 98bfdc0aa71..00000000000
--- a/polaris.shopify.com/pages/examples/autocomplete-with-wrapping-action.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import {Autocomplete, Icon} from '@shopify/polaris';
-import {SearchMinor, CirclePlusMinor} from '@shopify/polaris-icons';
-import {useState, useCallback, useMemo} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function AutocompleteActionBeforeExample() {
- const deselectedOptions = useMemo(
- () => [
- {value: 'rustic', label: 'Rustic'},
- {value: 'antique', label: 'Antique'},
- {value: 'vinyl', label: 'Vinyl'},
- {value: 'vintage', label: 'Vintage'},
- {value: 'refurbished', label: 'Refurbished'},
- ],
- [],
- );
- const [selectedOptions, setSelectedOptions] = useState([]);
- const [inputValue, setInputValue] = useState('');
- const [options, setOptions] = useState(deselectedOptions);
- const [loading, setLoading] = useState(false);
-
- const updateText = useCallback(
- (value) => {
- setInputValue(value);
-
- if (!loading) {
- setLoading(true);
- }
-
- setTimeout(() => {
- if (value === '') {
- setOptions(deselectedOptions);
- setLoading(false);
- return;
- }
- const filterRegex = new RegExp(value, 'i');
- const resultOptions = options.filter((option) =>
- option.label.match(filterRegex),
- );
- setOptions(resultOptions);
- setLoading(false);
- }, 300);
- },
- [deselectedOptions, loading, options],
- );
-
- const updateSelection = useCallback(
- (selected) => {
- const selectedText = selected.map((selectedItem) => {
- const matchedOption = options.find((option) => {
- return option.value.match(selectedItem);
- });
- return matchedOption && matchedOption.label;
- });
- setSelectedOptions(selected);
- setInputValue(selectedText[0]);
- },
- [options],
- );
-
- const textField = (
-
- {
- console.log('actionBefore clicked!');
- },
- }}
- options={options}
- selected={selectedOptions}
- onSelect={updateSelection}
- listTitle="Suggested tags"
- loading={loading}
- textField={textField}
- />
-
- );
-}
-
-export default withPolarisExample(AutocompleteActionBeforeExample);
diff --git a/polaris.shopify.com/pages/examples/avatar-default.tsx b/polaris.shopify.com/pages/examples/avatar-default.tsx
deleted file mode 100644
index 97eff02e80a..00000000000
--- a/polaris.shopify.com/pages/examples/avatar-default.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import {Avatar} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function AvatarExample() {
- return
-
-
-
- );
-}
-
-export default withPolarisExample(ExtraSmallAvatarExample);
diff --git a/polaris.shopify.com/pages/examples/avatar-square.tsx b/polaris.shopify.com/pages/examples/avatar-square.tsx
deleted file mode 100644
index a08b37a7ad7..00000000000
--- a/polaris.shopify.com/pages/examples/avatar-square.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import {Avatar} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function AvatarExample() {
- return - Before fulfilling this order or capturing payment, please{' '} - review the Risk Analysis and determine if this order - is fraudulent. -
-This order was archived on March 7, 2017 at 3:12pm EDT.
-- Use your finance report to get detailed information about your business.{' '} - Let us know what you think -
-- Use your finance report to get detailed information about your - business. Let us know what you think -
-View a summary of your online store’s performance.
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default withPolarisExample(BannerInModalExample);
diff --git a/polaris.shopify.com/pages/examples/banner-informational.tsx b/polaris.shopify.com/pages/examples/banner-informational.tsx
deleted file mode 100644
index 7aec36301bd..00000000000
--- a/polaris.shopify.com/pages/examples/banner-informational.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import {Banner} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function BannerExample() {
- return (
- - Connect your instagram account to your shop before proceeding. -
-- Use Instagram posts to share your products with millions of - people. Let shoppers buy from your store without leaving - Instagram. -
-Make sure you know how these changes affect your store.
--
-
- Before fulfilling this order or capturing payment, please review the - fraud analysis and determine if this order is fraudulent -
-- Add weights to show accurate rates at checkout and when buying shipping - labels in Shopify. -
-
-
-
-
- );
-};
-
-export default withPolarisExample(BleedAllDirectionsExample);
diff --git a/polaris.shopify.com/pages/examples/bleed-horizontal.tsx b/polaris.shopify.com/pages/examples/bleed-horizontal.tsx
deleted file mode 100644
index acb7ab88420..00000000000
--- a/polaris.shopify.com/pages/examples/bleed-horizontal.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import {Bleed, Box, Text, Inline} from '@shopify/polaris';
-
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function BleedHorizontalExample() {
- return (
-
-
- {label}
-
-
-
-
-
-
- );
-};
-
-export default withPolarisExample(BleedHorizontalExample);
diff --git a/polaris.shopify.com/pages/examples/bleed-specific-direction.tsx b/polaris.shopify.com/pages/examples/bleed-specific-direction.tsx
deleted file mode 100644
index 297205058fd..00000000000
--- a/polaris.shopify.com/pages/examples/bleed-specific-direction.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from 'react';
-import {AlphaStack, Bleed, Box, Text, Inline} from '@shopify/polaris';
-
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function BleedSpecificDirectionExample() {
- return (
-
-
- {label}
-
-
-
-
-
-
- );
-};
-
-export default withPolarisExample(BleedSpecificDirectionExample);
diff --git a/polaris.shopify.com/pages/examples/bleed-vertical.tsx b/polaris.shopify.com/pages/examples/bleed-vertical.tsx
deleted file mode 100644
index 695a06e4a4d..00000000000
--- a/polaris.shopify.com/pages/examples/bleed-vertical.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import {Bleed, Box, Text, Inline} from '@shopify/polaris';
-
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function BleedVerticalExample() {
- return (
-
-
- {label}
-
-
-
-
-
-
- );
-};
-
-export default withPolarisExample(BleedVerticalExample);
diff --git a/polaris.shopify.com/pages/examples/box-default.tsx b/polaris.shopify.com/pages/examples/box-default.tsx
deleted file mode 100644
index 2f2254e5065..00000000000
--- a/polaris.shopify.com/pages/examples/box-default.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-import {Box, Text} from '@shopify/polaris';
-
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function BoxDefaultExample() {
- return (
-
-
- {label}
-
-
-
-
- );
-};
-
-export default withPolarisExample(BoxDefaultExample);
diff --git a/polaris.shopify.com/pages/examples/box-with-border-radius.tsx b/polaris.shopify.com/pages/examples/box-with-border-radius.tsx
deleted file mode 100644
index 208560e8193..00000000000
--- a/polaris.shopify.com/pages/examples/box-with-border-radius.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-import {Box, Text} from '@shopify/polaris';
-
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function BoxWithBorderRadiusExample() {
- return (
-
-
- {label}
-
-
-
-
- );
-};
-
-export default withPolarisExample(BoxWithBorderRadiusExample);
diff --git a/polaris.shopify.com/pages/examples/box-with-border.tsx b/polaris.shopify.com/pages/examples/box-with-border.tsx
deleted file mode 100644
index 70463ac0f04..00000000000
--- a/polaris.shopify.com/pages/examples/box-with-border.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-import {Box, Text} from '@shopify/polaris';
-
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function BoxWithBorderExample() {
- return (
-
-
- {label}
-
-
-
-
- );
-};
-
-export default withPolarisExample(BoxWithBorderExample);
diff --git a/polaris.shopify.com/pages/examples/box-with-color.tsx b/polaris.shopify.com/pages/examples/box-with-color.tsx
deleted file mode 100644
index 8789b92cb0f..00000000000
--- a/polaris.shopify.com/pages/examples/box-with-color.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import {Box, Text} from '@shopify/polaris';
-
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function BoxWithColorExample() {
- return (
-
-
- {label}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-export default withPolarisExample(BoxWithPaddingExample);
diff --git a/polaris.shopify.com/pages/examples/box-with-shadow.tsx b/polaris.shopify.com/pages/examples/box-with-shadow.tsx
deleted file mode 100644
index 7405c9fc7e2..00000000000
--- a/polaris.shopify.com/pages/examples/box-with-shadow.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-import {Box, Text} from '@shopify/polaris';
-
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function BoxWithShadowExample() {
- return (
-
-
- {label}
-
-
-
-
- );
-};
-
-export default withPolarisExample(BoxWithShadowExample);
diff --git a/polaris.shopify.com/pages/examples/button-default.tsx b/polaris.shopify.com/pages/examples/button-default.tsx
deleted file mode 100644
index 3ba730b232a..00000000000
--- a/polaris.shopify.com/pages/examples/button-default.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import {Button} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ButtonExample() {
- return ;
-}
-
-export default withPolarisExample(ButtonExample);
diff --git a/polaris.shopify.com/pages/examples/button-destructive.tsx b/polaris.shopify.com/pages/examples/button-destructive.tsx
deleted file mode 100644
index 8ac32c70bd2..00000000000
--- a/polaris.shopify.com/pages/examples/button-destructive.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import {Button} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ButtonExample() {
- return ;
-}
-
-export default withPolarisExample(ButtonExample);
diff --git a/polaris.shopify.com/pages/examples/button-disabled-state.tsx b/polaris.shopify.com/pages/examples/button-disabled-state.tsx
deleted file mode 100644
index d55927c7f9d..00000000000
--- a/polaris.shopify.com/pages/examples/button-disabled-state.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import {ButtonGroup, Button} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ButtonExample() {
- return (
-
-
- {label}
-
-
-
-
-
- );
-}
-
-export default withPolarisExample(ButtonExample);
diff --git a/polaris.shopify.com/pages/examples/button-outline.tsx b/polaris.shopify.com/pages/examples/button-outline.tsx
deleted file mode 100644
index 0f31768401a..00000000000
--- a/polaris.shopify.com/pages/examples/button-outline.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import {Button} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ButtonExample() {
- return ;
-}
-
-export default withPolarisExample(ButtonExample);
diff --git a/polaris.shopify.com/pages/examples/button-plain-destructive.tsx b/polaris.shopify.com/pages/examples/button-plain-destructive.tsx
deleted file mode 100644
index 744e3b63362..00000000000
--- a/polaris.shopify.com/pages/examples/button-plain-destructive.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import {Button} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ButtonExample() {
- return (
-
- );
-}
-
-export default withPolarisExample(ButtonExample);
diff --git a/polaris.shopify.com/pages/examples/button-plain-disclosure.tsx b/polaris.shopify.com/pages/examples/button-plain-disclosure.tsx
deleted file mode 100644
index f160cd219d7..00000000000
--- a/polaris.shopify.com/pages/examples/button-plain-disclosure.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import {Button} from '@shopify/polaris';
-import {useState} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function DisclosureButton() {
- const [expanded, setExpanded] = useState(false);
-
- return (
-
- );
-}
-
-export default withPolarisExample(DisclosureButton);
diff --git a/polaris.shopify.com/pages/examples/button-plain-monochrome.tsx b/polaris.shopify.com/pages/examples/button-plain-monochrome.tsx
deleted file mode 100644
index 8160eaa542d..00000000000
--- a/polaris.shopify.com/pages/examples/button-plain-monochrome.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import {Button} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ButtonExample() {
- return (
-
- Could not retrieve data.{' '}
-
-
- );
-}
-
-export default withPolarisExample(ButtonExample);
diff --git a/polaris.shopify.com/pages/examples/button-plain.tsx b/polaris.shopify.com/pages/examples/button-plain.tsx
deleted file mode 100644
index 85859fad096..00000000000
--- a/polaris.shopify.com/pages/examples/button-plain.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import {Button} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ButtonExample() {
- return ;
-}
-
-export default withPolarisExample(ButtonExample);
diff --git a/polaris.shopify.com/pages/examples/button-pressed.tsx b/polaris.shopify.com/pages/examples/button-pressed.tsx
deleted file mode 100644
index 4ed7dd95975..00000000000
--- a/polaris.shopify.com/pages/examples/button-pressed.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import {ButtonGroup, Button} from '@shopify/polaris';
-import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function PressedButton() {
- const [isFirstButtonActive, setIsFirstButtonActive] = useState(true);
-
- const handleFirstButtonClick = useCallback(() => {
- if (isFirstButtonActive) return;
- setIsFirstButtonActive(true);
- }, [isFirstButtonActive]);
-
- const handleSecondButtonClick = useCallback(() => {
- if (!isFirstButtonActive) return;
- setIsFirstButtonActive(false);
- }, [isFirstButtonActive]);
-
- return (
-
-
-
- );
-}
-
-export default withPolarisExample(RightAlignedDisclosureButton);
diff --git a/polaris.shopify.com/pages/examples/button-select-disclosure.tsx b/polaris.shopify.com/pages/examples/button-select-disclosure.tsx
deleted file mode 100644
index 73c5e1ecf06..00000000000
--- a/polaris.shopify.com/pages/examples/button-select-disclosure.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import {Button} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ButtonExample() {
- return (
-
-
-
- );
-}
-
-export default withPolarisExample(ButtonExample);
diff --git a/polaris.shopify.com/pages/examples/button-slim.tsx b/polaris.shopify.com/pages/examples/button-slim.tsx
deleted file mode 100644
index 2d072b1bcc2..00000000000
--- a/polaris.shopify.com/pages/examples/button-slim.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import {Button} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ButtonExample() {
- return ;
-}
-
-export default withPolarisExample(ButtonExample);
diff --git a/polaris.shopify.com/pages/examples/button-split.tsx b/polaris.shopify.com/pages/examples/button-split.tsx
deleted file mode 100644
index 6f2f800677f..00000000000
--- a/polaris.shopify.com/pages/examples/button-split.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import {Button} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ButtonExample() {
- return (
-
-
-
- );
-}
-
-export default withPolarisExample(ButtonExample);
diff --git a/polaris.shopify.com/pages/examples/button-text-aligned.tsx b/polaris.shopify.com/pages/examples/button-text-aligned.tsx
deleted file mode 100644
index b98cc2a3d83..00000000000
--- a/polaris.shopify.com/pages/examples/button-text-aligned.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import {Button} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ButtonExample() {
- return (
-
- );
-}
-
-export default withPolarisExample(ButtonExample);
diff --git a/polaris.shopify.com/pages/examples/callout-card-default.tsx b/polaris.shopify.com/pages/examples/callout-card-default.tsx
deleted file mode 100644
index 37659536183..00000000000
--- a/polaris.shopify.com/pages/examples/callout-card-default.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import {CalloutCard} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function Example() {
- return (
- Upload your store’s logo, change colors and fonts, and more.
-Upload your store’s logo, change colors and fonts, and more.
-Upload your store’s logo, change colors and fonts, and more.
-View a summary of your online store’s performance.
--
-
-
-
-
-
- Two-step authentication adds an extra layer of security when logging - in to your account. A special code will be required each time you - log in, ensuring only you can access your account. -
--
-
John Smith
-john.smith@example.com
--
-
-
-
- Add variants if this product comes in multiple versions, like different - sizes or colors. -
--
-
View a summary of your online store’s performance.
-- View a summary of your online store’s performance, including sales, - visitors, top products, and referrals. -
-View a summary of your online store’s performance.
-- View a summary of your online store’s performance, including sales, - visitors, top products, and referrals. -
-John Smith
-john.smith@example.com
--
-
-
-
John Smith
-- Somewhere -
- The Universe -
- Somewhere -
- The Universe -
-
- );
-}
-
-export default withPolarisExample(
- SingleOrMultuChoiceListWithChildrenContextWhenSelectedExample,
-);
diff --git a/polaris.shopify.com/pages/examples/choice-list-with-error.tsx b/polaris.shopify.com/pages/examples/choice-list-with-error.tsx
deleted file mode 100644
index 1ac420ee047..00000000000
--- a/polaris.shopify.com/pages/examples/choice-list-with-error.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import {ChoiceList} from '@shopify/polaris';
-import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ChoiceListWithErrorExample() {
- const [selected, setSelected] = useState('hidden');
-
- const handleChange = useCallback((value) => setSelected(value), []);
-
- return (
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default withPolarisExample(CollapsibleExample);
diff --git a/polaris.shopify.com/pages/examples/color-picker-default.tsx b/polaris.shopify.com/pages/examples/color-picker-default.tsx
deleted file mode 100644
index 3275cc017e9..00000000000
--- a/polaris.shopify.com/pages/examples/color-picker-default.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import {ColorPicker} from '@shopify/polaris';
-import {useState} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ColorPickerExample() {
- const [color, setColor] = useState({
- hue: 120,
- brightness: 1,
- saturation: 1,
- });
-
- return - Your mailing list lets you contact customers or visitors who - have shown an interest in your store. Reach out to them with - exclusive offers or updates about your products. -
- Test link -
-
- );
-}
-
-export default withPolarisExample(ColorPickerWithTransparentValueExample);
diff --git a/polaris.shopify.com/pages/examples/color-picker-with-transparent-value.tsx b/polaris.shopify.com/pages/examples/color-picker-with-transparent-value.tsx
deleted file mode 100644
index 08577f0b530..00000000000
--- a/polaris.shopify.com/pages/examples/color-picker-with-transparent-value.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import {ColorPicker} from '@shopify/polaris';
-import {useState} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ColorPickerWithTransparentValueExample() {
- const [color, setColor] = useState({
- hue: 300,
- brightness: 1,
- saturation: 0.7,
- alpha: 0.7,
- });
-
- return
-
-
-
- );
-};
-
-export default withPolarisExample(ColumnsExample);
diff --git a/polaris.shopify.com/pages/examples/columns-with-fixed-widths.tsx b/polaris.shopify.com/pages/examples/columns-with-fixed-widths.tsx
deleted file mode 100644
index b07660680cd..00000000000
--- a/polaris.shopify.com/pages/examples/columns-with-fixed-widths.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-import {Columns, Text, Inline} from '@shopify/polaris';
-
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ColumnsWithFreeAndFixedWidthsExample() {
- return (
-
-
- {label}
-
-
-
-
-
-
- );
-};
-
-export default withPolarisExample(ColumnsWithFreeAndFixedWidthsExample);
diff --git a/polaris.shopify.com/pages/examples/columns-with-set-number.tsx b/polaris.shopify.com/pages/examples/columns-with-set-number.tsx
deleted file mode 100644
index 533a1282858..00000000000
--- a/polaris.shopify.com/pages/examples/columns-with-set-number.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from 'react';
-import {Columns, Text, Inline} from '@shopify/polaris';
-
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ColumnsWithSetNumberExample() {
- return (
-
-
- {label}
-
-
-
- {children}
-
- );
-};
-
-const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
- return (
-
-
-
-
- );
-};
-
-export default withPolarisExample(ColumnsWithSetNumberExample);
diff --git a/polaris.shopify.com/pages/examples/columns-with-varying-gap.tsx b/polaris.shopify.com/pages/examples/columns-with-varying-gap.tsx
deleted file mode 100644
index 09ce580cf50..00000000000
--- a/polaris.shopify.com/pages/examples/columns-with-varying-gap.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react';
-import {Columns, Text, Inline} from '@shopify/polaris';
-
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ColumnsWithVaryingGapExample() {
- return (
-
-
- {label}
-
-
-
- {children}
-
- );
-};
-
-const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
- return (
-
-
-
-
- );
-};
-
-export default withPolarisExample(ColumnsWithVaryingGapExample);
diff --git a/polaris.shopify.com/pages/examples/combobox-default.tsx b/polaris.shopify.com/pages/examples/combobox-default.tsx
deleted file mode 100644
index 4825d442247..00000000000
--- a/polaris.shopify.com/pages/examples/combobox-default.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import {Listbox, Combobox, Icon} from '@shopify/polaris';
-import {SearchMinor} from '@shopify/polaris-icons';
-import {useState, useCallback, useMemo} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ComboboxExample() {
- const deselectedOptions = useMemo(
- () => [
- {value: 'rustic', label: 'Rustic'},
- {value: 'antique', label: 'Antique'},
- {value: 'vinyl', label: 'Vinyl'},
- {value: 'vintage', label: 'Vintage'},
- {value: 'refurbished', label: 'Refurbished'},
- ],
- [],
- );
-
- const [selectedOption, setSelectedOption] = useState();
- const [inputValue, setInputValue] = useState('');
- const [options, setOptions] = useState(deselectedOptions);
-
- const updateText = useCallback(
- (value) => {
- setInputValue(value);
-
- if (value === '') {
- setOptions(deselectedOptions);
- return;
- }
-
- const filterRegex = new RegExp(value, 'i');
- const resultOptions = deselectedOptions.filter((option) =>
- option.label.match(filterRegex),
- );
- setOptions(resultOptions);
- },
- [deselectedOptions],
- );
-
- const updateSelection = useCallback(
- (selected) => {
- const matchedOption = options.find((option) => {
- return option.value.match(selected);
- });
-
- setSelectedOption(selected);
- setInputValue((matchedOption && matchedOption.label) || '');
- },
- [options],
- );
-
- const optionsMarkup =
- options.length > 0
- ? options.map((option) => {
- const {label, value} = option;
-
- return (
-
-
- {label}
-
-
-
- {optionsMarkup}
- ) : null}
-
-
- );
-}
-
-export default withPolarisExample(ComboboxExample);
diff --git a/polaris.shopify.com/pages/examples/combobox-with-loading.tsx b/polaris.shopify.com/pages/examples/combobox-with-loading.tsx
deleted file mode 100644
index 6b00925aae1..00000000000
--- a/polaris.shopify.com/pages/examples/combobox-with-loading.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import {Listbox, Combobox, Icon} from '@shopify/polaris';
-import {SearchMinor} from '@shopify/polaris-icons';
-import {useState, useCallback, useMemo} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function LoadingAutocompleteExample() {
- const deselectedOptions = useMemo(
- () => [
- {value: 'rustic', label: 'Rustic'},
- {value: 'antique', label: 'Antique'},
- {value: 'vinyl', label: 'Vinyl'},
- {value: 'vintage', label: 'Vintage'},
- {value: 'refurbished', label: 'Refurbished'},
- ],
- [],
- );
-
- const [selectedOption, setSelectedOption] = useState();
- const [inputValue, setInputValue] = useState('');
- const [options, setOptions] = useState(deselectedOptions);
- const [loading, setLoading] = useState(false);
-
- const updateText = useCallback(
- (value) => {
- setInputValue(value);
-
- if (!loading) {
- setLoading(true);
- }
-
- setTimeout(() => {
- if (value === '') {
- setOptions(deselectedOptions);
- setLoading(false);
- return;
- }
- const filterRegex = new RegExp(value, 'i');
- const resultOptions = options.filter((option) =>
- option.label.match(filterRegex),
- );
- setOptions(resultOptions);
- setLoading(false);
- }, 300);
- },
- [deselectedOptions, loading, options],
- );
-
- const updateSelection = useCallback(
- (selected) => {
- const matchedOption = options.find((option) => {
- return option.value.match(selected);
- });
-
- setSelectedOption(selected);
- setInputValue((matchedOption && matchedOption.label) || '');
- },
- [options],
- );
-
- const optionsMarkup =
- options.length > 0
- ? options.map((option) => {
- const {label, value} = option;
-
- return (
-
-
- );
-}
-
-export default withPolarisExample(LoadingAutocompleteExample);
diff --git a/polaris.shopify.com/pages/examples/combobox-with-manual-selection.tsx b/polaris.shopify.com/pages/examples/combobox-with-manual-selection.tsx
deleted file mode 100644
index b3eb60a0747..00000000000
--- a/polaris.shopify.com/pages/examples/combobox-with-manual-selection.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import {
- Tag,
- Listbox,
- Combobox,
- Icon,
- TextContainer,
- LegacyStack,
- AutoSelection,
-} from '@shopify/polaris';
-import {SearchMinor} from '@shopify/polaris-icons';
-import {useState, useCallback, useMemo} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function MultiComboboxExample() {
- const deselectedOptions = useMemo(
- () => [
- {value: 'rustic', label: 'Rustic'},
- {value: 'antique', label: 'Antique'},
- {value: 'vinyl', label: 'Vinyl'},
- {value: 'vintage', label: 'Vintage'},
- {value: 'refurbished', label: 'Refurbished'},
- ],
- [],
- );
-
- const [selectedOptions, setSelectedOptions] = useState([]);
- const [inputValue, setInputValue] = useState('');
- const [options, setOptions] = useState(deselectedOptions);
-
- const updateText = useCallback(
- (value) => {
- setInputValue(value);
-
- if (value === '') {
- setOptions(deselectedOptions);
- return;
- }
-
- const filterRegex = new RegExp(value, 'i');
- const resultOptions = deselectedOptions.filter((option) =>
- option.label.match(filterRegex),
- );
- setOptions(resultOptions);
- },
- [deselectedOptions],
- );
-
- const updateSelection = useCallback(
- (selected) => {
- if (selectedOptions.includes(selected)) {
- setSelectedOptions(
- selectedOptions.filter((option) => option !== selected),
- );
- } else {
- setSelectedOptions([...selectedOptions, selected]);
- }
-
- const matchedOption = options.find((option) => {
- return option.value.match(selected);
- });
-
- updateText('');
- },
- [options, selectedOptions, updateText],
- );
-
- const removeTag = useCallback(
- (tag) => () => {
- const options = [...selectedOptions];
- options.splice(options.indexOf(tag), 1);
- setSelectedOptions(options);
- },
- [selectedOptions],
- );
-
- const tagsMarkup = selectedOptions.map((option) => (
-
-
- {optionsMarkup}
-
- ) : null}
-
-
- {tagsMarkup}
-
-
- );
-}
-
-export default withPolarisExample(MultiComboboxExample);
diff --git a/polaris.shopify.com/pages/examples/combobox-with-multi-select-and-manual-selection.tsx b/polaris.shopify.com/pages/examples/combobox-with-multi-select-and-manual-selection.tsx
deleted file mode 100644
index 46c66efd6ef..00000000000
--- a/polaris.shopify.com/pages/examples/combobox-with-multi-select-and-manual-selection.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import {
- Tag,
- Listbox,
- Combobox,
- Icon,
- TextContainer,
- LegacyStack,
-} from '@shopify/polaris';
-import {SearchMinor} from '@shopify/polaris-icons';
-import {useState, useCallback, useMemo} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function MultiManualComboboxExample() {
- const deselectedOptions = useMemo(
- () => [
- {value: 'rustic', label: 'Rustic'},
- {value: 'antique', label: 'Antique'},
- {value: 'vinyl', label: 'Vinyl'},
- {value: 'vintage', label: 'Vintage'},
- {value: 'refurbished', label: 'Refurbished'},
- ],
- [],
- );
-
- const [selectedOptions, setSelectedOptions] = useState([]);
- const [inputValue, setInputValue] = useState('');
- const [options, setOptions] = useState(deselectedOptions);
-
- const updateText = useCallback(
- (value) => {
- setInputValue(value);
-
- if (value === '') {
- setOptions(deselectedOptions);
- return;
- }
-
- const filterRegex = new RegExp(value, 'i');
- const resultOptions = deselectedOptions.filter((option) =>
- option.label.match(filterRegex),
- );
- setOptions(resultOptions);
- },
- [deselectedOptions],
- );
-
- const updateSelection = useCallback(
- (selected) => {
- if (selectedOptions.includes(selected)) {
- setSelectedOptions(
- selectedOptions.filter((option) => option !== selected),
- );
- } else {
- setSelectedOptions([...selectedOptions, selected]);
- }
-
- const matchedOption = options.find((option) => {
- return option.value.match(selected);
- });
-
- updateText('');
- },
- [options, selectedOptions, updateText],
- );
-
- const removeTag = useCallback(
- (tag) => () => {
- const options = [...selectedOptions];
- options.splice(options.indexOf(tag), 1);
- setSelectedOptions(options);
- },
- [selectedOptions],
- );
-
- const tagsMarkup = selectedOptions.map((option) => (
-
-
- {optionsMarkup}
-
- ) : null}
-
-
- {tagsMarkup}
-
-
- );
-}
-
-export default withPolarisExample(MultiManualComboboxExample);
diff --git a/polaris.shopify.com/pages/examples/combobox-with-multi-select-and-vertical-content.tsx b/polaris.shopify.com/pages/examples/combobox-with-multi-select-and-vertical-content.tsx
deleted file mode 100644
index 87ea3f969f1..00000000000
--- a/polaris.shopify.com/pages/examples/combobox-with-multi-select-and-vertical-content.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-import {
- LegacyStack,
- Tag,
- Listbox,
- EmptySearchResult,
- Combobox,
- Text,
-} from '@shopify/polaris';
-import {useState, useCallback, useMemo} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function MultiselectTagComboboxExample() {
- const [selectedTags, setSelectedTags] = useState(['Rustic']);
- const [value, setValue] = useState('');
- const [suggestion, setSuggestion] = useState('');
-
- const handleActiveOptionChange = useCallback(
- (activeOption) => {
- const activeOptionIsAction = activeOption === value;
-
- if (!activeOptionIsAction && !selectedTags.includes(activeOption)) {
- setSuggestion(activeOption);
- } else {
- setSuggestion('');
- }
- },
- [value, selectedTags],
- );
- const updateSelection = useCallback(
- (selected) => {
- const nextSelectedTags = new Set([...selectedTags]);
-
- if (nextSelectedTags.has(selected)) {
- nextSelectedTags.delete(selected);
- } else {
- nextSelectedTags.add(selected);
- }
- setSelectedTags([...nextSelectedTags]);
- setValue('');
- setSuggestion('');
- },
- [selectedTags],
- );
-
- const removeTag = useCallback(
- (tag) => () => {
- updateSelection(tag);
- },
- [updateSelection],
- );
-
- const getAllTags = useCallback(() => {
- const savedTags = ['Rustic', 'Antique', 'Vinyl', 'Vintage', 'Refurbished'];
- return [...new Set([...savedTags, ...selectedTags].sort())];
- }, [selectedTags]);
-
- const formatOptionText = useCallback(
- (option) => {
- const trimValue = value.trim().toLocaleLowerCase();
- const matchIndex = option.toLocaleLowerCase().indexOf(trimValue);
-
- if (!value || matchIndex === -1) return option;
-
- const start = option.slice(0, matchIndex);
- const highlight = option.slice(matchIndex, matchIndex + trimValue.length);
- const end = option.slice(matchIndex + trimValue.length, option.length);
-
- return (
-
- {start}
-
-
- );
-}
-
-export default withPolarisExample(MultiselectTagComboboxExample);
diff --git a/polaris.shopify.com/pages/examples/combobox-with-multi-select.tsx b/polaris.shopify.com/pages/examples/combobox-with-multi-select.tsx
deleted file mode 100644
index 96c45f2ffee..00000000000
--- a/polaris.shopify.com/pages/examples/combobox-with-multi-select.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import {
- LegacyStack,
- Tag,
- Listbox,
- Combobox,
- Icon,
- TextContainer,
-} from '@shopify/polaris';
-
-import {SearchMinor} from '@shopify/polaris-icons';
-
-import {useState, useCallback, useMemo} from 'react';
-
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function MultiAutoComboboxExample() {
- const deselectedOptions = useMemo(
- () => [
- {value: 'rustic', label: 'Rustic'},
- {value: 'antique', label: 'Antique'},
- {value: 'vinyl', label: 'Vinyl'},
- {value: 'vintage', label: 'Vintage'},
- {value: 'refurbished', label: 'Refurbished'},
- ],
- [],
- );
-
- const [selectedOptions, setSelectedOptions] = useState([]);
- const [inputValue, setInputValue] = useState('');
- const [options, setOptions] = useState(deselectedOptions);
-
- const updateText = useCallback(
- (value) => {
- setInputValue(value);
-
- if (value === '') {
- setOptions(deselectedOptions);
- return;
- }
-
- const filterRegex = new RegExp(value, 'i');
- const resultOptions = deselectedOptions.filter((option) =>
- option.label.match(filterRegex),
- );
- setOptions(resultOptions);
- },
- [deselectedOptions],
- );
-
- const updateSelection = useCallback(
- (selected) => {
- if (selectedOptions.includes(selected)) {
- setSelectedOptions(
- selectedOptions.filter((option) => option !== selected),
- );
- } else {
- setSelectedOptions([...selectedOptions, selected]);
- }
-
- const matchedOption = options.find((option) => {
- return option.value.match(selected);
- });
-
- updateText('');
- },
- [options, selectedOptions, updateText],
- );
-
- const removeTag = useCallback(
- (tag) => () => {
- const options = [...selectedOptions];
- options.splice(options.indexOf(tag), 1);
- setSelectedOptions(options);
- },
- [selectedOptions],
- );
-
- const tagsMarkup = selectedOptions.map((option) => (
-
- {optionsMarkup}
- ) : null}
-
-
- {tagsMarkup}
-
-
- );
-}
-
-export default withPolarisExample(MultiAutoComboboxExample);
diff --git a/polaris.shopify.com/pages/examples/contextual-save-bar-default.tsx b/polaris.shopify.com/pages/examples/contextual-save-bar-default.tsx
deleted file mode 100644
index 9ed55c25986..00000000000
--- a/polaris.shopify.com/pages/examples/contextual-save-bar-default.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import {Frame, ContextualSaveBar} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function Example() {
- return (
-
-
- console.log('add form submit logic'),
- loading: false,
- disabled: false,
- }}
- discardAction={{
- onAction: () => console.log('add clear form logic'),
- }}
- />
-
-
- );
-}
-
-export default withPolarisExample(Example);
diff --git a/polaris.shopify.com/pages/examples/contextual-save-bar-with-flush-contents.tsx b/polaris.shopify.com/pages/examples/contextual-save-bar-with-flush-contents.tsx
deleted file mode 100644
index 617d134b278..00000000000
--- a/polaris.shopify.com/pages/examples/contextual-save-bar-with-flush-contents.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import {Frame, ContextualSaveBar} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function Example() {
- return (
-
-
- console.log('add form submit logic'),
- }}
- discardAction={{
- onAction: () => console.log('add clear form logic'),
- }}
- />
-
-
- );
-}
-
-export default withPolarisExample(Example);
diff --git a/polaris.shopify.com/pages/examples/contextual-save-bar-with-full-width.tsx b/polaris.shopify.com/pages/examples/contextual-save-bar-with-full-width.tsx
deleted file mode 100644
index 48a5112f661..00000000000
--- a/polaris.shopify.com/pages/examples/contextual-save-bar-with-full-width.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import {Frame, ContextualSaveBar} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function Example() {
- return (
-
-
- console.log('add form submit logic'),
- loading: false,
- disabled: false,
- }}
- discardAction={{
- onAction: () => console.log('add clear form logic'),
- }}
- />
-
-
- );
-}
-
-export default withPolarisExample(Example);
diff --git a/polaris.shopify.com/pages/examples/data-table-default.tsx b/polaris.shopify.com/pages/examples/data-table-default.tsx
deleted file mode 100644
index da4484f6f61..00000000000
--- a/polaris.shopify.com/pages/examples/data-table-default.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import {Page, LegacyCard, DataTable} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function DataTableExample() {
- const rows = [
- ['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
- ['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
- [
- 'Navy Merino Wool Blazer with khaki chinos and yellow belt',
- '$445.00',
- 124518,
- 32,
- '$14,240.00',
- ],
- ];
-
- return (
-
- {file.name}{' '}
-
- {file.size} bytes
-
-
- -
- {rejectedFiles.map((file, index) => (
-
-
- {files.map((file, index) => (
-
-
- ))}
-
-
- );
-
- return (
-
- {file.name}{' '}
-
- {file.size} bytes
-
-
-
-
-
-
- );
-}
-
-export default withPolarisExample(DropZoneExample);
diff --git a/polaris.shopify.com/pages/examples/drop-zone-nested.tsx b/polaris.shopify.com/pages/examples/drop-zone-nested.tsx
deleted file mode 100644
index b7bde6eb554..00000000000
--- a/polaris.shopify.com/pages/examples/drop-zone-nested.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import {
- DropZone,
- LegacyStack,
- Thumbnail,
- LegacyCard,
- Text,
-} from '@shopify/polaris';
-import {NoteMinor} from '@shopify/polaris-icons';
-import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function NestedDropZoneExample() {
- const [files, setFiles] = useState([]);
-
- const handleDrop = useCallback((dropFiles) => {
- setFiles((files) => [...files, dropFiles]);
- }, []);
-
- const handleDropZoneClick = useCallback(() => {}, []);
-
- const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];
-
- const fileUpload = !files.length &&
- {file.name}{' '}
-
- {file.size} bytes
-
-
-
-
-
-
- );
-}
-
-export default withPolarisExample(DropZoneExample);
diff --git a/polaris.shopify.com/pages/examples/drop-zone-with-a-label.tsx b/polaris.shopify.com/pages/examples/drop-zone-with-a-label.tsx
deleted file mode 100644
index 189dbb8f4ab..00000000000
--- a/polaris.shopify.com/pages/examples/drop-zone-with-a-label.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import {DropZone} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function DropZoneExample() {
- return (
-
- {file.name}{' '}
-
- {file.size} bytes
-
-
-
- {file.name}{' '}
-
- {file.size} bytes
-
-
-
- {file.name}{' '}
-
- {file.size} bytes
-
-
-
- {file.name}{' '}
-
- {file.size} bytes
-
-
- -
- {rejectedFiles.map((file, index) => (
-
- {file.name}{' '}
-
- {file.size} bytes
-
-
- Track and receive your incoming inventory from suppliers.
-- You can use the Files section to upload images, videos, and other - documents. This example shows the content with a centered layout and - full width. -
-Track and receive your incoming inventory from suppliers.
-
-
-
-
-
- {name}
-
-
- );
- }}
- />
-
-
- );
-
- function disambiguateLabel(key, value) {
- switch (key) {
- case 'taggedWith':
- return `Tagged with ${value}`;
- default:
- return value;
- }
- }
-
- function isEmpty(value) {
- if (Array.isArray(value)) {
- return value.length === 0;
- } else {
- return value === '' || value == null;
- }
- }
-}
-
-export default withPolarisExample(DisableAllFiltersExample);
diff --git a/polaris.shopify.com/pages/examples/filters-some-disabled.tsx b/polaris.shopify.com/pages/examples/filters-some-disabled.tsx
deleted file mode 100644
index 508f219d9f8..00000000000
--- a/polaris.shopify.com/pages/examples/filters-some-disabled.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import {
- TextField,
- LegacyCard,
- ResourceList,
- Filters,
- Button,
- Avatar,
- Text,
-} from '@shopify/polaris';
-import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function DisableSomeFiltersExample() {
- const [taggedWith, setTaggedWith] = useState(null);
- const [vendor, setVendor] = useState(null);
- const [queryValue, setQueryValue] = useState(null);
-
- const handleTaggedWithChange = useCallback(
- (value) => setTaggedWith(value),
- [],
- );
- const handleQueryValueChange = useCallback(
- (value) => setQueryValue(value),
- [],
- );
- const handleVendorChange = useCallback((value) => setVendor(value), []);
-
- const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), []);
- const handleQueryValueRemove = useCallback(() => setQueryValue(null), []);
- const handleVendorRemove = useCallback(() => setVendor(null), []);
-
- const handleClearAll = useCallback(() => {
- handleTaggedWithRemove();
- handleQueryValueRemove();
- handleVendorRemove();
- }, [handleQueryValueRemove, handleTaggedWithRemove, handleVendorRemove]);
-
- const filters = [
- {
- key: 'taggedWith',
- label: 'Tagged with',
- filter: (
-
-
-
-
- }
- items={[
- {
- id: 341,
- url: '#',
- name: 'Mae Jemison',
- location: 'Decatur, USA',
- },
- {
- id: 256,
- url: '#',
- name: 'Ellen Ochoa',
- location: 'Los Angeles, USA',
- },
- ]}
- renderItem={(item) => {
- const {id, url, name, location} = item;
- const media = {location}
-
-
-
-
-
- {name}
-
-
- );
- }}
- />
-
-
- );
-
- function disambiguateLabel(key, value) {
- switch (key) {
- case 'taggedWith':
- return `Tagged with ${value}`;
- default:
- return value;
- }
- }
-
- function isEmpty(value) {
- if (Array.isArray(value)) {
- return value.length === 0;
- } else {
- return value === '' || value == null;
- }
- }
-}
-
-export default withPolarisExample(DisableSomeFiltersExample);
diff --git a/polaris.shopify.com/pages/examples/filters-with-a-data-table.tsx b/polaris.shopify.com/pages/examples/filters-with-a-data-table.tsx
deleted file mode 100644
index cd6635fdbe6..00000000000
--- a/polaris.shopify.com/pages/examples/filters-with-a-data-table.tsx
+++ /dev/null
@@ -1,195 +0,0 @@
-import {
- ChoiceList,
- TextField,
- LegacyCard,
- Filters,
- DataTable,
-} from '@shopify/polaris';
-import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function DataTableFiltersExample() {
- const [availability, setAvailability] = useState(null);
- const [productType, setProductType] = useState(null);
- const [taggedWith, setTaggedWith] = useState(null);
- const [queryValue, setQueryValue] = useState(null);
-
- const handleAvailabilityChange = useCallback(
- (value) => setAvailability(value),
- [],
- );
- const handleProductTypeChange = useCallback(
- (value) => setProductType(value),
- [],
- );
- const handleTaggedWithChange = useCallback(
- (value) => setTaggedWith(value),
- [],
- );
- const handleFiltersQueryChange = useCallback(
- (value) => setQueryValue(value),
- [],
- );
- const handleAvailabilityRemove = useCallback(() => setAvailability(null), []);
- const handleProductTypeRemove = useCallback(() => setProductType(null), []);
- const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), []);
- const handleQueryValueRemove = useCallback(() => setQueryValue(null), []);
- const handleFiltersClearAll = useCallback(() => {
- handleAvailabilityRemove();
- handleProductTypeRemove();
- handleTaggedWithRemove();
- handleQueryValueRemove();
- }, [
- handleAvailabilityRemove,
- handleQueryValueRemove,
- handleProductTypeRemove,
- handleTaggedWithRemove,
- ]);
-
- const filters = [
- {
- key: 'availability',
- label: 'Availability',
- filter: (
-
-
-
-
- }
- items={[
- {
- id: 341,
- url: '#',
- name: 'Mae Jemison',
- location: 'Decatur, USA',
- },
- {
- id: 256,
- url: '#',
- name: 'Ellen Ochoa',
- location: 'Los Angeles, USA',
- },
- ]}
- renderItem={(item) => {
- const {id, url, name, location} = item;
- const media = {location}
-
-
-
-
-
-
- );
-
- function disambiguateLabel(key, value) {
- switch (key) {
- case 'taggedWith':
- return `Tagged with ${value}`;
- case 'availability':
- return value.map((val) => `Available on ${val}`).join(', ');
- case 'productType':
- return value.join(', ');
- default:
- return value;
- }
- }
-
- function isEmpty(value) {
- if (Array.isArray(value)) {
- return value.length === 0;
- } else {
- return value === '' || value == null;
- }
- }
-}
-
-export default withPolarisExample(DataTableFiltersExample);
diff --git a/polaris.shopify.com/pages/examples/filters-with-a-resource-list.tsx b/polaris.shopify.com/pages/examples/filters-with-a-resource-list.tsx
deleted file mode 100644
index f21961affd5..00000000000
--- a/polaris.shopify.com/pages/examples/filters-with-a-resource-list.tsx
+++ /dev/null
@@ -1,209 +0,0 @@
-import {
- ChoiceList,
- TextField,
- RangeSlider,
- LegacyCard,
- ResourceList,
- Filters,
- Avatar,
- Text,
-} from '@shopify/polaris';
-import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ResourceListFiltersExample() {
- const [accountStatus, setAccountStatus] = useState(null);
- const [moneySpent, setMoneySpent] = useState(null);
- const [taggedWith, setTaggedWith] = useState(null);
- const [queryValue, setQueryValue] = useState(null);
-
- const handleAccountStatusChange = useCallback(
- (value) => setAccountStatus(value),
- [],
- );
- const handleMoneySpentChange = useCallback(
- (value) => setMoneySpent(value),
- [],
- );
- const handleTaggedWithChange = useCallback(
- (value) => setTaggedWith(value),
- [],
- );
- const handleFiltersQueryChange = useCallback(
- (value) => setQueryValue(value),
- [],
- );
- const handleAccountStatusRemove = useCallback(
- () => setAccountStatus(null),
- [],
- );
- const handleMoneySpentRemove = useCallback(() => setMoneySpent(null), []);
- const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), []);
- const handleQueryValueRemove = useCallback(() => setQueryValue(null), []);
- const handleFiltersClearAll = useCallback(() => {
- handleAccountStatusRemove();
- handleMoneySpentRemove();
- handleTaggedWithRemove();
- handleQueryValueRemove();
- }, [
- handleAccountStatusRemove,
- handleMoneySpentRemove,
- handleQueryValueRemove,
- handleTaggedWithRemove,
- ]);
-
- const filters = [
- {
- key: 'accountStatus',
- label: 'Account status',
- filter: (
-
-
-
-
- {name}
-
-
- );
- }}
- />
-
-
- );
-
- function disambiguateLabel(key, value) {
- switch (key) {
- case 'moneySpent':
- return `Money spent is between $${value[0]} and $${value[1]}`;
- case 'taggedWith':
- return `Tagged with ${value}`;
- case 'accountStatus':
- return value.map((val) => `Customer ${val}`).join(', ');
- default:
- return value;
- }
- }
-
- function isEmpty(value) {
- if (Array.isArray(value)) {
- return value.length === 0;
- } else {
- return value === '' || value == null;
- }
- }
-}
-
-export default withPolarisExample(ResourceListFiltersExample);
diff --git a/polaris.shopify.com/pages/examples/filters-with-children-content.tsx b/polaris.shopify.com/pages/examples/filters-with-children-content.tsx
deleted file mode 100644
index f102edb3aad..00000000000
--- a/polaris.shopify.com/pages/examples/filters-with-children-content.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import {
- TextField,
- LegacyCard,
- ResourceList,
- Filters,
- Button,
- Avatar,
- Text,
-} from '@shopify/polaris';
-import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function FiltersExample() {
- const [taggedWith, setTaggedWith] = useState(null);
- const [queryValue, setQueryValue] = useState(null);
-
- const handleTaggedWithChange = useCallback(
- (value) => setTaggedWith(value),
- [],
- );
- const handleQueryValueChange = useCallback(
- (value) => setQueryValue(value),
- [],
- );
- const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), []);
- const handleQueryValueRemove = useCallback(() => setQueryValue(null), []);
-
- const handleClearAll = useCallback(() => {
- handleTaggedWithRemove();
- handleQueryValueRemove();
- }, [handleQueryValueRemove, handleTaggedWithRemove]);
-
- const filters = [
- {
- key: 'taggedWith',
- label: 'Tagged with',
- filter: (
- {location}
-
-
-
-
-
- {name}
-
-
- );
- }}
- />
-
-
- );
-
- function disambiguateLabel(key, value) {
- switch (key) {
- case 'taggedWith':
- return `Tagged with ${value}`;
- default:
- return value;
- }
- }
-
- function isEmpty(value) {
- if (Array.isArray(value)) {
- return value.length === 0;
- } else {
- return value === '' || value == null;
- }
- }
-}
-
-export default withPolarisExample(FiltersExample);
diff --git a/polaris.shopify.com/pages/examples/filters-with-help-text.tsx b/polaris.shopify.com/pages/examples/filters-with-help-text.tsx
deleted file mode 100644
index 24abf063dc6..00000000000
--- a/polaris.shopify.com/pages/examples/filters-with-help-text.tsx
+++ /dev/null
@@ -1,211 +0,0 @@
-import {
- ChoiceList,
- TextField,
- RangeSlider,
- LegacyCard,
- ResourceList,
- Filters,
- Avatar,
- Text,
-} from '@shopify/polaris';
-import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ResourceListFiltersExample() {
- const [accountStatus, setAccountStatus] = useState(null);
- const [moneySpent, setMoneySpent] = useState(null);
- const [taggedWith, setTaggedWith] = useState(null);
- const [queryValue, setQueryValue] = useState(null);
-
- const handleAccountStatusChange = useCallback(
- (value) => setAccountStatus(value),
- [],
- );
- const handleMoneySpentChange = useCallback(
- (value) => setMoneySpent(value),
- [],
- );
- const handleTaggedWithChange = useCallback(
- (value) => setTaggedWith(value),
- [],
- );
- const handleFiltersQueryChange = useCallback(
- (value) => setQueryValue(value),
- [],
- );
- const handleAccountStatusRemove = useCallback(
- () => setAccountStatus(null),
- [],
- );
- const handleMoneySpentRemove = useCallback(() => setMoneySpent(null), []);
- const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), []);
- const handleQueryValueRemove = useCallback(() => setQueryValue(null), []);
- const handleFiltersClearAll = useCallback(() => {
- handleAccountStatusRemove();
- handleMoneySpentRemove();
- handleTaggedWithRemove();
- handleQueryValueRemove();
- }, [
- handleAccountStatusRemove,
- handleMoneySpentRemove,
- handleQueryValueRemove,
- handleTaggedWithRemove,
- ]);
-
- const filters = [
- {
- key: 'accountStatus',
- label: 'Account status',
- filter: (
-
-
-
-
- }
- items={[
- {
- id: 341,
- url: '#',
- name: 'Mae Jemison',
- location: 'Decatur, USA',
- },
- {
- id: 256,
- url: '#',
- name: 'Ellen Ochoa',
- location: 'Los Angeles, USA',
- },
- ]}
- renderItem={(item) => {
- const {id, url, name, location} = item;
- const media = {location}
-
-
-
-
- {name}
-
-
- );
- }}
- />
-
-
- );
-
- function disambiguateLabel(key, value) {
- switch (key) {
- case 'moneySpent':
- return `Money spent is between $${value[0]} and $${value[1]}`;
- case 'taggedWith':
- return `Tagged with ${value}`;
- case 'accountStatus':
- return value.map((val) => `Customer ${val}`).join(', ');
- default:
- return value;
- }
- }
-
- function isEmpty(value) {
- if (Array.isArray(value)) {
- return value.length === 0;
- } else {
- return value === '' || value == null;
- }
- }
-}
-
-export default withPolarisExample(ResourceListFiltersExample);
diff --git a/polaris.shopify.com/pages/examples/filters-with-query-field-disabled.tsx b/polaris.shopify.com/pages/examples/filters-with-query-field-disabled.tsx
deleted file mode 100644
index 7f6e42fe156..00000000000
--- a/polaris.shopify.com/pages/examples/filters-with-query-field-disabled.tsx
+++ /dev/null
@@ -1,210 +0,0 @@
-import {
- ChoiceList,
- TextField,
- RangeSlider,
- LegacyCard,
- ResourceList,
- Filters,
- Avatar,
- Text,
-} from '@shopify/polaris';
-import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ResourceListFiltersExample() {
- const [accountStatus, setAccountStatus] = useState(null);
- const [moneySpent, setMoneySpent] = useState(null);
- const [taggedWith, setTaggedWith] = useState(null);
- const [queryValue, setQueryValue] = useState(null);
-
- const handleAccountStatusChange = useCallback(
- (value) => setAccountStatus(value),
- [],
- );
- const handleMoneySpentChange = useCallback(
- (value) => setMoneySpent(value),
- [],
- );
- const handleTaggedWithChange = useCallback(
- (value) => setTaggedWith(value),
- [],
- );
- const handleFiltersQueryChange = useCallback(
- (value) => setQueryValue(value),
- [],
- );
- const handleAccountStatusRemove = useCallback(
- () => setAccountStatus(null),
- [],
- );
- const handleMoneySpentRemove = useCallback(() => setMoneySpent(null), []);
- const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), []);
- const handleQueryValueRemove = useCallback(() => setQueryValue(null), []);
- const handleFiltersClearAll = useCallback(() => {
- handleAccountStatusRemove();
- handleMoneySpentRemove();
- handleTaggedWithRemove();
- handleQueryValueRemove();
- }, [
- handleAccountStatusRemove,
- handleMoneySpentRemove,
- handleQueryValueRemove,
- handleTaggedWithRemove,
- ]);
-
- const filters = [
- {
- key: 'accountStatus',
- label: 'Account status',
- filter: (
- {location}
-
-
-
-
- {name}
-
-
- );
- }}
- />
-
-
- );
-
- function disambiguateLabel(key, value) {
- switch (key) {
- case 'moneySpent':
- return `Money spent is between $${value[0]} and $${value[1]}`;
- case 'taggedWith':
- return `Tagged with ${value}`;
- case 'accountStatus':
- return value.map((val) => `Customer ${val}`).join(', ');
- default:
- return value;
- }
- }
-
- function isEmpty(value) {
- if (Array.isArray(value)) {
- return value.length === 0;
- } else {
- return value === '' || value == null;
- }
- }
-}
-
-export default withPolarisExample(ResourceListFiltersExample);
diff --git a/polaris.shopify.com/pages/examples/filters-with-query-field-hidden.tsx b/polaris.shopify.com/pages/examples/filters-with-query-field-hidden.tsx
deleted file mode 100644
index ff131805981..00000000000
--- a/polaris.shopify.com/pages/examples/filters-with-query-field-hidden.tsx
+++ /dev/null
@@ -1,210 +0,0 @@
-import {
- ChoiceList,
- TextField,
- RangeSlider,
- LegacyCard,
- ResourceList,
- Filters,
- Avatar,
- Text,
-} from '@shopify/polaris';
-import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ResourceListFiltersExample() {
- const [accountStatus, setAccountStatus] = useState(null);
- const [moneySpent, setMoneySpent] = useState(null);
- const [taggedWith, setTaggedWith] = useState(null);
- const [queryValue, setQueryValue] = useState(null);
-
- const handleAccountStatusChange = useCallback(
- (value) => setAccountStatus(value),
- [],
- );
- const handleMoneySpentChange = useCallback(
- (value) => setMoneySpent(value),
- [],
- );
- const handleTaggedWithChange = useCallback(
- (value) => setTaggedWith(value),
- [],
- );
- const handleFiltersQueryChange = useCallback(
- (value) => setQueryValue(value),
- [],
- );
- const handleAccountStatusRemove = useCallback(
- () => setAccountStatus(null),
- [],
- );
- const handleMoneySpentRemove = useCallback(() => setMoneySpent(null), []);
- const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), []);
- const handleQueryValueRemove = useCallback(() => setQueryValue(null), []);
- const handleFiltersClearAll = useCallback(() => {
- handleAccountStatusRemove();
- handleMoneySpentRemove();
- handleTaggedWithRemove();
- handleQueryValueRemove();
- }, [
- handleAccountStatusRemove,
- handleMoneySpentRemove,
- handleQueryValueRemove,
- handleTaggedWithRemove,
- ]);
-
- const filters = [
- {
- key: 'accountStatus',
- label: 'Account status',
- filter: (
- {location}
-
-
-
-
- {name}
-
-
- );
- }}
- />
-
-
- );
-
- function disambiguateLabel(key, value) {
- switch (key) {
- case 'moneySpent':
- return `Money spent is between $${value[0]} and $${value[1]}`;
- case 'taggedWith':
- return `Tagged with ${value}`;
- case 'accountStatus':
- return value.map((val) => `Customer ${val}`).join(', ');
- default:
- return value;
- }
- }
-
- function isEmpty(value) {
- if (Array.isArray(value)) {
- return value.length === 0;
- } else {
- return value === '' || value == null;
- }
- }
-}
-
-export default withPolarisExample(ResourceListFiltersExample);
diff --git a/polaris.shopify.com/pages/examples/filters-without-clear-button.tsx b/polaris.shopify.com/pages/examples/filters-without-clear-button.tsx
deleted file mode 100644
index bd4f996746f..00000000000
--- a/polaris.shopify.com/pages/examples/filters-without-clear-button.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-import {
- TextField,
- LegacyCard,
- ResourceList,
- Filters,
- Button,
- Avatar,
- Text,
-} from '@shopify/polaris';
-import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function Playground() {
- const [taggedWith, setTaggedWith] = useState(null);
- const [queryValue, setQueryValue] = useState(null);
-
- const handleTaggedWithChange = useCallback(
- (value) => setTaggedWith(value),
- [],
- );
- const handleQueryValueChange = useCallback(
- (value) => setQueryValue(value),
- [],
- );
-
- const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), []);
- const handleQueryValueRemove = useCallback(() => setQueryValue(null), []);
-
- const handleClearAll = useCallback(() => {
- handleTaggedWithRemove();
- handleQueryValueRemove();
- }, [handleQueryValueRemove, handleTaggedWithRemove]);
-
- const filters = [
- {
- key: 'taggedWith',
- label: 'Tagged with',
- filter: (
- {location}
-
-
-
-
-
- {name}
-
-
- );
- }}
- />
-
-
- );
-
- function disambiguateLabel(key, value) {
- switch (key) {
- case 'taggedWith':
- return `Tagged with ${value}`;
- default:
- return value;
- }
- }
-
- function isEmpty(value) {
- if (Array.isArray(value)) {
- return value.length === 0;
- } else {
- return value === '' || value == null;
- }
- }
-}
-
-export default withPolarisExample(Playground);
diff --git a/polaris.shopify.com/pages/examples/footer-help-default.tsx b/polaris.shopify.com/pages/examples/footer-help-default.tsx
deleted file mode 100644
index 4eb2bc710d5..00000000000
--- a/polaris.shopify.com/pages/examples/footer-help-default.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import {FooterHelp, Link} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function FooterHelpExample() {
- return (
-
-
-
-
- }
- items={[
- {
- id: 341,
- url: '#',
- name: 'Mae Jemison',
- location: 'Decatur, USA',
- },
- {
- id: 256,
- url: '#',
- name: 'Ellen Ochoa',
- location: 'Los Angeles, USA',
- },
- ]}
- renderItem={(item) => {
- const {id, url, name, location} = item;
- const media = {location}
-
-
-
- {contextualSaveBarMarkup}
- {loadingMarkup}
- {pageMarkup}
- {toastMarkup}
- {modalMarkup}
-
-
-
- );
-}
-
-export default withPolarisExample(FrameExample);
diff --git a/polaris.shopify.com/pages/examples/frame-with-an-offset.tsx b/polaris.shopify.com/pages/examples/frame-with-an-offset.tsx
deleted file mode 100644
index ecc3f4d4a0f..00000000000
--- a/polaris.shopify.com/pages/examples/frame-with-an-offset.tsx
+++ /dev/null
@@ -1,366 +0,0 @@
-import {
- ActionList,
- AppProvider,
- LegacyCard,
- ContextualSaveBar,
- FormLayout,
- Frame,
- Layout,
- Loading,
- Modal,
- Navigation,
- Page,
- SkeletonBodyText,
- SkeletonDisplayText,
- SkeletonPage,
- TextContainer,
- TextField,
- Toast,
- TopBar,
-} from '@shopify/polaris';
-import {
- ArrowLeftMinor,
- HomeMajor,
- OrdersMajor,
- ConversationMinor,
-} from '@shopify/polaris-icons';
-import {useState, useCallback, useRef} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function FrameExample() {
- const defaultState = useRef({
- emailFieldValue: 'dharma@jadedpixel.com',
- nameFieldValue: 'Jaded Pixel',
- });
- const skipToContentRef = useRef(null);
-
- const [toastActive, setToastActive] = useState(false);
- const [isLoading, setIsLoading] = useState(false);
- const [isDirty, setIsDirty] = useState(false);
- const [searchActive, setSearchActive] = useState(false);
- const [searchValue, setSearchValue] = useState('');
- const [userMenuActive, setUserMenuActive] = useState(false);
- const [mobileNavigationActive, setMobileNavigationActive] = useState(false);
- const [modalActive, setModalActive] = useState(false);
- const [nameFieldValue, setNameFieldValue] = useState(
- defaultState.current.nameFieldValue,
- );
- const [emailFieldValue, setEmailFieldValue] = useState(
- defaultState.current.emailFieldValue,
- );
- const [storeName, setStoreName] = useState(
- defaultState.current.nameFieldValue,
- );
- const [supportSubject, setSupportSubject] = useState('');
- const [supportMessage, setSupportMessage] = useState('');
-
- const handleSubjectChange = useCallback(
- (value) => setSupportSubject(value),
- [],
- );
- const handleMessageChange = useCallback(
- (value) => setSupportMessage(value),
- [],
- );
- const handleDiscard = useCallback(() => {
- setEmailFieldValue(defaultState.current.emailFieldValue);
- setNameFieldValue(defaultState.current.nameFieldValue);
- setIsDirty(false);
- }, []);
- const handleSave = useCallback(() => {
- defaultState.current.nameFieldValue = nameFieldValue;
- defaultState.current.emailFieldValue = emailFieldValue;
-
- setIsDirty(false);
- setToastActive(true);
- setStoreName(defaultState.current.nameFieldValue);
- }, [emailFieldValue, nameFieldValue]);
- const handleNameFieldChange = useCallback((value) => {
- setNameFieldValue(value);
- value && setIsDirty(true);
- }, []);
- const handleEmailFieldChange = useCallback((value) => {
- setEmailFieldValue(value);
- value && setIsDirty(true);
- }, []);
- const handleSearchResultsDismiss = useCallback(() => {
- setSearchActive(false);
- setSearchValue('');
- }, []);
- const handleSearchFieldChange = useCallback((value) => {
- setSearchValue(value);
- setSearchActive(value.length > 0);
- }, []);
- const toggleToastActive = useCallback(
- () => setToastActive((toastActive) => !toastActive),
- [],
- );
- const toggleUserMenuActive = useCallback(
- () => setUserMenuActive((userMenuActive) => !userMenuActive),
- [],
- );
- const toggleMobileNavigationActive = useCallback(
- () =>
- setMobileNavigationActive(
- (mobileNavigationActive) => !mobileNavigationActive,
- ),
- [],
- );
- const toggleIsLoading = useCallback(
- () => setIsLoading((isLoading) => !isLoading),
- [],
- );
- const toggleModalActive = useCallback(
- () => setModalActive((modalActive) => !modalActive),
- [],
- );
-
- const toastMarkup = toastActive ? (
-
-
-
- Global ribbon
-
- }
- topBar={topBarMarkup}
- navigation={navigationMarkup}
- showMobileNavigation={mobileNavigationActive}
- onNavigationDismiss={toggleMobileNavigationActive}
- skipToContentTarget={skipToContentRef.current}
- >
- {contextualSaveBarMarkup}
- {loadingMarkup}
- {pageMarkup}
- {toastMarkup}
- {modalMarkup}
-
-
-
- );
-}
-
-export default withPolarisExample(FrameExample);
diff --git a/polaris.shopify.com/pages/examples/fullscreen-bar-no-children.tsx b/polaris.shopify.com/pages/examples/fullscreen-bar-no-children.tsx
deleted file mode 100644
index f2133ec8fec..00000000000
--- a/polaris.shopify.com/pages/examples/fullscreen-bar-no-children.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import {FullscreenBar, Button, Text} from '@shopify/polaris';
-import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function FullscreenBarExample() {
- const [isFullscreen, setFullscreen] = useState(true);
-
- const handleActionClick = useCallback(() => {
- setFullscreen(false);
- }, []);
-
- const fullscreenBarMarkup =
- {isFullscreen && fullscreenBarMarkup}
-
- );
-}
-
-export default withPolarisExample(FullscreenBarExample);
diff --git a/polaris.shopify.com/pages/examples/fullscreen-bar-with-children.tsx b/polaris.shopify.com/pages/examples/fullscreen-bar-with-children.tsx
deleted file mode 100644
index c1388e16843..00000000000
--- a/polaris.shopify.com/pages/examples/fullscreen-bar-with-children.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import {
- Badge,
- ButtonGroup,
- FullscreenBar,
- Button,
- Text,
-} from '@shopify/polaris';
-import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function FullscreenBarExample() {
- const [isFullscreen, setFullscreen] = useState(true);
-
- const handleActionClick = useCallback(() => {
- setFullscreen(false);
- }, []);
-
- const fullscreenBarMarkup = (
-
- {!isFullscreen && (
-
- )}
-
- Page content
-
-
-
- Draft
-
-
-
-
-
-
-
- Page title
-
-
-
- {isFullscreen && fullscreenBarMarkup}
-
- );
-}
-
-export default withPolarisExample(FullscreenBarExample);
diff --git a/polaris.shopify.com/pages/examples/grid-custom-layout.tsx b/polaris.shopify.com/pages/examples/grid-custom-layout.tsx
deleted file mode 100644
index 836d4c0bbe4..00000000000
--- a/polaris.shopify.com/pages/examples/grid-custom-layout.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import {Page, Grid, LegacyCard} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function GridExample() {
- return (
-
- {!isFullscreen && (
-
- )}
-
- Page content
-
-
- View a summary of your online store’s sales.
-View a summary of your online store’s orders.
-View a summary of your online store’s sales.
-View a summary of your online store’s orders.
-View a summary of your online store’s sales.
-View a summary of your online store’s orders.
-
-
- );
-}
-
-export default withPolarisExample(IconExample);
diff --git a/polaris.shopify.com/pages/examples/icon-default.tsx b/polaris.shopify.com/pages/examples/icon-default.tsx
deleted file mode 100644
index c6a13e48663..00000000000
--- a/polaris.shopify.com/pages/examples/icon-default.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import {Icon} from '@shopify/polaris';
-import {CirclePlusMinor} from '@shopify/polaris-icons';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function IconExample() {
- return
-
- );
-}
-
-export default withPolarisExample(IconExample);
diff --git a/polaris.shopify.com/pages/examples/icon-with-custom-svg-and-color.tsx b/polaris.shopify.com/pages/examples/icon-with-custom-svg-and-color.tsx
deleted file mode 100644
index ebaac89e8ee..00000000000
--- a/polaris.shopify.com/pages/examples/icon-with-custom-svg-and-color.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import {Icon} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function IconWithReactChild() {
- const iconContent = () => {
- return (
-
- );
- };
-
- return
-
- {name}
-
-
- {orders}
-
-
- {amountSpent}
-
-
- {location}
-
-
-
- Order count
-
- ),
- },
- {
- id: 'amount-spent',
- title: (
-
- Amount spent
-
- ),
- },
- ,
- ]}
- >
- {rowMarkup}
-
-
-
- );
-
- function disambiguateLabel(key, value) {
- switch (key) {
- case 'taggedWith':
- return `Tagged with ${value}`;
- default:
- return value;
- }
- }
-
- function isEmpty(value) {
- if (Array.isArray(value)) {
- return value.length === 0;
- } else {
- return value === '' || value == null;
- }
- }
-}
-
-export default withPolarisExample(SmallScreenIndexTableWithAllElementsExample);
diff --git a/polaris.shopify.com/pages/examples/index-table-small-screen.tsx b/polaris.shopify.com/pages/examples/index-table-small-screen.tsx
deleted file mode 100644
index 6ea9ce2e821..00000000000
--- a/polaris.shopify.com/pages/examples/index-table-small-screen.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import {
- IndexTable,
- LegacyCard,
- useIndexResourceState,
- Text,
-} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function SimpleSmallScreenIndexTableExample() {
- const customers = [
- {
- id: '3412',
- url: '#',
- name: 'Mae Jemison',
- location: 'Decatur, USA',
- orders: 20,
- amountSpent: '$2,400',
- },
- {
- id: '2562',
- url: '#',
- name: 'Ellen Ochoa',
- location: 'Los Angeles, USA',
- orders: 30,
- amountSpent: '$140',
- },
- ];
- const resourceName = {
- singular: 'customer',
- plural: 'customers',
- };
-
- const {selectedResources, allResourcesSelected, handleSelectionChange} =
- useIndexResourceState(customers);
-
- const rowMarkup = customers.map(
- ({id, name, location, orders, amountSpent}, index) => (
-
-
-
-
-
-
-
-
-
- {name}
-
-
- {orders}
-
-
- {amountSpent}
-
-
- {location}
-
-
-
- Order count
-
- ),
- },
- {
- id: 'amount-spent',
- title: (
-
- Amount spent
-
- ),
- },
- ,
- ]}
- >
- {rowMarkup}
-
-
-
- );
-}
-
-export default withPolarisExample(SimpleSmallScreenIndexTableExample);
diff --git a/polaris.shopify.com/pages/examples/index-table-with-all-of-its-elements.tsx b/polaris.shopify.com/pages/examples/index-table-with-all-of-its-elements.tsx
deleted file mode 100644
index a20b1014ac0..00000000000
--- a/polaris.shopify.com/pages/examples/index-table-with-all-of-its-elements.tsx
+++ /dev/null
@@ -1,226 +0,0 @@
-import {
- TextField,
- IndexTable,
- LegacyCard,
- Filters,
- Select,
- useIndexResourceState,
- Text,
-} from '@shopify/polaris';
-import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function IndexTableWithAllElementsExample() {
- const customers = [
- {
- id: '3417',
- url: '#',
- name: 'Mae Jemison',
- location: 'Decatur, USA',
- orders: 20,
- amountSpent: '$2,400',
- },
- {
- id: '2567',
- url: '#',
- name: 'Ellen Ochoa',
- location: 'Los Angeles, USA',
- orders: 30,
- amountSpent: '$140',
- },
- ];
- const resourceName = {
- singular: 'customer',
- plural: 'customers',
- };
-
- const {selectedResources, allResourcesSelected, handleSelectionChange} =
- useIndexResourceState(customers);
- const [taggedWith, setTaggedWith] = useState('VIP');
- const [queryValue, setQueryValue] = useState(null);
- const [sortValue, setSortValue] = useState('today');
-
- const handleTaggedWithChange = useCallback(
- (value) => setTaggedWith(value),
- [],
- );
- const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), []);
- const handleQueryValueRemove = useCallback(() => setQueryValue(null), []);
- const handleClearAll = useCallback(() => {
- handleTaggedWithRemove();
- handleQueryValueRemove();
- }, [handleQueryValueRemove, handleTaggedWithRemove]);
- const handleSortChange = useCallback((value) => setSortValue(value), []);
-
- const promotedBulkActions = [
- {
- content: 'Edit customers',
- onAction: () => console.log('Todo: implement bulk edit'),
- },
- ];
- const bulkActions = [
- {
- content: 'Add tags',
- onAction: () => console.log('Todo: implement bulk add tags'),
- },
- {
- content: 'Remove tags',
- onAction: () => console.log('Todo: implement bulk remove tags'),
- },
- {
- content: 'Delete customers',
- onAction: () => console.log('Todo: implement bulk delete'),
- },
- ];
-
- const filters = [
- {
- key: 'taggedWith',
- label: 'Tagged with',
- filter: (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {children}
-
- );
-};
-
-const Placeholder = ({height = 'auto', width = 'auto'}) => {
- return (
-
- );
-};
-
-export default withPolarisExample(InlineWithGapExample);
diff --git a/polaris.shopify.com/pages/examples/inline-with-horizontal-alignment.tsx b/polaris.shopify.com/pages/examples/inline-with-horizontal-alignment.tsx
deleted file mode 100644
index 9eb15f15ec5..00000000000
--- a/polaris.shopify.com/pages/examples/inline-with-horizontal-alignment.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from 'react';
-import {AlphaStack, Inline, Text, Page} from '@shopify/polaris';
-
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function InlineWithHorizontalAlignmentExample() {
- return (
-
-
-
-
- );
-};
-
-export default withPolarisExample(InlineWithHorizontalAlignmentExample);
diff --git a/polaris.shopify.com/pages/examples/inline-with-non-wrapping.tsx b/polaris.shopify.com/pages/examples/inline-with-non-wrapping.tsx
deleted file mode 100644
index badcb9b62d1..00000000000
--- a/polaris.shopify.com/pages/examples/inline-with-non-wrapping.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react';
-import {Inline} from '@shopify/polaris';
-
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function InlineWithNonWrappingExample() {
- return (
-
-
- {label}
-
-
-
-
-
-
- );
-};
-
-export default withPolarisExample(InlineWithVerticalAlignmentExample);
diff --git a/polaris.shopify.com/pages/examples/keyboard-key-default.tsx b/polaris.shopify.com/pages/examples/keyboard-key-default.tsx
deleted file mode 100644
index 64c813cb346..00000000000
--- a/polaris.shopify.com/pages/examples/keyboard-key-default.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import {KeyboardKey} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function Example() {
- return
- {header ? (
-
- {label}
-
- ) : (
-
- {label}
-
- )}
-
- This order was archived on March 7, 2017 at 3:12pm EDT.
-
-
-
- Store details
-
-
- Shopify and your customers will use this information to contact
- you.
-
-
-
- View a summary of your online store’s performance.
-SKU: {sku}
- {quantity} available
- SKU: {sku}
- {quantity} available
- SKU: {sku}
- {quantity} available
- SKU: {sku}
- {quantity} available
- SKU: {sku}
- {quantity} available
- - Use to follow a normal section with a secondary section to create - a 2/3 + 1/3 layout on detail pages (such as individual product or - order pages). Can also be used on any page that needs to structure - a lot of content. This layout stacks the columns on small screens. -
-Add tags to your order.
-View a summary of your online store’s performance.
--
-
-
-
-
-
- Two-step authentication adds an extra layer of security when logging - in to your account. A special code will be required each time you - log in, ensuring only you can access your account. -
--
-
John Smith
-john.smith@example.com
--
-
-
-
- Add variants if this product comes in multiple versions, like different - sizes or colors. -
--
-
View a summary of your online store’s performance.
-- View a summary of your online store’s performance, including sales, - visitors, top products, and referrals. -
-View a summary of your online store’s performance.
-- View a summary of your online store’s performance, including sales, - visitors, top products, and referrals. -
-John Smith
-john.smith@example.com
--
-
-
-
John Smith
-- Somewhere -
- The Universe -
- Somewhere -
- The Universe -
- #1136 -
- was paid -
-
-
-
-
-
-
Add item
- Item 1
- Item 2
- Item 3
-
-
- );
-
- const segmentOptions = query ? filteredSegments : segments;
-
- const segmentList =
- segmentOptions.length > 0
- ? segmentOptions
- .slice(0, visibleOptionIndex)
- .map(({label, id, value}) => {
- const selected = segments[selectedSegmentIndex].value === value;
-
- return (
-
- {textFieldMarkup}
-
-
- {listboxMarkup}
-
-
-
-
-
- );
-}
-
-export default withPolarisExample(LoadingExample);
diff --git a/polaris.shopify.com/pages/examples/media-card-default.tsx b/polaris.shopify.com/pages/examples/media-card-default.tsx
deleted file mode 100644
index ad8e8c9b063..00000000000
--- a/polaris.shopify.com/pages/examples/media-card-default.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import {MediaCard} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function MediaCardExample() {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default withPolarisExample(ModalExample);
diff --git a/polaris.shopify.com/pages/examples/modal-large.tsx b/polaris.shopify.com/pages/examples/modal-large.tsx
deleted file mode 100644
index 392d1fe727b..00000000000
--- a/polaris.shopify.com/pages/examples/modal-large.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import {Button, Modal, LegacyStack, DropZone, Checkbox} from '@shopify/polaris';
-import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function LargeModalExample() {
- const [active, setActive] = useState(true);
- const [checked, setChecked] = useState(false);
-
- const toggleActive = useCallback(() => setActive((active) => !active), []);
-
- const handleCheckbox = useCallback((value) => setChecked(value), []);
-
- const activator = ;
-
- return (
- - Use Instagram posts to share your products with millions of - people. Let shoppers buy from your store without leaving - Instagram. -
-
-
-
-
- {}}
- >
-
-
-
-
-
- );
-}
-
-export default withPolarisExample(LargeModalExample);
diff --git a/polaris.shopify.com/pages/examples/modal-small.tsx b/polaris.shopify.com/pages/examples/modal-small.tsx
deleted file mode 100644
index ff92284a622..00000000000
--- a/polaris.shopify.com/pages/examples/modal-small.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import {Button, Modal, LegacyStack, DropZone, Checkbox} from '@shopify/polaris';
-import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function SmallModalExample() {
- const [active, setActive] = useState(true);
- const [checked, setChecked] = useState(false);
-
- const toggleActive = useCallback(() => setActive((active) => !active), []);
-
- const handleCheckbox = useCallback((value) => setChecked(value), []);
-
- const activator = ;
-
- return (
-
-
-
-
- {}}
- >
-
-
-
-
-
- );
-}
-
-export default withPolarisExample(SmallModalExample);
diff --git a/polaris.shopify.com/pages/examples/modal-with-activator-ref.tsx b/polaris.shopify.com/pages/examples/modal-with-activator-ref.tsx
deleted file mode 100644
index b82d88e5947..00000000000
--- a/polaris.shopify.com/pages/examples/modal-with-activator-ref.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import {Button, Modal, TextContainer} from '@shopify/polaris';
-import {useState, useCallback, useRef} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ModalExample() {
- const [active, setActive] = useState(true);
-
- const buttonRef = useRef(null);
-
- const handleOpen = useCallback(() => setActive(true), []);
-
- const handleClose = useCallback(() => {
- setActive(false);
- }, []);
-
- const activator = (
-
-
-
- );
-
- return (
-
- {activator}
-
-
-
-
-
-
-
- );
-}
-
-export default withPolarisExample(ModalExample);
diff --git a/polaris.shopify.com/pages/examples/modal-with-primary-action.tsx b/polaris.shopify.com/pages/examples/modal-with-primary-action.tsx
deleted file mode 100644
index fe42a99f281..00000000000
--- a/polaris.shopify.com/pages/examples/modal-with-primary-action.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import {
- Button,
- Modal,
- LegacyStack,
- TextContainer,
- TextField,
-} from '@shopify/polaris';
-import {useState, useCallback, useRef} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ModalWithPrimaryActionExample() {
- const DISCOUNT_LINK = 'https://polaris.shopify.com/';
-
- const [active, setActive] = useState(true);
- const node = useRef(null);
-
- const handleClick = useCallback(() => {
- node.current && node.current.input.focus();
- }, []);
-
- const handleFocus = useCallback(() => {
- if (node.current == null) {
- return;
- }
- node.current.input.select();
- document.execCommand('copy');
- }, []);
-
- const toggleModal = useCallback(() => setActive((active) => !active), []);
-
- const activator = ;
-
- return (
- - Use Instagram posts to share your products with millions of - people. Let shoppers buy from your store without leaving - Instagram. -
-
-
-
-
-
-
-
-
-
- {}}
- autoComplete="off"
- connectedRight={
-
- }
- />
-
-
-
-
-
- );
-}
-
-export default withPolarisExample(ModalWithPrimaryActionExample);
diff --git a/polaris.shopify.com/pages/examples/modal-with-primary-and-secondary-actions.tsx b/polaris.shopify.com/pages/examples/modal-with-primary-and-secondary-actions.tsx
deleted file mode 100644
index efcfc796180..00000000000
--- a/polaris.shopify.com/pages/examples/modal-with-primary-and-secondary-actions.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import {Button, Modal, LegacyStack, ChoiceList} from '@shopify/polaris';
-import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ModalWithPrimaryAndSecondaryActionsExample() {
- const CURRENT_PAGE = 'current_page';
- const ALL_CUSTOMERS = 'all_customers';
- const SELECTED_CUSTOMERS = 'selected_customers';
- const CSV_EXCEL = 'csv_excel';
- const CSV_PLAIN = 'csv_plain';
-
- const [active, setActive] = useState(true);
- const [selectedExport, setSelectedExport] = useState([]);
- const [selectedExportAs, setSelectedExportAs] = useState([]);
-
- const handleModalChange = useCallback(() => setActive(!active), [active]);
-
- const handleClose = () => {
- handleModalChange();
- handleSelectedExport([]);
- handleSelectedExportAs([]);
- };
-
- const handleSelectedExport = useCallback(
- (value) => setSelectedExport(value),
- [],
- );
-
- const handleSelectedExportAs = useCallback(
- (value) => setSelectedExportAs(value),
- [],
- );
-
- const activator = ;
-
- return (
- - You can share this discount link with your customers via email - or social media. Your discount will be automatically applied - at checkout. -
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default withPolarisExample(ModalWithPrimaryAndSecondaryActionsExample);
diff --git a/polaris.shopify.com/pages/examples/modal-with-scroll-listener.tsx b/polaris.shopify.com/pages/examples/modal-with-scroll-listener.tsx
deleted file mode 100644
index 2f68314e3d8..00000000000
--- a/polaris.shopify.com/pages/examples/modal-with-scroll-listener.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import {Button, Modal, TextContainer} from '@shopify/polaris';
-import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ModalWithScrollListenerExample() {
- const [active, setActive] = useState(true);
-
- const handleChange = useCallback(() => setActive(!active), [active]);
-
- const handleScrollBottom = useCallback(() => alert('Scrolled to bottom'), []);
-
- const activator = ;
-
- return (
-
-
- {Array.from({length: 50}, (_, index) => (
-
-
-
-
- ))}
-
-
- );
-}
-
-export default withPolarisExample(ModalWithScrollListenerExample);
diff --git a/polaris.shopify.com/pages/examples/modal-without-a-title.tsx b/polaris.shopify.com/pages/examples/modal-without-a-title.tsx
deleted file mode 100644
index 11f0999fdef..00000000000
--- a/polaris.shopify.com/pages/examples/modal-without-a-title.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import {Button, Modal, TextContainer} from '@shopify/polaris';
-import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ModalWithoutTitleExample() {
- const [active, setActive] = useState(true);
-
- const handleChange = useCallback(() => setActive(!active), [active]);
-
- const activator = ;
-
- return (
- - Item #{index} -
-
-
-
-
-
-
-
-
- );
-}
-
-export default withPolarisExample(ModalWithoutTitleExample);
diff --git a/polaris.shopify.com/pages/examples/modal-without-an-activator-prop.tsx b/polaris.shopify.com/pages/examples/modal-without-an-activator-prop.tsx
deleted file mode 100644
index 08e4ed957b6..00000000000
--- a/polaris.shopify.com/pages/examples/modal-without-an-activator-prop.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import {Button, Modal, TextContainer} from '@shopify/polaris';
-import {useState, useCallback, useRef} from 'react';
-
-function ModalExample() {
- const [active, setActive] = useState(true);
-
- const button = useRef();
-
- const handleOpen = useCallback(() => setActive(true), []);
-
- const handleClose = useCallback(() => {
- setActive(false);
- requestAnimationFrame(() => button.current.querySelector('button').focus());
- }, []);
-
- return (
- - Use Instagram posts to share your products with millions of - people. Let shoppers buy from your store without leaving - Instagram. -
-
-
-
-
-
-
-
-
- );
-}
-
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-export default withPolarisExample(() => );
diff --git a/polaris.shopify.com/pages/examples/navigation-default.tsx b/polaris.shopify.com/pages/examples/navigation-default.tsx
deleted file mode 100644
index ffeca29e0af..00000000000
--- a/polaris.shopify.com/pages/examples/navigation-default.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import {Frame, Navigation} from '@shopify/polaris';
-import {HomeMinor, OrdersMinor, ProductsMinor} from '@shopify/polaris-icons';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function NavigationExample() {
- return (
-
-
-
-
- - Use Instagram posts to share your products with millions of - people. Let shoppers buy from your store without leaving - Instagram. -
-Hidden label
-
-
-
-
- );
-}
-
-export default withPolarisExample(OptionListInPopoverExample);
diff --git a/polaris.shopify.com/pages/examples/option-list-multiple.tsx b/polaris.shopify.com/pages/examples/option-list-multiple.tsx
deleted file mode 100644
index f1a3cac88ec..00000000000
--- a/polaris.shopify.com/pages/examples/option-list-multiple.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import {LegacyCard, OptionList} from '@shopify/polaris';
-import {useState} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function MultipleOptionListExample() {
- const [selected, setSelected] = useState([]);
-
- return (
- Credit card information
-Credit card information
-Credit card information
-Credit card information
-Credit card information
-Credit card information
-Page content
-Page content
-Credit card information
-Credit card information
-Credit card information
-Credit card information
-Buy postage and ship remaining 2 items
-
- {
- console.log('Previous');
- }}
- hasNext
- nextKeys={[75]}
- nextTooltip="k"
- onNext={() => {
- console.log('Next');
- }}
- />
-
- );
-}
-
-export default withPolarisExample(PaginationExample);
diff --git a/polaris.shopify.com/pages/examples/pagination-with-label.tsx b/polaris.shopify.com/pages/examples/pagination-with-label.tsx
deleted file mode 100644
index f6d892aee30..00000000000
--- a/polaris.shopify.com/pages/examples/pagination-with-label.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import {Pagination} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function PaginationExample() {
- return (
-
-
-
-
- );
-}
-
-export default withPolarisExample(PopoverWithActionListExample);
diff --git a/polaris.shopify.com/pages/examples/popover-with-content-and-actions.tsx b/polaris.shopify.com/pages/examples/popover-with-content-and-actions.tsx
deleted file mode 100644
index 47e040ed8a5..00000000000
--- a/polaris.shopify.com/pages/examples/popover-with-content-and-actions.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import {Button, Popover, ActionList} from '@shopify/polaris';
-import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function PopoverContentExample() {
- const [popoverActive, setPopoverActive] = useState(true);
-
- const togglePopoverActive = useCallback(
- () => setPopoverActive((popoverActive) => !popoverActive),
- [],
- );
-
- const activator = (
-
- );
-
- return (
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default withPolarisExample(PopoverContentExample);
diff --git a/polaris.shopify.com/pages/examples/popover-with-form-components.tsx b/polaris.shopify.com/pages/examples/popover-with-form-components.tsx
deleted file mode 100644
index 4ae38705a35..00000000000
--- a/polaris.shopify.com/pages/examples/popover-with-form-components.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import {Button, Popover, FormLayout, Select, TextField} from '@shopify/polaris';
-import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function PopoverFormExample() {
- const [popoverActive, setPopoverActive] = useState(true);
- const [tagValue, setTagValue] = useState('');
-
- const togglePopoverActive = useCallback(
- () => setPopoverActive((popoverActive) => !popoverActive),
- [],
- );
-
- const handleTagValueChange = useCallback((value) => setTagValue(value), []);
-
- const activator = (
-
- );
-
- return (
- Available sales channels
-
-
-
-
-
-
-
- );
-}
-
-export default withPolarisExample(PopoverFormExample);
diff --git a/polaris.shopify.com/pages/examples/popover-with-lazy-loaded-list.tsx b/polaris.shopify.com/pages/examples/popover-with-lazy-loaded-list.tsx
deleted file mode 100644
index 12982c76377..00000000000
--- a/polaris.shopify.com/pages/examples/popover-with-lazy-loaded-list.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import {Button, LegacyCard, Popover, ResourceList, Avatar} from '@shopify/polaris';
-import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function PopoverLazyLoadExample() {
- const [popoverActive, setPopoverActive] = useState(true);
- const [visibleStaffIndex, setVisibleStaffIndex] = useState(5);
- const staff = [
- 'Abbey Mayert',
- 'Abbi Senger',
- 'Abdul Goodwin',
- 'Abdullah Borer',
- 'Abe Nader',
- 'Abigayle Smith',
- 'Abner Torphy',
- 'Abraham Towne',
- 'Abraham Vik',
- 'Ada Fisher',
- 'Adah Pouros',
- 'Adam Waelchi',
- 'Adan Zemlak',
- 'Addie Wehner',
- 'Addison Wexler',
- 'Alex Hernandez',
- ];
-
- const togglePopoverActive = useCallback(
- () => setPopoverActive((popoverActive) => !popoverActive),
- [],
- );
-
- const handleScrolledToBottom = useCallback(() => {
- const totalIndexes = staff.length;
- const interval =
- visibleStaffIndex + 3 < totalIndexes
- ? 3
- : totalIndexes - visibleStaffIndex;
-
- if (interval > 0) {
- setVisibleStaffIndex(visibleStaffIndex + interval);
- }
- }, [staff.length, visibleStaffIndex]);
-
- const handleResourceListItemClick = useCallback(() => {}, []);
-
- const activator = (
-
- );
-
- const staffList = staff.slice(0, visibleStaffIndex).map((name) => ({
- name,
- initials: getInitials(name),
- }));
-
- return (
-
-
-
-
-
-
-
-
-
- {segments[selectedSegmentIndex].label}
-
-
-
- );
-
- const textFieldMarkup = (
-
-
-
-
- );
-
- const segmentOptions = query ? filteredSegments : segments;
-
- const segmentList =
- segmentOptions.length > 0
- ? segmentOptions
- .slice(0, visibleOptionIndex)
- .map(({label, id, value}) => {
- const selected = segments[selectedSegmentIndex].id === id;
-
- return (
-
-
-
-
-
-
- );
-}
-
-const StopPropagation = ({children}: React.PropsWithChildren
- {textFieldMarkup}
-
-
- {listboxMarkup}
-
-
-
- {children}
-
- );
-};
-
-export default withPolarisExample(PopoverWithSearchableListboxExample);
diff --git a/polaris.shopify.com/pages/examples/progress-bar-colored.tsx b/polaris.shopify.com/pages/examples/progress-bar-colored.tsx
deleted file mode 100644
index 32923548272..00000000000
--- a/polaris.shopify.com/pages/examples/progress-bar-colored.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import {ProgressBar} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ProgressBarExample() {
- return (
-
-
-
- );
-}
-
-export default withPolarisExample(ProgressBarExample);
diff --git a/polaris.shopify.com/pages/examples/progress-bar-default.tsx b/polaris.shopify.com/pages/examples/progress-bar-default.tsx
deleted file mode 100644
index 6d6a7e1c3fb..00000000000
--- a/polaris.shopify.com/pages/examples/progress-bar-default.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import {ProgressBar} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ProgressBarExample() {
- return (
- -
-
- );
-}
-
-export default withPolarisExample(ProgressBarExample);
diff --git a/polaris.shopify.com/pages/examples/progress-bar-non-animated.tsx b/polaris.shopify.com/pages/examples/progress-bar-non-animated.tsx
deleted file mode 100644
index 43b866f729f..00000000000
--- a/polaris.shopify.com/pages/examples/progress-bar-non-animated.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import {ProgressBar} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ProgressBarExample() {
- return (
-
-
- );
-}
-
-export default withPolarisExample(ProgressBarExample);
diff --git a/polaris.shopify.com/pages/examples/progress-bar-small.tsx b/polaris.shopify.com/pages/examples/progress-bar-small.tsx
deleted file mode 100644
index ce471063f7e..00000000000
--- a/polaris.shopify.com/pages/examples/progress-bar-small.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import {ProgressBar} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ProgressBarExample() {
- return (
-
-
- );
-}
-
-export default withPolarisExample(ProgressBarExample);
diff --git a/polaris.shopify.com/pages/examples/radio-button-default.tsx b/polaris.shopify.com/pages/examples/radio-button-default.tsx
deleted file mode 100644
index 4dfa40529e5..00000000000
--- a/polaris.shopify.com/pages/examples/radio-button-default.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import {LegacyStack, RadioButton} from '@shopify/polaris';
-import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function RadioButtonExample() {
- const [value, setValue] = useState('disabled');
-
- const handleChange = useCallback(
- (_checked, newValue) => setValue(newValue),
- [],
- );
-
- return (
-
-
-
-
- {rangeValue}
} - /> -by {author}
: null;
- return (
- {location}
-
- );
- }}
- />
- {location}
-
- );
- }}
- />
- {location}
- {lastOrder}
-
- );
- }}
- />
- {location}
-
-
-
- {location}
-
-
-
- {location}
- {location}
- {location}
- - You can use the Files section to upload images, videos, and other - documents -
-
-
-
- {location}
- {location}
- {location}
- {location}
- {location}
- {location}
- {location}
- {location}
- - By signing up for the Shopify service (“Service”) or any of the - services of Shopify Inc. (“Shopify”) you are agreeing to be bound by - the following terms and conditions (“Terms of Service”). The Services - offered by Shopify under the Terms of Service include various products - and services to help you create and manage a retail store, whether an - online store (“Online Services”), a physical retail store (“POS - Services”), or both. Any new features or tools which are added to the - current Service shall be also subject to the Terms of Service. You can - review the current version of the Terms of Service at any time at - https://www.shopify.com/legal/terms. Shopify reserves the right to - update and change the Terms of Service by posting updates and changes - to the Shopify website. You are advised to check the Terms of Service - from time to time for any updates or changes that may impact you. -
--
-
- Account Terms -
- You must be 18 years or older or at least the age of majority in the - jurisdiction where you reside or from which you use this Service. -
-- To access and use the Services, you must register for a Shopify - account (“Account”) by providing your full legal name, current - address, phone number, a valid email address, and any other - information indicated as required. Shopify may reject your application - for an Account, or cancel an existing Account, for any reason, in our - sole discretion. -
-- You acknowledge that Shopify will use the email address you provide as - the primary method for communication. -
-- You are responsible for keeping your password secure. Shopify cannot - and will not be liable for any loss or damage from your failure to - maintain the security of your Account and password. -
-- You are responsible for all activity and content such as photos, - images, videos, graphics, written content, audio files, code, - information, or data uploaded, collected, generated, stored, - displayed, distributed, transmitted or exhibited on or in connection - with your Account (“Materials”). -
-- A breach or violation of any term in the Terms of Service, including - the AUP, as determined in the sole discretion of Shopify will result - in an immediate termination of your services. -
-Which means
-- You are responsible for your Account and any Materials you upload to - the Shopify Service. Remember that with any violation of these terms - we will cancel your service. -
- -If we need to reach you, we will send you an email.
- --
-
- Account Activation -
2.1 Shopify Account
-- Subject to section 2.1.2, the person signing up for the Service will - be the contracting party (“Account Owner”) for the purposes of our - Terms of Service and will be the person who is authorized to use any - corresponding account we may provide to the Account Owner in - connection with the Service. -
-- If you are signing up for the Service on behalf of your employer, your - employer shall be the Account Owner. If you are signing up for the - Service on behalf of your employer, then you represent and warrant - that you have the authority to bind your employer to our Terms of - Service. -
-2.2 PayPal Express Checkout and Shopify Payments Accounts
- -- Upon completion of sign up for the Service, Shopify will create a - PayPal Express Checkout account on your behalf, using your email - address. Depending on your location, Shopify may also create a Shopify - Payments account on your behalf. -
-- You acknowledge that PayPal Express Checkout and/or Shopify Payments - will be your default payments gateway(s) and that it is your sole - responsibility as the Account Owner to activate and maintain these - accounts. If you do not wish to keep either of the payment accounts - active, it is your responsibility to deactivate them. For the - avoidance of doubt, PayPal Express Checkout is a Third Party Service, - as defined in Section 15 of these Terms of Service. -
-2.3 Apple Pay for Safari Account
- -- Upon completion of sign up for the Service, Shopify will create an - Apple Pay for Safari (“Apple Pay”) account on your behalf, using the - URL(s) and business name associated with your Account. Depending on - your location, Shopify may activate your Apple Pay account on your - behalf, otherwise you will be required to activate your Apple Pay - account within your Account admin. If you do not wish to keep your - Apple Pay account active, it is your responsibility to deactivate it. - For the avoidance of doubt, Apple Pay is a Third Party Service, as - defined in Section 15 of these Terms of Service. -
-- If you use an Apple Pay supported payment gateway and your customers - have enabled Apple Pay on their device, customers may purchase goods - and services from your store using Apple Pay. -
-- By using Apple Pay on your store, you are agreeing to be bound by the - Apple Pay Platform Web Merchant Terms and Conditions, as they may be - amended by Apple from time to time. If Apple amends the Apple Pay - Platform Web Merchant Terms and Conditions, the amended and restated - version will be posted here:{' '} - - https://www.shopify.com/legal/apple-pay - - . Such amendments to the Apple Pay Platform Web Merchant Terms are - effective as of the date of posting. Your continued use of Apple Pay - on your store after the amended Apple Pay Platform Web Merchant Terms - are posted constitutes your agreement to, and acceptance of, the - amended Apple Pay Platform Web Merchant Terms. If you do not agree to - any changes to the Apple Pay Platform Web Merchant Terms, de-activate - your Apple Pay account and do not continue to use Apple Pay on your - store. -
-2.4 Google Payment
- -- Upon completion of sign up for the Service, if you have been enrolled - in Shopify Payments, Shopify will also create a Google Payment account - on your behalf. If you do not wish to keep your Google Payment account - active, it is your responsibility to deactivate it. For the avoidance - of doubt, Google Payment is a Third Party Service, as defined in - Section 15 of these Terms of Service. -
- -- If you use a Google Payment supported payment gateway and your - customers have enabled Google Payment, customers may purchase goods - and services from your store using Google Payment. -
- -- By using Google Payment on your store, you are agreeing to be bound by - the Google Payment API Terms of Service, as they may be amended by - Google from time to time. If Google amends the Google Payment API - Terms of Service, the amended and restated version will be posted - here:{' '} - - https://payments.developers.google.com/terms/sellertos - - . Such amendments to the Google Payment API Terms of Service are - effective as of the date of posting. Your continued use of Google - Payment on your store after the amended Google Payment API Terms of - Service are posted constitutes your agreement to, and acceptance of, - the amended Google Payment API Terms of Service. If you do not agree - to any changes to the Google Payment API Terms of Service, de-activate - your Google Payment account and do not continue to use Google Payment - on your store. -
- -2.5 Domain Names
- -- Upon purchasing a domain name through Shopify, domain registration - will be preset to automatically renew each year so long as your - Shopify Account remains active. You acknowledge that it is your sole - responsibility to deactivate the auto-renewal function should you - choose to do so. -
-Which means
-- The person signing up for the Shopify Service is responsible for the - account and is bound by these Terms of Service. If you signup on - behalf of your employer, your employer owns the account and is also - bound by our Terms of Service. -
- -- We automatically create accounts for you to accept payments. You are - responsible for activating and deactivating these accounts. -
- -- Any domain you purchase through us will automatically renew unless you - opt out. -
- --
-
- General Conditions -
- You must read, agree with and accept all of the terms and conditions - contained in these Terms of Service, including the AUP and the Privacy - Policy before you may become a member of Shopify. -
- -- Technical support is only provided to paying Account holders and is - only available via email. -
-- The Terms of Service shall be governed by and interpreted in - accordance with the laws of the Province of Ontario and the laws of - Canada applicable therein, without regard to principles of conflicts - of laws. The parties irrevocably and unconditionally submit to the - exclusive jurisdiction of the courts of the Province of Ontario with - respect to any dispute or claim arising out of or in connection with - the Terms of Service. The United Nations Convention on Contracts for - the International Sale of Goods will not apply to these Terms of - Service and is hereby expressly excluded. -
-- You acknowledge and agree that Shopify may amend these Terms of - Service at any time by posting the relevant amended and restated Terms - of Service on Shopify’s website, available at{' '} - - https://www.shopify.com/legal/terms - {' '} - and such amendments to the Terms of Service are effective as of the - date of posting. Your continued use of the Services after the amended - Terms of Service are posted to Shopify’s website constitutes your - agreement to, and acceptance of, the amended Terms of Service. If you - do not agree to any changes to the Terms of Service, do not continue - to use the Service. -
-- You may not use the Shopify service for any illegal or unauthorized - purpose nor may you, in the use of the Service, violate any laws in - your jurisdiction (including but not limited to copyright laws), the - laws applicable to you in your customer’s jurisdiction, or the laws of - Canada and the Province of Ontario. You will comply with all - applicable laws, rules and regulations in your use of the Service. -
-- You agree not to reproduce, duplicate, copy, sell, resell or exploit - any portion of the Service, use of the Service, or access to the - Service without the express written permission by Shopify. -
-- You shall not purchase search engine or other pay per click keywords - (such as Google AdWords), or domain names that use Shopify or Shopify - trademarks and/or variations and misspellings thereof. -
-- Questions about the Terms of Service should be sent to{' '} - support@shopify.com. -
-- You understand that your Materials (not including credit card - information), may be transferred unencrypted and involve (a) - transmissions over various networks; and (b) changes to conform and - adapt to technical requirements of connecting networks or devices. - Credit Card information is always encrypted during transfer over - networks. -
-- You acknowledge and agree that your use of the Service, including - information transmitted to or stored by Shopify, is governed by its - privacy policy at{' '} - - https://www.shopify.com/legal/privacy - -
-- The Terms of Service may be available in languages other than English. - To the extent of any inconsistencies or conflicts between these - English Terms of Service and Shopify’s Terms of Service available in - another language, the most current English version of the Terms of - Service at{' '} - - https://www.shopify.com/legal/terms - {' '} - will prevail. -
-Which means
-- The Shopify service belongs to us. You are not allowed to rip it off - or use it for any illegal or sketchy purpose. -
- -- If a dispute arises the issue will be dealt with in the Province of - Ontario. -
- -- Your Materials may be transferred unencrypted and may be altered, but - credit card information is always encrypted. -
-- {`${weightError}${unitError} is required when weight based shipping rates are enabled. `} - Manage shipping -
--
- {selectedSalesChannels.map((channel, index) => (
-
-
- );
-
- const salesChannelAction = hasSelectedSalesChannels
- ? [
- {
- onAction: toggleSheetActive,
- content: 'Manage sales channels',
- },
- ]
- : null;
-
- return (
- No sales channels selected
- -
-
-
-
-
-
- Manage sales channels
-
-
-
-
-
-
-
-
-
-
-
- );
-
- const segmentOptions = query ? filteredSegments : segments;
-
- const segmentList =
- segmentOptions.length > 0
- ? segmentOptions
- .slice(0, visibleOptionIndex)
- .map(({label, id, value}) => {
- const selected = segments[selectedSegmentIndex].id === id;
-
- return (
-
-
- {segmentList}
- {showAllMarkup}
- {noResultsMarkup}
- {lazyLoadingMarkup}
-
-
- );
-
- return (
-
- {activator}
-
-
-
- );
-}
-
-const StopPropagation = ({children}: React.PropsWithChildren
-
-
-
-
- Look up customer segmentation membership
-
-
- Look up whether a customer is included in a segment.
-
-
-
-
-
- Action
-
-
-
-
- {textFieldMarkup}
-
-
- {listboxMarkup}
-
-
-
- {children}
-
- );
-};
-
-export default withPolarisExample(SheetWithSearchableListboxExample);
diff --git a/polaris.shopify.com/pages/examples/skeleton-body-text-default.tsx b/polaris.shopify.com/pages/examples/skeleton-body-text-default.tsx
deleted file mode 100644
index 5cb6db9d970..00000000000
--- a/polaris.shopify.com/pages/examples/skeleton-body-text-default.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import {SkeletonBodyText} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function SkeletonExample() {
- return - #1136 -
- was paid -
Tab {selected} selected
-Tab {selected} selected
-Tab {selected} selected
-Tab {selected} selected
-- Shopify POS is the easiest way to sell your products in person. - Available for iPad, iPhone, and Android. -
-- Manage your Shopify store on-the-go with real-time notifications, access - to your dashboard, and order management, all from your smartphone. -
-- Shopify POS is the fastest and easiest way to start accepting Visa, - Mastercard, American Express, and Discover right from your smartphone or - tablet. -
-- Shopify POS is the easiest way to sell your products in person. - Available for iPad, iPhone, and Android. -
-
-
- );
-}
-
-export default withPolarisExample(TextFieldWithSuggestionExample);
diff --git a/polaris.shopify.com/pages/examples/text-field-with-label-action.tsx b/polaris.shopify.com/pages/examples/text-field-with-label-action.tsx
deleted file mode 100644
index c7e63510a2d..00000000000
--- a/polaris.shopify.com/pages/examples/text-field-with-label-action.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import {TextField} from '@shopify/polaris';
-import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function LabelActionExample() {
- const [textFieldValue, setTextFieldValue] = useState('6201.11.0000');
-
- const handleTextFieldChange = useCallback(
- (value) => setTextFieldValue(value),
- [],
- );
-
- return (
-
-
-
-
-
-
- {toastMarkup}
-
-
-
- );
-}
-
-export default withPolarisExample(ToastExample);
diff --git a/polaris.shopify.com/pages/examples/toast-error.tsx b/polaris.shopify.com/pages/examples/toast-error.tsx
deleted file mode 100644
index 56ddc068b4b..00000000000
--- a/polaris.shopify.com/pages/examples/toast-error.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import {Toast, Frame, Page, Button} from '@shopify/polaris';
-import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ErrorToastExample() {
- const [active, setActive] = useState(false);
-
- const toggleActive = useCallback(() => setActive((active) => !active), []);
-
- const toastMarkup = active ? (
-
-
-
-
- {toastMarkup}
-
-
-
- );
-}
-
-export default withPolarisExample(ErrorToastExample);
diff --git a/polaris.shopify.com/pages/examples/toast-multiple-messages.tsx b/polaris.shopify.com/pages/examples/toast-multiple-messages.tsx
deleted file mode 100644
index d732fb331d3..00000000000
--- a/polaris.shopify.com/pages/examples/toast-multiple-messages.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import {Toast, Frame, Page, ButtonGroup, Button} from '@shopify/polaris';
-import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function MultipleToastExample() {
- const [activeOne, setActiveOne] = useState(false);
- const [activeTwo, setActiveTwo] = useState(false);
-
- const toggleActiveOne = useCallback(
- () => setActiveOne((activeOne) => !activeOne),
- [],
- );
-
- const toggleActiveTwo = useCallback(
- () => setActiveTwo((activeTwo) => !activeTwo),
- [],
- );
-
- const toastMarkup1 = activeOne ? (
-
-
-
-
-
-
-
- {toastMarkup1}
- {toastMarkup2}
-
-
-
- );
-}
-
-export default withPolarisExample(MultipleToastExample);
diff --git a/polaris.shopify.com/pages/examples/toast-with-action.tsx b/polaris.shopify.com/pages/examples/toast-with-action.tsx
deleted file mode 100644
index 73e7e9b3b06..00000000000
--- a/polaris.shopify.com/pages/examples/toast-with-action.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import {Toast, Frame, Page, Button} from '@shopify/polaris';
-import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ToastWithActionExample() {
- const [active, setActive] = useState(false);
-
- const toggleActive = useCallback(() => setActive((active) => !active), []);
-
- const toastMarkup = active ? (
-
-
-
-
- {toastMarkup}
-
-
-
- );
-}
-
-export default withPolarisExample(ToastWithActionExample);
diff --git a/polaris.shopify.com/pages/examples/toast-with-custom-duration.tsx b/polaris.shopify.com/pages/examples/toast-with-custom-duration.tsx
deleted file mode 100644
index 581a7c7f437..00000000000
--- a/polaris.shopify.com/pages/examples/toast-with-custom-duration.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import {Toast, Frame, Page, Button} from '@shopify/polaris';
-import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ToastWithCustomDurationExample() {
- const [active, setActive] = useState(false);
-
- const toggleActive = useCallback(() => setActive((active) => !active), []);
-
- const toastMarkup = active ? (
-
-
-
-
- {toastMarkup}
-
-
-
- );
-}
-
-export default withPolarisExample(ToastWithCustomDurationExample);
diff --git a/polaris.shopify.com/pages/examples/tooltip-default.tsx b/polaris.shopify.com/pages/examples/tooltip-default.tsx
deleted file mode 100644
index 21d500dc8eb..00000000000
--- a/polaris.shopify.com/pages/examples/tooltip-default.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import {Tooltip, Text} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function TooltipExample() {
- return (
-
-
-
- Order #1001
-
-
-
- );
-}
-
-export default withPolarisExample(TooltipExample);
diff --git a/polaris.shopify.com/pages/examples/tooltip-visible-only-with-child-interaction.tsx b/polaris.shopify.com/pages/examples/tooltip-visible-only-with-child-interaction.tsx
deleted file mode 100644
index 383fe6ec457..00000000000
--- a/polaris.shopify.com/pages/examples/tooltip-visible-only-with-child-interaction.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import {ButtonGroup, Tooltip, Button, TextField} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function TooltipExample() {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default withPolarisExample(TooltipExample);
diff --git a/polaris.shopify.com/pages/examples/tooltip-with-suffix.tsx b/polaris.shopify.com/pages/examples/tooltip-with-suffix.tsx
deleted file mode 100644
index af7cca586d8..00000000000
--- a/polaris.shopify.com/pages/examples/tooltip-with-suffix.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import {Tooltip, Button, Inline, Text} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function TooltipExample() {
- return (
-
-
- Bold
-
- ⌘B
-
-
- }
- >
-
-
-
- );
-}
-
-export default withPolarisExample(TooltipExample);
diff --git a/polaris.shopify.com/pages/examples/top-bar-default.tsx b/polaris.shopify.com/pages/examples/top-bar-default.tsx
deleted file mode 100644
index 47d400ca48e..00000000000
--- a/polaris.shopify.com/pages/examples/top-bar-default.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import {TopBar, ActionList, Icon, Frame, Text} from '@shopify/polaris';
-import {ArrowLeftMinor, QuestionMarkMajor} from '@shopify/polaris-icons';
-import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function TopBarExample() {
- const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
- const [isSecondaryMenuOpen, setIsSecondaryMenuOpen] = useState(false);
- const [isSearchActive, setIsSearchActive] = useState(false);
- const [searchValue, setSearchValue] = useState('');
-
- const toggleIsUserMenuOpen = useCallback(
- () => setIsUserMenuOpen((isUserMenuOpen) => !isUserMenuOpen),
- [],
- );
-
- const toggleIsSecondaryMenuOpen = useCallback(
- () => setIsSecondaryMenuOpen((isSecondaryMenuOpen) => !isSecondaryMenuOpen),
- [],
- );
-
- const handleSearchResultsDismiss = useCallback(() => {
- setIsSearchActive(false);
- setSearchValue('');
- }, []);
-
- const handleSearchChange = useCallback((value) => {
- setSearchValue(value);
- setIsSearchActive(value.length > 0);
- }, []);
-
- const handleNavigationToggle = useCallback(() => {
- console.log('toggle navigation visibility');
- }, []);
-
- const logo = {
- width: 124,
- topBarSource:
- 'https://cdn.shopify.com/s/files/1/0446/6937/files/jaded-pixel-logo-color.svg?6215648040070010999',
- url: '#',
- accessibilityLabel: 'Jaded Pixel',
- };
-
- const userMenuMarkup = (
-
-
-
- );
-}
-
-export default withPolarisExample(TopBarExample);
diff --git a/polaris.shopify.com/pages/examples/video-thumbnail-default.tsx b/polaris.shopify.com/pages/examples/video-thumbnail-default.tsx
deleted file mode 100644
index 3c871f6dd6a..00000000000
--- a/polaris.shopify.com/pages/examples/video-thumbnail-default.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import {MediaCard, VideoThumbnail} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function VideoThumbnailExample() {
- return (
-