From ae6b7a35426f1230bc2f011184b44ce9fa8ade73 Mon Sep 17 00:00:00 2001
From: Xin00163 <wangxin00163@yahoo.co.uk>
Date: Mon, 23 May 2022 22:01:37 +0100
Subject: [PATCH] fix(PPDSC-2117): address reviews

---
 src/button/types.ts                                |  2 +-
 src/icon-button/types.ts                           |  2 +-
 .../__tests__/__snapshots__/tooltip.test.tsx.snap  | 14 ++++++++------
 src/tooltip/__tests__/tooltip.stories.tsx          |  1 -
 src/tooltip/__tests__/tooltip.test.tsx             |  2 +-
 src/tooltip/styled.tsx                             |  3 ++-
 src/tooltip/tooltip.tsx                            |  6 +++---
 7 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/button/types.ts b/src/button/types.ts
index ff9e01e456..cc749f468b 100644
--- a/src/button/types.ts
+++ b/src/button/types.ts
@@ -34,4 +34,4 @@ export const isButtonLink = (
   props: ButtonOrButtonLinkProps,
 ): props is ButtonLinkProps => (props as ButtonLinkProps).href !== undefined;
 
-export type IconButtonProps = {'aria-label': string} & ButtonOrButtonLinkProps;
+export type IconButtonProps = {'aria-label'?: string} & ButtonOrButtonLinkProps;
diff --git a/src/icon-button/types.ts b/src/icon-button/types.ts
index efb115cd44..d896ceb615 100644
--- a/src/icon-button/types.ts
+++ b/src/icon-button/types.ts
@@ -1,5 +1,5 @@
 import {ButtonProps} from '../button';
 
 export interface IconButtonProps extends ButtonProps {
-  'aria-label': string;
+  'aria-label'?: string;
 }
diff --git a/src/tooltip/__tests__/__snapshots__/tooltip.test.tsx.snap b/src/tooltip/__tests__/__snapshots__/tooltip.test.tsx.snap
index cd85821e33..90f5b02ee9 100644
--- a/src/tooltip/__tests__/__snapshots__/tooltip.test.tsx.snap
+++ b/src/tooltip/__tests__/__snapshots__/tooltip.test.tsx.snap
@@ -9,6 +9,7 @@ exports[`Tooltip should render correct styles: default 1`] = `
     Add
   </button>
   .emotion-0 {
+  margin: 0;
   pointer-events: none;
   z-index: 80;
   background-color: #0A0A0A;
@@ -23,16 +24,15 @@ exports[`Tooltip should render correct styles: default 1`] = `
   padding-block: 8px;
 }
 
-<div
+<p
     class="Tooltip emotion-0"
-    data-testid="tooltip"
     id="floating-ui-2"
     role="tooltip"
     style="position: absolute;"
     tabindex="-1"
   >
     hello
-  </div>
+  </p>
 </DocumentFragment>
 `;
 
@@ -45,6 +45,9 @@ exports[`Tooltip should render correct styles: with overrides 1`] = `
     Add
   </button>
   .emotion-0 {
+  margin: 0;
+  padding-inline: 8px;
+  padding-block: 16px;
   pointer-events: none;
   z-index: 70;
   max-width: 80px;
@@ -61,15 +64,14 @@ exports[`Tooltip should render correct styles: with overrides 1`] = `
   padding-block: 16px;
 }
 
-<div
+<p
     class="Tooltip emotion-0"
-    data-testid="tooltip"
     id="floating-ui-11"
     role="tooltip"
     style="position: absolute;"
     tabindex="-1"
   >
     hello
-  </div>
+  </p>
 </DocumentFragment>
 `;
diff --git a/src/tooltip/__tests__/tooltip.stories.tsx b/src/tooltip/__tests__/tooltip.stories.tsx
index 419534c3a6..ae7b5a7ebc 100644
--- a/src/tooltip/__tests__/tooltip.stories.tsx
+++ b/src/tooltip/__tests__/tooltip.stories.tsx
@@ -52,7 +52,6 @@ export const StoryTooltip = () => (
       <IconButton
         size={ButtonSize.Small}
         overrides={{stylePreset: 'iconButtonOutlinedPrimary'}}
-        aria-label="share on twitter"
       >
         <IconFilledTwitter />
       </IconButton>
diff --git a/src/tooltip/__tests__/tooltip.test.tsx b/src/tooltip/__tests__/tooltip.test.tsx
index cc7a6fa0e2..e70b8e59f7 100644
--- a/src/tooltip/__tests__/tooltip.test.tsx
+++ b/src/tooltip/__tests__/tooltip.test.tsx
@@ -170,7 +170,7 @@ describe('Tooltip', () => {
       fireEvent.mouseLeave(button);
       expect(button.hasAttribute('aria-describedby')).toBe(false);
     });
-    test('can describe the exotic child when open and remove aria attribute when closed', () => {
+    test('can render with exotic title when open and remove aria attribute when closed', () => {
       const {getByRole} = renderWithTheme(Tooltip, {
         children: <button type="submit">Add</button>,
         title: <div>the title</div>,
diff --git a/src/tooltip/styled.tsx b/src/tooltip/styled.tsx
index b7ed206e01..c5e334442b 100644
--- a/src/tooltip/styled.tsx
+++ b/src/tooltip/styled.tsx
@@ -7,8 +7,9 @@ import {
   getResponsiveSize,
 } from '../utils/style';
 import {logicalProps} from '../utils/logical-properties';
+import {TextBlock} from '../text-block';
 
-export const StyledTooltip = styled.div<Pick<TooltipProps, 'overrides'>>`
+export const StyledTooltip = styled(TextBlock)<Pick<TooltipProps, 'overrides'>>`
   pointer-events: none;
   ${getResponsiveSpace('zIndex', 'tooltip', '', 'zIndex')};
   ${getResponsiveSize('maxWidth', 'tooltip', '', 'maxWidth')};
diff --git a/src/tooltip/tooltip.tsx b/src/tooltip/tooltip.tsx
index 60ab30a62e..cc7a1c4802 100644
--- a/src/tooltip/tooltip.tsx
+++ b/src/tooltip/tooltip.tsx
@@ -28,7 +28,7 @@ const ThemelessTooltip: React.FC<TooltipProps> = ({
   overrides,
   ...props
 }) => {
-  const [open, setOpenState] = useControlled({
+  const [open, setOpen] = useControlled({
     controlledValue: openProp,
     defaultValue: Boolean(defaultOpen),
   });
@@ -36,7 +36,7 @@ const ThemelessTooltip: React.FC<TooltipProps> = ({
   const {x, y, reference, floating, strategy, context} = useFloating({
     placement,
     open,
-    onOpenChange: setOpenState,
+    onOpenChange: setOpen,
     whileElementsMounted: autoUpdate,
   });
 
@@ -84,6 +84,7 @@ const ThemelessTooltip: React.FC<TooltipProps> = ({
       )}
       {open && (
         <StyledTooltip
+          as={['string', 'number'].includes(typeof title) ? 'p' : 'div'}
           {...getFloatingProps({
             ref: floating,
             id,
@@ -94,7 +95,6 @@ const ThemelessTooltip: React.FC<TooltipProps> = ({
               left: x ?? '',
             },
           })}
-          data-testid="tooltip"
           overrides={overrides}
           {...props}
         >