feat(PPDSC-2117): tooltip panel and content (#204)

* fix(PPDSC-2117): wip

* feat(PPDSC-2117): add tooltip

* fix(PPDSC-2117): add forwardRef to iconButton and update tests

* fix(PPDSC-2117): add to index.ts

* fix(PPDSC-2117): address comments

* fix(PPDSC-2117): address comments

* fix(PPDSC-2117): address reviews

* fix(PPDSC-2117): a11y test

* fix(PPDSC-2117): naming and comment

* fix(PPDSC-2117): design feedback

package.json

@@ -195,6 +195,7 @@
     "@emotion-icons/material-outlined": "3.8.0",
     "@emotion/react": "^11.1.5",
     "@emotion/styled": "^11.1.5",
+    "@floating-ui/react-dom-interactions": "^0.6.0",
     "@seznam/compose-react-refs": "^1.0.5",
     "aria-hidden": "^1.1.3",
     "date-fns": "^2.6.0",

src/__tests__/__snapshots__/index.test.ts.snap

@@ -134,6 +134,7 @@ Array [
   "TitleBar",
   "Toast",
   "ToastProvider",
+  "Tooltip",
   "UnorderedList",
   "VideoPlayer",
   "Visible",

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;

src/icon-button/__tests__/icon-button.test.tsx

@@ -1,5 +1,9 @@
-import React from 'react';
-import {renderToFragmentWithTheme} from '../../test/test-utils';
+import React, {createRef} from 'react';
+import {act} from '@testing-library/react';
+import {
+  renderToFragmentWithTheme,
+  renderWithTheme,
+} from '../../test/test-utils';
 import {IconButton} from '..';
 import {ButtonSize, IconButtonProps} from '../../button';
 import {IconFilledEmail} from '../../icons';
@@ -74,6 +78,25 @@ describe('IconButton', () => {
     expect(fragment).toMatchSnapshot();
   });
 
+  test('focus can be triggered with ref', async () => {
+    const iconButtonRef = createRef<HTMLButtonElement>();
+
+    const props = {
+      ref: iconButtonRef,
+      'aria-label': 'Test icon button',
+      children: <IconFilledEmail />,
+    };
+
+    renderWithTheme(IconButton, props);
+
+    await act(async () => {
+      if (iconButtonRef && iconButtonRef.current) {
+        iconButtonRef.current.focus();
+      }
+    });
+    expect(iconButtonRef.current).toHaveFocus();
+  });
+
   test('renders icon button with logical prop overrides', () => {
     const props: IconButtonProps = {
       'aria-label': 'Test icon button',

src/icon-button/icon-button.tsx

@@ -6,7 +6,10 @@ import defaults from './defaults';
 import stylePresets from './style-presets';
 import {withOwnTheme} from '../utils/with-own-theme';
 
-const ThemelessIconButton = ({overrides = {}, ...props}: IconButtonProps) => {
+const ThemelessIconButton = React.forwardRef<
+  HTMLButtonElement | HTMLAnchorElement,
+  IconButtonProps
+>(({overrides = {}, ...props}, ref) => {
   const theme = useTheme();
   const {size = ButtonSize.Small} = props;
 
@@ -15,8 +18,10 @@ const ThemelessIconButton = ({overrides = {}, ...props}: IconButtonProps) => {
     ...filterOutFalsyProperties(overrides),
   };
 
-  return <Button {...props} size={size} overrides={iconButtonSettings} />;
-};
+  return (
+    <Button {...props} size={size} ref={ref} overrides={iconButtonSettings} />
+  );
+});
 
 export const IconButton: React.FC<IconButtonProps> = withOwnTheme(
   ThemelessIconButton,

src/icon-button/types.ts

@@ -1,5 +1,5 @@
 import {ButtonProps} from '../button';
 
 export interface IconButtonProps extends ButtonProps {
-  'aria-label': string;
+  'aria-label'?: string;
 }

src/index.ts

@@ -52,6 +52,7 @@ export * from './theme';
 export * from './theme-checker';
 export * from './title-bar';
 export * from './toast';
+export * from './tooltip';
 export * from './typography';
 export * from './unordered-list';
 export * from './utils/hooks/use-media-query';

src/theme/__tests__/__snapshots__/theme.test.ts.snap

@@ -2596,6 +2596,13 @@ Object {
     "spaceInset": "spaceInset030",
     "stylePreset": "toastNeutral",
   },
+  "tooltip": Object {
+    "paddingBlock": "spaceInset020",
+    "paddingInline": "spaceInset020",
+    "stylePreset": "tooltip",
+    "typographyPreset": "utilityLabel010",
+    "zIndex": 80,
+  },
   "unorderedList": Object {
     "content": Object {
       "stylePreset": "inkBase",
@@ -4773,6 +4780,13 @@ Object {
       "iconColor": "{{colors.inkInverse}}",
     },
   },
+  "tooltip": Object {
+    "base": Object {
+      "backgroundColor": "{{colors.interface060}}",
+      "borderRadius": "{{borders.borderRadiusDefault}}",
+      "color": "{{colors.inkInverse}}",
+    },
+  },
   "videoPlayerControlBar": Object {
     "base": Object {
       "backgroundColor": "{{colors.blackTint050}}",

src/tooltip/__tests__/__snapshots__/tooltip.test.tsx.snap

@@ -0,0 +1,77 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tooltip should render correct styles: default 1`] = `
+<DocumentFragment>
+  <button
+    aria-describedby="floating-ui-2"
+    type="submit"
+  >
+    Add
+  </button>
+  .emotion-0 {
+  margin: 0;
+  pointer-events: none;
+  z-index: 80;
+  background-color: #0A0A0A;
+  color: #FFFFFF;
+  border-radius: 8px;
+  font-family: "Poppins",sans-serif;
+  font-size: 12px;
+  line-height: 1.5;
+  font-weight: 500;
+  letter-spacing: 0;
+  padding-inline: 8px;
+  padding-block: 8px;
+}
+
+<p
+    class="Tooltip emotion-0"
+    id="floating-ui-2"
+    role="tooltip"
+    style="position: absolute;"
+    tabindex="-1"
+  >
+    hello
+  </p>
+</DocumentFragment>
+`;
+
+exports[`Tooltip should render correct styles: with overrides 1`] = `
+<DocumentFragment>
+  <button
+    aria-describedby="floating-ui-11"
+    type="submit"
+  >
+    Add
+  </button>
+  .emotion-0 {
+  margin: 0;
+  padding-inline: 8px;
+  padding-block: 16px;
+  pointer-events: none;
+  z-index: 70;
+  max-width: 80px;
+  min-width: 50px;
+  background-color: #EF1703;
+  border-radius: 0;
+  color: #0A0A0A;
+  font-family: "Poppins",sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  font-weight: 500;
+  letter-spacing: 0;
+  padding-inline: 8px;
+  padding-block: 16px;
+}
+
+<p
+    class="Tooltip emotion-0"
+    id="floating-ui-11"
+    role="tooltip"
+    style="position: absolute;"
+    tabindex="-1"
+  >
+    hello
+  </p>
+</DocumentFragment>
+`;