fix(PPDSC-2117): address comments

newscorp-ghfb · May 20, 2022 · 718a2ee · 718a2ee
1 parent 6fddbfd
commit 718a2ee
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 71 deletions.
diff --git a/src/theme/__tests__/__snapshots__/theme.test.ts.snap b/src/theme/__tests__/__snapshots__/theme.test.ts.snap
@@ -2473,12 +2473,10 @@ Object {
     "stylePreset": "toastNeutral",
   },
   "tooltip": Object {
-    "panel": Object {
-      "paddingBlock": "spaceInset020",
-      "paddingInline": "spaceInset020",
-      "stylePreset": "tooltipPanel",
-      "typographyPreset": "utilityLabel010",
-    },
+    "paddingBlock": "spaceInset020",
+    "paddingInline": "spaceInset020",
+    "stylePreset": "tooltip",
+    "typographyPreset": "utilityLabel010",
     "zIndex": 80,
   },
   "unorderedList": Object {
@@ -4631,7 +4629,7 @@ Object {
       "iconColor": "{{colors.inkInverse}}",
     },
   },
-  "tooltipPanel": Object {
+  "tooltip": Object {
     "base": Object {
       "backgroundColor": "{{colors.interface060}}",
       "borderRadius": "{{borders.borderRadiusDefault}}",

diff --git a/src/tooltip/__tests__/__snapshots__/tooltip.test.tsx.snap b/src/tooltip/__tests__/__snapshots__/tooltip.test.tsx.snap
@@ -11,9 +11,6 @@ exports[`Tooltip should render correct styles: default 1`] = `
   .emotion-0 {
   pointer-events: none;
   z-index: 80;
-}
-
-.emotion-1 {
   background-color: #0A0A0A;
   color: #FFFFFF;
   border-radius: 8px;
@@ -34,11 +31,7 @@ exports[`Tooltip should render correct styles: default 1`] = `
     style="position: absolute;"
     tabindex="-1"
   >
-    <div
-      class="emotion-1"
-    >
-      hello
-    </div>
+    hello
   </div>
 </DocumentFragment>
 `;
@@ -56,9 +49,6 @@ exports[`Tooltip should render correct styles: with overrides 1`] = `
   z-index: 70;
   max-width: 80px;
   min-width: 50px;
-}
-
-.emotion-1 {
   background-color: #EF1703;
   border-radius: 0;
   color: #0A0A0A;
@@ -79,11 +69,7 @@ exports[`Tooltip should render correct styles: with overrides 1`] = `
     style="position: absolute;"
     tabindex="-1"
   >
-    <div
-      class="emotion-1"
-    >
-      hello
-    </div>
+    hello
   </div>
 </DocumentFragment>
 `;
diff --git a/src/tooltip/__tests__/tooltip.stories.tsx b/src/tooltip/__tests__/tooltip.stories.tsx
@@ -23,7 +23,7 @@ const myCustomTheme = createTheme({
   name: 'my-custom-modal-theme',
   overrides: {
     stylePresets: {
-      tooltipPanelCustom: {
+      tooltipCustom: {
         base: {
           backgroundColor: '{{colors.red080}}',
           borderRadius: '{{borders.borderRadiusDefault}}',
@@ -273,7 +273,7 @@ export const StoryTooltipAccessibility = () => (
       </Button>
     </Tooltip>
     <StorybookSubHeading>Tooltip as a label</StorybookSubHeading>
-    <Tooltip title="Share" placement="right" labelTooltip>
+    <Tooltip title="Share" placement="right" asLabel>
       <IconButton
         size={ButtonSize.Small}
         overrides={{stylePreset: 'iconButtonMinimalSecondary'}}
@@ -300,13 +300,11 @@ export const StoryTooltipOverrides = () => (
         overrides={{
           minWidth: '50px',
           maxWidth: '80px',
-          zIndex: 80,
-          panel: {
-            paddingBlock: 'space040',
-            paddingInline: 'space020',
-            stylePreset: 'tooltipPanelCustom',
-            typographyPreset: 'utilityLabel020',
-          },
+          zIndex: 70,
+          paddingBlock: 'space040',
+          paddingInline: 'space020',
+          stylePreset: 'tooltipCustom',
+          typographyPreset: 'utilityLabel020',
         }}
       >
         <Button

diff --git a/src/tooltip/__tests__/tooltip.test.tsx b/src/tooltip/__tests__/tooltip.test.tsx
@@ -55,7 +55,7 @@ describe('Tooltip', () => {
         name: 'my-custom-tooltip-theme',
         overrides: {
           stylePresets: {
-            tooltipPanelCustom: {
+            tooltipCustom: {
               base: {
                 backgroundColor: '{{colors.red060}}',
                 borderRadius: '{{borders.borderRadiusSharp}}',
@@ -73,12 +73,10 @@ describe('Tooltip', () => {
             minWidth: '50px',
             maxWidth: '80px',
             zIndex: 70,
-            panel: {
-              paddingBlock: 'space040',
-              paddingInline: 'space020',
-              stylePreset: 'tooltipPanelCustom',
-              typographyPreset: 'utilityLabel020',
-            },
+            paddingBlock: 'space040',
+            paddingInline: 'space020',
+            stylePreset: 'tooltipCustom',
+            typographyPreset: 'utilityLabel020',
           },
         },
         myCustomTheme,
@@ -157,7 +155,7 @@ describe('Tooltip', () => {
     test('do not have role tooltip when used as a label', () => {
       const {queryByRole} = renderWithTheme(Tooltip, {
         ...defaultProps,
-        labelTooltip: true,
+        asLabel: true,
       });
       expect(queryByRole('tooltip')).not.toBeInTheDocument();
     });
@@ -188,7 +186,7 @@ describe('Tooltip', () => {
       const {getByRole} = renderWithTheme(Tooltip, {
         ...defaultProps,
         defaultOpen: false,
-        labelTooltip: true,
+        asLabel: true,
       });
       const button = getByRole('button');
       fireEvent.mouseEnter(button);
@@ -201,7 +199,7 @@ describe('Tooltip', () => {
         children: <button type="submit">Add</button>,
         title: <div>the title</div>,
         defaultOpen: false,
-        labelTooltip: true,
+        asLabel: true,
       });
       const button = getByRole('button');
       fireEvent.mouseEnter(button);

diff --git a/src/tooltip/defaults.ts b/src/tooltip/defaults.ts
@@ -1,11 +1,9 @@
 export default {
   tooltip: {
     zIndex: 80,
-    panel: {
-      paddingBlock: 'spaceInset020',
-      paddingInline: 'spaceInset020',
-      stylePreset: 'tooltipPanel',
-      typographyPreset: 'utilityLabel010',
-    },
+    paddingBlock: 'spaceInset020',
+    paddingInline: 'spaceInset020',
+    stylePreset: 'tooltip',
+    typographyPreset: 'utilityLabel010',
   },
 };
diff --git a/src/tooltip/style-presets.ts b/src/tooltip/style-presets.ts
@@ -1,7 +1,7 @@
 import {StylePreset} from '../theme/types';
 
 export default {
-  tooltipPanel: {
+  tooltip: {
     base: {
       backgroundColor: '{{colors.interface060}}',
       color: '{{colors.inkInverse}}',

diff --git a/src/tooltip/styled.tsx b/src/tooltip/styled.tsx
@@ -8,16 +8,12 @@ import {
 } from '../utils/style';
 import {logicalProps} from '../utils/logical-properties';
 
-export const StyledTooltipPanel = styled.div<Pick<TooltipProps, 'overrides'>>`
-  ${getStylePreset('tooltip.panel', 'panel')};
-  ${getTypographyPreset('tooltip.panel', 'panel')};
-  ${getResponsiveSpace('padding', 'tooltip.panel', 'panel', 'spaceInset')};
-  ${logicalProps('tooltip.panel', 'panel')}
-`;
-
 export const StyledTooltip = styled.div<Pick<TooltipProps, 'overrides'>>`
   pointer-events: none;
   ${getResponsiveSpace('zIndex', 'tooltip', '', 'zIndex')};
   ${getResponsiveSize('maxWidth', 'tooltip', '', 'maxWidth')};
   ${getResponsiveSize('minWidth', 'tooltip', '', 'minWidth')};
+  ${getStylePreset('tooltip', '')};
+  ${getTypographyPreset('tooltip', '')};
+  ${logicalProps('tooltip', '')}
 `;
diff --git a/src/tooltip/tooltip.tsx b/src/tooltip/tooltip.tsx
@@ -9,9 +9,10 @@ import {
   useDismiss,
   useId,
 } from '@floating-ui/react-dom-interactions';
+import composeRefs from '@seznam/compose-react-refs';
 import {TooltipProps} from './types';
 import {withOwnTheme} from '../utils/with-own-theme';
-import {StyledTooltip, StyledTooltipPanel} from './styled';
+import {StyledTooltip} from './styled';
 import defaults from './defaults';
 import stylePresets from './style-presets';
 import {useControlled} from '../utils/hooks';
@@ -23,7 +24,7 @@ const ThemelessTooltip: React.FC<TooltipProps> = ({
   trigger = 'hover',
   open: openProp,
   defaultOpen,
-  labelTooltip,
+  asLabel,
   overrides,
   ...props
 }) => {
@@ -44,7 +45,7 @@ const ThemelessTooltip: React.FC<TooltipProps> = ({
       enabled: trigger.includes('hover'),
     }),
     useFocus(context, {enabled: trigger.includes('focus')}),
-    useRole(context, {enabled: !labelTooltip, role: 'tooltip'}),
+    useRole(context, {enabled: !asLabel, role: 'tooltip'}),
     useDismiss(context),
   ]);
 
@@ -53,11 +54,11 @@ const ThemelessTooltip: React.FC<TooltipProps> = ({
   const id = useId();
 
   const labelOrDescProps = {} as {
-    'aria-labelledby': string | null;
-    'aria-describedby': string | null;
+    'aria-labelledby'?: string | null;
+    'aria-describedby'?: string | null;
   };
 
-  if (labelTooltip) {
+  if (asLabel) {
     labelOrDescProps['aria-labelledby'] = open ? id : null;
   } else {
     labelOrDescProps['aria-describedby'] = open ? id : null;
@@ -76,7 +77,10 @@ const ThemelessTooltip: React.FC<TooltipProps> = ({
     <>
       {React.cloneElement(
         children,
-        getReferenceProps({ref: reference, ...childrenProps}),
+        getReferenceProps({
+          ref: composeRefs(reference, children.ref),
+          ...childrenProps,
+        }),
       )}
       {open && (
         <StyledTooltip
@@ -94,7 +98,7 @@ const ThemelessTooltip: React.FC<TooltipProps> = ({
           overrides={overrides}
           {...props}
         >
-          <StyledTooltipPanel overrides={overrides}>{title}</StyledTooltipPanel>
+          {title}
         </StyledTooltip>
       )}
     </>

diff --git a/src/tooltip/types.ts b/src/tooltip/types.ts
@@ -7,20 +7,20 @@ export type TriggerType = 'hover' | 'focus';
 
 export interface TooltipProps
   extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'defaultValue'> {
-  children: React.ReactElement;
+  children: React.ReactElement & {
+    ref?: React.Ref<unknown>;
+  };
   title: React.ReactNode;
   open?: boolean;
   defaultOpen?: boolean;
   trigger?: TriggerType | TriggerType[];
   placement?: Placement;
-  labelTooltip?: boolean;
+  asLabel?: boolean;
   overrides?: {
     zIndex?: number;
     maxWidth?: MQ<string>;
     minWidth?: MQ<string>;
-    panel?: {
-      stylePreset?: MQ<string>;
-      typographyPreset?: MQ<string>;
-    } & LogicalPaddingProps;
-  };
+    stylePreset?: MQ<string>;
+    typographyPreset?: MQ<string>;
+  } & LogicalPaddingProps;
 }