fix(PPDSC-2117): address reviews

newscorp-ghfb · May 23, 2022 · ae6b7a3 · ae6b7a3
1 parent 1b6a28b
commit ae6b7a3
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -28,15 +28,15 @@ const ThemelessTooltip: React.FC<TooltipProps> = ({
   overrides,
   ...props
 }) => {
-  const [open, setOpenState] = useControlled({
+  const [open, setOpen] = useControlled({
     controlledValue: openProp,
     defaultValue: Boolean(defaultOpen),
   });
 
   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}
         >