@patternfly/react-core 4.262.0 → 4.264.0

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

@@ -1,5 +1,50 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders tab action 1`] = `
+<DocumentFragment>
+  <li
+    class="pf-c-tabs__item pf-m-action"
+    role="presentation"
+  >
+    <button
+      aria-controls="pf-tab-section-1-"
+      aria-selected="false"
+      class="pf-c-tabs__link"
+      data-ouia-component-type="PF4/TabButton"
+      data-ouia-safe="true"
+      id="pf-tab-1-"
+      role="tab"
+      type="button"
+    >
+      <span
+        class="pf-c-tabs__item-text"
+      >
+        "Tab item 2"
+      </span>
+    </button>
+    <span
+      class="pf-c-tabs__item-action"
+    >
+      <button
+        aria-disabled="false"
+        aria-label="Tab action"
+        class="pf-c-button pf-m-plain"
+        data-ouia-component-id="OUIA-Generated-Button-plain-1"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        type="button"
+      >
+        <span
+          class="pf-c-tabs__item-action-icon"
+        >
+          test
+        </span>
+      </button>
+    </span>
+  </li>
+</DocumentFragment>
+`;
+
 exports[`should not render anything 1`] = `
 <DocumentFragment>
   <li

package/src/components/Tabs/examples/Tabs.md

@@ -12,6 +12,8 @@ import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon';
 import ServerIcon from '@patternfly/react-icons/dist/esm/icons/server-icon';
 import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon';
 import ProjectDiagramIcon from '@patternfly/react-icons/dist/esm/icons/project-diagram-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 Most tab variations are available as open (default) or box style tabs. Select the 'isBox' checkbox to preview an example with box styled tabs.
 The Tabs items background can be also toggled with 'Tab light variation' checkbox.
@@ -458,7 +460,15 @@ class VerticalTabs extends React.Component {
           aria-label="Tabs in the vertical example"
           role="region"
         >
-          <Tab eventKey={0} title={<TabTitleText aria-label="vertical" role="region">Users</TabTitleText>} aria-label="Vertical example content users">
+          <Tab
+            eventKey={0}
+            title={
+              <TabTitleText aria-label="vertical" role="region">
+                Users
+              </TabTitleText>
+            }
+            aria-label="Vertical example content users"
+          >
             Users
           </Tab>
           <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>}>
@@ -591,7 +601,11 @@ class VerticalExpandableUncontrolledTabs extends React.Component {
         aria-label="Tabs in the vertical expandable uncontrolled example"
         role="region"
       >
-        <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} aria-label="Vertical expandable uncontrolled content users">
+        <Tab
+          eventKey={0}
+          title={<TabTitleText>Users</TabTitleText>}
+          aria-label="Vertical expandable uncontrolled content users"
+        >
           Users
         </Tab>
         <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>}>
@@ -1206,7 +1220,12 @@ class TabsNav extends React.Component {
         component={TabsComponent.nav}
         aria-label="Tabs in the nav element example"
       >
-        <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} href="#users"  aria-label="Nav element content users">
+        <Tab
+          eventKey={0}
+          title={<TabTitleText>Users</TabTitleText>}
+          href="#users"
+          aria-label="Nav element content users"
+        >
           Users
         </Tab>
         <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>} href="#containers">
@@ -1267,7 +1286,12 @@ class SecondaryTabsNav extends React.Component {
         component={TabsComponent.nav}
         aria-label="Tabs in the sub tabs with nav element example"
       >
-        <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} href="#" aria-label="Subtabs with nav content users">
+        <Tab
+          eventKey={0}
+          title={<TabTitleText>Users</TabTitleText>}
+          href="#"
+          aria-label="Subtabs with nav content users"
+        >
           <Tabs
             activeKey={this.state.activeTabKey2}
             isSecondary
