@patternfly/react-core 6.3.0-prerelease.13 → 6.3.0-prerelease.15

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.3.0-prerelease.12","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.3.0-prerelease.14","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.3.0-prerelease.12","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.3.0-prerelease.14","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.3.0-prerelease.12","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.3.0-prerelease.14","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.3.0-prerelease.13",
+  "version": "6.3.0-prerelease.15",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.3.0-prerelease.2",
-    "@patternfly/react-styles": "^6.3.0-prerelease.2",
-    "@patternfly/react-tokens": "^6.3.0-prerelease.2",
+    "@patternfly/react-icons": "^6.3.0-prerelease.3",
+    "@patternfly/react-styles": "^6.3.0-prerelease.3",
+    "@patternfly/react-tokens": "^6.3.0-prerelease.3",
     "focus-trap": "7.6.4",
     "react-dropzone": "^14.3.5",
     "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"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "5c6511cf7ea76569ab3ad0e7696bb660a3d0b58f"
+  "gitHead": "729b1378613ea903bf81f164699cda93372e821c"
 }

package/src/components/DualListSelector/DualListSelector.tsx

@@ -17,13 +17,19 @@ export interface DualListSelectorProps {
   isTree?: boolean;
   /** Content to be rendered in the dual list selector. */
   children?: React.ReactNode;
+  /** Flag indicating whether a tree dual list selector has animations. This will always render
+   * nested dual list selector items rather than dynamically rendering them. This prop will be removed in
+   * the next breaking change release in favor of defaulting to always-rendered items.
+   */
+  hasAnimations?: boolean;
 }
 
 class DualListSelector extends Component<DualListSelectorProps> {
   static displayName = 'DualListSelector';
   static defaultProps: PickOptional<DualListSelectorProps> = {
     children: '',
-    isTree: false
+    isTree: false,
+    hasAnimations: false
   };
 
   constructor(props: DualListSelectorProps) {
@@ -31,13 +37,21 @@ class DualListSelector extends Component<DualListSelectorProps> {
   }
 
   render() {
-    const { className, children, id, isTree, ...props } = this.props;
+    const { className, children, id, isTree, hasAnimations, ...props } = this.props;
 
     return (
-      <DualListSelectorContext.Provider value={{ isTree }}>
+      <DualListSelectorContext.Provider value={{ isTree, hasAnimations }}>
         <GenerateId>
           {(randomId) => (
-            <div className={css(styles.dualListSelector, className)} id={id || randomId} {...props}>
+            <div
+              className={css(
+                styles.dualListSelector,
+                hasAnimations && isTree && styles.modifiers.animateExpand,
+                className
+              )}
+              id={id || randomId}
+              {...props}
+            >
               {children}
             </div>
           )}

package/src/components/DualListSelector/DualListSelectorContext.ts

@@ -1,7 +1,8 @@
 import { createContext } from 'react';
 export const DualListSelectorContext = createContext<{
   isTree?: boolean;
-}>({ isTree: false });
+  hasAnimations?: boolean;
+}>({ isTree: false, hasAnimations: false });
 
 export const DualListSelectorListContext = createContext<{
   setFocusedOption?: (id: string) => void;

package/src/components/DualListSelector/DualListSelectorListWrapper.tsx

@@ -56,14 +56,17 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
     }
     event.stopImmediatePropagation();
     const validOptions = isTree
-      ? (Array.from(
-          menuRef.current.querySelectorAll(
-            `.${styles.dualListSelectorItemToggle}, .${styles.dualListSelectorItemCheck} > input`
-          )
-        ) as Element[])
+      ? (
+          Array.from(
+            menuRef.current.querySelectorAll(
+              `.${styles.dualListSelectorItemToggle}, .${styles.dualListSelectorItemCheck} > input`
+            )
+          ) as Element[]
+        ).filter((item) => !item.closest(`.${styles.dualListSelectorList}[inert]`))
       : (Array.from(menuRef.current.getElementsByTagName('LI')) as Element[]).filter(
           (el) => !el.classList.contains('pf-m-disabled')
         );
+
     const activeElement = document.activeElement;
     handleArrows(
       event,

package/src/components/DualListSelector/DualListSelectorTree.tsx

@@ -1,5 +1,7 @@
+import { useContext } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
+import { DualListSelectorContext } from './DualListSelectorContext';
 import { DualListSelectorTreeItem } from './DualListSelectorTreeItem';
 
 export interface DualListSelectorTreeItemData {
@@ -68,11 +70,13 @@ export const DualListSelectorTree: React.FunctionComponent<DualListSelectorTreeP
   isDisabled = false,
   ...props
 }: DualListSelectorTreeProps) => {
+  const { hasAnimations } = useContext(DualListSelectorContext);
   const dataToRender = typeof data === 'function' ? data() : data;
   const tree = dataToRender.map((item) => (
     <DualListSelectorTreeItem
       key={item.id}
       text={item.text}
+      hasAnimations={hasAnimations}
       id={item.id}
       defaultExpanded={item.defaultExpanded !== undefined ? item.defaultExpanded : defaultAllExpanded}
       onOptionCheck={onOptionCheck}

package/src/components/DualListSelector/DualListSelectorTreeItem.tsx

@@ -1,4 +1,4 @@
-import { memo, useContext, useEffect, useRef, useState } from 'react';
+import { memo, useContext, useEffect, useRef, useState, cloneElement, Children, isValidElement } from 'react';
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import { css } from '@patternfly/react-styles';
 import { DualListSelectorTreeItemData } from './DualListSelectorTree';
@@ -38,6 +38,11 @@ export interface DualListSelectorTreeItemProps extends React.HTMLProps<HTMLLIEle
   isDisabled?: boolean;
   /** Flag indicating the DualListSelector tree should utilize memoization to help render large data sets. */
   useMemo?: boolean;
+  /** Flag indicating whether a tree dual list selector has animations. This will always render
+   * nested dual list selector items rather than dynamically rendering them. This prop will be removed in
+   * the next breaking change release in favor of defaulting to always-rendered items.
+   */
+  hasAnimations?: boolean;
 }
 
 const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTreeItemProps> = ({
@@ -53,6 +58,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
   badgeProps,
   itemData,
   isDisabled = false,
+  hasAnimations,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   useMemo,
   ...props
@@ -65,6 +71,15 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
     setIsExpanded(defaultExpanded);
   }, [defaultExpanded]);
 
+  const clonedChildren = Children.map(
+    children,
+    (child) =>
+      isValidElement(child) &&
+      cloneElement(child as React.ReactElement<any>, {
+        inert: isExpanded ? undefined : ''
+      })
+  );
+
   return (
     <li
       className={css(
@@ -156,7 +171,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
           </span>
         </div>
       </div>
-      {isExpanded && children}
+      {(isExpanded || hasAnimations) && clonedChildren}
     </li>
   );
 };

package/src/components/DualListSelector/__tests__/DualListSelector.test.tsx

@@ -1,6 +1,37 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
+import { DualListSelector } from '../DualListSelector';
 import { DualListSelectorPane } from '../DualListSelectorPane';
 import { SearchInput } from '../../SearchInput';
+
+// The following tests can be removed as part of https://github.com/patternfly/patternfly-react/issues/11838
+describe('Opt-in animations', () => {
+  test(`Does not render with class ${styles.modifiers.animateExpand} by default`, () => {
+    render(<DualListSelector data-testid="test-id" />);
+
+    expect(screen.getByTestId('test-id')).not.toHaveClass(styles.modifiers.animateExpand);
+  });
+
+  test(`Does not render with class ${styles.modifiers.animateExpand} when hasAnimations is true and isTree is false`, () => {
+    render(<DualListSelector hasAnimations data-testid="test-id" />);
+
+    expect(screen.getByTestId('test-id')).not.toHaveClass(styles.modifiers.animateExpand);
+  });
+
+  test(`Does not render with class ${styles.modifiers.animateExpand} by default when isTree is true`, () => {
+    render(<DualListSelector isTree data-testid="test-id" />);
+
+    expect(screen.getByTestId('test-id')).not.toHaveClass(styles.modifiers.animateExpand);
+  });
+
+  test(`Renders with class ${styles.modifiers.animateExpand} when both isTree and hasAnimations are true`, () => {
+    render(<DualListSelector isTree hasAnimations data-testid="test-id" />);
+
+    expect(screen.getByTestId('test-id')).toHaveClass(styles.modifiers.animateExpand);
+  });
+});
+
+// Following tests should be moved to a separate DualListSelectorPane test file
 describe('DualListSelector', () => {
   test('basic', () => {
     const { asFragment } = render(<DualListSelectorPane id="basicTest" />);

package/src/components/DualListSelector/__tests__/DualListSelectorTreeItem.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen } from '@testing-library/react';
+import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
+import { DualListSelectorTreeItem } from '../DualListSelectorTreeItem';
+
+// The following tests checking for children to not be/to be rendered will need to be refactored
+// as part of https://github.com/patternfly/patternfly-react/issues/11838
+test('Does not render children by default', () => {
+  render(
+    <DualListSelectorTreeItem id="item-id" text="Test text">
+      <div>Children content</div>
+    </DualListSelectorTreeItem>
+  );
+
+  expect(screen.queryByText('Children content')).not.toBeInTheDocument();
+});
+
+test('Renders children when defaultExpanded is true', () => {
+  render(
+    <DualListSelectorTreeItem defaultExpanded id="item-id" text="Test text">
+      <div>Children content</div>
+    </DualListSelectorTreeItem>
+  );
+
+  expect(screen.getByText('Children content')).toBeVisible();
+});
+
+test('Renders children when hasAnimations is true', () => {
+  render(
+    <DualListSelectorTreeItem hasAnimations id="item-id" text="Test text">
+      <div>Children content</div>
+    </DualListSelectorTreeItem>
+  );
+
+  expect(screen.getByText('Children content')).toBeVisible();
+});
+
+test('Renders children with inert attribute by default when hasAnimations is true', () => {
+  render(
+    <DualListSelectorTreeItem hasAnimations id="item-id" text="Test text">
+      <div>Children content</div>
+    </DualListSelectorTreeItem>
+  );
+
+  expect(screen.getByText('Children content')).toHaveAttribute('inert', '');
+});
+
+test('Does not render children with inert attribute when hasAnimations and defaultExpanded are true', () => {
+  render(
+    <DualListSelectorTreeItem hasAnimations defaultExpanded id="item-id" text="Test text">
+      <div>Children content</div>
+    </DualListSelectorTreeItem>
+  );
+
+  expect(screen.getByText('Children content')).not.toHaveAttribute('inert');
+});

package/src/components/DualListSelector/examples/DualListSelectorTree.tsx

@@ -283,7 +283,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
   };
 
   return (
-    <DualListSelector isTree>
+    <DualListSelector hasAnimations isTree>
       {buildPane(false)}
       <DualListSelectorControlsWrapper>
         <DualListSelectorControl

package/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>
   );

package/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(

package/src/components/Tabs/Tabs.tsx

@@ -5,20 +5,27 @@ 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;
@@ -26,6 +33,8 @@ export interface HorizontalOverflowObject {
   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,21 +343,49 @@ 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);
@@ -350,8 +393,18 @@ class Tabs extends Component<TabsProps, TabsState> {
   }
 
   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 && (

package/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
 });

package/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">