@patternfly/react-core 4.263.0 → 4.264.0

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>

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

@@ -26,8 +26,6 @@ import {
   OverflowMenuItem,
   PageSection,
   PageSectionVariants,
-  Pagination,
-  PaginationVariant,
   Progress,
   ProgressSize,
   Select,
@@ -70,13 +68,6 @@ interface Repository {
 }
 
 export const TablesAndTabs = () => {
-  // tab properties
-  const [activeTabKey, setActiveTabKey] = React.useState<number>(0);
-  // Toggle currently active tab
-  const handleTabClick = (tabIndex: number) => {
-    setActiveTabKey(tabIndex);
-  };
-
   // secondary tab properties
   const [secondaryActiveTabKey, setSecondaryActiveTabKey] = React.useState<number>(10);
   const handleSecondaryTabClick = (tabIndex: number) => {
@@ -84,7 +75,7 @@ export const TablesAndTabs = () => {
   };
 
   // drawer properties
-  const [isExpanded, setIsExpanded] = React.useState<boolean>(false);
+  const [isExpanded, setIsExpanded] = React.useState<boolean>(true);
 
   // table properties
   // In real usage, this data would come from some external source like an API via props.
@@ -116,7 +107,7 @@ export const TablesAndTabs = () => {
   const allRowsSelected = selectedRepoNames.length === repositories.length;
   const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);
 
-  const [rowClicked, setRowClicked] = React.useState<string>(null);
+  const [rowClicked, setRowClicked] = React.useState<string>('Node 1');
   const isRowClicked = (repo: Repository) => rowClicked === repo.name;
 
   const defaultActions: IAction[] = [
@@ -204,15 +195,6 @@ export const TablesAndTabs = () => {
             />
           </OverflowMenuControl>
         </OverflowMenu>
-        <ToolbarItem variant="pagination">
-          <Pagination
-            itemCount={36}
-            widgetId="pagination-options-menu-bottom"
-            page={1}
-            variant={PaginationVariant.top}
-            isCompact
-          />
-        </ToolbarItem>
       </ToolbarContent>
     </Toolbar>
   );
@@ -239,8 +221,8 @@ export const TablesAndTabs = () => {
           <Tr
             key={repo.name}
             onRowClick={event => {
-              if ((event.target as HTMLInputElement).type !== 'checkbox') {
-                setRowClicked(rowClicked === repo.name ? null : repo.name);
+              if ((event?.target as HTMLInputElement).type !== 'checkbox') {
+                setRowClicked(rowClicked === repo.name ? '' : repo.name);
                 setIsExpanded(!isRowClicked(repo));
               }
             }}
@@ -301,7 +283,7 @@ export const TablesAndTabs = () => {
         <DrawerActions>
           <DrawerCloseButton
             onClick={() => {
-              setRowClicked(null);
+              setRowClicked('');
               setIsExpanded(false);
             }}
           />
@@ -383,18 +365,7 @@ export const TablesAndTabs = () => {
   const tabContent = (
     <Drawer isExpanded={isExpanded} isInline>
       <DrawerContent panelContent={panelContent}>
-        <DrawerContentBody>
-          {toolbar}
-          <Divider />
-          {tableComposable}
-          <Pagination
-            id="page-layout-table-column-management-action-toolbar-bottom"
-            itemCount={36}
-            widgetId="pagination-options-menu-bottom"
-            page={1}
-            variant={PaginationVariant.bottom}
-          />
-        </DrawerContentBody>
+        <DrawerContentBody>{tableComposable}</DrawerContentBody>
       </DrawerContent>
     </Drawer>
   );
@@ -407,24 +378,10 @@ export const TablesAndTabs = () => {
             Nodes
           </Title>
         </PageSection>
-        <PageSection type="tabs" variant={PageSectionVariants.light} padding={{ default: 'noPadding' }}>
-          <Tabs
-            activeKey={activeTabKey}
-            onSelect={(_event, tabIndex) => handleTabClick(Number(tabIndex))}
-            usePageInsets
-            id="tabs-table-tabs-list"
-          >
-            <Tab eventKey={0} title={<TabTitleText>Nodes</TabTitleText>} tabContentId={`tabContent${0}`} />
-            <Tab eventKey={1} title={<TabTitleText>Node connectors</TabTitleText>} tabContentId={`tabContent${1}`} />
-          </Tabs>
-        </PageSection>
         <PageSection variant={PageSectionVariants.light} padding={{ default: 'noPadding' }}>
-          <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
-            <TabContentBody>{tabContent}</TabContentBody>
-          </TabContent>
-          <TabContent key={1} eventKey={1} id={`tabContent${1}`} activeKey={activeTabKey} hidden={1 !== activeTabKey}>
-            <TabContentBody>Node connectors panel</TabContentBody>
-          </TabContent>
+          {toolbar}
+          <Divider />
+          {tabContent}
         </PageSection>
       </React.Fragment>
     </DashboardWrapper>

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

@@ -1,152 +0,0 @@
-import React from 'react';
-import {
-  PageSection,
-  Tabs,
-  Tab,
-  TabContent,
-  TabContentBody,
-  TabTitleText,
-  Title,
-  Grid,
-  GridItem,
-  Flex,
-  FlexItem,
-  Card,
-  CardBody,
-  CardHeader
-} from '@patternfly/react-core';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-
-export const GrayTabsDemo: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
-  const [activeNestedTabKey, setActiveNestedTabKey] = React.useState<string | number>(0);
-
-  // Toggle currently active tab
-  const handleTabClick = (_: React.MouseEvent, tabIndex: string | number) => setActiveTabKey(tabIndex);
-
-  // Toggle currently active nested tab
-  const handleNestedTabClick = (_: React.MouseEvent, tabIndex: string | number) => setActiveNestedTabKey(tabIndex);
-
-  const tabContent = (
-    <Grid hasGutter>
-      <GridItem xl={8} md={6}>
-        <Card>
-          <CardHeader>
-            <Title headingLevel="h2">Status</Title>
-          </CardHeader>
-          <CardBody>
-            <Flex direction={{ default: 'column' }}>
-              <FlexItem>
-                <Tabs
-                  activeKey={activeNestedTabKey}
-                  isSecondary
-                  onSelect={handleNestedTabClick}
-                  id="nested-tabs-example-tabs-list"
-                >
-                  <Tab eventKey={10} title={<TabTitleText>Cluster</TabTitleText>} tabContentId={`tabContent${10}`} />
-                  <Tab
-                    eventKey={11}
-                    title={<TabTitleText>Control plane</TabTitleText>}
-                    tabContentId={`tabContent${11}`}
-                  />
-                  <Tab eventKey={12} title={<TabTitleText>Operators</TabTitleText>} tabContentId={`tabContent${12}`} />
-                  <Tab
-                    eventKey={13}
-                    title={<TabTitleText>Virtualization</TabTitleText>}
-                    tabContentId={`tabContent${13}`}
-                  />
-                </Tabs>
-              </FlexItem>
-              <FlexItem>
-                <TabContent
-                  key={10}
-                  eventKey={10}
-                  id={`tabContent${10}`}
-                  activeKey={activeNestedTabKey}
-                  hidden={10 !== activeNestedTabKey}
-                >
-                  <TabContentBody>
-                    {
-                      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in odio porttitor, feugiat risus in, feugiat arcu. Nullam euismod enim eget fringilla condimentum. Maecenas tincidunt et metus id aliquet. Integer et fermentum purus. Nulla tempor velit arcu, vitae semper purus iaculis at. Sed malesuada auctor luctus. Pellentesque et leo urna. Aliquam vitae felis congue lacus mattis fringilla. Nullam et ultricies erat, sed dignissim elit. Cras mattis pulvinar aliquam. In ac est nulla. Pellentesque fermentum nibh ac sapien porta, ut congue orci aliquam. Sed nisl est, tempor eu pharetra eget, ullamcorper ut augue. Vestibulum eleifend libero eu nulla cursus lacinia.'
-                    }
-                  </TabContentBody>
-                </TabContent>
-                <TabContent
-                  key={11}
-                  eventKey={11}
-                  id={`tabContent${11}`}
-                  activeKey={activeNestedTabKey}
-                  hidden={11 !== activeNestedTabKey}
-                >
-                  <TabContentBody>Control plane panel</TabContentBody>
-                </TabContent>
-                <TabContent
-                  key={12}
-                  eventKey={12}
-                  id={`tabContent${12}`}
-                  activeKey={activeNestedTabKey}
-                  hidden={12 !== activeNestedTabKey}
-                >
-                  <TabContentBody>Operators panel</TabContentBody>
-                </TabContent>
-                <TabContent
-                  key={13}
-                  eventKey={13}
-                  id={`tabContent${13}`}
-                  activeKey={activeNestedTabKey}
-                  hidden={13 !== activeNestedTabKey}
-                >
-                  <TabContentBody>Virtualization panel</TabContentBody>
-                </TabContent>
-              </FlexItem>
-            </Flex>
-          </CardBody>
-        </Card>
-      </GridItem>
-      <GridItem xl={4} md={6}>
-        <Flex direction={{ default: 'column' }} className="pf-u-h-100">
-          <FlexItem flex={{ default: 'flex_1' }}>
-            <Card isFullHeight>
-              <CardHeader>
-                <Title headingLevel="h2">Title of Card</Title>
-              </CardHeader>
-            </Card>
-          </FlexItem>
-          <FlexItem flex={{ default: 'flex_1' }}>
-            <Card isFullHeight>
-              <CardHeader>
-                <Title headingLevel="h2">Title of Card</Title>
-              </CardHeader>
-            </Card>
-          </FlexItem>
-        </Flex>
-      </GridItem>
-    </Grid>
-  );
-
-  return (
-    <DashboardWrapper hasPageTemplateTitle>
-      <PageSection type="tabs" isWidthLimited>
-        <Tabs
-          activeKey={activeTabKey}
-          onSelect={handleTabClick}
-          usePageInsets
-          isBox
-          variant="light300"
-          id="open-tabs-example-tabs-list"
-        >
-          <Tab eventKey={0} title={<TabTitleText>Cluster 1</TabTitleText>} tabContentId={`tabContent${0}`} />
-          <Tab eventKey={1} title={<TabTitleText>Cluster 2</TabTitleText>} tabContentId={`tabContent${1}`} />
-        </Tabs>
-      </PageSection>
-      <PageSection isWidthLimited>
-        <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
-          <TabContentBody>{tabContent}</TabContentBody>
-        </TabContent>
-        <TabContent key={1} eventKey={1} id={`tabContent${1}`} activeKey={activeTabKey} hidden={1 !== activeTabKey}>
-          <TabContentBody>Cluster 2 panel</TabContentBody>
-        </TabContent>
-      </PageSection>
-    </DashboardWrapper>
-  );
-};