@@ -1423,7 +1447,12 @@ const TabContentWithBody = () => {
 
   return (
     <React.Fragment>
-      <Tabs activeKey={activeTabKey} onSelect={handleTabClick} aria-label="Tabs in the body and padding example" role="region">
+      <Tabs
+        activeKey={activeTabKey}
+        onSelect={handleTabClick}
+        aria-label="Tabs in the body and padding example"
+        role="region"
+      >
         <Tab
           eventKey={0}
           title={<TabTitleText>Tab item 1</TabTitleText>}
@@ -1447,20 +1476,10 @@ const TabContentWithBody = () => {
         <TabContent eventKey={0} id="tab1SectionBodyPadding" ref={contentRef1}>
           <TabContentBody hasPadding> Tab 1 section with body and padding </TabContentBody>
         </TabContent>
-        <TabContent
-          eventKey={1}
-          id="tab2SectionBodyPadding"
-          ref={contentRef2}
-          hidden
-        >
+        <TabContent eventKey={1} id="tab2SectionBodyPadding" ref={contentRef2} hidden>
           <TabContentBody hasPadding> Tab 2 section with body and padding </TabContentBody>
         </TabContent>
-        <TabContent
-          eventKey={2}
-          id="tab3SectionBodyPadding"
-          ref={contentRef3}
-          hidden
-        >
+        <TabContent eventKey={2} id="tab3SectionBodyPadding" ref={contentRef3} hidden>
           <TabContentBody hasPadding> Tab 3 section with body and padding </TabContentBody>
         </TabContent>
       </div>
@@ -1597,11 +1616,26 @@ class ToggledSeparateContent extends React.Component {
           aria-label="Tabs in the toggled separate content example"
           role="region"
         >
-          <Tab eventKey={0} title="Tab item 1" tabContentId="tab1SectionSeparateContent" tabContentRef={this.contentRef1} />
+          <Tab
+            eventKey={0}
+            title="Tab item 1"
+            tabContentId="tab1SectionSeparateContent"
+            tabContentRef={this.contentRef1}
+          />
           {!isTab2Hidden && (
-            <Tab eventKey={1} title="Tab item 2" tabContentId="tab2SectionSeparateContent" tabContentRef={this.contentRef2} />
+            <Tab
+              eventKey={1}
+              title="Tab item 2"
+              tabContentId="tab2SectionSeparateContent"
+              tabContentRef={this.contentRef2}
+            />
           )}
-          <Tab eventKey={2} title="Tab item 3" tabContentId="tab3SectionSeparateContent" tabContentRef={this.contentRef3} />
+          <Tab
+            eventKey={2}
+            title="Tab item 3"
+            tabContentId="tab3SectionSeparateContent"
+            tabContentRef={this.contentRef3}
+          />
         </Tabs>
         <div>
           <TabContent
@@ -1645,3 +1679,13 @@ To enable closeable tabs, pass the `onClose` property to `Tabs`, and to enable t
 
 ```ts file="./TabsDynamic.tsx" isBeta
 ```
+
+### Help action
+
+```ts file="./TabsHelp.tsx" isBeta
+```
+
+### Help and close actions
+
+```ts file="./TabsHelpAndClose.tsx" isBeta
+```

package/src/components/Tabs/examples/TabsHelp.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Tabs, Tab, TabTitleText, TabAction, Popover } from '@patternfly/react-core';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+
+export const TabsHelp: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = React.useState<number>(0);
+
+  const tabs = ['Users', 'Containers', 'Database', 'Disabled', 'ARIA disabled', 'Help disabled'];
+
+  const helpPopover = (header: string, popoverRef: React.RefObject<any>) => (
+    <Popover
+      headerContent={<div>{header}</div>}
+      bodyContent={
+        <div>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
+        </div>
+      }
+      footerContent="Popover footer"
+      reference={popoverRef}
+    />
+  );
+
+  return (
+    <Tabs
+      activeKey={activeTabKey}
+      onSelect={(event: any, tabIndex: string | number) => setActiveTabKey(tabIndex as number)}
+      aria-label="Tabs in the help action example"
+      role="region"
+    >
+      {tabs.map((tab, index) => {
+        const ref = React.createRef<HTMLElement>();
+
+        return (
+          <Tab
+            key={index}
+            eventKey={index}
+            aria-label={`Help action content - ${tab}`}
+            title={<TabTitleText>{tab}</TabTitleText>}
+            {...(tab === 'Disabled' && { isDisabled: true })}
+            {...(tab === 'ARIA disabled' && { isAriaDisabled: true })}
+            actions={
+              <>
+                <TabAction
+                  isHelpAction
+                  aria-label={`Help action for ${tab}`}
+                  ref={ref}
+                  {...(tab === 'Help disabled' && { isDisabled: true })}
+                >
+                  <HelpIcon />
+                </TabAction>
+                {helpPopover(`Help popover for ${tab}`, ref)}
+              </>
+            }
+          >
+            {tab}
+          </Tab>
+        );
+      })}
+    </Tabs>
+  );
+};

package/src/components/Tabs/examples/TabsHelpAndClose.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { Tabs, Tab, TabTitleText, Popover, TabAction } from '@patternfly/react-core';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+
+export const TabsHelpAndClose: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = React.useState<number>(0);
+  const [tabs, setTabs] = React.useState<string[]>(['Terminal 1', 'Terminal 2', 'Terminal 3']);
+  const tabComponentRef = React.useRef<any>();
+  const firstMount = React.useRef(true);
+
+  const onClose = (event: any, tabIndex: string | number) => {
+    const tabIndexNum = tabIndex as number;
+    let nextTabIndex = activeTabKey;
+    if (tabIndexNum < activeTabKey) {
+      // if a preceding tab is closing, keep focus on the new index of the current tab
+      nextTabIndex = activeTabKey - 1 > 0 ? activeTabKey - 1 : 0;
+    } else if (activeTabKey === tabs.length - 1) {
+      // if the closing tab is the last tab, focus the preceding tab
+      nextTabIndex = tabs.length - 2 > 0 ? tabs.length - 2 : 0;
+    }
+    setActiveTabKey(nextTabIndex);
+    setTabs(tabs.filter((tab, index) => index !== tabIndex));
+  };
+
+  const helpPopover = (header: string, popoverRef: React.RefObject<any>) => (
+    <Popover
+      headerContent={<div>{header}</div>}
+      bodyContent={
+        <div>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
+        </div>
+      }
+      footerContent="Popover footer"
+      reference={popoverRef}
+    />
+  );
+
+  React.useEffect(() => {
+    if (firstMount.current) {
+      firstMount.current = false;
+      return;
+    } else {
+      const first = tabComponentRef.current.tabList.current.childNodes[activeTabKey];
+      first && first.firstChild.focus();
+    }
+  }, [tabs]);
+
+  return (
+    <Tabs
+      activeKey={activeTabKey}
+      onSelect={(event: any, tabIndex: string | number) => setActiveTabKey(tabIndex as number)}
+      aria-label="Tabs in the help enabled and closeable example"
+      role="region"
+      ref={tabComponentRef}
+    >
+      {tabs.map((tab, index) => {
+        const ref = React.createRef<HTMLElement>();
+
+        return (
+          <Tab
+            key={index}
+            eventKey={index}
+            aria-label={`Help action and closable content - ${tab}`}
+            title={<TabTitleText>{tab}</TabTitleText>}
+            actions={
+              <>
+                <TabAction isHelpAction aria-label={`Help for ${tab}`} ref={ref}>
+                  <HelpIcon />
+                </TabAction>
+                <TabAction aria-label={`Close ${tab}`} onClick={e => onClose(e, index)} isDisabled={tabs.length === 1}>
+                  <TimesIcon />
+                </TabAction>
+                {helpPopover(`Help popover for ${tab}`, ref)}
+              </>
+            }
+          >
+            {tab}
+          </Tab>
+        );
+      })}
+    </Tabs>
+  );
+};

package/src/components/Tabs/index.ts

@@ -1,4 +1,5 @@
 export * from './Tab';
+export * from './TabAction';
 export * from './Tabs';
 export * from './TabContent';
 export * from './TabContentBody';

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

@@ -10,7 +10,9 @@ exports[`tooltip renders 1`] = `
 
 exports[`tooltip renders in strict mode 1`] = `
 <DocumentFragment>
-  <div>
+  <div
+    style="display: contents;"
+  >
     <div>
       Toggle tooltip
     </div>

package/src/demos/Tabs.md

@@ -453,17 +453,7 @@ TabsOpenWithSecondaryTabsDemo = () => {
 ```js isFullscreen file="./examples/Tabs/TabsAndTable.tsx"
 ```
 
-### Tables and tabs, auto width tabs
-
-```js isFullscreen file="./examples/Tabs/TabsAndTablesAutoWidthTabs.tsx"
-```
-
 ### Modal tabs
 
 ```js isFullscreen file="./examples/Tabs/ModalTabs.tsx"
 ```
-
-### Gray tabs
-
-```js isFullscreen file="./examples/Tabs/GrayTabs.tsx"
-```

package/src/demos/examples/DashboardWrapper.js

@@ -33,6 +33,7 @@ export const PageTemplateTitle = (
     </TextContent>
   </PageSection>
 );
+
 export default class DashboardWrapper extends React.Component {
   constructor(props) {
     super(props);

package/src/demos/examples/Tabs/ModalTabs.tsx

@@ -47,8 +47,8 @@ const products: Product[] = [
 ];
 
 export const ModalTabs: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
-  const [selectedProduct, setSelectedProduct] = React.useState<Product>();
+  const [isModalOpen, setIsModalOpen] = React.useState(true);
+  const [selectedProduct, setSelectedProduct] = React.useState<Product>(products[0]);
   const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
 
   const onCardClick = React.useCallback(
@@ -114,7 +114,7 @@ export const ModalTabs: React.FunctionComponent = () => {
         <Modal variant={ModalVariant.small} title={selectedProduct.name} isOpen={isModalOpen} onClose={closeModal}>
           <Grid hasGutter>
             <GridItem>
-              <Tabs activeKey={activeTabKey} onSelect={onTabSelect} isSecondary>
+              <Tabs activeKey={activeTabKey} onSelect={onTabSelect} isSecondary hasSecondaryBorderBottom>
                 <Tab eventKey={0} tabContentId="details-tab" title={<TabTitleText>Details</TabTitleText>} />
                 <Tab eventKey={1} tabContentId="doc-tab" title={<TabTitleText>Documentation</TabTitleText>} />
               </Tabs>

package/src/demos/examples/Tabs/NestedTabs.tsx

@@ -12,6 +12,7 @@ import {
   TabContentBody,
   TabTitleText,
   Title,
+  TitleSizes,
   Flex,
   FlexItem
 } from '@patternfly/react-core';
@@ -32,7 +33,9 @@ export const NestedTabs: React.FunctionComponent = () => {
       <GridItem xl={8} md={6}>
         <Card>
           <CardHeader>
-            <Title headingLevel="h2">Status</Title>
+            <Title headingLevel="h2" size={TitleSizes.lg}>
+              Status
+            </Title>
           </CardHeader>
           <CardBody>
             <Flex direction={{ default: 'column' }}>
@@ -40,6 +43,7 @@ export const NestedTabs: React.FunctionComponent = () => {
                 <Tabs
                   activeKey={activeNestedTabKey}
                   isSecondary
+                  hasSecondaryBorderBottom
                   onSelect={(_event, tabIndex) => handleNestedTabClick(Number(tabIndex))}
                   id="nested-tabs-example-nested-tabs-list"
                 >
@@ -108,14 +112,18 @@ export const NestedTabs: React.FunctionComponent = () => {
           <FlexItem flex={{ default: 'flex_1' }}>
             <Card isFullHeight>
               <CardHeader>
-                <Title headingLevel="h2">Title of Card</Title>
+                <Title headingLevel="h2" size={TitleSizes.lg}>
+                  Title of card
+                </Title>
               </CardHeader>
             </Card>
           </FlexItem>
           <FlexItem flex={{ default: 'flex_1' }}>
             <Card isFullHeight>
               <CardHeader>
-                <Title headingLevel="h2">Title of Card</Title>
+                <Title headingLevel="h2" size={TitleSizes.lg}>
+                  Title of card
+                </Title>
               </CardHeader>
             </Card>
           </FlexItem>

package/src/demos/examples/Tabs/NestedUnindentedTabs.tsx

@@ -14,7 +14,8 @@ import {
   Title,
   Text,
   TextContent,
-  TitleSizes
+  TitleSizes,
+  CardTitle
 } from '@patternfly/react-core';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 
@@ -32,7 +33,7 @@ export const NestedUnindentedTabs: React.FunctionComponent = () => {
     <Grid hasGutter>
       <GridItem>
         <CardHeader>
-          <Title headingLevel="h1" size={TitleSizes['2xl']}>
+          <Title headingLevel="h1" size={TitleSizes.lg}>
             Get started with Red Hat Enterprise Linux
           </Title>
         </CardHeader>
@@ -41,6 +42,7 @@ export const NestedUnindentedTabs: React.FunctionComponent = () => {
         <Tabs
           activeKey={activeNestedTabKey}
           isSecondary
+          hasSecondaryBorderBottom
           onSelect={(_event, tabIndex) => handleNestedTabClick(Number(tabIndex))}
           id="nested-tabs-example-nested-tabs-list"
         >
@@ -68,42 +70,26 @@ export const NestedUnindentedTabs: React.FunctionComponent = () => {
                 </TextContent>
               </GridItem>
               <Grid md={6} xl2={3} hasGutter>
-                <GridItem>
-                  <Card isFullHeight>
-                    <CardHeader>Check system requirements</CardHeader>
-                    <CardBody>
-                      Your physical or virtual machine should meet the <a href="#">system requirement</a>.
-                    </CardBody>
-                  </Card>
-                </GridItem>
-
-                <GridItem>
-                  <Card isFullHeight>
-                    <CardHeader>Download an installation ISO image</CardHeader>
-                    <CardBody>
-                      {' '}
-                      <a href="#">Download</a> the binary DVD ISO.
-                    </CardBody>
-                  </Card>
-                </GridItem>
-                <GridItem>
-                  <Card isFullHeight>
-                    <CardHeader>Create a bootable installation media</CardHeader>
-                    <CardBody>
-                      {' '}
-                      <a href="#">Create</a> a bootable installation media, for example a USB flash drive.
-                    </CardBody>
-                  </Card>
-                </GridItem>
-                <GridItem>
-                  <Card isFullHeight>
-                    <CardHeader>Install and register your system</CardHeader>
-                    <CardBody>
-                      Boot the installation, register your system, attach RHEL subscriptions, and install RHEL from the
-                      Red Hat Content Delivery Network (CDN) using the GUI.
-                    </CardBody>
-                  </Card>
-                </GridItem>
+                <Card isFlat component="div">
+                  <CardTitle>Check system requirements</CardTitle>
+                  <CardBody>
+                    Your physical or virtual machine should meet the <a href="#">system requirement</a>.
+                  </CardBody>
+                </Card>
+                <Card isFlat component="div">
+                  <CardTitle>Download an installation ISO image</CardTitle>
+                  <CardBody>
+                    {' '}
+                    <a href="#">Download</a> the binary DVD ISO.
+                  </CardBody>
+                </Card>
+                <Card isFlat component="div">
+                  <CardTitle>Create a bootable installation media</CardTitle>
+                  <CardBody>
+                    {' '}
+                    <a href="#">Create</a> a bootable installation media, for example a USB flash drive.
+                  </CardBody>
+                </Card>
               </Grid>
             </Grid>
           </TabContentBody>
@@ -143,7 +129,6 @@ export const NestedUnindentedTabs: React.FunctionComponent = () => {
     <DashboardWrapper hasPageTemplateTitle>
       <PageSection type="tabs" isWidthLimited variant="light">
         <Tabs
-          isBox
           activeKey={activeTabKey}
           onSelect={(_event, tabIndex) => handleTabClick(Number(tabIndex))}
           usePageInsets
@@ -155,7 +140,7 @@ export const NestedUnindentedTabs: React.FunctionComponent = () => {
           <Tab eventKey={3} title={<TabTitleText>Support</TabTitleText>} tabContentId={`tabContent${3}`} />
         </Tabs>
       </PageSection>
-      <PageSection variant="light">
+      <PageSection isWidthLimited variant="light">
         <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
           <TabContentBody>What's new panel</TabContentBody>
         </TabContent>