@patternfly/react-core 4.208.12 → 4.208.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.208.12",
+  "version": "4.208.13",
   "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",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.59.12",
-    "@patternfly/react-styles": "^4.58.12",
-    "@patternfly/react-tokens": "^4.60.12",
+    "@patternfly/react-icons": "^4.59.13",
+    "@patternfly/react-styles": "^4.58.13",
+    "@patternfly/react-tokens": "^4.60.13",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "29bbfb4f27300b3d03b244e41b56fa79a37040d2"
+  "gitHead": "9595ee060320621567e7d14e2b11240eb8dc37d2"
 }

package/src/components/Tabs/Tabs.tsx

@@ -41,8 +41,10 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
   isBox?: boolean;
   /** Enables vertical tab styling */
   isVertical?: boolean;
-  /** Enables no border bottom tab styling */
+  /** Enables border bottom tab styling on tabs. Defaults to true. To remove the bottom border, set this prop to false. */
   hasBorderBottom?: boolean;
+  /** Enables border bottom styling for secondary tabs */
+  hasSecondaryBorderBottom?: boolean;
   /** Aria-label for the left scroll button */
   leftScrollAriaLabel?: string;
   /** Aria-label for the right scroll button */
@@ -292,6 +294,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
       isVertical,
       isBox,
       hasBorderBottom,
+      hasSecondaryBorderBottom,
       leftScrollAriaLabel,
       rightScrollAriaLabel,
       'aria-label': ariaLabel,
@@ -361,6 +364,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
             showScrollButtons && !isVertical && styles.modifiers.scrollable,
             usePageInsets && styles.modifiers.pageInsets,
             !hasBorderBottom && styles.modifiers.noBorderBottom,
+            hasSecondaryBorderBottom && styles.modifiers.borderBottom,
             formatBreakpointMods(inset, styles),
             variantStyle[variant],
             className

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { Tabs } from '../Tabs';
 import { Tab } from '../Tab';
 import { TabTitleText } from '../TabTitleText';
