You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
'The `Badge` component uses color and text to communicate status information for orders, products, customers, and other business data. Use badges to create visual hierarchy and help merchants quickly identify important information or status changes within your POS interface.\n\nThe component automatically adjusts its appearance based on the specified `tone` property, ensuring consistent visual communication across the POS interface. Badges support different sizes and can display text, numbers, or status indicators, making them versatile for representing everything from order counts to inventory alerts in a compact, scannable format.',
10
+
'The Badge component uses color and text to communicate status information for orders, products, customers, and other business data. Use badges to create visual hierarchy and help merchants quickly identify important information or status changes within your POS interface.\n\nThe component automatically adjusts its appearance based on the specified `tone` property, ensuring consistent visual communication across the POS interface. Badges support different sizes and can display text, numbers, or status indicators, making them versatile for representing everything from order counts to inventory alerts in a compact, scannable format.',
11
11
isVisualComponent: true,
12
12
type: 'component',
13
13
definitions: [
14
14
{
15
15
title: 'Properties',
16
-
description:
17
-
'Configure the following properties on the `Badge` component.',
16
+
description: 'Configure the following properties on the Badge component.',
'The `Banner` component highlights important information or required actions prominently within the POS interface. Use banners to communicate critical updates, warnings, informational messages, or success notifications that require merchant attention in a persistent but non-interruptive way.\n\nThe component provides persistent visibility for important messages while remaining non-intrusive to the main workflow, with support for dismissible and non-dismissible states. It includes automatic color coding based on message severity and integrates with the POS design system to maintain visual consistency across different alert types and use cases.',
10
+
'The Banner component highlights important information or required actions prominently within the POS interface. Use banners to communicate critical updates, warnings, informational messages, or success notifications that require merchant attention in a persistent but non-interruptive way.\n\nThe component provides persistent visibility for important messages while remaining non-intrusive to the main workflow, with support for dismissible and non-dismissible states. It includes automatic color coding based on message severity and integrates with the POS design system to maintain visual consistency across different alert types and use cases.',
11
11
isVisualComponent: true,
12
12
type: 'component',
13
13
definitions: [
14
14
{
15
15
title: 'Properties',
16
16
description:
17
-
'Configure the following properties on the `Banner` component.',
17
+
'Configure the following properties on the Banner component.',
'The `Box` component is a generic container that provides flexible layout with consistent spacing and styling. Use it to apply padding, to nest and group other components, or as the foundation for building structured layouts.\n\nThe component provides granular control over spacing through padding properties and sizing through width/height properties, serving as a building block for precise layouts. It simplifies the creation of containers with consistent spacing by using design system tokens, ensuring visual consistency and reducing the need for custom CSS in most layout scenarios.\n\n`Box` components provide shorthand properties for common padding patterns like equal padding on all sides or symmetric horizontal/vertical padding, reducing verbose property specifications for simpler layouts.',
10
+
'The Box component is a generic container that provides flexible layout with consistent spacing and styling. Use it to apply padding, to nest and group other components, or as the foundation for building structured layouts.\n\nThe component provides granular control over spacing through padding properties and sizing through width/height properties, serving as a building block for precise layouts. It simplifies the creation of containers with consistent spacing by using design system tokens, ensuring visual consistency and reducing the need for custom CSS in most layout scenarios.\n\nBox components provide shorthand properties for common padding patterns like equal padding on all sides or symmetric horizontal/vertical padding, reducing verbose property specifications for simpler layouts.',
11
11
isVisualComponent: true,
12
12
type: 'component',
13
13
definitions: [
14
14
{
15
15
title: 'Properties',
16
-
description: 'Configure the following properties on the `Box` component.',
16
+
description: 'Configure the following properties on the Box component.',
- **Apply consistent padding using the numeric scale:** Use the predefined numeric padding values (for example, \`'100'\`, \`'300'\`, \`'500'\`) to maintain consistency across your interface. Start with \`'300'\` for standard content and adjust up or down based on the visual hierarchy and spacing needs of your layout.
40
40
- **Use directional padding for precise control:** Use specific padding properties like \`paddingInline\` and \`paddingBlock\` when you need different spacing on different sides. This is particularly useful for creating asymmetric layouts or aligning content with other interface elements.
41
-
- **Combine Box with other layout components strategically:** Use \`Box\` as a foundation with other layout components like \`Stack\` for optimal results. \`Box\` handles spacing and sizing, while \`Stack\` manages the arrangement and alignment of child elements within the container.
41
+
- **Combine Box with other layout components strategically:** Use Box as a foundation with other layout components like Stack for optimal results. Box handles spacing and sizing, while Stack manages the arrangement and alignment of child elements within the container.
42
42
- **Consider content flow and reading patterns:** When using directional properties, remember that \`block\` refers to the main content flow direction (usually vertical) and \`inline\` refers to the text direction (usually horizontal).
43
-
- **Optimize for touch interfaces:** Ensure adequate padding around interactive elements within \`Box\` containers. POS interfaces are primarily touch-based, so generous padding improves usability and reduces accidental interactions. Consider using padding values of \`'300'\` or higher for touch targets.
43
+
- **Optimize for touch interfaces:** Ensure adequate padding around interactive elements within Box containers. POS interfaces are primarily touch-based, so generous padding improves usability and reduces accidental interactions. Consider using padding values of \`'300'\` or higher for touch targets.
44
44
`,
45
45
},
46
46
{
47
47
type: 'Generic',
48
48
anchorLink: 'limitations',
49
49
title: 'Limitations',
50
50
sectionContent: `
51
-
- Box is a layout container and doesn't provide interactive functionality—use it in combination with interactive components like \`Button\` or \`Clickable\` for user interactions.
51
+
- Box is a layout container and doesn't provide interactive functionality—use it in combination with interactive components like Button or Clickable for user interactions.
52
52
- Padding values are limited to the predefined numeric scale—custom pixel values for padding aren't supported to maintain design consistency.
53
-
- Box doesn't provide scrolling capabilities for overflow content—use \`ScrollView\` when content might exceed container dimensions.
53
+
- Box doesn't provide scrolling capabilities for overflow content—use ScrollView when content might exceed container dimensions.
'The `Button` component triggers actions or events, such as opening dialogs or navigating to other pages. Use `Button` to let merchants perform specific tasks or initiate interactions throughout the POS interface.\n\nButtons provide clear calls-to-action that guide merchants through workflows, enable form submissions, and trigger important operations. They support various visual styles, tones, and interaction patterns to communicate intent and hierarchy within the interface.',
10
+
'The Button component triggers actions or events, such as opening dialogs or navigating to other pages. Use Button to let merchants perform specific tasks or initiate interactions throughout the POS interface.\n\nButtons provide clear calls-to-action that guide merchants through workflows, enable form submissions, and trigger important operations. They support various visual styles, tones, and interaction patterns to communicate intent and hierarchy within the interface.',
11
11
isVisualComponent: true,
12
12
type: 'component',
13
13
definitions: [
14
14
{
15
15
title: 'Properties',
16
16
description:
17
-
'Configure the following properties on the `Button` component.',
17
+
'Configure the following properties on the Button component.',
'The `CameraScanner` component provides camera-based scanning functionality with optional banner messaging. Use it to enable barcode scanning, QR code reading, or other camera-based input methods with contextual user feedback.\n\n`CameraScanner` works in conjunction with the Scanner API to capture scan data from device cameras, providing both the visual interface and the data handling capabilities for complete scanning workflows.\n\n`CameraScanner` components provide real-time feedback during scanning operations with visual guides for optimal positioning, helping merchants quickly capture barcodes even in challenging lighting conditions or with damaged labels. The component provides audio feedback during scanning operations, confirming successful scans without requiring visual confirmation.',
10
+
'The CameraScanner component provides camera-based scanning functionality with optional banner messaging. Use it to enable barcode scanning, QR code reading, or other camera-based input methods with contextual user feedback.\n\nCameraScanner works in conjunction with the Scanner API to capture scan data from device cameras, providing both the visual interface and the data handling capabilities for complete scanning workflows.\n\nCameraScanner components provide real-time feedback during scanning operations with visual guides for optimal positioning, helping merchants quickly capture barcodes even in challenging lighting conditions or with damaged labels. The component provides audio feedback during scanning operations, confirming successful scans without requiring visual confirmation.',
11
11
isVisualComponent: true,
12
12
type: 'component',
13
13
definitions: [
14
14
{
15
15
title: 'Properties',
16
16
description:
17
-
'Configure the following properties on the `CameraScanner` component.',
17
+
'Configure the following properties on the CameraScanner component.',
- \`CameraScanner\` requires device camera access and appropriate permissions—functionality is limited on devices without cameras or when permissions are denied.
51
+
- CameraScanner requires device camera access and appropriate permissions—functionality is limited on devices without cameras or when permissions are denied.
52
52
- Banner messaging is the only built-in user feedback mechanism—complex scanning feedback or custom UI elements require additional components or external state management.
53
53
- The component handles basic camera functionality—advanced camera controls, image processing, or custom scanning algorithms aren't supported within the component itself.
Copy file name to clipboardExpand all lines: packages/ui-extensions/docs/surfaces/point-of-sale/reference/components/DateField.doc.ts
+3-3Lines changed: 3 additions & 3 deletions
Original file line number
Diff line number
Diff line change
@@ -4,14 +4,14 @@ import {generateCodeBlock} from '../helpers/generateCodeBlock';
4
4
constdata: ReferenceEntityTemplateSchema={
5
5
name: 'DateField',
6
6
description:
7
-
'The `DateField` component captures date input with a consistent interface for date selection and proper validation. Use it to collect date information in forms, scheduling interfaces, or data entry workflows.\n\n`DateField` components support both manual text entry and picker selection, giving merchants flexibility to choose their preferred input method based on personal preference and specific date entry scenarios.\n\nFor visual calendar-based selection, consider `DatePicker`. The component validates dates in real-time and provides clear error messages for invalid entries, preventing form submission errors and reducing the need for merchants to correct date inputs multiple times.',
7
+
'The DateField component captures date input with a consistent interface for date selection and proper validation. Use it to collect date information in forms, scheduling interfaces, or data entry workflows.\n\nDateField components support both manual text entry and picker selection, giving merchants flexibility to choose their preferred input method based on personal preference and specific date entry scenarios.\n\nFor visual calendar-based selection, consider DatePicker. The component validates dates in real-time and provides clear error messages for invalid entries, preventing form submission errors and reducing the need for merchants to correct date inputs multiple times.',
8
8
isVisualComponent: true,
9
9
type: 'component',
10
10
definitions: [
11
11
{
12
12
title: 'Properties',
13
13
description:
14
-
'Configure the following properties on the `DateField` component.',
14
+
'Configure the following properties on the DateField component.',
- \`DateField\` provides text-based date input—for calendar-style visual date selection, use the \`DatePicker\` component which offers an interactive calendar interface.
49
+
- DateField provides text-based date input—for calendar-style visual date selection, use the DatePicker component which offers an interactive calendar interface.
50
50
- The field defaults to the current date rather than being empty—if you need an empty initial state, explicitly set the \`value\` property to an empty string.
51
51
- Action buttons are limited to simple press callbacks—complex action workflows require custom implementation or additional components.
'The `DatePicker` component allows merchants to select a specific date using a calendar-like picker interface. Use it to provide visual date selection with an intuitive calendar view for improved user experience.\n\n`DatePicker` offers a calendar-based alternative to direct text input. The calendar interface allows merchants to see dates in context of the full month, making it easier to select dates relative to specific days of the week or to visualize date ranges within a month view. For simple date entry when users know the exact date, use `DateField`.',
11
+
'The DatePicker component allows merchants to select a specific date using a calendar-like picker interface. Use it to provide visual date selection with an intuitive calendar view for improved user experience.\n\nDatePicker offers a calendar-based alternative to direct text input. The calendar interface allows merchants to see dates in context of the full month, making it easier to select dates relative to specific days of the week or to visualize date ranges within a month view. For simple date entry when users know the exact date, use DateField.',
12
12
isVisualComponent: true,
13
13
type: 'component',
14
14
definitions: [
15
15
{
16
16
title: 'Properties',
17
17
description:
18
-
'Configure the following properties on the `DatePicker` component.',
18
+
'Configure the following properties on the DatePicker component.',
- \`DatePicker\` requires external visibility state management through the \`visibleState\` tuple—automatic show/hide behavior based on field focus isn't built-in.
53
+
- DatePicker requires external visibility state management through the \`visibleState\` tuple—automatic show/hide behavior based on field focus isn't built-in.
54
54
- The component provides date selection but doesn't include field labels, help text, or error messaging—combine with other UI elements or text components to provide complete form field experiences.
55
55
- Input mode determines the interaction pattern but can't be changed dynamically while the picker is visible—you must set the mode before displaying the picker.
'The `Dialog` component displays a modal that requires user attention and interaction. Use dialogs to present important information, confirm actions, or collect input from merchants in a focused overlay that interrupts the current workflow until resolved.\n\nThe component creates a modal overlay that focuses user attention on important decisions or information, blocking interaction with underlying content until dismissed. It supports various configurations including alert dialogs, confirmation dialogs, and custom content dialogs, with built-in button layouts and keyboard shortcuts for efficient navigation and decision-making.\n\n`Dialog` components provide customizable button layouts and keyboard shortcuts that follow platform conventions, ensuring merchants can quickly approve or dismiss dialogs through familiar interaction patterns.',
10
+
'The Dialog component displays a modal that requires user attention and interaction. Use dialogs to present important information, confirm actions, or collect input from merchants in a focused overlay that interrupts the current workflow until resolved.\n\nThe component creates a modal overlay that focuses user attention on important decisions or information, blocking interaction with underlying content until dismissed. It supports various configurations including alert dialogs, confirmation dialogs, and custom content dialogs, with built-in button layouts and keyboard shortcuts for efficient navigation and decision-making.\n\nDialog components provide customizable button layouts and keyboard shortcuts that follow platform conventions, ensuring merchants can quickly approve or dismiss dialogs through familiar interaction patterns.',
11
11
isVisualComponent: true,
12
12
type: 'component',
13
13
definitions: [
14
14
{
15
15
title: 'Properties',
16
16
description:
17
-
'Configure the following properties on the `Dialog` component.',
17
+
'Configure the following properties on the Dialog component.',
0 commit comments