Skip to content

Commit 4e997e1

Browse files
davebcn87davebcn87
authored
Merge pull request #3389 from Shopify/examples-forms-2
Added examples to admin Forms components (Part II)
2 parents 62c75c8 + de65d38 commit 4e997e1

File tree

88 files changed

+1428
-2
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

88 files changed

+1428
-2
lines changed

‎packages/ui-extensions/docs/surfaces/admin/build-docs.mjs‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,13 @@ const jsxWrapper = (
104104
// Auto-wrap JSX if it doesn't already contain a return statement
105105
// This allows both simple JSX expressions and complete function bodies with hooks
106106
let jsxStringProcessed = jsxString;
107-
if (!/\breturn\b/.test(jsxString)) {
107+
// Check if 'return' appears as a statement
108+
// If "return" has words before AND after it (like "for return request"), it's in text
109+
// Otherwise, check if there's a return statement
110+
const hasReturnInText = /\w+\s+return\s+\w+/.test(jsxString);
111+
const hasReturnStatement = !hasReturnInText && /\breturn\b/.test(jsxString);
112+
113+
if (!hasReturnStatement) {
108114
jsxStringProcessed = `return (${jsxString})`;
109115
}
110116

‎packages/ui-extensions/src/surfaces/admin/components/NumberField/NumberField.doc.ts‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,70 @@ const data: AdminReferenceEntityTemplateSchema = {
3535
],
3636
},
3737
},
38+
examples: {
39+
description: 'Component examples',
40+
exampleGroups: [
41+
{
42+
title: 'Basic usage',
43+
examples: [
44+
{
45+
description:
46+
'Demonstrates a simple number field for entering order quantity with a predefined range and step value.',
47+
codeblock: {
48+
title: 'Basic usage',
49+
tabs: [
50+
{
51+
code: './examples/basic-usage.html',
52+
language: 'html',
53+
},
54+
55+
{
56+
code: './examples/basic-usage.jsx',
57+
language: 'preview-jsx',
58+
},
59+
],
60+
},
61+
},
62+
{
63+
description:
64+
'Illustrates a number field for entering product prices with currency prefix and suffix, using decimal input mode.',
65+
codeblock: {
66+
title: 'With prefix and suffix',
67+
tabs: [
68+
{
69+
code: './examples/with-prefix-and-suffix.html',
70+
language: 'html',
71+
},
72+
73+
{
74+
code: './examples/with-prefix-and-suffix.jsx',
75+
language: 'preview-jsx',
76+
},
77+
],
78+
},
79+
},
80+
{
81+
description:
82+
'Showcases multiple number fields for different use cases: inventory tracking, percentage discount, and shipping weight, demonstrating various input modes and configurations.',
83+
codeblock: {
84+
title: 'Multiple examples',
85+
tabs: [
86+
{
87+
code: './examples/multiple-examples.html',
88+
language: 'html',
89+
},
90+
91+
{
92+
code: './examples/multiple-examples.jsx',
93+
language: 'preview-jsx',
94+
},
95+
],
96+
},
97+
},
98+
],
99+
},
100+
],
101+
},
38102
};
39103

40104
export default data;

‎packages/ui-extensions/src/surfaces/admin/components/NumberField/examples/basic-usage.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<s-number-field
2+
label="Order quantity"
3+
value="5"
4+
min="1"
5+
max="999"
6+
step="1"
7+
></s-number-field>

‎packages/ui-extensions/src/surfaces/admin/components/NumberField/examples/basic-usage.jsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<s-number-field
2+
label="Order quantity"
3+
value={5}
4+
min={1}
5+
max={999}
6+
step={1}
7+
/>

‎packages/ui-extensions/src/surfaces/admin/components/NumberField/examples/multiple-examples.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<s-stack gap="base">
2+
<s-number-field
3+
label="Inventory count"
4+
value="150"
5+
min="0"
6+
step="1"
7+
inputMode="numeric"
8+
details="Current stock available for sale"
9+
></s-number-field>
10+
11+
<s-number-field
12+
label="Discount percentage"
13+
value="15"
14+
suffix="%"
15+
min="0"
16+
max="100"
17+
step="0.1"
18+
inputMode="decimal"
19+
></s-number-field>
20+
21+
<s-number-field
22+
label="Shipping weight"
23+
value="2.5"
24+
suffix="kg"
25+
min="0.1"
26+
step="0.1"
27+
inputMode="decimal"
28+
></s-number-field>
29+
</s-stack>

