feat(Popover): add isTabTip prop to Popover

e2e/components/Popover/Popover-test.e2e.js

@@ -0,0 +1,45 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const { expect, test } = require('@playwright/test');
+const { themes } = require('../../test-utils/env');
+const { snapshotStory, visitStory } = require('../../test-utils/storybook');
+
+test.describe('Popover', () => {
+  themes.forEach((theme) => {
+    test.describe(theme, () => {
+      test('Popover - auto align @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'Popover',
+          id: 'components-popover--auto-align',
+          theme,
+        });
+      });
+
+      test('Popover - isTabTip @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'Popover',
+          id: 'components-popover--tab-tip',
+          theme,
+        });
+      });
+    });
+  });
+
+  test('accessibility-checker @avt', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Popover',
+      id: 'components-popover--auto-align',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Popover');
+  });
+});

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -5669,6 +5669,9 @@ Map {
       "highContrast": Object {
         "type": "bool",
       },
+      "isTabTip": Object {
+        "type": "bool",
+      },
       "open": Object {
         "isRequired": true,
         "type": "bool",

packages/react/src/components/Popover/Popover.stories.js

@@ -6,10 +6,17 @@
  */
 
 import './story.scss';
-import { Checkbox } from '@carbon/icons-react';
+import { Checkbox as CheckboxIcon } from '@carbon/icons-react';
 import React, { useState } from 'react';
 import { Popover, PopoverContent } from '../Popover';
+import RadioButton from '../RadioButton';
+import RadioButtonGroup from '../RadioButtonGroup';
+import { default as Checkbox } from '../Checkbox';
 import mdx from './Popover.mdx';
+import { Settings } from '@carbon/icons-react';
+import { keys, match } from '../../internal/keyboard';
+
+const prefix = 'cds';
 
 export default {
   title: 'Components/Popover',
@@ -59,7 +66,7 @@ const PlaygroundStory = (props) => {
       highContrast={highContrast}
       open={open}>
       <div className="playground-trigger">
-        <Checkbox />
+        <CheckboxIcon />
       </div>
       <PopoverContent className="p-3">
         <p className="popover-title">Available storage</p>
@@ -71,6 +78,85 @@ const PlaygroundStory = (props) => {
   );
 };
 
+export const TabTip = () => {
+  const [open, setOpen] = useState(true);
+  const [openTwo, setOpenTwo] = useState(false);
+  return (
+    <div className="popover-tabtip-story" style={{ display: 'flex' }}>
+      <Popover
+        open={open}
+        onKeyDown={(evt) => {
+          if (match(evt, keys.Escape)) {
+            setOpen(false);
+          }
+        }}
+        isTabTip>
+        <button
+          aria-label="Settings"
+          type="button"
+          onClick={() => {
+            setOpen(!open);
+          }}>
+          <Settings />
+        </button>
+        <PopoverContent className="p-3">
+          <RadioButtonGroup
+            style={{ alignItems: 'flex-start', flexDirection: 'column' }}
+            legendText="Row height"
+            name="radio-button-group"
+            defaultSelected="small">
+            <RadioButton labelText="Small" value="small" id="radio-small" />
+            <RadioButton labelText="Large" value="large" id="radio-large" />
+          </RadioButtonGroup>
+          <hr />
+          <fieldset className={`${prefix}--fieldset`}>
+            <legend className={`${prefix}--label`}>Edit columns</legend>
+            <Checkbox defaultChecked labelText="Name" id="checkbox-label-1" />
+            <Checkbox defaultChecked labelText="Type" id="checkbox-label-2" />
+            <Checkbox
+              defaultChecked
+              labelText="Location"
+              id="checkbox-label-3"
+            />
+          </fieldset>
+        </PopoverContent>
+      </Popover>
+
+      <Popover open={openTwo} isTabTip align="bottom-right">
+        <button
+          aria-label="Settings"
+          type="button"
+          onClick={() => {
+            setOpenTwo(!openTwo);
+          }}>
+          <Settings />
+        </button>
+        <PopoverContent className="p-3">
+          <RadioButtonGroup
+            style={{ alignItems: 'flex-start', flexDirection: 'column' }}
+            legendText="Row height"
+            name="radio-button-group-2"
+            defaultSelected="small-2">
+            <RadioButton labelText="Small" value="small-2" id="radio-small-2" />
+            <RadioButton labelText="Large" value="large-2" id="radio-large-2" />
+          </RadioButtonGroup>
+          <hr />
+          <fieldset className={`${prefix}--fieldset`}>
+            <legend className={`${prefix}--label`}>Edit columns</legend>
+            <Checkbox defaultChecked labelText="Name" id="checkbox-label-8" />
+            <Checkbox defaultChecked labelText="Type" id="checkbox-label-9" />
+            <Checkbox
+              defaultChecked
+              labelText="Location"
+              id="checkbox-label-10"
+            />
+          </fieldset>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+};
+
 export const Playground = PlaygroundStory.bind({});
 
 Playground.argTypes = {
@@ -141,7 +227,7 @@ export const AutoAlign = () => {
         }}>
         <Popover open={open} autoAlign>
           <div className="playground-trigger">
-            <Checkbox
+            <CheckboxIcon
               onClick={() => {
                 setOpen(!open);
               }}
@@ -157,7 +243,7 @@ export const AutoAlign = () => {
       </div>
       <Popover open autoAlign>
         <div className="playground-trigger">
-          <Checkbox />
+          <CheckboxIcon />
         </div>
         <PopoverContent className="p-3">
           <p className="popover-title">Available storage</p>
@@ -169,7 +255,7 @@ export const AutoAlign = () => {
       <div style={{ position: 'absolute', top: 0, right: 0, margin: '3rem' }}>
         <Popover open autoAlign>
           <div className="playground-trigger">
-            <Checkbox />
+            <CheckboxIcon />
           </div>
           <PopoverContent className="p-3">
             <p className="popover-title">Available storage</p>
@@ -183,7 +269,7 @@ export const AutoAlign = () => {
         style={{ position: 'absolute', bottom: 0, right: 0, margin: '3rem' }}>
         <Popover open autoAlign>
           <div className="playground-trigger">
-            <Checkbox />
+            <CheckboxIcon />
           </div>
           <PopoverContent className="p-3">
             <p className="popover-title">Available storage</p>
@@ -196,7 +282,7 @@ export const AutoAlign = () => {
       <div style={{ position: 'absolute', bottom: 0, left: 0, margin: '3rem' }}>
         <Popover open autoAlign>
           <div className="playground-trigger">
-            <Checkbox />
+            <CheckboxIcon />
           </div>
           <PopoverContent className="p-3">
             <p className="popover-title">Available storage</p>

packages/react/src/components/Popover/__tests__/Popover-test.js

@@ -9,6 +9,8 @@ import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { Popover, PopoverContent } from '../../Popover';
 
+const prefix = 'cds';
+
 describe('Popover', () => {
   it('should support a ref on the outermost element', () => {
     const ref = jest.fn();
@@ -75,5 +77,31 @@ describe('Popover', () => {
       );
       expect(container.firstChild).toHaveAttribute('id', 'test');
     });
+
+    // Tab Tip tests
+    it('should respect isTabTip prop', () => {
+      const { container } = render(
+        <Popover open isTabTip>
+          <button type="button">Settings</button>
+          <PopoverContent>test</PopoverContent>
+        </Popover>
+      );
+      expect(container.firstChild).toHaveClass(`${prefix}--popover--tab-tip`);
+    });
+
+    it('should not allow other alignments than bottom-left or bottom-right when isTabTip is present', () => {
+      const { container } = render(
+        <Popover open isTabTip align="top-left">
+          <button type="button">Settings</button>
+          <PopoverContent data-testid="test">test</PopoverContent>
+        </Popover>
+      );
+      expect(container.firstChild).not.toHaveClass(
+        `${prefix}--popover--top-left`
+      );
+      expect(container.firstChild).toHaveClass(
+        `${prefix}--popover--bottom-left`
+      );
+    });
   });
 });

packages/react/src/components/Popover/index.tsx

@@ -44,7 +44,7 @@ interface PopoverBaseProps {
   align?: PopoverAlignment;
 
   /**
-   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to futurue changes.
+   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
    */
   autoAlign?: boolean;
 
@@ -74,6 +74,11 @@ interface PopoverBaseProps {
    */
   highContrast?: boolean;
 
+  /**
+   * Render the component using the tab tip variant
+   */
+  isTabTip?: boolean;
+
   /**
    * Specify whether the component is currently open or closed
    */
@@ -88,10 +93,11 @@ export type PopoverProps<T extends React.ElementType> = PolymorphicProps<
 const Popover = React.forwardRef(
   <T extends React.ElementType>(
     {
-      align = 'bottom',
+      isTabTip,
+      align = isTabTip ? 'bottom-left' : 'bottom',
       as,
       autoAlign = false,
-      caret = true,
+      caret = isTabTip ? false : true,
       className: customClassName,
       children,
       dropShadow = true,
@@ -111,6 +117,17 @@ const Popover = React.forwardRef(
       };
     }, []);
 
+    if (isTabTip) {
+      const tabTipAlignments: PopoverAlignment[] = [
+        'bottom-left',
+        'bottom-right',
+      ];
+
+      if (!tabTipAlignments.includes(align)) {
+        align = 'bottom-left';
+      }
+    }
+
     const ref = useMergedRefs([forwardRef, popover]);
     const [autoAligned, setAutoAligned] = useState(false);
     const [autoAlignment, setAutoAlignment] = useState(align);
@@ -121,8 +138,9 @@ const Popover = React.forwardRef(
         [`${prefix}--popover--drop-shadow`]: dropShadow,
         [`${prefix}--popover--high-contrast`]: highContrast,
         [`${prefix}--popover--open`]: open,
-        [`${prefix}--popover--${autoAlignment}`]: autoAligned,
+        [`${prefix}--popover--${autoAlignment}`]: autoAligned && !isTabTip,
         [`${prefix}--popover--${align}`]: !autoAligned,
+        [`${prefix}--popover--tab-tip`]: isTabTip,
       },
       customClassName
     );
@@ -132,7 +150,7 @@ const Popover = React.forwardRef(
         return;
       }
 
-      if (!autoAlign) {
+      if (!autoAlign || isTabTip) {
         setAutoAligned(false);
         return;
       }
@@ -251,13 +269,31 @@ const Popover = React.forwardRef(
         setAutoAligned(true);
         setAutoAlignment(alignment);
       }
-    }, [autoAligned, align, autoAlign, prefix, open]);
+    }, [autoAligned, align, autoAlign, prefix, open, isTabTip]);
 
     const BaseComponent: React.ElementType<any> = as ?? 'span';
+
+    const mappedChildren = React.Children.map(children, (child) => {
+      const item = child as any;
+
+      if (item?.type === 'button') {
+        const { className } = item.props;
+        const tabTipClasses = cx(
+          `${prefix}--popover--tab-tip__button`,
+          className
+        );
+        return React.cloneElement(item, {
+          className: tabTipClasses,
+        });
+      } else {
+        return item;
+      }
+    });
+
     return (
       <PopoverContext.Provider value={value}>
         <BaseComponent {...rest} className={className} ref={ref}>
-          {children}
+          {isTabTip ? mappedChildren : children}
         </BaseComponent>
       </PopoverContext.Provider>
     );
@@ -299,7 +335,7 @@ Popover.propTypes = {
   as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
 
   /**
-   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to futurue changes.
+   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
    */
   autoAlign: PropTypes.bool,
 
@@ -329,6 +365,11 @@ Popover.propTypes = {
    */
   highContrast: PropTypes.bool,
 
+  /**
+   * Render the component using the tab tip variant
+   */
+  isTabTip: PropTypes.bool,
+
   /**
    * Specify whether the component is currently open or closed
    */