Skip to content

Commit 83b323f

Browse files
armaan-ghoshcappslock
authored andcommitted
Add documentation for Link component in POS UI Extensions
- Add Link to StandardComponents union type - Create Link.doc.ts with comprehensive documentation including: - Component description highlighting tappable text interactions - Command system support (--show, --hide, --toggle, --copy) - Best practices for accessibility and onClick handlers - Clear distinction between Link and Button usage - Add default.html example demonstrating basic Link usage - Add placeholder screenshot images (link-thumbnail.png, link-default.png)
1 parent 359d1d9 commit 83b323f

File tree

5 files changed

+55
-0
lines changed

5 files changed

+55
-0
lines changed
4.22 KB
Loading
1.93 KB
Loading
Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
2+
3+
const data: ReferenceEntityTemplateSchema = {
4+
name: 'Link',
5+
description:
6+
'The `Link` component makes text interactive, allowing users to trigger actions through tappable text. Use it for lightweight interactions, navigation triggers, or actions embedded within text content.' +
7+
'\n\nLinks support the command system for controlling other components declaratively. Use `command` and `commandFor` to show, hide, or toggle modals and other targetable elements. For primary actions like submitting forms or triggering operations, use [`Button`](/docs/api/pos-ui-extensions/2026-01-rc/polaris-web-components/actions/button) instead.',
8+
thumbnail: 'link-thumbnail.png',
9+
isVisualComponent: true,
10+
type: '',
11+
definitions: [
12+
{
13+
title: 'Properties',
14+
description:
15+
'Configure the following properties on the `Link` component.',
16+
type: 'Link',
17+
},
18+
],
19+
category: 'Polaris web components',
20+
subCategory: 'Actions',
21+
defaultExample: {
22+
image: 'link-default.png',
23+
description:
24+
'Create interactive links using the `Link` component. This example demonstrates basic link usage with onClick handlers for custom actions.',
25+
codeblock: {
26+
title: 'Create an interactive link',
27+
tabs: [
28+
{
29+
code: './examples/default.html',
30+
language: 'html',
31+
},
32+
],
33+
},
34+
},
35+
subSections: [
36+
{
37+
type: 'Generic',
38+
anchorLink: 'best-practices',
39+
title: 'Best practices',
40+
sectionContent: `
41+
- **Write clear, descriptive text:** Link text should clearly indicate the action or destination, helping users understand what will happen when they tap.
42+
- **Keep text concise:** Use brief, actionable language that doesn't clutter the interface. Links work well embedded within text content.
43+
- **Provide accessibility labels when needed:** Use \`accessibilityLabel\` when the visible text doesn't fully describe the action, especially for short labels like "Edit" or "View".
44+
- **Use the command system for component control:** Use \`command\` (\`--show\`, \`--hide\`, \`--toggle\`, \`--copy\`) with \`commandFor\` to control modals and other components declaratively.
45+
- **Handle onClick for custom logic:** Implement \`onClick\` handlers for actions like showing toasts, updating state, or triggering side effects.
46+
- **Reserve buttons for primary actions:** Use \`Button\` for prominent actions like "Save" or "Submit". Use \`Link\` for secondary, embedded, or text-based interactions.
47+
`,
48+
},
49+
],
50+
related: [],
51+
};
52+
53+
export default data;
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<s-link>Tappable link</s-link>

packages/ui-extensions/src/surfaces/point-of-sale/components/targets/StandardComponents.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export type StandardComponents =
1515
| 'Heading'
1616
| 'Icon'
1717
| 'Image'
18+
| 'Link'
1819
| 'Modal'
1920
| 'NumberField'
2021
| 'Page'

0 commit comments

Comments
 (0)