feat(Tabs): added animations (#11767)

* feat(Tabs): added animations

* Updated snapshots

* Added popperProps and updated cypress tests

* Fixed docs error

* Testing cypress update for test failure

* Added wait call in test

* Upated cypress tests

* Adjusted cypress tests again

* Skip cypress tests

* Added animation class from core bump

* Bumped Core to prerelease 20

Author: thatblindgeye

packages/react-core/package.json

@@ -54,7 +54,7 @@
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.3.0-prerelease.15",
+    "@patternfly/patternfly": "6.3.0-prerelease.20",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.0"

packages/react-core/src/components/Tabs/OverflowTab.tsx

@@ -8,6 +8,31 @@ import { TabsContext } from './TabsContext';
 import { TabProps } from './Tab';
 import { TabTitleText } from './TabTitleText';
 
+export interface HorizontalOverflowPopperProps {
+  /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */
+  direction?: 'up' | 'down';
+  /** Horizontal position of the popper */
+  position?: 'right' | 'left' | 'center' | 'start' | 'end';
+  /** Custom width of the popper. If the value is "trigger", it will set the width to the select toggle's width */
+  width?: string | 'trigger';
+  /** Minimum width of the popper. If the value is "trigger", it will set the min width to the select toggle's width */
+  minWidth?: string | 'trigger';
+  /** Maximum width of the popper. If the value is "trigger", it will set the max width to the select toggle's width */
+  maxWidth?: string | 'trigger';
+  /** Enable to flip the popper when it reaches the boundary */
+  enableFlip?: boolean;
+  /** The container to append the select to. Defaults to document.body.
+   * If your select is being cut off you can append it to an element higher up the DOM tree.
+   * Some examples:
+   * appendTo="inline"
+   * appendTo={() => document.body}
+   * appendTo={document.getElementById('target')}
+   */
+  appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
+  /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */
+  preventOverflow?: boolean;
+}
+
 export interface OverflowTabProps extends React.HTMLProps<HTMLLIElement> {
   /** Additional classes added to the overflow tab */
   className?: string;
@@ -25,6 +50,8 @@ export interface OverflowTabProps extends React.HTMLProps<HTMLLIElement> {
   shouldPreventScrollOnItemFocus?: boolean;
   /** Time in ms to wait before firing the toggles' focus event. Defaults to 0 */
   focusTimeoutDelay?: number;
+  /** Additional props to spread to the popper menu. */
+  popperProps?: HorizontalOverflowPopperProps;
 }
 
 export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
@@ -36,6 +63,7 @@ export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
   zIndex = 9999,
   shouldPreventScrollOnItemFocus = true,
   focusTimeoutDelay = 0,
+  popperProps,
   ...props
 }: OverflowTabProps) => {
   const menuRef = useRef<HTMLDivElement>(undefined);
@@ -148,6 +176,7 @@ export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
         minWidth="revert"
         appendTo={overflowLIRef.current}
         zIndex={zIndex}
+        {...popperProps}
       />
     </Fragment>
   );

packages/react-core/src/components/Tabs/Tab.tsx

@@ -1,4 +1,4 @@
-import { useContext, forwardRef } from 'react';
+import { useContext, forwardRef, useEffect } from 'react';
 import styles from '@patternfly/react-styles/css/components/Tabs/tabs';
 import { OUIAProps } from '../../helpers';
 import { TabButton } from './TabButton';
@@ -75,7 +75,7 @@ const TabBase: React.FunctionComponent<TabProps> = ({
     }),
     {}
   );
