TapArea: support to new dataTestId prop (#3179)

pinterest · Aug 31, 2023 · c67d15c · c67d15c
1 parent b38024b
commit c67d15c
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 13 deletions.
diff --git a/docs/pages/web/taparea.js b/docs/pages/web/taparea.js
@@ -82,6 +82,14 @@ export default function DocsPage({ generatedDocGen }: {| generatedDocGen: DocGen
               'TapArea is a wrapper around non-button components (or children) that provides clicking / touching functionality as if they were a unified button area.',
             href: 'basic-taparea',
           },
+          {
+            name: 'dataTestId',
+            type: 'string',
+            required: false,
+            description: [
+              'Available for testing purposes, if needed. Consider [better queries](https://testing-library.com/docs/queries/about/#priority) before using this prop.',
+            ],
+          },
           {
             name: 'disabled',
             type: 'boolean',

diff --git a/packages/gestalt/dist/index.d.ts b/packages/gestalt/dist/index.d.ts
@@ -1339,7 +1339,12 @@ interface OverlayPanelDismissingElementProps {
 interface PageHeaderAction {
   component:
     | React.ReactElement<
-        typeof Button | typeof ButtonLink | typeof IconButton | typeof Link | typeof Tooltip | typeof Text
+        | typeof Button
+        | typeof ButtonLink
+        | typeof IconButton
+        | typeof Link
+        | typeof Tooltip
+        | typeof Text
       >
     | undefined;
   dropdownItems:
@@ -1642,7 +1647,7 @@ interface SideNavigationTopItemProps {
   notificationAccessibilityLabel?: string | undefined;
   onClick?: ButtonEventHandlerType | undefined;
   primaryAction?: PrimaryActionType | undefined;
-  ref?: HTMLLIElement,
+  ref?: HTMLLIElement;
 }
 
 interface SideNavigationNestedItemProps {
@@ -1651,7 +1656,7 @@ interface SideNavigationNestedItemProps {
   active?: 'page' | 'section' | undefined;
   counter?: { number: string; accessibilityLabel: string } | undefined;
   onClick?: ButtonEventHandlerType | undefined;
-  ref?: HTMLLIElement,
+  ref?: HTMLLIElement;
 }
 
 interface SideNavigationGroupProps {
@@ -1898,6 +1903,7 @@ interface TagDataProps {
 interface CommonTapAreaProps {
   accessibilityLabel?: string | undefined;
   children: Node;
+  dataTestId?: string;
   disabled?: boolean | undefined;
   fullHeight?: boolean | undefined;
   fullWidth?: boolean | undefined;
@@ -2611,29 +2617,29 @@ export interface TableSubComponents {
  */
 export const Table: React.FunctionComponent<TableProps> & TableSubComponents;
 
-
 interface TableOfContentsItemProps {
-  label: string,
-  href: string,
-  active?: boolean,
-  onClick?: TapAreaEventHandlerType,
-  children?: Node,
+  label: string;
+  href: string;
+  active?: boolean;
+  onClick?: TapAreaEventHandlerType;
+  children?: Node;
 }
 
 /**
  * https://gestalt.pinterest.systems/web/tableofcontents
  */
 export interface TableOfContentsProps {
-  accessibilityLabel?: string,
-  title?: string,
-  children: Node
+  accessibilityLabel?: string;
+  title?: string;
+  children: Node;
 }
 
 export interface TableOfContentsSubComponents {
   Item: React.FunctionComponent<React.PropsWithChildren<TableOfContentsItemProps>>;
 }
 
-export const TableOfContents: React.FunctionComponent<TableOfContentsProps> & TableOfContentsSubComponents;
+export const TableOfContents: React.FunctionComponent<TableOfContentsProps> &
+  TableOfContentsSubComponents;
 
 /**
  * https://gestalt.pinterest.systems/web/tabs

diff --git a/packages/gestalt/src/TapArea.js b/packages/gestalt/src/TapArea.js
@@ -36,6 +36,7 @@ export type OnTapType = ({|
 type BaseTapArea = {|
   accessibilityLabel?: string,
   children?: Node,
+  dataTestId?: string,
   disabled?: boolean,
   fullHeight?: boolean,
   fullWidth?: boolean,
@@ -88,6 +89,7 @@ const TapAreaWithForwardRef: AbstractComponent<unionProps, unionRefs> = forwardR
   const {
     accessibilityLabel,
     children,
+    dataTestId,
     disabled = false,
     fullHeight,
     fullWidth = true,
@@ -236,6 +238,7 @@ const TapAreaWithForwardRef: AbstractComponent<unionProps, unionRefs> = forwardR
       <InternalLink
         accessibilityCurrent={accessibilityCurrent}
         accessibilityLabel={ariaLabel}
+        dataTestId={dataTestId}
         disabled={disabled}
         href={href}
         fullHeight={fullHeight}
@@ -278,6 +281,7 @@ const TapAreaWithForwardRef: AbstractComponent<unionProps, unionRefs> = forwardR
       aria-expanded={accessibilityExpanded}
       aria-haspopup={accessibilityHaspopup}
       aria-label={accessibilityLabel}
+      data-test-id={dataTestId}
       className={buttonRoleClasses}
       onClick={handleClick}
       onBlur={(event) => {