@@ -350,3 +350,42 @@ test('should render tabs with no bottom border', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
+test('should not render tabs with secondary border bottom when not passed hasSecondaryBorderBottom', () => {
+  render(
+    <Tabs id="noBottomBorderTabs" aria-label="Secondary bottom border">
+      <Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
+        Tab 1 section
+      </Tab>
+      <Tab id="tab2" eventKey={1} title={<TabTitleText>"Tab item 2"</TabTitleText>}>
+        Tab 2 section
+      </Tab>
+      <Tab id="tab3" eventKey={2} title={<TabTitleText>"Tab item 3"</TabTitleText>}>
+        Tab 3 section
+      </Tab>
+    </Tabs>
+  );
+
+  const tabsContainer = screen.queryByLabelText('Secondary bottom border');
+
+  expect(tabsContainer).not.toHaveClass('pf-m-border-bottom');
+});
+
+test('should render tabs with secondary border bottom when passed hasSecondaryBorderBottom', () => {
+  render(
+    <Tabs id="noBottomBorderTabs" aria-label="Secondary bottom border" hasSecondaryBorderBottom>
+      <Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
+        Tab 1 section
+      </Tab>
+      <Tab id="tab2" eventKey={1} title={<TabTitleText>"Tab item 2"</TabTitleText>}>
+        Tab 2 section
+      </Tab>
+      <Tab id="tab3" eventKey={2} title={<TabTitleText>"Tab item 3"</TabTitleText>}>
+        Tab 3 section
+      </Tab>
+    </Tabs>
+  );
+
+  const tabsContainer = screen.queryByLabelText('Secondary bottom border');
+
+  expect(tabsContainer).toHaveClass('pf-m-border-bottom');
+});

package/src/components/Wizard/Wizard.tsx

@@ -381,6 +381,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
               return (
                 <WizardNavItem
                   key={index}
+                  id={step.id}
                   content={step.name}
                   isExpandable={isNavExpandable}
                   isCurrent={hasActiveChild}
@@ -399,6 +400,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
                       return (
                         <WizardNavItem
                           key={`child_${indexChild}`}
+                          id={childStep.id}
                           content={childStep.name}
                           isCurrent={activeStep.name === childStep.name}
                           isDisabled={!enabled}
@@ -417,6 +419,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
               <WizardNavItem
                 {...step.stepNavItemProps}
                 key={index}
+                id={step.id}
                 content={step.name}
                 isCurrent={activeStep.name === step.name}
                 isDisabled={!enabled}

package/src/components/Wizard/WizardNavItem.tsx

@@ -22,6 +22,8 @@ export interface WizardNavItemProps {
   href?: string;
   /** Flag indicating that this NavItem has child steps and is expandable */
   isExpandable?: boolean;
+  /** The id for the nav item */
+  id?: string | number;
 }
 
 export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
@@ -34,6 +36,7 @@ export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
   navItemComponent = 'button',
   href = null,
   isExpandable = false,
+  id,
   ...rest
 }: WizardNavItemProps) => {
   const NavItemComponent = navItemComponent;
@@ -69,6 +72,7 @@ export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
       <NavItemComponent
         {...rest}
         {...(navItemComponent === 'a' ? { ...linkProps } : { ...btnProps })}
+        {...(id && { id: id.toString() })}
         onClick={() => (isExpandable ? setIsExpanded(!isExpanded || isCurrent) : onNavItemClick(step))}
         className={css(
           styles.wizardNavLink,

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

@@ -5,24 +5,27 @@ import { Wizard, WizardStepFunctionType, WizardStep } from '../Wizard';
 describe('Wizard', () => {
   test('Wizard should match snapshot', () => {
     const steps: WizardStep[] = [
-      { name: 'A', component: <p>Step 1</p> },
+      { name: 'A', id: "step-A", component: <p>Step 1</p> },
       {
         name: 'B',
+        id: "step-B",
         steps: [
           {
             name: 'B-1',
+            id: "step-B-1",
             component: <p>Step 2</p>,
             enableNext: true
           },
           {
             name: 'B-2',
+            id: "step-B-2",
             component: <p>Step 3</p>,
             enableNext: false
           }
         ]
       },
-      { name: 'C', component: <p>Step 4</p> },
-      { name: 'D', component: <p>Step 5</p> }
+      { name: 'C', id: "step-C", component: <p>Step 4</p> },
+      { name: 'D', id: "step-D", component: <p>Step 5</p> }
     ];
     const onBack: WizardStepFunctionType = step => {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars

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

@@ -351,6 +351,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
               <button
                 aria-current="step"
                 class="pf-c-wizard__nav-link pf-m-current"
+                id="step-A"
               >
                 A
               </button>
@@ -361,6 +362,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
               <button
                 aria-current="false"
                 class="pf-c-wizard__nav-link"
+                id="step-B"
               >
                 B
               </button>
@@ -373,6 +375,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
                   <button
                     aria-current="false"
                     class="pf-c-wizard__nav-link"
+                    id="step-B-1"
                   >
                     B-1
                   </button>
@@ -383,6 +386,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
                   <button
                     aria-current="false"
                     class="pf-c-wizard__nav-link"
+                    id="step-B-2"
                   >
                     B-2
                   </button>
@@ -395,6 +399,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
               <button
                 aria-current="false"
                 class="pf-c-wizard__nav-link"
+                id="step-C"
               >
                 C
               </button>
@@ -405,6 +410,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
               <button
                 aria-current="false"
                 class="pf-c-wizard__nav-link"
+                id="step-D"
               >
                 D
               </button>

package/src/demos/Tabs.md

@@ -378,65 +378,60 @@ TabsOpenWithSecondaryTabsDemo = () => {
           <Tab eventKey={4} title={<TabTitleText>Terminal</TabTitleText>} tabContentId={`tabContent${4}`} />
         </Tabs>
       </PageSection>
-      <PageSection isWidthLimited variant={PageSectionVariants.light}>
-        <Flex direction={{ default: 'column' }}>
-          <FlexItem>
-            <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
-              <TabContentBody>
-                <Tabs
-                  isSecondary
-                  activeKey={activeTabKeySecondary}
-                  onSelect={handleTabClickSecondary}
-                  inset={{ default: 'insetNone' }}
-                  id="open-with-secondary-tabs-example-tabs-list-secondary"
-                >
-                  <Tab
-                    eventKey={10}
-                    title={<TabTitleText>Pod information</TabTitleText>}
-                    tabContentId={`tabContent${10}`}
-                  />
-                  <Tab
-                    eventKey={11}
-                    title={<TabTitleText>Editable aspects</TabTitleText>}
-                    tabContentId={`tabContent${11}`}
-                  />
-                </Tabs>
-                <TabContent
-                  key={10}
-                  eventKey={10}
-                  id={`tabContent${10}`}
-                  activeKey={activeTabKeySecondary}
-                  hidden={10 !== activeTabKeySecondary}
-                >
-                  <TabContentBody>{tabContent}</TabContentBody>
-                </TabContent>
-                <TabContent
-                  key={11}
-                  eventKey={11}
-                  id={`tabContent${11}`}
-                  activeKey={activeTabKeySecondary}
-                  hidden={11 !== activeTabKeySecondary}
-                >
-                  <TabContentBody>Editable aspects</TabContentBody>
-                </TabContent>
-              </TabContentBody>
-            </TabContent>
-          </FlexItem>
-          <FlexItem>
-            <TabContent key={1} eventKey={1} id={`tabContent${1}`} activeKey={activeTabKey} hidden={1 !== activeTabKey}>
-              <TabContentBody>YAML panel</TabContentBody>
-            </TabContent>
-            <TabContent key={2} eventKey={2} id={`tabContent${2}`} activeKey={activeTabKey} hidden={2 !== activeTabKey}>
-              <TabContentBody>Environment panel</TabContentBody>
-            </TabContent>
-            <TabContent key={3} eventKey={3} id={`tabContent${3}`} activeKey={activeTabKey} hidden={3 !== activeTabKey}>
-              <TabContentBody>Events panel</TabContentBody>
+      <PageSection isWidthLimited variant={PageSectionVariants.light} padding={{ default: 'noPadding' }}>
+        <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
+          <TabContentBody>
+            <Tabs
+              isSecondary
+              hasSecondaryBorderBottom
+              activeKey={activeTabKeySecondary}
+              onSelect={handleTabClickSecondary}
+              usePageInsets
+              id="open-with-secondary-tabs-example-tabs-list-secondary"
+            >
+              <Tab
+                eventKey={10}
+                title={<TabTitleText>Pod information</TabTitleText>}
+                tabContentId={`tabContent${10}`}
+              />
+              <Tab
+                eventKey={11}
+                title={<TabTitleText>Editable aspects</TabTitleText>}
+                tabContentId={`tabContent${11}`}
+              />
+            </Tabs>
+            <TabContent
+              key={10}
+              eventKey={10}
+              id={`tabContent${10}`}
+              activeKey={activeTabKeySecondary}
+              hidden={10 !== activeTabKeySecondary}
+            >
+              <TabContentBody hasPadding>{tabContent}</TabContentBody>
             </TabContent>
-            <TabContent key={4} eventKey={4} id={`tabContent${4}`} activeKey={activeTabKey} hidden={4 !== activeTabKey}>
-              <TabContentBody>Terminal panel</TabContentBody>
+            <TabContent
+              key={11}
+              eventKey={11}
+              id={`tabContent${11}`}
+              activeKey={activeTabKeySecondary}
+              hidden={11 !== activeTabKeySecondary}
+            >
+              <TabContentBody>Editable aspects</TabContentBody>
             </TabContent>
-          </FlexItem>
-        </Flex>
+          </TabContentBody>
+        </TabContent>
+        <TabContent key={1} eventKey={1} id={`tabContent${1}`} activeKey={activeTabKey} hidden={1 !== activeTabKey}>
+          <TabContentBody>YAML panel</TabContentBody>
+        </TabContent>
+        <TabContent key={2} eventKey={2} id={`tabContent${2}`} activeKey={activeTabKey} hidden={2 !== activeTabKey}>
+          <TabContentBody>Environment panel</TabContentBody>
+        </TabContent>
+        <TabContent key={3} eventKey={3} id={`tabContent${3}`} activeKey={activeTabKey} hidden={3 !== activeTabKey}>
+          <TabContentBody>Events panel</TabContentBody>
+        </TabContent>
+        <TabContent key={4} eventKey={4} id={`tabContent${4}`} activeKey={activeTabKey} hidden={4 !== activeTabKey}>
+          <TabContentBody>Terminal panel</TabContentBody>
+        </TabContent>
       </PageSection>
     </DashboardWrapper>
   );
@@ -467,6 +462,7 @@ TabsOpenWithSecondaryTabsDemo = () => {
 
 ```js isFullscreen file="./examples/Tabs/ModalTabs.tsx"
 ```
+
 ### Gray tabs
 
 ```js isFullscreen file="./examples/Tabs/GrayTabs.tsx"