-  const { mountOnEnter, localActiveKey, unmountOnExit, uniqueId, handleTabClick, handleTabClose } =
+  const { mountOnEnter, localActiveKey, unmountOnExit, uniqueId, setAccentStyles, handleTabClick, handleTabClose } =
     useContext(TabsContext);
   let ariaControls = tabContentId ? `${tabContentId}` : `pf-tab-section-${eventKey}-${childId || uniqueId}`;
   if ((mountOnEnter || unmountOnExit) && eventKey !== localActiveKey) {
@@ -116,6 +116,10 @@ const TabBase: React.FunctionComponent<TabProps> = ({
     </TabButton>
   );
 
+  useEffect(() => {
+    setAccentStyles(true);
+  }, [title, actions]);
+
   return (
     <li
       className={css(

packages/react-core/src/components/Tabs/Tabs.tsx

@@ -5,27 +5,36 @@ import { PickOptional } from '../../helpers/typeUtils';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
-import { getUniqueId, isElementInView, formatBreakpointMods, getLanguageDirection } from '../../helpers/util';
+import {
+  getUniqueId,
+  isElementInView,
+  formatBreakpointMods,
+  getLanguageDirection,
+  getInlineStartProperty
+} from '../../helpers/util';
 import { TabContent } from './TabContent';
 import { TabProps } from './Tab';
 import { TabsContextProvider } from './TabsContext';
-import { OverflowTab } from './OverflowTab';
+import { OverflowTab, HorizontalOverflowPopperProps } from './OverflowTab';
 import { Button } from '../Button';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId, canUseDOM } from '../../helpers';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
+import linkAccentLength from '@patternfly/react-tokens/dist/esm/c_tabs_link_accent_length';
+import linkAccentStart from '@patternfly/react-tokens/dist/esm/c_tabs_link_accent_start';
 
 export enum TabsComponent {
   div = 'div',
   nav = 'nav'
 }
-
 export interface HorizontalOverflowObject {
   /** Flag which shows the count of overflowing tabs when enabled */
   showTabCount?: boolean;
   /** The text which displays when an overflowing tab isn't selected */
   defaultTitleText?: string;
   /** The aria label applied to the button which toggles the tab overflow menu */
   toggleAriaLabel?: string;
+  /** Additional props to spread to the popper menu. */
+  popperProps?: HorizontalOverflowPopperProps;
 }
 
 type TabElement = React.ReactElement<TabProps, React.JSXElementConstructor<TabProps>>;
@@ -139,6 +148,9 @@ interface TabsState {
   uncontrolledIsExpandedLocal: boolean;
   ouiaStateId: string;
   overflowingTabCount: number;
+  isInitializingAccent: boolean;
+  currentLinkAccentLength: string;
+  currentLinkAccentStart: string;
 }
 
 class Tabs extends Component<TabsProps, TabsState> {
@@ -158,7 +170,10 @@ class Tabs extends Component<TabsProps, TabsState> {
       uncontrolledActiveKey: this.props.defaultActiveKey,
       uncontrolledIsExpandedLocal: this.props.defaultIsExpanded,
       ouiaStateId: getDefaultOUIAId(Tabs.displayName),
-      overflowingTabCount: 0
+      overflowingTabCount: 0,
+      isInitializingAccent: true,
+      currentLinkAccentLength: linkAccentLength.value,
+      currentLinkAccentStart: linkAccentStart.value
     };
 
     if (this.props.isVertical && this.props.expandable !== undefined) {
@@ -328,30 +343,68 @@ class Tabs extends Component<TabsProps, TabsState> {
     }
   };
 
+  setAccentStyles = (shouldInitializeStyle?: boolean) => {
+    const currentItem = this.tabList.current.querySelector('li.pf-m-current') as HTMLElement;
+    if (!currentItem) {
+      return;
+    }
+
+    const { isVertical } = this.props;
+    const { offsetWidth, offsetHeight, offsetTop } = currentItem;
+    const lengthValue = isVertical ? offsetHeight : offsetWidth;
+    const startValue = isVertical ? offsetTop : getInlineStartProperty(currentItem, this.tabList.current);
+    this.setState({
+      currentLinkAccentLength: `${lengthValue}px`,
+      currentLinkAccentStart: `${startValue}px`,
+      ...(shouldInitializeStyle && { isInitializingAccent: true })
+    });
+
+    setTimeout(() => {
+      this.setState({ isInitializingAccent: false });
+    }, 0);
+  };
+
+  handleResize = () => {
+    this.handleScrollButtons();
+    this.setAccentStyles();
+  };
+
   componentDidMount() {
     if (!this.props.isVertical) {
       if (canUseDOM) {
-        window.addEventListener('resize', this.handleScrollButtons, false);
+        window.addEventListener('resize', this.handleResize, false);
       }
       this.direction = getLanguageDirection(this.tabList.current);
       // call the handle resize function to check if scroll buttons should be shown
       this.handleScrollButtons();
     }
+
+    this.setAccentStyles(true);
   }
 
   componentWillUnmount() {
     if (!this.props.isVertical) {
       if (canUseDOM) {
-        window.removeEventListener('resize', this.handleScrollButtons, false);
+        window.removeEventListener('resize', this.handleResize, false);
       }
     }
     clearTimeout(this.scrollTimeout);
     this.leftScrollButtonRef.current?.removeEventListener('transitionend', this.hideScrollButtons);
   }
 
   componentDidUpdate(prevProps: TabsProps, prevState: TabsState) {
-    const { activeKey, mountOnEnter, isOverflowHorizontal, children } = this.props;
-    const { shownKeys, overflowingTabCount, enableScrollButtons } = this.state;
+    this.direction = getLanguageDirection(this.tabList.current);
+    const { activeKey, mountOnEnter, isOverflowHorizontal, children, defaultActiveKey } = this.props;
+    const { shownKeys, overflowingTabCount, enableScrollButtons, uncontrolledActiveKey } = this.state;
+    const isOnCloseUpdate = !!prevProps.onClose !== !!this.props.onClose;
+    if (
+      (defaultActiveKey !== undefined && prevState.uncontrolledActiveKey !== uncontrolledActiveKey) ||
+      (defaultActiveKey === undefined && prevProps.activeKey !== activeKey) ||
+      isOnCloseUpdate
+    ) {
+      this.setAccentStyles(isOnCloseUpdate);
+    }
+
     if (prevProps.activeKey !== activeKey && mountOnEnter && shownKeys.indexOf(activeKey) < 0) {
       this.setState({
         shownKeys: shownKeys.concat(activeKey)
@@ -364,6 +417,7 @@ class Tabs extends Component<TabsProps, TabsState> {
       Children.toArray(prevProps.children).length !== Children.toArray(children).length
     ) {
       this.handleScrollButtons();
+      this.setAccentStyles(true);
     }
 
     const currentOverflowingTabCount = this.countOverflowingElements(this.tabList.current);
@@ -380,8 +434,6 @@ class Tabs extends Component<TabsProps, TabsState> {
     } else if (prevState.enableScrollButtons && !enableScrollButtons) {
       this.setState({ showScrollButtons: false });
     }
-
-    this.direction = getLanguageDirection(this.tabList.current);
   }
 
   static getDerivedStateFromProps(nextProps: TabsProps, prevState: TabsState) {
@@ -450,7 +502,10 @@ class Tabs extends Component<TabsProps, TabsState> {
       shownKeys,
       uncontrolledActiveKey,
       uncontrolledIsExpandedLocal,
-      overflowingTabCount
+      overflowingTabCount,
+      isInitializingAccent,
+      currentLinkAccentLength,
+      currentLinkAccentStart
     } = this.state;
     const filteredChildren = Children.toArray(children)
       .filter((child): child is TabElement => isValidElement(child))
@@ -485,6 +540,7 @@ class Tabs extends Component<TabsProps, TabsState> {
           unmountOnExit,
           localActiveKey,
           uniqueId,
+          setAccentStyles: this.setAccentStyles,
           handleTabClick: (...args) => this.handleTabClick(...args),
           handleTabClose: onClose
         }}
@@ -493,6 +549,7 @@ class Tabs extends Component<TabsProps, TabsState> {
           aria-label={ariaLabel}
           className={css(
             styles.tabs,
+            styles.modifiers.animateCurrent,
             isFilled && styles.modifiers.fill,
             isSubtab && styles.modifiers.subtab,
             isVertical && styles.modifiers.vertical,
@@ -505,10 +562,12 @@ class Tabs extends Component<TabsProps, TabsState> {
             formatBreakpointMods(inset, styles),
             variantStyle[variant],
             hasOverflowTab && styles.modifiers.overflow,
+            isInitializingAccent && styles.modifiers.initializingAccent,
             className
           )}
           {...getOUIAProps(Tabs.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
           id={id && id}
+          style={{ [linkAccentLength.name]: currentLinkAccentLength, [linkAccentStart.name]: currentLinkAccentStart }}
           {...props}
         >
           {expandable && isVertical && (

packages/react-core/src/components/Tabs/TabsContext.ts

@@ -6,6 +6,7 @@ export interface TabsContextProps {
   unmountOnExit: boolean;
   localActiveKey: string | number;
   uniqueId: string;
+  setAccentStyles: (shouldInitializeStyles?: boolean) => void;
   handleTabClick: (
     event: React.MouseEvent<HTMLElement, MouseEvent>,
     eventKey: number | string,
@@ -24,6 +25,7 @@ export const TabsContext = createContext<TabsContextProps>({
   unmountOnExit: false,
   localActiveKey: '',
   uniqueId: '',
+  setAccentStyles: () => null,
   handleTabClick: () => null,
   handleTabClose: undefined
 });

packages/react-core/src/components/Tabs/__tests__/Tabs.test.tsx

@@ -1,5 +1,6 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, act } from '@testing-library/react';
 import { Tabs } from '../Tabs';
+import styles from '@patternfly/react-styles/css/components/Tabs/tabs';
 import { Tab } from '../Tab';
 import { TabTitleText } from '../TabTitleText';
 import { TabTitleIcon } from '../TabTitleIcon';
@@ -8,6 +9,47 @@ import { TabContentBody } from '../TabContentBody';
 
 jest.mock('../../../helpers/GenerateId/GenerateId');
 
+test(`Renders with classes ${styles.tabs} and ${styles.modifiers.animateCurrent} by default`, () => {
+  render(
+    <Tabs role="region">
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  expect(screen.getByRole('region')).toHaveClass(`${styles.tabs} ${styles.modifiers.animateCurrent}`);
+});
+
+test(`Renders with class ${styles.modifiers.initializingAccent} when component initially mounts`, () => {
+  render(
+    <Tabs role="region">
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  expect(screen.getByRole('region')).toHaveClass(styles.modifiers.initializingAccent);
+});
+
+test(`Does not render with class ${styles.modifiers.initializingAccent} when component is finished mounting`, () => {
+  jest.useFakeTimers();
+  render(
+    <Tabs role="region">
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  act(() => {
+    jest.advanceTimersByTime(500);
+  });
+  expect(screen.getByRole('region')).not.toHaveClass(styles.modifiers.initializingAccent);
+  jest.useRealTimers();
+});
+
 test('should render simple tabs', () => {
   const { asFragment } = render(
     <Tabs id="simpleTabs">