Merge pull request #446 from mashmatrix/add/optional-tooltip-prop-to-tabs

Add optional tooltip prop to Tabs component

Author: stomita

src/scripts/AutoAlign.tsx

@@ -168,6 +168,8 @@ export type AutoAlignProps = {
   preventPortalize?: boolean;
   align?: Align;
   alignment?: RectangleAlignment;
+  offsetX?: number;
+  offsetY?: number;
   children: (props: AutoAlignInjectedProps) => ReactElement;
 };
 
@@ -398,6 +400,8 @@ export const AutoAlign: FC<AutoAlignProps> = (props) => {
     preventPortalize,
     portalClassName: additionalPortalClassName,
     portalStyle: additionalPortalStyle = {},
+    offsetX = 0,
+    offsetY = 0,
     children,
   } = props;
   const {
@@ -419,6 +423,8 @@ export const AutoAlign: FC<AutoAlignProps> = (props) => {
       right: 0,
     },
   } = compSettings;
+  const adjustedOffsetLeft = offsetLeft + offsetX;
+  const adjustedOffsetTop = offsetTop + offsetY;
   if (typeof children !== 'function') {
     return React.isValidElement(children) ? children : <>{children}</>;
   }
@@ -429,9 +435,9 @@ export const AutoAlign: FC<AutoAlignProps> = (props) => {
     <div ref={elRef}>
       <RelativePortal
         fullWidth
-        left={offsetLeft}
-        right={-offsetLeft}
-        top={offsetTop}
+        top={adjustedOffsetTop}
+        left={adjustedOffsetLeft}
+        right={-adjustedOffsetLeft}
         onScroll={onScroll}
         component='div'
         className={classnames(portalClassName, additionalPortalClassName)}

src/scripts/Popover.tsx

@@ -2,15 +2,28 @@ import React, {
   HTMLAttributes,
   CSSProperties,
   FC,
-  useRef,
   ReactNode,
+  forwardRef,
+  useEffect,
 } from 'react';
 import classnames from 'classnames';
 import {
   AutoAlign,
   AutoAlignInjectedProps,
   RectangleAlignment,
 } from './AutoAlign';
+import { registerStyle } from './util';
+
+/**
+ *
+ */
+function useInitComponentStyle() {
+  useEffect(() => {
+    registerStyle('popover', [
+      ['.react-slds-popover.slds-popover_tooltip a', '{ color: white; }'],
+    ]);
+  }, []);
+}
 
 /**
  *
@@ -55,14 +68,17 @@ export type PopoverProps = {
   theme?: PopoverTheme;
   tooltip?: boolean;
   bodyStyle?: CSSProperties;
+  offsetX?: number;
+  offsetY?: number;
 } & HTMLAttributes<HTMLDivElement>;
 
 /**
  *
  */
-export const PopoverInner: FC<PopoverProps & AutoAlignInjectedProps> = (
-  props
-) => {
+export const PopoverInner = forwardRef<
+  HTMLDivElement,
+  PopoverProps & AutoAlignInjectedProps
+>((props, ref) => {
   const {
     children,
     alignment,
@@ -73,10 +89,10 @@ export const PopoverInner: FC<PopoverProps & AutoAlignInjectedProps> = (
     bodyStyle,
     ...rprops
   } = props;
-  const elRef = useRef<HTMLDivElement | null>(null);
   const nubbinPosition = alignment.join('-');
   const [firstAlign, secondAlign] = alignment;
   const popoverClassNames = classnames(
+    'react-slds-popover',
     'slds-popover',
     {
       'slds-hide': hidden,
@@ -103,7 +119,7 @@ export const PopoverInner: FC<PopoverProps & AutoAlignInjectedProps> = (
   };
   return (
     <div
-      ref={elRef}
+      ref={ref}
       className={popoverClassNames}
       role={tooltip ? 'tooltip' : 'dialog'}
       style={rootStyle}
@@ -112,22 +128,30 @@ export const PopoverInner: FC<PopoverProps & AutoAlignInjectedProps> = (
       <PopoverBody style={bodyStyle}>{children}</PopoverBody>
     </div>
   );
-};
+});
 
 /**
  *
  */
-export const Popover: FC<PopoverProps> = ({ position, ...props }) => {
-  const alignment: RectangleAlignment | undefined = position?.split('-') as
-    | RectangleAlignment
-    | undefined;
-  return (
-    <AutoAlign
-      triggerSelector='.slds-dropdown-trigger'
-      alignmentStyle='popover'
-      alignment={alignment}
-    >
-      {(injectedProps) => <PopoverInner {...props} {...injectedProps} />}
-    </AutoAlign>
-  );
-};
+export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
+  ({ position, offsetX = 0, offsetY = 0, ...props }, ref) => {
+    useInitComponentStyle();
+
+    const alignment: RectangleAlignment | undefined = position?.split('-') as
+      | RectangleAlignment
+      | undefined;
+    return (
+      <AutoAlign
+        triggerSelector='.slds-dropdown-trigger'
+        alignmentStyle='popover'
+        alignment={alignment}
+        offsetX={offsetX}
+        offsetY={offsetY}
+      >
+        {(injectedProps) => (
+          <PopoverInner {...props} {...injectedProps} ref={ref} />
+        )}
+      </AutoAlign>
+    );
+  }
+);

src/scripts/Tabs.tsx

@@ -1,5 +1,6 @@
 import React, {
   FC,
+  FocusEvent,
   ComponentType,
   HTMLAttributes,
   ReactElement,
@@ -11,12 +12,15 @@ import React, {
   useRef,
   useState,
   useEffect,
+  useCallback,
 } from 'react';
 import classnames from 'classnames';
 import { registerStyle } from './util';
 import { DropdownButton, DropdownButtonProps } from './DropdownButton';
 import { useControlledValue, useEventCallback } from './hooks';
 import { Bivariant } from './typeUtils';
+import { Button } from './Button';
+import { Popover } from './Popover';
 
 /**
  *
@@ -95,6 +99,38 @@ const TabMenu: FC<TabMenuProps> = (props) => {
   );
 };
 
+/**
+ *
+ */
+const TooltipContent = (props: { children: ReactNode; icon?: string }) => {
+  const { children, icon = 'info' } = props;
+  const [isHideTooltip, setIsHideTooltip] = useState(true);
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const tooltipToggle = useCallback(() => {
+    setIsHideTooltip((hidden) => !hidden);
+  }, []);
+  const onBlur = useCallback((e: FocusEvent<HTMLElement>) => {
+    if (!popoverRef.current?.contains(e.relatedTarget)) {
+      setIsHideTooltip(true);
+    }
+  }, []);
+  return (
+    <span className='slds-dropdown-trigger react-slds-tooltip-content'>
+      <Button type='icon' icon={icon} onClick={tooltipToggle} onBlur={onBlur} />
+      <Popover
+        ref={popoverRef}
+        hidden={isHideTooltip}
+        tabIndex={-1}
+        onBlur={onBlur}
+        offsetX={-15}
+        tooltip
+      >
+        {children}
+      </Popover>
+    </span>
+  );
+};
+
 /**
  *
  */
@@ -112,6 +148,8 @@ export type TabItemRendererProps = {
   onTabKeyDown?: Bivariant<
     (eventKey: TabKey, e: React.KeyboardEvent<HTMLAnchorElement>) => void
   >;
+  tooltip?: ReactNode;
+  tooltipIcon?: string;
 };
 
 const DefaultTabItemRenderer: FC<{ children?: ReactNode }> = (props) => {
@@ -136,7 +174,7 @@ export type TabItemProps<RendererProps extends TabItemRendererProps> = {
 const TabItem = <RendererProps extends TabItemRendererProps>(
   props: TabItemProps<RendererProps>
 ) => {
-  const { title, eventKey, menu, menuIcon } = props;
+  const { title, eventKey, menu, menuIcon, tooltip, tooltipIcon } = props;
   const { type, activeTabRef } = useContext(TabsContext);
   const activeKey = useContext(TabsActiveKeyContext);
   const { onTabClick, onTabKeyDown } = useContext(TabsHandlersContext);
@@ -172,7 +210,11 @@ const TabItem = <RendererProps extends TabItemRendererProps>(
   return (
     <li className={tabItemClassName} role='presentation'>
       <TabItemRenderer {...itemRendererProps}>
-        <span className='react-slds-tab-item-content'>
+        <span
+          className={`react-slds-tab-item-content ${
+            tooltip ? 'react-slds-tooltip-enabled' : ''
+          }`}
+        >
           <a
             className={tabLinkClassName}
             role='tab'
@@ -188,6 +230,9 @@ const TabItem = <RendererProps extends TabItemRendererProps>(
           >
             {title}
           </a>
+          {tooltip ? (
+            <TooltipContent icon={tooltipIcon}>{tooltip}</TooltipContent>
+          ) : null}
           {menuItems ? (
             <TabMenu icon={menuIcon} {...menuProps}>
               {menuItems}
@@ -274,7 +319,15 @@ function useInitComponentStyle() {
         '.slds-tabs__item.react-slds-tab-with-menu > .react-slds-tab-item-content > a',
         '{ padding-right: 2rem; }',
       ],
+      [
+        '.slds-tabs__item.react-slds-tab-with-menu > .react-slds-tab-item-content.react-slds-tooltip-enabled > a',
+        '{ padding-right: 3.5rem; }',
+      ],
       ['.react-slds-tab-menu', '{ position: absolute; top: 0; right: 0; }'],
+      [
+        '.react-slds-tooltip-content',
+        '{ position: absolute; top: 0.6rem; right: 2.25rem; }',
+      ],
       [
         '.react-slds-tab-menu button',
         '{ height: 2.5rem; line-height: 2rem; width: 2rem; visibility: hidden; justify-content: center }',

stories/Tabs.stories.tsx

@@ -190,6 +190,66 @@ export const WithDropdownScoped: ComponentStoryObj<typeof Tabs> = {
   },
 };
 
+/**
+ *
+ */
+export const WithTooltipScoped: ComponentStoryObj<typeof Tabs> = {
+  render: (args) => (
+    <Tabs {...args}>
+      <Tab
+        eventKey='1'
+        title='Tab 1'
+        menuItems={createMenu()}
+        tooltip={
+          <div>
+            This is a tooltip for tab #1
+            <br />
+            <a
+              href='https://www.example.com/helllo?name=world'
+              target='_blank'
+              rel='noreferrer'
+            >
+              https://www.example.com/helllo?name=world
+            </a>
+          </div>
+        }
+      >
+        This is in tab #1
+      </Tab>
+      <Tab
+        eventKey='2'
+        title='Tab 2'
+        menuItems={createMenu()}
+        tooltip={<div>Warning!</div>}
+        tooltipIcon='warning'
+      >
+        This is in tab #2
+      </Tab>
+      <Tab
+        eventKey='3'
+        title='Tab 3'
+        menuItems={createMenu()}
+        tooltip={<div>Error!</div>}
+        tooltipIcon='error'
+      >
+        This is in tab #3
+      </Tab>
+    </Tabs>
+  ),
+  name: 'With Tooltip (Scoped)',
+  args: {
+    type: 'scoped',
+    defaultActiveKey: '1',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Scoped tabs with dropdown menu',
+      },
+    },
+  },
+};
+
 /**
  *
  */