@patternfly/react-core 6.0.0-alpha.22 → 6.0.0-alpha.24

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

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

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

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