@abraracs/better-shopify-wc-mcp 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +110 -0
- package/dist/index.d.ts +10 -0
- package/dist/index.js +325 -0
- package/docs/avatar.md +481 -0
- package/docs/badge.md +266 -0
- package/docs/banner.md +350 -0
- package/docs/box.md +618 -0
- package/docs/button.md +604 -0
- package/docs/buttongroup.md +251 -0
- package/docs/checkbox.md +346 -0
- package/docs/chip.md +261 -0
- package/docs/choicelist.md +416 -0
- package/docs/clickable.md +703 -0
- package/docs/clickablechip.md +377 -0
- package/docs/colorfield.md +416 -0
- package/docs/colorpicker.md +152 -0
- package/docs/datefield.md +706 -0
- package/docs/datepicker.md +443 -0
- package/docs/divider.md +263 -0
- package/docs/dropzone.md +331 -0
- package/docs/emailfield.md +377 -0
- package/docs/grid.md +1246 -0
- package/docs/heading.md +201 -0
- package/docs/icon.md +295 -0
- package/docs/image.md +517 -0
- package/docs/link.md +456 -0
- package/docs/menu.md +331 -0
- package/docs/modal.md +640 -0
- package/docs/moneyfield.md +385 -0
- package/docs/numberfield.md +393 -0
- package/docs/orderedlist.md +224 -0
- package/docs/page.md +319 -0
- package/docs/paragraph.md +333 -0
- package/docs/passwordfield.md +381 -0
- package/docs/popover.md +419 -0
- package/docs/querycontainer.md +121 -0
- package/docs/searchfield.md +319 -0
- package/docs/section.md +267 -0
- package/docs/select.md +449 -0
- package/docs/spinner.md +121 -0
- package/docs/stack.md +748 -0
- package/docs/switch.md +365 -0
- package/docs/table.md +805 -0
- package/docs/text.md +339 -0
- package/docs/textarea.md +328 -0
- package/docs/textfield.md +425 -0
- package/docs/thumbnail.md +245 -0
- package/docs/tooltip.md +130 -0
- package/docs/unorderedlist.md +135 -0
- package/docs/urlfield.md +314 -0
- package/package.json +43 -0
package/docs/text.md
ADDED
|
@@ -0,0 +1,339 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Text
|
|
3
|
+
description: >-
|
|
4
|
+
Displays inline text with specific visual styles or tones. Use to emphasize or
|
|
5
|
+
differentiate words or phrases within a Paragraph or other block-level
|
|
6
|
+
components.
|
|
7
|
+
api_name: app-home
|
|
8
|
+
source_url:
|
|
9
|
+
html: >-
|
|
10
|
+
https://shopify.dev/docs/api/app-home/polaris-web-components/titles-and-text/text
|
|
11
|
+
md: >-
|
|
12
|
+
https://shopify.dev/docs/api/app-home/polaris-web-components/titles-and-text/text.md
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
# Text
|
|
16
|
+
|
|
17
|
+
Displays inline text with specific visual styles or tones. Use to emphasize or differentiate words or phrases within a Paragraph or other block-level components.
|
|
18
|
+
|
|
19
|
+
## Properties
|
|
20
|
+
|
|
21
|
+
* accessibilityVisibility
|
|
22
|
+
|
|
23
|
+
"visible" | "hidden" | "exclusive"
|
|
24
|
+
|
|
25
|
+
Default: 'visible'
|
|
26
|
+
|
|
27
|
+
Changes the visibility of the element.
|
|
28
|
+
|
|
29
|
+
* `visible`: the element is visible to all users.
|
|
30
|
+
* `hidden`: the element is removed from the accessibility tree but remains visible.
|
|
31
|
+
* `exclusive`: the element is visually hidden but remains in the accessibility tree.
|
|
32
|
+
|
|
33
|
+
* color
|
|
34
|
+
|
|
35
|
+
"base" | "subdued"
|
|
36
|
+
|
|
37
|
+
Default: 'base'
|
|
38
|
+
|
|
39
|
+
Modify the color to be more or less intense.
|
|
40
|
+
|
|
41
|
+
* dir
|
|
42
|
+
|
|
43
|
+
"" | "auto" | "ltr" | "rtl"
|
|
44
|
+
|
|
45
|
+
Default: ''
|
|
46
|
+
|
|
47
|
+
Indicates the directionality of the element’s text.
|
|
48
|
+
|
|
49
|
+
* `ltr`: languages written from left to right (e.g. English)
|
|
50
|
+
* `rtl`: languages written from right to left (e.g. Arabic)
|
|
51
|
+
* `auto`: the user agent determines the direction based on the content
|
|
52
|
+
* `''`: direction is inherited from parent elements (equivalent to not setting the attribute)
|
|
53
|
+
|
|
54
|
+
* fontVariantNumeric
|
|
55
|
+
|
|
56
|
+
"auto" | "normal" | "tabular-nums"
|
|
57
|
+
|
|
58
|
+
Default: 'auto' - inherit from the parent element
|
|
59
|
+
|
|
60
|
+
Set the numeric properties of the font.
|
|
61
|
+
|
|
62
|
+
* interestFor
|
|
63
|
+
|
|
64
|
+
string
|
|
65
|
+
|
|
66
|
+
ID of a component that should respond to interest (e.g. hover and focus) on this component.
|
|
67
|
+
|
|
68
|
+
* tone
|
|
69
|
+
|
|
70
|
+
"info" | "success" | "warning" | "critical" | "auto" | "neutral" | "caution"
|
|
71
|
+
|
|
72
|
+
Default: 'auto'
|
|
73
|
+
|
|
74
|
+
Sets the tone of the component, based on the intention of the information being conveyed.
|
|
75
|
+
|
|
76
|
+
* type
|
|
77
|
+
|
|
78
|
+
"strong" | "generic" | "address" | "redundant"
|
|
79
|
+
|
|
80
|
+
Default: 'generic'
|
|
81
|
+
|
|
82
|
+
Provide semantic meaning and default styling to the text.
|
|
83
|
+
|
|
84
|
+
Other presentation properties on Text override the default styling.
|
|
85
|
+
|
|
86
|
+
## Slots
|
|
87
|
+
|
|
88
|
+
* children
|
|
89
|
+
|
|
90
|
+
HTMLElement
|
|
91
|
+
|
|
92
|
+
The content of the Text.
|
|
93
|
+
|
|
94
|
+
Examples
|
|
95
|
+
|
|
96
|
+
### Examples
|
|
97
|
+
|
|
98
|
+
* #### Code
|
|
99
|
+
|
|
100
|
+
##### jsx
|
|
101
|
+
|
|
102
|
+
```jsx
|
|
103
|
+
<s-paragraph>
|
|
104
|
+
<s-text type="strong">Name: </s-text>
|
|
105
|
+
<s-text>Jane Doe</s-text>
|
|
106
|
+
</s-paragraph>
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
##### html
|
|
110
|
+
|
|
111
|
+
```html
|
|
112
|
+
<s-paragraph>
|
|
113
|
+
<s-text type="strong">Name: </s-text>
|
|
114
|
+
<s-text>Jane Doe</s-text>
|
|
115
|
+
</s-paragraph>
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
* #### Basic Usage
|
|
119
|
+
|
|
120
|
+
##### Description
|
|
121
|
+
|
|
122
|
+
Standard text content for general interface messaging and descriptions.
|
|
123
|
+
|
|
124
|
+
##### jsx
|
|
125
|
+
|
|
126
|
+
```jsx
|
|
127
|
+
<s-text>
|
|
128
|
+
Manage your products and inventory from one dashboard.
|
|
129
|
+
</s-text>
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
##### html
|
|
133
|
+
|
|
134
|
+
```html
|
|
135
|
+
<s-text>
|
|
136
|
+
Manage your products and inventory from one dashboard.
|
|
137
|
+
</s-text>
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
* #### Strong Text
|
|
141
|
+
|
|
142
|
+
##### Description
|
|
143
|
+
|
|
144
|
+
Emphasized text for important messages and call-to-actions.
|
|
145
|
+
|
|
146
|
+
##### jsx
|
|
147
|
+
|
|
148
|
+
```jsx
|
|
149
|
+
<s-text type="strong">
|
|
150
|
+
Free shipping on orders over $50
|
|
151
|
+
</s-text>
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
##### html
|
|
155
|
+
|
|
156
|
+
```html
|
|
157
|
+
<s-text type="strong">
|
|
158
|
+
Free shipping on orders over $50
|
|
159
|
+
</s-text>
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
* #### Semantic Address
|
|
163
|
+
|
|
164
|
+
##### Description
|
|
165
|
+
|
|
166
|
+
Structured address text with proper semantic meaning for screen readers.
|
|
167
|
+
|
|
168
|
+
##### jsx
|
|
169
|
+
|
|
170
|
+
```jsx
|
|
171
|
+
<s-text type="address">
|
|
172
|
+
123 Commerce Street, Toronto, ON M5V 2H1
|
|
173
|
+
</s-text>
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
##### html
|
|
177
|
+
|
|
178
|
+
```html
|
|
179
|
+
<s-text type="address">
|
|
180
|
+
123 Commerce Street, Toronto, ON M5V 2H1
|
|
181
|
+
</s-text>
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
* #### Tabular Numbers
|
|
185
|
+
|
|
186
|
+
##### Description
|
|
187
|
+
|
|
188
|
+
Monospace number formatting for consistent alignment in tables and financial data.
|
|
189
|
+
|
|
190
|
+
##### jsx
|
|
191
|
+
|
|
192
|
+
```jsx
|
|
193
|
+
<s-text fontVariantNumeric="tabular-nums">
|
|
194
|
+
$1,234.56
|
|
195
|
+
</s-text>
|
|
196
|
+
```
|
|
197
|
+
|
|
198
|
+
##### html
|
|
199
|
+
|
|
200
|
+
```html
|
|
201
|
+
<s-text fontVariantNumeric="tabular-nums">
|
|
202
|
+
$1,234.56
|
|
203
|
+
</s-text>
|
|
204
|
+
```
|
|
205
|
+
|
|
206
|
+
* #### Status Tones
|
|
207
|
+
|
|
208
|
+
##### Description
|
|
209
|
+
|
|
210
|
+
Color-coded text indicating different status states and semantic meanings.
|
|
211
|
+
|
|
212
|
+
##### jsx
|
|
213
|
+
|
|
214
|
+
```jsx
|
|
215
|
+
<s-stack gap="small">
|
|
216
|
+
<s-text tone="success">Order fulfilled</s-text>
|
|
217
|
+
<s-text tone="critical">Payment failed</s-text>
|
|
218
|
+
<s-text tone="warning">Low inventory</s-text>
|
|
219
|
+
</s-stack>
|
|
220
|
+
```
|
|
221
|
+
|
|
222
|
+
##### html
|
|
223
|
+
|
|
224
|
+
```html
|
|
225
|
+
<s-stack gap="small">
|
|
226
|
+
<s-text tone="success">Order fulfilled</s-text>
|
|
227
|
+
<s-text tone="critical">Payment failed</s-text>
|
|
228
|
+
<s-text tone="warning">Low inventory</s-text>
|
|
229
|
+
</s-stack>
|
|
230
|
+
```
|
|
231
|
+
|
|
232
|
+
* #### Accessibility Hidden Text
|
|
233
|
+
|
|
234
|
+
##### Description
|
|
235
|
+
|
|
236
|
+
Text visible only to screen readers for providing additional context.
|
|
237
|
+
|
|
238
|
+
##### jsx
|
|
239
|
+
|
|
240
|
+
```jsx
|
|
241
|
+
<s-text accessibilityVisibility="exclusive">
|
|
242
|
+
Product prices include tax
|
|
243
|
+
</s-text>
|
|
244
|
+
```
|
|
245
|
+
|
|
246
|
+
##### html
|
|
247
|
+
|
|
248
|
+
```html
|
|
249
|
+
<s-text accessibilityVisibility="exclusive">
|
|
250
|
+
Product prices include tax
|
|
251
|
+
</s-text>
|
|
252
|
+
```
|
|
253
|
+
|
|
254
|
+
* #### Right-to-Left Text
|
|
255
|
+
|
|
256
|
+
##### Description
|
|
257
|
+
|
|
258
|
+
Text direction support for RTL languages like Arabic and Hebrew.
|
|
259
|
+
|
|
260
|
+
##### jsx
|
|
261
|
+
|
|
262
|
+
```jsx
|
|
263
|
+
<s-text dir="rtl">
|
|
264
|
+
محتوى النص باللغة العربية
|
|
265
|
+
</s-text>
|
|
266
|
+
```
|
|
267
|
+
|
|
268
|
+
##### html
|
|
269
|
+
|
|
270
|
+
```html
|
|
271
|
+
<s-text dir="rtl">
|
|
272
|
+
محتوى النص باللغة العربية
|
|
273
|
+
</s-text>
|
|
274
|
+
```
|
|
275
|
+
|
|
276
|
+
* #### Subdued Color
|
|
277
|
+
|
|
278
|
+
##### Description
|
|
279
|
+
|
|
280
|
+
Lower contrast text for secondary information and timestamps.
|
|
281
|
+
|
|
282
|
+
##### jsx
|
|
283
|
+
|
|
284
|
+
```jsx
|
|
285
|
+
<s-text color="subdued">
|
|
286
|
+
Last updated 2 hours ago
|
|
287
|
+
</s-text>
|
|
288
|
+
```
|
|
289
|
+
|
|
290
|
+
##### html
|
|
291
|
+
|
|
292
|
+
```html
|
|
293
|
+
<s-text color="subdued">
|
|
294
|
+
Last updated 2 hours ago
|
|
295
|
+
</s-text>
|
|
296
|
+
```
|
|
297
|
+
|
|
298
|
+
* #### Interest For Association
|
|
299
|
+
|
|
300
|
+
##### Description
|
|
301
|
+
|
|
302
|
+
Text element associated with tooltips using the \`interestFor\` attribute to show additional information on hover or focus.
|
|
303
|
+
|
|
304
|
+
##### jsx
|
|
305
|
+
|
|
306
|
+
```jsx
|
|
307
|
+
<>
|
|
308
|
+
<s-tooltip id="sku-tooltip">
|
|
309
|
+
SKU must be unique across all products and cannot be changed after creation
|
|
310
|
+
</s-tooltip>
|
|
311
|
+
<s-text color="subdued" interestFor="sku-tooltip">
|
|
312
|
+
What is a product SKU?
|
|
313
|
+
</s-text>
|
|
314
|
+
</>
|
|
315
|
+
```
|
|
316
|
+
|
|
317
|
+
##### html
|
|
318
|
+
|
|
319
|
+
```html
|
|
320
|
+
<s-tooltip id="sku-tooltip">
|
|
321
|
+
SKU must be unique across all products and cannot be changed after creation
|
|
322
|
+
</s-tooltip>
|
|
323
|
+
<s-text color="subdued" interestFor="sku-tooltip">
|
|
324
|
+
What is a product SKU?
|
|
325
|
+
</s-text>
|
|
326
|
+
```
|
|
327
|
+
|
|
328
|
+
## Useful for
|
|
329
|
+
|
|
330
|
+
* Adding inline text elements such as labels or line errors.
|
|
331
|
+
* Applying different visual tones and text styles to specific words or phrases within a `s-paragraph`, such as a `strong` type or `critical` tone.
|
|
332
|
+
|
|
333
|
+
## Best practices
|
|
334
|
+
|
|
335
|
+
* Text elements display inline and will flow on the same line when placed next to each other. To stack multiple text elements vertically, wrap them in a Stack container or use multiple `s-paragraph` components.
|
|
336
|
+
* Use plain and clear terms.
|
|
337
|
+
* Don't use jargon or technical language.
|
|
338
|
+
* Don't use different terms to describe the same thing.
|
|
339
|
+
* Don't duplicate content.
|
package/docs/textarea.md
ADDED
|
@@ -0,0 +1,328 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: TextArea
|
|
3
|
+
description: >-
|
|
4
|
+
Collect longer text content from users with a multi-line input that expands
|
|
5
|
+
automatically.
|
|
6
|
+
api_name: app-home
|
|
7
|
+
source_url:
|
|
8
|
+
html: 'https://shopify.dev/docs/api/app-home/polaris-web-components/forms/textarea'
|
|
9
|
+
md: >-
|
|
10
|
+
https://shopify.dev/docs/api/app-home/polaris-web-components/forms/textarea.md
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# TextArea
|
|
14
|
+
|
|
15
|
+
Collect longer text content from users with a multi-line input that expands automatically.
|
|
16
|
+
|
|
17
|
+
## Properties
|
|
18
|
+
|
|
19
|
+
* autocomplete
|
|
20
|
+
|
|
21
|
+
"on" | "off" | TextAutocompleteField | \`section-${string} one-time-code\` | "shipping one-time-code" | "billing one-time-code" | \`section-${string} shipping one-time-code\` | \`section-${string} billing one-time-code\` | \`section-${string} language\` | \`section-${string} organization\` | \`section-${string} additional-name\` | \`section-${string} address-level1\` | \`section-${string} address-level2\` | \`section-${string} address-level3\` | \`section-${string} address-level4\` | \`section-${string} address-line1\` | \`section-${string} address-line2\` | \`section-${string} address-line3\` | \`section-${string} country-name\` | \`section-${string} country\` | \`section-${string} family-name\` | \`section-${string} given-name\` | \`section-${string} honorific-prefix\` | \`section-${string} honorific-suffix\` | \`section-${string} name\` | \`section-${string} nickname\` | \`section-${string} organization-title\` | \`section-${string} postal-code\` | \`section-${string} sex\` | \`section-${string} street-address\` | \`section-${string} transaction-currency\` | \`section-${string} username\` | \`section-${string} cc-additional-name\` | \`section-${string} cc-family-name\` | \`section-${string} cc-given-name\` | \`section-${string} cc-name\` | \`section-${string} cc-type\` | "shipping language" | "shipping organization" | "shipping additional-name" | "shipping address-level1" | "shipping address-level2" | "shipping address-level3" | "shipping address-level4" | "shipping address-line1" | "shipping address-line2" | "shipping address-line3" | "shipping country-name" | "shipping country" | "shipping family-name" | "shipping given-name" | "shipping honorific-prefix" | "shipping honorific-suffix" | "shipping name" | "shipping nickname" | "shipping organization-title" | "shipping postal-code" | "shipping sex" | "shipping street-address" | "shipping transaction-currency" | "shipping username" | "shipping cc-additional-name" | "shipping cc-family-name" | "shipping cc-given-name" | "shipping cc-name" | "shipping cc-type" | "billing language" | "billing organization" | "billing additional-name" | "billing address-level1" | "billing address-level2" | "billing address-level3" | "billing address-level4" | "billing address-line1" | "billing address-line2" | "billing address-line3" | "billing country-name" | "billing country" | "billing family-name" | "billing given-name" | "billing honorific-prefix" | "billing honorific-suffix" | "billing name" | "billing nickname" | "billing organization-title" | "billing postal-code" | "billing sex" | "billing street-address" | "billing transaction-currency" | "billing username" | "billing cc-additional-name" | "billing cc-family-name" | "billing cc-given-name" | "billing cc-name" | "billing cc-type" | \`section-${string} shipping language\` | \`section-${string} shipping organization\` | \`section-${string} shipping additional-name\` | \`section-${string} shipping address-level1\` | \`section-${string} shipping address-level2\` | \`section-${string} shipping address-level3\` | \`section-${string} shipping address-level4\` | \`section-${string} shipping address-line1\` | \`section-${string} shipping address-line2\` | \`section-${string} shipping address-line3\` | \`section-${string} shipping country-name\` | \`section-${string} shipping country\` | \`section-${string} shipping family-name\` | \`section-${string} shipping given-name\` | \`section-${string} shipping honorific-prefix\` | \`section-${string} shipping honorific-suffix\` | \`section-${string} shipping name\` | \`section-${string} shipping nickname\` | \`section-${string} shipping organization-title\` | \`section-${string} shipping postal-code\` | \`section-${string} shipping sex\` | \`section-${string} shipping street-address\` | \`section-${string} shipping transaction-currency\` | \`section-${string} shipping username\` | \`section-${string} shipping cc-additional-name\` | \`section-${string} shipping cc-family-name\` | \`section-${string} shipping cc-given-name\` | \`section-${string} shipping cc-name\` | \`section-${string} shipping cc-type\` | \`section-${string} billing language\` | \`section-${string} billing organization\` | \`section-${string} billing additional-name\` | \`section-${string} billing address-level1\` | \`section-${string} billing address-level2\` | \`section-${string} billing address-level3\` | \`section-${string} billing address-level4\` | \`section-${string} billing address-line1\` | \`section-${string} billing address-line2\` | \`section-${string} billing address-line3\` | \`section-${string} billing country-name\` | \`section-${string} billing country\` | \`section-${string} billing family-name\` | \`section-${string} billing given-name\` | \`section-${string} billing honorific-prefix\` | \`section-${string} billing honorific-suffix\` | \`section-${string} billing name\` | \`section-${string} billing nickname\` | \`section-${string} billing organization-title\` | \`section-${string} billing postal-code\` | \`section-${string} billing sex\` | \`section-${string} billing street-address\` | \`section-${string} billing transaction-currency\` | \`section-${string} billing username\` | \`section-${string} billing cc-additional-name\` | \`section-${string} billing cc-family-name\` | \`section-${string} billing cc-given-name\` | \`section-${string} billing cc-name\` | \`section-${string} billing cc-type\`
|
|
22
|
+
|
|
23
|
+
Default: 'on' for everything else
|
|
24
|
+
|
|
25
|
+
A hint as to the intended content of the field.
|
|
26
|
+
|
|
27
|
+
When set to `on` (the default), this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents.
|
|
28
|
+
|
|
29
|
+
When set to `off`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes.
|
|
30
|
+
|
|
31
|
+
Alternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill.
|
|
32
|
+
|
|
33
|
+
* defaultValue
|
|
34
|
+
|
|
35
|
+
string
|
|
36
|
+
|
|
37
|
+
The default value for the field.
|
|
38
|
+
|
|
39
|
+
* details
|
|
40
|
+
|
|
41
|
+
string
|
|
42
|
+
|
|
43
|
+
Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user.
|
|
44
|
+
|
|
45
|
+
This will also be exposed to screen reader users.
|
|
46
|
+
|
|
47
|
+
* disabled
|
|
48
|
+
|
|
49
|
+
boolean
|
|
50
|
+
|
|
51
|
+
Default: false
|
|
52
|
+
|
|
53
|
+
Disables the field, disallowing any interaction.
|
|
54
|
+
|
|
55
|
+
* error
|
|
56
|
+
|
|
57
|
+
string
|
|
58
|
+
|
|
59
|
+
Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.
|
|
60
|
+
|
|
61
|
+
* id
|
|
62
|
+
|
|
63
|
+
string
|
|
64
|
+
|
|
65
|
+
A unique identifier for the element.
|
|
66
|
+
|
|
67
|
+
* label
|
|
68
|
+
|
|
69
|
+
string
|
|
70
|
+
|
|
71
|
+
Content to use as the field label.
|
|
72
|
+
|
|
73
|
+
* labelAccessibilityVisibility
|
|
74
|
+
|
|
75
|
+
"visible" | "exclusive"
|
|
76
|
+
|
|
77
|
+
Default: 'visible'
|
|
78
|
+
|
|
79
|
+
Changes the visibility of the component's label.
|
|
80
|
+
|
|
81
|
+
* `visible`: the label is visible to all users.
|
|
82
|
+
* `exclusive`: the label is visually hidden but remains in the accessibility tree.
|
|
83
|
+
|
|
84
|
+
* maxLength
|
|
85
|
+
|
|
86
|
+
number
|
|
87
|
+
|
|
88
|
+
Default: Infinity
|
|
89
|
+
|
|
90
|
+
Specifies the maximum number of characters allowed.
|
|
91
|
+
|
|
92
|
+
* minLength
|
|
93
|
+
|
|
94
|
+
number
|
|
95
|
+
|
|
96
|
+
Default: 0
|
|
97
|
+
|
|
98
|
+
Specifies the min number of characters allowed.
|
|
99
|
+
|
|
100
|
+
* name
|
|
101
|
+
|
|
102
|
+
string
|
|
103
|
+
|
|
104
|
+
An identifier for the field that is unique within the nearest containing form.
|
|
105
|
+
|
|
106
|
+
* placeholder
|
|
107
|
+
|
|
108
|
+
string
|
|
109
|
+
|
|
110
|
+
A short hint that describes the expected value of the field.
|
|
111
|
+
|
|
112
|
+
* readOnly
|
|
113
|
+
|
|
114
|
+
boolean
|
|
115
|
+
|
|
116
|
+
Default: false
|
|
117
|
+
|
|
118
|
+
The field cannot be edited by the user. It is focusable will be announced by screen readers.
|
|
119
|
+
|
|
120
|
+
* required
|
|
121
|
+
|
|
122
|
+
boolean
|
|
123
|
+
|
|
124
|
+
Default: false
|
|
125
|
+
|
|
126
|
+
Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property.
|
|
127
|
+
|
|
128
|
+
* rows
|
|
129
|
+
|
|
130
|
+
number
|
|
131
|
+
|
|
132
|
+
Default: 2
|
|
133
|
+
|
|
134
|
+
A number of visible text lines.
|
|
135
|
+
|
|
136
|
+
* value
|
|
137
|
+
|
|
138
|
+
string
|
|
139
|
+
|
|
140
|
+
The current value for the field. If omitted, the field will be empty.
|
|
141
|
+
|
|
142
|
+
### TextAutocompleteField
|
|
143
|
+
|
|
144
|
+
```ts
|
|
145
|
+
'language' | 'organization' | 'additional-name' | 'address-level1' | 'address-level2' | 'address-level3' | 'address-level4' | 'address-line1' | 'address-line2' | 'address-line3' | 'country-name' | 'country' | 'family-name' | 'given-name' | 'honorific-prefix' | 'honorific-suffix' | 'name' | 'nickname' | 'one-time-code' | 'organization-title' | 'postal-code' | 'sex' | 'street-address' | 'transaction-currency' | 'username' | 'cc-additional-name' | 'cc-family-name' | 'cc-given-name' | 'cc-name' | 'cc-type'
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
## Events
|
|
149
|
+
|
|
150
|
+
Learn more about [registering events](https://shopify.dev/docs/api/app-home/using-polaris-components#event-handling).
|
|
151
|
+
|
|
152
|
+
* blur
|
|
153
|
+
|
|
154
|
+
CallbackEventListener<'input'>
|
|
155
|
+
|
|
156
|
+
* change
|
|
157
|
+
|
|
158
|
+
CallbackEventListener<'input'>
|
|
159
|
+
|
|
160
|
+
* focus
|
|
161
|
+
|
|
162
|
+
CallbackEventListener<'input'>
|
|
163
|
+
|
|
164
|
+
* input
|
|
165
|
+
|
|
166
|
+
CallbackEventListener<'input'>
|
|
167
|
+
|
|
168
|
+
### CallbackEventListener
|
|
169
|
+
|
|
170
|
+
```ts
|
|
171
|
+
(EventListener & {
|
|
172
|
+
(event: CallbackEvent<T>): void;
|
|
173
|
+
}) | null
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
### CallbackEvent
|
|
177
|
+
|
|
178
|
+
```ts
|
|
179
|
+
Event & {
|
|
180
|
+
currentTarget: HTMLElementTagNameMap[T];
|
|
181
|
+
}
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
Examples
|
|
185
|
+
|
|
186
|
+
### Examples
|
|
187
|
+
|
|
188
|
+
* #### Code
|
|
189
|
+
|
|
190
|
+
##### jsx
|
|
191
|
+
|
|
192
|
+
```jsx
|
|
193
|
+
<s-text-area
|
|
194
|
+
label="Shipping address"
|
|
195
|
+
value="1776 Barnes Street, Orlando, FL 32801"
|
|
196
|
+
rows={3}
|
|
197
|
+
/>
|
|
198
|
+
```
|
|
199
|
+
|
|
200
|
+
##### html
|
|
201
|
+
|
|
202
|
+
```html
|
|
203
|
+
<s-text-area
|
|
204
|
+
label="Shipping address"
|
|
205
|
+
value="1776 Barnes Street, Orlando, FL 32801"
|
|
206
|
+
rows="3"
|
|
207
|
+
></s-text-area>
|
|
208
|
+
```
|
|
209
|
+
|
|
210
|
+
* #### Basic usage
|
|
211
|
+
|
|
212
|
+
##### Description
|
|
213
|
+
|
|
214
|
+
Demonstrates a simple text area for collecting product descriptions with a placeholder and autocomplete disabled.
|
|
215
|
+
|
|
216
|
+
##### jsx
|
|
217
|
+
|
|
218
|
+
```jsx
|
|
219
|
+
<s-text-area
|
|
220
|
+
label="Product description"
|
|
221
|
+
placeholder="Enter a detailed description..."
|
|
222
|
+
autocomplete="off"
|
|
223
|
+
/>
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
##### html
|
|
227
|
+
|
|
228
|
+
```html
|
|
229
|
+
<s-text-area
|
|
230
|
+
label="Product description"
|
|
231
|
+
placeholder="Enter a detailed description..."
|
|
232
|
+
autocomplete="off"
|
|
233
|
+
></s-text-area>
|
|
234
|
+
```
|
|
235
|
+
|
|
236
|
+
* #### Seo meta description with character limit
|
|
237
|
+
|
|
238
|
+
##### Description
|
|
239
|
+
|
|
240
|
+
Showcases a text area for writing SEO meta descriptions with a character limit of 160, providing guidance text and a multi-line input.
|
|
241
|
+
|
|
242
|
+
##### jsx
|
|
243
|
+
|
|
244
|
+
```jsx
|
|
245
|
+
<s-text-area
|
|
246
|
+
label="Meta description"
|
|
247
|
+
max-length={160}
|
|
248
|
+
details="Appears in search results. Keep under 160 characters for best visibility."
|
|
249
|
+
placeholder="Write a compelling description that will appear in Google search results..."
|
|
250
|
+
rows={3}
|
|
251
|
+
autocomplete="off"
|
|
252
|
+
/>
|
|
253
|
+
```
|
|
254
|
+
|
|
255
|
+
##### html
|
|
256
|
+
|
|
257
|
+
```html
|
|
258
|
+
<s-text-area
|
|
259
|
+
label="Meta description"
|
|
260
|
+
max-length="160"
|
|
261
|
+
details="Appears in search results. Keep under 160 characters for best visibility."
|
|
262
|
+
placeholder="Write a compelling description that will appear in Google search results..."
|
|
263
|
+
rows="3"
|
|
264
|
+
autocomplete="off"
|
|
265
|
+
></s-text-area>
|
|
266
|
+
```
|
|
267
|
+
|
|
268
|
+
* #### With error state
|
|
269
|
+
|
|
270
|
+
##### Description
|
|
271
|
+
|
|
272
|
+
Demonstrates the error state of a text area with a minimum length requirement, showing how validation errors are displayed in a commerce context.
|
|
273
|
+
|
|
274
|
+
##### jsx
|
|
275
|
+
|
|
276
|
+
```jsx
|
|
277
|
+
<s-text-area
|
|
278
|
+
label="Reason for return"
|
|
279
|
+
error="Please provide a detailed explanation for the return request. This helps us improve our products and process the refund faster."
|
|
280
|
+
minLength={20}
|
|
281
|
+
placeholder="Explain why the customer is returning this item..."
|
|
282
|
+
rows={3}
|
|
283
|
+
autocomplete="off"
|
|
284
|
+
/>
|
|
285
|
+
```
|
|
286
|
+
|
|
287
|
+
##### html
|
|
288
|
+
|
|
289
|
+
```html
|
|
290
|
+
<s-text-area
|
|
291
|
+
label="Reason for return"
|
|
292
|
+
error="Please provide a detailed explanation for the return request. This helps us improve our products and process the refund faster."
|
|
293
|
+
minLength="20"
|
|
294
|
+
placeholder="Explain why the customer is returning this item..."
|
|
295
|
+
rows="3"
|
|
296
|
+
autocomplete="off"
|
|
297
|
+
></s-text-area>
|
|
298
|
+
```
|
|
299
|
+
|
|
300
|
+
* #### Product care instructions
|
|
301
|
+
|
|
302
|
+
##### Description
|
|
303
|
+
|
|
304
|
+
Illustrates a text area for entering detailed product care instructions, with an expanded height and supporting guidance text.
|
|
305
|
+
|
|
306
|
+
##### jsx
|
|
307
|
+
|
|
308
|
+
```jsx
|
|
309
|
+
<s-text-area
|
|
310
|
+
label="Care instructions"
|
|
311
|
+
rows={6}
|
|
312
|
+
details="Detailed care instructions help customers maintain their purchases and reduce returns."
|
|
313
|
+
placeholder="Provide washing, storage, and maintenance instructions..."
|
|
314
|
+
autocomplete="off"
|
|
315
|
+
/>
|
|
316
|
+
```
|
|
317
|
+
|
|
318
|
+
##### html
|
|
319
|
+
|
|
320
|
+
```html
|
|
321
|
+
<s-text-area
|
|
322
|
+
label="Care instructions"
|
|
323
|
+
rows="6"
|
|
324
|
+
details="Detailed care instructions help customers maintain their purchases and reduce returns."
|
|
325
|
+
placeholder="Provide washing, storage, and maintenance instructions..."
|
|
326
|
+
autocomplete="off"
|
|
327
|
+
></s-text-area>
|
|
328
|
+
```
|