@patternfly/react-core 6.0.0-alpha.3 → 6.0.0-alpha.31

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' | 'light300';
+  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__/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');
 });

package/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap

@@ -275,14 +275,14 @@ exports[`should render box tabs 1`] = `
 </DocumentFragment>
 `;
 
-exports[`should render box tabs of light variant 1`] = `
+exports[`should render box tabs of secondary variant 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-tabs pf-m-box pf-m-color-scheme--light-300"
+    class="pf-v5-c-tabs pf-m-box pf-m-secondary"
     data-ouia-component-id="OUIA-Generated-Tabs-15"
     data-ouia-component-type="PF5/Tabs"
     data-ouia-safe="true"
-    id="boxLightVariantTabs"
+    id="boxSecondaryVariantTabs"
   >
     <ul
       class="pf-v5-c-tabs__list"
@@ -355,7 +355,7 @@ exports[`should render box tabs of light variant 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-v5-c-tab-content pf-m-light-300"
+    class="pf-v5-c-tab-content pf-m-secondary"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -366,7 +366,7 @@ exports[`should render box tabs of light variant 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-v5-c-tab-content pf-m-light-300"
+    class="pf-v5-c-tab-content pf-m-secondary"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -378,7 +378,7 @@ exports[`should render box tabs of light variant 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-v5-c-tab-content pf-m-light-300"
+    class="pf-v5-c-tab-content pf-m-secondary"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -708,14 +708,14 @@ exports[`should render filled tabs 1`] = `
 </DocumentFragment>
 `;
 
-exports[`should render secondary tabs 1`] = `
+exports[`should render simple tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v5-c-tabs"
-    data-ouia-component-id="OUIA-Generated-Tabs-11"
+    data-ouia-component-id="OUIA-Generated-Tabs-1"
     data-ouia-component-type="PF5/Tabs"
     data-ouia-safe="true"
-    id="primarieTabs"
+    id="simpleTabs"
   >
     <ul
       class="pf-v5-c-tabs__list"
@@ -726,12 +726,12 @@ exports[`should render secondary tabs 1`] = `
         role="presentation"
       >
         <button
-          aria-controls="pf-tab-section-0-primarieTabs"
+          aria-controls="pf-tab-section-0-tab1"
           aria-selected="true"
           class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF5/TabButton"
           data-ouia-safe="true"
-          id="pf-tab-0-primarieTabs"
+          id="pf-tab-0-tab1"
           role="tab"
           type="button"
         >
@@ -784,129 +784,48 @@ exports[`should render secondary tabs 1`] = `
           </span>
         </button>
       </li>
+      <li
+        class="pf-v5-c-tabs__item"
+        role="presentation"
+      >
+        <button
+          aria-controls="pf-tab-section-3-tab4"
+          aria-selected="false"
+          class="pf-v5-c-tabs__link"
+          data-ouia-component-type="PF5/TabButton"
+          data-ouia-safe="true"
+          id="pf-tab-3-tab4"
+          role="tab"
+          type="button"
+        >
+          <span
+            class="pf-v5-c-tabs__item-icon"
+          >
+            <i>
+              4
+            </i>
+          </span>
+           
+          <span
+            class="pf-v5-c-tabs__item-text"
+          >
+            Users
+          </span>
+           
+        </button>
+      </li>
     </ul>
   </div>
   <section
-    aria-labelledby="pf-tab-0-primarieTabs"
+    aria-labelledby="pf-tab-0-tab1"
     class="pf-v5-c-tab-content"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
-    id="pf-tab-section-0-primarieTabs"
+    id="pf-tab-section-0-tab1"
     role="tabpanel"
     tabindex="0"
   >
-    <div
-      class="pf-v5-c-tabs pf-m-secondary"
-      data-ouia-component-id="OUIA-Generated-Tabs-12"
-      data-ouia-component-type="PF5/Tabs"
-      data-ouia-safe="true"
-      id="secondaryTabs"
-    >
-      <ul
-        class="pf-v5-c-tabs__list"
-        role="tablist"
-      >
-        <li
-          class="pf-v5-c-tabs__item"
-          role="presentation"
-        >
-          <button
-            aria-controls="pf-tab-section-10-secondary tab1"
-            aria-selected="false"
-            class="pf-v5-c-tabs__link"
-            data-ouia-component-type="PF5/TabButton"
-            data-ouia-safe="true"
-            id="pf-tab-10-secondary tab1"
-            role="tab"
-            type="button"
-          >
-            <span
-              class="pf-v5-c-tabs__item-text"
-            >
-              "Secondary Tab item 1"
-            </span>
-          </button>
-        </li>
-        <li
-          class="pf-v5-c-tabs__item"
-          role="presentation"
-        >
-          <button
-            aria-controls="pf-tab-section-11-secondary tab2"
-            aria-selected="false"
-            class="pf-v5-c-tabs__link"
-            data-ouia-component-type="PF5/TabButton"
-            data-ouia-safe="true"
-            id="pf-tab-11-secondary tab2"
-            role="tab"
-            type="button"
-          >
-            <span
-              class="pf-v5-c-tabs__item-text"
-            >
-              "Secondary Tab item 2"
-            </span>
-          </button>
-        </li>
-        <li
-          class="pf-v5-c-tabs__item"
-          role="presentation"
-        >
-          <button
-            aria-controls="pf-tab-section-12-secondary tab3"
-            aria-selected="false"
-            class="pf-v5-c-tabs__link"
-            data-ouia-component-type="PF5/TabButton"
-            data-ouia-safe="true"
-            id="pf-tab-12-secondary tab3"
-            role="tab"
-            type="button"
-          >
-            <span
-              class="pf-v5-c-tabs__item-text"
-            >
-              "Secondary Tab item 3"
-            </span>
-          </button>
-        </li>
-      </ul>
-    </div>
-    <section
-      aria-labelledby="pf-tab-10-secondary tab1"
-      class="pf-v5-c-tab-content"
-      data-ouia-component-type="PF5/TabContent"
-      data-ouia-safe="true"
-      hidden=""
-      id="pf-tab-section-10-secondary tab1"
-      role="tabpanel"
-      tabindex="0"
-    >
-      Secondary Tab 1 section
-    </section>
-    <section
-      aria-labelledby="pf-tab-11-secondary tab2"
-      class="pf-v5-c-tab-content"
-      data-ouia-component-type="PF5/TabContent"
-      data-ouia-safe="true"
-      hidden=""
-      id="pf-tab-section-11-secondary tab2"
-      role="tabpanel"
-      tabindex="0"
-    >
-      Secondary Tab 2 section
-    </section>
-    <section
-      aria-labelledby="pf-tab-12-secondary tab3"
-      class="pf-v5-c-tab-content"
-      data-ouia-component-type="PF5/TabContent"
-      data-ouia-safe="true"
-      hidden=""
-      id="pf-tab-section-12-secondary tab3"
-      role="tabpanel"
-      tabindex="0"
-    >
-      Secondary Tab 3 section
-    </section>
+    Tab 1 section
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
@@ -932,17 +851,29 @@ exports[`should render secondary tabs 1`] = `
   >
     Tab 3 section
   </section>
+  <section
+    aria-labelledby="pf-tab-3-tab4"
+    class="pf-v5-c-tab-content"
+    data-ouia-component-type="PF5/TabContent"
+    data-ouia-safe="true"
+    hidden=""
+    id="pf-tab-section-3-tab4"
+    role="tabpanel"
+    tabindex="0"
+  >
+    Tab 4 section
+  </section>
 </DocumentFragment>
 `;
 
-exports[`should render simple tabs 1`] = `
+exports[`should render subtabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v5-c-tabs"
-    data-ouia-component-id="OUIA-Generated-Tabs-1"
+    data-ouia-component-id="OUIA-Generated-Tabs-11"
     data-ouia-component-type="PF5/Tabs"
     data-ouia-safe="true"
-    id="simpleTabs"
+    id="primarieTabs"
   >
     <ul
       class="pf-v5-c-tabs__list"
@@ -953,12 +884,12 @@ exports[`should render simple tabs 1`] = `
         role="presentation"
       >
         <button
-          aria-controls="pf-tab-section-0-tab1"
+          aria-controls="pf-tab-section-0-primarieTabs"
           aria-selected="true"
           class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF5/TabButton"
           data-ouia-safe="true"
-          id="pf-tab-0-tab1"
+          id="pf-tab-0-primarieTabs"
           role="tab"
           type="button"
         >
@@ -1011,48 +942,129 @@ exports[`should render simple tabs 1`] = `
           </span>
         </button>
       </li>
-      <li
-        class="pf-v5-c-tabs__item"
-        role="presentation"
-      >
-        <button
-          aria-controls="pf-tab-section-3-tab4"
-          aria-selected="false"
-          class="pf-v5-c-tabs__link"
-          data-ouia-component-type="PF5/TabButton"
-          data-ouia-safe="true"
-          id="pf-tab-3-tab4"
-          role="tab"
-          type="button"
-        >
-          <span
-            class="pf-v5-c-tabs__item-icon"
-          >
-            <i>
-              4
-            </i>
-          </span>
-           
-          <span
-            class="pf-v5-c-tabs__item-text"
-          >
-            Users
-          </span>
-           
-        </button>
-      </li>
     </ul>
   </div>
   <section
-    aria-labelledby="pf-tab-0-tab1"
+    aria-labelledby="pf-tab-0-primarieTabs"
     class="pf-v5-c-tab-content"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
-    id="pf-tab-section-0-tab1"
+    id="pf-tab-section-0-primarieTabs"
     role="tabpanel"
     tabindex="0"
   >
-    Tab 1 section
+    <div
+      class="pf-v5-c-tabs pf-m-subtab"
+      data-ouia-component-id="OUIA-Generated-Tabs-12"
+      data-ouia-component-type="PF5/Tabs"
+      data-ouia-safe="true"
+      id="subtabs"
+    >
+      <ul
+        class="pf-v5-c-tabs__list"
+        role="tablist"
+      >
+        <li
+          class="pf-v5-c-tabs__item"
+          role="presentation"
+        >
+          <button
+            aria-controls="pf-tab-section-10-subtab1"
+            aria-selected="false"
+            class="pf-v5-c-tabs__link"
+            data-ouia-component-type="PF5/TabButton"
+            data-ouia-safe="true"
+            id="pf-tab-10-subtab1"
+            role="tab"
+            type="button"
+          >
+            <span
+              class="pf-v5-c-tabs__item-text"
+            >
+              "Subtab item 1"
+            </span>
+          </button>
+        </li>
+        <li
+          class="pf-v5-c-tabs__item"
+          role="presentation"
+        >
+          <button
+            aria-controls="pf-tab-section-11-subtab2"
+            aria-selected="false"
+            class="pf-v5-c-tabs__link"
+            data-ouia-component-type="PF5/TabButton"
+            data-ouia-safe="true"
+            id="pf-tab-11-subtab2"
+            role="tab"
+            type="button"
+          >
+            <span
+              class="pf-v5-c-tabs__item-text"
+            >
+              "Subtab item 2"
+            </span>
+          </button>
+        </li>
+        <li
+          class="pf-v5-c-tabs__item"
+          role="presentation"
+        >
+          <button
+            aria-controls="pf-tab-section-12-subtab3"
+            aria-selected="false"
+            class="pf-v5-c-tabs__link"
+            data-ouia-component-type="PF5/TabButton"
+            data-ouia-safe="true"
+            id="pf-tab-12-subtab3"
+            role="tab"
+            type="button"
+          >
+            <span
+              class="pf-v5-c-tabs__item-text"
+            >
+              "Subtab item 3"
+            </span>
+          </button>
+        </li>
+      </ul>
+    </div>
+    <section
+      aria-labelledby="pf-tab-10-subtab1"
+      class="pf-v5-c-tab-content"
+      data-ouia-component-type="PF5/TabContent"
+      data-ouia-safe="true"
+      hidden=""
+      id="pf-tab-section-10-subtab1"
+      role="tabpanel"
+      tabindex="0"
+    >
+      Subtab 1 section
+    </section>
+    <section
+      aria-labelledby="pf-tab-11-subtab2"
+      class="pf-v5-c-tab-content"
+      data-ouia-component-type="PF5/TabContent"
+      data-ouia-safe="true"
+      hidden=""
+      id="pf-tab-section-11-subtab2"
+      role="tabpanel"
+      tabindex="0"
+    >
+      Subtab 2 section
+    </section>
+    <section
+      aria-labelledby="pf-tab-12-subtab3"
+      class="pf-v5-c-tab-content"
+      data-ouia-component-type="PF5/TabContent"
+      data-ouia-safe="true"
+      hidden=""
+      id="pf-tab-section-12-subtab3"
+      role="tabpanel"
+      tabindex="0"
+    >
+      Subtab 3 section
+    </section>
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
@@ -1078,18 +1090,6 @@ exports[`should render simple tabs 1`] = `
   >
     Tab 3 section
   </section>
-  <section
-    aria-labelledby="pf-tab-3-tab4"
-    class="pf-v5-c-tab-content"
-    data-ouia-component-type="PF5/TabContent"
-    data-ouia-safe="true"
-    hidden=""
-    id="pf-tab-section-3-tab4"
-    role="tabpanel"
-    tabindex="0"
-  >
-    Tab 4 section
-  </section>
 </DocumentFragment>
 `;