Merge pull request #2784 from Shopify/pos-extensibility-docs

POS UI Extensions docs updates branch

Author: runmad

Diff for: packages/ui-extensions/docs/surfaces/point-of-sale/reference/components/Button.doc.ts

@@ -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: [

Diff for: packages/ui-extensions/docs/surfaces/point-of-sale/reference/components/List.doc.ts

@@ -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: [

Diff for: packages/ui-extensions/docs/surfaces/point-of-sale/reference/components/Section.doc.ts

@@ -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: [

Diff for: packages/ui-extensions/docs/surfaces/point-of-sale/reference/components/Tile.doc.ts

@@ -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: [

Diff for: packages/ui-extensions/docs/surfaces/point-of-sale/staticPages/pages/versions.doc.ts

@@ -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**:
@@ -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.
@@ -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
@@ -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.
@@ -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.
@@ -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.
 

Diff for: packages/ui-extensions/src/surfaces/point-of-sale/render/components/Badge/Badge.ts

@@ -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 {
   /**
@@ -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;
 }

Diff for: packages/ui-extensions/src/surfaces/point-of-sale/render/components/Button/Button.ts

@@ -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`.
@@ -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;
   /**

Diff for: packages/ui-extensions/src/surfaces/point-of-sale/render/components/Tile/Tile.ts

@@ -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.
  */