From da091aa4082eef0b36b444af6df348c885cb5ede Mon Sep 17 00:00:00 2001
From: czgu <cgu@pinterest.com>
Date: Mon, 14 Dec 2020 14:31:44 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=96=20Merge=20PR=20#50117=20[gestalt]:?=
 =?UTF-8?q?=20Update=20gestalt=20definition=20to=20be=20in=20sync=20with?=
 =?UTF-8?q?=2015.8=20by=20@czgu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 types/gestalt/gestalt-tests.tsx | 11 ++++--
 types/gestalt/index.d.ts        | 63 +++++++++++++++++++++++++++++++--
 2 files changed, 70 insertions(+), 4 deletions(-)

diff --git a/types/gestalt/gestalt-tests.tsx b/types/gestalt/gestalt-tests.tsx
index b3e40d7213..ffc02717f7 100644
--- a/types/gestalt/gestalt-tests.tsx
+++ b/types/gestalt/gestalt-tests.tsx
@@ -45,6 +45,7 @@ import {
     Switch,
     Table,
     Tabs,
+    Tag,
     TapArea,
     Text,
     TextArea,
@@ -253,9 +254,10 @@ const CheckUseReducedMotion = () => {
     activeTabIndex={1}
     onChange={() => {}}
 />;
+<Tag disabled text="New" />;
 <Text />;
 <TextArea id="id" onChange={() => {}} />;
-<TextField id="email" onChange={({ value }) => value} />;
+<TextField id="email" onChange={({ value }) => value} tags={[<Tag text="Foo" />, <Tag text="Bar" />]} />;
 <GroupAvatar collaborators={[{ name: 'nicolas' }]} />;
 <Toast color="red" text={<>Oops! Something went wrong. Please try again later.</>} />;
 <Tooltip text="tooltip">
@@ -268,7 +270,12 @@ const CheckUseReducedMotion = () => {
     options={[{ value: 'Hello', label: 'World' }]}
     placeholder="Select a Label"
 />;
-<Upsell message="Hello world" />;
+<Upsell
+    message="Hello world"
+    imageData={{
+        component: <Icon icon="pinterest" accessibilityLabel="Pin" color="darkGray" size={32} />,
+    }}
+/>;
 <Video
     aspectRatio={853 / 480}
     captions=""
diff --git a/types/gestalt/index.d.ts b/types/gestalt/index.d.ts
index 139667d391..d0d92ecca9 100644
--- a/types/gestalt/index.d.ts
+++ b/types/gestalt/index.d.ts
@@ -1,4 +1,4 @@
-// Type definitions for gestalt 14.28
+// Type definitions for gestalt 15.8
 // Project: https://github.com/pinterest/gestalt, https://pinterest.github.io/gestalt
 // Definitions by: Nicolás Serrano Arévalo <https://github.com/serranoarevalo>
 //                 Josh Gachnang <https://github.com/joshgachnang>
@@ -1050,6 +1050,38 @@ export interface TabsProps {
     wrap?: boolean;
 }
 
+/**
+ * Tag Props Interface
+ * https://gestalt.netlify.app/Tag
+ */
+export interface TagProps {
+    /**
+     * Short text to render inside the tag.
+     */
+    text: string;
+    /**
+     * Set a disabled state so the tag looks inactive and cannot be interacted with.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Set an error state on the tag. The message is used as an accessibility label for the error icon.
+     * Keep it short so it doesn't overwhelm the user.
+     */
+    errorMessage?: string;
+    /**
+     * Callback fired when the tag is removed. Should handle state updates to stop rendering the component.
+     * Required unless the tag is in a disabled state.
+     */
+    onRemove?: AbstractEventHandler<React.MouseEvent<HTMLButtonElement>>;
+    /**
+     * Accessibility label for the icon button to remove the tag, ideally something like "Remove [Tag Name] Tag".
+     * Required unless the tag is in a disabled state.
+     */
+    removeIconAccessibilityLabel?: string;
+}
+
 /**
  * TabArea Props Interface
  * https://gestalt.netlify.app/TapArea
@@ -1144,8 +1176,14 @@ export interface TextFieldProps {
     id: string;
     onChange: (args: { event: React.SyntheticEvent<HTMLInputElement>; value: string }) => void;
     autoComplete?: 'current-password' | 'on' | 'off' | 'username' | 'new-password';
+    /**
+     * @default false
+     */
     disabled?: boolean;
     errorMessage?: string;
+    /**
+     * More information about how to complete the form field
+     */
     helperText?: string;
     label?: string;
     name?: string;
@@ -1153,7 +1191,19 @@ export interface TextFieldProps {
     onFocus?: (args: { event: React.SyntheticEvent<React.FocusEvent<HTMLInputElement>>; value: string }) => void;
     onKeyDown?: (args: { event: React.SyntheticEvent<React.KeyboardEvent<HTMLInputElement>>; value: string }) => void;
     placeholder?: string;
+    /**
+     * md: 40px, lg: 48px
+     *
+     * @default "md"
+     */
     size?: 'md' | 'lg';
+    /**
+     * List of tags to display in the component
+     */
+    tags?: ReadonlyArray<React.ReactElement<TagProps, typeof Tag>>;
+    /**
+     * @default "text"
+     */
     type?: 'date' | 'email' | 'number' | 'password' | 'text' | 'url';
     value?: string;
 }
@@ -1221,11 +1271,19 @@ export interface TypeaheadProps {
  * https://gestalt.netlify.app/Upsell
  */
 export interface UpsellProps {
+    message: string;
     dismissButton?: {
         accessibilityLabel: string;
         onDismiss: () => void;
     };
-    message: string;
+    imageData?: {
+        component: React.ReactElement<any, typeof Image | typeof Icon>;
+        width?: number;
+        mask?: {
+            rounding: 'circle' | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+            wash: boolean;
+        };
+    };
     primaryLink?: LinkData;
     secondaryLink?: LinkData;
     title?: string;
@@ -1351,6 +1409,7 @@ export class Table extends React.Component<TableProps, any> {
     static SortableHeaderCell: React.FC<TableSortableHeaderCellProps>;
 }
 export class Tabs extends React.Component<TabsProps, any> {}
+export class Tag extends React.Component<TagProps, any> {}
 export const TapArea: ReactForwardRef<HTMLButtonElement | HTMLAnchorElement, TapAreaProps>;
 export class Text extends React.Component<TextProps, any> {}
 export const TextArea: ReactForwardRef<HTMLTextAreaElement, TextAreaProps>;