Skip to content

POS UI Extensions docs updates branch #2784

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Apr 21, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@ const generateCodeBlockForButton = (title: string, fileName: string) =>

const data: ReferenceEntityTemplateSchema = {
name: 'Button',
description:
'Buttons enable the merchant to initiate actions, like "add", "save", or "next".',
description: `Buttons enable the merchant to initiate actions, like "add", "save", or "next".
> Note:
> The \`plain\` \`ButtonType\` is no longer supported as of POS 10.0.0 and defaults to \`basic\`.`,
isVisualComponent: true,
type: 'component',
definitions: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@ import {generateCodeBlock} from '../helpers/generateCodeBlock';

const data: ReferenceEntityTemplateSchema = {
name: 'List',
description:
'The list is a scrollable component in which the list rows are rendered.',
description: `The list is a scrollable component in which the list rows are rendered.
> Note:
> List items no longer have dividers as of POS 10.0.0.`,
isVisualComponent: true,
type: 'component',
definitions: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@ const generateCodeBlockForComponent = (title: string, fileName: string) =>

const data: ReferenceEntityTemplateSchema = {
name: 'Section',
description:
'A component used to group other components together in a card-like UI. Usually, sections will be used inside a ScrollView.',
description: `A component used to group other components together in a card-like UI. Usually, sections will be used inside a ScrollView.
> Note:
> Section no longer has a border as of POS 10.0.0.`,
isVisualComponent: true,
type: 'component',
definitions: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@ const generateCodeBlockForTile = (title: string, fileName: string) =>

const data: ReferenceEntityTemplateSchema = {
name: 'Tile',
description:
'Tiles are customizable buttons that allow staff to complete actions quickly. Think of them as shortcuts--adding a 10% discount to an order, for example. Tiles provide contextual information and let merchants quickly access workflows, actions, and information from the smart grid and the top of detail pages. They’re dynamic and can change based on surrounding context, such as what’s in the cart.',
description: `Tiles are customizable buttons that allow staff to complete actions quickly. Think of them as shortcuts--adding a 10% discount to an order, for example. Tiles provide contextual information and let merchants quickly access workflows, actions, and information from the smart grid and the top of detail pages. They’re dynamic and can change based on surrounding context, such as what’s in the cart.
> Note:
> The appearance of \`destructive\` has been updated as of POS 10.0.0 to appear as an active state.`,
isVisualComponent: true,
type: 'component',
definitions: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,18 @@ Refer to the [migration guide](/docs/api/pos-ui-extensions/migrating) for more i
- Removed in POS version: N/A
- Release day: N/A

## Important Fixes

- **POS 10.2.0**:

- Fixed a sizing issue with the \`Button\` component.
- Fixed an issue where the \`Section\` component was displaying a divider between child components.

- **POS 10.0.0**:

- Removed \`email\`, \`firstName\`, \`lastName\`, and \`note\` from the [Customer](/docs/api/pos-ui-extensions/apis/cart-api#customer) object.
- POS UI Extensions components automatically use our new POS visual design language.

### Features

**Developer Preview**:
Expand All @@ -76,12 +88,22 @@ Refer to the [migration guide](/docs/api/pos-ui-extensions/migrating) for more i
anchorLink: '202501',
title: '2025.01',
sectionContent: `
- Added in POS version: 9.26
- Added in POS version: 9.26.0
- Removed in POS version: N/A
- Release day: 1/6/2025

## Important Fixes

- **POS 10.2.0**:

- Fixed a sizing issue with the \`Button\` component.
- Fixed an issue where the \`Section\` component was displaying a divider between child components.

- **POS 10.0.0**:

- Removed \`email\`, \`firstName\`, \`lastName\`, and \`note\` from the [Customer](/docs/api/pos-ui-extensions/apis/cart-api#customer) object.
- POS UI Extensions components automatically use our new POS visual design language.

- **POS 9.31.0**:

- Modal updated so neither swiping down nor tapping outside of modal will dismiss modal.
Expand Down Expand Up @@ -130,10 +152,22 @@ Refer to the [migration guide](/docs/api/pos-ui-extensions/migrating) for more i
anchorLink: '2024101',
title: '2024.10.1',
sectionContent: `
- Added in POS version: 9.22
- Added in POS version: 9.22.0
- Removed in POS version: N/A
- Release day: 11/11/2024.

## Important Fixes

- **POS 10.2.0**:

- Fixed a sizing issue with the \`Button\` component.
- Fixed an issue where the \`Section\` component was displaying a divider between child components.

- **POS 10.0.0**:

- Removed \`email\`, \`firstName\`, \`lastName\`, and \`note\` from the [Customer](/docs/api/pos-ui-extensions/apis/cart-api#customer) object.
- POS UI Extensions components automatically use our new POS visual design language.

### Features

- Fixes long standing issue where \`useEffect\` teardown functions are not working in React
Expand All @@ -144,10 +178,21 @@ Refer to the [migration guide](/docs/api/pos-ui-extensions/migrating) for more i
anchorLink: '202410',
title: '2024.10',
sectionContent: `
- Added in POS version: 9.19
- Added in POS version: 9.19.0
- Removed in POS version: N/A
- Release day: 10/1/2024.

## Important Fixes

- **POS 10.2.0**:

- Fixed a sizing issue with the \`Button\` component.
- Fixed an issue where the \`Section\` component was displaying a divider between child components.

- **POS 10.0.0**:

- Removed \`email\`, \`firstName\`, \`lastName\`, and \`note\` from the [Customer](/docs/api/pos-ui-extensions/apis/cart-api#customer) object.

### Features

- Added support for iOS debugging with the Safari dev tools.
Expand All @@ -166,10 +211,22 @@ Refer to the [migration guide](/docs/api/pos-ui-extensions/migrating) for more i
anchorLink: '202407',
title: '2024.07',
sectionContent: `
- Added in POS version: 9.15
- Added in POS version: 9.15.0
- Removed in POS version: N/A
- Release day: 08/14/2024.

## Important Fixes

- **POS 10.2.0**:

- Fixed a sizing issue with the \`Button\` component.
- Fixed an issue where the \`Section\` component was displaying a divider between child components.

- **POS 10.0.0**:

- Removed \`email\`, \`firstName\`, \`lastName\`, and \`note\` from the [Customer](/docs/api/pos-ui-extensions/apis/cart-api#customer) object.
- POS UI Extensions components automatically use our new POS visual design language.

### Features

- Introduced a [SectionHeader component](/docs/api/pos-ui-extensions/components/sectionheader). It can be used to title sections and structure content.
Expand All @@ -194,7 +251,7 @@ Refer to the [migration guide](/docs/api/pos-ui-extensions/migrating) for more i
},
],
sectionContent: `
- Added in POS version: 9.11
- Added in POS version: 9.11.0
- Removed in POS version: 9.31.0
- Release day: 06/10/2024.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export type BadgeStatus = 'empty' | 'partial' | 'complete';
* @property text - The text displayed inside the badge.
* @property variant - The appearance and function of the badge.
* @property status - A circle icon displaying the status of the badge.
* @deprecated status - No longer supported as of POS 10.0.0.
*/
export interface BadgeProps {
/**
Expand All @@ -27,6 +28,7 @@ export interface BadgeProps {

/**
* A circle icon displaying the status of the badge.
* @deprecated No longer supported as of POS 10.0.0.
*/
status?: BadgeStatus;
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
import {createRemoteComponent} from '@remote-ui/core';

export type ButtonType = 'primary' | 'basic' | 'destructive' | 'plain';
export type ButtonType =
| 'primary'
| 'basic'
| 'destructive'
/** @deprecated No longer supported as of POS 10.0.0. */
| 'plain';

/**
* @property `title` the text set on the `Button`.
Expand All @@ -18,6 +23,7 @@ export interface ButtonProps {
title?: string;
/**
* The type of `Button` to render. Determines the appearance of the button.
* Note: The 'plain' type is no longer supported as of POS 10.0.0. Using it will default to 'basic'.
*/
type?: ButtonType;
/**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ import {createRemoteComponent} from '@remote-ui/core';
* @property `title` the text set on the main label of the tile.
* @property `subtitle` the text set on the secondary label of the tile.
* @property `enabled` sets whether or not the tile can be tapped.
* @property `destructive` sets whether or not the tile is in a red destructive appearance.
* @property `destructive` sets whether or not the tile has a destructive appearance and active state as of POS
* 10.0.0.
* @property `badgeValue` the number value displayed in the top right corner of the tile.
* @property `onPress` the callback that is executed when the tile is tapped.
*/
Expand Down