Add notes for Badge, Button, Tile, Section and versions re: POS 10.x

Author: runmad

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

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

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

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

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

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;
 }

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 deprecated as of POS 10.0.0.
    */
   type?: ButtonType;
   /**

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