feat(Tabs): consumed Penta updates (#10044)

* feat(Tabs): consumed Penta updates

* Updated unit tests

* Updated integration tests

Author: thatblindgeye

packages/react-core/package.json

@@ -54,7 +54,7 @@
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.66",
+    "@patternfly/patternfly": "6.0.0-alpha.69",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",

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

@@ -27,10 +27,10 @@ export interface TabContentProps extends Omit<React.HTMLProps<HTMLElement>, 'ref
   ouiaSafe?: boolean;
 }
 
-// TODO: Update with issue #9909
-// const variantStyle = {
-//   default: ''
-// };
+const variantStyle = {
+  default: '',
+  secondary: styles.modifiers.secondary
+};
 
 const TabContentBase: React.FunctionComponent<TabContentProps> = ({
   id,
@@ -56,27 +56,30 @@ const TabContentBase: React.FunctionComponent<TabContentProps> = ({
 
     return (
       <TabsContextConsumer>
-        {({ variant }: TabsContextProps) => (
-          <section
-            ref={innerRef}
-            hidden={children ? null : child.props.eventKey !== activeKey}
-            // TODO: Update "variant" with issue #9909
-            className={
-              children
-                ? css(styles.tabContent, className, variant)
-                : css(styles.tabContent, child.props.className, variant)
-            }
-            id={children ? id : `pf-tab-section-${child.props.eventKey}-${id}`}
-            aria-label={ariaLabel}
-            aria-labelledby={labelledBy}
-            role="tabpanel"
-            tabIndex={0}
-            {...getOUIAProps('TabContent', ouiaId, ouiaSafe)}
-            {...props}
-          >
-            {children || child.props.children}
-          </section>
-        )}
+        {({ variant }: TabsContextProps) => {
+          const variantClass = variantStyle[variant];
+
+          return (
+            <section
+              ref={innerRef}
+              hidden={children ? null : child.props.eventKey !== activeKey}
+              className={
+                children
+                  ? css(styles.tabContent, className, variantClass)
+                  : css(styles.tabContent, child.props.className, variantClass)
+              }
+              id={children ? id : `pf-tab-section-${child.props.eventKey}-${id}`}
+              aria-label={ariaLabel}
+              aria-labelledby={labelledBy}
+              role="tabpanel"
+              tabIndex={0}
+              {...getOUIAProps('TabContent', ouiaId, ouiaSafe)}
+              {...props}
+            >
+              {children || child.props.children}
+            </section>
+          );
+        }}
       </TabsContextConsumer>
     );
   }

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

@@ -14,7 +14,7 @@ export const TabTitleIcon: React.FunctionComponent<TabTitleIconProps> = ({
   className = '',
   ...props
 }: TabTitleIconProps) => (
-  <span className={css(styles.tabsItemIcon, className)} {...props}>
+  <span className={css(`${styles.tabs}__item-icon`, className)} {...props}>
     {children}
   </span>
 );

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Tabs/tabs';
-import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 import { css } from '@patternfly/react-styles';
 import { PickOptional } from '../../helpers/typeUtils';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
@@ -38,7 +37,7 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
   /** Additional classes added to the tabs */
   className?: string;
   /** Tabs background color variant */
-  variant?: 'default';
+  variant?: 'default' | 'secondary';
   /** The index of the active tab */
   activeKey?: number | string;
   /** The index of the default active tab. Set this for uncontrolled Tabs */
@@ -55,8 +54,8 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
   id?: string;
   /** Enables the filled tab list layout */
   isFilled?: boolean;
-  /** Enables secondary tab styling */
-  isSecondary?: boolean;
+  /** Enables subtab tab styling */
+  isSubtab?: boolean;
   /** Enables box styling to the tab component */
   isBox?: boolean;
   /** Enables vertical tab styling */
@@ -119,7 +118,7 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
 
 const variantStyle = {
   default: '',
-  light300: styles.modifiers.colorSchemeLight_300
+  secondary: styles.modifiers.secondary
 };
 
 interface TabsState {
@@ -177,7 +176,7 @@ class Tabs extends React.Component<TabsProps, TabsState> {
     activeKey: 0,
     onSelect: () => undefined as any,
     isFilled: false,
-    isSecondary: false,
+    isSubtab: false,
     isVertical: false,
     isBox: false,
     hasNoBorderBottom: false,
@@ -247,7 +246,6 @@ class Tabs extends React.Component<TabsProps, TabsState> {
       if (container && !this.props.isVertical && !isOverflowHorizontal) {
         // get first element and check if it is in view
         const overflowOnLeft = !isElementInView(container, container.firstChild as HTMLElement, false);
-
         // get last element and check if it is in view
         const overflowOnRight = !isElementInView(container, container.lastChild as HTMLElement, false);
 
@@ -392,7 +390,7 @@ class Tabs extends React.Component<TabsProps, TabsState> {
       defaultActiveKey,
       id,
       isFilled,
-      isSecondary,
+      isSubtab,
       isVertical,
       isBox,
       hasNoBorderBottom,
@@ -473,7 +471,7 @@ class Tabs extends React.Component<TabsProps, TabsState> {
           className={css(
             styles.tabs,
             isFilled && styles.modifiers.fill,
-            isSecondary && styles.modifiers.secondary,
+            isSubtab && styles.modifiers.subtab,
             isVertical && styles.modifiers.vertical,
             isVertical && expandable && formatBreakpointMods(expandable, styles),
             isVertical && expandable && isExpandedLocal && styles.modifiers.expanded,
@@ -518,33 +516,35 @@ class Tabs extends React.Component<TabsProps, TabsState> {
             </GenerateId>
           )}
           {renderScrollButtons && (
-            <button
-              type="button"
-              className={css(styles.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary)}
-              aria-label={backScrollAriaLabel || leftScrollAriaLabel}
-              onClick={this.scrollBack}
-              disabled={disableBackScrollButton}
-              aria-hidden={disableBackScrollButton}
-              ref={this.leftScrollButtonRef}
-            >
-              <AngleLeftIcon />
-            </button>
+            <div className={css(styles.tabsScrollButton)}>
+              <Button
+                aria-label={backScrollAriaLabel || leftScrollAriaLabel}
+                onClick={this.scrollBack}
+                isDisabled={disableBackScrollButton}
+                aria-hidden={disableBackScrollButton}
+                ref={this.leftScrollButtonRef}
+                variant="plain"
+              >
+                <AngleLeftIcon />
+              </Button>
+            </div>
           )}
           <ul className={css(styles.tabsList)} ref={this.tabList} onScroll={this.handleScrollButtons} role="tablist">
             {isOverflowHorizontal ? filteredChildrenWithoutOverflow : filteredChildren}
             {hasOverflowTab && <OverflowTab overflowingTabs={overflowingTabProps} {...overflowObjectProps} />}
           </ul>
           {renderScrollButtons && (
-            <button
-              type="button"
-              className={css(styles.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary)}
-              aria-label={forwardScrollAriaLabel || rightScrollAriaLabel}
-              onClick={this.scrollForward}
-              disabled={disableForwardScrollButton}
-              aria-hidden={disableForwardScrollButton}
-            >
-              <AngleRightIcon />
-            </button>
+            <div className={css(styles.tabsScrollButton)}>
+              <Button
+                aria-label={forwardScrollAriaLabel || rightScrollAriaLabel}
+                onClick={this.scrollForward}
+                isDisabled={disableForwardScrollButton}
+                aria-hidden={disableForwardScrollButton}
+                variant="plain"
+              >
+                <AngleRightIcon />
+              </Button>
+            </div>
           )}
           {onAdd !== undefined && (
             <span className={css(styles.tabsAdd)}>

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 export interface TabsContextProps {
-  variant: 'default' | 'light300';
+  variant: 'default' | 'secondary';
   mountOnEnter: boolean;
   unmountOnExit: boolean;
   localActiveKey: string | number;

packages/react-core/src/components/Tabs/__tests__/Generated/__snapshots__/TabContent.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`TabContent should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <section
     aria-label="string"
-    class="pf-v5-c-tab-content string default"
+    class="pf-v5-c-tab-content string"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     id="string"

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

@@ -251,19 +251,19 @@ test('should render filled tabs', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('should render secondary tabs', () => {
+test('should render subtabs', () => {
   const { asFragment } = render(
     <Tabs id="primarieTabs">
       <Tab eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
-        <Tabs isSecondary id="secondaryTabs">
-          <Tab id="secondary tab1" eventKey={10} title={<TabTitleText>"Secondary Tab item 1"</TabTitleText>}>
-            Secondary Tab 1 section
+        <Tabs isSubtab id="subtabs">
+          <Tab id="subtab1" eventKey={10} title={<TabTitleText>"Subtab item 1"</TabTitleText>}>
+            Subtab 1 section
           </Tab>
-          <Tab id="secondary tab2" eventKey={11} title={<TabTitleText>"Secondary Tab item 2"</TabTitleText>}>
-            Secondary Tab 2 section
+          <Tab id="subtab2" eventKey={11} title={<TabTitleText>"Subtab item 2"</TabTitleText>}>
+            Subtab 2 section
           </Tab>
-          <Tab id="secondary tab3" eventKey={12} title={<TabTitleText>"Secondary Tab item 3"</TabTitleText>}>
-            Secondary Tab 3 section
+          <Tab id="subtab3" eventKey={12} title={<TabTitleText>"Subtab item 3"</TabTitleText>}>
+            Subtab 3 section
           </Tab>
         </Tabs>
       </Tab>
@@ -338,9 +338,9 @@ test('should render tabs with separate content', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('should render box tabs of light variant', () => {
+test('should render box tabs of secondary variant', () => {
   const { asFragment } = render(
-    <Tabs id="boxLightVariantTabs" isBox variant="light300">
+    <Tabs id="boxSecondaryVariantTabs" isBox variant="secondary">
       <Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
         Tab 1 section
       </Tab>
@@ -372,9 +372,9 @@ test('should render tabs with no bottom border', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('should render secondary tabs with no bottom border when passed hasNoBorderBottom', () => {
+test('should render subtabs with no bottom border when passed hasNoBorderBottom', () => {
   render(
-    <Tabs isSecondary hasNoBorderBottom id="noBottomBorderTabs" aria-label="Secondary bottom border">
+    <Tabs isSubtab hasNoBorderBottom id="noBottomBorderTabs" aria-label="Subtab bottom border">
       <Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
         Tab 1 section
       </Tab>
@@ -387,14 +387,14 @@ test('should render secondary tabs with no bottom border when passed hasNoBorder
     </Tabs>
   );
 
-  const tabsContainer = screen.queryByLabelText('Secondary bottom border');
+  const tabsContainer = screen.queryByLabelText('Subtab bottom border');
 
   expect(tabsContainer).toHaveClass('pf-m-no-border-bottom');
 });
 
-test('should render secondary tabs with border bottom', () => {
+test('should render subtabs with border bottom', () => {
   render(
-    <Tabs isSecondary id="bottomBorderTabs" aria-label="Secondary bottom border">
+    <Tabs isSubtab id="bottomBorderTabs" aria-label="Subtab bottom border">
       <Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
         Tab 1 section
       </Tab>
@@ -407,7 +407,7 @@ test('should render secondary tabs with border bottom', () => {
     </Tabs>
   );
 
-  const tabsContainer = screen.queryByLabelText('Secondary bottom border');
+  const tabsContainer = screen.queryByLabelText('Subtab bottom border');
 
   expect(tabsContainer).not.toHaveClass('pf-m-no-border-bottom');
 });