‎packages/ui-extensions/src/surfaces/admin/components/NumberField/examples/multiple-examples.jsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<s-stack gap="base">
2+
<s-number-field
3+
label="Inventory count"
4+
value={150}
5+
min={0}
6+
step={1}
7+
inputMode="numeric"
8+
details="Current stock available for sale"
9+
/>
10+
11+
<s-number-field
12+
label="Discount percentage"
13+
value={15}
14+
suffix="%"
15+
min={0}
16+
max={100}
17+
step="0.1"
18+
inputMode="decimal"
19+
/>
20+
21+
<s-number-field
22+
label="Shipping weight"
23+
value={2.5}
24+
suffix="kg"
25+
min={0.1}
26+
step={0.1}
27+
inputMode="decimal"
28+
/>
29+
</s-stack>

‎packages/ui-extensions/src/surfaces/admin/components/NumberField/examples/with-prefix-and-suffix.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<s-number-field
2+
label="Product price"
3+
value="29.99"
4+
prefix="$"
5+
suffix="CAD"
6+
inputMode="decimal"
7+
step="0.01"
8+
min="0"
9+
></s-number-field>

‎packages/ui-extensions/src/surfaces/admin/components/NumberField/examples/with-prefix-and-suffix.jsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<s-number-field
2+
label="Product price"
3+
value={29.99}
4+
prefix="$"
5+
suffix="CAD"
6+
inputMode="decimal"
7+
step={0.01}
8+
min={0}
9+
/>

‎packages/ui-extensions/src/surfaces/admin/components/PasswordField/PasswordField.doc.ts‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,106 @@ const data: AdminReferenceEntityTemplateSchema = {
3636
],
3737
},
3838
},
39+
examples: {
40+
description: 'Component examples',
41+
exampleGroups: [
42+
{
43+
title: 'Basic usage',
44+
examples: [
45+
{
46+
description:
47+
'Demonstrates a basic password field with a label, name, and required validation. Sets a minimum length of 8 characters and configures autocomplete for a new password.',
48+
codeblock: {
49+
title: 'Basic usage',
50+
tabs: [
51+
{
52+
code: './examples/basic-usage.html',
53+
language: 'html',
54+
},
55+
56+
{
57+
code: './examples/basic-usage.jsx',
58+
language: 'preview-jsx',
59+
},
60+
],
61+
},
62+
},
63+
{
64+
description:
65+
'Shows a password field in an error state, displaying a custom error message when the password does not meet the minimum length requirement.',
66+
codeblock: {
67+
title: 'With error state',
68+
tabs: [
69+
{
70+
code: './examples/with-error-state.html',
71+
language: 'html',
72+
},
73+
74+
{
75+
code: './examples/with-error-state.jsx',
76+
language: 'preview-jsx',
77+
},
78+
],
79+
},
80+
},
81+
{
82+
description:
83+
'Illustrates a password field with additional details providing guidance about password creation requirements.',
84+
codeblock: {
85+
title: 'With helper text',
86+
tabs: [
87+
{
88+
code: './examples/with-helper-text.html',
89+
language: 'html',
90+
},
91+
92+
{
93+
code: './examples/with-helper-text.jsx',
94+
language: 'preview-jsx',
95+
},
96+
],
97+
},
98+
},
99+
{
100+
description:
101+
'Shows how the password field can be integrated into a form alongside other input fields, such as an email field, to create a complete login or registration form.',
102+
codeblock: {
103+
title: 'In form layout',
104+
tabs: [
105+
{
106+
code: './examples/in-form-layout.html',
107+
language: 'html',
108+
},
109+
110+
{
111+
code: './examples/in-form-layout.jsx',
112+
language: 'preview-jsx',
113+
},
114+
],
115+
},
116+
},
117+
{
118+
description:
119+
'Demonstrates a password field with dynamic password strength validation, showing real-time feedback on password complexity requirements.',
120+
codeblock: {
121+
title: 'With password strength requirements',
122+
tabs: [
123+
{
124+
code: './examples/with-password-strength-requirements.html',
125+
language: 'html',
126+
},
127+
128+
{
129+
code: './examples/with-password-strength-requirements.jsx',
130+
language: 'preview-jsx',
131+
},
132+
],
133+
},
134+
},
135+
],
136+
},
137+
],
138+
},
39139
};
40140

41141
export default data;

‎packages/ui-extensions/src/surfaces/admin/components/PasswordField/examples/basic-usage.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<s-password-field
2+
label="Password"
3+
name="password"
4+
required
5+
minLength="8"
6+
autocomplete="new-password"
7+
></s-password-field>

0 commit comments

Comments
 (0)